/* ==========================================================================
   JLBS Construction - site styles

   Layered on top of stock Bootstrap 5.3 via CSS custom properties, so there is
   no Sass build step and no Node toolchain to maintain.

   Brand colours are sampled directly from the JLBS logo supplied by the client:
   orange #F27E00 and near-black #151616.
   ========================================================================== */

:root {
    /* Brand */
    --jlbs-ink: #151616;
    --jlbs-slate: #2b2d2f;
    --jlbs-slate-soft: #4a4d50;
    --jlbs-accent: #f27e00;
    --jlbs-accent-hover: #c96700;

    /* The accent used as *text*. #f27e00 and #c96700 are both below 4.5:1 on white, so neither
       can carry copy - but --jlbs-accent-hover is still correct as a button hover *background*,
       where the requirement is contrast against the button label rather than against the page. */
    --jlbs-accent-text: #a85700;    /* 5.21:1 on white, 4.81:1 on --jlbs-surface */
    --jlbs-accent-on-dark: #ffab5e; /* 9.70:1 on --jlbs-ink, 6.15:1 on the hero scrim */

    /* Neutrals */
    --jlbs-surface: #f4f6f8;
    --jlbs-border: #dde3e9;
    --jlbs-muted: #5b6b7b;

    /* Bootstrap overrides */
    --bs-body-color: #2b3742;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.65;
    /* Bootstrap 5.3's `a` rule reads the -rgb forms:
           color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1))
       Setting only --bs-link-color does nothing at all - which is why every unstyled anchor on
       this site rendered Bootstrap's default #0d6efd until this was fixed. Keep the two forms in
       step, and keep both -rgb values, or links silently revert to blue. */
    --bs-link-color: var(--jlbs-accent-text);
    --bs-link-color-rgb: 168, 87, 0;
    --bs-link-hover-color: var(--jlbs-ink);
    --bs-link-hover-color-rgb: 21, 22, 22;
    --bs-border-radius: 0.5rem;
    --bs-emphasis-color: var(--jlbs-ink);
}

body {
    -webkit-font-smoothing: antialiased;
    /* Clears the fixed mobile call bar so it never covers the end of the page. */
    padding-bottom: 4.25rem;
}

/* body's padding keeps *content* clear of the call bar, but says nothing about where the browser
   stops when it scrolls an element into view on focus - which is typically flush with the viewport
   bottom, underneath the bar. SC 2.4.11 Focus Not Obscured. Same breakpoint as the bar itself. */
@media (max-width: 991.98px) {
    html {
        scroll-padding-bottom: 5rem;
    }
}

@media (min-width: 992px) {
    body {
        padding-bottom: 0;
    }
}

