/* ==========================================================================
   Jitin Rathore — premium layer
   --------------------------------------------------------------------------
   All presentation for the service pages, the blog (archive + article) and the
   Instagram section lives here. Nothing in this file depends on markup that an
   editor types into the dashboard: the templates supply the structure, the
   editor only supplies headings, paragraphs and lists. That is what keeps the
   Visual editor from breaking a page.
   ========================================================================== */

:root {
    --jr-ink: #14100f;
    --jr-ink-soft: #4a4340;
    --jr-muted: #7d7570;
    --jr-line: #e6dfda;
    --jr-line-soft: #eeeeee;
    --jr-cream: #ffffff;
    --jr-cream-deep: #ffffff;
    --jr-accent: var(--px-theme-clr, #c44953);
    --jr-accent-soft: rgba(20, 16, 15, 0.06);
    --jr-shadow-sm: 0 2px 10px rgba(20, 16, 15, 0.04);
    --jr-shadow: 0 18px 50px rgba(20, 16, 15, 0.07);
    --jr-shadow-lg: 0 30px 80px rgba(20, 16, 15, 0.12);
    --jr-radius: 4px;
    --jr-radius-lg: 10px;
    --jr-shell: 1200px;
}

/* Mobile navigation: keep nested links inside the dark menu canvas. */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse .navbar-nav > .menu-item {
        width: 100%;
    }

    .navbar .navbar-collapse .navbar-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        min-width: 0;
        margin: 4px 0 10px !important;
        padding: 3px 0 3px 18px !important;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, .18);
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
        transform: none !important;
    }

    .navbar .navbar-collapse .navbar-nav .dropdown-menu > li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .navbar .navbar-collapse .navbar-nav.white-color .dropdown-menu > li > a,
    .navbar .navbar-collapse .navbar-nav .dropdown-menu > li > a {
        display: block;
        width: 100%;
        padding: 7px 12px !important;
        color: rgba(255, 255, 255, .88) !important;
        font-size: 16px;
        line-height: 1.35;
        background: transparent !important;
    }

    .navbar .navbar-collapse .navbar-nav .dropdown-menu > li > a:hover,
    .navbar .navbar-collapse .navbar-nav .dropdown-menu > li > a:focus,
    .navbar .navbar-collapse .navbar-nav .dropdown-menu > li > a.active {
        color: #fff !important;
    }
}

/* Footer utilities are injected after the footer by WordPress plugins. Keep
 * them out of normal document flow so the footer remains the visual page end. */
body > .footer {
    margin-bottom: 0 !important;
}

body > #wmn-fx {
    position: fixed !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Floating WhatsApp contact: compact white button with notification badge. */
body > #wmn-fx .wmn-widget {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 19px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .20);
}

body > #wmn-fx .wmn-widget svg {
    width: 38px;
    height: 38px;
}

body > #wmn-fx .wmn-widget::after {
    content: "1";
    position: absolute;
    top: -5px;
    right: -2px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f5000c;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body > #wmn-fx .wmn-widget {
        width: 70px;
        height: 70px;
        padding: 17px;
    }

    body > #wmn-fx .wmn-widget svg {
        width: 36px;
        height: 36px;
    }
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.jr-shell {
    width: 100%;
    max-width: var(--jr-shell);
    margin-inline: auto;
    padding-inline: 24px;
}

.jr-shell--narrow {
    max-width: 820px;
}

.jr-eyebrow {
    display: inline-block;
    font-family: var(--px-font-body, sans-serif);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jr-accent);
    margin: 0 0 18px;
}

.jr-eyebrow--muted {
    color: var(--jr-muted);
}

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

.jr-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    font-family: var(--px-font-body, sans-serif);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--jr-ink);
    border-radius: 999px;
    background: var(--jr-ink);
    color: #fff;
    text-decoration: none;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.jr-btn:hover,
.jr-btn:focus {
    background: var(--jr-accent);
    border-color: var(--jr-accent);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.jr-btn--ghost {
    background: transparent;
    color: var(--jr-ink);
}

.jr-btn--ghost:hover,
.jr-btn--ghost:focus {
    background: var(--jr-ink);
    border-color: var(--jr-ink);
    color: #fff;
}

.jr-btn--light {
    background: #fff;
    border-color: #fff;
    color: var(--jr-ink);
}

.jr-btn--light:hover,
.jr-btn--light:focus {
    background: var(--jr-accent);
    border-color: var(--jr-accent);
    color: #fff;
}

.jr-btn--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}

.jr-btn--outline-light:hover,
.jr-btn--outline-light:focus {
    background: #fff;
    border-color: #fff;
    color: var(--jr-ink);
}

/* Breadcrumb ------------------------------------------------------------- */

.jr-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--jr-muted);
}

.jr-crumbs li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jr-crumbs li + li::before {
    content: "/";
    color: var(--jr-line);
}

.jr-crumbs a {
    color: var(--jr-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-crumbs a:hover {
    color: var(--jr-accent);
}

.jr-crumbs [aria-current="page"] {
    color: var(--jr-ink);
}

/* Section heading -------------------------------------------------------- */

.jr-section-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.jr-section-head h2 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 0 0 14px;
}

.jr-section-head p {
    color: var(--jr-muted);
    margin: 0;
}

/* ==========================================================================
   SERVICE — single-service.php
   ========================================================================== */

.jr-svc {
    background: #fff;
    color: var(--jr-ink-soft);
}

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

.jr-svc-hero {
    position: relative;
    padding: 40px 0 0;
    background: #fff;
    overflow: hidden;
}

.jr-svc-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"service-copy service-media"
		"service-booking service-media";
    gap: 64px;
	row-gap: 0;
    align-items: center;
    padding-bottom: 70px;
}

/*
 * A service with no Featured image yet — a newly added one, typically — must
 * not leave the media column standing empty. Collapse the hero to one column
 * so the page still reads as finished on the day it is published.
 */
.jr-svc-hero--noimage .jr-svc-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "service-copy"
        "service-booking";
    gap: 0;
    align-items: start;
}

.jr-svc-hero--noimage .jr-svc-hero__text {
    align-self: start;
    margin-bottom: 34px;
}

.jr-svc-hero__text {
	grid-area: service-copy;
	align-self: end;
}

.jr-svc-hero__booking {
	grid-area: service-booking;
	align-self: start;
}

.jr-svc-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border: 1px solid var(--jr-line);
    border-radius: 50%;
    color: var(--jr-accent);
    font-size: 20px;
    background: #fff;
}

.jr-svc-hero__title {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jr-ink);
    margin: 0 0 18px;
}

.jr-svc-hero__subtitle {
    font-size: 18px;
    line-height: 1.7;
    color: var(--jr-muted);
    margin: 0 0 34px;
    max-width: 48ch;
}

.jr-svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.jr-svc-hero__mobile-booking {
    display: none;
}

/*
 * A grid rather than a wrapping flex row: three facts always line up, and on a
 * narrow column they drop to their own rows instead of colliding.
 */
.jr-svc-hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 22px 28px;
    margin: 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--jr-line);
    list-style: none;
}

.jr-svc-hero__meta li {
    padding-left: 22px;
    border-left: 1px solid var(--jr-line);
}

.jr-svc-hero__meta li:first-child {
    padding-left: 0;
    border-left: 0;
}

.jr-svc-hero__meta strong {
    display: block;
    font-family: var(--px-font-title, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--jr-ink);
    line-height: 1.25;
}

.jr-svc-hero__meta span {
    display: block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jr-muted);
    margin-top: 4px;
}

.jr-svc-hero__media {
    position: relative;
	grid-area: service-media;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 1 / 1;
    justify-self: end;
}

.jr-svc-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border-radius: 500px 500px var(--jr-radius-lg) var(--jr-radius-lg);
    box-shadow: var(--jr-shadow);
}

.jr-svc-hero__media::after {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1px solid var(--jr-line);
    border-radius: 500px 500px var(--jr-radius-lg) var(--jr-radius-lg);
    z-index: -1;
}

/* Body + sidebar ---------------------------------------------------------- */

.jr-svc-main {
    padding: 90px 0;
}

.jr-svc-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 70px;
    align-items: start;
}

/* Set when the Elementor "Service body & sidebar" widget hides the rail. */
.jr-svc-main__grid--full {
    grid-template-columns: minmax(0, 1fr);
}

/* Keep the editorial copy dominant and place service navigation in a compact
   right rail. This preserves readable lines without creating a wide block of
   utility cards below the article. */
/*
 * A compact rail. Twelve services at the old sizing made a ~600px panel that
 * dominated the page beside the copy; tightening the row height, the padding
 * and the column itself keeps the whole list visible without it reading as a
 * second column of content.
 */
.jr-svc-main__grid--full-copy {
    grid-template-columns: minmax(230px, 268px) minmax(0, 1fr);
    gap: clamp(34px, 4vw, 56px);
}

.jr-svc-main__grid--full-copy .jr-svc-body {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
}

.jr-svc-main__grid--full-copy .jr-svc-aside {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 28px;
}

.jr-svc-main__grid--full-copy .jr-svc-card {
    margin: 0;
    width: 100%;
    height: auto;
    align-self: start;
    padding: 20px 18px;
}

.jr-svc-main__grid--full-copy .jr-svc-card__title {
    margin-bottom: 14px;
    padding-bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.16em;
}

.jr-svc-main__grid--full-copy .jr-svc-nav {
    display: block;
}

.jr-svc-main__grid--full-copy .jr-svc-nav li + li {
    margin-top: 1px;
}

.jr-svc-main__grid--full-copy .jr-svc-nav a {
    min-height: 0;
    padding: 7px 10px;
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.4;
}

.jr-svc-main__grid--full-copy .jr-svc-nav a:hover {
    border-color: var(--jr-line-soft);
}

/*
 * Must match the breakpoint further down that collapses `.jr-svc-main__grid`
 * to one column. Below 1200px the two-column track no longer exists, so the
 * explicit `grid-column` above has to be released as well — otherwise the copy
 * is placed in a column that is not there and prints straight over the rail.
 */
@media (max-width: 1199px) {
    .jr-svc-main__grid--full-copy {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .jr-svc-main__grid--full-copy .jr-svc-body,
    .jr-svc-main__grid--full-copy .jr-svc-aside {
        grid-column: 1;
        grid-row: auto;
    }

    .jr-svc-main__grid--full-copy .jr-svc-body {
        order: 1;
    }

    .jr-svc-main__grid--full-copy .jr-svc-aside {
        order: 2;
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        align-items: start;
    }
}

/*
 * .jr-svc-body styles whatever the editor typed in the Visual tab. Only plain
 * headings, paragraphs, lists, quotes, images and tables are expected — every
 * one of them is a tag TinyMCE round-trips safely.
 */

.jr-svc-body {
    min-width: 0;
    max-width: 100%;
    font-family: "Didact Gothic", sans-serif;
    font-size: 17px;
    line-height: 1.85;
    color: var(--jr-ink-soft);
}

/*
 * Imported editor content must never be able to widen the service grid. Some
 * legacy service posts contain a complete, full-width `.airbrush-*` landing
 * page inside the editor. Keep that content contained when it is rendered in
 * the main column beside the service navigation.
 */
.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-service-wrap {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(18px, 3vw, 34px);
}

.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 24px;
    min-width: 0;
    min-height: 0;
    padding: clamp(24px, 4vw, 44px);
}

.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero::before,
.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero img,
.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero h1,
.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero .subtitle,
.jr-svc-main__grid--full-copy .jr-svc-body .service-hero-action {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
}

.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero img {
    height: auto;
    max-height: 620px;
}

.jr-svc-main__grid--full-copy .jr-svc-body .airbrush-hero h1 {
    font-size: clamp(36px, 5vw, 64px);
    overflow-wrap: anywhere;
}

.jr-svc-body > *:first-child {
    margin-top: 0;
}

.jr-svc-body > *:last-child {
    margin-bottom: 0;
}

.jr-svc-body p {
    font-size: 17px;
    line-height: 1.85;
    color: var(--jr-ink-soft);
    margin: 0 0 22px;
}

.jr-svc-body p:first-of-type {
    font-size: inherit;
    line-height: inherit;
    color: var(--jr-ink-soft);
}

.jr-svc-body strong,
.jr-svc-body b {
    color: var(--jr-ink);
    font-weight: 700;
}

.jr-svc-body a {
    color: var(--jr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jr-accent-soft);
    transition: border-color 0.25s ease;
}

.jr-svc-body a:hover {
    color: var(--jr-accent);
    border-bottom-color: var(--jr-accent);
}

.jr-svc-body h2 {
    position: relative;
    font-family: "Syne", sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 62px 0 26px;
    padding-top: 30px;
    border-top: 1px solid var(--jr-line-soft);
}

.jr-svc-body h2::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 64px;
    height: 2px;
    background: var(--jr-accent);
}

.jr-svc-body h3 {
    font-family: "Syne", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 40px 0 16px;
}

