/* Shared site chrome for Phase 2 pages: nav, footer, base, link styles, mobile overlay.
   Phase 1 pages keep their self-contained styles; new pages reference this stylesheet. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary-black: #000000;
    --accent-gray: #6a7774;
    --light-gray: #f4f1ec;
    --azure: #50616b;
    --brown: #8b634b;
    --white: #ffffff;
    --border-gray: #d9d6d1;
}

body { font-family: 'Inter', sans-serif; color: var(--primary-black); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; }

a { color: inherit; }

/* Inline content links — restyled per Kyle's "people look for blue" feedback */
.body-content a, main p a, .prose a {
    color: var(--azure);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.body-content a:hover, main p a:hover, .prose a:hover { color: var(--brown); }

/* Internal inline links get a small superscript arrow at the top-right of the last word.
   U+2197 is an emoji-capable codepoint, and Inter's Google Fonts latin subset doesn't cover
   it, so a bare "↗" falls back to Apple/Noto Color Emoji on phones and renders in colour.
   Keep it pinned to text presentation -- do NOT simplify back to a literal character. */
.body-content a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not([href^="#"])::after,
main p a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not([href^="#"])::after,
.prose a:not([href^="http"]):not([href^="mailto"]):not([href^="tel"]):not([href^="#"])::after {
    content: "\2197\FE0E";   /* U+2197 + VS15 text-presentation selector */
    font-variant-emoji: text;
    font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif;
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.15em;
    text-decoration: none;
    display: inline-block;
}

/* Nav */
nav { position: relative; z-index: 100; background: var(--white); backdrop-filter: blur(10px); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12); padding: 1rem 4rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-gray); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }

.logo { height: 48px; }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a { text-decoration: none; color: var(--primary-black); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.5px; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--accent-gray); }
.nav-dropdown { position: relative; }
.nav-dropdown > .nav-label { cursor: default; color: var(--primary-black); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.5px; user-select: none; }
.nav-dropdown > .nav-label::after { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 5px; vertical-align: 2px; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--white); min-width: 160px; padding: 0; border: 1px solid var(--border-gray); box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; z-index: 1001; list-style: none; }
.nav-dropdown-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: block; padding: 0.7rem 1.25rem; font-size: 0.85rem; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: var(--light-gray); }
.nav-cta { background: var(--primary-black); color: var(--white) !important; padding: 0.75rem 1.5rem; border-radius: 2px; }
.nav-cta:hover { background: var(--azure) !important; }
/* An explicit colour is load-bearing: the icon is stroke="currentColor", and a <button>
   does not inherit colour -- the UA stylesheet gives it `buttontext`, which Safari/iOS
   resolves to the system accent blue. Without this the hamburger renders blue on iOS. */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -0.5rem; padding: 0; background: none; border: none; cursor: pointer; color: var(--primary-black); -webkit-tap-highlight-color: transparent; }
.nav-toggle svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2; }

/* Page hero (lightweight, used by audience + feature + case study pages) */
.page-hero {
    padding: 3rem 4rem;
    background: linear-gradient(135deg, #000000 0%, var(--azure) 100%);
    color: var(--white);
    text-align: center;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.page-hero .breadcrumb { font-size: 0.8rem; color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem; }
.page-hero .breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: var(--white); }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 600; max-width: 26ch; margin: 0 auto 1rem; line-height: 1.15; color: var(--white); }
.page-hero p { font-size: 1.2rem; font-weight: 300; letter-spacing: 0.5px; color: rgba(255,255,255,0.85); margin: 0 auto; }
.page-hero .btn { display: inline-block; margin-top: 2rem; background: var(--white); color: var(--primary-black); padding: 1rem 2.5rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s ease; border: 2px solid var(--white); }
.page-hero .btn:hover { background: transparent; color: var(--white); }

