/*
 * Stylesheet for the rewritten legacy pages — Contact, Testimonials,
 * News, Calendar, PED, Body Map. Each page owns its own template and
 * does NOT load parent CSS, so all rules here are clean (no
 * !important needed unless overriding parent JS that injects styles).
 *
 * One file because these pages share the same eyebrow + Bebas title
 * + dark surface vocabulary.
 */

/* ── Shared head pattern ─────────────────────────────────────────── */
.gp-contact-head,
.gp-tm-head,
.gp-news-head,
.gp-cal-head,
.gp-ped-head,
.gp-bm-head {
    padding: var(--gp-space-7) var(--gp-page-gutter) var(--gp-space-7);
}
/* On gp-legacy pages, parent CSS adds its own top padding to #gp-main —
   neutralize so headers sit at the same offset as non-legacy section
   landings. */
body.gp-legacy #gp-main { padding-top: 0 !important; }
.gp-contact-head__eyebrow,
.gp-tm-head__eyebrow,
.gp-news-head__eyebrow,
.gp-cal-head__eyebrow,
.gp-ped-head__eyebrow,
.gp-bm-head__eyebrow {
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    line-height: 1;
}
.gp-contact-head__title,
.gp-tm-head__title,
.gp-news-head__title,
.gp-cal-head__title,
.gp-ped-head__title,
.gp-bm-head__title {
    font-family: var(--gp-font-display);
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: var(--gp-ls-display-tight);
    text-transform: uppercase;
    color: var(--gp-text);
    margin: 0;
}
.gp-contact-head__title-accent,
.gp-tm-head__title-accent,
.gp-news-head__title-accent,
.gp-cal-head__title-accent,
.gp-ped-head__title-accent,
.gp-bm-head__title-accent { color: var(--gp-gold); }
/* Calendar header — only the calendar page centers its eyebrow + title +
   intro (other landing heads stay left-aligned per design). */
.gp-cal-head { text-align: center; }
.gp-cal-head__intro {
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-body);
    line-height: var(--gp-lh-body);
    color: var(--gp-text-dim);
    max-width: 1040px;
    margin: 18px auto 0;
    text-align: center;
}

/* ── Contact ─────────────────────────────────────────────────────── */
.gp-contact {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--gp-space-7);
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
    align-items: start;
}
.gp-contact__photo img { display: block; width: 100%; height: auto; }
.gp-contact__copy {
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-body);
    line-height: var(--gp-lh-body);
    color: var(--gp-text-dim);
    margin-bottom: var(--gp-space-6);
}
.gp-contact__copy p { margin: 0 0 1em; }
.gp-contact__ctas { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gp-space-4); align-items: stretch; }
.gp-contact__cta--alt {
    padding: var(--gp-space-6) var(--gp-space-7);
    background: linear-gradient(180deg, rgba(255,186,0,0.06), rgba(255,186,0,0.02));
    border-color: rgba(255,186,0,0.35);
}
.gp-contact__cta--alt:hover { border-color: var(--gp-gold); background: rgba(255,186,0,0.08); }
.gp-contact__cta--alt .gp-contact__cta-eyebrow { font-size: 12px; margin-bottom: 12px; }
.gp-contact__cta--alt .gp-contact__cta-label { font-size: 30px; }
.gp-contact__cta {
    display: block;
    padding: var(--gp-space-5) var(--gp-space-6);
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    color: var(--gp-text);
    text-decoration: none;
    transition: border-color var(--gp-dur-base) var(--gp-ease-out),
                background var(--gp-dur-base) var(--gp-ease-out);
}
.gp-contact__cta:hover { border-color: var(--gp-gold); background: rgba(255,186,0,0.04); }
.gp-contact__cta-eyebrow {
    display: block;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    margin-bottom: 8px;
}
.gp-contact__cta-label {
    display: block;
    font-family: var(--gp-font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Testimonials ────────────────────────────────────────────────── */
.gp-tm-intro {
    padding: 0 var(--gp-page-gutter) var(--gp-section-py-xs);
    font-family: var(--gp-font-body);
    font-size: var(--gp-fs-body);
    line-height: var(--gp-lh-body);
    color: var(--gp-text-dim);
}
.gp-tm-intro p { max-width: 760px; margin: 0 0 1em; }
.gp-tm__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gp-grid-gap);
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
}
.gp-tm__card {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
}
.gp-tm__link { display: block; text-decoration: none; color: inherit; }
.gp-tm__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    background: #000 center/cover no-repeat;
    transition: opacity var(--gp-dur-base) var(--gp-ease-out);
}
.gp-tm__link:hover .gp-tm__thumb { opacity: 0.85; }
.gp-tm__body { display: block; padding: var(--gp-space-5); }
.gp-tm__eyebrow {
    display: block;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    margin-bottom: 8px;
}
.gp-tm__title {
    font-family: var(--gp-font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gp-text);
    margin: 0 0 var(--gp-space-3);
    line-height: 1.1;
}
.gp-tm__excerpt {
    display: block;
    font-family: var(--gp-font-body);
    font-size: 14px;
    color: var(--gp-text-dim);
    line-height: 1.5;
    margin-bottom: var(--gp-space-4);
}
.gp-tm__more {
    font-family: var(--gp-font-mono);
    font-size: 11px;
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-gold);
}
.gp-tm__pagination {
    display: flex;
    gap: var(--gp-space-3);
    justify-content: center;
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
}
.gp-tm__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    color: var(--gp-text);
    text-decoration: none;
    font-family: var(--gp-font-mono);
    font-size: 13px;
}
.gp-tm__page.is-active { background: var(--gp-gold); color: var(--gp-text-on-gold); border-color: var(--gp-gold); }
.gp-tm__empty { padding: var(--gp-section-py) var(--gp-page-gutter); text-align: center; color: var(--gp-text-dim); }

