/* ============================================================
   PROFESSIONAL SIMP™
   Main Stylesheet
   ============================================================ */


/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {
    --color-bg: #f2ede3;
    --color-bg-soft: #e8e0d4;
    --color-paper: #f8f4ec;

    --color-ink: #171815;
    --color-ink-soft: #2a2b26;
    --color-text: #4c4a43;
    --color-muted: #777168;

    --color-accent: #7a2636;
    --color-accent-dark: #511925;
    --color-gold: #b89354;

    --color-border: rgba(23, 24, 21, 0.16);
    --color-border-dark: rgba(248, 244, 236, 0.16);

    --font-display:
        "Times New Roman",
        Times,
        Georgia,
        serif;

    --font-sans:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --font-mono:
        "Courier New",
        Courier,
        monospace;

    --container: 1220px;
    --container-narrow: 1040px;

    --section-space: clamp(5rem, 10vw, 9rem);

    --shadow-soft:
        0 28px 80px rgba(30, 24, 20, 0.12);

    --transition:
        180ms ease;
}


/* ============================================================
   02. RESET / GLOBAL
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: hidden;

    scroll-behavior: smooth;
}

body {
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;

    color: var(--color-text);
    background: var(--color-bg);

    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    color: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

ul,
ol {
    margin-top: 0;
}

::selection {
    color: var(--color-paper);
    background: var(--color-accent);
}


/* ============================================================
   03. ACCESSIBILITY
   ============================================================ */

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 9999;

    padding: 0.75rem 1rem;

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

    font-size: 0.8rem;
    font-weight: 800;

    text-decoration: none;

    transform: translateY(-200%);
    transition: transform var(--transition);
}

.skip-link:focus {
    transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 4px;
}


/* ============================================================
   04. SHARED LAYOUT
   ============================================================ */

.container {
    width: min(
        calc(100% - 3rem),
        var(--container)
    );

    margin-inline: auto;
}

section {
    position: relative;
}

.eyebrow {
    margin-bottom: 1.25rem;

    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-heading {
    max-width: 700px;
}

.section-heading h2 {
    margin-bottom: 0;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 6.4rem);
    font-weight: 400;
    line-height: 0.91;

    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.section-heading h2 span {
    display: block;

    color: var(--color-accent);

    font-style: italic;
}

.section-heading-compact {
    max-width: 900px;

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}


/* ============================================================
   05. BUTTONS
   ============================================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0.95rem 1.35rem;

    border: 1px solid transparent;

    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: var(--color-paper);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.button-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.button-secondary {
    color: var(--color-ink);
    background: transparent;
    border-color: var(--color-ink);
}

.button-secondary:hover {
    color: var(--color-paper);
    background: var(--color-ink);
}

.button-large {
    min-height: 60px;

    padding-inline: 1.8rem;
}


/* ============================================================
   06. HEADER
   ============================================================ */

.site-header {
    position: relative;
    z-index: 100;

    border-bottom: 1px solid var(--color-border);
    background: rgba(242, 237, 227, 0.96);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 90px;
}

.site-brand {
    display: inline-flex;
    align-items: center;

    gap: 0.8rem;

    color: var(--color-ink);

    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

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

    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;

    transform: rotate(-3deg);
}

.brand-copy {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.brand-copy strong {
    color: var(--color-ink);

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}

.brand-copy small {
    margin-top: 0.33rem;

    color: var(--color-muted);

    font-family: var(--font-mono);
    font-size: 0.58rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    align-items: center;

    gap: 2rem;
}

.site-nav a {
    position: relative;

    color: var(--color-ink);

    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
}

.site-nav a:not(.nav-contact)::after {
    position: absolute;
    left: 0;
    bottom: -0.45rem;

    width: 100%;
    height: 1px;

    content: "";

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform var(--transition);
}

.site-nav a:not(.nav-contact):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-contact {
    padding: 0.7rem 1rem;

    color: var(--color-paper) !important;
    background: var(--color-ink);
}

.nav-contact:hover {
    background: var(--color-accent);
}

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--color-border);
    background: transparent;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 18px;
    height: 1px;

    margin-inline: auto;

    background: var(--color-ink);

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.menu-toggle span + span {
    margin-top: 6px;
}


/* ============================================================
   07. HERO
   ============================================================ */

.hero {
    overflow: hidden;

    padding:
        clamp(4rem, 8vw, 7rem)
        0
        clamp(5rem, 10vw, 8rem);
}

.hero::before {
    position: absolute;
    top: 0;
    right: -10vw;

    width: 48vw;
    height: 100%;

    content: "";

    background:
        linear-gradient(
            135deg,
            rgba(122, 38, 54, 0.05),
            transparent 60%
        );

    pointer-events: none;
}

.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(3.5rem, 7vw, 7rem);
}