/* CTA section (reusable bottom CTA block) */
.cta-section { background: var(--primary-black); color: var(--white); padding: 5rem 4rem; text-align: center; }
.cta-section h2 { font-family: 'Playfair Display', serif; font-size: 2.25rem; font-weight: 500; margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.8); max-width: 60ch; margin: 0 auto 2rem; }
.cta-section .btn { display: inline-block; background: var(--white); color: var(--primary-black); padding: 1rem 2.5rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s ease; border: 2px solid var(--white); }
.cta-section .btn:hover { background: transparent; color: var(--white); }

/* Footer */
footer { background: var(--primary-black); color: var(--white); padding: 4rem; }
.footer-content { max-width: 1200px; margin: 0 auto; }
.footer-logo { height: 36px; filter: brightness(0) invert(1); margin-bottom: 2rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem; }
.footer-col a { display: block; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.9rem; padding: 0.35rem 0; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--white); }
.footer-copyright { font-size: 0.85rem; color: rgba(255,255,255,0.5); padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-copyright a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-copyright a:hover { color: var(--white); }

/* ── Mobile nav overlay — one design site-wide ── */
/* Top-anchored and scrollable: expanding a group must never move the rows above it.
   The old justify-content:center re-centred the whole stack on every expand, which
   slid rows ABOVE the tapped one off the top of the screen. */
.mobile-nav-overlay { display: none; position: fixed; inset: 0; height: 100dvh; background: var(--white); z-index: 10002; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 5rem 0 calc(2.5rem + env(safe-area-inset-bottom)); }
.mobile-nav-overlay.active, .mobile-nav-overlay.open { display: flex; animation: mnav-fade 0.2s ease both; }
@keyframes mnav-fade { from { opacity: 0; } to { opacity: 1; } }
.mobile-nav-overlay ul { list-style: none; text-align: left; padding: 0; margin: 0; width: 100%; }
.mobile-nav-overlay li { margin: 0; }
.mobile-nav-overlay > ul { animation: mnav-rise 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes mnav-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Top-level rows — the large serif type, now full-bleed and 60px tall. */
.mobile-nav-overlay > ul > li > a, .mobile-nav-label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 60px; margin: 0; padding: 0.6rem 1.5rem; font-family: 'Playfair Display', serif; font-size: 1.75rem; font-weight: 400; line-height: 1.2; letter-spacing: 1px; color: var(--primary-black); text-align: left; text-decoration: none; background: none; border: 0; border-bottom: 1px solid var(--border-gray); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.3s ease, background 0.2s ease; }
.mobile-nav-label { -webkit-appearance: none; appearance: none; }

/* Chevron — same construction as the desktop .nav-label caret above. */
.mobile-nav-label::after { content: ''; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.25s ease; }
.mobile-nav-label[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }

/* A group is a 2-row grid so the sub-list animates open with no max-height guess.
   visibility:hidden (not just the overflow clip) is what keeps collapsed links out
   of the tab order and out of the accessibility tree. */
.mobile-nav-group { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mobile-nav-group.open { grid-template-rows: auto 1fr; }
.mobile-nav-group > .mobile-sub { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear 0.28s; }
.mobile-nav-group.open > .mobile-sub { visibility: visible; transition: visibility 0s; }

/* Sub-items — 52px tall, indented under the parent with a rule down the gutter. */
.mobile-nav-overlay .mobile-sub { background: var(--light-gray); }
.mobile-nav-overlay .mobile-sub a { display: flex; align-items: center; min-height: 52px; padding: 0.5rem 1.5rem 0.5rem 2.75rem; font-family: 'Inter', sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.3; letter-spacing: 0.5px; color: var(--primary-black); text-decoration: none; border-bottom: 1px solid var(--border-gray); box-shadow: inset 2px 0 0 var(--accent-gray); -webkit-tap-highlight-color: transparent; }
.mobile-nav-overlay .mobile-sub li:last-child a { border-bottom: 0; }

.mobile-nav-overlay .mobile-cta { display: flex; align-items: center; justify-content: center; min-height: 54px; margin: 2rem 1.5rem 0; background: var(--primary-black); color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 1rem 2rem; text-decoration: none; transition: background 0.3s ease; }

/* An opaque band behind the pinned X, so rows scrolling past don't read through it.
   Fixed (not sticky) to match the button, and pointer-events:none so it never eats a
   tap. It is out of flow, so it doesn't become a flex item of the overlay. */
.mobile-nav-overlay::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(4.5rem + env(safe-area-inset-top)); background: linear-gradient(var(--white) 70%, transparent); z-index: 2; pointer-events: none; }

/* position:fixed so the close X stays put while the menu scrolls. Safe because the
   overlay only ever animates opacity — a transform on it would capture fixed
   descendants and re-anchor this to the overlay instead of the viewport. */
.mobile-nav-close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 3; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--primary-black); -webkit-tap-highlight-color: transparent; }
.mobile-nav-close svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2; }

