/* =====================================================================
   style.css
   Final shared stylesheet
   Phase H — Responsive QA / Accessibility / Site-wide polish

   Design system:
     - Deep academic blue
     - Muted brass accent
     - Warm neutral background
     - Serif display typography
     - Clean sans-serif body typography

   Scope:
     - Public pages
     - Navbar
     - Hero
     - Cards
     - Page banners
     - Forms
     - Tables
     - Admin portal
     - Responsive behavior
     - Keyboard focus states
     - Reduced-motion accessibility
   ===================================================================== */


/* =====================================================================
   ROOT TOKENS
   ===================================================================== */

:root {

    /* Colors */
    --color-primary:      #1F3A5F;
    --color-primary-dark: #14273F;
    --color-primary-soft: #EAF0F6;

    --color-secondary:    #B08D57;
    --color-secondary-dark: #8E7044;

    --color-bg:           #FBFAF8;
    --color-surface:      #FFFFFF;

    --color-text:         #1C1F24;
    --color-text-muted:   #5B6470;

    --color-border:       #E4E1DA;
    --color-border-dark:  #CBC6BD;

    --color-success:      #1E6B45;
    --color-danger:       #A52A2A;
    --color-warning:      #936A16;

    /* Layout */
    --container-width: 1140px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Shadows */
    --shadow-sm:
        0 1px 3px rgba(20, 39, 63, 0.08);

    --shadow-md:
        0 8px 24px rgba(20, 39, 63, 0.10);

    --shadow-lg:
        0 16px 48px rgba(20, 39, 63, 0.14);

    /* Typography */
    --font-display:
        Georgia,
        "Iowan Old Style",
        "Times New Roman",
        serif;

    --font-body:
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --text-xs:   0.8125rem;
    --text-sm:   0.9375rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.375rem;
    --text-xl:   1.75rem;
    --text-2xl:  2.25rem;
    --text-3xl:  3rem;

    /* Motion */
    --transition-fast:
        160ms ease;

    --transition-base:
        220ms ease;
}


/* =====================================================================
   GLOBAL RESET / BASE
   ===================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;

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

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

svg {
    max-width: 100%;
}

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

textarea {
    resize: vertical;
}

::selection {
    color: #fff;
    background: var(--color-primary);
}


/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: var(--font-display);
    color: var(--color-primary-dark);
    font-weight: 600;
    line-height: 1.25;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

p,
li,
td,
th {
    overflow-wrap: anywhere;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(176, 141, 87, 0.55);
    outline-offset: 3px;
}


/* =====================================================================
   BOOTSTRAP OVERRIDES
   ===================================================================== */

.container {
    width: 100%;
    max-width: var(--container-width);
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--color-border) !important;
}

.bg-light {
    background-color: #F6F4F0 !important;
}

.badge.text-bg-light {
    color: var(--color-primary-dark) !important;
    background-color: #F4F1EB !important;
}


/* =====================================================================
   NAVBAR
   ===================================================================== */

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;

    background-color: rgba(255, 255, 255, 0.96);

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

    box-shadow: var(--shadow-sm);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-navbar__brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-md);

    color: var(--color-primary-dark) !important;

    letter-spacing: -0.01em;
}

.site-navbar .nav-link {
    position: relative;

    color: var(--color-text);

    font-size: var(--text-sm);
    font-weight: 500;

    margin-left: 0.25rem;

    padding:
        0.75rem
        0.8rem !important;
}
.site-navbar__resume-link {
    background-color: var(--color-secondary);
    color: #fff !important;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem !important;
    font-size: var(--text-xs);
    font-weight: 600;
    margin-left: 0.5rem;
}

.site-navbar__resume-link:hover {
    background-color: #9a7a4a;
    color: #fff !important;
}
.site-navbar .nav-link:hover {
    color: var(--color-primary);
}

.site-navbar .nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
}

.site-navbar .nav-link.active::after {
    content: "";

    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.25rem;

    height: 2px;

    background-color: var(--color-secondary);

    border-radius: 999px;
}

.site-navbar .nav-link.disabled {
    color: #98A0A8 !important;
    cursor: not-allowed;
}


/* =====================================================================
   SECTION HEADINGS
   ===================================================================== */

.section-heading {
    margin-bottom: 2rem;
}

.section-heading__eyebrow {
    display: inline-block;

    font-size: var(--text-xs);
    font-weight: 700;

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

    color: var(--color-secondary);

    margin-bottom: 0.5rem;
}

.section-heading__title {
    font-size: var(--text-2xl);
    margin-bottom: 0.5rem;
}

.section-heading__subtitle {
    max-width: 680px;

    color: var(--color-text-muted);
    font-size: var(--text-md);
}


/* =====================================================================
   PAGE BANNER
   ===================================================================== */

.page-banner {
    background-color: var(--color-surface);

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

    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page-banner h1 {
    font-size: var(--text-2xl);
    margin-bottom: 0.75rem;
}

.page-banner .breadcrumb {
    margin-bottom: 0;
    font-size: var(--text-xs);
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-border-dark);
}

.page-banner .breadcrumb-item a {
    color: var(--color-text-muted);
    font-weight: 500;
}

.page-banner .breadcrumb-item a:hover {
    color: var(--color-primary);
}

.page-banner .breadcrumb-item.active {
    color: var(--color-secondary-dark);
    font-weight: 600;
}


/* =====================================================================
   BUTTONS
   ===================================================================== */