.jr-svc-body h4,
.jr-svc-body h5,
.jr-svc-body h6 {
    font-family: "Syne", sans-serif;
    color: var(--jr-ink);
    margin: 30px 0 12px;
}

/*
 * Any bullet list the editor writes becomes a card grid. Because the rule keys
 * off <ul>, an editor can add or remove an item in the Visual tab and the
 * layout stays correct — no classes to remember, nothing to break.
 */

.jr-svc-body ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.jr-svc-body ul li {
    position: relative;
    padding: 22px 24px 22px 54px;
    background: var(--jr-cream);
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius);
    font-size: 16px;
    line-height: 1.6;
    color: var(--jr-ink);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.jr-svc-body ul li::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 27px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--jr-accent);
    box-shadow: 0 0 0 4px var(--jr-accent-soft);
}

.jr-svc-body ul li:hover {
    background: #fff;
    border-color: var(--jr-line);
    transform: translateY(-3px);
    box-shadow: var(--jr-shadow-sm);
}

/* Numbered lists stay a readable single column. */
.jr-svc-body ol {
    counter-reset: jr-ol;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.jr-svc-body ol li {
    counter-increment: jr-ol;
    position: relative;
    padding: 0 0 0 52px;
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.75;
}

.jr-svc-body ol li::before {
    content: counter(jr-ol, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--px-font-title, sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--jr-accent);
    letter-spacing: 0.04em;
}

.jr-svc-body blockquote {
    margin: 36px 0;
    padding: 30px 34px;
    background: var(--jr-cream);
    border: 0;
    border-left: 2px solid var(--jr-accent);
    border-radius: 0 var(--jr-radius) var(--jr-radius) 0;
    font-size: 19px;
    line-height: 1.7;
    color: var(--jr-ink);
}

.jr-svc-body blockquote p:last-child {
    margin-bottom: 0;
}

.jr-svc-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--jr-radius-lg);
    margin: 30px 0;
    box-shadow: var(--jr-shadow-sm);
}

.jr-svc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 16px;
}

.jr-svc-body table th,
.jr-svc-body table td {
    padding: 14px 18px;
    border: 1px solid var(--jr-line-soft);
    text-align: left;
}

.jr-svc-body table th {
    background: var(--jr-cream);
    font-family: var(--px-font-title, sans-serif);
    color: var(--jr-ink);
}

.jr-svc-body hr {
    height: 1px;
    border: 0;
    background: var(--jr-line);
    margin: 46px 0;
}

/*
 * Core galleries. Editors insert these with the Add Media button, so the theme
 * has to make the default markup look right instead of asking for custom HTML.
 */
.jr-svc-body .gallery,
.jr-article-body .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 36px 0;
}

.jr-svc-body .gallery br,
.jr-article-body .gallery br {
    display: none;
}

.jr-svc-body .gallery-item,
.jr-article-body .gallery-item {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.jr-svc-body .gallery-icon,
.jr-article-body .gallery-icon {
    margin: 0;
    overflow: hidden;
    border-radius: var(--jr-radius-lg);
    aspect-ratio: 4 / 5;
}

.jr-svc-body .gallery-icon a,
.jr-article-body .gallery-icon a {
    display: block;
    width: 100%;
    height: 100%;
    border-bottom: 0;
}

.jr-svc-body .gallery img,
.jr-article-body .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.6s ease;
}

.jr-svc-body .gallery-item:hover img,
.jr-article-body .gallery-item:hover img {
    transform: scale(1.05);
}

.jr-svc-body .gallery-caption,
.jr-article-body .gallery-caption {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--jr-muted);
}

/* Sidebar ----------------------------------------------------------------- */

.jr-svc-aside {
    position: sticky;
    top: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.jr-svc-card {
    padding: 30px;
    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius-lg);
    background: #fff;
}

.jr-svc-card__title {
    font-family: var(--px-font-title, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jr-ink);
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--jr-line-soft);
}

.jr-svc-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jr-svc-facts li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--jr-line-soft);
    font-size: 15px;
    color: var(--jr-muted);
}

.jr-svc-facts li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.jr-svc-facts strong {
    color: var(--jr-ink);
    font-weight: 400;
    text-align: right;
}

/*
 * The theme sets a global `a { color: #fff }`, which would make links inside
 * these light panels invisible. Every link in the custom layer gets an explicit
 * colour for that reason.
 */
.jr-svc-facts a,
.jr-svc-card a:not(.jr-btn) {
    color: var(--jr-ink);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-svc-facts a:hover,
.jr-svc-card a:not(.jr-btn):hover {
    color: var(--jr-accent);
}

.jr-svc-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jr-svc-nav li + li {
    margin-top: 2px;
}

.jr-svc-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--jr-radius);
    font-size: 15px;
    color: var(--jr-ink-soft);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, padding 0.25s ease;
}

.jr-svc-nav a::after {
    content: "\2192";
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.jr-svc-nav a:hover {
    background: var(--jr-cream);
    color: var(--jr-accent);
    padding-left: 18px;
}

.jr-svc-nav a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.jr-svc-nav .is-current a {
    background: var(--jr-cream-deep);
    color: var(--jr-ink);
    font-weight: 700;
}

.jr-svc-card--cta {
    background: var(--jr-ink);
    border-color: var(--jr-ink);
    color: #fff;
    text-align: center;
}

.jr-svc-card--cta .jr-svc-card__title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}

.jr-svc-card--cta p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 22px;
}

.jr-svc-card--cta .jr-btn {
    width: 100%;
    justify-content: center;
}

.jr-svc-card--cta .jr-btn + .jr-btn {
    margin-top: 10px;
}

/* Highlight band ---------------------------------------------------------- */

.jr-svc-band {
    padding: 76px 0;
    background: var(--jr-ink);
    color: #fff;
    text-align: center;
}

.jr-svc-band p {
    max-width: 900px;
    margin: 0 auto;
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(21px, 2.6vw, 30px);
    line-height: 1.55;
    font-weight: 400;
    color: #fff;
}

.jr-svc-band strong {
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--jr-accent);
}

.jr-svc-note {
    padding: 34px 0;
    background: var(--jr-cream);
    border-top: 1px solid var(--jr-line-soft);
    border-bottom: 1px solid var(--jr-line-soft);
    text-align: center;
}

.jr-svc-note p {
    margin: 0;
    font-size: 16px;
    color: var(--jr-ink-soft);
}

/* FAQ --------------------------------------------------------------------- */

.jr-faq {
    padding: clamp(64px, 8vw, 96px) 0;
    background: #fff;
}

.jr-faq .jr-section-head {
    max-width: 760px;
    margin: 0 auto 46px;
    text-align: center;
}

.jr-faq .jr-section-head h2 {
    margin: 0;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.jr-faq__list {
    display: grid;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
    border: 0;
}

.jr-faq__item {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--jr-line);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(20, 16, 15, 0.04);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.jr-faq__item.is-open {
    background: #fff;
    border-color: rgba(196, 73, 83, 0.28);
    box-shadow: 0 15px 38px rgba(20, 16, 15, 0.06);
}

.jr-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 24px 26px;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    text-align: left;
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.4;
    font-weight: 600;
    color: var(--jr-ink);
    cursor: pointer;
    transition: color 0.25s ease;
}

.jr-faq__q:hover,
.jr-faq__q:focus,
.jr-faq__q:active {
    background: transparent !important;
    color: var(--jr-accent);
    outline: 0;
    box-shadow: none;
}

.jr-faq__q:focus-visible {
    outline: 2px solid var(--jr-accent);
    outline-offset: -4px;
}

.jr-faq__q .jr-faq__sign {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-top: -2px;
    color: var(--jr-ink);
    background: #fff;
    border: 1px solid var(--jr-line);
    border-radius: 50%;
}

.jr-faq__q .jr-faq__sign::before,
.jr-faq__q .jr-faq__sign::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.jr-faq__q .jr-faq__sign::before {
    width: 15px;
    height: 1px;
}

.jr-faq__q .jr-faq__sign::after {
    width: 1px;
    height: 15px;
}

.jr-faq__item.is-open .jr-faq__sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.jr-faq__item.is-open .jr-faq__q {
    color: var(--jr-accent);
}

.jr-faq__item.is-open .jr-faq__sign {
    color: #fff;
    background: var(--jr-accent);
    border-color: var(--jr-accent);
}

.jr-faq__a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.jr-faq__a-inner {
    max-width: 820px;
    padding: 0 78px 26px 26px;
    font-size: 16px;
    line-height: 1.75;
    color: #655e59;
}

.jr-faq__a-inner p {
    margin: 0;
    color: inherit;
}

/*
 * The template renders every item open. The script then collapses all but the
 * first and takes over max-height, so a page without JS is still fully
 * readable rather than a stack of shut panels.
 */
.jr-faq__item.is-open .jr-faq__a {
    max-height: 1500px;
}

/* Related services -------------------------------------------------------- */

.jr-related {
    padding: 90px 0;
    background: var(--jr-cream);
}

.jr-related > .jr-shell {
    max-width: none;
    padding-inline: clamp(24px, 3.25vw, 56px);
}

.jr-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.2vw, 34px);
    width: 100%;
}

.jr-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.jr-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--jr-shadow);
}

.jr-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--jr-cream-deep);
}

.jr-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    transition: transform 0.7s ease;
}

.jr-card:hover .jr-card__media img {
    transform: scale(1.06);
}

/* Keep long homepage service names inside their image cards. */
.home .services .item .wrap .text,
.home .services2 .item .wrap .text {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: calc(100% - 40px);
    text-align: center;
}

.home .services .item .wrap .text h4,
.home .services2 .item .wrap .text h4 {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

@media (max-width: 575px) {
    .home .services .item .wrap .text,
    .home .services2 .item .wrap .text {
        left: 24px;
        right: 24px;
        max-width: calc(100% - 48px);
    }

    .home .services .item .wrap .text h4,
    .home .services2 .item .wrap .text h4 {
        font-size: 21px;
    }
}

/* Homepage carousel corrections: fixed media geometry prevents mixed image
   sizes from shifting the blog layout. */
.home .blog-home .item .wrap,
.home .blog-home .item .wrap .img {
    width: 100%;
}

/*
 * A square frame, not 6:4. The cards are the height of this box, and the 3:2
 * crop left them far shallower than the reference — a portrait photograph lost
 * most of its subject and the row read as a strip of letterboxes. Square keeps
 * every card the same height whatever is uploaded, and shows enough of a
 * portrait for the face to survive the crop.
 */
.home .blog-home .item .wrap .img {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.home .blog-home .item .wrap .img img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

.home .blog-home .item .wrap:hover .img img {
    transform: scale(.95);
}

/* Homepage journal cards use a clean image treatment without overlay arrows. */
.home .blog-home .owl-nav,
.home .blog-home .item .wrap .title .icon {
    display: none !important;
}

.home .blog-home .item .wrap:hover .title {
    transform: none;
}

.jr-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 26px 28px 28px;
}

.jr-card__title {
    font-family: var(--px-font-title, sans-serif);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 12px;
}

.jr-card__title a {
    color: var(--jr-ink);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-card__title a:hover {
    color: var(--jr-accent);
}

.jr-card__excerpt {
    font-size: 15px;
    line-height: 1.75;
    color: var(--jr-muted);
    margin: 0 0 20px;
}

.jr-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jr-ink);
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.jr-card__link:hover {
    gap: 14px;
    color: var(--jr-accent);
}

/* Closing CTA ------------------------------------------------------------- */

.jr-cta {
    position: relative;
    padding: 96px 0;
    background: var(--jr-ink);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.jr-cta::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    top: -200px;
    right: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 73, 83, 0.28) 0%, rgba(196, 73, 83, 0) 70%);
}

.jr-cta__inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.jr-cta h2 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
}

.jr-cta p {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 34px;
}

.jr-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ==========================================================================
   BLOG — archive listing
   ========================================================================== */

.jr-blog {
    background: #fff;
}

.jr-blog-hero {
    padding: 60px 0 70px;
    background: linear-gradient(180deg, var(--jr-cream) 0%, #fff 100%);
    text-align: center;
}

.jr-blog-hero h1 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.08;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 0 0 16px;
}

.jr-blog-hero p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.8;
    color: var(--jr-muted);
}

.jr-blog-hero .jr-crumbs {
    justify-content: center;
}

/* Featured lead article */

.jr-blog-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
    margin-bottom: 70px;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.4s ease;
}

.jr-blog-lead:hover {
    box-shadow: var(--jr-shadow);
}

.jr-blog-lead__media {
    position: relative;
    display: block;
    min-height: 380px;
    overflow: hidden;
    background: var(--jr-cream-deep);
}

.jr-blog-lead__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.jr-blog-lead:hover .jr-blog-lead__media img {
    transform: scale(1.05);
}

.jr-blog-lead__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 54px;
}

.jr-blog-lead__body h2 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 18px;
}

