/* =========================================================
   Pomona Mobile Auto Glass — site stylesheet
   Standalone: replaces the old style.css. Sits on top of
   bootstrap.min.css and carries the shared chrome
   (top bar, navbar, forms, footer) plus the homepage.

   Theme: midnight navy + alabaster + champagne gold.
   A luxury-automotive palette — deep cool surfaces, warm
   neutral paper, and a single restrained metallic accent.
   ========================================================= */

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
    /* surfaces — deep, cool, near-black navy */
    --pm-navy-900: #050B14;
    --pm-navy-800: #0A1421;
    --pm-navy-700: #111F31;
    --pm-navy-600: #1B3047;
    --pm-navy-rgb: 10, 20, 33;

    /* accent — champagne gold, the only chromatic note */
    --pm-gold: #C9A961;
    --pm-gold-bright: #E3CB92;
    --pm-gold-deep: #A8873F;
    --pm-gold-rgb: 201, 169, 97;

    /* legacy aliases — inner pages + bootstrap utilities still
       reference these names; re-pointed at the new palette */
    --pm-blue-600: #111F31;
    --pm-blue-500: #1B3047;
    --pm-blue-300: #C9A961;
    --pm-amber: #C9A961;
    --pm-amber-600: #A8873F;

    /* text — warm neutrals read richer than blue-greys */
    --pm-ink: #0A1421;
    --pm-body: #55606D;
    --pm-muted: #8A93A0;
    --pm-on-dark: #C4CDD8;

    /* lines + fills — alabaster paper, warm hairlines */
    --pm-line: #E7E4DE;
    --pm-soft: #F8F7F4;
    --pm-soft-2: #F1EFE9;

    /* shape — crisper corners read more premium than soft ones */
    --pm-r-sm: 6px;
    --pm-r: 10px;
    --pm-r-lg: 14px;
    --pm-r-pill: 999px;

    /* elevation — two-layer, low opacity; luxury is subtle */
    --pm-sh-sm: 0 1px 2px rgba(10, 20, 33, 0.04),
        0 2px 8px rgba(10, 20, 33, 0.04);
    --pm-sh: 0 2px 6px rgba(10, 20, 33, 0.04),
        0 16px 40px rgba(10, 20, 33, 0.08);
    --pm-sh-lg: 0 8px 24px rgba(5, 11, 20, 0.10),
        0 40px 80px rgba(5, 11, 20, 0.16);
    --pm-sh-gold: 0 10px 30px rgba(201, 169, 97, 0.28);

    /* champagne accent line — used for every decorative rule/underline */
    --pm-accent-line: linear-gradient(90deg, var(--pm-gold-deep), var(--pm-gold-bright), var(--pm-gold-deep));
    --pm-accent-line-v: linear-gradient(180deg, var(--pm-gold-bright), var(--pm-gold-deep));

    /* motion */
    --pm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* fixed header geometry */
    --pm-topbar-h: 46px;
    --pm-navbar-h: 82px;
    /* clearance for the fixed chrome; index.php measures the real
       header on load and overwrites this at runtime */
    --pmag-header-offset: 128px;
}

/* =========================================================
   2. BASE
   ========================================================= */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--pm-body);
    font-size: 1rem;
    line-height: 1.7;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Jost", "Open Sans", sans-serif;
    color: var(--pm-ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

img {
    max-width: 100%;
}

a {
    color: var(--pm-blue-600);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--pm-gold-deep);
}

/* long service/area names must never push the page sideways on small phones */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
td,
th {
    overflow-wrap: break-word;
}

::selection {
    background: var(--pm-amber);
    color: var(--pm-navy-900);
}

/* This bootstrap build is compiled green and predates CSS-variable
   buttons, so the utilities the inner pages lean on are re-set directly. */
.text-primary {
    color: var(--pm-blue-600) !important;
}

.bg-primary {
    background-color: var(--pm-blue-600) !important;
}

.bg-dark {
    background-color: var(--pm-navy-800) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:visited {
    background-color: var(--pm-blue-600);
    border-color: var(--pm-blue-600);
    color: #fff !important;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    border-radius: var(--pm-r-pill);
    padding: 0.75rem 1.75rem;
    box-shadow: 0 10px 24px rgba(var(--pm-gold-rgb), 0.26);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--pm-blue-500) !important;
    border-color: var(--pm-blue-500) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

.btn-primary i,
.btn-primary .fa {
    color: #fff !important;
}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: "Jost", sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.95rem 1.9rem;
    border: 2px solid transparent;
    border-radius: var(--pm-r-pill);
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease,
        background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pm-btn:active {
    transform: translateY(0);
}

.pm-btn i {
    font-size: 0.95em;
}

.pm-btn-amber {
    background: var(--pm-amber);
    color: var(--pm-navy-900) !important;
    box-shadow: 0 12px 26px rgba(var(--pm-gold-rgb), 0.32);
}

.pm-btn-amber:hover {
    background: var(--pm-amber-600);
    color: var(--pm-navy-900) !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(var(--pm-gold-rgb), 0.40);
}

.pm-btn-amber i {
    color: var(--pm-navy-900) !important;
}

.pm-btn-outline {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.34);
}

.pm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff !important;
    transform: translateY(-2px);
}

/* outline variant on light backgrounds */
.pm-btn-outline-ink {
    background: #fff;
    color: var(--pm-ink) !important;
    border-color: #C9D5E3;
    box-shadow: var(--pm-sh-sm);
}

.pm-btn-outline-ink:hover {
    background: var(--pm-navy-800);
    border-color: var(--pm-navy-800);
    color: #fff !important;
    transform: translateY(-2px);
}

.pm-btn-outline-ink:hover i {
    color: #fff !important;
}

/* =========================================================
   4. SPINNER  (main.js drops .show on load)
   ========================================================= */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
    z-index: 2000;
}

#spinner.show {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* =========================================================
   5. TOP CALL BAR
   ========================================================= */
.top-header-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1035;
    min-height: var(--pm-topbar-h);
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--pm-navy-900) 0%, var(--pm-navy-700) 50%, var(--pm-navy-900) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
}

.top-header-bar .call-now {
    padding: 0 1rem !important;
    width: 100%;
}

.top-header-bar .d-inline-flex {
    margin-right: 0 !important;
    width: 100%;
    justify-content: center;
}

.top-header-bar h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    min-height: var(--pm-topbar-h);
    font-family: "Jost", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--pm-on-dark);
}

.top-header-bar h3 span {
    color: var(--pm-on-dark) !important;
    font-weight: 500;
}

.top-header-bar h3 i.fa {
    color: var(--pm-amber) !important;
    font-size: 0.9rem;
}

.top-header-bar a.topbar-setup {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    transition: color .2s ease;
}

.top-header-bar a.topbar-setup:hover {
    color: var(--pm-amber);
}

/* =========================================================
   6. NAVBAR
   ========================================================= */
.navbar.fixed-top {
    top: var(--pm-topbar-h) !important;
    margin-top: 0 !important;
    padding: 0.55rem 0;
    background: #fff !important;
    border-bottom: 1px solid var(--pm-line);
    box-shadow: 0 4px 24px rgba(11, 27, 44, 0.06);
    justify-content: space-between;
}

.navbar .navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-brand .header-logo {
    height: 88px !important;
    width: auto;
    margin: 0 0 0 1.25rem !important;
    display: block;
}

.navbar .navbar-nav {
    align-items: stretch;
}

.navbar .navbar-nav .nav-link,
.navbar .navbar-nav .nav-item.dropdown>.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    font-family: "Jost", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--pm-ink);
    padding: 0.75rem 0.95rem;
    transition: color .2s ease;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show>.nav-link {
    color: var(--pm-blue-600);
}

/* animated underline — ::before, because ::after carries the caret */
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-link::before {
        content: "";
        position: absolute;
        left: 0.95rem;
        right: 0.95rem;
        bottom: 0.35rem;
        height: 2px;
        border-radius: 2px;
        background: var(--pm-accent-line);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
    }

    .navbar .navbar-nav .nav-link:hover::before,
    .navbar .navbar-nav .nav-item:hover>.nav-link::before {
        transform: scaleX(1);
    }
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 0.45rem;
    font-size: 0.85em;
    background: none;
    transform: none;
    height: auto;
    color: var(--pm-muted);
}

/* dropdown panels */
.navbar .dropdown-menu {
    width: 310px;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r);
    box-shadow: var(--pm-sh);
}

.navbar .dropdown-menu .dropdown-item {
    white-space: normal;
    border-radius: var(--pm-r-sm);
    padding: 0.55rem 0.8rem;
    font-size: 0.94rem;
    line-height: 1.45;
    color: var(--pm-body);
    transition: background-color .18s ease, color .18s ease;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background: var(--pm-soft-2);
    color: var(--pm-blue-600);
}

/* scrollbar inside long menus */
.navbar .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.navbar .dropdown-menu::-webkit-scrollbar-thumb {
    background: #C7D3E0;
    border-radius: 6px;
}