.hero-media {
    position: relative;
}

.profile-frame {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #d7cec0;

    box-shadow: var(--shadow-soft);
}

.profile-frame::before {
    position: absolute;
    inset: 16px;
    z-index: 2;

    content: "";

    border: 1px solid rgba(248, 244, 236, 0.5);

    pointer-events: none;
}

.profile-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.availability-badge {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 3;

    display: inline-flex;
    align-items: center;

    gap: 0.55rem;

    padding: 0.7rem 0.85rem;

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

    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.availability-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #8db879;

    box-shadow:
        0 0 0 4px rgba(141, 184, 121, 0.16);
}

.hero-content {
    position: relative;
    z-index: 2;

    padding-block: 1rem;
}

.hero-content .eyebrow {
    margin-bottom: 1.6rem;
}

.hero h1 {
    margin-bottom: 1.35rem;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: clamp(5rem, 10vw, 10rem);
    font-weight: 400;
    line-height: 0.76;

    letter-spacing: -0.075em;
    text-transform: uppercase;
}

.hero h1 span {
    display: block;

    margin-left: clamp(1.4rem, 5vw, 5rem);

    color: var(--color-accent);

    font-style: italic;
}

.hero-role {
    margin-bottom: 1.8rem;

    color: var(--color-ink);

    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.hero-role span {
    display: inline-block;

    margin-inline: 0.45rem;

    color: var(--color-gold);
}

.hero-intro {
    max-width: 660px;

    margin-bottom: 2.1rem;

    color: var(--color-text);

    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.75rem;

    margin-bottom: 3rem;
}

.hero-status {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    max-width: 600px;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.hero-status > div {
    padding: 1.1rem 1.1rem 1.1rem 0;
}

.hero-status > div + div {
    padding-left: 1.4rem;

    border-left: 1px solid var(--color-border);
}

.status-label {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--color-muted);

    font-family: var(--font-mono);
    font-size: 0.58rem;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero-status strong {
    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 400;
}


/* ============================================================
   08. METRICS
   ============================================================ */

.metrics-section {
    padding: var(--section-space) 0;

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

.metrics-section .eyebrow {
    color: var(--color-gold);
}

.metrics-section .section-heading h2 {
    color: var(--color-paper);
}

.metrics-section .section-heading h2 span {
    color: var(--color-gold);
}

.metrics-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--color-border-dark);
    border-left: 1px solid var(--color-border-dark);
}

.metric-card {
    min-height: 315px;

    padding:
        clamp(1.6rem, 3vw, 2.4rem);

    border-right: 1px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border-dark);
}

.metric-number {
    display: inline-block;

    color: var(--color-paper);

    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    line-height: 0.9;

    letter-spacing: -0.07em;
}

.metric-unit {
    display: inline-block;

    margin-left: 0.4rem;

    color: var(--color-gold);

    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.metric-card h3 {
    margin:
        2.2rem
        0
        0.75rem;

    color: var(--color-paper);

    font-size: 0.88rem;

    letter-spacing: 0.02em;
}

.metric-card p {
    max-width: 220px;

    margin-bottom: 0;

    color: #b9b6ad;

    font-size: 0.88rem;
    line-height: 1.65;
}


/* ============================================================
   09. PROFESSIONAL PROFILE
   POLISH: tighter vertical footprint
   ============================================================ */

.profile-section {
    padding:
        clamp(4.75rem, 8vw, 7rem)
        0;
}

.profile-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.75fr);

    align-items: start;

    gap: clamp(3.5rem, 7vw, 6rem);
}

.profile-copy {
    padding-top: 1.4rem;
}

.profile-copy .lead {
    margin-bottom: 1.6rem;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    line-height: 1.12;

    letter-spacing: -0.035em;
}

.profile-copy > p:not(.lead) {
    margin-bottom: 1.15rem;

    font-size: 0.98rem;
    line-height: 1.72;
}