/* ── News / blog index ───────────────────────────────────────────── */
.gp-news__list {
    display: grid;
    gap: var(--gp-space-6);
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
    max-width: var(--gp-container-max);
    margin: 0 auto;
}
.gp-news__item { background: var(--gp-surface); border: 1px solid var(--gp-border); }
.gp-news__link {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--gp-space-6);
    color: inherit;
    text-decoration: none;
}
.gp-news__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    background: #000 center/cover no-repeat;
}
.gp-news__thumb--empty { background: var(--gp-surface-2); }
.gp-news__body { padding: var(--gp-space-5) var(--gp-space-5) var(--gp-space-5) 0; }
.gp-news__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-text-muted);
    margin-bottom: 10px;
}
.gp-news__cat { color: var(--gp-gold); }
.gp-news__title {
    font-family: var(--gp-font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gp-text);
    margin: 0 0 10px;
    line-height: 1.05;
}
.gp-news__excerpt {
    font-family: var(--gp-font-body);
    font-size: 14px;
    color: var(--gp-text-dim);
    line-height: 1.55;
    margin: 0 0 var(--gp-space-3);
}
.gp-news__more {
    font-family: var(--gp-font-mono);
    font-size: 11px;
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-gold);
}
.gp-news__pagination {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
    max-width: var(--gp-container-max);
    margin: 0 auto;
}
.gp-news__pagination a {
    font-family: var(--gp-font-mono);
    font-size: 12px;
    letter-spacing: var(--gp-ls-meta);
    text-transform: uppercase;
    color: var(--gp-text);
    text-decoration: none;
    padding: 12px 18px;
    border: 1px solid var(--gp-border);
}
.gp-news__pagination a:hover { border-color: var(--gp-gold); color: var(--gp-gold); }
.gp-news__empty { padding: var(--gp-section-py) var(--gp-page-gutter); text-align: center; color: var(--gp-text-dim); }

/* ── Calendar ────────────────────────────────────────────────────── */
.gp-cal__wrap {
    position: relative;
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
}
/* The stage is the positioning context that lets the gated teaser sit
   on top of the calendar grid as a transparent overlay. */
.gp-cal__stage { position: relative; }

/* Gated calendar — render the calendar dim/blurred so the overlay
   reads as "this is the thing you'd be unlocking." */
