@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap");

/* ==========================================================================
   Premium theme override — Perearst Uku-Märt Mätas
   Loaded last; restyles the base template to a calm, premium medical look.
   Palette: deep teal + mint on generous white space.
   ========================================================================== */

:root {
    --teal: #0F6E6E;
    --teal-deep: #0B5252;
    --teal-700: #0E6363;
    --mint: #3BB0A0;
    --mint-soft: #8FE3D4;
    --ink: #14312E;
    --ink-soft: #45605C;
    --bg: #FFFFFF;
    --bg-alt: #F1F7F6;
    --line: #E0EDEB;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 6px 18px -10px rgba(15, 110, 110, .30);
    --shadow: 0 22px 48px -24px rgba(11, 82, 82, .45);
    --font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-head: "Sora", "Ubuntu", var(--font-sans);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
    color: var(--ink) !important;
    background: var(--bg) !important;
    font-family: var(--font-sans) !important;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink) !important;
    font-family: var(--font-head) !important;
    letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.4rem) !important; font-weight: 800; line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem) !important; font-weight: 700; }
h3 { font-size: 1.15rem !important; font-weight: 700; text-transform: none !important; }
h4 { font-size: 1.15rem !important; font-weight: 700; }

p { color: var(--ink-soft); }

a { color: var(--teal); transition: color .2s ease; }
a:hover { color: var(--mint); text-decoration: none; }

::selection { background: var(--mint-soft); color: var(--ink); }

abbr[type], abbr[title] { text-decoration: none !important; }

.preloader { background: var(--bg); }
.spinner { border-top-color: var(--teal) !important; border-left-color: var(--teal) !important; }

/* ---------- Section rhythm & alternating backgrounds ---------- */
.section-padding, .section-padding4 { padding: 96px 0 !important; }

#admission { background: var(--bg); }
#prices { background: var(--bg-alt); }
#team { background: var(--bg); }
#houserules { background: var(--bg-alt); }
#insurance { background: var(--bg); }

/* Centered section heading with accent underline */
section h2.text-center, section h2 {
    margin-bottom: 14px;
}
section h2.text-center::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--mint));
}

/* ---------- Top contact bar ---------- */
.header-top {
    background: var(--teal-deep) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 12px 0 !important;
}
.header-top h6, .header-top h6 a, .header-top a {
    color: #EAFBF7 !important;
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: .01em;
    font-size: 13px !important;
}
.header-top h6 i, .header-top i { color: var(--mint-soft) !important; }
.header-top a:hover { color: #ffffff !important; }

/* ---------- Main header / nav ---------- */
#header {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--line);
    padding: 12px 0 !important;
    /* Do NOT animate `top`/position — otherwise the snap from below the
       contact bar to the viewport top stretches a visible gap. */
    transition: background-color .25s ease, box-shadow .25s ease !important;
}
#header.header-scrolled {
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 10px 30px -18px rgba(11, 82, 82, .5) !important;
}
/* Align header just below the top contact bar */
@media (min-width: 992px) { #header { top: 58px; } }

/* Logo lockup (text only) */
#logo a, #header #logo a {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    color: var(--ink) !important;
    font-family: var(--font-head) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.01em !important;
    border-left: none !important;
    padding-left: 0 !important;
    line-height: 1.05;
    white-space: nowrap;
}
#logo .pm-wordmark, #header #logo .pm-wordmark { color: var(--ink) !important; }
#logo .pm-brand, #header #logo .pm-brand { color: var(--teal) !important; }

/* Keep logo and menu on one line on desktop */
@media (min-width: 992px) {
    #header .row.align-items-center { flex-wrap: nowrap !important; }
    #header #logo { flex: 0 0 auto; }
    #nav-menu-container { flex: 0 1 auto; min-width: 0; }
}

/* Nav links */
.nav-menu > li, .nav-menu li {
    margin: 0 1px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
.nav-menu a, #header .nav-menu a {
    color: var(--ink-soft) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 8px 11px !important;
    border-radius: 9px;
    text-shadow: none !important;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}
.nav-menu a:hover, #header .nav-menu a:hover,
#header.header-scrolled .nav-menu a:hover {
    color: var(--teal) !important;
    background: var(--bg-alt) !important;
    text-decoration: none !important;
}
#header.header-scrolled .nav-menu a { color: var(--ink-soft) !important; }
#menu-btn { color: var(--teal) !important; }