@media (min-width: 992px) {

    /* the nav sits hard right — anchor menus to their item so a wide
       menu never runs off the right edge on narrow desktops */
    .navbar .nav-item .dropdown-menu {
        display: block;
        left: auto;
        right: 0;
        margin-top: 0;
        top: 118%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }

    .navbar .nav-item:hover .dropdown-menu,
    .navbar .nav-item .dropdown-menu.show {
        top: 100%;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
    }
}

/* hamburger */
.navbar-toggler {
    margin-right: 1rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-sm);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(var(--pm-gold-rgb), 0.18);
}

@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        margin-top: 0 !important;
        max-height: 72vh;
        overflow-y: auto;
        border-top: 1px solid var(--pm-line);
    }

    .navbar .navbar-nav {
        padding: 0.75rem 1rem 1.25rem !important;
    }

    .navbar .navbar-nav .nav-link {
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid var(--pm-soft);
    }

    .navbar .dropdown-menu {
        width: 100%;
        max-height: 240px;
        margin: 0.25rem 0 0.5rem;
        background: var(--pm-soft);
        border-color: transparent;
        box-shadow: none;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand .header-logo {
        height: 46px !important;
        margin-left: 0.9rem !important;
    }

    .navbar-toggler {
        margin-right: 0.75rem;
    }
}

/* =========================================================
   7. HOMEPAGE SHELL
   ========================================================= */
/* the hero carries the fixed-header clearance itself, so the navy band
   runs right up under the navbar instead of leaving a white strip */
.pmag-home {
    padding-top: 0;
}

/* =========================================================
   8. HERO
   ========================================================= */
.pmag-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--pmag-header-offset) + 3.5rem) 0 6.5rem;
    background:
        radial-gradient(900px 480px at 82% 6%, rgba(var(--pm-gold-rgb), 0.20), transparent 62%),
        radial-gradient(760px 460px at 2% 88%, rgba(var(--pm-gold-rgb), 0.22), transparent 64%),
        linear-gradient(160deg, var(--pm-navy-800) 0%, var(--pm-navy-900) 100%);
}

/* faint glass streak across the band */
.pmag-hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 140%;
    background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, 0.045) 48%, transparent 55%);
    pointer-events: none;
    z-index: -1;
}

.pmag-hero .container {
    position: relative;
    z-index: 1;
}

.pmag-hero .row {
    align-items: center;
}

/* image first in the DOM so it stacks on top on mobile */
.pmag-hero-media {
    order: 1;
}

.pmag-hero-copy {
    order: 2;
}

@media (min-width: 992px) {
    .pmag-hero-media {
        order: 2;
    }

    .pmag-hero-copy {
        order: 1;
    }
}

.pmag-hero h1 {
    color: #fff;
    font-size: clamp(1.95rem, 3.4vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

/* champagne hairline above the headline — a quiet luxury cue */
.pmag-hero h1::before {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-bottom: 1.6rem;
    border-radius: 3px;
    background: var(--pm-accent-line);
}

.pmag-hero .pmag-lead {
    color: var(--pm-on-dark);
    font-size: clamp(1.02rem, 1.35vw, 1.16rem);
    line-height: 1.75;
    max-width: 46rem;
    margin-bottom: 2rem;
}

/* inline links in hero copy sit on the dark navy band — the site-wide link
   color (navy) is unreadable there, so lift it to champagne gold instead */
.pmag-hero .pmag-lead a {
    color: var(--pm-gold-bright);
    text-decoration: underline;
    text-decoration-color: rgba(var(--pm-gold-rgb), 0.45);
    font-weight: 600;
}

.pmag-hero .pmag-lead a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* trust chips */
.pmag-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.pmag-checks li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    font-family: "Jost", sans-serif;
    font-size: 0.97rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--pm-r-sm);
    backdrop-filter: blur(2px);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.pmag-checks li:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(var(--pm-gold-rgb), 0.45);
    transform: translateY(-2px);
}

.pmag-checks li::before {
    content: "\2714";
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pm-navy-900);
    background: var(--pm-amber);
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    .pmag-checks {
        grid-template-columns: 1fr;
    }
}

/* framed hero photo */
.pmag-hero-frame {
    position: relative;
    border-radius: var(--pm-r-lg);
    padding: 10px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--pm-sh-lg);
}

.pmag-hero-frame::before {
    content: "";
    position: absolute;
    inset: -18% -12%;
    background: radial-gradient(closest-side, rgba(var(--pm-gold-rgb), 0.22), transparent 72%);
    filter: blur(12px);
    z-index: -1;
}

.pmag-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--pm-r-lg) - 8px);
    object-fit: cover;
    aspect-ratio: 5 / 6;
}

@media (max-width: 991.98px) {
    .pmag-hero {
        padding: calc(var(--pmag-header-offset) + 1.75rem) 0 5rem;
    }

    .pmag-hero-frame {
        max-width: 560px;
        margin: 0 auto 0.5rem;
        padding: 8px;
    }

    .pmag-hero-img {
        aspect-ratio: 4 / 3;
        max-height: 320px;
        object-position: center 32%;
    }
}

/* =========================================================
   9. SECTION 2 — intro + quote form
   ========================================================= */
.pmag-section2 {
    position: relative;
    z-index: 2;
    padding: 3.5rem 0 5rem;
    background: #fff;
}

.pmag-section2 .row {
    align-items: flex-start;
}

.pmag-intro p {
    font-size: 1.06rem;
    line-height: 1.85;
    color: var(--pm-body);
    margin-bottom: 1.35rem;
}

/* first line gets a quiet accent rule */
.pmag-intro>p:first-child {
    position: relative;
    padding-left: 1.5rem;
    color: var(--pm-ink);
    font-size: 1.12rem;
}

.pmag-intro>p:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 4px;
    border-radius: 4px;
    background: var(--pm-accent-line-v);
}

.pmag-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

@media (max-width: 575.98px) {
    .pmag-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pmag-cta-row .pm-btn {
        width: 100%;
    }
}

/* the form card lifts over the hero's diagonal edge */
.pmag-form-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh-lg);
    overflow: hidden;
    scroll-margin-top: calc(var(--pmag-header-offset) + 1rem);
}

@media (min-width: 992px) {
    .pmag-form-card {
        margin-top: -9rem;
    }
}

/* =========================================================
   9b. SHARED SECTION HEADING
   ========================================================= */
.pmag-sec-head {
    max-width: 52rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.pmag-sec-head p {
    margin: 1.5rem 0 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--pm-body);
}

.pmag-sec-head h2 {
    position: relative;
    display: inline-block;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    letter-spacing: -0.02em;
    margin-bottom: 0;
    padding-bottom: 1rem;
}

.pmag-sec-head h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 76px;
    height: 4px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: var(--pm-accent-line);
}

/* =========================================================
   9c. SECTION 3 — Why Choose
   ========================================================= */
.pmag-why {
    position: relative;
    padding: 5rem 0;
    background:
        radial-gradient(760px 420px at 90% 0%, rgba(var(--pm-gold-rgb), 0.06), transparent 62%),
        var(--pm-soft);
    border-top: 1px solid var(--pm-line);
}

.pmag-why-head h2 {
    position: relative;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    padding-top: 1.25rem;
}

.pmag-why-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: var(--pm-accent-line);
}

.pmag-why-head p {
    font-size: 1.06rem;
    line-height: 1.85;
    color: var(--pm-body);
    margin: 0;
}

.pmag-why-media {
    position: relative;
    margin-top: 2rem;
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    box-shadow: var(--pm-sh);
}

.pmag-why-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* thin navy wash so the photo sits in the palette rather than fighting it */
.pmag-why-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(7, 18, 31, 0.35) 100%);
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .pmag-why-media {
        max-width: 520px;
        margin: 2rem auto 0;
    }

    .pmag-why-media img {
        aspect-ratio: 4 / 3;
        object-position: center 30%;
    }
}

.pmag-why-list {
    display: grid;
    gap: 0.5rem;
}

.pmag-why-item {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.35rem 1.35rem 1.35rem 1.1rem;
    border-radius: var(--pm-r);
    border: 1px solid transparent;
    transition: background-color .22s ease, border-color .22s ease,
        box-shadow .22s ease, transform .22s ease;
}

.pmag-why-item+.pmag-why-item {
    border-top: 1px solid var(--pm-line);
    border-radius: var(--pm-r);
}

.pmag-why-item:hover {
    background: #fff;
    border-color: var(--pm-line);
    box-shadow: var(--pm-sh);
    transform: translateX(4px);
}

.pmag-why-item:hover+.pmag-why-item {
    border-top-color: transparent;
}

.pmag-why-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pm-navy-700), var(--pm-navy-800));
    box-shadow: 0 8px 18px rgba(11, 27, 44, 0.18);
}

.pmag-why-icon i {
    font-size: 1.2rem;
    color: var(--pm-amber) !important;
}

.pmag-why-body h3 {
    font-size: 1.16rem;
    font-weight: 600;
    margin: 0.2rem 0 0.5rem;
    color: var(--pm-ink);
}