.jr-blog-lead__body h2 a {
    color: var(--jr-ink);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-blog-lead__body h2 a:hover {
    color: var(--jr-accent);
}

.jr-blog-lead__body p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--jr-muted);
    margin: 0 0 28px;
}

/* The body is a column flexbox, so the button needs to opt out of stretching. */
.jr-blog-lead__body .jr-btn {
    align-self: flex-start;
}

.jr-post-meta__cats {
    display: inline;
}

.jr-post-meta__cats a + a {
    margin-left: 0;
}

/* Post meta line */

.jr-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jr-muted);
}

.jr-post-meta a {
    color: var(--jr-accent);
    text-decoration: none;
}

.jr-post-meta a:hover {
    color: var(--jr-accent);
    text-decoration: underline;
}

.jr-post-meta .jr-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--jr-line);
}

/* Article grid */

.jr-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 34px;
}

.jr-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
    padding: 80px 0 90px;
}

.jr-blog-layout--sidebar {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.jr-blog-layout--sidebar .jr-blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.jr-blog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.jr-blog-card:hover {
    transform: translateY(-6px);
    border-color: var(--jr-line);
    box-shadow: var(--jr-shadow);
}

/* Keep portrait subjects visible and every card image aligned at equal height. */
.jr-blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--jr-cream-deep);
}

.jr-blog-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.7s ease;
}

.jr-blog-card:hover .jr-blog-card__media img {
    transform: scale(1.06);
}

.jr-blog-card__date {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--jr-radius);
    color: var(--jr-ink);
    text-decoration: none;
    line-height: 1.1;
    backdrop-filter: blur(4px);
}

.jr-blog-card__date b {
    font-family: var(--px-font-title, sans-serif);
    font-size: 21px;
    font-weight: 700;
}

.jr-blog-card__date span {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jr-muted);
}

.jr-blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 26px 28px 28px;
}

.jr-blog-card__body h3 {
    font-family: var(--px-font-title, sans-serif);
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 12px;
}

.jr-blog-card__body h3 a {
    color: var(--jr-ink);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-blog-card__body h3 a:hover {
    color: var(--jr-accent);
}

.jr-blog-card__body p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--jr-muted);
    margin: 0 0 22px;
}

.jr-blog-empty {
    padding: 70px 0;
    text-align: center;
    color: var(--jr-muted);
}

/* Pagination -------------------------------------------------------------- */

.jr-pagination {
    margin-top: 60px;
    text-align: center;
}

.jr-pagination .page-numbers,
.jr-pagination ul.page-numbers,
.jr-pagination ul.pagination-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jr-pagination li {
    list-style: none;
}

.jr-pagination a.page-numbers,
.jr-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius);
    font-size: 15px;
    color: var(--jr-ink-soft);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.jr-pagination a.page-numbers:hover,
.jr-pagination span.page-numbers.current {
    background: var(--jr-ink);
    border-color: var(--jr-ink);
    color: #fff;
}

/* Blog sidebar ------------------------------------------------------------ */

.jr-blog-aside {
    position: sticky;
    top: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Rail cards rendered by the template ------------------------------------- */

.jr-rail-card {
    padding: 26px 28px 28px;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    background: #fff;
}

.jr-rail-card__title {
    font-family: var(--px-font-title, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jr-ink);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jr-line-soft);
}

.jr-rail-search {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--jr-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--jr-cream);
}

.jr-rail-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 18px;
    border: 0;
    background: transparent;
    font-family: var(--px-font-body, sans-serif);
    font-size: 15px;
    color: var(--jr-ink);
}

.jr-rail-search input[type="search"]:focus {
    outline: none;
}

.jr-rail-search button {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 0;
    background: var(--jr-ink);
    color: #fff;
    cursor: pointer;
    transition: background 0.25s ease;
}

.jr-rail-search button:hover {
    background: var(--jr-accent);
}

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

.jr-rail-list li + li {
    border-top: 1px dashed var(--jr-line-soft);
}

.jr-rail-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    font-size: 15px;
    color: var(--jr-ink-soft);
    text-decoration: none;
    transition: color 0.25s ease, padding 0.25s ease;
}

.jr-rail-list a:hover {
    color: var(--jr-accent);
    padding-left: 6px;
}

.jr-rail-list em {
    font-style: normal;
    font-size: 12px;
    color: var(--jr-muted);
    background: var(--jr-cream);
    border-radius: 999px;
    padding: 3px 10px;
}

.jr-rail-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jr-rail-posts li + li {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--jr-line-soft);
}

.jr-rail-posts a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.jr-rail-posts__img {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: var(--jr-radius);
    overflow: hidden;
    background: var(--jr-cream-deep);
}

.jr-rail-posts__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jr-rail-posts a:hover .jr-rail-posts__img img {
    transform: scale(1.08);
}

.jr-rail-posts__text {
    min-width: 0;
}

.jr-rail-posts strong {
    display: block;
    font-family: var(--px-font-title, sans-serif);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--jr-ink);
    transition: color 0.25s ease;
}

.jr-rail-posts a:hover strong {
    color: var(--jr-accent);
}

.jr-rail-posts em {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--jr-muted);
}

.jr-rail-card--cta {
    background: var(--jr-ink);
    border-color: var(--jr-ink);
    text-align: center;
    padding: 34px 28px;
}

.jr-rail-card--cta .jr-rail-card__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--jr-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.jr-rail-card--cta .jr-rail-card__title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.14);
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
}

.jr-rail-card--cta p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
}

.jr-rail-card--cta .jr-btn {
    width: 100%;
    justify-content: center;
    gap: 9px;
}

.jr-rail-card--cta .jr-btn--light {
    color: var(--jr-ink) !important;
}

.jr-rail-card--cta .jr-btn--outline-light {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .65);
}

.jr-rail-card--cta .jr-btn--outline-light:hover,
.jr-rail-card--cta .jr-btn--outline-light:focus {
    color: var(--jr-ink) !important;
}

.jr-rail-card--cta .jr-btn + .jr-btn {
    margin-top: 10px;
}

.jr-blog-aside .item,
.jr-blog-aside .widget {
    padding: 28px 30px;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    background: #fff;
}

.jr-blog-aside h5 {
    font-family: var(--px-font-title, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jr-ink);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jr-line-soft);
}

.jr-blog-aside ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jr-blog-aside ul li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--jr-line-soft);
    font-size: 15px;
}

.jr-blog-aside ul li:last-child {
    border-bottom: 0;
}

.jr-blog-aside a {
    color: var(--jr-ink-soft);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-blog-aside a:hover {
    color: var(--jr-accent);
}

/* ==========================================================================
   BLOG — single article
   ========================================================================== */

.jr-article {
    background: #fff;
}

.jr-article-hero {
    padding: 50px 0 0;
    background: linear-gradient(180deg, var(--jr-cream) 0%, #fff 100%);
}

.jr-article-hero__inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.jr-article-hero h1 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jr-ink);
    margin: 0 0 22px;
}

.jr-article-hero .jr-post-meta,
.jr-article-hero .jr-crumbs {
    justify-content: center;
}

.jr-article-hero__excerpt {
    font-size: 19px;
    line-height: 1.8;
    color: var(--jr-muted);
    margin: 0 0 8px;
}

.jr-article-hero__media {
    max-width: 980px;
    margin: 38px auto -90px;
    border-radius: var(--jr-radius-lg);
    overflow: hidden;
    box-shadow: var(--jr-shadow-lg);
}

.jr-article-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
}

.jr-article-main {
    padding: 130px 0 76px;
}

.jr-article-main--noimage {
    padding-top: 70px;
}

.jr-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
}

.jr-article-layout--sidebar {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.jr-article-body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.9;
    color: var(--jr-ink-soft);
}

.jr-article-layout--sidebar .jr-article-body {
    margin: 0;
}

.jr-article-body > *:first-child {
    margin-top: 0;
}

.jr-article-body p {
    font-size: 18px;
    line-height: 1.9;
    color: var(--jr-ink-soft);
    margin: 0 0 18px;
}

.jr-article-body strong,
.jr-article-body b {
    color: var(--jr-ink);
    font-weight: 700;
}

.jr-article-body a {
    color: var(--jr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jr-accent-soft);
}

.jr-article-body a:hover {
    color: var(--jr-accent);
    border-bottom-color: var(--jr-accent);
}

.jr-article-body h2 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.25;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 54px 0 20px;
}

.jr-article-body .jr-article-section-title {
    position: relative;
    margin-top: 44px;
    padding: 19px 24px 19px 27px;
    border-left: 3px solid var(--jr-accent);
    border-radius: 0 var(--jr-radius-lg) var(--jr-radius-lg) 0;
    background: linear-gradient(90deg, var(--jr-accent-soft), rgba(255, 255, 255, 0));
}

.jr-article-body .jr-article-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 4px 0 24px;
    padding: 0;
}

.jr-article-body .jr-article-points li {
    min-height: 48px;
    margin: 0;
    padding: 11px 14px 11px 36px;
    border: 1px solid var(--jr-line-soft);
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    line-height: 1.55;
}

.jr-article-body .jr-article-points li::before {
    left: 16px;
    top: 20px;
    width: 6px;
    height: 6px;
}

.jr-article-body p:has(> img:only-child) {
    margin: 34px 0 42px;
    text-align: center;
}

.jr-article-body p > img:only-child {
    display: block;
    width: min(100%, 680px);
    margin-inline: auto;
}

.jr-article-body h3 {
    font-family: var(--px-font-title, sans-serif);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 40px 0 16px;
}

.jr-article-body h4,
.jr-article-body h5,
.jr-article-body h6 {
    font-family: var(--px-font-title, sans-serif);
    color: var(--jr-ink);
    margin: 32px 0 14px;
}

.jr-article-body ul,
.jr-article-body ol {
    margin: 0 0 26px;
    padding: 0 0 0 4px;
    list-style: none;
}

.jr-article-body ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    line-height: 1.8;
}

/*
 * Content pasted from a document often arrives as <li><p>text</p></li>. Without
 * this, every bullet inherits a full paragraph margin and the list falls apart
 * into loosely spaced lines.
 */
.jr-article-body li > p,
.jr-svc-body li > p {
    margin: 0 0 8px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.jr-article-body li > p:last-child,
.jr-svc-body li > p:last-child {
    margin-bottom: 0;
}

.jr-article-body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--jr-accent);
}

.jr-article-body ol {
    counter-reset: jr-article-ol;
}

.jr-article-body ol li {
    counter-increment: jr-article-ol;
    position: relative;
    padding-left: 42px;
    margin-bottom: 14px;
    line-height: 1.8;
}

.jr-article-body ol li::before {
    content: counter(jr-article-ol, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--px-font-title, sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--jr-accent);
}

.jr-article-body blockquote {
    margin: 40px 0;
    padding: 8px 0 8px 34px;
    border-left: 2px solid var(--jr-accent);
    font-family: var(--px-font-title, sans-serif);
    font-size: 22px;
    line-height: 1.6;
    color: var(--jr-ink);
}

.jr-article-body blockquote p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin-bottom: 0;
}

.jr-article-body img,
.jr-article-body figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--jr-radius-lg);
}

.jr-article-body figure {
    margin: 36px 0;
}

.jr-article-body figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: var(--jr-muted);
    text-align: center;
}

.jr-article-body hr {
    height: 1px;
    border: 0;
    background: var(--jr-line);
    margin: 48px 0;
}

.jr-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 16px;
}

.jr-article-body table th,
.jr-article-body table td {
    padding: 14px 18px;
    border: 1px solid var(--jr-line-soft);
    text-align: left;
}

.jr-article-body table th {
    background: var(--jr-cream);
    color: var(--jr-ink);
}

/* Article footer: tags + share */

.jr-article-foot {
    max-width: 760px;
    margin: 56px auto 0;
    padding-top: 34px;
    border-top: 1px solid var(--jr-line);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}

.jr-article-layout--sidebar .jr-article-foot {
    margin-left: 0;
    margin-right: 0;
}

.jr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jr-tags a {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--jr-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--jr-ink-soft);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.jr-tags a:hover {
    background: var(--jr-ink);
    border-color: var(--jr-ink);
    color: #fff;
}

.jr-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jr-share span {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jr-muted);
}

.jr-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--jr-line);
    border-radius: 50%;
    color: var(--jr-ink-soft);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.jr-share a:hover {
    background: var(--jr-accent);
    border-color: var(--jr-accent);
    color: #fff;
    transform: translateY(-2px);
}

/* Author card */

.jr-author {
    max-width: 760px;
    margin: 46px auto 0;
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 30px 34px;
    background: var(--jr-cream);
    border-radius: var(--jr-radius-lg);
}

.jr-article-layout--sidebar .jr-author {
    margin-left: 0;
    margin-right: 0;
}

.jr-author__img {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    overflow: hidden;
}

.jr-author__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jr-author h4 {
    font-family: var(--px-font-title, sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 0 0 6px;
}

.jr-author p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--jr-muted);
}