/* ---------- Hero / banner ---------- */
.banner-area {
    padding: 210px 0 150px !important;
    background-color: var(--teal-deep) !important;
}
.main-img-overlay {
    background: linear-gradient(100deg,
        rgba(8, 58, 58, .82) 0%,
        rgba(8, 58, 58, .55) 42%,
        rgba(8, 58, 58, .12) 72%,
        rgba(8, 58, 58, 0) 100%) !important;
}
/* Kill the grey text box, place text directly on the overlay */
.banner-area .col-lg-5 {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.pm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px !important;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: #ffffff !important;
    font-weight: 600;
    font-size: .95rem !important;
    line-height: 1.35;
    max-width: none !important;
}
.pm-hero-badge i { color: var(--mint-soft); font-size: 1.05em; }

.banner-area h4 {
    color: var(--mint-soft) !important;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .85rem !important;
    font-weight: 600;
    margin-bottom: 10px;
}
.banner-area h1 { color: #ffffff !important; margin-bottom: 18px; }
.banner-area p {
    color: rgba(255, 255, 255, .90) !important;
    font-size: 1.08rem;
    max-width: 520px;
}

@media (max-width: 991.98px) {
    .banner-area { padding: 170px 0 120px !important; }
    /* The hero column's padding is zeroed above so the text lines up with the
       overlay on desktop. On mobile that leaves the text flush against both
       screen edges (and long Estonian words clip off-screen), so restore side
       gutters and shrink the heading to fit narrow viewports. */
    .banner-area .col-lg-5 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .banner-area h1 { font-size: 30px !important; }
    .banner-area p { max-width: 100% !important; }
    .pm-hero-badge { max-width: 100% !important; }
}

@media (max-width: 575.98px) {
    .banner-area h1 { font-size: 26px !important; }
}

/* ---------- Buttons ---------- */
.template-btn {
    background: linear-gradient(135deg, var(--teal) 0%, var(--mint) 100%) !important;
    color: #ffffff !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: 15px !important;
    letter-spacing: .01em !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.template-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    filter: brightness(1.05);
}

/* Fixed Perearst24 call-to-action */
a.template-btn[href*="perearst24"] {
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%) !important;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55) !important;
}

/* ---------- Cards: staff ---------- */
.specialist-area .single-doctor {
    background: #ffffff !important;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 22px 26px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.specialist-area .single-doctor::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--teal), var(--mint));
}
.specialist-area .single-doctor:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}
.specialist-area .single-doctor .content-area,
.specialist-area .single-doctor:hover .content-area {
    padding: 0 !important;
    box-shadow: none !important;
}
.specialist-area .single-doctor:hover .doctor-name,
.specialist-area .doctor-name {
    background: transparent !important;
    color: var(--ink) !important;
    padding: 0 !important;
}
.specialist-area .single-doctor .doctor-name h3 {
    color: var(--ink) !important;
    opacity: 1 !important;
    text-transform: none !important;
    font-family: var(--font-head) !important;
    margin-bottom: 6px;
}
.specialist-area .single-doctor .doctor-name h6 {
    color: var(--teal) !important;
    opacity: 1 !important;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: .01em;
}
/* Decorative mark above each name */
.specialist-area .single-doctor .doctor-name::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(59,176,160,.18), rgba(15,110,110,.12)),
        var(--bg-alt);
    background-image: url("../img/logo/favicon.svg");
    background-size: 30px 30px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--line);
}

/* ---------- Tables ---------- */
.table-container {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    /* Allow wide tables to scroll horizontally on narrow screens instead of
       being clipped off the edge. overflow-y stays hidden to keep the rounded
       corners. On wide screens the table fits, so no scrollbar appears. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
.admission-table, .pricelist-table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 0 !important;
}
.admission-table thead tr, .pricelist-table thead tr {
    background: var(--teal) !important;
    border: none !important;
    font-family: var(--font-head);
}
.admission-table thead td, .pricelist-table thead td {
    color: #ffffff !important;
    font-weight: 700;
    padding: 14px 12px !important;
    font-size: 14px;
}
.admission-table tbody tr, .pricelist-table tbody tr {
    border-bottom: 1px solid var(--line) !important;
    transition: background .15s ease;
}
.admission-table tbody tr:nth-child(even),
.pricelist-table tbody tr:nth-child(even) {
    background: var(--bg-alt);
}
.admission-table tbody tr:hover, .pricelist-table tbody tr:hover {
    background: rgba(59, 176, 160, .12);
}
.admission-table tbody tr:last-child,
.pricelist-table tbody tr:last-child { border-bottom: none !important; }
.admission-table td, .pricelist-table td {
    padding: 12px !important;
    color: var(--ink);
}
.admission-table td:first-child, .pricelist-table td:first-child {
    color: var(--ink);
    font-weight: 500;
}
td.price { color: var(--teal) !important; font-weight: 700; }

/* Content blocks inside admission */
#admission ul { display: inline-block; text-align: left; }
#admission ul li { margin: 4px 0; }
#admission a strong { color: var(--teal); }

/* ==========================================================================
   Structured content components (Töökorraldus / Nimistu / Kindlustus)
   ========================================================================== */
.pm-content { text-align: left; max-width: 780px; margin: 0 auto; }
.pm-content p { color: var(--ink-soft); }

.pm-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 28px;
    box-shadow: var(--shadow-sm);
    margin-top: 24px;
}
.pm-panel--accent {
    background: var(--bg-alt);
    border-color: rgba(15, 110, 110, .18);
    border-left: 4px solid var(--teal);
}