.gp-cal__stage--gated .gp-cal__carousel {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

.gp-cal__teaser {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gp-space-6);
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.82) 100%);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
}
.gp-cal__teaser-inner { text-align: center; max-width: 460px; }
.gp-cal__teaser-eyebrow {
    font-family: var(--gp-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: var(--gp-ls-meta-wider) !important;
    color: var(--gp-gold) !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
}
.gp-cal__teaser-title,
.gp-cal__teaser-title .gp-cal__teaser-accent {
    /* Lock the font so parent theme `h2 span` rules can't swap the
       face on the "ONLY." accent — the cause of the mismatched look. */
    font-family: var(--gp-font-display) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}
.gp-cal__teaser-title { margin: 0 0 var(--gp-space-5) !important; color: var(--gp-text); }
.gp-cal__teaser-accent { color: var(--gp-gold) !important; }
.gp-cal__carousel {
    display: grid;
    gap: var(--gp-space-6);
}
.gp-cal__month {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    padding: var(--gp-space-4);
    overflow-x: auto;
}
.gp-cal__month table { width: 100%; border-collapse: collapse; color: var(--gp-text); }
.gp-cal__month th, .gp-cal__month td {
    padding: 8px;
    border: 1px solid var(--gp-border);
    vertical-align: top;
    font-family: var(--gp-font-body);
    font-size: 13px;
}
.gp-cal__month th { color: var(--gp-gold); font-family: var(--gp-font-mono); font-size: 11px; letter-spacing: var(--gp-ls-meta); text-transform: uppercase; }
.gp-cal__month a { color: var(--gp-gold); text-decoration: none; }
.gp-cal__month a:hover { color: var(--gp-gold-deep); }
.gp-cal__footnote {
    font-family: var(--gp-font-body);
    font-size: 14px;
    color: var(--gp-text-dim);
    margin-top: var(--gp-space-5);
}

/* Month tab strip — replaces the legacy in-table prev/next chevron
   links. Three equal-width buttons; the active one fills with gold. */
.gp-cal__tabs {
    display: flex;
    gap: 0;
    margin: 0 0 var(--gp-space-5);
    border: 1px solid var(--gp-border);
    background: var(--gp-surface);
}
.gp-cal__tab {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--gp-border);
    color: var(--gp-text-dim);
    font-family: var(--gp-font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: var(--gp-ls-nav);
    text-transform: uppercase;
    padding: 14px 16px;
    cursor: pointer;
    transition: color var(--gp-dur-base) var(--gp-ease-out),
                background var(--gp-dur-base) var(--gp-ease-out);
}
.gp-cal__tab:last-child { border-right: 0; }
.gp-cal__tab:hover { color: var(--gp-text); background: var(--gp-surface-2); }
.gp-cal__tab.is-active {
    color: var(--gp-text-on-gold);
    background: var(--gp-gold);
}

/* The legacy get_workout_calendar2() renderer puts month prev/next
   chevron links in the table thead's first row. The tab strip above
   the carousel owns navigation now — hide that row. */
.gp-cal__month table.calendar > thead > tr:first-child { display: none; }

/* Parent CSS doesn't set display on .calendar-wrapper, but other
   legacy rules can win over the UA `[hidden] { display: none }` —
   force-hide tabpanel months that the JS hasn't activated. */
.gp-cal__month[hidden] { display: none !important; }

/* Day-cell internals: gold day number top-right, white workout names
   stacked under it. The cell-data anchors are interactive — give them
   underline-on-hover so the tappable affordance is obvious. */
.gp-cal__month .cell-number {
    font-family: var(--gp-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--gp-gold);
    letter-spacing: var(--gp-ls-meta);
    text-align: right;
    margin-bottom: 6px;
}
.gp-cal__month .cell-data {
    font-family: var(--gp-font-body);
    font-size: 13px;
    line-height: 1.35;
    color: var(--gp-text);
    min-height: 48px;
}
.gp-cal__month .cell-data a {
    color: var(--gp-text);
    border-bottom: 1px solid transparent;
    transition: color var(--gp-dur-base) var(--gp-ease-out),
                border-color var(--gp-dur-base) var(--gp-ease-out);
}
.gp-cal__month .cell-data a:hover {
    color: var(--gp-gold);
    border-bottom-color: var(--gp-gold);
}
.gp-cal__month td {
    background: var(--gp-bg);
    transition: background var(--gp-dur-base) var(--gp-ease-out);
}
.gp-cal__month td:hover { background: var(--gp-surface-2); }

/* ── PED ─────────────────────────────────────────────────────────── */
.gp-ped {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--gp-space-6);
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
}
.gp-ped__sidebar #cssmenu,
.gp-ped__sidebar #cssmenu ul,
.gp-ped__sidebar #cssmenu li { list-style: none; margin: 0; padding: 0; }
.gp-ped__sidebar #cssmenu > ul > li { border-bottom: 1px solid var(--gp-border); }
.gp-ped__sidebar #cssmenu > ul > li:first-child { border-top: 1px solid var(--gp-border); }
.gp-ped__sidebar #cssmenu > ul > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--gp-surface);
    color: var(--gp-text);
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-size: 17px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
    transition: background var(--gp-dur-base) var(--gp-ease-out),
                color var(--gp-dur-base) var(--gp-ease-out);
}
.gp-ped__sidebar #cssmenu > ul > li > a::after {
    content: "+";
    font-family: var(--gp-font-mono);
    font-size: 16px;
    color: var(--gp-text-muted);
}
.gp-ped__sidebar #cssmenu > ul > li:hover > a { background: rgba(255,186,0,0.08); color: var(--gp-gold); }
.gp-ped__sidebar #cssmenu > ul > li.active > a { background: var(--gp-gold); color: var(--gp-text-on-gold); font-weight: 500; }
.gp-ped__sidebar #cssmenu > ul > li.active > a::after { content: "−"; color: var(--gp-text-on-gold); }