/* Scroll lock that survives iOS — chrome.js records scrollY into body.style.top and
   restores it on close. overflow:hidden alone loses the position on Safari. */
body.nav-open-body { position: fixed; width: 100%; overflow: hidden; }

/* Touch browsers leave a sticky :hover on the last-tapped element, so hover styling
   is gated behind a real pointer (same guard as the .hotspot rules further down). */
@media (hover: hover) and (pointer: fine) {
    .mobile-nav-overlay > ul > li > a:hover, .mobile-nav-label:hover { color: var(--azure); background: var(--light-gray); }
    .mobile-nav-overlay .mobile-sub a:hover { color: var(--azure); }
    .mobile-nav-overlay .mobile-cta:hover { background: var(--azure); }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-nav-overlay, .mobile-nav-overlay > ul, .mobile-nav-group, .mobile-nav-label::after { animation: none !important; transition: none !important; }
}


@media (max-width: 768px) {
    nav { padding: 1rem 1.5rem; }
    .nav-toggle { display: flex; }
    .nav-links { display: none; }
    /* symmetric: the old 5rem top was clearance for a fixed nav this site no
       longer has (nav is position:relative, above the hero in flow), and it
       pushed the centred text 32px below the hero's optical centre */
    .page-hero { padding: 3rem 1.5rem; min-height: 240px; }
    .page-hero h1 { font-size: 2.5rem; }
    .page-hero p { font-size: 1rem; }
    .cta-section { padding: 4rem 1.5rem; }
    .cta-section h2 { font-size: 1.75rem; }
    footer { padding: 3rem 1.5rem; }
    .footer-links { grid-template-columns: 1fr; gap: 2rem; }
}