.profile-details {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin:
        2.25rem
        0
        0;

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.profile-details > div {
    padding: 1.1rem 1.2rem;

    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.profile-details dt {
    margin-bottom: 0.45rem;

    color: var(--color-muted);

    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.1em;
}

.profile-details dd {
    margin: 0;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: 1.02rem;
}


/* ============================================================
   10. COMPETENCIES
   ============================================================ */

.competencies-section {
    padding: var(--section-space) 0;

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

.competencies-section .section-heading {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.competency-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.competency-card {
    position: relative;

    min-height: 300px;

    padding:
        1.8rem
        1.8rem
        2rem;

    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    transition:
        background-color var(--transition),
        color var(--transition);
}

.competency-card:hover {
    color: var(--color-paper);
    background: var(--color-accent);
}

.competency-number {
    display: block;

    margin-bottom: 4.3rem;

    color: var(--color-gold);

    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
}

.competency-card h3 {
    margin-bottom: 0.8rem;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.3vw, 2.2rem);
    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.035em;

    transition: color var(--transition);
}

.competency-card p {
    max-width: 300px;

    margin-bottom: 0;

    font-size: 0.9rem;
    line-height: 1.65;
}

.competency-card:hover h3,
.competency-card:hover .competency-number,
.competency-card:hover p {
    color: var(--color-paper);
}


/* ============================================================
   11. EXPERIENCE
   ============================================================ */

.experience-section {
    padding: var(--section-space) 0;

    color: var(--color-paper);
    background: var(--color-accent-dark);
}

.experience-section .eyebrow {
    color: var(--color-gold);
}

.experience-section .section-heading h2 {
    color: var(--color-paper);
}

.experience-section .section-heading h2 span {
    color: var(--color-gold);
}

.experience-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.85fr)
        minmax(0, 1.15fr);

    gap: clamp(4rem, 8vw, 7rem);
}

.experience-list {
    border-top: 1px solid rgba(248, 244, 236, 0.22);
}

.experience-item {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 2rem;

    padding:
        2.8rem
        0;

    border-bottom: 1px solid rgba(248, 244, 236, 0.22);
}

.experience-meta {
    display: flex;
    flex-direction: column;

    gap: 0.45rem;

    color: #d3b785;

    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.experience-company {
    margin-bottom: 0.45rem;

    color: var(--color-gold);

    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.experience-content h3 {
    margin-bottom: 1rem;

    color: var(--color-paper);

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.04em;
}

.experience-content > p:not(.experience-company) {
    color: #ddd3c8;

    font-size: 0.96rem;
    line-height: 1.75;
}

.experience-content ul {
    padding-left: 1.1rem;

    color: #bfb3a7;

    font-size: 0.87rem;
    line-height: 1.65;
}

.experience-content li + li {
    margin-top: 0.45rem;
}


/* ============================================================
   12. CERTIFICATIONS
   POLISH: reduced dead space
   ============================================================ */

.certifications-section {
    padding:
        clamp(4.5rem, 7vw, 6.5rem)
        0;

    background: var(--color-bg-soft);
}

.certifications-section .section-heading-compact {
    margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.certification-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--color-border);
}

.certification-card {
    min-height: 225px;

    padding:
        1.5rem
        1.6rem
        1.7rem;

    border-right: 1px solid var(--color-border);
}

.certification-card:last-child {
    border-right: 0;
}

.certification-year {
    display: inline-block;

    margin-bottom: 2.75rem;

    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.09em;
}

.certification-card h3 {
    margin-bottom: 0.75rem;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.05;

    letter-spacing: -0.03em;
}

.certification-card p {
    margin-bottom: 0;

    font-size: 0.87rem;
    line-height: 1.6;
}


/* ============================================================
   13. TESTIMONIALS
   ============================================================ */

.testimonials-section {
    padding: var(--section-space) 0;

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

.testimonials-section .section-heading {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.testimonial-grid {
    display: grid;

    grid-template-columns:
        1.4fr
        0.8fr
        0.8fr;

    gap: 1px;

    background: var(--color-border);
}

.testimonial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 390px;

    margin: 0;

    padding:
        clamp(1.8rem, 4vw, 3.2rem);

    background: var(--color-bg);
}

.testimonial-featured {
    color: var(--color-paper);
    background: var(--color-ink);
}

.testimonial-stars {
    margin-bottom: 4rem;

    color: var(--color-gold);

    font-size: 0.85rem;

    letter-spacing: 0.16em;
}

.testimonial > p {
    margin-bottom: 4rem;

    color: var(--color-ink);

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 4rem);
    line-height: 1;

    letter-spacing: -0.045em;
}

.testimonial-featured > p {
    color: var(--color-paper);

    font-size: clamp(3rem, 5vw, 5rem);
}

.testimonial footer {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;
}

.testimonial footer strong {
    color: var(--color-accent);

    font-family: var(--font-mono);
    font-size: 0.67rem;

    letter-spacing: 0.1em;
}

.testimonial-featured footer strong {
    color: var(--color-gold);
}

.testimonial footer span {
    color: var(--color-muted);

    font-family: var(--font-mono);
    font-size: 0.58rem;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.testimonial-featured footer span {
    color: #aaa79f;
}


/* ============================================================
   14. CONTACT
   POLISH: prevent horizontal overflow
   ============================================================ */

.contact-section {
    overflow: hidden;

    padding: var(--section-space) 0;

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

.contact-section::before {
    position: absolute;
    top: 0;
    left: 50%;

    width: 1px;
    height: 100%;

    content: "";

    background: var(--color-border-dark);
}

.contact-layout {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(4rem, 9vw, 8rem);
}

.contact-layout > * {
    min-width: 0;
}

.contact-section .eyebrow {
    color: var(--color-gold);
}

.contact-section h2 {
    max-width: 100%;
    margin-bottom: 0;

    color: var(--color-paper);

    font-family: var(--font-display);
    font-size: clamp(3.8rem, 7.5vw, 7.4rem);
    font-weight: 400;
    line-height: 0.84;

    letter-spacing: -0.06em;
    text-transform: uppercase;

    overflow-wrap: normal;
}

.contact-section h2 span {
    display: block;

    max-width: 100%;

    color: var(--color-gold);

    font-style: italic;
}

.contact-copy {
    min-width: 0;

    align-self: end;

    padding-bottom: 0.3rem;
}

.contact-copy > p:first-child {
    max-width: 530px;

    margin-bottom: 2rem;

    color: #bbb7af;

    font-size: 1rem;
    line-height: 1.8;
}

.contact-note {
    margin:
        1rem
        0
        0;

    color: #88857e;

    font-family: var(--font-mono);
    font-size: 0.6rem;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ============================================================
   15. FOOTER
   ============================================================ */

.site-footer {
    padding:
        2.3rem
        0;

    color: #b7b3aa;
    background: #10110f;

    border-top: 1px solid rgba(248, 244, 236, 0.12);
}

.footer-inner {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: end;

    gap: 2rem;
}

.footer-brand {
    color: var(--color-paper);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-decoration: none;
}

.footer-inner p {
    margin:
        0.45rem
        0
        0;

    font-family: var(--font-mono);
    font-size: 0.57rem;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-links {
    display: flex;

    gap: 1.3rem;
}

.footer-links a {
    color: #bbb7af;

    font-family: var(--font-mono);
    font-size: 0.6rem;

    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-gold);
}

.footer-meta {
    text-align: right;
}


/* ============================================================
   16. RESPONSIVE — LARGE TABLET
   ============================================================ */

@media (max-width: 1080px) {

    .hero-grid {
        gap: 4rem;
    }

    .metrics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .profile-layout,
    .experience-layout {
        grid-template-columns: 1fr;
    }

    .profile-copy {
        max-width: 760px;

        padding-top: 0;
    }

    .competency-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .certification-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        border-left: 1px solid var(--color-border);
    }

    .certification-card {
        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }

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

    .testimonial-featured {
        grid-column: 1 / -1;
    }

}


/* ============================================================
   17. RESPONSIVE — NAVIGATION / TABLET
   ============================================================ */

@media (max-width: 860px) {

    .container {
        width: min(
            calc(100% - 2rem),
            var(--container)
        );
    }

    .header-inner {
        min-height: 76px;
    }

    .menu-toggle {
        display: block;

        position: relative;
        z-index: 102;
    }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 101;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 1.4rem;

        padding: 6rem 2rem 3rem;

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

        visibility: hidden;
        opacity: 0;

        transform: translateY(-12px);

        transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);
    }

    .site-nav.is-open {
        visibility: visible;
        opacity: 1;

        transform: translateY(0);
    }

    .site-nav a {
        color: var(--color-paper);

        font-family: var(--font-display);
        font-size: clamp(2.4rem, 8vw, 4rem);
        font-weight: 400;

        letter-spacing: -0.04em;
        text-transform: none;
    }

    .site-nav a:not(.nav-contact)::after {
        display: none;
    }

    .nav-contact {
        margin-top: 1rem;

        padding:
            0.85rem
            1rem;

        color: var(--color-ink) !important;
        background: var(--color-gold);

        font-family: var(--font-mono) !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;

        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    .menu-toggle.is-active {
        border-color: rgba(255, 255, 255, 0.25);
    }

    .menu-toggle.is-active span {
        background: var(--color-paper);
    }

    .menu-toggle.is-active span:first-child {
        transform:
            translateY(3.5px)
            rotate(45deg);
    }

    .menu-toggle.is-active span:last-child {
        transform:
            translateY(-3.5px)
            rotate(-45deg);
    }

    .hero-grid {
        grid-template-columns: 1fr;

        max-width: 760px;
    }

    .hero-media {
        max-width: 560px;
    }

    .profile-frame {
        aspect-ratio: 4 / 4.8;
    }

    .hero h1 {
        font-size: clamp(5rem, 18vw, 9rem);
    }

    .hero h1 span {
        margin-left: 0;
    }

    .contact-section::before {
        display: none;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   18. RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 640px) {

    :root {
        --section-space: 4.75rem;
    }

    body {
        font-size: 15px;
    }

    .brand-copy small {
        display: none;
    }

    .hero {
        padding-top: 2rem;
    }

    .hero-grid {
        gap: 2.6rem;
    }

    .hero-media {
        width: 100%;
    }

    .profile-frame {
        aspect-ratio: 4 / 5;
    }

    .hero h1 {
        font-size: clamp(4.5rem, 23vw, 7rem);

        line-height: 0.79;
    }

    .hero-role span {
        display: none;
    }

    .hero-role {
        display: flex;
        flex-direction: column;

        gap: 0.25rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-status {
        grid-template-columns: 1fr;
    }

    .hero-status > div {
        padding:
            1rem
            0;
    }

    .hero-status > div + div {
        padding-left: 0;

        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .section-heading h2 {
        font-size: clamp(2.8rem, 15vw, 4.7rem);
    }

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

    .metric-card {
        min-height: auto;
    }

    .metric-number {
        font-size: 4.8rem;
    }

    .profile-details {
        grid-template-columns: 1fr;
    }

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

    .competency-card {
        min-height: 250px;
    }

    .experience-item {
        grid-template-columns: 1fr;

        gap: 1.2rem;
    }

    .experience-meta {
        flex-direction: row;
        justify-content: space-between;
    }

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

    .certification-card {
        min-height: auto;
    }

    .certification-year {
        margin-bottom: 2.25rem;
    }

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

    .testimonial-featured {
        grid-column: auto;
    }

    .testimonial {
        min-height: 330px;
    }

    .testimonial-featured > p {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .contact-section h2 {
        font-size: clamp(3.6rem, 18vw, 5.8rem);

        line-height: 0.87;
    }

    .button-large {
        width: 100%;
    }

    .footer-inner {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .footer-links {
        flex-wrap: wrap;
    }

    .footer-meta {
        text-align: left;
    }

}


/* ============================================================
   19. REDUCED MOTION
   ============================================================ */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ============================================================
   CONTACT HEADING — FINAL OVERLAP FIX
   ============================================================ */

.contact-layout > div:first-child {
    min-width: 0;
    padding-right: clamp(1.5rem, 3vw, 3rem);
}

.contact-section h2 {
    font-size: clamp(3.6rem, 6.25vw, 6.25rem);
    letter-spacing: -0.05em;
}

.contact-section h2 span {
    font-size: 0.84em;
    line-height: 0.9;
    letter-spacing: -0.045em;
}

/* ============================================================
   MOBILE CERTIFICATIONS HEADING FIX
   ============================================================ */

@media (max-width: 640px) {

    .certifications-section .section-heading h2 {
        font-size: clamp(2.6rem, 12vw, 4rem);
        line-height: 0.92;
        letter-spacing: -0.045em;
    }

    .certifications-section .section-heading h2 span {
        font-size: 0.78em;
        line-height: 0.95;
    }

}