/* Prev / next */

.jr-adjacent {
    max-width: 760px;
    margin: 46px auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.jr-article-layout--sidebar .jr-adjacent {
    margin-left: 0;
    margin-right: 0;
}

.jr-adjacent a {
    display: block;
    padding: 24px 26px;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.jr-adjacent a:hover {
    border-color: var(--jr-line);
    transform: translateY(-3px);
    box-shadow: var(--jr-shadow-sm);
}

.jr-adjacent span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jr-accent);
    margin-bottom: 10px;
}

.jr-adjacent strong {
    display: block;
    font-family: var(--px-font-title, sans-serif);
    font-size: 17px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--jr-ink);
}

.jr-adjacent .jr-adjacent--next {
    text-align: right;
}

/* Comments wrapper reused from the theme, just re-spaced. */
.jr-article-comments {
    max-width: 760px;
    margin: 60px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--jr-line);
}

.jr-article-layout--sidebar .jr-article-comments {
    margin-left: 0;
    margin-right: 0;
}

/* Related posts */

.jr-related-posts {
    padding: 64px 0 70px;
    background: var(--jr-cream);
}

.jr-related-posts .jr-section-head {
    margin-bottom: 34px;
}

.jr-related-posts__titles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 1000px;
    margin-inline: auto;
}

.jr-related-posts__titles a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 112px;
    padding: 26px 30px;
    border: 1px solid var(--jr-line-soft);
    border-radius: var(--jr-radius-lg);
    background: #fff;
    color: var(--jr-ink);
    font-family: var(--px-font-title, sans-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
    box-shadow: var(--jr-shadow-sm);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.jr-related-posts__titles a:only-child {
    grid-column: 1 / -1;
    width: min(100%, 680px);
    justify-self: center;
}

.jr-related-posts__titles a:hover,
.jr-related-posts__titles a:focus {
    border-color: var(--jr-accent);
    color: var(--jr-ink);
    transform: translateY(-3px);
    box-shadow: var(--jr-shadow);
}

.jr-related-posts__titles i {
    flex: 0 0 auto;
    color: var(--jr-accent);
}

/* Page-builder pages keep their own full-bleed layout. */

.jr-article--builder .jr-article-main,
.jr-article--builder .jr-article-main--noimage {
    padding: 0;
}

.jr-builder-shell,
.jr-builder-body {
    width: 100%;
}

.jr-elementor-content,
.jr-elementor-content > .elementor {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.jr-svc--builder,
.jr-article--builder {
    width: 100%;
    overflow: clip;
    background: #fff;
}

/*
 * The theme's registered sidebars wrap each widget in a Bootstrap column. Undo
 * that gutter so widgets sit flush inside the sticky rail.
 */
.jr-blog-aside > .col-md-12,
.jr-blog-aside [class*="col-md-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */

.jr-ig {
    padding: 88px 0 0;
    background: #fff;
}

.jr-ig__head {
    text-align: center;
    margin-bottom: 36px;
}

.jr-ig__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--jr-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.jr-ig__head h2 {
    margin: 0 0 12px;
    color: var(--jr-ink);
    font-size: clamp(32px, 4vw, 48px);
}

.jr-ig__head p {
    margin: 0;
    color: var(--jr-muted);
}

.jr-ig__profile {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto 46px;
    padding: clamp(30px, 4vw, 52px);
    border: 1px solid var(--jr-line-soft);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(20, 16, 15, 0.08);
}

.jr-ig__avatar {
    display: block;
    width: 180px;
    height: 180px;
    padding: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 78%, #4f5bd5);
    text-decoration: none;
}

.jr-ig__avatar > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 3px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: inherit;
    background: #fff;
    color: var(--jr-ink);
    font-size: 50px;
}

.jr-ig__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.jr-ig__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
}

.jr-ig__username {
    color: var(--jr-ink);
    font-size: 29px;
    font-weight: 700;
    text-decoration: none;
}

.jr-ig__actions {
    display: flex;
    gap: 9px;
}

.jr-ig__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.jr-ig__follow {
    background: #0095f6;
    color: #fff;
}

.jr-ig__follow:hover,
.jr-ig__follow:focus {
    background: #1877f2;
    color: #fff;
}

.jr-ig__message {
    background: #efefef;
    color: var(--jr-ink);
}

.jr-ig__message:hover,
.jr-ig__message:focus {
    background: #dbdbdb;
    color: var(--jr-ink);
}

.jr-ig__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 22px;
    padding: 0;
    list-style: none;
    color: var(--jr-ink);
}

.jr-ig__stats li {
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--jr-line-soft);
    border-radius: 999px;
    background: #fff;
}

.jr-ig__stats strong {
    font-weight: 700;
}

.jr-ig__bio {
    color: var(--jr-ink);
    line-height: 1.55;
}

.jr-ig__bio strong,
.jr-ig__bio span {
    display: block;
}

.jr-ig__bio span {
    color: var(--jr-muted);
}

.jr-ig__bio p {
    margin: 5px 0 0;
    color: inherit;
}

.jr-ig__tabs {
    display: flex;
    justify-content: center;
    gap: 64px;
    max-width: 1040px;
    margin-inline: auto;
    border-top: 1px solid var(--jr-line);
}

.jr-ig__tabs span,
.jr-ig__tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: -1px;
    padding: 18px 8px 16px;
    border-top: 1px solid transparent;
    color: var(--jr-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.jr-ig__tabs .is-active {
    border-top-color: var(--jr-ink);
    color: var(--jr-ink);
}

.jr-ig__handle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--jr-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.jr-ig__handle:hover {
    color: var(--jr-accent);
}

.jr-ig__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    max-width: 1040px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
}

.jr-ig__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jr-ig__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jr-ig__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    background: var(--jr-cream-deep);
    text-decoration: none;
}

.jr-ig__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.jr-ig__item:hover img {
    transform: scale(1.08);
}

.jr-ig__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(20, 16, 15, 0.55);
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.jr-ig__item:hover .jr-ig__overlay {
    opacity: 1;
}

.jr-ig__overlay i {
    font-size: 22px;
}