.btn-site,
.btn-outline-site {
    display: inline-flex;

    align-items: center;
    justify-content: center;
    gap: 0.2rem;

    min-height: 42px;

    border-radius: var(--radius-sm);

    padding:
        0.65rem
        1.25rem;

    font-weight: 600;

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

.btn-site {
    color: #fff;

    background-color: var(--color-primary);

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

.btn-site:hover,
.btn-site:focus-visible {
    color: #fff;

    background-color: var(--color-primary-dark);

    border-color: var(--color-primary-dark);

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

.btn-site:active,
.btn-outline-site:active {
    transform: translateY(1px);
}

.btn-outline-site {
    color: var(--color-primary);

    background-color: transparent;

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

.btn-outline-site:hover,
.btn-outline-site:focus-visible {
    color: #fff;

    background-color: var(--color-primary);

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


/* =====================================================================
   CARDS
   ===================================================================== */

.site-card,
.admin-card {
    background-color: var(--color-surface);

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

    border-radius: var(--radius-md);

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

.site-card {
    padding: 1.75rem;
}

.admin-card {
    padding: 2rem;
}

.site-card,
.admin-card {
    transition:
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.site-card:hover {
    border-color: var(--color-border-dark);
}


/* =====================================================================
   HERO
   ===================================================================== */

.hero {
    padding:
        clamp(3rem, 7vw, 5rem)
        0;
}

.hero__photo {
    width: 220px;
    height: 220px;

    object-fit: cover;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    border:
        4px solid var(--color-surface);
}

.hero__name {
    font-size: var(--text-3xl);
    margin-bottom: 0.25rem;
}

.hero__designation {
    font-size: var(--text-md);

    color: var(--color-text-muted);

    margin-bottom: 0.25rem;
}

.hero__institution {
    font-size: var(--text-sm);

    color: var(--color-text-muted);

    margin-bottom: 1.5rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero__actions .btn-site,
.hero__actions .btn-outline-site {
    margin: 0;
}


/* =====================================================================
   FORM CONTROLS
   ===================================================================== */

.form-label {
    color: var(--color-primary-dark);
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 44px;

    color: var(--color-text);

    background-color: #fff;

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

    border-radius: var(--radius-sm);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

textarea.form-control {
    min-height: 120px;
}

.form-control::placeholder {
    color: #89919A;
}

.form-control:hover,
.form-select:hover {
    border-color: #AEB1B5;
}

.form-control:focus,
.form-select:focus {
    color: var(--color-text);

    background-color: #fff;

    border-color: var(--color-primary);

    box-shadow:
        0 0 0 0.2rem rgba(31, 58, 95, 0.12);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger);
}

.form-check-input {
    border-color: var(--color-border-dark);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-switch .form-check-input {
    cursor: pointer;
}

.form-text {
    color: var(--color-text-muted);
}


/* =====================================================================
   TABLES
   ===================================================================== */

.table {
    --bs-table-color: var(--color-text);
    --bs-table-bg: transparent;

    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding:
        0.85rem
        0.9rem;

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

.table thead th {
    color: var(--color-primary-dark);

    background-color: #F7F5F1;

    font-size: var(--text-xs);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(31, 58, 95, 0.025);
}

.table-responsive {
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}


/* =====================================================================
   BADGES / STATUS
   ===================================================================== */

.badge {
    font-weight: 600;
}

.text-bg-success {
    background-color: var(--color-success) !important;
}

.text-bg-danger {
    background-color: var(--color-danger) !important;
}

.text-bg-warning {
    color: #fff !important;
    background-color: var(--color-warning) !important;
}


/* =====================================================================
   QUOTATIONS / TESTIMONIALS
   ===================================================================== */

blockquote {
    margin-left: 0;
    margin-right: 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}


/* =====================================================================
   FOOTER
   ===================================================================== */

.site-footer {
    background-color: var(--color-primary-dark);

    color: rgba(255, 255, 255, 0.85);

    padding: 2.5rem 0;

    margin-top: 4rem;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.86);
}

.site-footer a:hover {
    color: #fff;
}

.site-footer__row {
    display: flex;
    flex-direction: column;

    gap: 0.15rem;

    margin-bottom: 1rem;
}

.site-footer__name {
    font-family: var(--font-display);

    font-size: var(--text-md);

    color: #fff;

    margin-bottom: 0;
}

.site-footer__meta {
    font-size: var(--text-sm);

    color: rgba(255, 255, 255, 0.65);

    margin-bottom: 0;
}

.site-footer__copyright {
    font-size: var(--text-xs);

    color: rgba(255, 255, 255, 0.5);

    margin-bottom: 0;
}


/* =====================================================================
   ADMIN PORTAL
   ===================================================================== */

.admin-shell {
    min-height: 100vh;
    background-color: var(--color-bg);
}

.admin-shell__header {
    background-color: var(--color-primary-dark);

    color: #fff;

    padding: 1rem 0;

    box-shadow:
        0 2px 10px rgba(20, 39, 63, 0.12);
}

.admin-shell__header a {
    color: #fff;
}

.admin-shell__header a:hover {
    color: #fff;
}

.admin-card {
    height: 100%;
}

.admin-card h1,
.admin-card h2,
.admin-card h3,
.admin-card h4,
.admin-card h5 {
    color: var(--color-primary-dark);
}

.admin-card .table-responsive {
    margin: 0;
}


/* =====================================================================
   MODALS
   ===================================================================== */

.modal-content {
    border:
        1px solid var(--color-border);

    border-radius: var(--radius-md);

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

.modal-header,
.modal-footer {
    border-color: var(--color-border);
}

.modal-title {
    color: var(--color-primary-dark);
}


/* =====================================================================
   ALERTS
   ===================================================================== */

.alert {
    border-radius: var(--radius-sm);
}


/* =====================================================================
   IMAGES / AVATARS
   ===================================================================== */

.object-fit-cover {
    object-fit: cover;
}

.rounded-circle {
    overflow: hidden;
}


/* =====================================================================
   UTILITY: CONTENT WIDTH
   ===================================================================== */

.content-narrow {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}


/* =====================================================================
   UTILITY: TRUNCATION
   ===================================================================== */

.text-truncate-2 {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* =====================================================================
   RESPONSIVE — LARGE TABLETS / BELOW DESKTOP
   ===================================================================== */

@media (max-width: 991.98px) {

    .site-navbar .navbar-collapse {
        padding:
            0.5rem
            0
            0.75rem;
    }

    .site-navbar .nav-link {
        margin-left: 0;

        padding:
            0.65rem
            0.25rem !important;
    }

    .site-navbar .nav-link.active::after {
        left: 0.25rem;
        right: auto;
        bottom: 0.3rem;

        width: 32px;
    }

    .hero__name {
        font-size: var(--text-2xl);
    }

}


/* =====================================================================
   RESPONSIVE — TABLETS
   ===================================================================== */

@media (max-width: 767.98px) {

    :root {
        --text-3xl: 2.5rem;
        --text-2xl: 2rem;
        --text-xl: 1.55rem;
        --text-lg: 1.2rem;
    }

    .page-banner {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .page-banner h1 {
        font-size: var(--text-2xl);
    }

    .site-card {
        padding: 1.35rem;
    }

    .admin-card {
        padding: 1.4rem;
    }

    .hero {
        padding:
            3rem
            0;
    }

    .hero__photo {
        width: 190px;
        height: 190px;
    }

    .hero__actions {
        justify-content: center;
    }

    .admin-shell__header .container {
        gap: 0.75rem;
    }

}


/* =====================================================================
   RESPONSIVE — MOBILE
   ===================================================================== */

@media (max-width: 575.98px) {

    :root {
        --text-3xl: 2.1rem;
        --text-2xl: 1.8rem;
        --text-xl: 1.45rem;
        --text-lg: 1.15rem;
        --text-md: 1.05rem;
    }

    body {
        font-size: 0.96rem;
    }

    .site-navbar__brand {
        max-width: 75%;

        font-size: 1rem;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-banner h1 {
        font-size: 1.75rem;
    }

    .hero {
        text-align: center;

        padding:
            2.5rem
            0;
    }

    .hero__photo {
        width: 165px;
        height: 165px;

        margin-bottom: 1.5rem;
    }

    .hero__name {
        font-size: 2.1rem;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__actions .btn-site,
    .hero__actions .btn-outline-site {
        width: 100%;
    }

    .site-card {
        padding: 1.15rem;
    }

    .admin-card {
        padding: 1.15rem;
    }

    .btn-site,
    .btn-outline-site {
        min-height: 44px;
    }

    .table > :not(caption) > * > * {
        padding:
            0.7rem
            0.65rem;
    }

    .admin-shell__header {
        padding: 0.8rem 0;
    }

    .admin-shell__header .container {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =====================================================================
   RESPONSIVE — VERY SMALL DEVICES
   ===================================================================== */

@media (max-width: 380px) {

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-navbar__brand {
        max-width: 68%;
    }

    .hero__name {
        font-size: 1.85rem;
    }

    .hero__photo {
        width: 145px;
        height: 145px;
    }

}


/* =====================================================================
   ACCESSIBILITY — REDUCED MOTION
   ===================================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =====================================================================
   PRINT
   ===================================================================== */

@media print {

    .site-navbar,
    .admin-shell__header,
    .hero__actions,
    .btn,
    .modal,
    .site-footer {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .site-card,
    .admin-card {
        box-shadow: none;
        border-color: #ccc;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

}
/* =====================================================================
   HOMEPAGE DESIGN RESTORATION
   ---------------------------------------------------------------------
   The homepage markup uses a richer custom design vocabulary than the
   generic component styles above. These rules restore that intended
   composition without changing public/index.php.
   ===================================================================== */

/* --- Shared layout --- */
.section-space {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.position-relative {
    position: relative;
}

/* --- Hero --- */
.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(820px, calc(100vh - 76px));
    display: flex;
    align-items: center;
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 8vw, 7.5rem);
    background:
        radial-gradient(circle at 78% 38%, rgba(176, 141, 87, 0.10), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
}

.hero-section__grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .42;
    background-image:
        linear-gradient(rgba(31, 58, 95, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 58, 95, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 95%);
}

.hero-section__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
    z-index: -2;
}

.hero-section__glow--one {
    width: 320px;
    height: 320px;
    top: 8%;
    right: 12%;
    background: rgba(176, 141, 87, .08);
}

.hero-section__glow--two {
    width: 280px;
    height: 280px;
    left: -80px;
    bottom: -120px;
    background: rgba(31, 58, 95, .06);
}

.hero-section > .container {
    width: 100%;
}

.hero-section .row {
    min-height: 620px;
}

.hero-eyebrow {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.35rem;
    color: var(--color-text-muted);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.hero-eyebrow__line {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: .55em;
    flex: 0 0 34px;
    background: var(--color-secondary);
}

.hero-eyebrow > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-title {
    max-width: 820px;
    margin: 0 0 1.45rem;
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-size: clamp(3.35rem, 5.6vw, 5.55rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    font-weight: 700;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.hero-description {
    max-width: 780px;
    margin: 0 0 1.7rem;
    color: #273342;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.8;
}

.hero-meta {
    display: grid;
    gap: .65rem;
    margin-bottom: 1.7rem;
}

.hero-meta__item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: #2d3946;
    font-size: .98rem;
}

.hero-meta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex: 0 0 24px;
    color: var(--color-secondary-dark);
    margin-top: .08rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-bottom: 1.7rem;
}

.hero-actions .btn-primary-site,
.hero-actions .btn-secondary-site {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    padding: .7rem 1.15rem;
    border-radius: 7px;
    font-size: .95rem;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.btn-primary-site {
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-primary-site:hover,
.btn-primary-site:focus-visible {
    color: #fff;
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary-site {
    color: var(--color-primary-dark);
    background: rgba(255,255,255,.78);
    border: 1px solid var(--color-border-dark);
}

.btn-secondary-site:hover,
.btn-secondary-site:focus-visible {
    color: var(--color-primary-dark);
    background: #fff;
    border-color: var(--color-secondary);
    transform: translateY(-1px);
}

.hero-signature {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #626d78;
    font-size: .84rem;
    letter-spacing: .03em;
}

.hero-signature__rule {
    display: inline-block;
    width: 46px;
    height: 1px;
    background: var(--color-border-dark);
}

/*.hero-visual {*/
/*    position: relative;*/
/*    width: min(100%, 320px);*/
/*    margin-inline: auto;*/
/*}*/

.hero-visual {
    position: relative;
    width: min(100%, 365px);
    margin-inline: auto;
    transform: translateY(-120px);
}

@media (max-width: 991px) {
    .hero-visual {
        width: min(100%, 270px);
        transform: none;
    }
}

.hero-visual__backdrop {
    position: absolute;
    inset: 7% -2% -4% 12%;
    z-index: -1;
    border: 1px solid rgba(176, 141, 87, .28);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(176,141,87,.13), rgba(31,58,95,.035));
    transform: rotate(4deg);
}

.hero-visual__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4.5;
    overflow: hidden;
    border: 10px solid rgba(255,255,255,.94);
    border-radius: 18px;
    background: linear-gradient(145deg, #edf1f5, #dce3ea);
    box-shadow: 0 24px 55px rgba(20,39,63,.16);
}


.hero-visual__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 58%, rgba(20,39,63,.12));
}

.hero-visual__image,
.hero-visual__fallback {
  width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.hero-visual__image {
    object-fit: cover;
    object-position: center top;
}

.hero-visual__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(176,141,87,.20), transparent 30%),
        linear-gradient(145deg, #e5ebf0, #cbd6df);
}

.hero-visual__fallback span {
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-size: clamp(5rem, 11vw, 8rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.08em;
}

.hero-visual__label {
    position: absolute;
    right: -16px;
    bottom: 8%;
    display: flex;
    flex-direction: column;
    gap: .18rem;
    padding: .85rem 1rem .8rem;
    border: 1px solid rgba(31,58,95,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-md);
}

.hero-visual__label-top,
.hero-visual__label-bottom {
    display: block;
}

.hero-visual__label-top {
    color: var(--color-secondary-dark);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.hero-visual__label-bottom {
    color: var(--color-primary-dark);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
}

.hero-visual__index {
    position: absolute;
    left: -12px;
    top: 3%;
    color: var(--color-secondary-dark);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .07em;
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: #66727f;
    white-space: nowrap;
}

.hero-scroll__text {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-scroll__line {
    width: 48px;
    height: 1px;
    background: var(--color-border-dark);
}

/* --- Reveal animation hooks used by main.js --- */
.reveal-up,
.reveal-scale {
    opacity: 0;
    transition:
        opacity .65s ease,
        transform .65s ease;
}

.reveal-up {
    transform: translateY(18px);
}

.reveal-scale {
    transform: translateY(10px) scale(.97);
}

.reveal-up.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

.page-ready .reveal-up,
.page-ready .reveal-scale {
    will-change: opacity, transform;
}

/* --- Snapshot --- */
.snapshot-section {
    position: relative;
    background: #fff;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.snapshot-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    min-height: 145px;
    padding: 2rem 1.6rem;
    border-right: 1px solid var(--color-border);
}

.snapshot-item:last-child {
    border-right: 0;
}

.snapshot-item__number {
    color: var(--color-secondary-dark);
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.snapshot-item__label {
    display: block;
    margin-bottom: .35rem;
    color: #78838d;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.snapshot-item__value {
    display: block;
    color: var(--color-primary-dark);
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Intro / about --- */
.section-intro {
    max-width: 860px;
    margin-bottom: 3rem;
}

.section-intro--light .section-intro__eyebrow,
.section-intro--light .section-intro__title {
    color: #fff;
}

.section-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    color: var(--color-secondary-dark);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.section-intro__index {
    font-family: var(--font-display);
    font-size: .9rem;
    letter-spacing: .03em;
}

.section-intro__title {
    margin: 0;
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.section-intro__title span {
    color: var(--color-secondary-dark);
}

.about-section {
    background: var(--color-bg);
}

.about-side {
    position: sticky;
    top: 110px;
    padding-right: 2rem;
}

.about-side__label {
    color: var(--color-primary-dark);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.about-side__rule {
    width: 56px;
    height: 2px;
    margin: .75rem 0 1.35rem;
    background: var(--color-secondary);
}

.about-side__item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.about-side__item span {
    display: block;
    margin-bottom: .25rem;
    color: #7a848f;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.about-side__item strong {
    display: block;
    color: var(--color-primary-dark);
    line-height: 1.5;
}

.about-content__lead {
    margin: 0;
    color: #2d3946;
    font-size: clamp(1.12rem, 1.7vw, 1.38rem);
    line-height: 1.85;
}

.about-content__divider {
    width: 100%;
    height: 1px;
    margin: 2rem 0;
    background: var(--color-border);
}

.about-content__role {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.about-content__role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-primary);
    background: #fff;
}

.about-content__role-label {
    display: block;
    margin-bottom: .3rem;
    color: #7a848f;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
}

.about-content__role strong {
    color: var(--color-primary-dark);
}

/* --- Research --- */
.research-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: var(--color-primary-dark);
    color: #fff;
}

.research-section .section-intro__eyebrow,
.research-section .section-intro__title,
.research-section .section-intro__title span {
    color: #fff;
}

.research-grid {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.15);
}

.research-item {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 34px;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.research-item__number {
    color: var(--color-secondary);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
}

.research-item__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    min-width: 0;
}

.research-item__content h3,
.research-item__content strong {
    display: block;
    margin: 0;
    min-width: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    overflow-wrap: break-word;
}

.research-item__content span {
    color: rgba(255,255,255,.66);
    font-size: .9rem;
}

.research-item__arrow {
    color: var(--color-secondary);
    font-size: 1.1rem;
}

/* --- Contact preview --- */
.contact-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: var(--color-bg);
}

.contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.contact-card__aside {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    background: var(--color-primary);
}

.contact-card__aside-line {
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    height: 1px;
    background: rgba(255,255,255,.2);
}

.contact-card__aside-number {
    position: relative;
    z-index: 1;
    color: var(--color-secondary);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    background: var(--color-primary);
    padding: 0 .4rem;
}

.contact-card__content {
    padding: clamp(1.6rem, 4vw, 3rem);
}

.contact-card__title {
    margin: 0 0 .7rem;
    color: var(--color-primary-dark);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.45rem);
}

.contact-card__text {
    margin: 0 0 1.25rem;
    max-width: 690px;
    color: var(--color-text-muted);
    line-height: 1.75;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.contact-email:hover {
    color: var(--color-secondary-dark);
}

.contact-email__icon {
    color: var(--color-secondary-dark);
}

/* --- Footer matching the current footer.php markup --- */
.site-footer-new {
    margin-top: 0;
    padding: 3.2rem 0 1.5rem;
    color: rgba(255,255,255,.78);
    background: var(--color-primary-dark);
}

.site-footer-new__top {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.site-footer-new__identity {
    max-width: 620px;
}

.site-footer-new__brand {
    display: inline-block;
    margin-bottom: .55rem;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
}

.site-footer-new__brand:hover {
    color: #fff;
}

.site-footer-new__description {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}

.site-footer-new__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: .45rem 1.15rem;
}

.site-footer-new__links a {
    color: rgba(255,255,255,.76);
    font-size: .9rem;
}

.site-footer-new__links a:hover {
    color: #fff;
}

.site-footer-new__bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    color: rgba(255,255,255,.45);
    font-size: .78rem;
}

.site-footer-new__email {
    color: rgba(255,255,255,.6);
}

.site-footer-new__email:hover {
    color: #fff;
}

/* --- Responsive homepage --- */
@media (max-width: 991.98px) {
    .hero-section {
        min-height: auto;
    }

    .hero-section .row {
        min-height: auto;
    }

    .hero-title {
        max-width: 720px;
    }

    .hero-visual {
        max-width: 390px;
        margin-top: .5rem;
    }

    .hero-scroll {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 2.5rem;
    }

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

    .snapshot-item:nth-child(2) {
        border-right: 0;
    }

    .snapshot-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }

    .about-side {
        position: static;
        padding-right: 0;
    }

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

    .contact-card__aside {
        min-height: 74px;
        align-items: center;
    }

    .contact-card__aside-line {
        left: 28px;
        right: 28px;
    }

    .site-footer-new__top {
        flex-direction: column;
    }

    .site-footer-new__links {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 3.25rem;
    }

    .hero-title {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn-primary-site,
    .hero-actions .btn-secondary-site {
        width: 100%;
    }

    .hero-signature {
        align-items: flex-start;
    }

    .hero-visual {
        max-width: 330px;
    }

    .hero-visual__label {
        right: -8px;
    }

    .snapshot-item {
        min-height: 125px;
        padding: 1.35rem 1rem;
    }

    .research-item {
        grid-template-columns: 45px minmax(0, 1fr) 24px;
        gap: .7rem;
    }

    .research-item__content strong {
        font-size: 1.08rem;
    }

    .site-footer-new__bottom {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        padding-bottom: 4.5rem;
    }

    .hero-visual__label {
        position: static;
        width: fit-content;
        margin: .8rem auto 0;
    }

    .hero-visual__index {
        left: 2px;
        top: 2px;
    }

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

    .snapshot-item,
    .snapshot-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .snapshot-item:last-child {
        border-bottom: 0;
    }

    .hero-scroll {
        margin-top: 2rem;
    }

    .hero-scroll__text {
        font-size: .68rem;
    }
}























/*new part*/
/* ================================================================
   CONTACT PREVIEW — FINAL POLISH
   ================================================================ */

.contact-section {
    padding: clamp(5rem, 8vw, 7rem) 0;
    background: var(--color-bg);
}

.contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    min-height: 350px;
    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: 22px;

    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------
   Main contact content
   --------------------------------------------------------------- */

.contact-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(2rem, 5vw, 4rem);
    min-width: 0;
}

.contact-card__content .section-intro__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    margin-bottom: 1rem;

    color: var(--color-secondary-dark);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-card__content .section-intro__index {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
   Heading
   --------------------------------------------------------------- */

.contact-card__title {
    margin: 0 0 0.85rem;

    color: var(--color-primary-dark);

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* ---------------------------------------------------------------
   Description
   --------------------------------------------------------------- */

.contact-card__text {
    max-width: 760px;

    margin: 0 0 1.75rem;

    color: var(--color-text-muted);

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

/* ---------------------------------------------------------------
   Email link
   --------------------------------------------------------------- */

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    width: fit-content;
    max-width: 100%;

    color: var(--color-primary-dark);

    font-size: 1rem;
    font-weight: 700;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.contact-email:hover {
    color: var(--color-secondary-dark);
    transform: translateX(2px);
}

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

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    color: var(--color-secondary-dark);
}

/* Keep the external-arrow from becoming detached */
.contact-email > .bi-arrow-up-right {
    margin-left: 0.15rem !important;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Right academic panel
   --------------------------------------------------------------- */

.contact-card__aside {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 2rem 1.5rem;

    background:
        linear-gradient(
            160deg,
            #30476f 0%,
            var(--color-primary) 55%,
            #243858 100%
        );

    color: #fff;
}

/* Institution text */
.contact-card__aside > span:last-child {
    /*position: relative;*/
    /*z-index: 2;*/

    /*display: block;*/

    /*width: 100%;*/
    /*max-width: 180px;*/

    /*margin-top: 2rem;*/

    /*color: rgba(255, 255, 255, 0.92);*/

    /*font-size: 0.92rem;*/
    /*font-weight: 500;*/
    /*line-height: 1.65;*/

    /*text-align: center;*/
    
    
    
    
    
    .contact-card__institution {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    max-width: 180px;
    margin-top: 2rem;

    color: rgba(255, 255, 255, 0.92);

    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
}
}

/* ---------------------------------------------------------------
   Number marker
   --------------------------------------------------------------- */

.contact-card__aside-number {
    position: relative;
    z-index: 3;

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

    min-width: 42px;
    min-height: 30px;

    padding: 0 0.5rem;

    color: var(--color-secondary);

    background: transparent;

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Horizontal decorative line */
.contact-card__aside-line {
    position: absolute;

    left: 22px;
    right: 22px;
    top: 50%;

    height: 1px;

    background: rgba(255, 255, 255, 0.24);
}

/* Small line above institution text */
.contact-card__aside::after {
    content: "";

    position: absolute;

    left: 50%;
    top: calc(50% + 15px);

    width: 58px;
    height: 1px;

    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------
   Desktop refinement
   --------------------------------------------------------------- */

@media (min-width: 992px) {

    .contact-card__aside {
        min-height: 350px;
    }

    .contact-card__content {
        padding-right: clamp(3rem, 6vw, 5rem);
    }

}

/* ---------------------------------------------------------------
   Tablet
   --------------------------------------------------------------- */

@media (max-width: 991.98px) {

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

    .contact-card__aside {
        min-height: 150px;

        padding: 1.5rem 2rem;
    }

    .contact-card__aside > span:last-child {
        max-width: 500px;
        margin-top: 1.25rem;
    }

    .contact-card__aside::after {
        top: calc(50% + 8px);
    }

    .contact-card__aside-line {
        left: 15%;
        right: 15%;
    }

}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */

@media (max-width: 575.98px) {

    .contact-section {
        padding: 4rem 0;
    }

    .contact-card {
        border-radius: 16px;
        min-height: 0;
    }

    .contact-card__content {
        padding: 1.6rem;
    }

    .contact-card__content .section-intro__eyebrow {
        margin-bottom: 0.8rem;
        font-size: 0.7rem;
    }

    .contact-card__title {
        font-size: 2rem;
    }

    .contact-card__text {
        font-size: 0.96rem;
        line-height: 1.7;
        margin-bottom: 1.35rem;
    }

    .contact-email {
        font-size: 0.92rem;
        overflow-wrap: anywhere;
    }

    .contact-card__aside {
        min-height: 145px;
        padding: 1.5rem 1rem;
    }

    .contact-card__aside > span:last-child {
        max-width: 280px;
        margin-top: 1rem;
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .contact-card__aside-line {
        left: 14%;
        right: 14%;
    }

}







/* ================================================================
   SNAPSHOT GRID — FIX INSTITUTION PANEL
   ================================================================ */

.snapshot-grid .snapshot-item {
    position: relative;

    background: transparent !important;
    color: var(--color-text) !important;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    min-height: 145px;

    padding: 2rem 1.6rem;

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

    box-shadow: none !important;

    overflow: visible;
}

/* Institution must look exactly like the other snapshot cells */
.snapshot-grid .snapshot-item:nth-child(3) {
    background: transparent !important;

    color: var(--color-text) !important;
}

/* Prevent contact-card styles from leaking into snapshot item */
.snapshot-grid .snapshot-item.contact-card__aside,
.snapshot-grid .snapshot-item[class*="contact-card__aside"] {
    display: grid !important;
    align-items: start !important;
    justify-content: initial !important;

    padding: 2rem 1.6rem !important;

    background: transparent !important;
}

/* Number */
.snapshot-grid .snapshot-item__number {
    color: var(--color-secondary-dark) !important;
}

/* Label */
.snapshot-grid .snapshot-item__label {
    color: #78838d !important;
}

/* Value */
.snapshot-grid .snapshot-item__value {
    display: block;

    color: var(--color-primary-dark) !important;

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

/* Make Institution wrap normally */
.snapshot-grid .snapshot-item:nth-child(3) .snapshot-item__value {
    max-width: 260px;
    overflow-wrap: anywhere;
}

/* Last item */
.snapshot-grid .snapshot-item:last-child {
    border-right: 0;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 991.98px) {

    .snapshot-grid .snapshot-item {
        min-height: 125px;
        padding: 1.5rem 1.25rem;
    }

    .snapshot-grid .snapshot-item:nth-child(2),
    .snapshot-grid .snapshot-item:last-child {
        border-right: 0;
    }

}

@media (max-width: 575.98px) {

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

    .snapshot-grid .snapshot-item,
    .snapshot-grid .snapshot-item:nth-child(2),
    .snapshot-grid .snapshot-item:last-child {
        min-height: 110px;

        padding: 1.25rem 1rem;

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

    .snapshot-grid .snapshot-item:last-child {
        border-bottom: 0;
    }

}


























/* ================================================================
   FINAL MOBILE / TABLET RESPONSIVE PATCH
   ================================================================ */

/* Prevent accidental horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Bootstrap container refinement */
.container {
    width: 100%;
}

@media (max-width: 1199.98px) {

    .container {
        max-width: 960px;
    }

    .hero-title {
        font-size: clamp(3rem, 6vw, 4.5rem);
    }

    .hero-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .hero-section .row {
        min-height: 0;
    }

    .hero-visual {
        width: min(100%, 390px);
    }

}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 991.98px) {

    .site-navbar {
        position: sticky;
        top: 0;
    }

    .site-navbar .navbar-collapse {
        margin-top: .65rem;
        padding: .75rem 0 1rem;
        border-top: 1px solid var(--color-border);
    }

    .site-navbar .navbar-nav {
        width: 100%;
    }

    .site-navbar .nav-item {
        width: 100%;
    }

    .site-navbar .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        margin-left: 0;
        padding: .7rem .25rem !important;
    }

    .site-navbar .nav-link.active::after {
        left: .25rem;
        right: auto;
        bottom: .25rem;
        width: 34px;
    }

    .site-navbar__resume-link {
        width: fit-content !important;
        margin-top: .5rem;
        margin-left: 0 !important;
        padding: .55rem .8rem !important;
    }

    .hero-section {
        min-height: auto;
        padding:
            4.5rem
            0
            5rem;
    }

    .hero-section .row {
        min-height: 0;
    }

    .hero-title {
        max-width: 760px;
        font-size: clamp(2.8rem, 6vw, 4.4rem);
    }

    .hero-description {
        max-width: 700px;
    }

    .hero-visual {
        width: min(100%, 370px);
        margin: 1rem auto 0;
    }

    .hero-visual__label {
        right: -8px;
    }

    .hero-scroll {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 2.5rem;
    }

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

    .snapshot-item {
        min-width: 0;
    }

    .snapshot-item:nth-child(2),
    .snapshot-item:nth-child(4) {
        border-right: 0;
    }

    .snapshot-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

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

    .contact-card__aside {
        min-height: 150px;
        align-items: center;
        justify-content: center;
    }

    .research-item {
        grid-template-columns: 55px minmax(0, 1fr) 30px;
    }

}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 767.98px) {

    body {
        font-size: .96rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-section {
        padding:
            3.5rem
            0
            4rem;
    }

    .hero-section__grid {
        background-size: 34px 34px;
    }

    .hero-section__glow--one {
        width: 220px;
        height: 220px;
        right: -70px;
        top: 10%;
    }

    .hero-section__glow--two {
        width: 200px;
        height: 200px;
        left: -100px;
        bottom: -100px;
    }

    .hero-title {
        max-width: 100%;
        margin-bottom: 1.15rem;
        font-size: clamp(2.35rem, 11vw, 3.8rem);
        line-height: 1.02;
        letter-spacing: -.035em;
    }

    .hero-eyebrow {
        font-size: .82rem;
        line-height: 1.5;
    }

    .hero-description {
        margin-bottom: 1.35rem;
        font-size: .98rem;
        line-height: 1.7;
    }

    .hero-meta {
        margin-bottom: 1.4rem;
    }

    .hero-meta__item {
        font-size: .92rem;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
        gap: .65rem;
    }

    .hero-actions .btn-primary-site,
    .hero-actions .btn-secondary-site {
        width: 100%;
        min-height: 46px;
    }

    .hero-signature {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        max-width: 100%;
        font-size: .78rem;
        line-height: 1.5;
    }

    .hero-signature__rule {
        flex: 0 0 36px;
        margin-top: .55rem;
    }

    .hero-visual {
        width: min(100%, 320px);
        margin-top: 2rem;
    }

    .hero-visual__frame {
        border-width: 7px;
        border-radius: 14px;
    }

    .hero-visual__label {
        position: static;
        width: fit-content;
        max-width: 100%;
        margin: .75rem auto 0;
    }

    .hero-visual__index {
        left: 2px;
        top: 2px;
        font-size: .95rem;
    }

    .hero-scroll {
        margin-top: 2rem;
        gap: .5rem;
    }

    .hero-scroll__text {
        font-size: .64rem;
        letter-spacing: .1em;
    }

    .hero-scroll__line {
        width: 32px;
    }

    /* Snapshot */
    .snapshot-grid {
        grid-template-columns: 1fr;
    }

    .snapshot-item,
    .snapshot-item:nth-child(2),
    .snapshot-item:nth-child(4) {
        grid-template-columns: auto minmax(0, 1fr);
        min-width: 0;
        min-height: 100px;
        padding: 1.25rem 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .snapshot-item:last-child {
        border-bottom: 0;
    }

    .snapshot-item__value {
        font-size: .95rem;
        line-height: 1.45;
    }

    /* About */
    .about-section,
    .research-section,
    .contact-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .section-intro__title {
        font-size: clamp(1.9rem, 8vw, 2.7rem);
        line-height: 1.12;
    }

    .about-side {
        margin-bottom: 1.5rem;
    }

    .about-content__lead {
        font-size: 1rem;
        line-height: 1.75;
    }

    /* Research */
    .research-item {
        grid-template-columns: 38px minmax(0, 1fr) 24px;
        gap: .65rem;
        padding: 1.15rem 0;
    }

    .research-item__content h3,
    .research-item__content strong {
        font-size: 1.02rem;
    }

    /* Contact */
    .contact-card {
        border-radius: 16px;
    }

    .contact-card__content {
        padding: 1.5rem;
    }

    .contact-card__title {
        font-size: 2rem;
        line-height: 1.1;
    }

    .contact-card__text {
        font-size: .95rem;
        line-height: 1.7;
    }

    .contact-email {
        display: flex;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-card__aside {
        min-height: 135px;
        padding: 1.25rem 1rem;
    }

    .contact-card__aside > span,
    .contact-card__institution {
        max-width: 280px;
        text-align: center;
        font-size: .86rem;
        line-height: 1.5;
    }

    /* Footer */
    .site-footer-new {
        padding-top: 2.5rem;
    }

    .site-footer-new__top {
        flex-direction: column;
        gap: 1.5rem;
    }

    .site-footer-new__links {
        justify-content: flex-start;
        gap: .45rem 1rem;
    }

}


/* ================================================================
   SMALL PHONES
   ================================================================ */

@media (max-width: 575.98px) {

    .site-navbar__brand {
        max-width: calc(100% - 55px);
        font-size: .95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-navbar .navbar-toggler {
        flex: 0 0 auto;
        padding: .4rem .55rem;
        border-color: var(--color-border-dark);
    }

    .site-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(176,141,87,.18);
    }

    .hero-title {
        font-size: clamp(2.1rem, 12vw, 3rem);
    }

    .hero-visual {
        width: min(100%, 285px);
    }

    .hero-visual__backdrop {
        inset: 6% -3% -3% 9%;
    }

    .hero-visual__label {
        padding: .7rem .8rem;
    }

    .hero-visual__label-top {
        font-size: .6rem;
    }

    .hero-visual__label-bottom {
        font-size: .66rem;
    }

    .snapshot-item__number {
        font-size: .8rem;
    }

    .snapshot-item__label {
        font-size: .65rem;
    }

    .snapshot-item__value {
        font-size: .9rem;
    }

    .contact-card__content {
        padding: 1.25rem;
    }

    .contact-card__title {
        font-size: 1.8rem;
    }

    .contact-email {
        font-size: .88rem;
    }

}


/* ================================================================
   VERY SMALL PHONES
   ================================================================ */

@media (max-width: 380px) {

    .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-visual {
        width: min(100%, 255px);
    }

    .hero-description {
        font-size: .92rem;
    }

    .snapshot-item {
        padding: 1.1rem .85rem;
    }

}


/* ================================================================
   ABSOLUTE FINAL SAFETY NET — GUARANTEED RESPONSIVE BEHAVIOUR
   ================================================================ */

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

.hero-title,
.hero-title * {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.7rem !important;
        line-height: 1.15 !important;
        letter-spacing: -.01em !important;
    }
}

@media (max-width: 360px) {
    .hero-title {
        font-size: 1.5rem !important;
    }
}

.research-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.research-item__content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .4rem .75rem !important;
    min-width: 0 !important;
}

.research-item__content h3,
.research-item__content strong {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-visual,
.hero-visual__frame,
.hero-visual__backdrop {
    max-width: 100%;
}

.container,
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 991.98px) {
    .hero-section .row {
        display: flex;
        flex-wrap: wrap;
    }

    .hero-section .col-lg-7,
    .hero-section .col-lg-5 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Widened past 991.98px on purpose: some phones/tablets/foldables
   report a CSS viewport width just above that older cutoff, which
   was letting the desktop 2-column hero layout (and the absolutely
   positioned "Scroll to explore" indicator meant only for that
   layout) slip through on real devices. This block guarantees the
   hero always stacks into one column, and that the scroll indicator
   is always in normal document flow (never floating independently
   in an empty gap) on any screen up to small-laptop width. */
@media (max-width: 1199.98px) {
    .hero-section .row {
        display: flex;
        flex-wrap: wrap;
        min-height: 0;
    }

    .hero-section .col-lg-7,
    .hero-section .col-lg-5 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .hero-scroll {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin: 2.5rem 0 0;
    }

    .hero-section {
        overflow: hidden;
    }
}

.hero-eyebrow,
.hero-title,
.hero-description,
.hero-meta,
.hero-meta__item,
.hero-actions,
.hero-signature {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}



/* =====================================================================
   PROFILE ACCORDION (light academic theme)
   ===================================================================== */

.profile-accordion__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    overflow: hidden;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.profile-accordion__item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-dark);
}

.profile-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    background-color: #F9F8F6;
    border: none;
    padding: 1.1rem 1.5rem;

    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-primary-dark);
    text-align: left;

    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.profile-accordion__header:hover {
    background-color: var(--color-primary-soft);
}

.profile-accordion__header-label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.profile-accordion__header-label i {
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.profile-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;

    border-radius: 50%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-primary);

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

.profile-accordion__header[aria-expanded="true"] .profile-accordion__icon {
    transform: rotate(45deg);
    background-color: var(--color-secondary);
    color: #fff;
    border-color: var(--color-secondary);
}

.profile-accordion__header[aria-expanded="true"] {
    background-color: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-border);
}

.profile-accordion__body {
    padding: 1.5rem;
    background-color: var(--color-surface);
}

.profile-accordion__entry h3 {
    color: var(--color-primary-dark);
}

@media (max-width: 576px) {
    .profile-accordion__header {
        padding: 0.9rem 1rem;
        font-size: var(--text-sm);
    }

    .profile-accordion__body {
        padding: 1rem;
    }

    .profile-accordion__icon {
        width: 26px;
        height: 26px;
    }
}











/* =====================================================================
   TECHNICAL PROFILES (homepage icon row)
   ===================================================================== */

.technical-profiles-section {
    padding: 1.5rem 0 3rem;
}

.technical-profiles__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.9rem;
}

.technical-profiles__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.technical-profiles__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;

    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;

    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}

.technical-profiles__icon:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
}

.technical-profiles__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

@media (max-width: 576px) {
    .technical-profiles__icon {
        width: 40px;
        height: 40px;
    }

    .technical-profiles__icon img {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================================
   FINAL PHONE-FIRST HERO OVERRIDE
   Applied at the very end so it wins over earlier responsive blocks.
   No PHP or JavaScript dependency.
   ========================================================================== */

@media (max-width: 767.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .hero-section {
        min-height: 0 !important;
        height: auto !important;
        padding: 28px 0 32px !important;
        overflow: hidden !important;
    }

    .hero-section > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-section .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    .hero-section .row > .col-lg-7,
    .hero-section .row > .col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-eyebrow {
        width: 100% !important;
        margin: 0 0 14px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        font-size: .82rem !important;
        line-height: 1.45 !important;
    }

    .hero-eyebrow__line {
        flex: 0 0 28px !important;
        width: 28px !important;
        margin-top: .58em !important;
    }

    .hero-eyebrow > span:last-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
        font-size: clamp(2.15rem, 11vw, 3.05rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -.025em !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-description {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        font-size: .96rem !important;
        line-height: 1.65 !important;
    }

    .hero-meta {
        width: 100% !important;
        margin: 0 0 18px !important;
        display: grid !important;
        gap: 9px !important;
    }

    .hero-meta__item {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 9px !important;
        align-items: start !important;
        font-size: .9rem !important;
        line-height: 1.5 !important;
    }

    .hero-meta__icon {
        width: 24px !important;
        flex: none !important;
        margin-top: 1px !important;
    }

    .hero-actions {
        width: 100% !important;
        margin: 0 0 14px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .hero-actions .btn-primary-site,
    .hero-actions .btn-secondary-site {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
    }

    .hero-signature {
        width: 100% !important;
        margin: 0 0 22px !important;
        font-size: .74rem !important;
        line-height: 1.4 !important;
    }

    .hero-scroll {
        display: none !important;
    }

    .hero-section .col-lg-5 {
        margin-top: 0 !important;
    }

    .hero-visual {
        width: min(100%, 270px) !important;
        max-width: 270px !important;
        margin: 6px auto 0 !important;
    }

    .hero-visual__frame {
        width: 100% !important;
        border-width: 5px !important;
        border-radius: 13px !important;
        overflow: hidden !important;
    }

    .hero-visual__image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .hero-visual__label {
        position: static !important;
        display: table !important;
        max-width: 100% !important;
        margin: 9px auto 0 !important;
        padding: 7px 10px !important;
        border-radius: 8px !important;
    }

    .hero-visual__index {
        top: 4px !important;
        left: 4px !important;
        font-size: .75rem !important;
    }

    .snapshot-section {
        padding: 0 !important;
    }

    .snapshot-grid {
        grid-template-columns: 1fr !important;
    }

    .snapshot-item,
    .snapshot-item:nth-child(2),
    .snapshot-item:nth-child(4) {
        min-height: 0 !important;
        padding: 14px 16px !important;
        border-right: 0 !important;
    }

    .snapshot-item__value {
        font-size: .88rem !important;
        line-height: 1.4 !important;
    }

    .about-section,
    .research-section,
    .contact-section {
        padding-top: 3.25rem !important;
        padding-bottom: 3.25rem !important;
    }
}

@media (max-width: 575.98px) {

    .site-navbar > .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .site-navbar__brand {
        max-width: calc(100% - 58px) !important;
        font-size: .92rem !important;
    }

    .site-navbar .navbar-toggler {
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 42px !important;
        padding: 0 !important;
    }

    .hero-section {
        padding-top: 24px !important;
        padding-bottom: 28px !important;
    }

    .hero-title {
        font-size: clamp(2rem, 10.5vw, 2.75rem) !important;
    }

    .hero-visual {
        width: min(100%, 250px) !important;
        max-width: 250px !important;
    }

    .section-intro__title {
        font-size: 1.85rem !important;
    }
}

@media (max-width: 380px) {

    .hero-section > .container {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .hero-title {
        font-size: 1.95rem !important;
    }

    .hero-description {
        font-size: .92rem !important;
    }

    .hero-visual {
        width: min(100%, 230px) !important;
        max-width: 230px !important;
    }
}

/* =====================================================================
   FINAL MOBILE HERO FIX — DO NOT REMOVE
   Root cause: Bootstrap hero columns were being rendered as flex
   containers, causing hero children to shrink to their content width.
   ===================================================================== */

@media (max-width: 1199.98px) {
    .hero-section .col-lg-7,
    .hero-section .col-lg-5 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .hero-section .col-lg-7 {
        text-align: center !important;
    }

    .hero-section .col-lg-5 {
        display: block !important;
        text-align: center !important;
    }

    .hero-eyebrow {
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-title,
    .hero-description,
    .hero-signature {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-meta {
        width: 100% !important;
        max-width: 100% !important;
        justify-items: center !important;
    }

    .hero-meta__item {
        width: auto !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: left !important;
    }

    .hero-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    .hero-actions .btn-primary-site,
    .hero-actions .btn-secondary-site {
        width: 100% !important;
        height: auto !important;
        min-height: 46px !important;
        max-height: none !important;
    }

    .hero-visual {
        width: min(100%, 250px) !important;
        max-width: 250px !important;
        margin: 1.5rem auto 0 !important;
    }

    .hero-visual__frame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
    }
}

@media (max-width: 575.98px) {
    .hero-visual {
        width: min(100%, 235px) !important;
        max-width: 235px !important;
    }
}

@media (max-width: 380px) {
    .hero-visual {
        width: min(100%, 220px) !important;
        max-width: 220px !important;
    }
}

/* ============================================================================
   CANONICAL FINAL HERO SYSTEM — DIAGNOSED MOBILE FIX
   ---------------------------------------------------------------------------
   Root cause diagnosed in the live page:
     .hero-section .row > .col-lg-7 {
         display: flex !important;
         justify-content: center !important;
     }

   That rule turns the Bootstrap column itself into a flex container and lets
   its children participate in an unintended horizontal/intrinsic sizing
   calculation. The result was the observed 129px-wide / 2000px-tall buttons
   and ~4000px hero height.

   This final section is intentionally the LAST hero definition in this file.
   It replaces competing mobile hero overrides with deterministic sizing.
   ============================================================================ */

@media (max-width: 1199.98px) {
    .hero-section .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }

    /* IMPORTANT:
       These are flex ITEMS of the row, not flex CONTAINERS.
       Do not set display:flex here. */
    .hero-section .row > .col-lg-7,
    .hero-section .row > .col-lg-5 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-section .row > .col-lg-7 {
        justify-content: initial !important;
        align-items: initial !important;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .hero-section > .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-section .row > .col-lg-7,
    .hero-section .row > .col-lg-5 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .hero-eyebrow,
    .hero-title,
    .hero-description,
    .hero-meta,
    .hero-actions,
    .hero-signature {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .hero-title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        text-align: center !important;
    }

    .hero-description {
        height: auto !important;
        overflow: visible !important;
        text-align: center !important;
    }

    .hero-meta {
        height: auto !important;
    }

    /* Deterministic button layout: flex column, not grid.
       This eliminates implicit grid-track sizing from the broken state. */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        gap: .75rem !important;
    }

    .hero-actions .btn-primary-site,
    .hero-actions .btn-secondary-site {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 46px !important;
        max-height: 55px !important;
        box-sizing: border-box !important;
    }

    .hero-signature {
        height: auto !important;
    }

    .hero-visual {
        display: block !important;
        width: min(100%, 260px) !important;
        max-width: 260px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-visual__frame {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
    }

    /* Mobile must not reserve a separate/floating scroll region. */
    .hero-scroll {
        display: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 1.95rem !important;
        line-height: 1.08 !important;
    }

    .hero-description {
        font-size: .92rem !important;
    }

    .hero-visual {
        width: min(100%, 230px) !important;
        max-width: 230px !important;
    }
}