:root{
    --bg: #f3f3f1;
    --text: #717171;
    --muted: #a8a8a8;
    --line: #d7d7d4;
    --accent: #7fb9c7;
    --accent-dark: #6eaab8;
    --accent-soft: #8fc1cd;
}

html {
    scroll-behavior: smooth;
}

body{
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.hero-title{
    font-size: clamp(2.75rem, 5.4vw, 6.2rem);
    line-height: 1.08;
    letter-spacing: 0.16em;
    font-weight: 300;
    text-transform: uppercase;
    color: #ababab;
}

.hero-role{
    font-size: clamp(0.9rem, 1.1vw, 1.55rem);
    line-height: 1.6;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: #6f6f6f;
}

.hero-intro{
    font-size: clamp(1.05rem, 1.25vw, 1.35rem);
    line-height: 1.95;
    color: #6f6f6f;
}

.hero-meta{
    font-size: clamp(0.84rem, 0.92vw, 1.05rem);
    line-height: 1.85;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #5f5f5f;
}

.hero-meta .accent{
    color: var(--accent-dark);
}

.hero-contact-row{
    color: #8a8a8a;
    font-size: clamp(0.88rem, 0.92vw, 1rem);
}

.hero-pill{
    height: 50px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all .22s ease;
}

.hero-pill-primary{
    background: var(--accent-dark);
    color: white;
}

.hero-pill-primary:hover{
    background: #659eab;
}

.hero-pill-secondary{
    border: 1px solid #c8dbe1;
    color: var(--accent-dark);
    background: transparent;
}

.hero-pill-secondary:hover{
    background: rgba(255,255,255,0.55);
}

.hero-grid-tile{
    min-height: 158px;
    background: #88bfcb;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 28px 28px 26px;
    color: white;
    transition: background-color .22s ease;
}

.hero-grid-tile:hover,
.hero-grid-tile.active{
    background: #78b2bf;
}

.hero-grid-label{
    font-size: 0.82rem;
    line-height: 1.65;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 400;
}

.hero-panel{
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(8px);
    border-radius: 28px;
}

@media (max-width: 1279px){
    .hero-title{
        letter-spacing: 0.13em;
    }
}

@media (max-width: 1023px){
    .hero-title{
        letter-spacing: 0.1em;
    }

    .hero-role{
        letter-spacing: 0.3em;
    }

    .hero-meta{
        letter-spacing: 0.18em;
    }
}

@media (max-width: 767px){
    .hero-title{
        font-size: clamp(2.15rem, 12vw, 3.3rem);
        letter-spacing: 0.08em;
    }

    .hero-role{
        font-size: 0.82rem;
        letter-spacing: 0.24em;
    }

    .hero-meta{
        font-size: 0.78rem;
        letter-spacing: 0.12em;
    }

    .hero-grid-tile{
        min-height: 112px;
        padding: 22px 22px 20px;
    }

    .hero-grid-label{
        font-size: 0.72rem;
        letter-spacing: 0.21em;
    }
}