h1, h2, h3, h4 {
    color: var(--jlbs-ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

.lead {
    font-size: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
    color: var(--jlbs-muted);
}

/* --- Accessibility ------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--jlbs-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    padding: 0.6rem 1rem;
    background: var(--jlbs-ink);
    color: #fff;
    border-radius: var(--bs-border-radius);
}

.icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.18em;
    flex: none;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: 0.65rem;
}

.btn-accent {
    --bs-btn-color: var(--jlbs-ink);
    --bs-btn-bg: var(--jlbs-accent);
    --bs-btn-border-color: var(--jlbs-accent);
    --bs-btn-hover-color: var(--jlbs-ink);
    --bs-btn-hover-bg: var(--jlbs-accent-hover);
    --bs-btn-hover-border-color: var(--jlbs-accent-hover);
    --bs-btn-active-bg: var(--jlbs-accent-hover);
    --bs-btn-active-border-color: var(--jlbs-accent-hover);
    --bs-btn-active-color: var(--jlbs-ink);
}

.btn-ink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--jlbs-ink);
    --bs-btn-border-color: var(--jlbs-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jlbs-slate);
    --bs-btn-hover-border-color: var(--jlbs-slate);
    --bs-btn-active-bg: var(--jlbs-slate);
    --bs-btn-active-border-color: var(--jlbs-slate);
    --bs-btn-active-color: #fff;
}

.btn-outline-ink {
    --bs-btn-color: var(--jlbs-ink);
    --bs-btn-border-color: rgba(21, 22, 22, 0.35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jlbs-ink);
    --bs-btn-hover-border-color: var(--jlbs-ink);
    --bs-btn-active-bg: var(--jlbs-ink);
    --bs-btn-active-border-color: var(--jlbs-ink);
    --bs-btn-active-color: #fff;
}

.btn-on-dark {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-hover-color: var(--jlbs-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--jlbs-ink);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}

/* --- Header -------------------------------------------------------------- */

.site-header__strip {
    background: var(--jlbs-ink);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    padding: 0.45rem 0;
}

.site-header__area {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.site-header__phone {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.site-header__phone:hover,
.site-header__phone:focus {
    color: var(--jlbs-accent);
}

.site-header .navbar {
    background: #fff;
    border-bottom: 1px solid var(--jlbs-border);
    padding-block: 0.75rem;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-brand__mark {
    background: var(--jlbs-accent);
    color: var(--jlbs-ink);
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 1rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.35rem;
}

.navbar-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.navbar-brand__text strong {
    color: var(--jlbs-ink);
    font-size: 1.075rem;
}

.navbar-brand__text small {
    color: var(--jlbs-muted);
    font-size: 0.75rem;
}

.navbar .nav-link {
    color: var(--jlbs-slate);
    font-weight: 600;
    padding-inline: 0.9rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--jlbs-ink);
}

.navbar .nav-link.active {
    color: var(--jlbs-ink);
    box-shadow: inset 0 -3px 0 var(--jlbs-accent);
}

@media (max-width: 991.98px) {
    .navbar .nav-link.active {
        box-shadow: inset 3px 0 0 var(--jlbs-accent);
    }

    .navbar-nav .btn {
        margin-top: 0.75rem;
    }
}

/* --- Sections ------------------------------------------------------------ */

.section {
    padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
}

.section--surface {
    background: var(--jlbs-surface);
}

.section--ink {
    background: var(--jlbs-ink);
    color: rgba(255, 255, 255, 0.82);
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
    color: #fff;
}

.section__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--jlbs-accent-text);
    margin-bottom: 0.5rem;
}

.section--ink .section__eyebrow {
    color: var(--jlbs-accent-on-dark);
}

/* The hero is not a .section--ink - it is its own component - so it never picked up the rule
   above and rendered the light-background accent on a dark scrim. --jlbs-accent is not enough
   here either: measured against the worst pixel under the glyphs it reaches only ~4.25:1. */
.hero .section__eyebrow {
    color: var(--jlbs-accent-on-dark);
}

/* --- Hero ---------------------------------------------------------------- */

/* A real JLBS project. The gradient underneath is the paint-time background and the
   fallback if the image fails, so text is never left on bare white. */
.hero {
    position: relative;
    background: linear-gradient(160deg, var(--jlbs-slate) 0%, var(--jlbs-ink) 70%);
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The photograph is decorative here - the h1 carries the meaning - but it must not
       wash out the copy, hence the scrim below. */
    opacity: 0.78;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Scrim: keeps the headline above 4.5:1 contrast wherever the photo happens to be light. */
    background: linear-gradient(
        100deg,
        rgba(21, 22, 22, 0.88) 0%,
        rgba(21, 22, 22, 0.62) 48%,
        rgba(21, 22, 22, 0.30) 100%
    );
    pointer-events: none;
}

.hero > .container {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}

.hero h1 {
    color: #fff;
    max-width: 18ch;
}

.hero__lead {
    color: rgba(255, 255, 255, 0.82);
    max-width: 52ch;
}

.hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero__points li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: #fff;
}

.hero__points .icon {
    color: var(--jlbs-accent);
}

/* --- Cards --------------------------------------------------------------- */

.tile {
    background: #fff;
    border: 1px solid var(--jlbs-border);
    border-radius: var(--bs-border-radius);
    padding: 1.75rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.tile:hover,
a.tile:focus-visible {
    border-color: var(--jlbs-accent);
    transform: translateY(-2px);
}

.tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.6rem;
    background: rgba(242, 126, 0, 0.13);
    color: var(--jlbs-slate);
    margin-bottom: 1rem;
}

.tile__icon .icon {
    width: 1.6rem;
    height: 1.6rem;
}

.tile__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--jlbs-slate);
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding-block: 0.35rem;
}