.jr-ig__overlay span {
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jr-ig__foot {
    margin-top: 34px;
    text-align: center;
}

.jr-ig__notice {
    max-width: 1040px;
    margin: 0 auto 18px;
    padding: 10px 14px;
    border: 1px dashed var(--jr-accent);
    border-radius: var(--jr-radius);
    background: var(--jr-accent-soft);
    font-size: 12px;
    color: var(--jr-ink);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
    .jr-svc-main__grid,
    .jr-blog-layout--sidebar,
    .jr-article-layout--sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .jr-svc-aside,
    .jr-blog-aside {
        position: static;
    }

    .jr-svc-aside {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .jr-article-layout--sidebar .jr-article-body,
    .jr-article-layout--sidebar .jr-article-foot,
    .jr-article-layout--sidebar .jr-author,
    .jr-article-layout--sidebar .jr-adjacent,
    .jr-article-layout--sidebar .jr-article-comments {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991px) {
    .jr-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jr-svc-hero__grid {
        grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"service-copy"
			"service-media"
			"service-booking";
        gap: 44px;
        padding-bottom: 64px;
    }

	.jr-svc-hero__text,
	.jr-svc-hero__booking {
		align-self: auto;
	}

    .jr-svc-hero__media::after {
        display: none;
    }

    .jr-svc-hero__media img {
        max-height: 460px;
        border-radius: var(--jr-radius-lg);
    }

    .jr-blog-lead {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-blog-lead__media {
        min-height: 280px;
    }

    .jr-blog-lead__body {
        padding: 36px 32px 40px;
    }

    .jr-article-hero__media {
        margin-bottom: -70px;
    }

    .jr-article-main {
        padding-top: 110px;
    }

    .jr-ig__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .jr-shell {
        padding-inline: 18px;
    }

    .jr-svc-main,
    .jr-faq,
    .jr-related,
    .jr-related-posts {
        padding: 60px 0;
    }

    .jr-related > .jr-shell {
        padding-inline: 18px;
    }

    .jr-blog-layout {
        padding: 50px 0 70px;
    }

    .jr-ig {
        padding-top: 54px;
    }

    .jr-ig__profile {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .jr-ig__avatar {
        width: 92px;
        height: 92px;
        padding: 3px;
    }

    .jr-ig__avatar > span {
        padding: 9px;
        border-width: 2px;
        font-size: 28px;
    }

    .jr-ig__username {
        font-size: 20px;
    }

    .jr-ig__identity {
        gap: 12px;
    }

    .jr-ig__actions {
        width: 100%;
    }

    .jr-ig__actions a {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 12px;
    }

    .jr-ig__stats {
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: 8px;
        margin: 18px 0 16px;
        padding-top: 16px;
        border-top: 1px solid var(--jr-line);
        font-size: 13px;
    }

    .jr-ig__bio {
        grid-column: 1 / -1;
        font-size: 14px;
    }

    .jr-ig__profile-main {
        display: contents;
    }

    .jr-svc-hero__meta {
        gap: 18px 20px;
    }

    .jr-svc-hero__meta li {
        padding-left: 16px;
    }

    /* Keep each label on one line in a narrow column. */
    .jr-svc-hero__meta span {
        font-size: 11px;
        letter-spacing: 0.08em;
    }

    .jr-svc-body ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-svc-body h2 {
        margin-top: 46px;
    }

    .jr-svc-band,
    .jr-cta {
        padding: 62px 0;
    }

    .jr-faq__a-inner {
        padding-right: 10px;
    }

    .jr-article-body,
    .jr-article-body p {
        font-size: 17px;
    }

    .jr-article-body .jr-article-section-title {
        margin-top: 38px;
        padding: 19px 18px 19px 21px;
    }

    .jr-article-body .jr-article-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-related-posts__titles {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-related-posts__titles a {
        min-height: 0;
        padding: 22px;
        font-size: 17px;
    }

    .jr-article-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .jr-author {
        flex-direction: column;
        text-align: center;
    }

    .jr-adjacent .jr-adjacent--next {
        text-align: left;
    }

    .jr-ig__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

/* Final mobile hardening across custom service, blog and Instagram layouts. */
@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .jr-shell,
    .jr-svc,
    .jr-article,
    .jr-blog,
    .jr-ig {
        min-width: 0;
    }

    .jr-svc img,
    .jr-article img,
    .jr-blog img,
    .jr-ig img {
        max-width: 100%;
        height: auto;
    }

    .jr-svc-hero {
        padding-top: 22px;
    }

    .jr-svc-hero__grid {
        gap: 30px;
        padding-bottom: 46px;
    }

    .jr-svc-hero h1 {
        font-size: clamp(40px, 13vw, 58px);
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .jr-svc-hero__actions,
    .jr-cta__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .jr-svc-hero__actions .jr-btn,
    .jr-cta__actions .jr-btn {
        width: 100%;
        justify-content: center;
    }

    .jr-svc-hero__meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .jr-svc-hero__meta li {
        min-width: 0;
        padding: 14px;
    }

    .jr-svc-hero__meta strong {
        overflow-wrap: anywhere;
    }

    .jr-svc-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-svc-card,
    .jr-rail-card {
        padding: 24px 20px;
    }

    .jr-svc-facts li,
    .jr-rail-list a {
        gap: 16px;
    }

    .jr-svc-facts strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .jr-blog-grid,
    .jr-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-blog-lead__body {
        padding: 28px 22px 32px;
    }

    .jr-blog-card__body {
        padding-inline: 20px;
    }

    .jr-article-hero__inner,
    .jr-article-body,
    .jr-article-content {
        min-width: 0;
    }

    .jr-article-hero__excerpt,
    .jr-article-body,
    .jr-article-body p,
    .jr-related-posts__titles a {
        overflow-wrap: anywhere;
    }

    .jr-article-foot,
    .jr-share {
        width: 100%;
    }

    .jr-share {
        flex-wrap: wrap;
    }

    .jr-article-contact__links {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-article-contact__links a {
        width: 100%;
        justify-content: center;
        padding-inline: 14px;
        overflow-wrap: anywhere;
    }

    .home .jr-ig__actions {
        justify-content: center;
    }

    .home .jr-ig__actions a {
        flex: 1 1 120px;
    }

    .home .jr-ig__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .home .jr-ig__stats li {
        padding: 0 8px;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .jr-shell {
        padding-inline: 15px;
    }

    .jr-svc-hero__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-svc-hero__meta li {
        border-left: 0;
        border-bottom: 1px solid var(--jr-line);
    }

    .home .jr-ig__profile {
        padding-inline: 18px;
    }

    .home .jr-ig__stats strong {
        display: block;
        margin: 0;
    }
}

/* Final service-page mobile layout --------------------------------------- */
@media (max-width: 767px) {
    .single-service .jr-svc-hero {
        padding-top: 18px;
    }

    .single-service .jr-crumbs {
        flex-wrap: wrap;
        gap: 6px 0;
        margin-bottom: 30px;
        font-size: 12px;
        line-height: 1.45;
    }

    .single-service .jr-svc-hero__grid {
        gap: 32px;
        padding-bottom: 48px;
    }

    .single-service .jr-svc-hero__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 16px;
        font-size: 17px;
    }

    .single-service .jr-svc-hero__title,
    .single-service .jr-svc-hero h1 {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: clamp(36px, 11vw, 48px);
        line-height: 1.04;
        letter-spacing: -0.025em;
    }

    .single-service .jr-svc-hero__subtitle {
        margin-bottom: 26px;
        font-size: 16px;
        line-height: 1.65;
    }

    .single-service .jr-svc-hero__actions {
        gap: 10px;
        margin-bottom: 26px;
    }

    .single-service .jr-btn {
        min-height: 52px;
        padding: 14px 18px;
        white-space: normal;
        text-align: center;
    }

    .single-service .jr-svc-hero__meta {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 12px;
    }

    .single-service .jr-svc-hero__meta li,
    .single-service .jr-svc-hero__meta li:first-child {
        padding: 14px 0;
        border-left: 0;
        border-bottom: 1px solid var(--jr-line-soft);
    }

    .single-service .jr-svc-hero__meta li:last-child {
        border-bottom: 0;
    }

    .single-service .jr-svc-hero__media {
        width: 100%;
    }

    .single-service .jr-svc-hero__media img {
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: 50% 18%;
        border-radius: 180px 180px 18px 18px;
    }

    .single-service .jr-svc-main {
        padding: 54px 0 60px;
    }

    .single-service .jr-svc-main__grid {
        gap: 46px;
    }

    .single-service .jr-svc-body,
    .single-service .jr-svc-body p {
        font-size: 16px;
        line-height: 1.75;
    }

    .single-service .jr-svc-body p:first-of-type {
        font-size: inherit;
        line-height: inherit;
    }

    .single-service .jr-svc-body h2 {
        margin: 44px 0 20px;
        padding-top: 22px;
        font-size: clamp(27px, 8vw, 34px);
        overflow-wrap: anywhere;
    }

    .single-service .jr-svc-body h3 {
        margin-top: 32px;
        font-size: 21px;
    }

    .single-service .jr-svc-body ul {
        gap: 12px;
    }

    .single-service .jr-svc-body ul li {
        padding: 18px 18px 18px 46px;
        font-size: 15px;
    }

    .single-service .jr-svc-body ul li::before {
        left: 20px;
        top: 24px;
    }

    .single-service .jr-svc-body ol li {
        padding-left: 42px;
        font-size: 16px;
    }

    .single-service .jr-svc-body blockquote {
        margin: 28px 0;
        padding: 24px 20px;
        font-size: 17px;
    }

    .single-service .jr-svc-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }

    .single-service .jr-svc-body table th,
    .single-service .jr-svc-body table td {
        min-width: 130px;
        padding: 11px 13px;
    }

    .single-service .jr-svc-aside {
        gap: 16px;
    }

    .single-service .jr-svc-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .single-service .jr-svc-facts li {
        align-items: flex-start;
        font-size: 14px;
    }

    .single-service .jr-svc-facts strong {
        max-width: 62%;
        text-align: right;
    }

    .single-service .jr-faq .jr-section-head h2,
    .single-service .jr-related .jr-section-head h2,
    .single-service .jr-cta h2 {
        font-size: clamp(31px, 9vw, 42px);
        line-height: 1.08;
    }

    .single-service .jr-faq__q {
        gap: 16px;
        padding: 20px 18px;
        font-size: 17px;
        line-height: 1.4;
        text-align: left;
    }

    .single-service .jr-faq__a-inner {
        padding: 0 18px 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    .single-service .jr-related-carousel--services .jr-related-card {
        flex-basis: 88%;
    }

    .single-service .jr-related-carousel--services .jr-related-card__media {
        aspect-ratio: 4 / 3;
    }

    .single-service .jr-related-carousel--services .jr-related-carousel__controls {
        justify-content: flex-start;
    }

    .single-service .jr-related-carousel__controls button {
        width: 42px;
        height: 42px;
    }

    .single-service .jr-cta {
        padding: 58px 0;
    }

    .single-service .jr-cta__inner {
        max-width: 100%;
    }

    .single-service .jr-cta p {
        font-size: 16px;
        line-height: 1.7;
    }
}

@media (max-width: 380px) {
    .single-service .jr-shell {
        padding-inline: 14px;
    }

    .single-service .jr-svc-hero__title,
    .single-service .jr-svc-hero h1 {
        font-size: 34px;
    }

    .single-service .jr-related-carousel--services .jr-related-card {
        flex-basis: 92%;
    }
}

/* Editorial SVG icons for editable service bullet cards. The icon changes by
   position, so editors can add plain list items without writing any markup. */
.single-service .jr-svc-body ul li {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7.5h3l1.4-2h7.2l1.4 2h3v11H4zM12 10a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    padding-left: 68px;
}

.single-service .jr-svc-body ul li:nth-child(5n + 2) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.5 4.5 5 5M13 6l5 5M4 20c3.2-.2 5.2-1 6.3-2.4 1.2-1.5.4-3.1 1.5-4.2L17 8.2 15.8 7l-5.2 5.2c-1.1 1.1-2.7.3-4.2 1.5C5 14.8 4.2 16.8 4 20z' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul li:nth-child(5n + 3) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul li:nth-child(5n + 4) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 8 4-8 4-8-4zM4 12l8 4 8-4M4 17l8 4 8-4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul li:nth-child(5n) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8c.6 4.8 2.4 6.6 7.2 7.2-4.8.6-6.6 2.4-7.2 7.2-.6-4.8-2.4-6.6-7.2-7.2 4.8-.6 6.6-2.4 7.2-7.2zM19 16.5c.2 1.8.9 2.5 2.7 2.7-1.8.2-2.5.9-2.7 2.7-.2-1.8-.9-2.5-2.7-2.7 1.8-.2 2.5-.9 2.7-2.7z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The second editable list is normally the "Perfect For" section. Give it a
   separate semantic icon family instead of restarting the feature icons. */
.single-service .jr-svc-body ul:nth-of-type(2) li:nth-child(5n + 1) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 13 11-5v8L4 13zm11-3 4-2v8l-4-2M6 14l1.5 5h3L9 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul:nth-of-type(2) li:nth-child(5n + 2) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-1 12H6L5 8zm4 1V6a3 3 0 0 1 6 0v3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul:nth-of-type(2) li:nth-child(5n + 3) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='13' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M9 21h6M12 18v3M8 9l6 3-6 3z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul:nth-of-type(2) li:nth-child(5n + 4) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A3.5 3.5 0 0 1 7.5 2H12v18H7.5A3.5 3.5 0 0 0 4 23V5.5zM20 5.5A3.5 3.5 0 0 0 16.5 2H12v18h4.5A3.5 3.5 0 0 1 20 23V5.5z' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul:nth-of-type(2) li:nth-child(5n) {
    --jr-list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 4-5h10l4 5-9 11L3 9zm0 0h18M7 4l2 5 3-5 3 5 2-5M9 9l3 11 3-11' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.single-service .jr-svc-body ul li::before {
    left: 22px;
    top: 22px;
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: var(--jr-accent);
    box-shadow: none;
    -webkit-mask: var(--jr-list-icon) center / contain no-repeat;
    mask: var(--jr-list-icon) center / contain no-repeat;
}

@media (max-width: 767px) {
    .single-service .jr-svc-hero__desktop-booking {
        display: none;
    }

    .single-service .jr-svc-hero__mobile-booking {
        display: block;
        grid-column: 1 / -1;
        width: 100%;
        margin-top: -8px;
    }

    .single-service .jr-svc-hero__mobile-booking .jr-svc-hero__actions {
        margin-bottom: 22px;
    }

    .single-service .jr-svc-hero__mobile-booking .jr-svc-hero__meta {
        margin-top: 0;
    }

    .single-service .jr-svc-body ul li {
        min-height: 86px;
        padding: 20px 18px 20px 62px;
    }

    .single-service .jr-svc-body ul li::before {
        left: 20px;
        top: 22px;
        width: 25px;
        height: 25px;
    }
}

/* Other services carousel ------------------------------------------------ */
.jr-related-carousel--services {
    max-width: none;
}

.jr-related-carousel--services .jr-related-carousel__controls {
    margin-top: -58px;
    margin-bottom: 22px;
}

.jr-related-carousel--services .jr-related-carousel__track {
    gap: clamp(22px, 2.2vw, 34px);
}

.jr-related-carousel--services .jr-related-card {
    flex: 0 0 calc((100% - (2 * clamp(22px, 2.2vw, 34px))) / 3);
    border-radius: var(--jr-radius-lg);
    box-shadow: none;
}

.jr-related-carousel--services .jr-related-card:hover {
    box-shadow: var(--jr-shadow);
}

.jr-related-carousel--services .jr-related-card__media {
    aspect-ratio: 4 / 3;
}

.jr-related-carousel--services .jr-related-card__media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}

.jr-related-carousel--services .jr-related-card__body {
    padding: 26px 28px 28px;
}

.jr-related-carousel--services .jr-related-card__body h3 {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.35;
}

@media (max-width: 991px) {
    .jr-related-carousel--services .jr-related-card {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 767px) {
    .jr-related-carousel--services .jr-related-carousel__controls {
        margin: 0 0 16px;
    }

    .jr-related-carousel--services .jr-related-card {
        flex-basis: 86%;
    }

    .jr-related-carousel--services .jr-related-card__body {
        padding: 22px 20px 24px;
    }
}

/* Related-article image carousel. */
.jr-related-carousel {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
}

.jr-related-carousel__controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 18px;
}

.jr-related-carousel__controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--jr-line);
    border-radius: 50%;
    background: #fff;
    color: var(--jr-ink);
    transition: background .25s ease, color .25s ease, opacity .25s ease;
}

.jr-related-carousel__controls button:hover:not(:disabled) {
    border-color: var(--jr-ink);
    background: var(--jr-ink);
    color: #fff;
}

.jr-related-carousel__controls button:disabled {
    opacity: .32;
    cursor: default;
}

.jr-related-carousel__viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.jr-related-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.jr-related-carousel__track {
    display: flex;
    gap: 18px;
}

.jr-related-card {
    flex: 0 0 calc((100% - 18px) / 2);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--jr-line-soft);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--jr-shadow-sm);
    scroll-snap-align: start;
}

.jr-related-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--jr-cream-deep);
}

.jr-related-card__media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center 20%;
    transition: transform .6s ease;
}

.jr-related-card:hover .jr-related-card__media img {
    transform: none;
}

.jr-related-card__body {
    padding: 26px 28px 28px;
}

.jr-related-card__body .jr-eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
}

.jr-related-card__body h3 {
    margin: 0 0 12px;
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.25;
}

.jr-related-card__body h3 a {
    color: var(--jr-ink);
    text-decoration: none;
}

.jr-related-card__body p {
    margin: 0 0 20px;
    color: var(--jr-muted);
    font-size: 15px;
    line-height: 1.65;
}

@media (max-width: 767px) {
    .jr-svc-main__grid--full-copy .jr-svc-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-svc-main__grid--full-copy .jr-svc-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The related carousel follows the article, so a second list of many of
       the same posts in the mobile rail is unnecessary repetition. */
    .single-post .jr-blog-aside .jr-rail-card--recent {
        display: none;
    }

    .jr-related-posts .jr-section-head {
        margin-bottom: 24px;
    }

    .jr-related-carousel__controls {
        margin-bottom: 14px;
    }

    .jr-related-card {
        flex-basis: 86%;
    }

    .jr-related-card__body {
        padding: 22px 20px 24px;
    }
}

/* Premium Instagram showcase — profile credibility plus an editorial gallery. */
.home .testimonials .jr-google-review {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 14px;
    max-width: 510px;
    margin-top: 34px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.home .testimonials .jr-google-review:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .58);
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.jr-google-review__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: #4285f4;
    font: 700 25px/1 Arial, sans-serif;
}

