:root{
    --bg:#f8f7f2;
    --green:#304d3b;
    --ink:#273e31;
    --sage:#dfe8dc;
    --muted:#6d776e;
    --border:#dce2d8
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Onest,Arial,sans-serif;
    font-size:16px;
    line-height:1.8
}
a{
    color:inherit
}
.wrap{
    max-width:1160px;
    padding:0 28px;
    margin:auto
}
header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 0
}
.brand{
    font-family:Manrope,Arial,sans-serif;
    font-weight:700;
    letter-spacing:-.05em;
    font-size:23px;
    text-decoration:none
}
.nav{
    display:flex;
    align-items:center;
    gap:24px;
    font-size:12px;
    white-space: nowrap;
}
.nav a{
    text-decoration:none
}
.nav a:hover{
    text-decoration:underline
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--green);
    color:white;
    padding:13px 24px;
    border-radius:30px;
    text-decoration:none;
    font-weight:700;
    font-size:12px
}
.button.light{
    background:#e7ecdf;
    color:var(--green)
}
.hero{
    padding:85px 0 110px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:70px
}
.eyebrow{
    color:#79917d;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:2.5px;
    font-weight:700;
    margin-bottom:20px
}
h1,h2,h3{
    font-family:Manrope,Arial,sans-serif;
    font-weight:600;
    letter-spacing:-.055em;
    line-height:1.12
}
h1{
    font-size:clamp(46px,6vw,83px);
    margin:0 0 28px
}
h2{
    font-size:clamp(36px,4vw,58px);
    margin:0 0 34px
}
h3{
    font-size:25px;
    font-weight:600;
    letter-spacing:-.045em;
    margin:0 0 23px
}
em{
    font-style:normal;
    font-weight:500;
    color:#77917b
}
p{
    margin:0 0 18px
}
.hero .lead{
    font-size:19px;
    max-width:550px
}
.portrait{
    min-height:500px;
    border-radius:220px 220px 16px 16px;
    background:linear-gradient(145deg,#dce6d8,#b8c9ba);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#49624e;
    font-family:Manrope,Arial,sans-serif;
    font-size:24px;
    padding:35px
}
.section{
    padding:108px 0
}
.tint{
    background:#eaf0e6
}
.split{
    display:grid;
    grid-template-columns:.76fr 1.24fr;
    gap:100px
}
.prose{
    font-size:16px;
    max-width:710px
}
.prose p{
    margin:0 0 22px
}
.special{
    margin-top:35px;
    padding:30px;
    background:white;
    border:1px solid var(--border);
    border-radius:20px
}
.special p{
    margin:0 0 10px
}
.special p:last-child{
    margin-bottom:0
}
.highlight{
    font-size:23px;
    font-family:Manrope,Arial,sans-serif;
    font-weight:500;
    letter-spacing:-.04em;
    line-height:1.4;
    margin-top:35px!important;
}
.topics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-top:40px
}
.topic{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:36px 35px
}
.topic p{
    margin:0 0 10px
}
.topic p:last-child{
    margin:0
}
.topic h3{
    color:var(--green)
}
.dark{
    background:var(--green);
    color:#f5f4e9
}
.dark em{
    color:#c6d8bf
}
.dark .eyebrow{
    color:#bbd0b7
}
.dark .prose{
    max-width:770px
}
.services{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}
.service{
    border-radius:22px;
    background:white;
    border:1px solid var(--border);
    padding:38px
}
.service strong{
    display:block;
    font-family:Manrope,Arial,sans-serif;
    font-size:31px;
    font-weight:600;
    letter-spacing:-.045em;
    margin:10px 0 22px
}
.service p{
    margin:0 0 10px
}
.credentials{
    margin-bottom:24px;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    gap:42px;
    align-items:center;
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px
}
.certificate-img{
    display:block;
    width:100%;
    border-radius:12px;
    border:1px solid var(--border);
    box-shadow:0 14px 35px #263e3217
}
.certificate-meta{
    color:var(--muted);
    font-size:13px
}
.certificate-link{
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:var(--green);
    font-weight:700;
    text-underline-offset:5px
}
.footer{
    background:#e8eee6;
    padding:36px 0;
    font-size:12px
}
.footer .wrap{
    display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap
}
.contact{
    margin-top:34px;
    margin-bottom: 34px;
    font-size:13px;
    color:var(--muted)
}
.hero-btn{
    margin-top:22px
}
.marked {
    background:#e8eee6;
}
.short {
    padding-top: 0;
}
@media(max-width:850px){
    .hero,.split{
        grid-template-columns:1fr;
        gap:32px
    }
    .hero{
        padding:35px 0 66px
    }
    .portrait{
        min-height:300px;
        max-width:520px
    }
    .section{
        padding:72px 0
    }
    .nav{
        gap:12px
    }
    .nav a:not(.button){
        display:none
    }
    .topics,.services,.credentials{
        grid-template-columns:1fr
    }
    .credentials{
        gap:25px;
        padding:18px
    }
    .topic,.service{
        padding:27px
    }
    h1{
        font-size:48px
    }
    .brand{
        font-size:20px
    }
    .topic:nth-child(2n){
        background:#e8eee6
    }
    .marked {
        background: #fff;
    }
}
@media(max-width:400px){
    .wrap{
        padding:0 18px
    }
    .nav .button{
        padding:10px 14px
    }
}

