:root{
    --navy:#1b2a38;
    --navy-2:#243847;
    --teal:#2fb6c4;
    --green:#5aa35a;
    --amber:#f2b705;
    --orange:#d9622b;
    --cream:#faf8f3;
    --paper:#fff;
    --ink:#273846;
    --muted:#61717c;
    --line:#dfe7e5;
    --radius:18px;
    --shadow:0 16px 40px rgba(27,42,56,.1);
    --font-head:'Plus Jakarta Sans',sans-serif;
    --font-body:'Manrope',system-ui,sans-serif
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font:400 16px/1.7 var(--font-body)
}
a{
    color:inherit;
    text-decoration:none
}
button,input,textarea{
    font:inherit
}
.shell{
    width:min(1180px,calc(100% - 40px));
    margin:auto
}
.skip-link{
    position:absolute;
    left:1rem;
    top:-4rem;
    background:var(--amber);
    padding:.5rem 1rem;
    z-index:20
}
.skip-link:focus{
    top:1rem
}
.site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:10;
    transition:.3s
}
.site-header.is-scrolled{
    background:rgba(255,255,255,.95);
    box-shadow:0 4px 20px #14253314
}
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:88px;
    transition:.3s
}
.is-scrolled .nav{
    height:70px
}
.brand{
    display:flex;
    align-items:center;
    gap:11px
}
.brand img{
    width:46px;
    height:46px;
    object-fit:contain
}
.brand strong,.brand small{
    display:block;
}
.brand strong{
    font:800 15px/1.2 var(--font-head);
    color:var(--navy)
}
.brand small{
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted)
}
.nav-links{
    display:flex;
    align-items:center;
    gap:27px;
    font-size:13px;
    font-weight:700;
    color:#405360
}
.nav-links a:not(.button){
    position:relative
}
.nav-links a:not(.button):after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:2px;
    background:var(--teal);
    transform:scaleX(0);
    transition:.25s
}
.nav-links a.active,.nav-links a:hover{
    color:var(--navy)
}
.nav-links a.active:after,.nav-links a:hover:after{
    transform:scaleX(1)
}
.button{
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:15px 22px;
    border:0;
    border-radius:999px;
    background:var(--orange);
    color:#fff;
    font-weight:800;
    font-size:14px;
    box-shadow:0 9px 20px #d9622b33;
    transition:.25s;
    cursor:pointer
}
.button:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px #d9622b44
}
.button--small{
    padding:11px 17px;
    font-size:12px
}
.text-link{
    color:var(--navy);
    font-weight:800;
    font-size:14px
}
.text-link span{
    color:var(--orange);
    margin-left:7px
}
.nav-toggle{
    display:none;
    background:none;
    border:0
}
.hero{
    position:relative;
    overflow:hidden;
    padding:150px 0 95px;
    background:var(--cream);
    min-height:650px
}
.hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 82% 40%,#c9f0ec99 0,transparent 31%),radial-gradient(circle at 12% 20%,#f8dfa566 0,transparent 27%)
}
.hero__grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    gap:40px;
    position:relative
}
.eyebrow{
    margin:0 0 16px;
    color:var(--orange);
    font-size:11px;
    letter-spacing:.17em;
    font-weight:800
}
.hero h1{
    font:800 clamp(42px,5.7vw,75px)/1.05 var(--font-head);
    letter-spacing:-.045em;
    color:var(--navy);
    max-width:650px;
    margin:0 0 22px
}
.hero__text{
    font-size:18px;
    line-height:1.7;
    color:var(--muted);
    max-width:575px
}
.hero__actions{
    display:flex;
    align-items:center;
    gap:27px;
    margin-top:32px
}
.pyramid-wrap{
    justify-self:end;
    position:relative;
    width:min(100%,500px);
    padding:24px 0 0
}
.pyramid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    transform:perspective(700px) rotateX(3deg)
}
.tier{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    font:800 clamp(10px,1.2vw,14px)/1.15 var(--font-head);
    min-height:52px;
    padding:8px;
    border-radius:4px 4px 9px 9px;
    opacity:0;
    transform:translateY(28px);
    animation:tier-in .6s cubic-bezier(.2,.8,.3,1) forwards;
    box-shadow:0 10px 15px #1b2a3820
}
.tier--5{
    width:35%;
    background:var(--orange);
    animation-delay:.7s
}
.tier--4{
    width:50%;
    background:var(--amber);
    animation-delay:.52s
}
.tier--3{
    width:65%;
    background:var(--green);
    animation-delay:.34s
}
.tier--2{
    width:81%;
    background:var(--teal);
    animation-delay:.16s
}
.tier--1{
    width:100%;
    background:var(--navy);
    animation-delay:0s
}
.pyramid-note{
    text-align:center;
    margin:22px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700
}
.hero__orb{
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    opacity:.5
}
.hero__orb--one{
    width:250px;
    height:250px;
    right:-80px;
    top:80px;
    background:#f2b7052c
}
.hero__orb--two{
    width:100px;
    height:100px;
    left:47%;
    bottom:25px;
    background:#2fb6c42e
}
@keyframes tier-in{
    to{
        opacity:1;
        transform:none
    }
}
.section{
    padding:110px 0
}
.section--tint{
    background:#edf6f4
}
.about__grid,.contact__grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:90px;
    align-items:center
}
.about__visual{
    position:relative;
    height:430px
}
.about__photo{
    height:100%;
    border-radius:32px;
    background:linear-gradient(145deg,#ffd87b,#75c4bf 65%,#33596d);
    display:flex;
    align-items:flex-end;
    padding:30px;
    color:#fff;
    font:800 24px/1.25 var(--font-head);
    box-shadow:var(--shadow);
    overflow:hidden
}
.about__photo:before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 25% 30%,#fff8 0 6%,transparent 7%),radial-gradient(circle at 64% 25%,#fff6 0 8%,transparent 9%);
    opacity:.6
}
.about__chip{
    position:absolute;
    right:-20px;
    bottom:28px;
    background:var(--orange);
    color:#fff;
    border-radius:12px;
    padding:13px 18px;
    font-weight:800;
    box-shadow:var(--shadow)
}
.sunburst{
    position:absolute;
    right:-23px;
    top:-27px;
    background:var(--amber);
    width:68px;
    height:68px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:30px;
    color:#fff;
    z-index:1
}
.section-copy h2,.section-intro h2,.contact h2{
    font:800 clamp(32px,4vw,48px)/1.15 var(--font-head);
    letter-spacing:-.035em;
    color:var(--navy);
    margin:0 0 24px
}
.section-copy p,.section-intro>p,.contact__copy>p{
    color:var(--muted);
    margin:0 0 18px
}
.section-intro{
    max-width:750px;
    margin-bottom:45px
}
.section-intro--center{
    margin-inline:auto;
    text-align:center
}
.pillars-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.pillar-card,.service-card{
    background:var(--paper);
    border:1px solid #dce8e5;
    border-radius:var(--radius);
    padding:27px;
    transition:.25s
}
.pillar-card:hover,.service-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow)
}
.pillar-card__icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#dff4f0;
    color:var(--teal);
    font-size:23px;
    font-weight:800;
    margin-bottom:17px
}
.pillar-card h3,.service-card h3{
    font:800 17px/1.3 var(--font-head);
    color:var(--navy);
    margin:0 0 10px
}
.pillar-card p,.service-card p{
    font-size:13px;
    line-height:1.65;
    color:var(--muted);
    margin:0
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.service-card{
    position:relative;
    min-height:245px;
    padding-top:54px
}
.service-card__number{
    position:absolute;
    top:22px;
    left:27px;
    color:var(--teal);
    font:800 13px var(--font-head);
    letter-spacing:.12em
}
.additional-services{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    background:var(--navy);
    color:#fff;
    border-radius:var(--radius);
    padding:30px 35px;
    margin-top:28px
}
.additional-services .eyebrow{
    grid-column:1/-1;
    color:var(--amber);
    margin-bottom:-10px
}
.additional-services h3{
    font:800 15px/1.35 var(--font-head);
    margin:0 0 6px
}
.additional-services p{
    font-size:13px;
    color:#c6d3d5;
    margin:0
}
.contact{
    background:#dff2ef
}
.contact h2{
    font-size:clamp(38px,5vw,62px)
}
.contact-card{
    background:#fff;
    border-radius:var(--radius);
    padding:26px 30px;
    margin-top:28px;
    box-shadow:var(--shadow)
}
.contact-card h3{
    font:800 20px var(--font-head);
    margin:0 0 15px
}
.contact-card dl{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin:0
}
.contact-card dt{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--teal);
    font-weight:800
}
.contact-card dd{
    margin:3px 0 0;
    font-size:13px
}
.contact-form{
    background:#fff;
    border-radius:var(--radius);
    padding:35px;
    box-shadow:var(--shadow)
}
.field{
    margin-bottom:18px
}
.field label{
    display:block;
    font-size:12px;
    font-weight:800;
    margin-bottom:7px;
    color:var(--navy)
}
.field em{
    font-weight:400;
    color:var(--muted);
    font-style:normal
}
.field input,.field textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    color:var(--navy);
    background:#fbfdfc;
    outline:0
}
.field input:focus,.field textarea:focus{
    border-color:var(--teal);
    box-shadow:0 0 0 3px #2fb6c422
}
.form-status{
    min-height:0;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700
}
.form-status.success{
    color:var(--green)
}
.form-status.error{
    color:var(--orange)
}
.footer{
    background:var(--navy);
    color:#d5e0e0;
    padding:55px 0 22px
}
.footer__grid{
    display:grid;
    grid-template-columns:1.5fr .7fr .9fr;
    gap:45px;
    padding-bottom:40px
}
.brand--footer strong{
    color:#fff
}
.brand--footer small{
    color:#9db1b6
}
.footer h3{
    font:800 13px var(--font-head);
    color:#fff;
    margin:0 0 13px
}
.footer__grid>div>a:not(.brand),.footer__grid>div>p{
    display:block;
    color:#aebfc1;
    font-size:13px;
    margin:4px 0
}
.logo-slots{
    display:flex;
    gap:8px;
    margin-top:12px
}
.logo-slots span{
    display:grid;
    place-items:center;
    width:64px;
    height:42px;
    border:1px dashed #769093;
    border-radius:7px;
    text-align:center;
    font-size:9px;
    color:#90a8aa
}
.footer__bottom{
    display:flex;
    justify-content:space-between;
    gap:15px;
    border-top:1px solid #ffffff1c;
    padding-top:18px;
    font-size:11px;
    color:#8fa5a8
}
.scroll-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:8;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:var(--orange);
    color:#fff;
    font-size:25px;
    font-weight:800;
    line-height:1;
    box-shadow:0 10px 24px #d9622b55;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:opacity .25s,transform .25s,visibility .25s,background .25s
}
.scroll-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:none
}
.scroll-to-top:hover{
    background:#b94f20;
    transform:translateY(-3px)
}
.scroll-to-top:focus-visible{
    outline:3px solid var(--teal);
    outline-offset:3px
}
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease,transform .7s ease
}
.reveal.is-visible{
    opacity:1;
    transform:none
}
@media (max-width:800px){
    .shell{
        width:min(100% - 32px,600px)
    }
    .nav-toggle{
        display:flex;
        flex-direction:column;
        gap:5px;
        padding:10px;
        z-index:12
    }
    .nav-toggle span{
        display:block;
        width:24px;
        height:2px;
        background:var(--navy);
        transition:.2s
    }
    .nav-links{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        width:min(82vw,320px);
        background:#fff;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        padding:35px;
        gap:24px;
        transform:translateX(100%);
        transition:.3s;
        box-shadow:-10px 0 30px #1b2a3820;
        z-index:11
    }
    .nav-links.is-open{
        transform:none
    }
    .nav-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:#1b2a3866;
        opacity:0;
        pointer-events:none;
        z-index:9;
        transition:.3s
    }
    .nav-overlay.is-open{
        opacity:1;
        pointer-events:auto
    }
    .hero{
        padding:130px 0 75px
    }
    .hero__grid,.about__grid,.contact__grid{
        grid-template-columns:1fr;
        gap:48px
    }
    .hero__copy{
        text-align:center
    }
    .hero h1{
        margin-inline:auto
    }
    .hero__text{
        margin-inline:auto
    }
    .hero__actions{
        justify-content:center;
        flex-wrap:wrap
    }
    .pyramid-wrap{
        justify-self:center;
        width:min(100%,460px)
    }
    .section{
        padding:76px 0
    }
    .about__visual{
        height:340px;
        order:2
    }
    .pillars-grid,.services-grid{
        grid-template-columns:1fr 1fr
    }
    .footer__grid{
        grid-template-columns:1fr 1fr
    }
    .footer__grid>div:first-child{
        grid-column:1/-1
    }
    .contact-card dl{
        grid-template-columns:1fr
    }
}
@media (max-width:520px){
    .scroll-to-top{
        right:16px;
        bottom:16px;
        width:44px;
        height:44px
    }
    .brand strong{
        font-size:12px
    }
    .brand small{
        font-size:8px
    }
    .hero h1{
        font-size:43px
    }
    .hero__actions{
        align-items:stretch;
        flex-direction:column
    }
    .hero__actions .button,.hero__actions .text-link{
        justify-content:center
    }
    .pillars-grid,.services-grid,.additional-services{
        grid-template-columns:1fr
    }
    .additional-services .eyebrow{
        grid-column:auto
    }
    .contact-card dl{
        grid-template-columns:1fr
    }
    .contact-form{
        padding:24px
    }
    .footer__grid{
        grid-template-columns:1fr
    }
    .footer__grid>div:first-child{
        grid-column:auto
    }
    .footer__bottom{
        flex-direction:column
    }
}
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    .tier{
        animation:none;
        opacity:1;
        transform:none
    }
    .reveal{
        opacity:1;
        transform:none;
        transition:none
    }
    .button,.pillar-card,.service-card{
        transition:none
    }
}