.jr-google-review__copy { display: grid; gap: 3px; min-width: 0; }
.jr-google-review__copy strong { color: #fff; font-size: 16px; line-height: 1.25; }
.jr-google-review__copy > span { color: rgba(255,255,255,.74); font-size: 12px; letter-spacing: .04em; }
.jr-google-review__stars { color: #fbbc04; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.jr-google-review__arrow { color: #fff; font-size: 20px; }

@media (max-width: 575px) {
    .home .testimonials .jr-google-review {
        grid-template-columns: 44px minmax(0, 1fr) 22px;
        gap: 12px;
        padding: 14px;
    }
    .jr-google-review__mark { width: 44px; height: 44px; }
    .jr-google-review__stars { grid-column: 2 / 4; margin-top: -4px; }
}

.home .jr-greviews {
    padding: 96px 0;
    background: #fff;
    color: var(--jr-ink);
}

.jr-greviews__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 32px;
}

.jr-greviews__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--jr-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.jr-greviews__head h2 {
    margin: 0 0 12px;
    font-size: clamp(38px, 5vw, 62px);
    letter-spacing: -.045em;
    line-height: 1;
}

.jr-greviews__head p { margin: 0; color: var(--jr-muted); font-size: 16px; }

.jr-greviews__score {
    display: grid;
    grid-template-columns: 44px auto auto;
    align-items: center;
    gap: 14px;
    min-width: 310px;
    padding: 18px 22px;
    border: 1px solid var(--jr-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--jr-shadow-sm);
}

.jr-greviews__g,
.jr-greview-card__google {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--jr-line);
    color: #4285f4;
    font: 700 23px/1 Arial, sans-serif;
}

.jr-greviews__score > strong { font-size: 38px; line-height: 1; }
.jr-greviews__score > span { display: grid; gap: 3px; }
.jr-greviews__score b { color: #fbbc04; font-style: normal; letter-spacing: 2px; }
.jr-greviews__score i { display: none; }
.jr-greviews__score small { color: var(--jr-muted); font-size: 12px; }

.jr-greviews__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
}

.jr-greviews__tabs button {
    min-height: 42px;
    padding: 9px 18px;
    border: 1px solid var(--jr-line);
    border-radius: 999px;
    background: #fff;
    color: var(--jr-ink-soft);
    font-size: 14px;
    cursor: pointer;
}

.jr-greviews__tabs button:hover,
.jr-greviews__tabs button.is-active {
    border-color: var(--jr-ink);
    background: var(--jr-ink);
    color: #fff;
}

.jr-greviews__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .58fr);
    gap: 24px;
    align-items: start;
}

.jr-greviews__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.jr-greview-card,
.jr-greviews__cta {
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid var(--jr-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--jr-shadow-sm);
}

.jr-greview-card[hidden] { display: none; }

.jr-greview-card__top {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 14px;
}

.jr-greview-card__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cf5362, #7b2834);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.jr-greview-card__top h3 { margin: 0 0 3px; font-size: 18px; }
.jr-greview-card__top p { margin: 0; color: var(--jr-muted); font-size: 12px; }
.jr-greview-card__meta { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.jr-greview-card__meta span { color: #fbbc04; letter-spacing: 2px; }
.jr-greview-card__meta span i { color: #c7c9ce; font-style: normal; }
.jr-greview-card__meta time { color: var(--jr-muted); font-size: 13px; }
.jr-greview-card blockquote { margin: 0 0 24px; padding: 0; border: 0; color: var(--jr-ink-soft); font-size: clamp(18px, 2vw, 23px); line-height: 1.65; }
.jr-greview-card__verified { color: var(--jr-muted); font-size: 12px; }
.jr-greview-card__verified i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: #4285f4; color: #fff; font-style: normal; }

.jr-greviews__cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--jr-ink); color: #fff; }
.jr-greviews__cta .jr-greviews__g { margin-bottom: 26px; }
.jr-greviews__cta h3 { margin: 0 0 12px; color: #fff; font-size: 27px; }
.jr-greviews__cta p { margin: 0 0 28px; color: rgba(255,255,255,.68); line-height: 1.7; }
.jr-greviews__cta a { display: inline-flex; gap: 10px; align-items: center; padding: 13px 18px; border-radius: 999px; background: #fff; color: var(--jr-ink); text-decoration: none; font-weight: 700; }

@media (max-width: 767px) {
    .home .jr-greviews { padding: 68px 0; }
    .jr-greviews__head { display: grid; gap: 24px; align-items: start; }
    .jr-greviews__score { min-width: 0; width: 100%; }
    .jr-greviews__grid { grid-template-columns: minmax(0, 1fr); }
    .jr-greviews__cards { grid-template-columns: minmax(0, 1fr); }
    .jr-greviews__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .jr-greviews__tabs button { flex: 0 0 auto; }
}

/* Google reviews are rendered by Trustindex; this shell keeps the plugin
   responsive while matching the site's editorial visual language. */
.home .jr-plugin-reviews {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 8vw, 112px) 0;
    background: #fff;
}

.home .jr-plugin-reviews::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1170px, calc(100% - 40px));
    height: 1px;
    background: var(--jr-line);
    content: "";
    transform: translateX(-50%);
}

.jr-plugin-reviews__head {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.jr-plugin-reviews__head > span {
    display: block;
    margin-bottom: 12px;
    color: var(--jr-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.jr-plugin-reviews__head h2 {
    margin: 0 0 14px;
    color: var(--jr-ink);
    font-size: clamp(38px, 5vw, 62px);
    letter-spacing: -.045em;
    line-height: 1;
}

.jr-plugin-reviews__head p {
    margin: 0;
    color: var(--jr-muted);
    font-size: 16px;
    line-height: 1.7;
}

.jr-plugin-reviews__widget {
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--jr-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(36, 24, 22, .09);
}

.jr-plugin-reviews__widget .ti-widget.ti-goog {
    margin: 0 !important;
}

.jr-plugin-reviews__widget .ti-widget.ti-goog .ti-widget-container {
    margin-bottom: 0;
}

.jr-plugin-reviews__widget .ti-widget.ti-goog .ti-review-item > .ti-inner {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(36, 24, 22, .07) !important;
}

.jr-plugin-reviews__widget .ti-widget.ti-goog .ti-widget-header {
    border-color: #ece4df !important;
    border-radius: 14px !important;
    background: #fff !important;
}

@media (max-width: 575px) {
    .home .jr-plugin-reviews { padding: 64px 0; }
    .jr-plugin-reviews__head { margin-bottom: 28px; }
    .jr-plugin-reviews__widget { padding: 12px; border-radius: 18px; }
}

.home .jr-ig {
    padding: 100px 0;
    background: #fff;
}

.home .jr-ig__head {
    max-width: 720px;
    margin: 0 auto 44px;
}

.home .jr-ig__head h2 {
    margin-bottom: 16px;
    font-size: clamp(38px, 4.6vw, 58px);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.home .jr-ig__head p {
    max-width: 560px;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.7;
}

.home .jr-ig__profile {
    position: relative;
    grid-template-columns: 164px minmax(0, 1fr);
    gap: 42px;
    max-width: 1120px;
    margin-bottom: 30px;
    padding: 42px 48px;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: #151211;
    box-shadow: 0 28px 70px rgba(20, 16, 15, .14);
}

.home .jr-ig__profile::after {
    content: "";
    position: absolute;
    top: -130px;
    right: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,73,83,.25), transparent 68%);
    pointer-events: none;
}

.home .jr-ig__avatar {
    position: relative;
    z-index: 1;
    width: 154px;
    height: 154px;
    padding: 3px;
}

.home .jr-ig__avatar > span {
    border-width: 3px;
}

.home .jr-ig__profile-main {
    position: relative;
    z-index: 1;
}

.home .jr-ig__identity {
    gap: 14px 22px;
}

.home .jr-ig__username {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.home .jr-ig__actions a {
    min-width: 112px;
    padding: 12px 21px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home .jr-ig__follow {
    border-color: #fff !important;
    background: #fff;
    color: #151211;
}

.home .jr-ig__message {
    background: transparent;
    color: #fff;
}

.home .jr-ig__follow:hover,
.home .jr-ig__message:hover {
    border-color: var(--jr-accent) !important;
    background: var(--jr-accent);
    color: #fff;
}

.home .jr-ig__stats {
    gap: 0;
    margin: 24px 0 20px;
    color: #fff;
}

.home .jr-ig__stats li {
    padding: 0 26px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.16);
    border-radius: 0;
    background: transparent;
    color: rgba(255,255,255,.7);
    font-size: 13px;
}

.home .jr-ig__stats li:first-child {
    padding-left: 0;
}

.home .jr-ig__stats li:last-child {
    border-right: 0;
}

.home .jr-ig__stats strong {
    margin-right: 3px;
    color: #fff;
    font-size: 17px;
}

.home .jr-ig__bio,
.home .jr-ig__bio p {
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.65;
}

.home .jr-ig__bio strong {
    color: #fff;
    font-size: 16px;
}

.home .jr-ig__bio span {
    color: rgba(255,255,255,.48);
}

.home .jr-ig__tabs {
    max-width: 1120px;
    gap: 54px;
}

.home .jr-ig__grid,
.home .jr-ig__grid--3,
.home .jr-ig__grid--4,
.home .jr-ig__grid--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 1120px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

.home .jr-ig__item {
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(20,16,15,.08);
}

.home .jr-ig__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: inherit;
    pointer-events: none;
}

.home .jr-ig__notice {
    max-width: 1120px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #7b3e43;
    font-size: 12px;
}

.home .jr-ig__foot {
    margin-top: 40px;
}

@media (max-width: 767px) {
    .home .jr-ig {
        padding: 70px 0;
    }

    .home .jr-ig__head {
        margin-bottom: 30px;
    }

    .home .jr-ig__profile {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 30px 24px;
        text-align: center;
    }

    .home .jr-ig__avatar {
        width: 126px;
        height: 126px;
        margin-inline: auto;
    }

    .home .jr-ig__identity,
    .home .jr-ig__stats {
        justify-content: center;
    }

    .home .jr-ig__bio {
        text-align: center;
    }

    .home .jr-ig__stats li {
        padding-inline: 13px;
    }

    .home .jr-ig__grid,
    .home .jr-ig__grid--3,
    .home .jr-ig__grid--4,
    .home .jr-ig__grid--6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

.single-post .jr-article-contact {
    margin: 48px 0 12px;
    padding: clamp(26px, 4vw, 42px);
    border-radius: 14px;
    background: var(--jr-ink);
    color: #fff;
}

.single-post .jr-article-contact h2 {
    margin: 8px 0 24px;
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.18;
}

.single-post .jr-article-contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.single-post .jr-article-contact__links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
}

.single-post .jr-article-contact__links a:hover {
    border-color: #fff;
    background: #fff;
    color: var(--jr-ink);
}

/* Final editorial typography: restrained, spacious and consistent. */
.single-post .jr-article-body {
    font-family: "Didact Gothic", sans-serif;
    font-size: 16.5px;
    line-height: 1.78;
    color: #504946;
}

.single-post .jr-article-body p {
    max-width: 72ch;
    margin-bottom: 20px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.single-post .jr-article-body > p:first-of-type {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.single-post .jr-article-body > h2,
.single-post .jr-article-body > h2.jr-article-section-title {
    position: relative;
    margin: 58px 0 24px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid #ded5cf;
    border-radius: 0;
    background: transparent;
    font-family: var(--px-font-title, "Syne", sans-serif);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.18;
}

.single-post .jr-article-body > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 2px;
    background: var(--jr-accent);
}

.single-post .jr-article-body > h2 strong {
    font-weight: inherit;
}

.single-post .jr-article-body > p:has(+ ul) {
    margin: 0 0 18px;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.single-post .jr-article-body > ul {
    gap: 0 34px;
    margin: 8px 0 30px;
    border-top: 1px solid var(--jr-line-soft);
}

.single-post .jr-article-body > ul > li,
.single-post .jr-article-body .jr-article-points li {
    min-height: 56px;
    padding: 15px 10px 15px 28px;
    border: 0;
    border-bottom: 1px solid var(--jr-line-soft);
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.55;
}

.single-post .jr-article-body > ul > li::before,
.single-post .jr-article-body .jr-article-points li::before {
    left: 4px;
    width: 7px;
    height: 7px;
    background: var(--jr-accent);
    box-shadow: 0 0 0 4px var(--jr-accent-soft);
}

.single-post .jr-article-body > ul > li > p {
    max-width: none;
    font: inherit;
}

@media (max-width: 767px) {
    .single-post .jr-article-body {
        font-size: 16px;
        line-height: 1.72;
    }

    .single-post .jr-article-body > p:first-of-type {
        font-size: inherit;
    }

    .single-post .jr-article-body > h2,
    .single-post .jr-article-body > h2.jr-article-section-title {
        margin-top: 44px;
        padding: 0 0 15px;
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .jr-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jr-btn,
    .jr-card,
    .jr-blog-card,
    .jr-card__media img,
    .jr-blog-card__media img,
    .jr-ig__item img,
    .jr-svc-body ul li,
    .jr-page-body ul li,
    .jr-adjacent a {
        transition: none;
    }

    .jr-btn:hover,
    .jr-card:hover,
    .jr-blog-card:hover,
    .jr-adjacent a:hover,
    .jr-svc-body ul li:hover,
    .jr-page-body ul li:hover {
        transform: none;
    }
}

/* Premium, post-editable single article presentation. */
.single-post .jr-article-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 64px 0;
    background: var(--jr-article-hero-bg, #fff);
}

.single-post .jr-article-hero--cover {
    min-height: min(580px, 72vh);
    display: flex;
    align-items: flex-end;
    background: #17110f;
    padding: 110px 0 72px;
}

/*
 * The eyebrow and breadcrumb sit at the top of the cover, and on a pale
 * photograph — a cream wall, a light studio backdrop — .22 was not enough to
 * hold them. Darker at the top, same weight at the base.
 */
.single-post .jr-article-hero--cover::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: -2;
    background-image: var(--jr-article-bg-image);
    background-position: center var(--jr-article-bg-position, center);
    background-size: cover;
    filter: blur(16px);
    opacity: .62;
    transform: scale(1.04);
}

/*
 * Keep portrait featured images completely visible over a full-width ambient
 * backdrop instead of cropping most of the subject to fit a panoramic band.
 */
.single-post .jr-article-hero--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(90deg, rgba(13, 10, 10, .82) 0%, rgba(13, 10, 10, .58) 46%, rgba(13, 10, 10, .18) 72%, rgba(13, 10, 10, .28) 100%),
        var(--jr-article-bg-image);
    background-position: center, right center;
    background-repeat: no-repeat;
    background-size: cover, contain;
}

.single-post .jr-article-hero__inner {
    max-width: 920px;
}

.single-post .jr-article-hero--cover .jr-article-hero__inner {
    margin: 0;
    text-align: left;
}

.single-post .jr-article-hero__eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--jr-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.single-post .jr-article-hero h1 {
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.06;
    margin-bottom: 18px;
    text-wrap: balance;
}

.single-post .jr-article-hero--cover h1,
.single-post .jr-article-hero--cover .jr-article-hero__excerpt,
.single-post .jr-article-hero--cover .jr-post-meta,
.single-post .jr-article-hero--cover .jr-post-meta a,
.single-post .jr-article-hero--cover .jr-crumbs,
.single-post .jr-article-hero--cover .jr-crumbs a {
    color: #fff;
}

.single-post .jr-article-hero--cover .jr-crumbs,
.single-post .jr-article-hero--cover .jr-post-meta {
    justify-content: flex-start;
}

.single-post .jr-article-hero--cover .jr-dot {
    background: rgba(255,255,255,.65);
}

.single-post .jr-article-hero__excerpt {
    max-width: 760px;
    font-size: 18px;
    line-height: 1.65;
}

.single-post .jr-article-hero--cover .jr-article-hero__excerpt {
    color: rgba(255,255,255,.86);
}

.single-post .jr-article-hero--editorial {
    padding-bottom: 0;
}

.single-post .jr-article-hero__media {
    margin-top: 42px;
}

.single-post .jr-article-main,
.single-post .jr-article-main--noimage {
    padding: 76px 0 84px;
}

.single-post .jr-article-layout--sidebar {
    grid-template-columns: minmax(0, 820px) 300px;
    justify-content: space-between;
    gap: clamp(44px, 5vw, 76px);
}

.single-post .jr-article-body {
    max-width: 820px;
    font-size: 17px;
    line-height: 1.82;
}

/*
 * Release the 72ch measure set further up. Section headings and the bullet
 * grids already span the whole content column, so capping only the paragraphs
 * left the running text visibly short of every box beside it.
 */
.single-post .jr-article-body p {
    max-width: none;
    margin: 0 0 18px;
}

.single-post .jr-article-body .jr-article-section-title {
    margin: 48px 0 22px;
    padding: 0 0 16px;
    background: transparent;
    border-bottom: 1px solid var(--jr-line);
    border-left: 0;
    border-radius: 0;
    font-size: clamp(25px, 2.5vw, 36px);
    line-height: 1.18;
}

/* Consistent editorial sections for content entered in the normal Post editor. */
.single-post .jr-article-body > h2 {
    position: relative;
    margin: 48px 0 22px;
    padding: 22px 26px;
    border: 1px solid var(--jr-line-soft);
    border-left: 4px solid var(--jr-accent);
    border-radius: 0 12px 12px 0;
    background: #fff;
    font-size: clamp(26px, 2.7vw, 36px);
    line-height: 1.2;
}

.single-post .jr-article-body > h2 strong {
    font-weight: 700;
}

.single-post .jr-article-body > hr {
    display: none;
}

.single-post .jr-article-body > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 26px;
    padding: 0;
}

.single-post .jr-article-body > ul > li {
    display: flex;
    align-items: center;
    min-height: 54px;
    margin: 0;
    padding: 14px 16px 14px 42px;
    border: 1px solid var(--jr-line-soft);
    border-radius: 8px;
    background: #fff;
    line-height: 1.55;
}

.single-post .jr-article-body > ul > li::before {
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
}

.single-post .jr-article-body > ul > li > p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.single-post .jr-article-body > p + p,
.single-post .jr-article-body > ul + p {
    margin-top: 8px;
}

.single-post .jr-article-body .jr-article-points {
    gap: 10px;
    margin: 18px 0 30px;
}

.single-post .jr-article-body .jr-article-points li {
    min-height: 0;
    padding: 15px 18px 15px 46px;
}

.single-post .jr-article-comments,
.single-post .jr-article-comments #respond,
.single-post .jr-article-comments .comment-respond,
.single-post .jr-article-comments form {
    width: 100%;
    max-width: 820px;
}

.single-post .jr-article-comments .logged-in-as {
    display: none;
}

.single-post .jr-article-comments .col-md-6,
.single-post .jr-article-comments .col-md-12 {
    width: 100%;
    max-width: none;
    float: none;
}

.single-post .jr-article-comments input:not([type="submit"]),
.single-post .jr-article-comments textarea {
    width: 100%;
    border: 1px solid var(--jr-line);
    border-radius: 8px;
    background: #fff;
    padding: 14px 16px;
}

.single-post .jr-article-comments input[type="submit"] {
    width: auto;
    min-width: 190px;
    min-height: 50px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--jr-ink);
    color: #fff;
}

@media (max-width: 1199px) {
    .single-post .jr-article-layout--sidebar {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .single-post .jr-article-hero,
    .single-post .jr-article-hero--cover {
        min-height: 460px;
        padding: 76px 0 44px;
    }

    .single-post .jr-article-hero--editorial {
        min-height: 0;
        padding-bottom: 0;
    }

    .single-post .jr-article-hero h1 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .single-post .jr-article-hero--cover::after {
        background-image:
            linear-gradient(180deg, rgba(13, 10, 10, .38) 0%, rgba(13, 10, 10, .48) 42%, rgba(13, 10, 10, .9) 100%),
            var(--jr-article-bg-image);
        background-position: center, center top;
        background-size: cover, contain;
    }

    .single-post .jr-article-main,
    .single-post .jr-article-main--noimage {
        padding: 54px 0 64px;
    }

    .single-post .jr-article-body > ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-post .jr-article-body > h2 {
        padding: 18px 18px 18px 20px;
    }
}

@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .jr-shell {
        width: 100%;
        padding-inline: 18px;
    }

    .jr-svc-hero__actions,
    .jr-cta__actions,
    .jr-article-contact__links {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .jr-svc-hero__actions .jr-btn,
    .jr-cta__actions .jr-btn,
    .jr-article-contact__links a {
        width: 100%;
        justify-content: center;
    }

    .jr-svc-aside,
    .jr-blog-grid,
    .jr-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-svc-facts strong,
    .jr-article-body,
    .jr-article-body p,
    .jr-related-posts__titles a {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .home .jr-ig__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .home .jr-ig__stats li {
        padding-inline: 8px;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .jr-shell {
        padding-inline: 15px;
    }

    .jr-svc-hero__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .home .jr-ig__stats strong {
        display: block;
        margin-right: 0;
    }
}

/* ==========================================================================
   Landing page layout (`template-parts/page-layout.php`)
   --------------------------------------------------------------------------
   A page is not a service, so it does not borrow the service rules. This block
   is self-contained: change it and only the pages move.

   The shape follows the Elementor pages the rest of the site already uses —
   `/bridal-makeup-artist-in-delhi/` and its siblings: a picture beside the
   heading and the opening copy, centred section headings, full-width card
   grids, a dark statement band, an availability strip.
   ========================================================================== */

.jr-page-hero {
    padding: 46px 0 0;
    background: #fff;
}

.jr-page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 54px;
    align-items: center;
    padding-bottom: 64px;
}

/* No picture yet - a page published before its image is ready. Collapse to one
 * column so nothing stands empty beside the copy. */
.jr-page-hero--noimage .jr-page-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.jr-page-hero__media {
    margin: 0;
}

.jr-page-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    border-radius: var(--jr-radius-lg);
    box-shadow: var(--jr-shadow);
}

.jr-page-hero__title {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--jr-ink);
    margin: 0 0 20px;
}

.jr-page-hero__lead {
    font-size: 18px;
    line-height: 1.75;
    color: var(--jr-muted);
    margin: 0 0 30px;
    max-width: 52ch;
}

.jr-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.jr-page-hero__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px 26px;
    margin: 32px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--jr-line);
    list-style: none;
}