/* Interactive image showcase (solutions pages) */
.showcase { padding: 5rem 4rem; max-width: 1280px; margin: 0 auto; }
.showcase-header { text-align: center; margin-bottom: 2.5rem; }
.showcase-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: stretch; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.showcase-card::before { content: ""; position: absolute; inset: -80px; background-image: var(--showcase-bg); background-size: cover; background-position: center; filter: blur(60px) brightness(0.85) saturate(0.85) hue-rotate(-10deg); z-index: -2; }
.showcase-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,30,40,0.55), rgba(60,80,95,0.55)); z-index: -1; }
@media (min-width: 769px) {
    .showcase-card.reveal-on-scroll { display: block; position: relative; overflow: visible; max-height: 100vh; box-shadow: none; }
    .showcase-card.reveal-on-scroll::before, .showcase-card.reveal-on-scroll::after { content: none; }
    .showcase-card.reveal-on-scroll .showcase-figure { width: 100%; max-height: 100vh; overflow: hidden; background: transparent; position: relative; z-index: 2; transition: transform 0.75s cubic-bezier(0.15, 0.85, 0.25, 1); }
    .showcase-card.reveal-on-scroll .showcase-figure img { width: 100%; height: auto; max-height: 100vh; object-fit: cover; display: block; }
    .showcase-card.reveal-on-scroll .showcase-header { position: absolute; left: 80%; top: 0; bottom: 0; width: 40%; padding: 2.5rem 2.25rem; z-index: 1; transform: translateX(-100%); transition: transform 0.4s linear; }
    .showcase-card.reveal-on-scroll.is-revealed .showcase-figure { transform: translateX(-20%); }
    .showcase-card.reveal-on-scroll.is-revealed .showcase-header { transform: translateX(0); transition: transform 0.75s cubic-bezier(0.15, 0.85, 0.25, 1); }
    .showcase-card.reveal-on-scroll .hotspot { opacity: 0; transition: opacity 0.3s ease; }
    .showcase-card.reveal-on-scroll.is-revealed .hotspot { opacity: 1; transition: opacity 0.3s ease; }
    .showcase-card.reveal-on-scroll.is-revealed .hotspot:nth-of-type(1) { transition-delay: 0.5s; }
    .showcase-card.reveal-on-scroll.is-revealed .hotspot:nth-of-type(2) { transition-delay: 0.6s; }
    .showcase-card.reveal-on-scroll.is-revealed .hotspot:nth-of-type(3) { transition-delay: 0.7s; }
    .showcase-card.reveal-on-scroll.is-revealed .hotspot:nth-of-type(4) { transition-delay: 0.8s; }
}
.showcase-card .showcase-figure { box-shadow: none; flex: 1 1 60%; min-width: 0; }
.showcase-card .showcase-header { margin: 0; padding: 2.5rem 2.25rem; position: relative; overflow: hidden; isolation: isolate; color: var(--white); flex: 1 1 40%; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.showcase-card .showcase-header p { margin-left: 0; margin-right: 0; }
.showcase-markers { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.showcase-markers li { display: flex; align-items: center; gap: 0.85rem; font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1rem; color: var(--primary-black); font-weight: 300; letter-spacing: 0.01em; }
.showcase-markers .marker-dot { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-black); color: var(--white); font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.7rem; font-weight: 400; line-height: 1; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0; }
.showcase-markers .marker-dot::after { content: ""; display: inline-block; width: 0; }
.showcase-card .showcase-header::before { content: ""; position: absolute; inset: -80px; background-image: var(--showcase-bg); background-size: cover; background-position: center; filter: blur(60px) brightness(0.85) saturate(0.85) hue-rotate(-10deg); z-index: -2; }
.showcase-card .showcase-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,30,40,0.55), rgba(60,80,95,0.55)); z-index: -1; }
.showcase-card .showcase-header h2 { color: var(--white); font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.01em; line-height: 1.15; margin-bottom: 1.25rem; }
.showcase-card .showcase-header p { color: rgba(255,255,255,0.92); }
.showcase-card .showcase-header .eyebrow { color: var(--white); }
.showcase-card .showcase-markers li { color: var(--white); }
.showcase-card .showcase-markers .marker-dot { background: var(--white); color: var(--primary-black); }
.showcase-header .eyebrow { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--azure); font-weight: 600; margin-bottom: 0.75rem; }
.showcase-header h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 500; margin-bottom: 0.5rem; }
.showcase-header p { color: var(--accent-gray); max-width: 56ch; margin: 0 auto; font-size: 1rem; }
.showcase-figure { position: relative; overflow: hidden; background: #0c1014; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.showcase-figure img { display: block; width: 100%; height: auto; }
.showcase-hint { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 4; background: rgba(12,16,20,0.78); color: var(--white); padding: 0.55rem 0.9rem; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; backdrop-filter: blur(6px); display: flex; align-items: center; gap: 0.5rem; transition: opacity 0.3s ease; }
.showcase-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); animation: showcase-hintpulse 2s ease-out infinite; }
.showcase-figure.has-active .showcase-hint { opacity: 0; pointer-events: none; }
@keyframes showcase-hintpulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); } 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

.hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
/* Every hotspot shares a z-index, so a later sibling's marker paints over the open
   card and sits on top of its text. Lift whichever one is open above the rest. */
.hotspot.active { z-index: 5; }
.hotspot-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,0.95); color: var(--azure); font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; position: relative; }
.hotspot-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); animation: showcase-dotpulse 2.4s ease-out infinite; }
@keyframes showcase-dotpulse { 0% { transform: scale(0.85); opacity: 0.85; } 100% { transform: scale(1.6); opacity: 0; } }
.hotspot.active .hotspot-btn { background: var(--azure); color: var(--white); transform: scale(1.08); }
.hotspot.active .hotspot-btn::before { display: none; }