.pmag-why-body p {
    margin: 0;
    font-size: 0.99rem;
    line-height: 1.75;
    color: var(--pm-body);
}

@media (max-width: 575.98px) {
    .pmag-why {
        padding: 3.25rem 0;
    }

    .pmag-why-item {
        padding: 1.1rem 0.9rem;
        gap: 0.9rem;
    }

    .pmag-why-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .pmag-why-icon i {
        font-size: 1.02rem;
    }
}

/* =========================================================
   9d. SECTION 4 — Our Services
   ========================================================= */
.pmag-services {
    padding: 5rem 0 5.5rem;
    background: #fff;
}

.pmag-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 1199.98px) {
    .pmag-svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pmag-svc-grid {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }
}

.pmag-svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    transition: transform .26s var(--pm-ease), box-shadow .26s var(--pm-ease), border-color .26s ease;
}

.pmag-svc-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--pm-sh-lg);
}

/* --- image header with overlaid icon badge --- */
.pmag-svc-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--pm-navy-800);
}

.pmag-svc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s var(--pm-ease);
}

.pmag-svc-card:hover .pmag-svc-media img {
    transform: scale(1.06);
}

/* champagne accent bar wipes across the image top on hover */
.pmag-svc-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: var(--pm-accent-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--pm-ease);
}

.pmag-svc-card:hover .pmag-svc-media::before {
    transform: scaleX(1);
}

/* --- body --- */
.pmag-svc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.6rem 1.6rem 1.6rem;
}

.pmag-svc-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.7rem;
    color: var(--pm-ink);
}

.pmag-svc-card p {
    flex: 1 1 auto;
    font-size: 0.98rem;
    line-height: 1.72;
    color: var(--pm-body);
    margin-bottom: 1.25rem;
}

.pmag-svc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    font-family: "Jost", sans-serif;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--pm-blue-600);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease, gap .2s ease;
}

.pmag-svc-link i {
    font-size: 0.82em;
    transition: transform .2s ease;
}

.pmag-svc-link:hover {
    color: var(--pm-gold-deep);
    border-bottom-color: var(--pm-gold);
}

.pmag-svc-link:hover i {
    transform: translateX(4px);
}

@media (max-width: 575.98px) {
    .pmag-services {
        padding: 3.25rem 0 3.75rem;
    }

    .pmag-sec-head {
        margin-bottom: 2.25rem;
    }

    .pmag-svc-body {
        padding: 1.5rem 1.25rem 1.35rem;
    }
}

/* =========================================================
   9e. SECTIONS 5 + 6 — split copy / list blocks
   ========================================================= */
.pmag-split-copy h2 {
    position: relative;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 1.35rem;
    padding-top: 1.25rem;
}

.pmag-split-copy h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: var(--pm-accent-line);
}

.pmag-split-copy p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--pm-body);
    margin: 0;
}

/* the bold lead-in line above each list — a paragraph in the doc, kept as one */
.pmag-list-lead {
    font-family: "Jost", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 1.15rem;
}

.pmag-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.pmag-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 1rem;
    line-height: 1.6;
}

.pmag-checklist li i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
}

/* --- Section 5: light card, blue accent, amber ticks --- */
.pmag-chip {
    padding: 5rem 0;
    background: #fff;
}

.pmag-list-card {
    position: relative;
    padding: 2.1rem 1.9rem;
    border-radius: var(--pm-r-lg);
    background:
        radial-gradient(520px 300px at 100% 0%, rgba(var(--pm-gold-rgb), 0.07), transparent 60%),
        var(--pm-soft);
    border: 1px solid var(--pm-line);
    overflow: hidden;
}

.pmag-list-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--pm-accent-line-v);
}

.pmag-list-card .pmag-list-lead {
    color: var(--pm-ink);
}

.pmag-list-card .pmag-checklist li {
    color: var(--pm-body);
}

.pmag-list-card .pmag-checklist li i {
    background: var(--pm-blue-600);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(var(--pm-gold-rgb), 0.28);
}

/* --- Section 6: tinted band, dark alert panel on the left at desktop --- */
.pmag-replace {
    position: relative;
    padding: 5.5rem 0;
    background:
        radial-gradient(720px 420px at 6% 108%, rgba(var(--pm-gold-rgb), 0.07), transparent 60%),
        radial-gradient(560px 380px at 96% -8%, rgba(var(--pm-navy-rgb), 0.05), transparent 62%),
        var(--pm-soft);
    border-top: 1px solid var(--pm-line);
    overflow: hidden;
}

/* photo under the copy, filling the column beside the alert panel */
.pmag-replace-media {
    position: relative;
    margin-top: 1.75rem;
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    box-shadow: var(--pm-sh);
}

.pmag-replace-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: var(--pm-accent-line);
}

.pmag-replace-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    transition: transform .5s var(--pm-ease);
}

.pmag-replace-media:hover img {
    transform: scale(1.05);
}

/* soft navy gradient anchoring the base of the photo for depth */
.pmag-replace-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 11, 20, 0) 62%, rgba(5, 11, 20, 0.30) 100%);
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .pmag-replace-media {
        margin-top: 1.4rem;
    }

    .pmag-replace-media img {
        aspect-ratio: 16 / 10;
    }
}

.pmag-replace-copy {
    order: 1;
}

.pmag-replace-panel {
    order: 2;
}

@media (min-width: 992px) {
    .pmag-replace-panel {
        order: 1;
    }

    /* panel left on desktop */
    .pmag-replace-copy {
        order: 2;
    }

    /* equal-height columns: the copy+photo column sets the height and the
       dark alert panel stretches to match it, its content centred */
    .pmag-replace-media {
        margin-top: 1.9rem;
    }

    .pmag-replace-panel {
        display: flex;
    }

    .pmag-panel {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* offset champagne frame peeking out behind the panel — a quiet luxury detail */
.pmag-replace-panel {
    position: relative;
}

.pmag-replace-panel::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: -14px;
    bottom: -14px;
    border: 1px solid rgba(var(--pm-gold-rgb), 0.40);
    border-radius: var(--pm-r-lg);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 575.98px) {
    .pmag-replace-panel::before {
        right: -8px;
        bottom: -8px;
        top: 12px;
        left: 12px;
    }
}

.pmag-panel {
    position: relative;
    z-index: 1;
    padding: 2.5rem 2.1rem 2.25rem;
    border-radius: var(--pm-r-lg);
    background:
        linear-gradient(155deg, var(--pm-navy-700) 0%, var(--pm-navy-900) 100%);
    box-shadow: var(--pm-sh-lg);
    overflow: hidden;
}

/* champagne crown bar across the top of the panel */
.pmag-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pm-accent-line);
    z-index: 2;
}

/* warm glow bleeding from the upper-right corner */
.pmag-panel::after {
    content: "";
    position: absolute;
    top: -34%;
    right: -22%;
    width: 62%;
    height: 165%;
    background: radial-gradient(closest-side, rgba(var(--pm-gold-rgb), 0.28), transparent);
    pointer-events: none;
    z-index: 0;
}

.pmag-panel>* {
    position: relative;
    z-index: 1;
}

.pmag-panel .pmag-list-lead {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    margin-bottom: 0.4rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    letter-spacing: 0.005em;
}

/* small gold warning glyph before the lead-in, decorative only */
.pmag-panel .pmag-list-lead::before {
    content: "\f071";
    /* fa exclamation-triangle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--pm-gold);
}

.pmag-panel .pmag-checklist {
    gap: 0;
    margin-top: 0.4rem;
}

.pmag-panel .pmag-checklist li {
    align-items: center;
    color: rgba(233, 240, 248, 0.92);
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--pm-r-sm);
    transition: background-color .22s var(--pm-ease), padding-left .22s var(--pm-ease);
}

.pmag-panel .pmag-checklist li:last-child {
    border-bottom: none;
}

.pmag-panel .pmag-checklist li:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 0.9rem;
}

.pmag-panel .pmag-checklist li i {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
    background: rgba(var(--pm-gold-rgb), 0.15);
    color: var(--pm-gold) !important;
    border: 1px solid rgba(var(--pm-gold-rgb), 0.38);
    transition: background-color .22s ease, transform .22s var(--pm-ease);
}

.pmag-panel .pmag-checklist li:hover i {
    background: var(--pm-gold);
    color: var(--pm-navy-900) !important;
    transform: scale(1.08) rotate(-4deg);
}

@media (max-width: 575.98px) {

    .pmag-chip,
    .pmag-replace {
        padding: 3.25rem 0;
    }

    .pmag-list-card {
        padding: 1.6rem 1.25rem 1.6rem 1.4rem;
    }

    .pmag-panel {
        padding: 1.9rem 1.35rem 1.6rem;
    }

    .pmag-checklist li {
        font-size: 0.97rem;
    }
}

/* =========================================================
   9f. SECTION 7 — Side and Rear Window Replacement
   ========================================================= */
.pmag-sider {
    padding: 5rem 0;
    background: #fff;
}

.pmag-list-lead-center {
    text-align: center;
    margin-bottom: 1.75rem;
    color: var(--pm-ink);
}

/* 6-col track so 5 cards can sit 3-up with the last two centred underneath */
.pmag-case-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
}