.checklist .icon {
    color: var(--jlbs-accent-text);
    margin-top: 0.35em;
}

/* --- Service detail blocks ----------------------------------------------- */

.service-block + .service-block {
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    border-top: 1px solid var(--jlbs-border);
}

/* --- Projects ------------------------------------------------------------ */

.project-card {
    border: 1px solid var(--jlbs-border);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-card__media {
    position: relative;
    margin: 0;
    background: var(--jlbs-surface);
}

.project-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.project-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1 1 auto;
}

.project-card__meta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--jlbs-accent-text);
}

/* Impossible to miss in review, so sample data cannot quietly reach production. */
.placeholder-flag {
    position: absolute;
    inset-inline: 0;
    top: 0;
    background: #b42318;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    text-align: center;
}

/* --- Calls to action ----------------------------------------------------- */

.cta-band {
    background: var(--jlbs-ink);
    color: rgba(255, 255, 255, 0.82);
}

.cta-band h2 {
    color: #fff;
}

.cta-band__phone {
    color: var(--jlbs-accent);
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.cta-band__phone:hover,
.cta-band__phone:focus {
    color: #fff;
}

/* --- Forms --------------------------------------------------------------- */

.form-panel {
    background: #fff;
    border: 1px solid var(--jlbs-border);
    border-radius: var(--bs-border-radius);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.form-label {
    font-weight: 600;
    color: var(--jlbs-ink);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--jlbs-accent);
    box-shadow: 0 0 0 0.2rem rgba(242, 126, 0, 0.25);
}

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

.field-validation-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: #b42318;
}

.input-validation-error {
    border-color: #b42318;
}

.validation-summary-errors {
    background: #fdf2f1;
    border: 1px solid #f3c6c2;
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.25rem;
    color: #8a2019;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

.validation-summary-valid {
    display: none;
}

/* The honeypot must be unreachable by people and by assistive technology, but still
   present in the DOM and fillable by a bot. display:none is skipped by some bots, so
   it is moved off-screen instead. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
    background: var(--jlbs-ink);
    color: rgba(255, 255, 255, 0.72);
    padding-block: 3rem 2rem;
    font-size: 0.95rem;
}

.site-footer__brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.site-footer__strapline {
    max-width: 38ch;
    margin: 0;
}

.site-footer__heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jlbs-accent);
    margin-bottom: 0.85rem;
}

.site-footer__list li {
    padding-block: 0.2rem;
}

/* Bootstrap's muted text utilities assume a light background and fail contrast here. */
.site-footer__muted {
    color: rgba(255, 255, 255, 0.72);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--jlbs-accent);
    text-decoration: underline;
}

.site-footer__rule {
    border-color: rgba(255, 255, 255, 0.15);
    margin-block: 2rem 1.25rem;
    opacity: 1;
}

.site-footer__legal {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Mobile call bar ----------------------------------------------------- */

.mobile-call-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

.mobile-call-bar__item {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.9rem 0.5rem;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}

.mobile-call-bar__item--call {
    background: var(--jlbs-accent);
    color: var(--jlbs-ink);
}

.mobile-call-bar__item--quote {
    background: var(--jlbs-ink);
    color: #fff;
}

/* --- Breadcrumbs --------------------------------------------------------- */

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--jlbs-muted);
    --bs-breadcrumb-item-active-color: var(--jlbs-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.breadcrumb a {
    text-decoration: none;
}

/* --- Accordion ----------------------------------------------------------- */

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(242, 126, 0, 0.25);
    --bs-accordion-active-bg: rgba(242, 126, 0, 0.1);
    --bs-accordion-active-color: var(--jlbs-ink);
    --bs-accordion-border-color: var(--jlbs-border);
}