/* Checklist (Töökorraldus) */
.pm-checklist { margin: 28px 0 0; padding: 0; list-style: none; }
.pm-checklist li {
    position: relative;
    padding: 15px 0 15px 42px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    line-height: 1.6;
}
.pm-checklist li:last-child { border-bottom: none; }
.pm-checklist li::before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0; top: 14px;
    width: 27px; height: 27px;
    line-height: 27px; text-align: center;
    font-size: 12px;
    color: var(--teal);
    background: rgba(59, 176, 160, .14);
    border-radius: 50%;
}
.pm-checklist li strong { color: var(--ink); }

/* Icon chips */
.pm-register__icon, .pm-note__icon, .pm-insurer__icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--teal), var(--mint));
    color: #fff; font-size: 21px;
}

/* Registration card */
.pm-register__head { display: flex; gap: 16px; align-items: flex-start; }
.pm-register__head h3 { margin: 2px 0 5px; }
.pm-register__head p { margin: 0; }
.pm-btn-file {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 22px 0 6px;
    padding: 13px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal), var(--mint));
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pm-btn-file:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: #fff !important; text-decoration: none; }
.pm-btn-file__ext {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    background: rgba(255, 255, 255, .22);
    padding: 2px 8px; border-radius: 6px;
}
.pm-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; }
.pm-steps li {
    position: relative;
    padding: 11px 0 11px 42px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.pm-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; left: 0; top: 9px;
    width: 27px; height: 27px;
    line-height: 25px; text-align: center;
    font-size: 13px; font-weight: 700;
    color: var(--teal);
    background: #fff;
    border: 1px solid rgba(15, 110, 110, .32);
    border-radius: 50%;
}

/* Insurer header (Kindlustus) */
.pm-insurer { display: flex; gap: 16px; align-items: center; }
.pm-label { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); font-weight: 600; }
.pm-insurer__name { margin: 3px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.pm-insurer__name small, .pm-def__value small { color: var(--ink-soft); font-weight: 400; font-size: .85em; }

/* Definition list */
.pm-deflist { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pm-def { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.pm-def:last-child { border-bottom: none; }
.pm-def:nth-child(even) { background: var(--bg-alt); }
.pm-def__label { flex: 0 0 190px; font-weight: 600; color: var(--ink); }
.pm-def__value { flex: 1 1 260px; color: var(--ink-soft); }

/* Subheads */
.pm-subhead { margin: 32px 0 14px !important; font-size: .92rem !important; text-transform: uppercase; letter-spacing: .09em; color: var(--teal) !important; }

/* Stat tiles */
.pm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pm-stats--2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
.pm-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--teal);
    border-radius: var(--radius-sm);
    padding: 22px 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.pm-stat__num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--teal); letter-spacing: -.01em; }
.pm-stat__label { display: block; margin-top: 7px; font-size: .82rem; color: var(--ink-soft); }

/* Note box */
.pm-note { display: flex; gap: 16px; align-items: flex-start; }
.pm-note p { margin: 0 0 8px; }
.pm-note p:last-child { margin: 0; }

@media (max-width: 575.98px) {
    .pm-stats, .pm-stats--2 { grid-template-columns: 1fr 1fr; }
    .pm-def__label { flex-basis: 100%; }
    .pm-panel { padding: 22px 18px; }

    /* Tighten table cells so the reception-times / price tables need as little
       horizontal scrolling as possible on phones. */
    .admission-table thead td, .pricelist-table thead td {
        padding: 10px 8px !important;
        font-size: 12px;
    }
    .admission-table td, .pricelist-table td {
        padding: 8px !important;
        font-size: 13px;
    }
    .admission-table td:not(.text-left),
    .pricelist-table td:not(.text-left) { white-space: nowrap; }
}