.pmag-case-grid>* {
    grid-column: span 2;
}

.pmag-case-grid> :nth-child(4) {
    grid-column: 2 / span 2;
}

.pmag-case-grid> :nth-child(5) {
    grid-column: 4 / span 2;
}

.pmag-case {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.4rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pmag-case:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--pm-sh);
}

.pmag-case-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(var(--pm-gold-rgb), 0.10), rgba(var(--pm-gold-rgb), 0.03));
    border: 1px solid rgba(var(--pm-gold-rgb), 0.14);
    transition: background .22s ease, border-color .22s ease;
}

.pmag-case-icon i {
    font-size: 1.08rem;
    color: var(--pm-blue-600) !important;
    transition: color .22s ease;
}

.pmag-case:hover .pmag-case-icon {
    background: linear-gradient(145deg, var(--pm-navy-700), var(--pm-navy-800));
    border-color: transparent;
}

.pmag-case:hover .pmag-case-icon i {
    color: var(--pm-amber) !important;
}

.pmag-case p {
    margin: 0;
    align-self: center;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pm-body);
}

@media (max-width: 991.98px) {

    /* 4-col track = 2 cards per row, last one centred */
    .pmag-case-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pmag-case-grid>*,
    .pmag-case-grid> :nth-child(4) {
        grid-column: span 2;
    }

    .pmag-case-grid> :nth-child(5) {
        grid-column: 2 / span 2;
    }
}

@media (max-width: 767.98px) {
    .pmag-case-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .pmag-case-grid>*,
    .pmag-case-grid> :nth-child(4),
    .pmag-case-grid> :nth-child(5) {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   9g. SECTION 8 — ADAS Calibration and Safety Compliance
   ========================================================= */
.pmag-adas {
    padding: 5rem 0;
    background:
        radial-gradient(760px 420px at 12% 0%, rgba(var(--pm-gold-rgb), 0.07), transparent 62%),
        var(--pm-soft);
    border-top: 1px solid var(--pm-line);
}

.pmag-pills {
    list-style: none;
    margin: 0 auto 2.75rem;
    padding: 0;
    max-width: 60rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.pmag-pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: 999px;
    font-size: 0.98rem;
    color: var(--pm-ink);
    box-shadow: 0 2px 6px rgba(11, 27, 44, 0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.pmag-pills li::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pm-amber);
    box-shadow: 0 0 0 3px rgba(var(--pm-gold-rgb), 0.18);
}

.pmag-pills li:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--pm-gold-rgb), 0.28);
    box-shadow: 0 8px 18px rgba(11, 27, 44, 0.08);
}

/* closing paragraph — a paragraph in the doc, kept after the list */
.pmag-callout {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.75rem 1.85rem 1.75rem 2.4rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh);
    overflow: hidden;
}

.pmag-callout::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--pm-accent-line-v);
}

.pmag-callout-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--pm-navy-700), var(--pm-navy-800));
}

.pmag-callout-icon i {
    font-size: 1.15rem;
    color: var(--pm-amber) !important;
}

.pmag-callout p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--pm-body);
}

@media (max-width: 575.98px) {

    .pmag-sider,
    .pmag-adas {
        padding: 3.25rem 0;
    }

    .pmag-case {
        padding: 1.2rem 1.1rem;
        gap: 0.85rem;
    }

    .pmag-pills {
        gap: 0.6rem;
        margin-bottom: 2rem;
    }

    .pmag-pills li {
        padding: 0.6rem 1rem;
        font-size: 0.93rem;
    }

    .pmag-callout {
        flex-direction: column;
        gap: 0.9rem;
        padding: 1.4rem 1.25rem 1.4rem 1.75rem;
    }
}

/* =========================================================
   9h. SECTION 9 — Auto Glass Safety Standards (dark band)
   ========================================================= */
.pmag-standards {
    position: relative;
    padding: 5.5rem 0;
    background:
        radial-gradient(900px 480px at 85% 0%, rgba(var(--pm-gold-rgb), 0.22), transparent 62%),
        linear-gradient(165deg, var(--pm-navy-800) 0%, var(--pm-navy-900) 100%);
    overflow: hidden;
}

/* faint glass streak, same motif as the hero */
.pmag-standards::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 55%;
    height: 140%;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.045) 50%, transparent 58%);
    transform: rotate(-8deg);
    pointer-events: none;
}

.pmag-standards>.container {
    position: relative;
    z-index: 1;
}

.pmag-sec-head-invert h2 {
    color: #fff;
}

.pmag-sec-head-invert p {
    color: rgba(214, 226, 240, 0.86);
}

.pmag-std-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .pmag-std-grid {
        grid-template-columns: 1fr;
        gap: 1.15rem;
    }
}

.pmag-std {
    padding: 2rem 1.8rem;
    border-radius: var(--pm-r-lg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(2px);
    transition: transform .24s ease, background .24s ease, border-color .24s ease;
}

.pmag-std:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(var(--pm-gold-rgb), 0.35);
}

.pmag-std-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    border-radius: 14px;
    background: rgba(var(--pm-gold-rgb), 0.14);
    border: 1px solid rgba(var(--pm-gold-rgb), 0.32);
}

.pmag-std-icon i {
    font-size: 1.2rem;
    color: var(--pm-amber) !important;
}

.pmag-std h3 {
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 0.7rem;
}

.pmag-std p {
    margin: 0;
    font-size: 0.99rem;
    line-height: 1.75;
    color: rgba(214, 226, 240, 0.82);
}

/* =========================================================
   9i. SECTION 10 — Our Process (timeline)
   ========================================================= */
.pmag-process {
    position: relative;
    padding: 6rem 0;
    background:
        radial-gradient(760px 380px at 50% -6%, rgba(var(--pm-gold-rgb), 0.07), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--pm-soft) 100%);
}

.pmag-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

/* champagne rail threaded through the medallion centres; the white halo
   around each medallion tucks the line under it so it reads as connected.
   inset half a column each side so it lands on the first/last medallion. */
.pmag-steps::before {
    content: "";
    position: absolute;
    top: 41px;
    /* medallion vertical centre (82/2) */
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--pm-accent-line);
    opacity: 0.55;
    z-index: 0;
}

.pmag-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 0.6rem;
}

/* ---- the medallion (repurposed .pmag-step-dot span) ---- */
.pmag-step-dot {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    margin: 0 auto 1.7rem;
    border-radius: 50%;
    background: linear-gradient(155deg, var(--pm-navy-600) 0%, var(--pm-navy-900) 100%);
    color: var(--pm-gold);
    /* white gap ring lets the rail tuck under, then a soft gold halo */
    box-shadow: 0 0 0 7px #fff,
        0 0 0 8px rgba(var(--pm-gold-rgb), 0.28),
        0 14px 30px rgba(var(--pm-navy-rgb), 0.20);
    transition: transform .32s var(--pm-ease), box-shadow .32s var(--pm-ease),
        background .32s ease, color .32s ease;
}

/* decorative per-step icon (pure CSS, inert) */
.pmag-step-dot::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.72rem;
    line-height: 1;
}

.pmag-step:nth-child(1) .pmag-step-dot::before {
    content: "\f095";
}

/* phone     */
.pmag-step:nth-child(2) .pmag-step-dot::before {
    content: "\f5b6";
}

/* shuttle-van*/
.pmag-step:nth-child(3) .pmag-step-dot::before {
    content: "\f7d9";
}

/* tools     */
.pmag-step:nth-child(4) .pmag-step-dot::before {
    content: "\f018";
}

/* road      */

/* thin rotating champagne ring accent, quietly premium */
.pmag-step-dot::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(var(--pm-gold-rgb), 0.35);
    transition: inset .32s var(--pm-ease), border-color .32s ease;
}

.pmag-step:hover .pmag-step-dot {
    transform: translateY(-6px);
    background: linear-gradient(155deg, var(--pm-gold-bright) 0%, var(--pm-gold) 55%, var(--pm-gold-deep) 100%);
    color: var(--pm-navy-900);
    box-shadow: 0 0 0 7px #fff,
        0 0 0 8px rgba(var(--pm-gold-rgb), 0.5),
        var(--pm-sh-gold);
}

.pmag-step:hover .pmag-step-dot::after {
    inset: 4px;
    border-color: rgba(255, 255, 255, 0.55);
}

.pmag-step h3 {
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0.7rem;
    color: var(--pm-ink);
}

/* the leading "1." etc. reads as an accent numeral */
.pmag-step h3::first-letter {
    color: var(--pm-gold-deep);
}

.pmag-step p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--pm-body);
}

@media (max-width: 991.98px) {
    .pmag-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem 1.5rem;
    }

    .pmag-steps::before {
        display: none;
    }

    /* no rail across two rows */
}