.jr-page-hero__meta li {
    padding-left: 22px;
    border-left: 1px solid var(--jr-line);
}

.jr-page-hero__meta li:first-child {
    padding-left: 0;
    border-left: 0;
}

.jr-page-hero__meta strong {
    display: block;
    font-family: var(--px-font-title, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--jr-ink);
}

.jr-page-hero__meta span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jr-muted);
}

/* Body -------------------------------------------------------------------- */

.jr-page-main {
    padding: 74px 0;
}

.jr-page-body {
    font-size: 17px;
    line-height: 1.85;
    color: var(--jr-ink-soft);
}

.jr-page-body > *:first-child {
    margin-top: 0;
}

.jr-page-body p {
    margin: 0 0 22px;
}

/* Centred, like the section headings on the Elementor pages. */
.jr-page-body h2 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.2;
    font-weight: 700;
    color: var(--jr-ink);
    text-align: center;
    margin: 64px 0 12px;
}

.jr-page-body > h2:first-child {
    margin-top: 0;
}

.jr-page-body h2 + p {
    text-align: center;
    max-width: 76ch;
    margin-inline: auto;
    margin-bottom: 30px;
    color: var(--jr-muted);
}

.jr-page-body h3 {
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(20px, 2.1vw, 26px);
    line-height: 1.3;
    font-weight: 700;
    color: var(--jr-ink);
    margin: 40px 0 14px;
}

/* Lists become the card grid the other pages use. Plain <ul> in the editor:
 * nothing here depends on markup an editor has to remember to type. */
.jr-page-body ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.jr-page-body ul li {
    margin: 0;
    padding: 20px 22px;
    border: 1px solid var(--jr-line);
    border-radius: var(--jr-radius-lg);
    background: #fff;
    box-shadow: var(--jr-shadow-sm);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--jr-ink);
}

.jr-page-body ol {
    margin: 0 0 30px;
    padding-left: 22px;
}

.jr-page-body ol li {
    margin-bottom: 10px;
}

/* Link colour and its hover live together in the Hover section at the foot of
 * this file — they have to be read as one rule, not two. */

.jr-page-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--jr-radius-lg);
    margin: 28px 0;
    box-shadow: var(--jr-shadow-sm);
}

.jr-page-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 16px;
}

.jr-page-body table th,
.jr-page-body table td {
    padding: 14px 18px;
    border: 1px solid var(--jr-line-soft);
    text-align: left;
}

.jr-page-body table th {
    background: var(--jr-cream);
    font-family: var(--px-font-title, sans-serif);
    color: var(--jr-ink);
}

/* Statement band + availability strip ------------------------------------- */

.jr-page-band {
    padding: 54px 0;
    background: var(--jr-ink);
}

.jr-page-band p {
    margin: 0;
    text-align: center;
    font-family: var(--px-font-title, sans-serif);
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.45;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
}

.jr-page-band strong {
    color: #fff;
    font-weight: 700;
}

.jr-page-note {
    padding: 26px 0;
    background: var(--jr-accent-soft);
}

.jr-page-note p {
    margin: 0;
    text-align: center;
    font-size: 15.5px;
    line-height: 1.7;
    font-style: italic;
    color: var(--jr-ink-soft);
}

.jr-page-note strong {
    font-style: normal;
    color: var(--jr-ink);
}

@media (max-width: 900px) {
    .jr-page-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding-bottom: 44px;
    }

    .jr-page-hero__media img {
        aspect-ratio: 4 / 3;
    }

    .jr-page-main {
        padding: 52px 0;
    }

    .jr-page-body h2 {
        margin-top: 44px;
    }

    .jr-page-body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 14px;
    }

    .jr-page-body table th,
    .jr-page-body table td {
        min-width: 130px;
        padding: 11px 13px;
    }
}

/* Closing band with the booking form (`jr-cta--form`). The band is dark, and
 * Contact Form 7 ships unstyled inputs, so they are given the same treatment as
 * the rest of the page rather than the browser default. */

.jr-cta--form .jr-cta__inner {
    max-width: 720px;
}

.jr-cta__form {
    margin: 30px 0 4px;
    text-align: left;
}