/* ---------- Footer ---------- */
.footer-area {
    background: linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%) !important;
    color: #EAFBF7 !important;
}
.footer-area h2, .footer-area h3 { color: #ffffff !important; }
.footer-area h2.text-center::after {
    background: linear-gradient(90deg, var(--mint-soft), #ffffff);
}
.footer-area li, .footer-area ul li { color: rgba(234, 251, 247, .92) !important; }
.footer-area strong { color: #ffffff !important; }
.footer-area a { color: var(--mint-soft) !important; }
.footer-area a:hover { color: #ffffff !important; }
.footer-area row {
    display: block;
    overflow: hidden;
}
.footer-area row + row {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-area .footer-widget { padding-top: 10px; }

/* ==========================================================================
   Vastuvõtt (#admission) — structured premium layout
   ========================================================================== */
.pm-subhead--center {
    text-align: center;
    margin: 46px 0 24px !important;
    font-size: 1rem !important;
}

/* Perearst24 lead card */
.pm-lead {
    margin-top: 28px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 72%);
    color: #fff;
    padding: 44px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.pm-lead::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 260px; height: 260px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .10), transparent 70%);
    pointer-events: none;
}
.pm-lead__body { position: relative; z-index: 1; }
.pm-lead__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mint-soft);
    margin-bottom: 12px;
}
.pm-lead__title { color: #fff !important; margin: 0 0 12px !important; font-size: 1.6rem !important; }
.pm-lead__text { color: rgba(255, 255, 255, .9); margin: 0 0 24px; max-width: 640px; }
.pm-lead__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 28px;
    margin-bottom: 28px;
    max-width: 680px;
}
.pm-lead__actions span { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 500; }
.pm-lead__actions i {
    flex: 0 0 auto;
    width: 25px; height: 25px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    color: var(--mint-soft);
    background: rgba(255, 255, 255, .14);
}
.pm-lead__btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff;
    color: var(--teal) !important;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 999px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pm-lead__btn:hover { transform: translateY(-2px); color: var(--teal-deep) !important; text-decoration: none; }

/* Contact channel cards */
.pm-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pm-channel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 24px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pm-channel:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pm-channel__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--teal), var(--mint));
    color: #fff;
    font-size: 23px;
}
.pm-channel h5 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--ink) !important;
    text-transform: none !important;
    margin: 0 0 10px !important;
}
.pm-channel p { color: var(--ink-soft); margin: 0 0 10px; line-height: 1.5; font-size: .93rem; }
.pm-channel p:last-child { margin: 0; }
.pm-channel strong { color: var(--ink); }

/* Important callouts */
.pm-callout {
    display: flex; gap: 15px; align-items: center;
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--bg-alt);
    border: 1px solid rgba(15, 110, 110, .14);
    border-left: 4px solid var(--teal);
    border-radius: var(--radius-sm);
}
.pm-callout:first-of-type { margin-top: 24px; }
.pm-callout__icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(59, 176, 160, .16);
    color: var(--teal);
    font-size: 17px;
}
.pm-callout p { margin: 0; color: var(--ink); }

/* Getting here cards */
.pm-arrive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pm-arrive__item {
    display: flex; gap: 15px; align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.pm-arrive__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-alt);
    color: var(--teal);
    font-size: 18px;
    border: 1px solid var(--line);
}
.pm-arrive__item h5 {
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--ink) !important;
    text-transform: none !important;
    margin: 0 0 6px !important;
}
.pm-arrive__item p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }

@media (max-width: 767.98px) {
    .pm-lead { padding: 30px 22px; }
    .pm-lead__actions { grid-template-columns: 1fr; }
    .pm-channels, .pm-arrive { grid-template-columns: 1fr; }
}

/* ---------- Mobile slide-in navigation ---------- */
#mobile-nav {
    background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%) !important;
    width: 280px;
    /* Must match -width so the closed panel is fully off-screen. The theme's
       -260px was tied to its 260px width; widening to 280px without this left
       a 20px sliver peeking on the left edge. */
    left: -280px;
    padding-top: 24px;
}
#mobile-nav ul li a {
    color: #ffffff !important;
    text-transform: none !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 13px 22px !important;
}
#mobile-nav ul li a:hover {
    color: var(--mint-soft) !important;
    background: rgba(255, 255, 255, .07) !important;
}
#mobile-nav-toggle i, #menu-btn { color: var(--teal) !important; }
body.mobile-nav-active #mobile-nav-toggle i { color: #ffffff !important; }

/* Vertically align the hamburger with the logo on the same line.
   #header is fixed at top:0 on mobile with 12px vertical padding; the logo
   line box is ~26px tall (centre at 25px). Match the toggle to that centre. */
@media (max-width: 960px) {
    #mobile-nav-toggle {
        top: 8px;
        right: 16px;
        height: 26px;
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

@media (max-width: 673px) {
    #logo {
        margin-left: 20px;
        margin-top: 3px;
    }
}
#mobile-body-overly { background: rgba(8, 40, 40, .6) !important; }

/* ---------- Misc polish ---------- */
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }