/* ==========================================================================
   Sneaker Revival JHB — main stylesheet
   Tokens → base → layout → components → sections → responsive
   ========================================================================== */

:root {
	--srj-cyan: #00f0e8;
	--srj-cyan-hover: #3ff6ef;
	--srj-accent-text: #00c9c4;
	--srj-teal: #0a9e9a;
	--srj-navy: #021118;
	--srj-navy-2: #061c25;
	--srj-navy-3: #0b2832;
	--srj-ink: #0b1b24;
	--srj-text: #4a5b66;
	--srj-muted: #6f808a;
	--srj-border: #e3eaee;
	--srj-tint: #e8fbfb;
	--srj-tint-2: #d5f6f5;
	--srj-white: #fff;
	--srj-danger: #d63649;
	--srj-success: #10a36b;
	--srj-radius: 10px;
	--srj-radius-sm: 7px;
	--srj-shadow: 0 6px 24px rgba(2, 17, 24, .07);
	--srj-shadow-lg: 0 18px 50px rgba(2, 17, 24, .14);
	--srj-container: 1780px;
	--srj-gutter: clamp(20px, 3.6vw, 70px);
	--srj-sec-pad: 60px;
	--srj-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--srj-script: "Permanent Marker", "Comic Sans MS", cursive;
	--srj-header-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--srj-header-h) + 12px); }
body.srj-site { margin: 0; overflow-x: clip; font-family: var(--srj-font); font-size: 16px; line-height: 1.6; color: var(--srj-text); background: var(--srj-white); -webkit-font-smoothing: antialiased; }
.srj-site img, .srj-site svg { max-width: 100%; height: auto; }
.srj-site picture { display: contents; }
.srj-site a { color: inherit; }
.srj-site h1, .srj-site h2, .srj-site h3, .srj-site h4 { font-family: var(--srj-font); color: var(--srj-ink); line-height: 1.15; margin: 0 0 .5em; }
.srj-site p { margin: 0 0 1em; }
.srj-site button { font-family: inherit; }
.srj-icon { display: inline-block; flex: none; vertical-align: middle; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000; top: 8px; left: 8px; background: var(--srj-cyan); color: var(--srj-navy); padding: 10px 16px; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--srj-cyan); outline-offset: 2px; }

.srj-container { width: 100%; max-width: calc(var(--srj-container) + var(--srj-gutter) * 2); margin: 0 auto; padding: 0 var(--srj-gutter); }
.srj-sec { padding: var(--srj-sec-pad) 0; position: relative; }
.srj-sec + .srj-sec:not(.srj-dark):not(.srj-tint) { padding-top: calc(var(--srj-sec-pad) * .6); }
.srj-dark { background: var(--srj-navy); color: #c9d6dc; }
.srj-dark h1, .srj-dark h2, .srj-dark h3, .srj-dark h4, .srj-dark .srj-title { color: var(--srj-white); }
.srj-tint { background: var(--srj-tint); }
.srj-accent { color: var(--srj-accent-text); }
.srj-dark .srj-accent { color: var(--srj-cyan); }
.srj-center { text-align: center; margin-top: 32px; }
.srj-notice { padding: 20px; border: 1px dashed var(--srj-teal); border-radius: var(--srj-radius); margin: 24px auto; }

.srj-grid { display: grid; gap: 18px; grid-template-columns: repeat(var(--srj-g, 4), minmax(0, 1fr)); }
.srj-grid--2 { --srj-g: 2; } .srj-grid--3 { --srj-g: 3; } .srj-grid--4 { --srj-g: 4; } .srj-grid--5 { --srj-g: 5; } .srj-grid--6 { --srj-g: 6; }

/* ---------- Headings ---------- */
.srj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.srj-title { font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.srj-title--md { font-size: clamp(24px, 2.4vw, 32px); }
.srj-subtitle { font-size: 17px; margin: 6px 0 0; color: var(--srj-text); }
.srj-dark .srj-subtitle { color: #d7e3e8; }
.srj-eyebrow { text-transform: uppercase; letter-spacing: .32em; font-size: 13px; font-weight: 500; color: #e9f3f5; margin: 0 0 14px; max-width: 270px; line-height: 1.5; }
.srj-eyebrow--sm { letter-spacing: .26em; font-size: 11px; max-width: none; margin-bottom: 8px; }
.srj-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--srj-ink); text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid var(--srj-cyan); transition: gap .2s; }
.srj-link:hover { gap: 12px; }
.srj-dark .srj-link { color: var(--srj-white); }
.srj-note { margin-top: 28px; text-align: center; font-weight: 500; color: var(--srj-ink); }

/* ---------- Buttons ---------- */
.srj-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.srj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 26px; border-radius: 8px; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, transform .15s, box-shadow .2s; }
.srj-btn:hover { transform: translateY(-1px); }
.srj-btn--primary { background: var(--srj-cyan); color: var(--srj-navy) !important; box-shadow: 0 8px 24px rgba(0, 240, 232, .28); }
.srj-btn--primary:hover { background: var(--srj-cyan-hover); }
.srj-btn--outline { border-color: rgba(255, 255, 255, .9); color: var(--srj-white) !important; background: rgba(2, 17, 24, .35); }
.srj-btn--outline:hover { background: var(--srj-white); color: var(--srj-navy) !important; }
.srj-btn--outline-dark { border-color: var(--srj-ink); color: var(--srj-ink) !important; background: transparent; }
.srj-btn--soft { background: var(--srj-tint); color: var(--srj-ink) !important; }
.srj-btn--soft:hover { background: var(--srj-tint-2); }
.srj-btn--sm { min-height: 40px; padding: 8px 18px; font-size: 13px; }
.srj-btn--lg { min-height: 56px; padding: 14px 30px; font-size: 16px; }
.srj-btn--block { display: flex; width: 100%; }
.srj-btn__icon { width: 22px; height: 22px; }
.srj-btn__arrow { width: 16px; height: 16px; }
.srj-btn[disabled], .srj-btn.is-loading { opacity: .6; pointer-events: none; }
.srj-arrow { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--srj-tint); color: var(--srj-ink); flex: none; border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.srj-arrow:hover { background: var(--srj-cyan); transform: translateX(2px); }

/* ---------- Icons ---------- */
.srj-soft-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--srj-tint); color: var(--srj-ink); flex: none; }
.srj-soft-icon--lg { width: 62px; height: 62px; }
.srj-soft-icon--xl { width: 76px; height: 76px; }
.srj-round-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--srj-teal); color: var(--srj-white); flex: none; }