@media (max-width: 575.98px) {

    .pmag-standards,
    .pmag-process {
        padding: 3.5rem 0;
    }

    .pmag-std {
        padding: 1.5rem 1.3rem;
    }

    /* vertical connected timeline: medallion left, copy stacked right */
    .pmag-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pmag-step {
        display: grid;
        grid-template-columns: 66px 1fr;
        grid-template-rows: auto auto;
        column-gap: 1.35rem;
        row-gap: 0.45rem;
        align-items: start;
        text-align: left;
        padding: 0 0 2.75rem;
    }

    .pmag-step:last-child {
        padding-bottom: 0;
    }

    .pmag-step-dot {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 66px;
        height: 66px;
        margin: 0;
        box-shadow: 0 0 0 5px var(--pm-soft),
            0 0 0 6px rgba(var(--pm-gold-rgb), 0.28),
            0 10px 22px rgba(var(--pm-navy-rgb), 0.18);
    }

    .pmag-step-dot::before {
        font-size: 1.4rem;
    }

    .pmag-step h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        min-height: 66px;
        display: flex;
        align-items: center;
        margin: 0;
        text-align: left;
    }

    .pmag-step p {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    /* vertical champagne rail from each medallion down to the next */
    .pmag-step::before {
        content: "";
        position: absolute;
        left: 32px;
        top: 72px;
        bottom: 0;
        width: 2px;
        background: var(--pm-accent-line-v);
        opacity: 0.45;
        z-index: 0;
    }

    .pmag-step:last-child::before {
        display: none;
    }
}

/* =========================================================
   9j. SECTION 11 — CTA band (dark)
   ========================================================= */
.pmag-cta {
    position: relative;
    padding: 5.5rem 0;
    background:
        radial-gradient(760px 400px at 82% 8%, rgba(var(--pm-gold-rgb), 0.20), transparent 60%),
        linear-gradient(150deg, var(--pm-navy-700) 0%, var(--pm-navy-900) 100%);
    overflow: hidden;
}

/* faint glass streak, same motif as the hero + standards band */
.pmag-cta::before {
    content: "";
    position: absolute;
    top: -25%;
    left: -8%;
    width: 52%;
    height: 150%;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58%);
    transform: rotate(-8deg);
    pointer-events: none;
}

.pmag-cta .container {
    position: relative;
    z-index: 1;
}

.pmag-cta-inner {
    max-width: 62rem;
    margin: 0 auto;
    text-align: center;
}

.pmag-cta-inner h2 {
    position: relative;
    color: #fff;
    font-size: clamp(1.55rem, 2.3vw, 2.1rem);
    letter-spacing: -0.02em;
    padding-top: 1.5rem;
    margin-bottom: 1.25rem;
}

.pmag-cta-inner h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 3px;
    border-radius: 3px;
    background: var(--pm-accent-line);
}

.pmag-cta-inner p {
    color: var(--pm-on-dark);
    font-size: 1.06rem;
    line-height: 1.8;
    max-width: 52rem;
    margin: 0 auto 2rem;
}

.pmag-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

/* =========================================================
   9k. SECTION 12 — Customer Reviews
   ========================================================= */
.pmag-reviews {
    padding: 5.5rem 0;
    background: #fff;
}

.pmag-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
}

@media (max-width: 900px) {
    .pmag-review-grid {
        grid-template-columns: 1fr;
        max-width: 40rem;
        margin: 0 auto;
    }
}

.pmag-review {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 2.5rem 1.9rem 1.9rem;
    background: var(--pm-soft);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    transition: transform .26s var(--pm-ease), box-shadow .26s var(--pm-ease),
        border-color .26s ease, background-color .26s ease;
}

.pmag-review:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: transparent;
    box-shadow: var(--pm-sh-lg);
}

.pmag-review-quote {
    position: absolute;
    top: 0.55rem;
    left: 1.4rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--pm-gold);
    opacity: 0.35;
    pointer-events: none;
}

.pmag-review blockquote {
    margin: 0;
    position: relative;
    z-index: 1;
}

.pmag-review blockquote p {
    margin: 0;
    color: var(--pm-body);
    font-size: 1rem;
    line-height: 1.8;
}

.pmag-review figcaption {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--pm-line);
}

.pmag-review-mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--pm-navy-600), var(--pm-navy-900));
    color: var(--pm-gold);
    font-size: 1rem;
}

.pmag-review-mark i {
    color: var(--pm-gold) !important;
}

.pmag-review-by {
    font-family: "Jost", sans-serif;
    font-weight: 600;
    color: var(--pm-muted);
}

.pmag-review-by a {
    color: var(--pm-ink);
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.pmag-review-by a:hover {
    color: var(--pm-gold-deep);
    border-bottom-color: var(--pm-gold);
}

/* =========================================================
   9l. SECTION 13 — Our Service Coverage
   ========================================================= */
.pmag-coverage {
    padding: 5.5rem 0;
    background:
        radial-gradient(680px 380px at 12% 0%, rgba(var(--pm-gold-rgb), 0.06), transparent 62%),
        var(--pm-soft);
    border-top: 1px solid var(--pm-line);
}

.pmag-coverage-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 62rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.pmag-coverage-grid li {
    display: flex;
}

.pmag-coverage-grid a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.2rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-pill);
    font-family: "Jost", sans-serif;
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--pm-ink);
    box-shadow: var(--pm-sh-sm);
    transition: transform .2s var(--pm-ease), box-shadow .2s ease,
        border-color .2s ease, background-color .2s ease, color .2s ease;
}

.pmag-coverage-grid a i {
    font-size: 0.85rem;
    color: var(--pm-gold-deep) !important;
    transition: color .2s ease;
}

.pmag-coverage-grid a:hover {
    transform: translateY(-3px);
    background: var(--pm-navy-800);
    border-color: var(--pm-navy-800);
    color: #fff;
    box-shadow: var(--pm-sh);
}

.pmag-coverage-grid a:hover i {
    color: var(--pm-gold) !important;
}

/* =========================================================
   9m. SECTION 14 — Team statement band
   ========================================================= */
.pmag-statement {
    position: relative;
    padding: 4.5rem 0;
    text-align: center;
    background:
        radial-gradient(700px 360px at 50% 120%, rgba(var(--pm-gold-rgb), 0.22), transparent 60%),
        linear-gradient(150deg, var(--pm-navy-800) 0%, var(--pm-navy-900) 100%);
    overflow: hidden;
}

.pmag-statement::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, 0.04) 50%, transparent 56%);
    pointer-events: none;
}

.pmag-statement .container {
    position: relative;
    z-index: 1;
}

.pmag-statement h2 {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: clamp(1.55rem, 2.3vw, 2.1rem);
    letter-spacing: -0.02em;
    margin: 0;
    padding-bottom: 1.1rem;
}

.pmag-statement h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 84px;
    height: 3px;
    border-radius: 3px;
    background: var(--pm-accent-line);
}

.pmag-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.25rem;
}

.pmag-badge {
    background: #fff;
    border-radius: var(--pm-r);
    padding: 1.1rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
    box-shadow: var(--pm-sh);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pmag-badge:hover {
    transform: translateY(-3px);
    box-shadow: var(--pm-sh-lg);
}

.pmag-badge img {
    max-height: 96px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .pmag-badges {
        gap: 0.85rem;
    }

    .pmag-badge {
        height: 92px;
        padding: 0.75rem 1rem;
    }

    .pmag-badge img {
        max-height: 66px;
        max-width: 150px;
    }
}

/* =========================================================
   9n. SECTION 15 — FAQ (CSS-only accordion)
   ========================================================= */
.pmag-faq {
    padding: 5.5rem 0;
    background: #fff;
}

.pmag-faq-list {
    max-width: 52rem;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.pmag-faq-item {
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r);
    background: var(--pm-soft);
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.pmag-faq-item[open] {
    background: #fff;
    border-color: transparent;
    box-shadow: var(--pm-sh);
}

.pmag-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pmag-faq-item summary::-webkit-details-marker {
    display: none;
}

.pmag-faq-item summary h3 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pm-ink);
    transition: color .2s ease;
}

.pmag-faq-item[open] summary h3 {
    color: var(--pm-gold-deep);
}

.pmag-faq-item summary:hover h3 {
    color: var(--pm-gold-deep);
}

/* +/- indicator */
.pmag-faq-icon {
    flex: 0 0 auto;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--pm-gold);
    transition: background-color .22s ease, transform .26s var(--pm-ease);
}

.pmag-faq-icon::before,
.pmag-faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background: var(--pm-gold-deep);
    transform: translate(-50%, -50%);
    transition: opacity .22s ease, background-color .22s ease;
}

.pmag-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.pmag-faq-item[open] .pmag-faq-icon {
    background: var(--pm-gold);
    transform: rotate(180deg);
}

.pmag-faq-item[open] .pmag-faq-icon::before,
.pmag-faq-item[open] .pmag-faq-icon::after {
    background: var(--pm-navy-900);
}

.pmag-faq-item[open] .pmag-faq-icon::after {
    opacity: 0;
}

/* minus */

.pmag-faq-answer {
    padding: 0 1.5rem 1.35rem;
}

