:root {
    --sd-navy: var(--secondary-color, #203e63);
    --sd-orange: var(--primary-color, #d46a09);
    --sd-text: var(--text-color, #585858);
    --sd-line: rgba(212, 106, 9, .16);
    --sd-soft: var(--bg-color-section, #f3f5f8);
    --sd-cream: var(--cream, #faf6f0);

    /* Type scale — every font-size on this page pulls from here.
       Naming is size-based (not usage-based) so the same token can be
       reused anywhere that size is genuinely needed. */
    --sd-fs-3xs: 11px;   /* micro uppercase labels/eyebrows */
    --sd-fs-2xs: 12px;   /* table head cells, small badges */
    --sd-fs-xs:  13px;   /* breadcrumb, sidebar body copy, captions */
    --sd-fs-sm:  14px;   /* table cells, related-article titles */
    --sd-fs-base: 15px;  /* default paragraph / list copy */
    --sd-fs-md:  16px;   /* hero tagline, lead copy on mobile */
    --sd-fs-lg:  18px;   /* lead paragraph, blockquote */
    --sd-fs-xl:  23px;   /* h3 */
    --sd-fs-2xl: 26px;   /* sidebar consultation heading */
    --sd-fs-3xl: 32px;   /* article title, mobile */
    --sd-fs-4xl: 36px;   /* h2, closing CTA heading */
    --sd-fs-5xl: 44px;   /* article title, desktop */
    --sd-fs-6xl: 52px;   /* hero title */

    /* Weight scale — four steps only, used consistently by role:
       regular for body copy, medium for tags/tagline, semibold for all
       headings, bold for labels/buttons/emphasis. */
    --sd-fw-regular:  400;
    --sd-fw-medium:   500;
    --sd-fw-semibold: 600;
    --sd-fw-bold:     700;
}

.reading-progress-track { position: fixed; inset: 0 0 auto; width: 100%; height: 3px; z-index: 1200; pointer-events: none; }
.reading-progress-bar { width: 0; height: 100%; background: var(--sd-orange); box-shadow: 0 0 8px rgba(212, 106, 9, .35); }

/* Keep the same light navigation used throughout the Stylux website. */
.service-detail-page .main-header { position: relative; z-index: 1100; }

.service-hero {
    position: relative;
    height: 500px;
    min-height: 350px;
    overflow: hidden;
    background-color: var(--primary-color);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.service-intro { position: relative; padding: 12px 0; background: var(--sd-soft); overflow: hidden; }
.service-intro::before { content: ""; position: absolute; top: -130px; right: 5%; width: 310px; height: 310px; border: 1px solid rgba(212, 106, 9, .12); border-radius: 50%; pointer-events: none; }
.service-intro-inner { position: relative; width: 100%; }
.article-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; margin: 0 0 30px; color: var(--sd-text); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-regular); letter-spacing: 0; }
.article-breadcrumb a { color: inherit; text-decoration: none; transition: color .2s ease; }
.article-breadcrumb a:hover, .article-breadcrumb .current { color: var(--sd-orange); }
.article-breadcrumb .sep { opacity: .45; }
.service-eyebrow { position: relative; display: inline-block; margin: 0 0 15px; padding: 7px 16px 7px 32px; color: var(--sd-orange); background: transparent; border: 1px solid var(--sd-line); border-radius: 40px; font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-medium); line-height: normal; text-transform: capitalize; }
.service-eyebrow::before { content: ""; position: absolute; left: 16px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--sd-orange); transform: translateY(-50%); }
.article-hero-title { max-width: 720px; margin: 0; color: var(--sd-navy); font-size: var(--sd-fs-6xl); font-weight: var(--sd-fw-semibold); line-height: 1.2; letter-spacing: -.03em; overflow-wrap: break-word; }
.service-hero-tagline { max-width: 700px; margin: 15px 0 0; color: var(--sd-text); font-size: var(--sd-fs-md); font-weight: var(--sd-fw-regular); line-height: 1.9; }
.service-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.service-primary-cta, .service-closing-cta a, .sidebar-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; text-decoration: none; }
.service-primary-cta { min-width: 220px; padding: 14px 20px; color: #fff; background: var(--sd-orange); border-radius: 999px; font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-bold); box-shadow: 0 10px 24px -12px rgba(212, 106, 9, .65); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.service-primary-cta:hover { color: #fff; background: #b95600; transform: translateY(-2px); box-shadow: 0 15px 28px -12px rgba(212, 106, 9, .75); }
.service-text-link { color: var(--sd-navy); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-bold); text-decoration: none; border-bottom: 1px solid rgba(32, 62, 99, .35); padding-bottom: 3px; }
.service-text-link:hover { color: var(--sd-orange); border-color: currentColor; }

.service-proof { background: #fff; border-bottom: 1px solid var(--sd-line); box-shadow: 0 14px 35px -30px rgba(32, 62, 99, .4); }
.service-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.service-proof-grid > div { display: flex; align-items: center; gap: 15px; min-height: 96px; padding: 20px 28px; border-right: 1px solid var(--sd-line); }
.service-proof-grid > div:first-child { border-left: 1px solid var(--sd-line); }
.service-proof-grid strong { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: var(--sd-orange); background: rgba(212, 106, 9, .08); border-radius: 50%; font-size: var(--sd-fs-3xs); }
.service-proof-grid span { color: var(--sd-navy); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-semibold); letter-spacing: .01em; }

.article-body-section { padding: 20px 0 40px; background: #fff; scroll-margin-top: 80px; }
.article-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 60px; align-items: start; }
.article-content { min-width: 0; }
.article-content > :first-child { margin-top: 0 !important; }
.article-service-title { margin: 0 0 22px; color: var(--sd-navy); font-size: var(--sd-fs-5xl); font-weight: var(--sd-fw-semibold); line-height: 1.18; letter-spacing: -.03em; }
.article-content > p:first-of-type { max-width: 810px; color: var(--sd-navy); font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-regular); line-height: 1.8; letter-spacing: 0; }
.article-content p { margin: 0 0 16px; color: var(--sd-text); font-size: var(--sd-fs-base); font-weight: var(--sd-fw-regular); line-height: 1.8; text-align: left; }
.article-content strong { color: var(--sd-navy); font-weight: var(--sd-fw-semibold); }
.article-content h2 { position: relative; margin: 32px 0 14px; padding-left: 17px; color: var(--sd-navy); font-size: var(--sd-fs-4xl); font-weight: var(--sd-fw-semibold); line-height: 1.4; letter-spacing: -.03em; }
.article-content h2::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 5px; width: 4px; border-radius: 4px; background: linear-gradient(var(--sd-orange), #e6a361); }
.article-content h3 { margin: 28px 0 13px; color: var(--sd-navy); font-size: var(--sd-fs-xl); font-weight: var(--sd-fw-semibold); }
.article-content ul, .article-content ol { margin: 16px 0 24px; padding-left: 22px; color: var(--sd-text); }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin: 0 0 10px; padding: 0; font-size: var(--sd-fs-base); font-weight: var(--sd-fw-regular); line-height: 1.7; }
.article-content li:last-child { margin-bottom: 0; }
.article-content > p:has(> img) { position: relative; margin: 36px 0 48px; }
.article-content > p img, .article-content figure img { width: 100%; min-height: 350px; max-height: 550px; display: block; object-fit: cover; border-radius: 18px; box-shadow: 0 22px 44px -30px rgba(32, 62, 99, .35); }
.article-content .rch-split__img { width: 100%; }
.article-content .rch-split__img img { width: auto; max-width: 100%; height: auto; min-height: 0; max-height: none; display: block; margin: 0 auto; object-fit: contain; border-radius: 16px; box-shadow: 0 18px 38px -30px rgba(32, 62, 99, .35); }
.article-content blockquote { position: relative; margin: 45px 0; padding: 30px 34px 28px 38px; background: var(--sd-cream); border: 1px solid var(--sd-line); border-left: 4px solid var(--sd-orange); border-radius: 0 16px 16px 0; }
.article-content blockquote p { margin: 0 0 11px; color: var(--sd-navy); font-size: var(--sd-fs-lg); font-weight: var(--sd-fw-regular); font-style: italic; line-height: 1.7; }
.article-content blockquote cite { color: var(--sd-orange); font-size: var(--sd-fs-3xs); font-style: normal; font-weight: var(--sd-fw-bold); text-transform: uppercase; letter-spacing: .09em; }