/* ---------- Header ---------- */
.srj-header { position: sticky; top: 0; z-index: 900; background: rgba(2, 17, 24, .92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.admin-bar .srj-header { top: 32px; }
.srj-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--srj-header-h); }
.srj-header__brand { flex: none; }
.srj-header__brand img, .srj-logo img, .srj-header .custom-logo { display: block; width: auto; height: 56px; max-width: 220px; }
.srj-nav { flex: 1; display: flex; justify-content: center; }
.srj-menu { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.srj-menu > li { position: relative; }
.srj-menu a { display: block; color: var(--srj-white); text-decoration: none; font-size: 14px; font-weight: 500; padding: 10px 0; position: relative; }
.srj-menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--srj-cyan); transform: scaleX(0); transition: transform .2s; }
.srj-menu > li > a:hover::after, .srj-menu > .current-menu-item > a::after, .srj-menu > .current-menu-ancestor > a::after, .srj-menu > .current_page_item > a::after { transform: scaleX(1); }
.srj-menu .current-menu-item > a, .srj-menu .current-menu-ancestor > a { color: var(--srj-cyan); }
.srj-menu .sub-menu { list-style: none; position: absolute; top: 100%; left: -18px; min-width: 240px; margin: 0; padding: 10px 0; background: var(--srj-navy-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--srj-radius); box-shadow: var(--srj-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; }
.srj-menu li:hover > .sub-menu, .srj-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.srj-menu .sub-menu a { padding: 8px 20px; font-size: 14px; }
.srj-menu .sub-menu a:hover { color: var(--srj-cyan); background: rgba(255, 255, 255, .04); }
.srj-header__cta { flex: none; }
.srj-burger { display: none; background: none; border: 0; color: var(--srj-white); padding: 6px; cursor: pointer; }
.srj-burger__close { display: none; }
.srj-nav__mobile-cta { display: none; }
.srj-header--landing .srj-header__inner { justify-content: space-between; }

/* ---------- Hero (full-bleed image, content aligned to the container – as per mockups) ---------- */
.srj-hero { padding: 0; overflow: hidden; isolation: isolate; background: var(--srj-navy); }
.srj-hero__media { position: absolute; inset: 0; z-index: -1; }
.srj-hero__media img, .srj-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; display: block; }
.srj-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(2, 17, 24, .92) 0%, rgba(2, 17, 24, .78) 22%, rgba(2, 17, 24, .35) 40%, rgba(2, 17, 24, 0) 56%); }
.srj-hero__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; z-index: 1; background: linear-gradient(0deg, rgba(2, 17, 24, .55), transparent); }
/*
 * Hero = mockup proportions. --u is one mockup pixel (the mockups are 941px wide), so every size below is the
 * mockup measurement × --u: the banner scales as one piece and the text keeps the same position over the image.
 */
.srj-hero { --u: calc(min(100vw, 1920px) / 941); }
.srj-hero__inner { display: flex; align-items: center; min-height: clamp(460px, 37.2vw, 900px); padding-top: calc(var(--u) * 16); padding-bottom: calc(var(--u) * 16); }
.srj-hero--medium .srj-hero__inner { min-height: clamp(420px, 34.5vw, 820px); }
.srj-hero--small .srj-hero__inner { min-height: clamp(300px, 26vw, 600px); }
/* Height follows the banner image ratio so object-fit:cover shows the whole picture (no zoom, no skew). */
.srj-hero--fit .srj-hero__img, .srj-hero--fit .srj-hero__media img { object-position: 92% center; }
.srj-hero--fit .srj-hero__inner { min-height: min(calc(min(100vw, 1920px) * var(--srj-hero-ratio)), 980px); }
.srj-hero--fit.srj-hero--small .srj-hero__inner { min-height: min(calc(min(100vw, 1920px) * var(--srj-hero-ratio) * .8), 760px); }
.srj-hero__content { width: calc(var(--u) * 348); position: relative; z-index: 2; }
.srj-hero .srj-hero__title { font-size: calc(var(--u) * 51); font-weight: 800; line-height: .9; letter-spacing: -.035em; color: var(--srj-white) !important; margin: 0 0 calc(var(--u) * 5); text-shadow: 0 4px 30px rgba(0, 0, 0, .35); }
.srj-hero.srj-hero--small .srj-hero__title { font-size: calc(var(--u) * 46); }
.srj-hero .srj-hero__subtitle { font-size: calc(var(--u) * 13.6); color: var(--srj-white); line-height: 1.24; margin-bottom: calc(var(--u) * 6); }
.srj-hero .srj-hero__text { font-size: calc(var(--u) * 11); color: #d6e2e7; line-height: 1.36; margin-bottom: 0; }
.srj-hero .srj-eyebrow { font-size: calc(var(--u) * 10.5); letter-spacing: .32em; max-width: calc(var(--u) * 180); line-height: 1.35; margin-bottom: calc(var(--u) * 5); }
.srj-hero .srj-btns { margin-top: calc(var(--u) * 12); gap: calc(var(--u) * 12); }
.srj-hero .srj-btn { min-height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 17); font-size: calc(var(--u) * 11); border-radius: calc(var(--u) * 5); }
.srj-hero .srj-btn .srj-btn__icon { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.srj-hero__features { margin-top: calc(var(--u) * 14); padding-top: calc(var(--u) * 12); }
.srj-hero__features li { font-size: calc(var(--u) * 9.5); padding: 0 calc(var(--u) * 12); }
.srj-hero__features .srj-icon { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
/* Header scales gently with the screen, like the mockup. */
.srj-header__brand img, .srj-logo img, .srj-header .custom-logo { height: clamp(48px, 3.4vw, 66px); }
.srj-menu a { font-size: clamp(14px, .82vw, 16px); }
.srj-menu { gap: clamp(20px, 1.9vw, 38px); }
.srj-hero__features { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.srj-hero__features li { display: flex; align-items: center; gap: 10px; padding: 0 18px; color: var(--srj-white); font-size: 12px; line-height: 1.35; border-left: 1px solid rgba(255, 255, 255, .15); }
.srj-hero__features li:first-child { padding-left: 0; border-left: 0; }
.srj-hero__features .srj-icon { width: 34px; height: 34px; color: var(--srj-cyan); }
.srj-hero__features strong { display: block; font-weight: 600; }

/* ---------- Trust bar ---------- */
.srj-trustbar { background: var(--srj-navy-2); border-top: 1px solid rgba(255, 255, 255, .06); padding: 18px 0; }
.srj-trustbar__list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; }
.srj-trustbar__item { display: flex; align-items: center; gap: 14px; padding: 4px 18px; border-left: 1px solid rgba(255, 255, 255, .12); }
.srj-trustbar__item:first-child { border-left: 0; padding-left: 0; }
.srj-trustbar__icon { color: var(--srj-cyan); width: 36px; height: 36px; }
.srj-trustbar strong { display: block; color: var(--srj-white); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.srj-trustbar small { display: block; font-size: 12px; color: #a9bcc4; line-height: 1.35; }
.srj-trustbar small.is-strong { color: var(--srj-white); font-weight: 600; font-size: 13.5px; }
.srj-payfast-mini { font-style: italic; font-weight: 700; color: #ff5f6d; letter-spacing: -.02em; font-size: 11px; }

/* ---------- Cards ---------- */
.srj-card { background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--srj-shadow); transition: transform .2s, box-shadow .2s; }
.srj-card:hover { transform: translateY(-3px); box-shadow: var(--srj-shadow-lg); }
.srj-card__media { position: relative; aspect-ratio: 16 / 10; background: #dfe7ea; display: block; }
.srj-card__media img, .srj-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srj-card__badge { position: absolute; left: 14px; bottom: -22px; width: 46px; height: 46px; border-radius: 50%; background: var(--srj-white); color: var(--srj-teal); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(2, 17, 24, .14); }
.srj-card__badge .srj-icon { width: 24px; height: 24px; }
.srj-card__body { padding: 30px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.srj-card__title { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.srj-card__title a { text-decoration: none; }
.srj-card__title a:hover { color: var(--srj-teal); }
.srj-card__text { font-size: 13px; line-height: 1.5; color: var(--srj-muted); margin: 0; }
.srj-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; }
.srj-cards--button .srj-btn { margin-top: 12px; }
.srj-cards--priced .srj-card__body, .srj-cards--button .srj-card__body { padding-bottom: 14px; }
.srj-cards--priced .srj-card__title { font-size: 17px; }
.srj-cards--addon .srj-card__media { aspect-ratio: auto; height: 74px; }
.srj-cards--addon .srj-card__badge { width: 40px; height: 40px; bottom: -18px; }
.srj-cards--addon .srj-card__body { padding-top: 26px; }
.srj-cards--addon .srj-card__title { font-size: 13.5px; }
.srj-cards--compact .srj-card__media { aspect-ratio: 4 / 3; }
.srj-price { display: inline-flex; align-items: baseline; gap: 6px; color: var(--srj-ink); }
.srj-price small { font-size: 13px; color: var(--srj-muted); }
.srj-price strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.srj-price--lg strong { font-size: 26px; }
.srj-dark .srj-card { background: var(--srj-navy-2); border-color: var(--srj-navy-3); }
.srj-dark .srj-card__title { color: var(--srj-white); }

/* ---------- Steps ---------- */
.srj-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--srj-cols, 4), minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.srj-steps--inline .srj-step__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; position: relative; }
.srj-steps--inline .srj-step:not(:last-child) .srj-step__top::after { content: ""; flex: 1; height: 1px; background: var(--srj-border); margin-left: 6px; min-width: 20px; }
.srj-step__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--srj-teal); color: var(--srj-white); font-weight: 700; font-size: 16px; flex: none; }
.srj-step__title { font-size: 17px; font-weight: 700; margin: 0; }
.srj-step__row { display: flex; gap: 16px; align-items: flex-start; }
.srj-step__row .srj-step__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--srj-tint); color: var(--srj-ink); flex: none; }
.srj-step__row p { font-size: 14px; color: var(--srj-text); margin: 0; }