.pmag-faq-answer p {
    margin: 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--pm-line);
    color: var(--pm-body);
    font-size: 1rem;
    line-height: 1.8;
}

/* =========================================================
   9o. SECTION 16 — Map (local weather sits full-width at page end)
   ========================================================= */
.pmag-locate {
    padding: 0 0 5.5rem;
    background: #fff;
}

.pmag-map {
    position: relative;
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    border: 1px solid var(--pm-line);
    box-shadow: var(--pm-sh);
    min-height: 440px;
}

.pmag-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
    border: 0;
}

@media (max-width: 767.98px) {
    .pmag-locate {
        padding-bottom: 3.25rem;
    }

    .pmag-map,
    .pmag-map iframe {
        min-height: 340px;
    }
}

/* =========================================================
   10. QUOTE FORM  (top_form.php / bottom_form.php)
   ========================================================= */
form#quote_form,
form#quote_form2 {
    margin: 0;
    padding: 1.75rem 1.6rem 1.9rem;
    background: transparent;
    border: none;
}

.pmag-form-card form#quote_form {
    padding-top: 1.5rem;
}

form#quote_form>h2,
form#quote_form2>h2 {
    position: relative;
    margin: -1.75rem -1.6rem 1.5rem;
    padding: 1.4rem 1.6rem;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(500px 160px at 80% 0%, rgba(var(--pm-gold-rgb), 0.30), transparent 70%),
        linear-gradient(120deg, var(--pm-navy-800), var(--pm-navy-700));
}

form#quote_form>h2::after,
form#quote_form2>h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--pm-accent-line);
}

form#quote_form .form-control,
form#quote_form2 .form-control {
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-sm);
    background: var(--pm-soft);
    color: var(--pm-ink);
    font-size: 0.98rem;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

form#quote_form .form-control:focus,
form#quote_form2 .form-control:focus {
    background: #fff;
    border-color: var(--pm-gold);
    box-shadow: 0 0 0 4px rgba(var(--pm-gold-rgb), 0.20);
}

form#quote_form .form-floating>label,
form#quote_form2 .form-floating>label {
    color: var(--pm-muted);
    font-size: 0.95rem;
}

form#quote_form textarea.form-control,
form#quote_form2 textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.captcha-row img#verificationimage,
.captcha-row img#verificationimage2 {
    flex: 0 0 auto;
    width: 140px;
    height: 42px;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-sm);
    cursor: pointer;
}

.captcha-row .captcha-refresh {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-sm);
    background: var(--pm-soft);
    color: var(--pm-navy-900);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .2s ease;
}

.captcha-row .captcha-refresh:hover {
    background: var(--pm-soft-2);
}

.captcha-row .captcha-refresh.is-loading {
    pointer-events: none;
}

.captcha-row .captcha-refresh.is-loading i {
    display: inline-block;
    animation: pmag-captcha-spin .6s linear infinite;
}

@keyframes pmag-captcha-spin {
    to {
        transform: rotate(360deg);
    }
}

.captcha-row input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
}

form#quote_form button[type="submit"],
form#quote_form2 button[type="submit"],
button.btn.btn-outline-light {
    background: var(--pm-amber);
    color: var(--pm-navy-900);
    border: none;
    border-radius: var(--pm-r-pill);
    font-family: "Jost", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 26px rgba(var(--pm-gold-rgb), 0.30);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

form#quote_form button[type="submit"]:hover,
form#quote_form2 button[type="submit"]:hover {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(var(--pm-gold-rgb), 0.38);
    color: var(--pm-navy-900);
}

p.error,
p.success {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.25rem 0 0;
}

p.error {
    color: #D92D20;
}

p.success {
    color: #067647;
}

@media (max-width: 575.98px) {

    form#quote_form,
    form#quote_form2 {
        padding: 1.5rem 1.15rem 1.6rem;
    }

    form#quote_form>h2,
    form#quote_form2>h2 {
        margin: -1.5rem -1.15rem 1.35rem;
        padding: 1.2rem 1.15rem;
        font-size: 1.25rem;
    }

    .captcha-row {
        flex-wrap: wrap;
    }

    .captcha-row input.form-control {
        height: auto;
    }
}

/* =========================================================
   11. FOOTER
   ========================================================= */
.pmag-footer {
    position: relative;
    background: linear-gradient(180deg, var(--pm-navy-800) 0%, var(--pm-navy-900) 100%);
    color: var(--pm-on-dark);
    padding: 4rem 0 1.75rem;
}

.pmag-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--pm-accent-line);
}

.pmag-footer a {
    color: var(--pm-on-dark);
    text-decoration: none;
}

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

.pmag-footer h4 {
    position: relative;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
    padding-bottom: 0.7rem;
}

.pmag-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: var(--pm-amber);
}

.pmag-foot-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.75fr 0.9fr;
    gap: 3rem;
}

.pmag-foot-brand .pmag-foot-logo {
    height: 66px;
    width: auto;
    margin-bottom: 1.25rem;
    background: #fff;
    padding: 8px 12px;
    border-radius: var(--pm-r-sm);
}

.pmag-foot-brand p {
    color: var(--pm-muted);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0.9rem;
}

.pmag-foot-brand .pmag-foot-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
}

.pmag-foot-brand .pmag-foot-phone:hover {
    color: var(--pm-amber);
}

.pmag-foot-phone i.fa {
    color: var(--pm-amber) !important;
}

.pmag-foot-areas ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}

.pmag-foot-areas li {
    margin-bottom: 0.6rem;
    break-inside: avoid;
}

.pmag-foot-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pmag-foot-links li {
    margin-bottom: 0.6rem;
}

.pmag-foot-areas li a,
.pmag-foot-links li a {
    position: relative;
    display: inline-block;
    color: var(--pm-muted);
    font-size: 0.95rem;
    padding-left: 0;
    transition: color .2s ease, padding-left .2s ease;
}

.pmag-foot-areas li a:hover,
.pmag-foot-links li a:hover {
    color: #fff;
    padding-left: 0.4rem;
}

.pmag-foot-areas li a::before,
.pmag-foot-links li a::before {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pm-amber);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease;
}

.pmag-foot-areas li a:hover::before,
.pmag-foot-links li a:hover::before {
    opacity: 1;
}

.pmag-foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    margin-top: 3rem;
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pmag-foot-bottom .pmag-copy {
    color: var(--pm-muted);
    font-size: 0.9rem;
    margin: 0;
}

.pmag-foot-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pmag-foot-legal a {
    color: var(--pm-on-dark);
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {
    .pmag-foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    .pmag-foot-links {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .pmag-footer {
        padding-top: 3rem;
    }

    .pmag-foot-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .pmag-foot-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 400px) {
    .pmag-foot-areas ul {
        columns: 1;
    }
}

/* =========================================================
   12. BACK TO TOP
   ========================================================= */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    display: flex !important;
    /* always flex so the arrow stays centred */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    background: var(--pm-amber) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 24px rgba(var(--pm-gold-rgb), 0.35);
    /* hidden until scrolled; visibility keeps it un-clickable when hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .3s var(--pm-ease), visibility .3s var(--pm-ease),
        transform .3s var(--pm-ease), box-shadow .2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top i {
    color: var(--pm-navy-900) !important;
    font-size: 1.15rem;
    line-height: 1;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(var(--pm-gold-rgb), 0.45);
}

.back-to-top:focus-visible {
    outline: 3px solid rgba(var(--pm-gold-rgb), 0.6);
    outline-offset: 3px;
}

/* =========================================================
   13. INNER PAGES — shared defaults
   (every page except the homepage still uses banner.php)
   ========================================================= */
.container-xxl {
    max-width: 1320px;
}

.bg-light {
    background-color: var(--pm-soft) !important;
}

.shadow {
    box-shadow: var(--pm-sh) !important;
}

.rounded {
    border-radius: var(--pm-r-sm) !important;
}

.link-color {
    color: #fff !important;
}

/* banner.php sits directly under the fixed header on inner pages */
#header-carousel {
    margin-top: var(--pmag-header-offset);
}

#header-carousel .carousel-item {
    position: relative;
}

#header-carousel .carousel-item img {
    height: clamp(280px, 42vw, 460px);
    object-fit: cover;
}

#header-carousel .carousel-caption {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(7, 18, 31, 0.62) 0%, rgba(7, 18, 31, 0.78) 100%);
}

#header-carousel .carousel-caption .Banner-text {
    font-family: "Jost", sans-serif;
    letter-spacing: -0.02em;
}

#header-carousel .carousel-caption .Slogan-text {
    max-width: 46rem;
    margin: 0 auto 1rem;
}

.btn-setup {
    border-radius: var(--pm-r-pill);
}