.article-table-wrap { width: 100%; margin: 24px 0 30px; overflow-x: auto; background: #fff; border: 1px solid var(--sd-line); border-radius: 16px; box-shadow: 0 16px 34px -30px rgba(32, 62, 99, .4); -webkit-overflow-scrolling: touch; }
.article-table-wrap:focus-visible { outline: 3px solid rgba(212, 106, 9, .32); outline-offset: 3px; }
.article-content .article-table-wrap table { width: 100%; min-width: 560px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; color: var(--sd-text); background: #fff; font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-regular); line-height: 1.55; }
.article-content .article-table-wrap caption { padding: 14px 18px; color: var(--sd-navy); background: var(--sd-cream); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-bold); text-align: left; caption-side: top; }
.article-content .article-table-wrap th, .article-content .article-table-wrap td { padding: 15px 18px; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--sd-line); }
.article-content .article-table-wrap thead th { color: #fff; background: var(--sd-navy); font-size: var(--sd-fs-2xs); font-weight: var(--sd-fw-bold); letter-spacing: .035em; text-transform: uppercase; }
.article-content .article-table-wrap thead th + th { border-left: 1px solid rgba(255, 255, 255, .14); }
.article-content .article-table-wrap tbody tr:nth-child(even) { background: var(--sd-soft); }
.article-content .article-table-wrap tbody tr { transition: background-color .2s ease; }
.article-content .article-table-wrap tbody tr:hover { background: rgba(212, 106, 9, .07); }
.article-content .article-table-wrap tbody tr:last-child td, .article-content .article-table-wrap tbody tr:last-child th { border-bottom: 0; }
.article-content .article-table-wrap tbody th, .article-content .article-table-wrap tbody td:first-child { color: var(--sd-navy); font-weight: var(--sd-fw-semibold); }

.service-gallery-heading { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--sd-line); }
.service-gallery-heading p { margin: 0 0 8px; color: var(--sd-orange); font-size: var(--sd-fs-3xs); font-weight: var(--sd-fw-bold); letter-spacing: .15em; text-transform: uppercase; }
.service-gallery-heading h2 { margin: 0; }
.service-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 26px; }
.service-gallery figure { position: relative; grid-column: span 6; height: auto; margin: 0; overflow: hidden; background: var(--sd-soft); border-radius: 16px; align-self: start; }
.service-gallery--count-3 figure:first-child, .service-gallery--count-5 figure:first-child { grid-column: span 12; }
.service-gallery--count-1 figure { grid-column: span 12; }
.article-content .service-gallery img { width: 100%; height: auto; min-height: 0; max-height: none; display: block; object-fit: contain; border-radius: 0; box-shadow: none; }
.service-gallery figcaption { position: absolute; inset: auto 0 0; padding: 34px 20px 16px; color: #fff; font-size: var(--sd-fs-2xs); background: linear-gradient(transparent, rgba(32, 62, 99, .78)); }

.article-sidebar { position: sticky; top: 105px; display: flex; flex-direction: column; gap: 18px; }
.sidebar-card { padding: 25px; background: #fff; border: 1px solid var(--sd-line); border-radius: 18px; box-shadow: 0 16px 36px -28px rgba(32, 62, 99, .35); }
.sidebar-card h4 { margin: 0 0 17px; color: var(--sd-navy); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.sidebar-consultation { padding: 32px 28px 28px; color: #fff; background: var(--sd-navy); border: 0; }
.sidebar-kicker { display: block; margin-bottom: 15px; color: #f1b37a; font-size: var(--sd-fs-3xs); font-weight: var(--sd-fw-bold); letter-spacing: .16em; text-transform: uppercase; }
.sidebar-consultation h2 { margin: 0 0 15px; color: #fff; font-size: var(--sd-fs-2xl); font-weight: var(--sd-fw-semibold); line-height: 1.2; letter-spacing: -.025em; }
.sidebar-consultation p { margin: 0 0 26px; color: rgba(255, 255, 255, .75); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-regular); line-height: 1.7; text-align: left; }
.sidebar-cta { width: 100%; padding: 14px 17px; color: #fff; background: var(--sd-orange); border-radius: 999px; font-size: var(--sd-fs-2xs); font-weight: var(--sd-fw-bold); }
.sidebar-cta:hover { color: #fff; background: #b95600; }
.sidebar-includes ul { margin: 0; padding: 0; list-style: none; }
.sidebar-includes li { position: relative; padding: 11px 0 11px 23px; color: var(--sd-text); font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-regular); border-bottom: 1px solid var(--sd-line); }
.sidebar-includes li:last-child { border: 0; }
.sidebar-includes li::before { content: "\2713"; position: absolute; left: 0; color: var(--sd-orange); font-weight: var(--sd-fw-bold); }
.sidebar-share-icons { display: flex; gap: 9px; }
.sidebar-share-icons a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--sd-navy); background: var(--sd-soft); border: 1px solid var(--sd-line); border-radius: 50%; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease; }
.sidebar-share-icons svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.sidebar-share-icons a:hover { color: #fff; background: var(--sd-orange); transform: translateY(-2px); }
.sidebar-related-list { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.sidebar-related-item { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 13px; padding-bottom: 15px; border-bottom: 1px solid var(--sd-line); }
.sidebar-related-item:last-child { padding-bottom: 0; border-bottom: 0; }
.sidebar-related-thumb { width: 74px; height: 63px; display: block; overflow: hidden; background: var(--sd-soft); border-radius: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sidebar-related-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.sidebar-related-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--sd-orange); background: var(--sd-soft); font-size: var(--sd-fs-2xl); font-weight: var(--sd-fw-bold); }
.sidebar-related-thumb:hover img { transform: scale(1.06); }
.sidebar-related-title { display: -webkit-box; overflow: hidden; color: var(--sd-navy); font-size: var(--sd-fs-sm); font-weight: var(--sd-fw-semibold); line-height: 1.42; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar-related-title:hover { color: var(--sd-orange); }
.sidebar-viewall-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 18px; padding: 12px 16px; color: var(--sd-navy); background: transparent; border: 1px solid var(--sd-line); border-radius: 999px; font-size: var(--sd-fs-2xs); font-weight: var(--sd-fw-bold); text-decoration: none; box-sizing: border-box; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.sidebar-viewall-btn:hover { color: #fff; background: var(--sd-orange); border-color: var(--sd-orange); }

.service-closing-cta { padding: 70px 0; color: #fff; background: var(--sd-navy); }
.service-closing-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 46px; }
.service-closing-cta span { display: block; margin-bottom: 10px; color: #f1b37a; font-size: var(--sd-fs-3xs); font-weight: var(--sd-fw-bold); letter-spacing: .16em; text-transform: uppercase; }
.service-closing-cta h2 { max-width: 750px; margin: 0; color: #fff; font-size: var(--sd-fs-4xl); font-weight: var(--sd-fw-semibold); line-height: 1.4; letter-spacing: -.03em; }
.service-closing-cta a { flex: 0 0 auto; min-width: 175px; padding: 16px 20px; color: #fff; background: var(--sd-orange); border-radius: 999px; font-size: var(--sd-fs-xs); font-weight: var(--sd-fw-bold); }
.service-closing-cta a span { display: inline; margin: 0; color: inherit; font-size: inherit; letter-spacing: 0; }
.service-closing-cta a:hover { color: #fff; background: #b95600; }

.article-breadcrumb a:focus-visible, .service-primary-cta:focus-visible, .service-text-link:focus-visible, .sidebar-cta:focus-visible, .sidebar-share-icons a:focus-visible, .sidebar-related-title:focus-visible, .sidebar-viewall-btn:focus-visible, .service-closing-cta a:focus-visible { outline: 3px solid rgba(212, 106, 9, .4); outline-offset: 4px; }

@media (max-width: 991px) {
    .service-intro { padding: 10px 0; }
    .article-hero-title { font-size: var(--sd-fs-3xl); }
    .article-content h2, .service-closing-cta h2 { font-size: var(--sd-fs-3xl); }
    .service-proof-grid { grid-template-columns: repeat(2, 1fr); }
    .service-proof-grid > div:nth-child(odd) { border-left: 1px solid var(--sd-line); }
    .service-proof-grid > div { min-height: 84px; }
    .article-body-section { padding: 16px 0 30px; }
    .article-body-grid { grid-template-columns: 1fr; gap: 56px; }
    .article-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar-consultation { grid-column: 1 / -1; }
    .service-closing-cta-inner { align-items: flex-end; }
}

@media (max-width: 767px) {
    .service-hero { height: 380px; }
    .service-intro { padding: 8px 0; }
    .service-intro::before { width: 220px; height: 220px; top: -120px; right: -80px; }
    .article-breadcrumb { margin-bottom: 28px; }
    .service-eyebrow { padding: 6px 12px 6px 28px; font-size: var(--sd-fs-xs); }
    .service-eyebrow::before { left: 12px; }
    .article-hero-title { font-size: var(--sd-fs-2xl); line-height: 1.2; }
    .service-hero-tagline { margin-top: 10px; font-size: var(--sd-fs-base); line-height: 1.8; }
    .service-hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 25px; }
    .service-proof-grid { grid-template-columns: 1fr 1fr; }
    .service-proof-grid > div { min-height: 92px; padding: 17px 12px; gap: 9px; }
    .service-proof-grid strong { flex-basis: 30px; width: 30px; height: 30px; }
    .service-proof-grid span { font-size: var(--sd-fs-3xs); }
    .article-body-section { padding: 12px 0 30px; }
    .article-service-title { margin-bottom: 18px; font-size: var(--sd-fs-3xl); }
    .article-content > p:first-of-type { font-size: var(--sd-fs-md); }
    .article-content p { font-size: var(--sd-fs-base); line-height: 1.8; }
    .article-content h2 { margin-top: 28px; font-size: var(--sd-fs-xl); }
    .article-content > p img, .article-content figure img { min-height: 255px; }
    .article-content blockquote { padding: 25px 23px; }
    .article-table-wrap { margin: 20px 0 26px; border-radius: 13px; }
    .article-content .article-table-wrap table { min-width: 520px; font-size: var(--sd-fs-xs); }
    .article-content .article-table-wrap th, .article-content .article-table-wrap td { padding: 13px 14px; }
    .service-gallery-heading { margin-top: 42px; }
    .service-gallery { grid-template-columns: 1fr; }
    .service-gallery figure, .service-gallery--count-3 figure:first-child, .service-gallery--count-5 figure:first-child, .service-gallery--count-1 figure { grid-column: auto; height: auto; }
    .article-content .service-gallery img { min-height: 0; }
    .article-sidebar { grid-template-columns: 1fr; }
    .sidebar-consultation { grid-column: auto; }
    .service-closing-cta { padding: 60px 0; }
    .service-closing-cta h2 { font-size: var(--sd-fs-xl); }
    .service-closing-cta-inner { align-items: flex-start; flex-direction: column; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .service-gallery img, .sidebar-related-thumb img, .sidebar-share-icons a, .service-primary-cta, .article-content .article-table-wrap tbody tr { transition: none; }
}