.accordion-button {
    font-weight: 600;
}

/* --- Prose --------------------------------------------------------------- */

.prose p {
    max-width: 68ch;
}

.prose > :last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Brand mark ----------------------------------------------------------- */

.navbar-brand__logo {
    height: 46px;
    width: auto;
    display: block;
}

@media (max-width: 575.98px) {
    .navbar-brand__logo { height: 38px; }
}

.site-footer__logo {
    height: 54px;
    width: auto;
    margin-bottom: 1rem;
}

/* --- Accreditation badges ------------------------------------------------- */

.accreditations {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.accreditation {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.accreditation img {
    /* Held small on purpose: the supplied artwork is low resolution. Replace with official
       badge files from the NAPIT and Gas Safe member portals before scaling this up. */
    height: 46px;
    width: auto;
    background: #fff;
    border-radius: 4px;
    padding: 2px;
}

.accreditation__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 0.8rem;
}

.accreditation__text strong { color: #fff; }
.accreditation__text span { color: rgba(255, 255, 255, 0.65); }

/* --- Before / after comparison -------------------------------------------- */

.compare {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    touch-action: none;
    user-select: none;
    cursor: ew-resize;
    aspect-ratio: 4 / 3;
    background: var(--jlbs-surface);
}

@media (min-width: 768px) {
    .compare { aspect-ratio: 16 / 9; }
}

.compare__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Clipped rather than resized: the "before" layer stays exactly the same size as the
   "after" layer underneath, so the two never drift out of register as the handle moves.
   A percentage width on the wrapper would squash the image instead of revealing it. */
.compare__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
}

.compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: #fff;
    transform: translateX(-1.5px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.compare__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.75rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-5 6 5 6'/%3E%3Cpath d='m15 6 5 6-5 6'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* The range input is the accessible control: invisible, but focusable and keyboard-operable. */
.compare__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

.compare__range:focus-visible {
    opacity: 1;
    outline: 3px solid var(--jlbs-accent);
    outline-offset: -3px;
}

.compare__tag {
    position: absolute;
    bottom: 1rem;
    padding: 0.3rem 0.75rem;
    background: rgba(21, 22, 22, 0.75);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    pointer-events: none;
}

.compare__tag--before { left: 1rem; }
.compare__tag--after { right: 1rem; }

/* --- Gallery -------------------------------------------------------------- */

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.gallery-filter .btn.active {
    background: var(--jlbs-ink);
    border-color: var(--jlbs-ink);
    color: #fff;
}

.project-card__link {
    display: block;
    overflow: hidden;
    background: var(--jlbs-surface);
}

.project-card__link img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.project-card__link:hover img,
.project-card__link:focus-visible img {
    transform: scale(1.04);
}

.project-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem 1rem;
}

.project-card__title {
    font-weight: 600;
    color: var(--jlbs-ink);
    font-size: 0.975rem;
    line-height: 1.3;
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
    border: 0;
    padding: 0;
    max-width: min(96vw, 1400px);
    max-height: 94vh;
    background: transparent;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgba(10, 11, 11, 0.9);
}

.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: var(--bs-border-radius);
    background: var(--jlbs-ink);
}

.lightbox__caption {
    color: #fff;
    text-align: center;
    margin: 0.85rem 0 0;
    font-size: 0.95rem;
}

/* Centres an SVG rather than a text glyph. The "×" character that was here measured 3.5px below
   the button's centre in a 40px button: its ink sits on the font's math axis, so no font-size or
   line-height value moves it, and flex centring the line box does not either. */
.lightbox__close {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--jlbs-ink);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.lightbox__close .icon {
    width: 1.25rem;
    height: 1.25rem;
    /* .icon's baseline nudge is for icons sitting beside text; inside a flex box it would
       reintroduce exactly the offset this change removes. */
    vertical-align: baseline;
}