.jr-cta__form .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.jr-cta__form .col-md-12 {
    grid-column: 1 / -1;
}

.jr-cta__form .form-group {
    margin: 0;
}

.jr-cta__form input[type="text"],
.jr-cta__form input[type="email"],
.jr-cta__form input[type="tel"],
.jr-cta__form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--jr-radius);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
}

.jr-cta__form textarea {
    min-height: 110px;
    resize: vertical;
}

.jr-cta__form ::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.jr-cta__form input:focus,
.jr-cta__form textarea:focus {
    outline: 2px solid var(--jr-accent);
    outline-offset: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.jr-cta__form input[type="submit"] {
    width: auto;
    padding: 14px 32px;
    border: 0;
    border-radius: 500px;
    background: #fff;
    color: var(--jr-ink);
    font-family: var(--px-font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.jr-cta__form input[type="submit"]:hover {
    background: var(--jr-accent);
    color: #fff;
}

/* CF7's own status and validation messages. */
.jr-cta__form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #ffb4b4;
}

.jr-cta__form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: var(--jr-radius);
    font-size: 14px;
    color: #fff;
}

@media (max-width: 640px) {
    .jr-cta__form .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contact Form 7's stored markup wraps the submit in the theme's contact-page
 * button chrome — `.btn-wrap > .btn-link` with a `.btn-block` span. `.btn-link`
 * is a fixed 200x70 box and `.btn-block` is a 70px translucent red circle
 * absolutely positioned inside it, so dropped into this band the circle floated
 * loose and the button collapsed. Undo the chrome here and style the input
 * itself; the contact page keeps its own version untouched. */

.jr-cta__form .btn-wrap,
.jr-cta__form .btn-link {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}

.jr-cta__form .btn-block {
    display: none;
}

.jr-cta__form .mt-15 {
    margin-top: 4px;
}

/* CF7 appends a spinner and a hidden response paragraph after the button. */
.jr-cta__form .wpcf7-spinner {
    margin: 0 0 0 12px;
    vertical-align: middle;
}

/* Mobile ------------------------------------------------------------------
 *
 * `minmax(130px, 1fr)` on the facts row is a *hard floor*: three columns plus
 * the gaps could not shrink below ~442px, so on a 390px phone the grid set the
 * page's scroll width and every section was clipped on the right. Grid columns
 * have to be allowed to shrink — `minmax(0, 1fr)` — before anything else here
 * matters. */

@media (max-width: 700px) {
    .jr-page-hero__meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding-top: 20px;
        margin-top: 26px;
    }

    .jr-page-hero__meta li {
        padding-left: 12px;
    }

    .jr-page-hero__meta strong {
        font-size: 16px;
    }

    .jr-page-hero__meta span {
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .jr-page-hero__actions .jr-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .jr-page-body ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .jr-page-body {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    /* Three facts no longer fit side by side without the labels breaking mid-word. */
    .jr-page-hero__meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .jr-page-hero__meta li {
        padding-left: 0;
        border-left: 0;
    }
}

/* Long words in editor copy — a price, a URL, a keyword string — must wrap
 * rather than push the page wider than the screen. */
.jr-page-body,
.jr-page-hero__title,
.jr-page-hero__lead,
.jr-page-band p,
.jr-page-note p {
    overflow-wrap: break-word;
}

/* Last-resort guard: nothing inside a page may scroll the document sideways.
 * `clip` rather than `hidden` so it cannot create a scroll container that
 * breaks `position: sticky` elsewhere on the page. */
.jr-page {
    overflow-x: clip;
}

/* Decorative pointer: precise tracking and contrast on light and dark bands. */
.cursor.js-cursor {
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: difference;
}

.cursor.js-cursor.is-visible {
    opacity: 1;
}

.cursor.js-cursor::before {
    transform: translate(-50%, -50%) scale(0.15);
    background: #fff;
    border-color: #fff;
    transition: transform 0.15s ease;
}

.cursor.js-cursor.drag::before {
    transform: translate(-50%, -50%) scale(1);
    color: #000;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cursor.js-cursor {
        display: none;
    }
}

/* The band is centred, so the submit has to be too — it was inheriting the
 * left alignment the fields need. */
.jr-cta__form .btn-wrap,
.jr-cta__form .mt-15 {
    text-align: center;
}

.jr-cta--form .jr-cta__form {
    margin-bottom: 0;
}

.jr-cta--form .jr-cta__actions {
    margin-top: 2px;
}

/* One selector step above the theme's `.btn-link input[type="submit"]`, which
 * sets a transparent background and near-black text. The stylesheet order is
 * fixed now, but a same-specificity tie against a rule this generic is not
 * worth leaving to load order. */
.jr-cta__form .btn-wrap input[type="submit"],
.jr-cta__form .btn-link input[type="submit"] {
    padding: 14px 32px;
    border: 0;
    border-radius: 500px;
    background: #fff;
    color: var(--jr-ink);
    font-family: var(--px-font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    overflow: visible;
    cursor: pointer;
}

.jr-cta__form .btn-wrap input[type="submit"]:hover,
.jr-cta__form .btn-link input[type="submit"]:hover {
    background: var(--jr-accent);
    color: #fff;
}

/* Hover ------------------------------------------------------------------
 *
 * The page layout shipped with none, so links and cards gave no feedback at
 * all. These mirror what the service body already does, so the two read the
 * same under the pointer as well as at rest. */

.jr-page-body a {
    color: var(--jr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jr-accent-soft);
    transition: border-color 0.25s ease, color 0.25s ease;
}

.jr-page-body a:hover,
.jr-page-body a:focus-visible {
    color: var(--jr-accent);
    border-bottom-color: var(--jr-accent);
}

.jr-page-body ul li {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.jr-page-body ul li:hover {
    border-color: var(--jr-line);
    transform: translateY(-3px);
    box-shadow: var(--jr-shadow);
}

/* Links inside the dark statement band and the availability strip need their
 * own colours — the accent is close to unreadable on the dark ground. */
.jr-page-band a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: border-color 0.25s ease;
}

.jr-page-band a:hover,
.jr-page-band a:focus-visible {
    border-bottom-color: #fff;
}

.jr-page-note a {
    color: var(--jr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jr-accent-soft);
    transition: border-color 0.25s ease;
}

.jr-page-note a:hover,
.jr-page-note a:focus-visible {
    border-bottom-color: var(--jr-accent);
}

.jr-page-hero__lead a {
    color: var(--jr-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--jr-accent-soft);
    transition: border-color 0.25s ease;
}

.jr-page-hero__lead a:hover,
.jr-page-hero__lead a:focus-visible {
    border-bottom-color: var(--jr-accent);
}

/* Keyboard users get the same affordance as pointer users. */
.jr-page-body a:focus-visible,
.jr-page-band a:focus-visible,
.jr-page-note a:focus-visible,
.jr-page-hero__lead a:focus-visible {
    outline: 2px solid var(--jr-accent);
    outline-offset: 3px;
}

/* ==========================================================================
   Bold that is actually bold
   --------------------------------------------------------------------------
   Didact Gothic — the body face for the whole site — ships a *single* 400
   weight. Google Fonts has no 700 for it and never has. So `<b>` and `<strong>`
   computed to `font-weight: 700` and then rendered at 400, because Chromium
   matched 700 to the only face available and did not synthesise a heavier one.
   Measured in the browser: the same string is 337.3px wide at 400 and 337.3px
   at 700 — byte-identical, no emphasis at all.

   That silently affected every emphasised word on the site: 41 published posts
   and 434 postmeta rows contain <b> or <strong>, including 83 `_jitin_svc_*`
   fields. None of it was showing.

   A hairline stroke in the current colour thickens the existing letterforms.
   The alternative — letting the weight fall back to the next family in the
   stack — swaps to Arial Bold mid-sentence, which is what made the two bold
   phrases in the homepage About paragraph look subtly wrong rather than strong.

   Scoped to body copy on purpose. Headings use `--px-font-title` (Syne), which
   does carry a real 700; stroking those as well would double up.
   ========================================================================== */

p b, p strong,
li b, li strong,
td b, td strong,
dd b, dd strong,
figcaption b, figcaption strong,
.elementor-widget-text-editor b, .elementor-widget-text-editor strong,
.jr-page-body b, .jr-page-body strong,
.jr-article-body b, .jr-article-body strong,
.bdevs-el-content b, .bdevs-el-content strong {
    font-weight: 700;
    -webkit-text-stroke: 0.4px currentColor;
}

/* Already light-on-dark and already weighted by their own rules — a stroke on
   top of those reads as smudged rather than strong. */
.jr-page-band strong,
.jr-finale b, .jr-finale strong,
.jr-page-hero__meta strong {
    -webkit-text-stroke: 0;
}

/* ==========================================================================
   Home journal cards — legible captions over a photograph
   --------------------------------------------------------------------------
   The card caption sits directly on the image with no scrim, so whether the
   category and headline can be read at all depends on what happens to be in
   the bottom third of that particular photo. On a bright, busy frame — a lit
   stage, a gold saree — the category line disappeared completely.

   Two separate faults, both fixed here:

   1. The category is not plain text. The widget prints
      `<h6><ul class="post-categories"><li><a>…</a></li></ul></h6>`, so the
      colour set on the `h6` never reaches the text — the `<a>` takes the
      global link colour instead. The browser's default `ul` margin then
      fought the `h6`'s `line-height: 12px`, which is what pushed the category
      into the headline.

   2. Nothing guaranteed contrast. A gradient scrim on the image gives every
      card the same floor to sit on, whatever the photograph is doing.

   The scrim stops are in **pixels from the base, not percentages**. The caption
   is a fixed height — one category line, two title lines, padding, about 130px
   — but the card is not, so a percentage gradient puts the category at a
   different point on the ramp on every screen. Measured against the worst case,
   a blown-out white photograph:

       percentage stops (.88 at 0%, .55 at 38%)   category contrast  1.99:1  FAIL
       pixel stops      (.95 at 0,  .90 at 140px) category contrast 12.29:1  PASS

   The caption needs alpha >= 0.64 to clear WCAG AA at 4.5:1 over white. The
   percentage ramp delivered 0.38 where the category actually sits, which is why
   tuning the percentages alone never fixed it.

   Scoped to `.home` so the blog index and archive cards keep their own
   treatment.
   ========================================================================== */

.home .blog-home .item .wrap .img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(18, 13, 11, .95) 0,
        rgba(18, 13, 11, .90) 140px,
        rgba(18, 13, 11, .35) 220px,
        rgba(18, 13, 11, 0) 300px);
    pointer-events: none;
}

/* The caption paints above the scrim. */
.home .blog-home .item .wrap .title {
    z-index: 2;
    width: 100%;
    padding: 20px 22px 22px;
    text-align: left;
}

/* Undo the list: no bullets, no default margin, and let it sit on one line. */
.home .blog-home .item .wrap .title h6 {
    margin: 0 0 10px;
    line-height: 1.3;
    z-index: 2;
}

.home .blog-home .item .wrap .title h6 .post-categories {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0;
    padding: 0;
}

.home .blog-home .item .wrap .title h6 .post-categories li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The colour the `h6` was always meant to carry, light enough to read on the
   scrim rather than the theme accent, which is mid-tone and vanishes on it. */
.home .blog-home .item .wrap .title h6 a,
.home .blog-home .item .wrap .title h6 a:hover,
.home .blog-home .item .wrap .title h6 a:focus {
    color: #efe3d8;
    text-decoration: none;
}

.home .blog-home .item .wrap .title h6 a:hover {
    color: #fff;
}

.home .blog-home .item .wrap .title h4 {
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   Owl pagination — one row, whatever the item count
   Owl draws one dot per page. The blog widget was set to `post_number: -1`, so
   all 22 posts became 22 dots and wrapped onto a second row on a phone. That
   count is capped at 6 in the widget settings now.

   The services carousel still carries `-1` deliberately — all 13 services are
   meant to be reachable — so the row is made to scroll horizontally instead of
   wrapping. That also means adding posts or services can never bring the
   wrapping back.
   -------------------------------------------------------------------------- */
.home .blog-home .owl-theme .owl-dots,
.home .services .owl-theme .owl-dots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 18px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.home .blog-home .owl-theme .owl-dots::-webkit-scrollbar,
.home .services .owl-theme .owl-dots::-webkit-scrollbar {
    display: none;
}

.home .blog-home .owl-theme .owl-dots .owl-dot,
.home .services .owl-theme .owl-dots .owl-dot {
    flex: 0 0 auto;
}

.home .blog-home .owl-theme .owl-dots .owl-dot span,
.home .services .owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0;
    background: rgba(18, 13, 11, .22);
    transition: background .3s, transform .3s;
}

.home .blog-home .owl-theme .owl-dots .owl-dot.active span,
.home .services .owl-theme .owl-dots .owl-dot.active span {
    background: var(--px-theme-clr, #c44953);
    transform: scale(1.35);
}