/* inner-page section headings */
.container-xxl h2,
.container h2 {
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   11. BLOG PAGES
   ========================================================= */
/* hero reuses .pmag-hero / .pmag-form-card verbatim (see sections 8–9 above);
   the quote form sits directly in the hero here (no image column to fill),
   so the homepage's overlap trick (negative margin onto the section below)
   is switched off — the card just sits on the dark band with its own shadow */
.pmag-blog-hero-form {
    margin-top: 0;
}

/* keep copy above the form at every width — .pmag-hero-copy's own order
   flips per breakpoint for the homepage's image column, which we don't have */
.pmag-blog-hero .pmag-hero-copy {
    order: 1;
}

.pmag-blog-hero .pmag-blog-hero-form-col {
    order: 2;
}

.pmag-blog-form-card {
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh-lg);
    overflow: hidden;
}

.pmag-blog-block {
    padding: 4rem 0;
    background: #fff;
}

.pmag-blog-block--tint {
    background:
        radial-gradient(760px 420px at 90% 0%, rgba(var(--pm-gold-rgb), 0.06), transparent 62%),
        var(--pm-soft);
    border-top: 1px solid var(--pm-line);
    border-bottom: 1px solid var(--pm-line);
}

/* section 3 — same soft depth as the homepage's split-image band */
.pmag-blog-block--accent {
    background:
        radial-gradient(720px 420px at 6% 108%, rgba(var(--pm-gold-rgb), 0.07), transparent 60%),
        radial-gradient(560px 380px at 96% -8%, rgba(var(--pm-navy-rgb), 0.05), transparent 62%),
        var(--pm-soft);
}

/* --- Signs 1–2 / 4–5: elevated card grid instead of a flat stacked list --- */
.pmag-blog-why-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .pmag-blog-why-list {
        grid-template-columns: 1fr;
    }
}

.pmag-blog-why-list .pmag-why-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.85rem 1.7rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh-sm);
    transition: transform .26s var(--pm-ease), box-shadow .26s var(--pm-ease), border-color .26s ease;
}

.pmag-blog-why-list .pmag-why-item:hover {
    background: #fff;
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--pm-sh-lg);
}

.pmag-blog-why-list .pmag-why-body h2,
.pmag-blog-why-list .pmag-why-body h3 {
    font-size: 1.16rem;
    font-weight: 600;
    margin: 0.2rem 0 0.5rem;
    color: var(--pm-ink);
}

/* an odd trailing card (3, 5, 7 items…) gets centered at single-card width
   instead of stretching full-width or leaving a lopsided gap */
.pmag-blog-why-list .pmag-why-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .pmag-blog-why-list .pmag-why-item:last-child:nth-child(odd) {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .pmag-blog-why-list .pmag-why-item {
        padding: 1.5rem 1.35rem;
    }
}

/* --- Sign 3 image: same accent-bar + hover zoom as the homepage split section --- */
.pmag-blog-media {
    position: relative;
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    box-shadow: var(--pm-sh);
}

.pmag-blog-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: var(--pm-accent-line);
}

.pmag-blog-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 11, 20, 0) 62%, rgba(5, 11, 20, 0.22) 100%);
    pointer-events: none;
}

.pmag-blog-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s var(--pm-ease);
}

.pmag-blog-media:hover img {
    transform: scale(1.05);
}

/* --- plain prose section: single readable column, no card --- */
.pmag-blog-prose {
    max-width: 46rem;
    margin: 0 auto;
}

.pmag-blog-prose h2 {
    position: relative;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    letter-spacing: -0.02em;
    margin-bottom: 1.35rem;
    padding-top: 1.25rem;
}

.pmag-blog-prose h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: var(--pm-accent-line);
}

.pmag-blog-prose p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--pm-body);
    margin: 0 0 1.1rem;
}

.pmag-blog-prose p:last-child {
    margin-bottom: 0;
}

.pmag-blog-prose p a {
    color: var(--pm-blue-600);
    font-weight: 600;
}

.pmag-blog-prose p a:hover {
    color: var(--pm-gold-deep);
}

/* --- single centered feature card: icon + heading + copy --- */
.pmag-blog-feature-card {
    max-width: 46rem;
    margin: 0 auto;
    position: relative;
    padding: 2.5rem 2.4rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh);
    transition: transform .24s ease, box-shadow .24s ease;
}

.pmag-blog-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-sh-lg);
}

.pmag-blog-feature-card .pmag-callout-icon {
    margin-bottom: 1.25rem;
}

.pmag-blog-feature-card h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.pmag-blog-feature-card p {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--pm-body);
    margin: 0 0 1rem;
    text-align: left;
}

.pmag-blog-feature-card p:last-child {
    margin-bottom: 0;
}

.pmag-blog-feature-card p a {
    color: var(--pm-blue-600);
    font-weight: 600;
}

.pmag-blog-feature-card p a:hover {
    color: var(--pm-gold-deep);
}

/* --- Closing statement cards: lift on hover like the rest of the page --- */
.pmag-blog-closing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 767.98px) {
    .pmag-blog-closing-grid {
        grid-template-columns: 1fr;
    }
}

.pmag-blog-closing-grid .pmag-list-card {
    transition: transform .24s ease, box-shadow .24s ease;
}

.pmag-blog-closing-grid .pmag-list-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-sh-lg);
}

.pmag-blog-closing-grid .pmag-list-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pm-ink);
    margin-bottom: 0.9rem;
}

.pmag-blog-closing-grid .pmag-list-card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--pm-body);
}

.pmag-blog-closing-grid .pmag-list-card p+p {
    margin-top: 1rem;
}

.pmag-blog-closing-grid .pmag-list-card p a {
    color: var(--pm-blue-600);
    font-weight: 600;
}

.pmag-blog-closing-grid .pmag-list-card p a:hover {
    color: var(--pm-gold-deep);
}

/* --- numbered sign marks: small badge overlaid on the icon circle --- */
.pmag-blog-why-list .pmag-why-icon,
.pmag-sign-icon {
    position: relative;
}

.pmag-sign-num {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pm-amber);
    color: var(--pm-navy-900);
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: 0 0 0 3px #fff;
}

.pmag-blog-block--tint .pmag-sign-num {
    box-shadow: 0 0 0 3px var(--pm-soft);
}

/* Sign 03 gets the same icon-badge treatment inline above its heading */
.pmag-split-copy--marked .pmag-sign-icon {
    margin-bottom: 1.1rem;
}

.pmag-split-copy--marked h2 {
    padding-top: 0;
}

.pmag-split-copy--marked h2::before {
    display: none;
}

/* closing statement cards pick up the callout icon badge */
.pmag-blog-closing-card {
    position: relative;
}

.pmag-blog-closing-card .pmag-callout-icon {
    margin-bottom: 1.1rem;
}

.pmag-blog-closing-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pm-ink);
    margin-bottom: 0.9rem;
}

/* --- Contact Us: light accent card, same recipe as .pmag-list-card --- */
.pmag-blog-contact-card {
    position: relative;
    padding: 2.75rem 2.5rem;
    border-radius: var(--pm-r-lg);
    background:
        radial-gradient(560px 320px at 100% 0%, rgba(var(--pm-gold-rgb), 0.08), transparent 60%),
        #fff;
    border: 1px solid var(--pm-line);
    box-shadow: var(--pm-sh);
    overflow: hidden;
    height: 100%;
    transition: transform .24s ease, box-shadow .24s ease;
}

.pmag-blog-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-sh-lg);
}

.pmag-blog-contact-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--pm-accent-line-v);
}

.pmag-blog-contact-card>* {
    position: relative;
    z-index: 1;
}

.pmag-blog-contact-card h2 {
    color: var(--pm-ink);
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    margin-bottom: 0.4rem;
}

.pmag-blog-contact-card h4 {
    color: var(--pm-gold-deep);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1.75rem;
}

.pmag-blog-contact-list {
    list-style: none;
    margin: 0 0 1.85rem;
    padding: 0;
    display: grid;
    gap: 1.2rem;
}

.pmag-blog-contact-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pmag-blog-contact-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--pm-navy-700), var(--pm-navy-800));
    box-shadow: 0 6px 14px rgba(11, 27, 44, 0.14);
}

.pmag-blog-contact-icon i {
    font-size: 1rem;
    color: var(--pm-amber) !important;
}

.pmag-blog-contact-list strong {
    color: var(--pm-ink);
    font-weight: 600;
}

.pmag-blog-contact-list span>span,
.pmag-blog-contact-list li>span:last-child {
    font-size: 1.02rem;
    color: var(--pm-body);
}

.pmag-blog-contact-list a {
    color: var(--pm-blue-600);
    font-weight: 600;
}

.pmag-blog-contact-list a:hover {
    color: var(--pm-gold-deep);
}

.pmag-blog-contact-card .pmag-cta-row {
    margin-top: 0.5rem;
}

@media (max-width: 575.98px) {

    .pmag-blog-block,
    .pmag-blog-block--tint,
    .pmag-blog-block--accent {
        padding: 2.75rem 0;
    }

    .pmag-blog-contact-card {
        padding: 2rem 1.6rem;
    }
}

/* address hidden on blog pages only — footer.php is shared, so this is scoped
   to pages that wrap their content in <main class="pmag-blog">. The same
   address line inside an on-page Contact block (e.g. .pmag-blog-address) is
   hidden the same way, keeping the text in the markup but off-screen. */