.srj-steps--cards { gap: 12px; }
.srj-steps--cards .srj-step, .srj-steps--todo .srj-step { background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); overflow: hidden; box-shadow: var(--srj-shadow); position: relative; }
.srj-step__media { position: relative; aspect-ratio: 5 / 4; background: #dde5e8; }
.srj-step__media img, .srj-step__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srj-steps--cards .srj-step__num, .srj-steps--todo .srj-step__num { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border: 3px solid var(--srj-white); font-size: 17px; }
.srj-steps--cards .srj-step__icon, .srj-steps--todo .srj-step__icon { position: absolute; left: 14px; bottom: -22px; width: 48px; height: 48px; border-radius: 50%; background: var(--srj-white); color: var(--srj-teal); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(2, 17, 24, .15); }
.srj-step__body { padding: 32px 16px 18px; }
.srj-step__body p { font-size: 13.5px; color: var(--srj-muted); margin: 6px 0 0; }
.srj-steps--cards .srj-step:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 0; color: var(--srj-ink); font-size: 22px; line-height: 1; z-index: 2; }
.srj-steps--todo { gap: 14px; }
.srj-steps--todo .srj-step__media { aspect-ratio: 16 / 7; }
.srj-steps--todo .srj-step__title { color: var(--srj-ink) !important; }
.srj-steps--next .srj-step { display: flex; align-items: flex-start; gap: 12px; }
.srj-steps--next .srj-step__num { background: var(--srj-cyan); color: var(--srj-navy); width: 30px; height: 30px; font-size: 14px; }
.srj-step__glyph { color: var(--srj-white); width: 38px; height: 38px; }
.srj-steps--next .srj-step__title { font-size: 15px; color: var(--srj-white); }
.srj-steps--next p { font-size: 13px; color: #b8c8cf; margin: 4px 0 0; }

/* ---------- Before / After (static) ---------- */
.srj-sec--ba { padding: 56px 0; }
.srj-ba-static__item { position: relative; margin: 0; border-radius: var(--srj-radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); aspect-ratio: 210 / 118; background: #1b2a31; }
.srj-ba-static__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srj-ba-label { position: absolute; bottom: 10px; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; z-index: 3; pointer-events: none; }
.srj-ba-label--before { left: 10px; background: rgba(2, 17, 24, .85); color: var(--srj-white); }
.srj-ba-label--after { right: 10px; background: var(--srj-cyan); color: var(--srj-navy); }

/* ---------- Packages ---------- */
.srj-package { background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 22px 18px 18px; display: flex; flex-direction: column; box-shadow: var(--srj-shadow); }
.srj-package__top { display: flex; gap: 14px; align-items: flex-start; }
.srj-package__icon { color: var(--srj-ink); width: 38px; height: 38px; }
.srj-package__title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.srj-package p { font-size: 13px; color: var(--srj-muted); margin: 0; }
.srj-package__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; }

/* ---------- CTA ---------- */
.srj-cta { padding: 46px 0; overflow: hidden; }
.srj-cta__media { position: absolute; inset: 0 0 0 auto; width: 44%; background-size: cover; background-position: center right; }
.srj-cta__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--srj-navy) 0%, rgba(2, 17, 24, .6) 40%, rgba(2, 17, 24, 0) 80%); }
.srj-cta__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.srj-cta__text { max-width: 640px; }
.srj-cta__title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; color: var(--srj-white); margin: 0 0 6px; letter-spacing: -.02em; }
.srj-cta__text p { color: #dbe6ea; margin: 0; font-size: 16px; }
.srj-cta .srj-btn { margin-right: 18%; }

/* ---------- Features row ---------- */
.srj-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--srj-cols, 5), minmax(0, 1fr)); gap: 0; }
.srj-feature { display: flex; gap: 14px; align-items: flex-start; padding: 6px 18px; border-left: 1px solid var(--srj-border); }
.srj-feature:first-child { border-left: 0; padding-left: 0; }
.srj-feature__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--srj-tint); color: var(--srj-ink); flex: none; }
.srj-feature__title { font-size: 14.5px; font-weight: 700; margin: 0 0 4px; }
.srj-feature p { font-size: 13px; color: var(--srj-muted); margin: 0; }
.srj-dark .srj-feature { border-color: rgba(255, 255, 255, .1); }
.srj-dark .srj-feature p { color: #b6c6cd; }
.srj-features--boxed .srj-feature__icon { background: var(--srj-cyan); color: var(--srj-navy); }
.srj-dark.srj-features--row .srj-feature__icon { background: transparent; color: var(--srj-cyan); border: 0; }
.srj-sec--features.has-media { overflow: hidden; }
.srj-features__media { position: absolute; inset: 0 0 0 auto; width: 32%; background-size: cover; background-position: center; opacity: .55; }
.srj-features__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--srj-navy), rgba(2, 17, 24, .1)); }
.srj-sec--features .srj-container { position: relative; }
.srj-paymarks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; align-items: center; }
.srj-paymark { font-size: 12px; font-weight: 800; letter-spacing: -.01em; color: var(--srj-ink); }
.srj-paymark--payfast { color: #e2001a; font-style: italic; font-size: 15px; }
.srj-paymark--visa { color: #1a1f71; font-style: italic; font-size: 15px; }
.srj-paymark--mastercard { color: #eb001b; }
.srj-dark .srj-paymark { color: var(--srj-white); }

/* ---------- FAQ ---------- */
.srj-faq-search { position: relative; margin-bottom: 28px; }
.srj-faq-search .srj-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--srj-ink); }
.srj-faq-search__input { width: 100%; height: 54px; border: 1px solid var(--srj-border); background: #f6f8f9; border-radius: var(--srj-radius); padding: 0 18px 0 52px; font: inherit; font-size: 15px; color: var(--srj-ink); }
.srj-faq-search__input:focus { outline: none; border-color: var(--srj-teal); background: var(--srj-white); box-shadow: 0 0 0 4px rgba(0, 240, 232, .18); }
.srj-faq__group { display: grid; grid-template-columns: 270px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--srj-border); }
.srj-faq__group:last-of-type { border-bottom: 0; }
.srj-faq__cat { display: flex; gap: 16px; align-items: flex-start; }
.srj-faq__caticon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--srj-tint); color: var(--srj-ink); flex: none; }
.srj-faq__cat h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.srj-faq__cat p { font-size: 14px; color: var(--srj-muted); margin: 0; }
.srj-faq__items { border: 1px solid var(--srj-border); border-radius: var(--srj-radius); overflow: hidden; align-self: start; }
.srj-faq__item + .srj-faq__item { border-top: 1px solid var(--srj-border); }
.srj-faq__q { margin: 0; }
.srj-faq__q button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: var(--srj-white); border: 0; padding: 16px 18px; font-size: 14.5px; font-weight: 600; color: var(--srj-ink); cursor: pointer; }
.srj-faq__q button:hover { background: #f7fafb; }
.srj-faq__chev { transition: transform .25s; }
.srj-faq__q button[aria-expanded="true"] .srj-faq__chev { transform: rotate(180deg); }
.srj-faq__a { padding: 0 18px 16px; font-size: 14.5px; color: var(--srj-text); }
.srj-faq__a p:last-child { margin: 0; }
.srj-faq__empty { padding: 20px; text-align: center; color: var(--srj-muted); }
.srj-faq__item.is-hidden, .srj-faq__group.is-hidden { display: none; }
mark.srj-hl { background: var(--srj-tint-2); color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---------- Compare table ---------- */
.srj-compare { display: grid; grid-template-columns: 170px repeat(var(--srj-cols, 4), minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.srj-compare__labels { display: flex; flex-direction: column; }
.srj-compare__spacer { height: 150px; flex: none; }
.srj-compare__label, .srj-compare__cell { height: 34px; display: flex; align-items: center; font-size: 13px; }
.srj-compare__label { color: #d5e2e7; padding: 0 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.srj-compare__label--price { height: 52px; font-weight: 600; color: var(--srj-white); }
.srj-compare__col { background: var(--srj-white); border-radius: var(--srj-radius); overflow: hidden; display: flex; flex-direction: column; position: relative; }
.srj-compare__col.is-featured { box-shadow: 0 0 0 3px var(--srj-cyan), 0 20px 50px rgba(0, 240, 232, .2); }
.srj-compare__col.is-featured .srj-compare__head { background: var(--srj-cyan); }
.srj-compare__head { height: 150px; padding: 12px 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; }
.srj-compare__head h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--srj-ink) !important; }
.srj-compare__head small { display: block; font-size: 11px; font-weight: 500; }
.srj-compare__img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; margin-top: auto; }
.srj-compare__badge { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -60%); background: var(--srj-navy); color: var(--srj-cyan); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; font-weight: 700; white-space: nowrap; }
.srj-compare__col.is-featured .srj-compare__head { padding-top: 18px; }
.srj-compare__cell { justify-content: center; border-bottom: 1px solid var(--srj-border); }
.srj-compare__cell--price { height: 52px; }
.srj-compare__cta { padding: 10px 12px 14px; margin-top: auto; }
.srj-yes, .srj-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.srj-yes { background: #18b67a; color: var(--srj-white); }
.srj-no { background: #d4dbdf; color: var(--srj-white); }

/* ---------- Info / quick / reviews ---------- */
.srj-info { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--srj-cols, 4), minmax(0, 1fr)); gap: 24px; }
.srj-info li { display: flex; gap: 14px; align-items: flex-start; }
.srj-info h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 4px; }
.srj-info p { font-size: 13px; color: var(--srj-muted); margin: 0; white-space: pre-line; }
.srj-quick__item { display: flex; gap: 16px; align-items: flex-start; background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 18px; box-shadow: var(--srj-shadow); }
.srj-quick__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--srj-navy); color: var(--srj-white); flex: none; }
.srj-quick--cards .srj-quick__icon { background: transparent; color: var(--srj-ink); width: 40px; height: 40px; }
.srj-quick__item h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.srj-quick__item p { font-size: 13px; color: var(--srj-muted); margin: 0; }
.srj-quick__item > div { flex: 1; }
.srj-review { margin: 0; background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 22px; box-shadow: var(--srj-shadow); }
.srj-review__stars { color: #d0d8dc; display: flex; gap: 2px; margin-bottom: 10px; }
.srj-review__stars .is-on { color: #f5b301; fill: #f5b301; }
.srj-review blockquote { margin: 0 0 14px; font-size: 15px; color: var(--srj-ink); }
.srj-review figcaption span { color: var(--srj-muted); font-size: 13px; }

/* ---------- Updates ---------- */
.srj-updates { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: center; }
.srj-box { display: flex; gap: 18px; align-items: flex-start; background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 22px; box-shadow: var(--srj-shadow); }
.srj-box h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.srj-box p { font-size: 13.5px; color: var(--srj-muted); margin: 0 0 10px; }
.srj-updates__visual { position: relative; display: flex; align-items: center; gap: 12px; }
.srj-updates__phone { width: 170px; border-radius: 22px; box-shadow: var(--srj-shadow-lg); }
.srj-updates__bubble { background: var(--srj-tint); border-radius: 16px; padding: 18px; font-size: 13px; color: var(--srj-ink); margin: 0; position: relative; }
.srj-updates__bubble .srj-icon { display: block; margin: 8px 0 0 auto; }
.srj-updates__bubble::before { content: ""; position: absolute; left: -10px; top: 40%; border: 10px solid transparent; border-right-color: var(--srj-tint); border-left: 0; }

/* ---------- Overview / included ---------- */
.srj-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.srj-overview__media { border-radius: var(--srj-radius); overflow: hidden; box-shadow: var(--srj-shadow-lg); }
.srj-overview__media img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.srj-overview__body p { font-size: 15px; }
.srj-stats { display: flex; gap: 28px; margin: 18px 0 22px; flex-wrap: wrap; }
.srj-stat { display: flex; align-items: center; gap: 14px; }
.srj-stat small { display: block; font-size: 13px; color: var(--srj-text); line-height: 1.2; }
.srj-stat > div > small:last-child { display: inline; }
.srj-stat strong { font-size: 30px; font-weight: 800; color: var(--srj-ink); letter-spacing: -.02em; }
.srj-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--srj-cols, 5), minmax(0, 1fr)); gap: 14px; }
.srj-included li { background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 22px 16px; text-align: center; box-shadow: var(--srj-shadow); }
.srj-included .srj-soft-icon { margin: 0 auto 12px; }
.srj-included h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.srj-included p { font-size: 13px; color: var(--srj-muted); margin: 0; }