.gp-ped__sidebar #cssmenu ul.children {
    background: var(--gp-bg);
    border: 1px solid var(--gp-border);
    border-top: 0;
    height: 220px;
    overflow-y: auto;
    padding: 6px 0;
}
.gp-ped__sidebar #cssmenu ul.children li a {
    display: block;
    padding: 6px 14px 6px 28px;
    font-family: var(--gp-font-body);
    font-size: 13px;
    color: var(--gp-text);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background var(--gp-dur-base) var(--gp-ease-out),
                color var(--gp-dur-base) var(--gp-ease-out);
}
.gp-ped__sidebar #cssmenu ul.children li a:hover {
    background: rgba(255,186,0,0.06);
    color: var(--gp-gold);
}
.gp-ped__sidebar #cssmenu ul.children li.active > a {
    background: rgba(255,186,0,0.15);
    color: var(--gp-gold);
    border-left-color: var(--gp-gold);
    font-weight: 600;
}

.gp-ped__panel {
    color: var(--gp-text);
}
.gp-ped__panel > p,
.gp-ped__panel > h5 {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    border-left: 3px solid var(--gp-gold);
    padding: var(--gp-space-6) var(--gp-space-7);
    font-family: var(--gp-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--gp-text-dim);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 var(--gp-space-5);
}
.gp-ped__panel > h5 { font-weight: 400; }
.gp-ped__panel h2.title {
    font-family: var(--gp-font-display);
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--gp-space-5);
    padding: 0 0 16px;
    border-bottom: 1px solid var(--gp-border);
    color: var(--gp-text);
    font-style: normal;
}
.gp-ped__panel h2.title::before {
    content: "EXERCISE";
    display: block;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    letter-spacing: var(--gp-ls-meta-wider);
    color: var(--gp-gold);
    margin-bottom: 8px;
}
.gp-ped__panel .videos-wrapper,
.gp-ped__panel .video-section {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    margin: 0 0 var(--gp-space-5);
}
.gp-ped__panel .videos-wrapper img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; opacity: 0.12; mix-blend-mode: lighten;
}
.gp-ped__panel .video-teaser-wrapper {
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(180deg, rgba(5,5,5,0.85), rgba(5,5,5,0.95));
    display: flex; align-items: center; justify-content: center; z-index: 5;
}
.gp-ped__panel .video-teaser-inner { text-align: center; padding: var(--gp-space-6); transform: none !important; max-width: 420px; }
.gp-ped__panel .video-teaser-inner h2 {
    font-family: var(--gp-font-display); font-style: normal;
    font-size: 28px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gp-text); margin: 0 0 var(--gp-space-5); line-height: 1;
}
.gp-ped__panel .btn-yellow {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 22px; background: var(--gp-gold); color: var(--gp-text-on-gold);
    border: 0; font-family: var(--gp-font-display); font-size: 18px;
    letter-spacing: var(--gp-ls-nav); text-transform: uppercase;
    text-decoration: none; line-height: 1; background-image: none;
}
.gp-ped__panel .btn-yellow:hover { background: var(--gp-gold-deep); }

#loadingimage.gp-ped__loader {
    display: none;
    position: fixed;
    z-index: 10;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

/* ── Plittionary: Start / Finish compare slider ──────────────────── */
/* The parent's accordion_load AJAX response includes a Start Picture
   and Finish Picture inside two .span6.figrue blocks. ped-compare.js
   replaces that row with this stacked comparison widget. */