main.pmag-blog~footer .pmag-foot-address {
    display: none !important;
}

main.pmag-blog .pmag-blog-address {
    display: none !important;
}

/* =========================================================
   12. INFO / LEGAL PAGES (About, Contact, Terms, Privacy)
   ========================================================= */
/* heading inside a .pmag-list-card / .pmag-blog-block, e.g. "Our Services" */
.pmag-blog-block h2 {
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 600;
    color: var(--pm-ink);
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.pmag-list-card h2 {
    margin-bottom: 0.75rem;
}

/* "Last Updated" pill under an H1 */
.pmag-legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border-radius: var(--pm-r-pill);
    background: var(--pm-soft);
    border: 1px solid var(--pm-line);
    color: var(--pm-body);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.pmag-legal-meta i {
    color: var(--pm-amber);
}

/* 3-up info cards (Call Us / Online Quote / Business Hours), reuses
   .pmag-blog-why-list .pmag-why-item card styling at a wider column count */
.pmag-legal-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .pmag-legal-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .pmag-legal-info-grid {
        grid-template-columns: 1fr;
    }
}

/* long-form article card — Terms & Conditions / Privacy Policy body */
.pmag-legal-article {
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh);
    padding: 3rem;
}

.pmag-legal-section {
    padding-top: 2.25rem;
    margin-top: 2.25rem;
    border-top: 1px solid var(--pm-line);
}

.pmag-legal-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.pmag-legal-section h2 {
    font-size: 1.24rem;
    font-weight: 600;
    color: var(--pm-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
}

.pmag-legal-section p {
    color: var(--pm-body);
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.pmag-legal-section ul {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
    color: var(--pm-body);
    font-size: 1rem;
    line-height: 1.85;
}

.pmag-legal-section li {
    margin-bottom: 0.4rem;
}

.pmag-legal-section li::marker {
    color: var(--pm-gold-deep);
}

.pmag-legal-section p:last-child,
.pmag-legal-section ul:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .pmag-legal-article {
        padding: 2rem 1.4rem;
    }
}

/* address hidden on legal pages only (Terms & Conditions / Privacy Policy) —
   footer.php is shared, so this is scoped to <main class="pmag-legal"> */
main.pmag-legal~footer .pmag-foot-address {
    display: none !important;
}

/* --- real-photo trust banner (Contact / Terms / Privacy) --- */
.pmag-trust-banner {
    position: relative;
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    box-shadow: var(--pm-sh);
}

.pmag-trust-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 21 / 9;
    object-position: center 25%;
}

.pmag-trust-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(5, 11, 20, 0.78) 0%, rgba(5, 11, 20, 0.4) 42%, rgba(5, 11, 20, 0.05) 72%);
}

.pmag-trust-banner-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 2rem 2.75rem;
    z-index: 1;
}

.pmag-trust-banner-caption-inner {
    max-width: 30rem;
}

.pmag-trust-banner-caption h2 {
    color: #fff;
    font-size: clamp(1.28rem, 2vw, 1.65rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.6rem;
}

.pmag-trust-banner-caption p {
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.7;
}

@media (max-width: 767.98px) {
    .pmag-trust-banner img {
        aspect-ratio: 4 / 3;
        object-position: center 20%;
    }

    .pmag-trust-banner-caption {
        padding: 1.5rem 1.6rem;
    }
}

/* --- hero variant that carries the quote form directly, no section2 hand-off --- */
.pmag-hero--form {
    padding-bottom: 4.5rem;
}

.pmag-hero .pmag-form-card {
    margin-top: 0;
}

.pmag-hero--form .pmag-hero-copy {
    padding-top: 0.5rem;
    order: 1;
}

.pmag-hero--form .pmag-hero-form-col {
    order: 2;
}

@media (max-width: 991.98px) {
    .pmag-hero--form {
        padding-bottom: 3rem;
    }
}

/* --- supporting split image next to a list-card (About Us "why choose") ---
   capped to a natural portrait ratio and vertically centered beside its text
   column, instead of stretching to match a tall checklist (looked distorted) */
.pmag-legal-media {
    position: relative;
    align-self: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--pm-r-lg);
    overflow: hidden;
    box-shadow: var(--pm-sh);
}

.pmag-legal-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background: var(--pm-accent-line);
}

.pmag-legal-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .pmag-legal-media {
        aspect-ratio: 16 / 10;
    }
}

/* --- About Us feature card — a dedicated, more elevated take on the shared
   .pmag-list-card. That component reads flat here: its --pm-soft fill nearly
   matches the tinted section behind it, and its navy ticks looked dull next
   to a photo. This stays independent so the homepage's use of
   .pmag-list-card/.pmag-checklist is untouched. --- */
.pmag-feature-card {
    position: relative;
    padding: 2.25rem 2.1rem;
    border-radius: var(--pm-r-lg);
    background: #fff;
    border: 1px solid var(--pm-line);
    box-shadow: var(--pm-sh);
    overflow: hidden;
}

.pmag-feature-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--pm-accent-line-v);
}

.pmag-feature-card h2 {
    margin-bottom: 0.75rem;
}

.pmag-feature-card .pmag-list-lead {
    color: var(--pm-ink);
    font-size: 1.03rem;
    line-height: 1.75;
}

.pmag-feature-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
}

@media (max-width: 767.98px) {
    .pmag-feature-list {
        grid-template-columns: 1fr;
    }
}

.pmag-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.65rem 0.6rem;
    border-radius: var(--pm-r);
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--pm-ink);
    transition: background-color .2s ease, transform .2s ease;
}

.pmag-feature-list li:hover {
    background: var(--pm-soft);
    transform: translateX(2px);
}

.pmag-feature-list li i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
    background: linear-gradient(150deg, var(--pm-gold-bright), var(--pm-gold-deep));
    color: var(--pm-navy-900) !important;
    box-shadow: 0 4px 10px rgba(var(--pm-gold-rgb), 0.35);
}

/* --- wide feature callout with a CTA (Contact Us "Request an Online Quote") --- */
.pmag-callout--feature {
    align-items: center;
    max-width: none;
    margin-top: 1.75rem;
}

.pmag-callout-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pmag-callout-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pm-ink);
    margin-bottom: 0.4rem;
}

.pmag-callout-body p {
    margin-bottom: 0;
}

.pmag-callout-body .pm-btn {
    margin-top: 1.1rem;
}

@media (max-width: 575.98px) {
    .pmag-callout--feature {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- numbered chip prefixing each legal-article H2 --- */
.pmag-legal-section h2 {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pmag-legal-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pm-soft-2);
    border: 1px solid var(--pm-line);
    color: var(--pm-gold-deep);
    font-family: "Jost", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
}

/* --- sticky "On This Page" table of contents (Terms / Privacy) --- */
.pmag-toc {
    position: sticky;
    top: calc(var(--pmag-header-offset) + 1.5rem);
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    padding: 1.5rem 1.4rem;
    box-shadow: var(--pm-sh-sm);
}

.pmag-toc-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-muted);
    font-weight: 700;
    margin-bottom: 0.9rem;
}

.pmag-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-height: 62vh;
    overflow-y: auto;
}

.pmag-toc a {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--pm-body);
    padding: 0.15rem 0 0.15rem 0.75rem;
    border-left: 2px solid var(--pm-line);
    transition: color .2s ease, border-color .2s ease;
}

.pmag-toc a:hover {
    color: var(--pm-ink);
}

.pmag-toc a.is-active {
    color: var(--pm-gold-deep);
    border-left-color: var(--pm-gold-deep);
    font-weight: 600;
}

/* mobile "Jump to section" — a details/summary dropdown instead of the sticky rail */
.pmag-toc-mobile {
    display: none;
    margin-bottom: 1.75rem;
    background: #fff;
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    box-shadow: var(--pm-sh-sm);
    overflow: hidden;
}

.pmag-toc-mobile summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--pm-ink);
    cursor: pointer;
    list-style: none;
}

.pmag-toc-mobile summary::-webkit-details-marker {
    display: none;
}

.pmag-toc-mobile summary::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    color: var(--pm-gold-deep);
}

.pmag-toc-mobile[open] summary::after {
    content: "\f077";
}

.pmag-toc-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem 1.1rem;
    display: grid;
    gap: 0.55rem;
}

.pmag-toc-mobile a {
    font-size: 0.92rem;
    color: var(--pm-body);
}

@media (max-width: 991.98px) {
    .pmag-toc-mobile {
        display: block;
    }
}

/* =========================================================
   14. WIKI — H3 subheadings + left-aligned pill lists inside
   a .pmag-legal-section (the wiki nests H3s under each H2,
   unlike the flat Terms/Privacy sections)
   ========================================================= */
.pmag-legal-section h3 {
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--pm-ink);
    margin: 1.85rem 0 0.75rem;
}

.pmag-legal-section h3:first-of-type {
    margin-top: 1.5rem;
}

.pmag-legal-section .pmag-pills {
    justify-content: flex-start;
    max-width: none;
    margin: 0 0 1.15rem;
}