/* ---------- Help strip / contact ---------- */
.srj-sec--help { padding: 30px 0; }
.srj-help { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.srj-help__intro p { margin: 4px 0 0; font-size: 14px; }
.srj-help__list { list-style: none; display: flex; margin: 0; padding: 0; }
.srj-help__list li { padding: 0 26px; border-left: 1px solid #b9e4e3; }
.srj-help__list li:first-child { border-left: 0; }
.srj-help__list a { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--srj-ink); }
.srj-help__list .srj-icon { color: var(--srj-teal); }
.srj-help__list strong { display: block; font-size: 14px; }
.srj-help__list small { display: block; font-size: 12px; color: var(--srj-muted); }
.srj-help__list b { display: block; font-size: 14px; }

.srj-contact--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.srj-contact--split .srj-contact__form { padding-right: 40px; border-right: 1px solid var(--srj-border); }
.srj-contact--split .srj-contact__details { padding-left: 40px; }
.srj-form { display: grid; gap: 16px; }
.srj-field label { display: block; font-weight: 600; font-size: 14px; color: var(--srj-ink); margin-bottom: 8px; }
.srj-req { color: var(--srj-danger); }
.srj-input { position: relative; }
.srj-input > .srj-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--srj-muted); width: 20px; height: 20px; pointer-events: none; }
.srj-input--area > .srj-icon { top: 18px; transform: none; }
.srj-input input, .srj-input textarea, .srj-input select, .srj-select { width: 100%; min-height: 52px; border: 1px solid var(--srj-border); border-radius: 8px; padding: 12px 16px 12px 48px; font: inherit; font-size: 15px; color: var(--srj-ink); background: var(--srj-white); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.srj-input textarea { min-height: 170px; resize: vertical; }
.srj-input input:focus, .srj-input textarea:focus, .srj-input select:focus { outline: none; border-color: var(--srj-teal); box-shadow: 0 0 0 4px rgba(0, 240, 232, .16); }
.srj-input input::placeholder, .srj-input textarea::placeholder { color: #9aa9b1; }
.srj-field.has-error input, .srj-field.has-error textarea, .srj-field.has-error select { border-color: var(--srj-danger); }
.srj-field__error { color: var(--srj-danger); font-size: 13px; margin: 6px 0 0; min-height: 0; }
.srj-field__error:empty { display: none; }
.srj-count { text-align: right; font-size: 12px; color: var(--srj-muted); margin: 4px 0 0; }
.srj-hp { position: absolute !important; left: -9999px; }
.srj-form__status { margin: 0; font-weight: 500; }
.srj-form__status.is-ok { color: var(--srj-success); }
.srj-form__status.is-err { color: var(--srj-danger); }
.srj-form__privacy { font-size: 12px; color: var(--srj-muted); margin: 0; }
.srj-details { list-style: none; margin: 0 0 22px; padding: 0; }
.srj-details li { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--srj-border); }
.srj-details li:last-child { border-bottom: 0; }
.srj-details strong { display: block; color: var(--srj-ink); font-size: 15px; }
.srj-details b { display: block; font-size: 17px; color: var(--srj-ink); }
.srj-details b a { text-decoration: none; }
.srj-details small { display: block; font-size: 13px; color: var(--srj-muted); }
.srj-hours { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 2px 0 0; color: var(--srj-ink); font-size: 15px; }
.srj-hours dd { margin: 0; font-weight: 700; }
.srj-mapcard { display: grid; grid-template-columns: 1fr 1fr; background: var(--srj-navy); border-radius: var(--srj-radius); overflow: hidden; color: var(--srj-white); }
.srj-mapcard__text { padding: 22px; }
.srj-mapcard h3 { color: var(--srj-white); font-size: 16px; margin: 0 0 14px; }
.srj-mapcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.srj-mapcard li { display: flex; gap: 10px; align-items: center; }
.srj-mapcard li .srj-icon { color: var(--srj-navy); background: var(--srj-cyan); border-radius: 50%; stroke-width: 2.4; }
.srj-mapcard__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srj-channel { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--srj-border); border-radius: var(--srj-radius); padding: 22px; background: var(--srj-white); box-shadow: var(--srj-shadow); }
.srj-channel h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.srj-channel p { font-size: 13.5px; color: var(--srj-muted); margin: 0 0 14px; }
.srj-channel > div { flex: 1; }
.srj-channel .srj-btn { width: 100%; }