.gp-ped__panel .gp-compare {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto var(--gp-space-6);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
    user-select: none;
    touch-action: none;
    cursor: ew-resize;
}
.gp-ped__panel .gp-compare img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
    opacity: 1;
    mix-blend-mode: normal;
}
.gp-ped__panel .gp-compare__before {
    z-index: 2;
    /* JS updates --gp-cmp via clip-path inset to wipe horizontally. */
    clip-path: inset(0 var(--gp-cmp-right, 50%) 0 0);
}
.gp-ped__panel .gp-compare__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.gp-ped__panel .gp-compare__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gp-gold);
    color: var(--gp-text-on-gold);
    border: 3px solid #fff;
    cursor: ew-resize;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    transition: transform 120ms ease, background 120ms ease;
}
.gp-ped__panel .gp-compare__handle:hover,
.gp-ped__panel .gp-compare.is-dragging .gp-compare__handle {
    background: var(--gp-gold-deep, #d99a00);
    transform: translate(-50%, -50%) scale(1.05);
}
.gp-ped__panel .gp-compare__handle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.gp-ped__panel .gp-compare__handle-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 0;
}
.gp-ped__panel .gp-compare__handle-arrow--left {
    border-width: 6px 8px 6px 0;
    border-color: transparent currentColor transparent transparent;
}
.gp-ped__panel .gp-compare__handle-arrow--right {
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent currentColor;
}
.gp-ped__panel .gp-compare__label {
    position: absolute;
    top: 14px;
    z-index: 4;
    font-family: var(--gp-font-mono);
    font-size: 11px;
    letter-spacing: var(--gp-ls-meta-wider);
    text-transform: uppercase;
    color: #fff;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}
.gp-ped__panel .gp-compare__label--before { left: 14px; }
.gp-ped__panel .gp-compare__label--after  { right: 14px; }
.gp-ped__panel .gp-compare.is-dragging { cursor: ew-resize; }
@media (max-width: 600px) {
    .gp-ped__panel .gp-compare { aspect-ratio: 1 / 1; }
    .gp-ped__panel .gp-compare__handle { width: 40px; height: 40px; }
}

/* ── Body Map ────────────────────────────────────────────────────── */
/* Let parent CSS own #interactive_body_map + #map_wrapper +
   .body_map_image positioning (it has the 980x687 canvas, the base.jpg
   background, and the hover/active opacity transitions). We just
   center the block and tweak the labels. */
.gp-bm__canvas {
    margin: 0 auto var(--gp-space-7);
}

/* Shadowbox popup title — parent CSS makes it italic + float:left.
   Force centered + non-italic in our type. */
body.page-id-485 #sb-title,
#sb-title { text-align: center !important; }
body.page-id-485 #sb-title-inner,
#sb-title-inner { text-align: center !important; padding: 0 var(--gp-space-5) !important; }
body.page-id-485 #sb-title-inner h2,
#sb-title-inner h2 {
    color: var(--gp-gold) !important;
    font: 400 28px/1.1 var(--gp-font-display) !important;
    font-style: normal !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    float: none !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
}
.gp-bm__list ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gp-space-3);
    list-style: none;
    padding: 0 var(--gp-page-gutter) var(--gp-section-py);
    margin: 0;
    justify-content: center;
}
.gp-bm__list li {
    background: var(--gp-surface);
    border: 1px solid var(--gp-border);
}
.gp-bm__list a {
    display: block;
    padding: 10px 16px;
    color: var(--gp-text);
    text-decoration: none;
    font-family: var(--gp-font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.gp-bm__list a:hover { color: var(--gp-gold); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .gp-contact { grid-template-columns: 1fr; }
    .gp-contact__ctas { grid-template-columns: 1fr; }
    .gp-tm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gp-news__link { grid-template-columns: 200px 1fr; }
    .gp-ped { grid-template-columns: 260px 1fr; }
    .gp-bm__canvas { width: 100%; max-width: 980px; aspect-ratio: 980/687; height: auto; }
}
@media (max-width: 720px) {
    .gp-tm__grid { grid-template-columns: 1fr; }
    .gp-news__link { grid-template-columns: 1fr; }
    .gp-news__body { padding: var(--gp-space-5); }
    .gp-ped { grid-template-columns: 1fr; }
}