.hotspot-card { position: absolute; top: 50%; left: calc(100% + 14px); transform: translateY(-50%); width: 250px; background: var(--white); color: var(--primary-black); padding: 1rem 1.1rem; box-shadow: 0 12px 32px rgba(0,0,0,0.25); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; }
.hotspot.active .hotspot-card { opacity: 1; visibility: visible; pointer-events: auto; }
/* Hover-to-open is for real pointers only. Touch browsers leave a sticky :hover on the
   last-tapped element, so with an unguarded :hover rule the card stayed on screen after
   the close button removed .active -- tapping the X looked like it did nothing, while
   tapping elsewhere "worked" only because that moved the sticky hover somewhere else. */
@media (hover: hover) and (pointer: fine) {
    .hotspot:hover { z-index: 5; }
    .hotspot-btn:hover { background: var(--azure); color: var(--white); transform: scale(1.08); }
    .hotspot:hover .hotspot-card { opacity: 1; visibility: visible; pointer-events: auto; }
}
.hotspot-card::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--white); }
.hotspot-card h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--primary-black); padding-right: 1.5rem; }
/* Injected by showcase.js so it applies to CMS-rendered cards too. Inherits the card's
   visibility, so it is neither clickable nor focusable while the card is closed. */
.hotspot-close { position: absolute; top: 0; right: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent-gray); font-size: 1.35rem; line-height: 1; }
.hotspot-close:hover, .hotspot-close:focus-visible { color: var(--primary-black); }
.hotspot-card p { font-size: 0.85rem; line-height: 1.55; color: var(--accent-gray); margin: 0; }
.hotspot.flip-x .hotspot-card { left: auto; right: calc(100% + 14px); }
.hotspot.flip-x .hotspot-card::before { left: auto; right: -6px; }
.hotspot.flip-y .hotspot-card { top: auto; bottom: calc(100% + 14px); transform: none; left: 50%; margin-left: -125px; }
.hotspot.flip-y .hotspot-card::before { left: 50%; top: auto; bottom: -6px; transform: translateX(-50%) rotate(45deg); }

@media (max-width: 768px) {
    .showcase { padding: 3rem 1rem; }
    .showcase-card { flex-direction: column; }
    .showcase-card .showcase-header { text-align: center; }
    .hotspot-btn { width: 26px; height: 26px; font-size: 0.8rem; }
    /* Near-full-width on phones. .showcase-figure is overflow:hidden and can't be opened
       up (its .showcase-card parent needs the clipping for the blurred backdrop), so the
       card has to fit INSIDE the figure. Going wide both removes any sideways overflow
       and shortens the card, which is what lets it clear the dot vertically too. */
    .hotspot-card { width: min(320px, calc(100vw - 3rem)); }
    /* Centred on the dot, above it. showcase.js sets --hs-shift to slide the card back
       inside the figure near an edge; translateX keeps the centring width-agnostic. */
    .hotspot .hotspot-card { left: 50%; right: auto; top: auto; bottom: calc(100% + 12px); margin-left: 0; transform: translate(calc(-50% + var(--hs-shift, 0px)), var(--hs-rise, 0px)); }
    /* On a short figure the card can't clear the dot on either side, so it gets nudged
       vertically until it fits and ends up overlapping the marker. The arrow would then
       point at nothing, so drop it. */
    .hotspot.hs-clamped .hotspot-card::before { display: none; }
    /* The arrow tracks the dot rather than the card's centre. It gets its own clamped
       offset so the card can shift as far as it needs without the arrow falling off. */
    .hotspot .hotspot-card::before { left: calc(50% - var(--hs-arrow, 0px)); top: auto; bottom: -6px; right: auto; transform: translateX(-50%) rotate(45deg); }
    /* Too little headroom above the dot — drop the card underneath it instead. */
    .hotspot.hs-below .hotspot-card { bottom: auto; top: calc(100% + 12px); }
    .hotspot.hs-below .hotspot-card::before { bottom: auto; top: -6px; }
}