/* ---------- Coverage / areas / zones ---------- */
.srj-sec--coverage { padding: 0; overflow: hidden; }
.srj-coverage { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 30px; min-height: 380px; }
.srj-coverage__text { padding: 50px 0; }
.srj-coverage__map { align-self: stretch; margin-right: calc(-1 * max(var(--srj-gutter), (100vw - var(--srj-container)) / 2)); position: relative; }
.srj-coverage__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srj-coverage__map::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 18%; background: linear-gradient(90deg, #fff, transparent); z-index: 1; }
.srj-checker { position: relative; display: flex; align-items: center; gap: 14px; background: var(--srj-tint); border: 1px solid var(--srj-tint-2); border-radius: var(--srj-radius); padding: 14px 16px; margin-top: 20px; flex-wrap: wrap; }
.srj-checker__pin { color: var(--srj-teal); }
.srj-checker__body { flex: 1; min-width: 200px; }
.srj-checker label strong { display: block; color: var(--srj-ink); font-size: 15px; }
.srj-checker label small { display: block; font-size: 13px; color: var(--srj-muted); }
.srj-checker input { width: 100%; margin-top: 8px; height: 42px; border: 1px solid var(--srj-border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; }
.srj-checker__result { width: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.srj-checker__result:empty { display: none; }
.srj-checker__result.is-yes { color: var(--srj-success); }
.srj-checker__result.is-no { color: var(--srj-danger); }
.srj-area { background: var(--srj-white); border: 1px solid var(--srj-border); border-radius: var(--srj-radius); overflow: hidden; box-shadow: var(--srj-shadow); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.srj-area:hover { transform: translateY(-3px); box-shadow: var(--srj-shadow-lg); }
.srj-area__media { aspect-ratio: 16 / 7; background: #dfe7ea; }
.srj-area__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srj-area__body { display: flex; gap: 10px; align-items: center; padding: 12px 14px 14px; flex: 1; }
.srj-area__body > div { flex: 1; }
.srj-area h3 { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.srj-area h3 a { text-decoration: none; }
.srj-area p { font-size: 12.5px; color: var(--srj-muted); margin: 0; line-height: 1.45; }
.srj-zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--srj-cols, 7), minmax(0, 1fr)); gap: 12px; }
.srj-zones a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 10px; border: 1px solid var(--srj-border); border-radius: var(--srj-radius); text-decoration: none; background: var(--srj-white); box-shadow: var(--srj-shadow); transition: border-color .2s, transform .2s; }
.srj-zones a:hover { border-color: var(--srj-cyan); transform: translateY(-2px); }
.srj-zones .srj-icon { color: var(--srj-ink); }
.srj-zones strong { color: var(--srj-ink); font-size: 14px; }
.srj-zones small { color: var(--srj-muted); font-size: 12.5px; }
.srj-area-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.srj-area-intro__text > p { font-size: 15px; }
.srj-area-intro__map { border-radius: var(--srj-radius); overflow: hidden; box-shadow: var(--srj-shadow-lg); }
.srj-area-intro__map img { width: 100%; display: block; }
.srj-place-types { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.srj-place-types .srj-soft-icon { margin-bottom: 10px; }
.srj-place-types h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.srj-place-types p { font-size: 12.5px; color: var(--srj-muted); margin: 0; }

/* ---------- Prose ---------- */
.srj-prose { max-width: 820px; font-size: 16px; }
.srj-prose h2 { font-size: 24px; margin-top: 1.6em; }
.srj-prose h3 { font-size: 19px; margin-top: 1.4em; }
.srj-prose a { color: var(--srj-teal); }
.srj-prose img { border-radius: var(--srj-radius); }
.srj-featured { border-radius: var(--srj-radius); margin-bottom: 24px; }
.srj-meta { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--srj-muted); margin: 0 0 6px; }
.nav-links { display: flex; gap: 8px; margin-top: 30px; }
.nav-links .page-numbers { padding: 8px 14px; border: 1px solid var(--srj-border); border-radius: 6px; text-decoration: none; }
.nav-links .current { background: var(--srj-cyan); border-color: var(--srj-cyan); color: var(--srj-navy); }

/* ---------- Footer ---------- */
.srj-footer { position: relative; background: var(--srj-navy) radial-gradient(1200px 400px at 70% 0%, rgba(0, 240, 232, .06), transparent 60%); padding-top: 46px; overflow: hidden; }
.srj-footer::before { content: "CLEAN"; position: absolute; right: 8%; bottom: 20px; font-family: var(--srj-script); font-size: 160px; color: rgba(255, 255, 255, .025); transform: rotate(-6deg); pointer-events: none; line-height: 1; }
.srj-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr 1.2fr auto; gap: 26px; padding-bottom: 34px; position: relative; }
.srj-footer__brand img { height: 64px; width: auto; }
.srj-script { font-family: var(--srj-script); color: var(--srj-white); font-size: 20px; line-height: 1.2; margin: 18px 0 0; transform: rotate(-4deg); transform-origin: left; max-width: 240px; }
.srj-footer__title { color: var(--srj-white) !important; font-size: 13.5px; font-weight: 600; margin: 0 0 12px; }
.srj-footer__links, .srj-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.srj-footer__links a, .srj-footer__contact a { color: #c3d1d7; text-decoration: none; font-size: 13px; }
.srj-footer__links a:hover, .srj-footer__contact a:hover { color: var(--srj-cyan); }
.srj-footer__contact { gap: 10px; }
.srj-footer__contact a { display: flex; gap: 10px; align-items: center; }
.srj-footer__contact .srj-icon { color: var(--srj-cyan); }
.srj-social { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; }
.srj-social a { color: var(--srj-white); display: inline-grid; place-items: center; width: 30px; height: 30px; }
.srj-social a:hover { color: var(--srj-cyan); }
.srj-footer__area { display: flex; gap: 10px; font-size: 13px; color: #c3d1d7; }
.srj-footer__area .srj-icon { color: var(--srj-cyan); }
.srj-footer__stamp { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--srj-script); color: var(--srj-white); font-size: 11px; line-height: 1.15; text-transform: uppercase; gap: 4px; }
.srj-footer__stamp img { width: 64px; height: auto; }
.srj-footer__stamp strong { font-weight: 400; font-size: 14px; }
.srj-footer__bar { border-top: 1px solid rgba(255, 255, 255, .08); padding: 14px 0; background: #01090d; }
.srj-footer__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.srj-footer__bar p { margin: 0; font-size: 12.5px; color: #b5c4ca; }
.srj-footer__legal { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; }
.srj-footer__legal li + li { border-left: 1px solid rgba(255, 255, 255, .25); }
.srj-footer__legal a { display: block; padding: 0 12px; font-size: 12.5px; color: #c3d1d7; text-decoration: none; }
.srj-wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 950; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); transition: transform .2s; }
.srj-wa-float:hover { transform: scale(1.07); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
	.srj-menu { gap: 20px; }
	.srj-grid--6 { --srj-g: 3; }
	.srj-grid--5 { --srj-g: 3; }
	.srj-features { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
	.srj-feature:nth-child(3n+1) { border-left: 0; padding-left: 0; }
	.srj-footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr 1fr; }
	.srj-footer__stamp { display: none; }
	.srj-zones { grid-template-columns: repeat(4, 1fr); }
	.srj-included { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	:root { --srj-sec-pad: 56px; --srj-header-h: 68px; }
	.srj-burger { display: block; margin-left: auto; }
	.srj-header__cta { display: none; }
	.srj-burger[aria-expanded="true"] .srj-burger__open { display: none; }
	.srj-burger[aria-expanded="true"] .srj-burger__close { display: block; }
	.srj-nav { position: fixed; inset: var(--srj-header-h) 0 0 0; background: var(--srj-navy); flex-direction: column; justify-content: flex-start; padding: 20px var(--srj-gutter) 40px; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; visibility: hidden; }
	.admin-bar .srj-nav { top: calc(var(--srj-header-h) + 46px); }
	.srj-nav.is-open { transform: none; visibility: visible; }
	.srj-menu { flex-direction: column; gap: 0; }
	.srj-menu a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.srj-menu > li > a::after { display: none; }
	.srj-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 0 14px; display: none; }
	.srj-menu li.is-open > .sub-menu { display: block; }
	.srj-menu .menu-item-has-children > a { display: flex; justify-content: space-between; }
	.srj-menu .menu-item-has-children > a::before { content: "+"; order: 2; color: var(--srj-cyan); }
	.srj-menu li.is-open > a::before { content: "–"; }
	.srj-nav__mobile-cta { display: grid; gap: 14px; margin-top: 24px; }
	.srj-nav__wa { color: var(--srj-white); text-decoration: none; display: flex; gap: 10px; align-items: center; justify-content: center; }
	body.srj-nav-open { overflow: hidden; }
	.srj-hero__content { width: auto; max-width: 600px; }
	.srj-hero { --u: 1.25px; }
	.srj-hero__inner, .srj-hero--fit .srj-hero__inner { min-height: 420px; padding-top: 44px; padding-bottom: 44px; }
	.srj-hero .srj-hero__title { font-size: clamp(40px, 8vw, 64px); }
	.srj-hero .srj-hero__subtitle { font-size: 18px; }
	.srj-hero .srj-hero__text { font-size: 15px; }
	.srj-hero .srj-eyebrow { font-size: 12px; }
	.srj-hero .srj-btn { min-height: 48px; font-size: 14px; padding: 0 22px; }
	.srj-hero__media img { object-position: 72% center; }
	.srj-hero__media::before { background: linear-gradient(90deg, rgba(2, 17, 24, .95) 0%, rgba(2, 17, 24, .8) 45%, rgba(2, 17, 24, .35) 100%); }
	.srj-trustbar__list { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
	.srj-trustbar__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
	.srj-grid--4 { --srj-g: 2; }
	.srj-steps { grid-template-columns: repeat(2, 1fr); }
	.srj-steps--cards { grid-template-columns: repeat(3, 1fr); }
	.srj-steps--cards .srj-step::after { display: none; }
	.srj-steps--todo { grid-template-columns: 1fr 1fr; }
	.srj-faq__group { grid-template-columns: 1fr; gap: 14px; }
	.srj-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.srj-compare__labels { display: none; }
	.srj-compare__cell { justify-content: space-between; padding: 0 12px; }
	.srj-compare__cell::before { content: attr(data-label); font-size: 12.5px; color: var(--srj-text); }
	.srj-compare__cell--price { justify-content: center; }
	.srj-compare__cell--price::before { display: none; }
	.srj-updates { grid-template-columns: 1fr; }
	.srj-overview, .srj-area-intro, .srj-coverage, .srj-contact--split { grid-template-columns: 1fr; }
	.srj-contact--split .srj-contact__form { padding-right: 0; border-right: 0; padding-bottom: 40px; }
	.srj-contact--split .srj-contact__details { padding-left: 0; }
	.srj-coverage__map { margin: 0 calc(-1 * var(--srj-gutter)); }
	.srj-coverage__map::before { display: none; }
	.srj-coverage__text { padding: 50px 0 10px; }
	.srj-info { grid-template-columns: repeat(2, 1fr); }
	.srj-cta__media { width: 100%; opacity: .35; }
	.srj-cta__inner { flex-direction: column; align-items: flex-start; }
	.srj-cta .srj-btn { margin-right: 0; flex: none; }
.srj-cta .srj-cta__text { max-width: none; flex: 0 1 auto; min-width: 0; }
	.srj-help__list { flex-wrap: wrap; gap: 18px; }
	.srj-help__list li { padding: 0; border: 0; }
}

@media (max-width: 782px) {
	.admin-bar .srj-header { top: 46px; }
}

@media (max-width: 680px) {
	:root { --srj-gutter: 16px; --srj-sec-pad: 46px; }
	.srj-header__brand img, .srj-logo img, .srj-header .custom-logo { height: 46px; }
	.srj-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.srj-hero__inner { min-height: 0 !important; padding-top: 44px; padding-bottom: 44px; }
	.srj-hero__media img { object-position: 70% center; }
	.srj-btns .srj-btn { flex: 1 1 100%; }
	.srj-trustbar__list { grid-template-columns: 1fr 1fr; }
	.srj-trustbar__item { border-left: 0 !important; padding: 2px 0 !important; }
	.srj-grid--3, .srj-grid--4, .srj-grid--5, .srj-grid--6 { --srj-g: 2; gap: 12px; }
	.srj-grid--2 { --srj-g: 1; }
	.srj-channels, .srj-quick, .srj-packages, .srj-reviews { --srj-g: 1 !important; }
	.srj-cards--priced, .srj-cards--button { --srj-g: 1 !important; }
	.srj-card__body { padding: 28px 12px 12px; }
	.srj-steps, .srj-steps--cards, .srj-steps--todo { grid-template-columns: 1fr; gap: 18px; }
	.srj-features { grid-template-columns: 1fr; }
	.srj-feature { border-left: 0 !important; padding: 0 !important; }
	.srj-compare { grid-template-columns: 1fr; }
	.srj-included { grid-template-columns: 1fr 1fr; }
	.srj-info { grid-template-columns: 1fr; }
	.srj-zones { grid-template-columns: repeat(2, 1fr); }
	.srj-place-types { grid-template-columns: 1fr 1fr; }
	.srj-mapcard { grid-template-columns: 1fr; }
	.srj-mapcard__map { max-height: 220px; }
	.srj-updates__visual { flex-direction: column; }
	.srj-footer__grid { grid-template-columns: 1fr 1fr; }
	.srj-footer__brand { grid-column: 1 / -1; }
	.srj-footer__bar-inner { flex-direction: column; text-align: center; }
	.srj-hero__features li { padding: 6px 12px 6px 0; border-left: 0; }
	.srj-stats { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Mockup-accurate card & step imagery: aspect ratios and badge positions match
   the source mockups so the overlaid icon badges sit exactly where they were drawn.
   ========================================================================== */
.srj-cards { --ar: 211 / 95; --bw: 25%; --bl: 3.8%; --by: 46%; --pt: 15%; }
.srj-cards--set-home { --ar: 135 / 96; --bw: 31%; --bl: 10.4%; --by: 57%; --pt: 20%; }
.srj-cards--set-services { --ar: 211 / 95; --bw: 25%; --bl: 3.8%; --by: 46%; --pt: 15%; }
.srj-cards--set-pricing { --ar: 205 / 72; --bw: 23%; --bl: 2%; --by: 56%; --pt: 15%; }
.srj-cards--set-fourways { --ar: 166 / 89; --bw: 27.5%; --bl: 3%; --by: 54%; --pt: 17%; }
.srj-cards--addon { --ar: 138 / 61; --bw: 34%; --bl: 3.3%; --by: 56%; --pt: 19%; }
.srj-cards--addon.srj-cards--set-pricing { --ar: 167 / 43; --bw: 27.5%; --bl: 1.5%; --by: 57%; --pt: 16%; }
.srj-cards--addon.srj-cards--set-std { --ar: 162 / 70; --bw: 28.4%; --bl: 2.5%; --by: 54%; --pt: 16%; }
.srj-cards .srj-card__media, .srj-cards--addon .srj-card__media, .srj-cards--compact .srj-card__media { aspect-ratio: var(--ar); height: auto; }
.srj-cards .srj-card__badge { width: var(--bw); height: auto; aspect-ratio: 1 / 1; left: var(--bl); bottom: 0; transform: translateY(var(--by)); max-width: 86px; min-width: 38px; }
.srj-cards .srj-card__badge .srj-icon { width: 46%; height: 46%; }
.srj-cards .srj-card__body { padding-top: var(--pt); }
.srj-cards--addon .srj-card__badge { width: var(--bw); height: auto; bottom: 0; }

.srj-steps--cards .srj-step__media { aspect-ratio: 177 / 151; }
.srj-steps--cards .srj-step__num { width: 21.5%; height: auto; aspect-ratio: 1 / 1; top: 0; left: 6.2%; transform: translateY(-37%); font-size: clamp(14px, 1.4vw, 20px); border-width: 3px; max-width: 54px; }
.srj-steps--cards .srj-step__icon { width: 27%; height: auto; aspect-ratio: 1 / 1; left: 4.5%; bottom: 0; transform: translateY(23%); max-width: 66px; }
.srj-steps--cards .srj-step:nth-child(2) .srj-step__icon { left: auto; right: 4%; }
.srj-steps--cards .srj-step__icon .srj-icon { width: 46%; height: 46%; }
.srj-steps--cards .srj-step__media { overflow: visible; }
.srj-steps--cards .srj-step__media img { border-radius: var(--srj-radius) var(--srj-radius) 0 0; }
.srj-steps--cards .srj-step { overflow: visible; margin-top: 14px; }
.srj-steps--cards .srj-step__body { padding-top: 14%; }
.srj-steps--todo .srj-step__media { aspect-ratio: 285 / 129; }
.srj-steps--todo .srj-step__num { width: 14%; height: auto; aspect-ratio: 1 / 1; top: 0; left: 3.5%; transform: translateY(17%); font-size: clamp(14px, 1.3vw, 19px); max-width: 56px; }
.srj-steps--todo .srj-step__icon { width: 17.5%; height: auto; aspect-ratio: 1 / 1; left: 3.2%; bottom: 0; transform: translateY(-12%); max-width: 70px; }
.srj-steps--todo .srj-step__icon .srj-icon { width: 44%; height: 44%; }
.srj-steps--todo .srj-step__body { padding-top: 16px; }
.srj-ba-static__item { aspect-ratio: 210 / 117; }
.srj-compare__img { height: auto; aspect-ratio: 165 / 40; }

/* ==========================================================================
   Mockup-scale layout (≥1025px). The mockups are drawn at 941px wide and scale
   uniformly, so on desktop every key size is "mockup px × --u" with a floor
   that keeps 1024–1366px screens comfortable.
   ========================================================================== */
:root { --u: calc(min(100vw, 1920px) / 941); }

/* CTA band: full-width brush photo from the mockup */
.srj-cta { padding: 0; min-height: max(150px, calc(var(--u) * 80)); display: flex; align-items: center; background: var(--srj-navy); }
.srj-cta__media { inset: 0; width: auto; background-size: cover; background-position: right center; }
.srj-cta__media::before { background: linear-gradient(90deg, rgba(2, 17, 24, .55) 0%, rgba(2, 17, 24, .25) 55%, rgba(2, 17, 24, 0) 75%); }
.srj-cta__inner { justify-content: flex-start; gap: max(28px, calc(var(--u) * 36)); padding-top: max(24px, calc(var(--u) * 12)); padding-bottom: max(24px, calc(var(--u) * 12)); }
.srj-cta .srj-btn { margin-right: 0; flex: none; }
.srj-cta .srj-cta__text { max-width: none; flex: 0 1 auto; min-width: 0; }

/* Footer: graffiti wall background + hand-drawn art from the mockup */
.srj-footer { background: var(--srj-navy) var(--srj-footer-bg, none) center / cover no-repeat; }
.srj-footer::before { content: none; }
.srj-footer::after { content: ""; position: absolute; inset: 0; background: rgba(2, 17, 24, .35); pointer-events: none; }
.srj-footer > * { position: relative; z-index: 1; }
.srj-script--art { transform: none; margin-top: 14px; }
.srj-script--art img { width: min(190px, 100%); height: auto; display: block; }
.srj-footer__stamp img { width: clamp(72px, 5.4vw, 110px); height: auto; }
.srj-footer__stamp { display: flex; }

@media (min-width: 1025px) {
	.srj-sec { padding: max(40px, calc(var(--u) * 20)) 0; }
	.srj-sec + .srj-sec:not(.srj-dark):not(.srj-tint) { padding-top: max(30px, calc(var(--u) * 10)); }
	.srj-head { margin-bottom: max(18px, calc(var(--u) * 9)); }
	.srj-site .srj-subtitle { margin-top: 2px; }
	.srj-site .srj-title { font-size: max(30px, calc(var(--u) * 27.5)); }
	.srj-site .srj-subtitle { font-size: max(15px, calc(var(--u) * 13.4)); margin-top: max(4px, calc(var(--u) * 2)); }
	.srj-link { font-size: max(14px, calc(var(--u) * 10)); }
	.srj-grid { gap: max(16px, calc(var(--u) * 11)); }

	/* Cards */
	.srj-site .srj-card__title { font-size: max(15px, calc(var(--u) * 14.6)); }
	.srj-cards--addon .srj-card__title { font-size: max(13.5px, calc(var(--u) * 10.4)); }
	.srj-card__text { font-size: max(13px, calc(var(--u) * 10.8)); line-height: 1.4; }
	.srj-cards--addon .srj-card__text { font-size: max(12px, calc(var(--u) * 8.8)); }
	.srj-card__body { padding-left: max(14px, calc(var(--u) * 13)); padding-right: max(14px, calc(var(--u) * 13)); }
	.srj-price small { font-size: max(13px, calc(var(--u) * 11)); }
	.srj-price strong { font-size: max(19px, calc(var(--u) * 16.5)); }
	.srj-price--lg strong { font-size: max(24px, calc(var(--u) * 20)); }
	.srj-arrow { width: max(32px, calc(var(--u) * 22)); height: max(32px, calc(var(--u) * 22)); }

	/* Steps */
	.srj-site .srj-step__title { font-size: max(16px, calc(var(--u) * 14)); }
	.srj-step__row p, .srj-step__body p { font-size: max(14px, calc(var(--u) * 11)); }
	.srj-step__num { width: max(34px, calc(var(--u) * 24)); height: max(34px, calc(var(--u) * 24)); font-size: max(15px, calc(var(--u) * 12)); }
	.srj-step__row .srj-step__icon { width: max(54px, calc(var(--u) * 40)); height: max(54px, calc(var(--u) * 40)); }
	.srj-step__row .srj-step__icon .srj-icon { width: 52%; height: 52%; }

	/* Packages, features, info, quick answers, FAQ */
	.srj-site .srj-package__title { font-size: max(16px, calc(var(--u) * 12.6)); }
	.srj-package p { font-size: max(13px, calc(var(--u) * 10)); }
	.srj-package__icon { width: max(36px, calc(var(--u) * 30)); height: max(36px, calc(var(--u) * 30)); }
	.srj-site .srj-feature__title { font-size: max(14.5px, calc(var(--u) * 11.4)); }
	.srj-feature p { font-size: max(13px, calc(var(--u) * 10.4)); }
	.srj-feature__icon { width: max(52px, calc(var(--u) * 40)); height: max(52px, calc(var(--u) * 40)); }
	.srj-feature__icon .srj-icon { width: 55%; height: 55%; }
	.srj-site .srj-info h3, .srj-site .srj-quick__item h3, .srj-site .srj-included h3, .srj-site .srj-area h3 { font-size: max(15px, calc(var(--u) * 11.6)); }
	.srj-info p, .srj-quick__item p, .srj-included p, .srj-area p { font-size: max(13px, calc(var(--u) * 9.8)); }
	.srj-faq__q button { font-size: max(14.5px, calc(var(--u) * 11)); }
	.srj-site .srj-faq__cat h3 { font-size: max(20px, calc(var(--u) * 15)); }

	/* CTA type */
	.srj-cta .srj-eyebrow { font-size: max(11px, calc(var(--u) * 8.5)); }
	.srj-site .srj-cta__title { font-size: max(26px, calc(var(--u) * 23)); white-space: nowrap; }
	.srj-cta__text p { font-size: max(15px, calc(var(--u) * 12.6)); }
	.srj-cta .srj-btn { min-height: max(52px, calc(var(--u) * 38)); padding: 0 max(26px, calc(var(--u) * 22)); font-size: max(15px, calc(var(--u) * 11)); }

	/* Header */
	.srj-header__inner { min-height: max(72px, calc(var(--u) * 48)); }
	.srj-header__brand img, .srj-logo img, .srj-header .custom-logo { height: max(52px, calc(var(--u) * 40)); max-width: none; }
	.srj-menu a { font-size: max(14px, calc(var(--u) * 9.8)); }
	.srj-header .srj-btn--sm { min-height: max(42px, calc(var(--u) * 30)); font-size: max(13px, calc(var(--u) * 9.4)); padding: 0 max(18px, calc(var(--u) * 16)); }

	/* Trust bar */
	.srj-trustbar { padding: max(16px, calc(var(--u) * 10)) 0; }
	.srj-trustbar strong { font-size: max(13.5px, calc(var(--u) * 9.6)); }
	.srj-trustbar small { font-size: max(12px, calc(var(--u) * 8)); }
	.srj-trustbar__icon { width: max(34px, calc(var(--u) * 26)); height: max(34px, calc(var(--u) * 26)); }

	/* Footer */
	.srj-footer { padding-top: max(36px, calc(var(--u) * 16)); }
	.srj-footer__brand img:not(.srj-script--art img) { height: max(60px, calc(var(--u) * 46)); }
	.srj-site .srj-footer__title { font-size: max(13.5px, calc(var(--u) * 9.6)); }
	.srj-footer__links a, .srj-footer__contact a, .srj-footer__area { font-size: max(13px, calc(var(--u) * 9.4)); }
	.srj-footer__grid { padding-bottom: max(28px, calc(var(--u) * 12)); }
}
@media (max-width: 1024px) {
	.srj-cta { min-height: 0; }
	.srj-cta__media { background-position: 80% center; }
	.srj-cta__media::before { background: rgba(2, 17, 24, .65); }
	.srj-site .srj-cta__title { white-space: normal; }
}

/* Before/after grid: captions are used as alt text only (mockup shows none). */
.srj-dark .srjba-item figcaption, .srj-ba-static figcaption { display: none; }

/* Footer density + payments/updates proportions as per mockups */
.srj-footer::after { background: rgba(2, 17, 24, .18); }
.srj-footer__links { gap: 0; }
.srj-footer__links a { line-height: 1.55; }
@media (min-width: 1025px) {
	.srj-updates { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 290); gap: calc(var(--u) * 16); }
	.srj-updates__phone { width: calc(var(--u) * 135); border-radius: calc(var(--u) * 16); }
	.srj-updates__bubble { width: calc(var(--u) * 125); font-size: max(13px, calc(var(--u) * 10.4)); padding: calc(var(--u) * 12); }
	.srj-site .srj-box h3 { font-size: max(16px, calc(var(--u) * 12.6)); }
	.srj-box p { font-size: max(13.5px, calc(var(--u) * 10.4)); }
	.srj-box .srj-soft-icon--lg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
	.srj-box .srj-paymarks--mini .srj-paymark { font-size: calc(var(--u) * 14); }
	.srj-quick__icon { width: calc(var(--u) * 42); height: calc(var(--u) * 42); }
	.srj-footer__grid { grid-template-columns: 1.6fr 1fr 1.4fr 1fr 1.3fr auto; }
}
@media (min-width: 1025px) {
	.srj-social a { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
	.srj-social .srj-icon { width: 100%; height: 100%; }
	.srj-footer__contact .srj-icon, .srj-footer__area .srj-icon { width: max(18px, calc(var(--u) * 13)); height: max(18px, calc(var(--u) * 13)); }
}

@media (min-width: 1025px) {
	.srj-hero__features { flex-wrap: nowrap; }
	.srj-hero__features li { white-space: nowrap; }
}