/* Education: editorial timeline and document gallery */
.education-section{
    background:#f8f7f2
}
.education-heading{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:68px
}
.education-heading h2{
    margin-bottom:0
}
.education-heading>p{
    font-size:14px;
    color:var(--muted);
    max-width:290px;
    margin:0 0 8px
}
.education-group{
    margin:0 0 50px
}
.education-group-title{
    font-family:Manrope,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:11px;
    font-weight:700;
    color:#708574;
    padding:0 0 15px;
    border-bottom:1px solid #c6d3c6
}
.education-entry{
    display:grid;
    grid-template-columns:110px minmax(0,1fr) 100px;
    gap:35px;
    padding:32px 0;
    border-bottom:1px solid #dce2d8;
    align-items:start
}
.education-year{
    font-family:Manrope,Arial,sans-serif;
    font-size:25px;
    font-weight:600;
    letter-spacing:-.045em;
    color:#809684
}
.education-info h3{
    font-size:clamp(20px,2.1vw,29px);
    line-height:1.28;
    max-width:710px;
    margin:8px 0 12px
}
.education-info p{
    font-size:14px;
    line-height:1.6;
    color:#66786b;
    margin:0 0 5px
}
.education-info .education-qualification{
    color:var(--green);
    font-weight:600;
    margin-top:10px
}
.education-type{
    font-size:12px;
    color:#78877a
}
.education-view{
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    border-bottom:1px solid #9cae9d;
    padding:5px 0;
    justify-self:end
}
.education-view:hover{
    color:#6d8c71
}
.education-gallery-heading{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    margin-top:85px;
    margin-bottom:25px
}
.education-gallery-heading h3{
    margin:0
}
.education-gallery-heading p{
    margin:0;
    color:var(--muted);
    font-size:13px
}
.education-gallery{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.education-doc{
    display:block;
    text-decoration:none;
    min-width:0
}
.education-doc-image{
    display:flex;
    align-items:center;
    justify-content:center;
    height:230px;
    padding:18px;
    border-radius:13px;
    background:#e9efe7;
    overflow:hidden
}
.education-doc-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .25s ease;
    filter:drop-shadow(0 6px 7px #1e312126)
}
.education-doc:hover img{
    transform:scale(1.04)
}
.education-doc-caption{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:15px;
    line-height:1.4;
    font-weight:650;
    margin-top:16px
}
.education-doc small{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:6px
}

.service span {
    white-space: nowrap;
    font-size: 14px;
    color: #78877a;
    padding-right: 2em;
}
.service span.money:before {
    content: "\01F3F7\00FE0E\0000A0"
}
.service span.time:before {
    content: "\01F552\00FE0E\0000A0";
    font-size: 16px;
}
.special > p:before {
    content: "✔️ "
}
.brand > span {
    color: #77917b;
    display: block;
    font-size: 18px;
    margin-top: 0;
    line-height: 1em;
    position: absolute;
    font-weight: normal;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

@media(max-width:850px){
    .education-heading{
        display:block;
        margin-bottom:45px
    }
    .education-heading>p{
        margin-top:20px
    }
    .education-entry{
        grid-template-columns:75px minmax(0,1fr);
        gap:15px;
        padding:25px 0
    }
    .education-view{
        grid-column:2;
        justify-self:start
    }
    .education-year{
        font-size:21px
    }
    .education-gallery{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .education-gallery-heading{
        display:block
    }
    .education-gallery-heading p{
        margin-top:8px
    }
    .brand > span {
        font-size: 16px;
        letter-spacing: 0.01em;
    }
}
@media(max-width:520px){
    .education-gallery{
        grid-template-columns:1fr
    }
    .education-doc-image{
        height:260px
    }
    .education-gallery-heading{
        margin-top:60px
    }
    .brand > span {
        font-size: 14px;
        letter-spacing: unset;
    }
}
.diploma-preview{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    margin-top:23px;
    text-decoration:none;
    color:var(--green);
    font-size:13px;
    font-weight:600
}
.diploma-preview img{
    width:min(100%,350px);
    height:auto;
    max-height:240px;
    object-fit:contain;
    object-position:left center;
    border-radius:9px;
    box-shadow:0 7px 24px #263e3220;
    border:1px solid var(--border)
}
.diploma-preview span{
    border-bottom:1px solid #9cae9d;
    padding-bottom:2px
}
.portrait{
    padding:0;
    overflow:hidden;
    aspect-ratio:1/1;
    min-height:0;
    display:block;
    border-radius:22px;
    background:#dce6d8;
    border:1px solid #cfd9cf;
    box-shadow:0 16px 42px rgba(38,62,50,.08)
}
.portrait img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%
}
@media(max-width:850px){
    .portrait{
        width:min(100%,460px);
        aspect-ratio:1/1;
        min-height:0;
        margin-inline:auto;
        border-radius:20px;
        border:1px solid #cfd9cf
    }
}

.contact-link {
    margin-right: 20px;
    font-size: 14px;
    white-space: nowrap;
}

.contact-link:after {
    content: " ↗"
}

.contact-link svg {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}

/* Фирменные цвета иконок */
.contact-link--whatsapp svg {
    fill: #304d3b;
}
.contact-link--telegram svg {
    fill: #304d3b;
}
.contact-link--email svg    {
    fill: #304d3b;
}
