/*--Initial------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@font-face{
    font-family: "Inter";
    src: url("../fonts/Inter.ttf");
}
@font-face{
    font-family: "Fraunces";
    src: url("../fonts/Fraunces.ttf");
}
@font-face{
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBM Plex Mono.ttf");
}

* {
    box-sizing: border-box;
}
:root{
    --green-deep:   #1F5449;
    --green-logo:   #3E8E7E;
    --green-tint:   #E7F0EC;
    --navy:         #14293B;
    --blue:         #2C6E92;
    --slate:        #566270;
    --paper:        #F8F9F7;
    --paper-2:      #F1F3F1;
    --ink:          #14201C;
    --line:         #D3DCD8;
    --white:        #FFFFFF;
    --off-white-1:  #AEBBC3;
    --off-white-2:  #B9C6CE;
}
html{
    scroll-behavior: smooth;
}
body{
    -webkit-font-smoothing: antialiased;
    font-family:    "Inter", sans-serif;

    background: var(--paper);
    color:      var(--ink);

    line-height: 1.55;
    font-size:   1rem;
    margin:      0px;
    padding:     0px    
}
h1, h2, h3{
    font-family: "Fraunces", serif;
    color:        var(--navy);

    font-weight:     600;
    margin:          0px;
    letter-spacing: -0.01em;
}
a{
    text-decoration: none;
    color: inherit;
}

.section-head h2{
    font-size:   2.1rem;
    line-height: 1.15;
}
.section-head p{
    color: var(--slate);
    margin-top:    1rem;
    font-size:     1rem;
}
.rule-single{
    background: var(--line);
    height:     1px;
    width:      100%;
}
.wrap{
    transform:   translate(-50%);
    max-width:   calc(100% - 2rem);
    width:       60rem;
    margin-left: 50%;
}
.eyebrow{
    font-family:   "IBM Plex Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size:      0.78rem;
    color:          var(--green-deep);
    
    align-items: center;
    display:     flex;
    flex-wrap:   wrap;

    gap:  0.5rem;
    row-gap: 2px;
}
.eyebrow::before{
    background: var(--green-deep);
    height: 1px;
    width: 2rem;
    content: "";
}
.eyebrow-sep{
    width: 0.5rem;
}

@media (max-width: 468px) and (orientation: portrait){
    :root{
        font-size: 13px;
    }
}
@media (max-width: 768px) and (orientation: landscape){
    :root{
        font-size: 13px;
    }
}

/*--Head---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.head{
    border-bottom:   1px solid var(--line);
    background:    rgba(248,249,247,0.92);
    backdrop-filter: blur(6px);

    position: sticky;
    z-index:  50;
    top:      0px;
    height:   5rem;

    justify-content: center;
    align-items:     center;
    display:         flex;
}
.nav{
    justify-content: space-between;
    align-items:     center;
    display:         flex;
    transform:       none;

    height:     100%;
    margin-left: 0px;
}
.head-logo{
    margin-top: 1rem;
    height:     3rem;
}
.nav .links{
    transition:  ease-in-out 0.1s;
    color:       var(--slate);
    user-select: none;
    display:     flex;
    
    font-weight: 500;
    gap:        2rem;
}
.nav .links a:hover{
    color: var(--green-deep);
}
.nav-cta{
    background: var(--green-deep);
    color:      var(--white);

    padding: 0.6rem 1.2rem;
    border-radius:  0.5rem;
    font-size:     0.88rem;
    font-weight:       600;

    white-space: nowrap;
    transition:  ease-in-out 0.1s;
}
.nav-cta:hover{
    background: var(--navy);
}

@media (max-width: 700px){
    .nav .links{
        display: none;
    }
}
@media (max-width: 768px) and (orientation: portrait){
    .header-logo{
        height: 2.5rem;
    }
    .nav-cta{
        font-size: 0.7rem;
    }
}

/*--Foot---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.foot{
    background: var(--navy);
    color:      var(--off-white-1);
    padding:    2.5rem 0;
}
.foot-row{
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    display:         flex;

    font-size:   0.85rem;
    gap:         1rem;
}
.foot-brand{
    align-items: center;
    display:     flex;
    gap:         1rem;
}
.foot-brand img{
    margin-right: 1rem;
    height:       2rem;
    opacity:      0.9;
}
.foot-links{
    display: flex;
    gap:     2rem;
}
.foot-links a:hover{
    color: var(--white);
}

@media (max-width: 768px) and (orientation: portrait){
    .footer-brand img{
        margin-right: 0.5rem;
    }
    .footer-links{
        gap: 1.5rem;
    }
}

/*--Hero---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.hero{
    padding-bottom: 15rem;
    padding-top:    7rem;

    position: relative;
    overflow: hidden;
}
.hero-grid{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    display: grid;
    gap: 3rem;
}
.hero h1{
    font-size: 3.4rem;
    line-height: 1.05;
    max-width:  30rem;
    margin-top:  1rem;
}
.hero h1 em{
    color:      var(--green-deep);
    font-style: italic;
}
.hero p.lead{
    max-width:    30rem;
    margin-top:  1.5rem;
    font-size:  1.05rem;
    color: var(--slate);
}
.hero-actions{
    margin-top: 3rem;
    gap:        1rem;

    align-items: center;
    display:     flex;
}
.btn-primary{
    background:    var(--navy);
    color:         var(--white);
    padding:       0.8rem 1.6rem;
    border-radius: 0.5rem;
    font-size:     0.92rem;
    font-weight:   600;
}
.btn-primary:hover{
    background: var(--green-deep);
}
.btn-primary:active{
    background: var(--green-deep);
    opacity:    0.9;
}
.btn-ghost{
    border-bottom:  1px solid var(--navy);
    color:          var(--navy);
    font-size:      0.92rem;
    font-weight:    600;
    padding-bottom: 2px;
}

.ledger-card{
    box-shadow: 0 1.5rem 2rem -1.5rem rgba(20,41,59,0.35);
    border:     1px solid var(--line);
    background:    var(--white);
    border-radius: 0.5rem;
    overflow:      hidden;
}
.ledger-card .lc-head{
    font-family:    "IBM Plex Mono", monospace;
    justify-content: space-between;
    align-items:     baseline;
    display:         flex;

    padding:     1rem 1.5rem;
    font-size:       0.78rem;
    letter-spacing:  0.06rem;

    background: var(--navy);
    color:      var(--white);
}
.ledger-card .lc-body{
    padding: 1.25rem;
}
.lc-row{
    border-bottom:   1px dashed var(--line);
    justify-content: space-between;
    display:         flex;
    font-size:       0.92rem;
    padding:         0.7rem 0;
}
.lc-row:last-of-type{
    border-bottom: none;
}
.lc-row .label{
    color: var(--slate);
}
.lc-row .val{
    font-family: "IBM Plex Mono", monospace;
    color: var(--ink);
    font-weight:  500;
}
.lc-total{
    border-bottom: 3px solid var(--ink);
    border-top:    1px solid var(--ink);
    
    justify-content: space-between;
    display:         flex;

    padding-bottom: 0.5rem;
    padding-top:      1rem;
    margin-top:       1rem;
    font-weight:       600;
}
.lc-total .val{
    font-family: "IBM Plex Mono", monospace;
    color:        var(--green-deep);
    font-size:    1.15rem;
}

@media (max-width: 1000px){
    .hero{
        padding-top: 3rem;
    }
    .hero-grid{
        transform:   translate(-50%);
        max-width:   calc(100% - 4rem);
        width:       30rem;
        margin-left: 50%;
        display:     block;
    }
    .ledger-card{
        margin-top: 5rem;
    }
    .eyebrow-sep{
        display: none;
    }
    .eyebrow-part:last-child{
        margin-left: 2.5rem;
    }
}

/*--Stats--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.stats{
    background: var(--navy);
    color:      var(--white);
    padding:    3rem 0;
}
.stats-grid{
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
    display:    grid;
    gap:      1.5rem;
}
.stat-num{
    font-family: "IBM Plex Mono", monospace;
    font-size:    2.3rem;
    font-weight:  600;
    color:        var(--green-logo);
}
.stat-label{
    font-size:        0.85rem;
    margin-top:        0.5rem;
    letter-spacing:    0.02em;
    color: var(--off-white-2);
}

@media (max-width: 768px) and (orientation: portrait){
    .stats-grid{
        text-align: center;
        display:    block;
    }
    .stat-item{
        transform:     translate(-50%);
        margin-bottom: 2rem;
        margin-left:   50%;
    }
}
@media (max-width: 768px) and (orientation: landscape){
    .stats-grid{
        text-align: center;
    }
}

/*--Services-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.services{
    padding-bottom: 8rem;
    padding-top:    6rem;
}
.services .wrap{
    width: 72rem;
}
.services .section-head h2{
    margin-top: 2rem;
    max-width: 40rem;
}
.services .section-head p{
    margin-bottom: 4rem;
    margin-top:    1rem;
    max-width:    40rem;
}

.services-grid{
    grid-template-columns: repeat(5, 1fr);
    display: grid;
    gap:     1px;

    border: 1px solid var(--line);
    background:       var(--line);
    border-radius:    0.5rem;
    overflow:         hidden;
}
.service-card{
    background: var(--white);
    padding:    2rem 1.5rem;
    transition: ease-in-out 0.1s;
}
.service-card:hover{
    background: var(--green-tint);
}
.service-index{
    font-family:   "IBM Plex Mono", monospace;
    font-size:      0.78rem;
    letter-spacing: 0.05rem;
    color:          var(--green-deep);
}
.service-card h3{
    font-size:  1.15rem;
    margin-top: 1rem;
    color:      var(--navy);
}
.service-card p{
    margin-top: 0.5rem;
    font-size:  0.9rem;
    color:      var(--slate);
}

@media (max-width: 1000px){
    .services-grid{
        transform:   translate(-50%);
        max-width:   calc(100% - 2rem);
        width:       30rem;
        margin-left: 50%;
        display:     block;
    }
    .services .wrap{
        transform:   translate(-50%);
        max-width:   calc(100% - 2rem);
        width:       30rem;
        margin-left: 50%;
    }
    .service-card{
        border-bottom: 1px solid var(--line);
    }
}
@media (max-width: 768px) and (orientation: portrait){
    .services-grid{
        max-width: calc(100% - 4rem);
    }
    .services .wrap{
        max-width: calc(100% - 4rem);
    }
}

/*--About--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.about{
    background:     var(--paper-2);
    padding-bottom: 8rem;
    padding-top:    6rem;
}
.about-grid{
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
    display:     grid;
    gap:         4rem;
}
.about-grid h2{
    font-size: 2.1rem;
    line-height: 1.15;
    margin-top:  2rem;
}
.about-copy p{
    color:      var(--slate);
    margin-top: 1rem;
    font-size:  1rem;
}
.about-copy p:first-of-type{
    margin-top: 1.5rem;
}
.service-area{
    border-left: 3px solid var(--green-deep);
    background:  var(--white);
    color:       var(--ink);

    margin-top:   1.5rem;
    padding: 1rem 1.2rem;
    font-size:   0.92rem;
}
.service-area .label{
    font-family:   "IBM Plex Mono", monospace;
    text-transform: uppercase;
    font-size:      0.72rem;
    letter-spacing: 0.1em;
    
    color:         var(--green-deep);
    margin-bottom: 0.5rem;
    display:       block;
}

.credentials{
    flex-direction: column;
    display:        flex;
    gap:            0;
    margin-top:     3.5rem;
}
.cred-row{
    border-bottom: 1px solid var(--line);
    display: flex;
    gap:     1rem;
    padding: 1.25rem 0;
}
.cred-row:first-child{
    padding-top: 0;
}
.cred-mark{
    font-family: "IBM Plex Mono", monospace;
    color:        var(--green-deep);
    font-weight:  600;
    flex-shrink:  0;
}
.cred-row h4{
    font-family: "Fraunces", serif;
    font-weight:  600;
    color:        var(--navy);
    font-size:    1.02rem;
    margin:       0 0 0.25rem;
}
.cred-row p{
    color:     var(--slate);
    font-size: 0.9rem;
    margin:    0;
}

@media (max-width: 1000px){
    .about-grid{
        transform:   translate(-50%);
        max-width:   calc(100% - 2rem);
        width:       30rem;
        margin-left: 50%;
        display:     block;
    }
    .credentials{
        margin-top: 5rem;
    }
    .cred-row:first-child{
        border-top: 1px solid var(--line);
        padding:    1.25rem 0;
    }
}
@media (max-width: 768px) and (orientation: portrait){
    .about-grid{
        max-width: calc(100% - 4rem);
    }
}

/*--Contact------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contact{
    padding-bottom: 8rem;
    padding-top:    2rem;
    margin-top:     2rem;
}
.contact-grid{
    grid-template-columns: 1fr 1fr;
    display: grid;
    
    padding-bottom: 3rem;
    padding-top:    2rem;
    gap: 4rem;
}
.contact-info h2{
    font-size:     2.1rem;
    line-height:   1.15;
    margin-bottom: 1rem;
}
.contact-info > p{
    color: var(--slate);
    max-width:    30rem;
    margin-bottom: 2rem;
}

.info-row{
    display:    flex;
    gap:        1rem;
    padding:    1rem 0;
    border-top: 1px solid var(--line);
}
.info-row:last-child{
    border-bottom: 1px solid var(--line);
}
.info-label{
    font-family:   "IBM Plex Mono", monospace;
    text-transform: uppercase;
    font-size:      0.72rem;
    letter-spacing: 0.08em;
    
    color:       var(--green-deep);
    width:       6rem;
    flex-shrink: 0;
    padding-top: 0.2rem;
}
.info-value{
    color:  var(--ink);
    font-size: 0.95rem;
}
.info-value span{
    display:       block;
    color:         var(--slate);
    font-size:     0.85rem;
    margin-bottom: 0.75rem;
    margin-top:    0rem;
}
.info-value span:last-child{
    margin-bottom: 0px;
}

.form-card{
    background:    var(--white);
    border:        1px solid var(--line);
    border-radius: 0.5rem;
    padding:       2rem;
}
.form-card h3{
    font-size:     1.2rem;
    margin-bottom: 0.5rem;
}
.form-card p.sub{
    color:    var(--slate);
    font-size:     0.88rem;
    margin-bottom:  1.5rem;
}
.form-row{
    margin-bottom: 1rem;
}
.form-row label{
    display:        block;
    font-family:   "IBM Plex Mono", monospace;
    font-size:      0.78rem;
    letter-spacing: 0.04em;
    margin-bottom:  0.5rem;
    color:    var(--slate);
}
.form-row input, .form-row textarea{
    border: 1px solid var(--line);
    border-radius:   0.5rem;
    padding: 0.6rem 0.75rem;
    width:             100%;
    font-size:      0.92rem;
    font-family: "Inter", sans-serif;

    background: var(--paper);
    color:      var(--ink);
}
.form-row input:focus, .form-row textarea:focus{
    outline: 2px solid var(--green-deep);
    outline-offset: 1px;
}
.form-row textarea{
    resize:  vertical;
    min-height: 12rem;
}
.form-submit{
    background: var(--green-deep);
    color:      var(--white);

    transition: ease-in-out 0.1s;
    cursor:     pointer;
    border:     none;

    width:           100%;
    padding:         1rem;
    border-radius: 0.5rem;
    font-weight:      600;
    font-size:    0.92rem;
    
}
.form-submit:hover{
    background: var(--navy);
}
.form-submit:active{
    background: var(--navy);
    opacity:    0.9;
}

@media (max-width: 1000px){
    .contact-grid{
        transform:   translate(-50%);
        max-width:   calc(100% - 2rem);
        width:       30rem;
        margin-left: 50%;
        display:     block;
    }
    .form-card{
        margin-top: 3rem;
    }
    #contact .section-head{
        transform:   translate(-50%);
        max-width:   calc(100% - 2rem);
        width:       30rem;
        margin-left: 50%;
    }
}
@media (max-width: 768px) and (orientation: portrait){
    .contact{
        padding-bottom: 2rem;
    }
}
@media (max-width: 768px) and (orientation: landscape){
    .contact{
        padding-bottom: 2rem;
    }
}