/* ── SERVICE ACCENT — GOLD ─────────────────────────────────────────────────── All service pages (archive + single) use gold as the supporting accent colour instead of the site-wide teal. --svc-accent → full gold (#fcd664) — rules, icons, borders --svc-accent-text → dark amber — text labels on light backgrounds ─────────────────────────────────────────────────────────────────────────── */ /* Defined on BOTH the body class and the content wrapper so the variable resolves everywhere — including the header, which sits outside .service-single. */ .single-service, .post-type-archive-service, .service-single, .svc-archive { --svc-accent: var(--jsr-color-gold-400); /* #fcd664 */ --svc-accent-text: #7a5c00; /* dark amber, WCAG AA on white */ } /* ── NAV — GOLD ON SERVICE PAGES ───────────────────────────────────────────── WordPress adds .single-service to on all single service posts. Full gold background nav — matches the gold hero section directly. ─────────────────────────────────────────────────────────────────────────── */ .single-service .jsr-site-header, .post-type-archive-service .jsr-site-header { background: var(--svc-accent); border-bottom: 1px solid rgb(59 71 82 / 14%); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 8%); color: var(--jsr-color-slate-800); } /* Dark logo — remove the invert filter used on dark header */ .single-service .jsr-site-header__logo img, .post-type-archive-service .jsr-site-header__logo img { filter: none; opacity: 1; } /* Nav links: dark text on gold */ .single-service .jsr-quick-nav a, .post-type-archive-service .jsr-quick-nav a { color: rgb(59 71 82 / 75%); } .single-service .jsr-quick-nav a:hover, .single-service .jsr-quick-nav a:focus, .post-type-archive-service .jsr-quick-nav a:hover, .post-type-archive-service .jsr-quick-nav a:focus { color: var(--jsr-color-slate-800); } /* Service area link: dark on gold */ .single-service .jsr-service-area, .post-type-archive-service .jsr-service-area { color: rgb(59 71 82 / 70%); } .single-service .jsr-service-area:hover, .post-type-archive-service .jsr-service-area:hover { color: var(--jsr-color-slate-800); } /* Contact bubble: dark slate outlined pill on gold */ .single-service .jsr-contact-bubble, .post-type-archive-service .jsr-contact-bubble { border-color: rgb(59 71 82 / 45%); color: var(--jsr-color-slate-800); } .single-service .jsr-contact-bubble:hover, .post-type-archive-service .jsr-contact-bubble:hover { background: rgb(59 71 82 / 10%); border-color: var(--jsr-color-slate-800); color: var(--jsr-color-slate-800); } /* Hamburger: dark lines on gold header */ .single-service .jsr-hamburglar .burger-bun-top, .single-service .jsr-hamburglar .burger-bun-bot, .single-service .jsr-hamburglar .burger-filling, .post-type-archive-service .jsr-hamburglar .burger-bun-top, .post-type-archive-service .jsr-hamburglar .burger-bun-bot, .post-type-archive-service .jsr-hamburglar .burger-filling { background: var(--jsr-color-slate-800); } .single-service .jsr-hamburglar .path, .post-type-archive-service .jsr-hamburglar .path { stroke: var(--jsr-color-teal-700); } .single-service .jsr-hamburglar .path-rotation::before, .post-type-archive-service .jsr-hamburglar .path-rotation::before { background: var(--jsr-color-teal-700); } /* ── INDUSTRY ACCENT — MINT ──────────────────────────────────────────────── */ .single-industry, .post-type-archive-industry, .industry-single { --svc-accent: var(--jsr-color-teal-300); --svc-accent-text: var(--jsr-color-teal-700); --industry-dark: #1e2832; --industry-gray: #f2f3f3; } .single-industry .jsr-site-header, .post-type-archive-industry .jsr-site-header { background: var(--svc-accent); border-bottom: 1px solid rgb(59 71 82 / 14%); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 8%); color: var(--jsr-color-slate-800); } .single-industry .jsr-site-header__logo img, .post-type-archive-industry .jsr-site-header__logo img { filter: none; opacity: 1; } .single-industry .jsr-quick-nav a, .single-industry .jsr-service-area, .post-type-archive-industry .jsr-quick-nav a, .post-type-archive-industry .jsr-service-area { color: rgb(59 71 82 / 72%); } .single-industry .jsr-quick-nav a:hover, .single-industry .jsr-quick-nav a:focus, .single-industry .jsr-service-area:hover, .post-type-archive-industry .jsr-quick-nav a:hover, .post-type-archive-industry .jsr-quick-nav a:focus, .post-type-archive-industry .jsr-service-area:hover { color: var(--jsr-color-slate-800); } .single-industry .jsr-contact-bubble, .post-type-archive-industry .jsr-contact-bubble { border-color: rgb(59 71 82 / 45%); color: var(--jsr-color-slate-800); } .single-industry .jsr-contact-bubble:hover, .post-type-archive-industry .jsr-contact-bubble:hover { background: rgb(59 71 82 / 10%); border-color: var(--jsr-color-slate-800); color: var(--jsr-color-slate-800); } /* Hamburger: dark lines on mint header */ .single-industry .jsr-hamburglar .burger-bun-top, .single-industry .jsr-hamburglar .burger-bun-bot, .single-industry .jsr-hamburglar .burger-filling, .post-type-archive-industry .jsr-hamburglar .burger-bun-top, .post-type-archive-industry .jsr-hamburglar .burger-bun-bot, .post-type-archive-industry .jsr-hamburglar .burger-filling { background: var(--jsr-color-slate-800); } .single-industry .jsr-hamburglar .path, .post-type-archive-industry .jsr-hamburglar .path { stroke: var(--jsr-color-teal-700); } .single-industry .jsr-hamburglar .path-rotation::before, .post-type-archive-industry .jsr-hamburglar .path-rotation::before { background: var(--jsr-color-teal-700); } /* ── PEACH ACCENT — ABOUT + SERVICE AREAS ───────────────────────────────── */ .page-about, .page-service-areas, .jsr-peach-accent-page { --svc-accent: var(--jsr-color-coral-300); --svc-accent-text: #8f5848; --peach-surface: #f7f2ef; } .page-about .jsr-site-header, .page-service-areas .jsr-site-header, .jsr-peach-accent-page .jsr-site-header { background: var(--svc-accent); border-bottom: 1px solid rgb(59 71 82 / 14%); box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 8%); color: var(--jsr-color-slate-800); } .page-about .jsr-site-header__logo img, .page-service-areas .jsr-site-header__logo img, .jsr-peach-accent-page .jsr-site-header__logo img { filter: none; opacity: 1; } .page-about .jsr-quick-nav a, .page-about .jsr-service-area, .page-service-areas .jsr-quick-nav a, .page-service-areas .jsr-service-area, .jsr-peach-accent-page .jsr-quick-nav a, .jsr-peach-accent-page .jsr-service-area { color: rgb(59 71 82 / 72%); } .page-about .jsr-quick-nav a:hover, .page-about .jsr-quick-nav a:focus, .page-about .jsr-service-area:hover, .page-service-areas .jsr-quick-nav a:hover, .page-service-areas .jsr-quick-nav a:focus, .page-service-areas .jsr-service-area:hover, .jsr-peach-accent-page .jsr-quick-nav a:hover, .jsr-peach-accent-page .jsr-quick-nav a:focus, .jsr-peach-accent-page .jsr-service-area:hover { color: var(--jsr-color-slate-800); } .page-about .jsr-contact-bubble, .page-service-areas .jsr-contact-bubble, .jsr-peach-accent-page .jsr-contact-bubble { border-color: rgb(59 71 82 / 45%); color: var(--jsr-color-slate-800); } .page-about .jsr-contact-bubble:hover, .page-service-areas .jsr-contact-bubble:hover, .jsr-peach-accent-page .jsr-contact-bubble:hover { background: rgb(59 71 82 / 10%); border-color: var(--jsr-color-slate-800); color: var(--jsr-color-slate-800); } /* Hamburger: dark lines on peach header */ .page-about .jsr-hamburglar .burger-bun-top, .page-about .jsr-hamburglar .burger-bun-bot, .page-about .jsr-hamburglar .burger-filling, .page-service-areas .jsr-hamburglar .burger-bun-top, .page-service-areas .jsr-hamburglar .burger-bun-bot, .page-service-areas .jsr-hamburglar .burger-filling, .jsr-peach-accent-page .jsr-hamburglar .burger-bun-top, .jsr-peach-accent-page .jsr-hamburglar .burger-bun-bot, .jsr-peach-accent-page .jsr-hamburglar .burger-filling { background: var(--jsr-color-slate-800); } .page-about .jsr-hamburglar .path, .page-service-areas .jsr-hamburglar .path, .jsr-peach-accent-page .jsr-hamburglar .path { stroke: var(--jsr-color-teal-700); } .page-about .jsr-hamburglar .path-rotation::before, .page-service-areas .jsr-hamburglar .path-rotation::before, .jsr-peach-accent-page .jsr-hamburglar .path-rotation::before { background: var(--jsr-color-teal-700); } /* ── GLOBAL CLASS OVERRIDES (from pages.css) ─────────────────────────────── */ /* Any teal-coloured global element that appears on service pages → gold. */ .service-single .jsr-page-hero__eyebrow, .svc-archive .jsr-page-hero__eyebrow { color: var(--svc-accent); } .svc-archive .home-eyebrow { color: var(--svc-accent-text); } .svc-archive .home-eyebrow--mint { color: var(--svc-accent); } .svc-archive .home-rule--mint { background: var(--svc-accent); } .svc-archive .svc-archive-card__tag { color: var(--svc-accent-text); } .page-service-areas .jsr-page-hero__eyebrow, .page-about .home-eyebrow, .page-service-areas .home-eyebrow { color: var(--svc-accent-text); } .page-about .jsr-page-hero__eyebrow { color: var(--svc-accent); } .page-about .home-eyebrow--mint, .page-service-areas .home-eyebrow--mint { color: var(--svc-accent); } .page-about .home-rule--mint, .page-service-areas .home-rule--mint { background: var(--svc-accent); } .page-about .about-intro, .page-service-areas .service-areas-intro { background: var(--peach-surface); border-top-color: var(--svc-accent); } .page-about .about-intro__stat { border-top-color: rgb(59 71 82 / 42%); } .page-about .about-intro__num, .page-about .about-values__heading, .page-about .about-blake__heading, .page-service-areas .service-areas-intro__heading, .page-service-areas .service-areas-band__title, .page-service-areas .service-areas-faq__title { color: var(--jsr-color-slate-800); } .page-about .about-values, .page-service-areas .service-areas-faq { background: #ffffff; } .page-about .about-values__num, .page-about .about-blake__cred-label, .page-service-areas .service-area-card__label { color: var(--svc-accent-text); } .page-about .about-blake__content { background: var(--peach-surface); } .page-about .about-blake__credentials { border-top-color: rgb(59 71 82 / 42%); } .page-about .about-values__item, .page-about .about-blake__cred, .page-service-areas .service-area-card, .page-service-areas .service-areas-faq__item { border-color: rgb(59 71 82 / 42%); } .page-service-areas .service-areas-hero { background: var(--svc-accent); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: clamp(30rem, 62vh, 46rem); overflow: hidden; } .page-service-areas .service-areas-hero__content { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(3.25rem, 6vw, 5.75rem) clamp(1.5rem, 6vw, 5.5rem) clamp(3.25rem, 6vw, 5rem); } .page-service-areas .service-areas-hero__title { color: var(--jsr-color-slate-800); font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.95; margin: 0.35rem 0 1rem; max-width: 8ch; } .page-service-areas .service-areas-hero__excerpt { color: rgb(59 71 82 / 74%); font-size: clamp(1rem, 1.45vw, 1.15rem); line-height: 1.75; margin: 0; max-width: 32rem; } .page-service-areas .service-areas-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; } .page-service-areas .service-areas-hero__map { background: #d9e0dc; min-height: 26rem; } .page-service-areas .service-areas-hero__map iframe { border: 0; display: block; height: 100%; width: 100%; } .page-service-areas .service-areas-intro { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5.5rem); } .page-service-areas .service-areas-intro__inner { display: grid; gap: 3rem 4rem; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } .page-service-areas .service-areas-intro__heading { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin: 0.65rem 0 1.5rem; } .page-service-areas .service-areas-intro__copy p { color: var(--jsr-color-text-muted); font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.75; margin: 0 0 1rem; max-width: 38rem; } .page-service-areas .service-areas-intro__cards { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-service-areas .service-area-card { border-left: var(--jsr-divider); border-top: var(--jsr-divider); display: flex; flex-direction: column; gap: 0.35rem; padding: 1.75rem 1.5rem; } .page-service-areas .service-area-card:nth-child(1), .page-service-areas .service-area-card:nth-child(2) { border-top: 0; } .page-service-areas .service-area-card:nth-child(odd) { border-left: 0; } .page-service-areas .service-area-card__label { font-family: var(--jsr-font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .page-service-areas .service-area-card__title { color: var(--jsr-color-slate-800); font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.2; margin: 0; } .page-service-areas .service-areas-band { background-position: center; background-size: cover; min-height: clamp(24rem, 48vw, 34rem); position: relative; } .page-service-areas .service-areas-band__overlay { background: rgb(59 71 82 / 60%); inset: 0; position: absolute; } .page-service-areas .service-areas-band__content { align-items: center; display: grid; min-height: inherit; position: relative; } .page-service-areas .service-areas-band__inner { max-width: var(--jsr-content-width); padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); width: 100%; } .page-service-areas .service-areas-band__title { color: #ffffff; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.08; margin: 0 0 1rem; max-width: 18ch; } .page-service-areas .service-areas-band__sub { color: rgb(255 255 255 / 84%); font-size: 1rem; line-height: 1.75; margin: 0; max-width: 34rem; } .page-service-areas .service-areas-faq { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5.5rem); } .page-service-areas .service-areas-faq__inner { max-width: 100%; } .page-service-areas .service-areas-faq__header { margin-bottom: 2rem; } .page-service-areas .service-areas-faq__title { font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 1.1; margin: 0.5rem 0 0; max-width: 22ch; } .page-service-areas .service-areas-faq__list { display: grid; gap: 0; } .page-service-areas .service-areas-faq__item { border-top: var(--jsr-divider); padding: 1.25rem 0; } .page-service-areas .service-areas-faq__item:last-child { border-bottom: var(--jsr-divider); } .page-service-areas .service-areas-faq__item summary { cursor: pointer; font-family: var(--jsr-font-heading); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 700; list-style: none; } .page-service-areas .service-areas-faq__item summary::-webkit-details-marker { display: none; } .page-service-areas .service-areas-faq__item p { color: var(--jsr-color-text-muted); font-size: 0.96rem; line-height: 1.75; margin: 0.85rem 0 0; max-width: 38rem; } .page-service-areas .service-areas-cta { background: #f7f2ef; } @media (max-width: 900px) { .page-service-areas .service-areas-hero { grid-template-columns: 1fr; min-height: unset; } .page-service-areas .service-areas-hero__map { aspect-ratio: 16 / 9; min-height: unset; order: -1; } .page-service-areas .service-areas-intro__inner { gap: 2.5rem; grid-template-columns: 1fr; } } @media (max-width: 600px) { .page-service-areas .service-areas-intro__cards { grid-template-columns: 1fr; } .page-service-areas .service-area-card { border-left: 0; padding: 1.25rem 0; } .page-service-areas .service-area-card:nth-child(2) { border-top: var(--jsr-divider); } } /* ── SERVICE HERO — GOLD DRENCH ────────────────────────────────────────────── Override the dark photo hero from pages.css. 2-column: left = full gold background + text, right = photo. ─────────────────────────────────────────────────────────────────────────── */ .service-single .service-hero { background: var(--svc-accent); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: clamp(26rem, 60vh, 44rem); overflow: hidden; padding: 0; } /* Kill the dark overlay — not needed on gold background */ .service-single .service-hero::before { display: none; } .service-hero__left { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); } .service-hero__breadcrumb { color: var(--jsr-color-slate-800); font-family: var(--jsr-font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; margin-block-end: clamp(2rem, 5vw, 3.5rem); opacity: 0.6; text-transform: uppercase; } .service-hero__breadcrumb a { color: inherit; text-decoration: none; } .service-hero__breadcrumb a:hover { opacity: 1; } /* Specificity: 0,2,0 — beats pages.css .service-hero__title (0,1,0) */ .service-single .service-hero__title { color: var(--jsr-color-slate-800); font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.0; margin: 0; max-width: 16ch; } .service-hero__rule { background: var(--jsr-color-slate-800); block-size: 1px; inline-size: 100%; margin-block: clamp(1.5rem, 3vw, 2.5rem); opacity: 0.25; } /* Specificity: 0,2,0 — beats pages.css .service-hero__excerpt (0,1,0) */ .service-single .service-hero__excerpt { color: var(--jsr-color-slate-800); font-size: clamp(0.9rem, 1.3vw, 1.05rem); line-height: 1.68; margin: 0; max-width: 36rem; opacity: 0.8; } .service-hero__photo { background-position: center; background-size: cover; display: block; margin: 0; min-height: 100%; } /* ── SINGLE SERVICE PAGE ───────────────────────────────────────────────────── Full-width wrapper — every section controls its own max-width internally. ─────────────────────────────────────────────────────────────────────────── */ .service-single { background: var(--jsr-color-background); max-width: unset; padding-inline: 0; } /* ── INTRO — DARK ────────────────────────────────────────────────────────── */ /* Sits directly under the gold hero — dark slate creates the strong */ /* colour shift that mirrors the Englobe gold → dark alternation. */ .service-single__intro { background: var(--jsr-color-slate-800); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__intro h2 { display: none; } .service-single__intro p { color: rgb(255 255 255 / 72%); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.72; margin: 0; max-width: var(--jsr-reading-width); } /* ── OVERVIEW ────────────────────────────────────────────────────────────── */ .service-single__overview { align-items: start; border-bottom: var(--jsr-divider); display: grid; gap: 2rem 5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__overview > h2 { color: var(--jsr-color-slate-800); font-size: clamp(1.35rem, 2.4vw, 1.9rem); grid-column: 1; grid-row: 1 / 10; line-height: 1.15; margin: 0; position: sticky; top: calc(var(--jsr-header-h) + 2rem); } .service-single__overview > p, .service-single__overview > ul, .service-single__overview > ol, .service-single__overview > blockquote { color: var(--jsr-color-text-muted); font-size: clamp(0.9rem, 1.25vw, 1rem); grid-column: 2; line-height: 1.72; margin: 0 0 0.75rem; } .service-single__overview > *:last-child { margin-bottom: 0; } /* ── PREPARATION ─────────────────────────────────────────────────────────── */ .service-single__preparation { align-items: start; background: #f7f6f3; border-bottom: var(--jsr-divider); display: grid; gap: 2rem 5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__preparation > h2 { color: var(--jsr-color-slate-800); font-size: clamp(1.35rem, 2.4vw, 1.9rem); grid-column: 1; grid-row: 1 / 10; line-height: 1.15; margin: 0; position: sticky; top: calc(var(--jsr-header-h) + 2rem); } .service-single__preparation > p, .service-single__preparation > ul, .service-single__preparation > ol { color: var(--jsr-color-text-muted); font-size: clamp(0.9rem, 1.25vw, 1rem); grid-column: 2; line-height: 1.72; margin: 0 0 0.75rem; } .service-single__preparation > *:last-child { margin-bottom: 0; } /* ── STAGGERED PHOTO GRID ────────────────────────────────────────────────── */ .svc-photos { border-top: var(--jsr-divider); padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5.5rem); } .svc-photos__grid { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--jsr-content-width); } .svc-photos__card { display: flex; flex-direction: column; } .svc-photos__card--mid { margin-top: 3rem; } .svc-photos__img { aspect-ratio: 3 / 4; background-position: center; background-size: cover; display: block; margin: 0; overflow: hidden; width: 100%; } .svc-photos__rule { background: var(--svc-accent); block-size: 3px; inline-size: 100%; margin-block-end: 0.85rem; } .svc-photos__label { color: var(--svc-accent-text); display: block; font-family: var(--jsr-font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; margin-block-end: 0.5rem; text-transform: uppercase; } .svc-photos__caption { color: var(--jsr-color-text-muted); flex: 1; font-size: 0.875rem; line-height: 1.65; margin: 0; } /* ── PROBLEMS — DARK ─────────────────────────────────────────────────────── */ /* After the white photo section, dark returns for visual rhythm. */ .service-single__problems { background: #1e2832; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__problems h2 { color: #ffffff; font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.1; margin: 0 0 2.5rem; max-width: var(--jsr-content-width); } .service-single__problems ul { column-gap: 3rem; columns: 2; list-style: none; margin: 0; max-width: var(--jsr-content-width); padding: 0; } .service-single__problems li { border-left: 3px solid var(--svc-accent); break-inside: avoid; color: rgb(255 255 255 / 65%); font-size: 0.9rem; line-height: 1.6; margin-block-end: 0.875rem; padding-left: 0.875rem; } /* ── INCLUDED — GOLD ─────────────────────────────────────────────────────── */ /* Gold background, grey text, editorial horizontal rule separators. */ .service-single__included { background: var(--svc-accent); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__included h2 { color: var(--jsr-color-slate-800); font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.1; margin: 0; max-width: var(--jsr-content-width); padding-block-end: 1.75rem; border-bottom: var(--jsr-divider); } .service-single__included ul { list-style: none; margin: 0; max-width: var(--jsr-content-width); padding: 0; } .service-single__included li { border-bottom: var(--jsr-divider); color: rgb(59 71 82 / 80%); font-size: clamp(0.9rem, 1.2vw, 1.025rem); line-height: 1.55; padding-block: 1.1rem; } .service-single__included li:last-child { border-bottom: none; } /* ── SAFETY NOTE ─────────────────────────────────────────────────────────── */ .service-single__safety { border-left: 4px solid var(--svc-accent); margin: 0 auto; max-width: var(--jsr-content-width); padding: 1.25rem 1.5rem 1.25rem clamp(1.5rem, 6vw, 5.5rem); } .service-single__safety p { color: var(--jsr-color-text-muted); font-size: 0.875rem; font-style: italic; line-height: 1.65; margin: 0; } /* ── USE CASES — GOLD ────────────────────────────────────────────────────── */ /* Continues the gold drench — same treatment as included, editorial lines. */ .service-single__use-cases { background: var(--svc-accent); border-top: var(--jsr-divider); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__use-cases h2 { color: var(--jsr-color-slate-800); font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.1; margin: 0; max-width: var(--jsr-content-width); padding-block-end: 1.75rem; border-bottom: var(--jsr-divider); } .service-single__use-cases ul { list-style: none; margin: 0; max-width: var(--jsr-content-width); padding: 0; } .service-single__use-cases li { border-bottom: var(--jsr-divider); color: rgb(59 71 82 / 80%); font-size: clamp(0.9rem, 1.2vw, 1.025rem); line-height: 1.55; padding-block: 1.1rem; } .service-single__use-cases li:last-child { border-bottom: none; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .service-single__faqs { background: var(--jsr-color-slate-800); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__faqs h2 { color: #ffffff; font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.1; margin: 0 0 2.5rem; max-width: var(--jsr-content-width); } .service-single__faq { border-bottom: var(--jsr-divider-light); margin: 0; max-width: var(--jsr-content-width); } .service-single__faq:first-of-type { border-top: var(--jsr-divider-light); } .service-single__faq summary { color: #ffffff; cursor: pointer; font-family: var(--jsr-font-heading); font-size: clamp(0.9rem, 1.3vw, 1.05rem); font-weight: 700; letter-spacing: 0.01em; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0; position: relative; transition: color var(--jsr-motion-fast); user-select: none; } .service-single__faq summary::-webkit-details-marker { display: none; } .service-single__faq summary::after { color: var(--svc-accent); content: "+"; font-family: var(--jsr-font-body); font-size: 1.5rem; font-weight: 300; line-height: 1; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform var(--jsr-motion-fast); } .service-single__faq[open] summary::after { content: "\2212"; } .service-single__faq summary:hover { color: var(--svc-accent); } .service-single__faq > div { color: rgb(255 255 255 / 68%); font-size: 0.925rem; line-height: 1.72; padding-block-end: 1.5rem; } .service-single__faq > div p { margin: 0 0 0.75rem; } .service-single__faq > div p:last-child { margin-bottom: 0; } /* ── RELATED ARTICLES ────────────────────────────────────────────────────── */ .service-single__related-articles { border-bottom: var(--jsr-divider); border-top: var(--jsr-divider); padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__related-articles h2 { color: var(--jsr-color-text-muted); font-family: var(--jsr-font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; margin: 0 0 1.25rem; max-width: var(--jsr-content-width); text-transform: uppercase; } .service-single__related-articles ul { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; margin: 0; max-width: var(--jsr-content-width); padding: 0; } .service-single__related-articles a { color: var(--jsr-color-slate-800); font-size: 0.9rem; line-height: 1.5; text-decoration: underline; text-decoration-color: var(--jsr-color-gray-200); text-underline-offset: 3px; transition: color var(--jsr-motion-fast), text-decoration-color var(--jsr-motion-fast); } .service-single__related-articles a:hover { color: var(--svc-accent-text); text-decoration-color: var(--svc-accent); } /* ── RELATED SERVICES ────────────────────────────────────────────────────── */ .service-single__related { background: #f7f6f3; border-bottom: var(--jsr-divider); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__related h2 { color: var(--jsr-color-text-muted); font-family: var(--jsr-font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; margin: 0 0 1.25rem; max-width: var(--jsr-content-width); text-transform: uppercase; } .service-single__related ul { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; max-width: var(--jsr-content-width); padding: 0; } .service-single__related a { border: 1px solid var(--jsr-color-gray-200); border-radius: var(--jsr-radius-sm); color: var(--jsr-color-slate-800); display: block; font-family: var(--jsr-font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.5rem 1rem; text-decoration: none; text-transform: uppercase; transition: border-color var(--jsr-motion-fast), color var(--jsr-motion-fast); } .service-single__related a:hover { border-color: var(--svc-accent); color: var(--svc-accent-text); } /* ── ACF CTA ─────────────────────────────────────────────────────────────── */ .service-single__ctas { border-top: var(--jsr-divider); display: flex; flex-wrap: wrap; gap: 1rem; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.5rem); } .service-single__cta { border-radius: 0; display: inline-block; font-family: var(--jsr-font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.9rem 2rem; text-decoration: none; text-transform: uppercase; transition: background var(--jsr-motion-fast), color var(--jsr-motion-fast), border-color var(--jsr-motion-fast); } .service-single__cta--primary { background: var(--svc-accent); color: var(--jsr-color-slate-800); } .service-single__cta--primary:hover { background: #e6c040; color: var(--jsr-color-slate-800); } .service-single__cta--secondary { background: transparent; border: 2px solid var(--jsr-color-slate-800); color: var(--jsr-color-slate-800); } .service-single__cta--secondary:hover { border-color: var(--svc-accent-text); color: var(--svc-accent-text); } /* ── PHOTO BAND ──────────────────────────────────────────────────────────── */ /* Full-bleed photo section with dark overlay — visual break mid-page. */ .svc-photo-band { background-color: var(--jsr-color-slate-800); background-position: center; background-size: cover; min-height: clamp(22rem, 42vw, 34rem); position: relative; } .svc-photo-band::before { background: linear-gradient( to right, rgb(30 40 50 / 82%) 0%, rgb(30 40 50 / 52%) 55%, rgb(30 40 50 / 12%) 100% ); content: ""; inset: 0; position: absolute; } .svc-photo-band__content { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.5rem); position: relative; z-index: 1; } .svc-photo-band__rule { background: var(--svc-accent); block-size: 3px; inline-size: 3rem; margin-block-end: 1.5rem; } .svc-photo-band__heading { color: #ffffff; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 1rem; max-width: 22rem; } .svc-photo-band__sub { color: rgb(255 255 255 / 72%); font-size: clamp(0.88rem, 1.2vw, 1rem); line-height: 1.68; margin: 0; max-width: 30rem; } /* ── PHOTO STRIP ─────────────────────────────────────────────────────────── */ /* 4-up horizontal photo strip — hardcoded, always shows. */ /* Gold top border ties it back to the service accent colour. */ .svc-photo-strip { border-top: 5px solid var(--svc-accent); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: clamp(12rem, 20vw, 18rem); } .svc-photo-strip__img { background-position: center; background-size: cover; display: block; margin: 0; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .service-single .service-hero { grid-template-columns: 1fr; min-height: unset; } .service-hero__photo { aspect-ratio: 16 / 9; order: -1; } .svc-photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); height: clamp(14rem, 40vw, 20rem); } .service-single__overview, .service-single__preparation { grid-template-columns: 1fr; } .service-single__overview > h2, .service-single__preparation > h2 { grid-row: unset; position: static; } .service-single__overview > p, .service-single__overview > ul, .service-single__overview > ol, .service-single__preparation > p, .service-single__preparation > ul, .service-single__preparation > ol { grid-column: unset; } .service-single__problems ul { columns: 1; } .svc-photos__grid { gap: 1.25rem; grid-template-columns: 1fr 1fr; } .svc-photos__card:last-child { display: none; } .svc-photos__card--mid { margin-top: 0; } } @media (max-width: 480px) { .svc-photos__grid { grid-template-columns: 1fr; } .svc-photos__card:last-child { display: flex; } } /* ── WHO WE SERVE SINGLE PAGES ───────────────────────────────────────────── */ .industry-single { background: #ffffff; color: var(--jsr-color-slate-800); overflow: clip; } .industry-single__article > * { margin-block: 0; } .industry-hero { background: var(--svc-accent); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: clamp(29rem, 64vh, 46rem); overflow: hidden; } .industry-hero__left { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(3.25rem, 6vw, 5.75rem) clamp(1.5rem, 6vw, 5.5rem) clamp(3.25rem, 6vw, 5rem); } .industry-hero__breadcrumb, .industry-hero__eyebrow { color: rgb(59 71 82 / 66%); font-family: var(--jsr-font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; margin: 0; text-transform: uppercase; } .industry-hero__breadcrumb { margin-block-end: clamp(1.8rem, 4vw, 3rem); } .industry-hero__breadcrumb a { color: inherit; text-decoration: none; } .industry-hero__breadcrumb a:hover { color: var(--jsr-color-slate-800); } .industry-hero__eyebrow { margin-block-end: 0.9rem; } .industry-hero__title { color: var(--jsr-color-slate-800); font-size: clamp(2.75rem, 6.2vw, 5.7rem); line-height: 1; margin: 0; max-width: 15ch; } .industry-hero__rule { background: rgb(59 71 82 / 30%); block-size: 1px; inline-size: min(100%, 34rem); margin-block: clamp(1.5rem, 3vw, 2.5rem); } .industry-hero__excerpt { color: rgb(59 71 82 / 80%); font-size: clamp(0.95rem, 1.35vw, 1.08rem); line-height: 1.7; margin: 0; max-width: 36rem; } .industry-hero__photo { background-position: center; background-size: cover; display: block; margin: 0; min-height: 100%; position: relative; } .industry-hero__photo::after { background: linear-gradient(to right, rgb(159 205 195 / 16%), rgb(30 40 50 / 18%)); content: ""; inset: 0; position: absolute; } .industry-intro { background: var(--industry-dark); padding: clamp(3.25rem, 7vw, 5.75rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-intro__inner { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); max-width: var(--jsr-content-width); } .industry-intro__definition { color: var(--svc-accent); font-family: var(--jsr-font-heading); font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.14; margin: 0; } .industry-intro__body { color: rgb(255 255 255 / 72%); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.78; margin: 0; } .industry-editorial { background: #ffffff; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-editorial__inner { align-items: start; display: grid; gap: 0 clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.75fr); max-width: var(--jsr-content-width); } .industry-editorial__inner > h2, .industry-editorial__inner > h3 { border-top: 3px solid rgb(59 71 82 / 42%); color: var(--jsr-color-slate-800); font-size: clamp(1.25rem, 2.3vw, 2rem); grid-column: 1; line-height: 1.1; margin: 0; padding-block: clamp(1.5rem, 3.5vw, 2.4rem); } .industry-editorial__inner > p, .industry-editorial__inner > ul, .industry-editorial__inner > ol { border-top: 3px solid rgb(59 71 82 / 42%); color: var(--jsr-color-text-muted); font-size: clamp(0.94rem, 1.22vw, 1.03rem); grid-column: 2; line-height: 1.75; margin: 0; padding-block: clamp(1.5rem, 3.5vw, 2.4rem); } .industry-editorial__inner > ul, .industry-editorial__inner > ol { padding-inline-start: 1.15rem; } .industry-editorial__inner > p + p, .industry-editorial__inner > p + ul, .industry-editorial__inner > p + ol, .industry-editorial__inner > ul + p, .industry-editorial__inner > ol + p { border-top: 0; padding-block-start: 0; } .industry-photo-grid { background: #ffffff; border-top: var(--jsr-divider); padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-photo-grid__inner { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--jsr-content-width); } .industry-photo-grid__item { aspect-ratio: 3 / 4; background-position: center; background-size: cover; display: block; margin: 0; min-height: 18rem; } .industry-photo-grid__item--lower { margin-top: 3rem; } .industry-facts, .industry-where { background: var(--svc-accent); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-facts h2, .industry-where h2, .industry-faqs h2 { color: var(--jsr-color-slate-800); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0; max-width: var(--jsr-content-width); padding-block-end: 1.75rem; } .industry-facts h2, .industry-where h2 { border-bottom: var(--jsr-divider); } .industry-facts ul, .industry-where ul { list-style: none; margin: 0; max-width: var(--jsr-content-width); padding: 0; } .industry-facts li, .industry-where li { border-bottom: var(--jsr-divider); color: rgb(59 71 82 / 82%); font-size: clamp(0.95rem, 1.25vw, 1.06rem); line-height: 1.6; padding-block: 1.1rem; } .industry-facts li:last-child, .industry-where li:last-child { border-bottom: 0; } .industry-photo-band { background-color: var(--industry-dark); background-position: center; background-size: cover; min-height: clamp(24rem, 46vw, 38rem); position: relative; } .industry-photo-band::before { background: linear-gradient( to right, rgb(30 40 50 / 88%) 0%, rgb(30 40 50 / 62%) 56%, rgb(30 40 50 / 22%) 100% ); content: ""; inset: 0; position: absolute; } .industry-photo-band__content { display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; padding: clamp(3.25rem, 7vw, 5.75rem) clamp(1.5rem, 6vw, 5.5rem); position: relative; z-index: 1; } .industry-photo-band__rule { background: var(--svc-accent); block-size: 3px; inline-size: 3rem; margin-block-end: 1.5rem; } .industry-photo-band h2 { color: #ffffff; font-size: clamp(1.8rem, 4.2vw, 3.25rem); line-height: 1.08; margin: 0 0 1rem; max-width: 12ch; } .industry-photo-band p { color: rgb(255 255 255 / 76%); font-size: clamp(0.95rem, 1.25vw, 1.05rem); line-height: 1.72; margin: 0; max-width: 34rem; } .industry-workflow { background: var(--industry-gray); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: clamp(30rem, 58vw, 44rem); } .industry-workflow__media { background-position: center; background-size: cover; min-height: inherit; position: relative; } .industry-workflow__media::after { background: rgb(30 40 50 / 22%); content: ""; inset: 0; position: absolute; } .industry-workflow__content { align-self: center; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-workflow h2 { color: var(--jsr-color-slate-800); font-size: clamp(1.7rem, 3.3vw, 2.75rem); line-height: 1.1; margin: 0 0 1.25rem; max-width: 16ch; } .industry-workflow p { color: var(--jsr-color-text-muted); line-height: 1.75; margin: 0 0 1.5rem; max-width: 34rem; } .industry-workflow ol { counter-reset: industry-step; list-style: none; margin: 0; max-width: 36rem; padding: 0; } .industry-workflow li { border-top: var(--jsr-divider); color: var(--jsr-color-text-muted); counter-increment: industry-step; line-height: 1.65; padding: 1rem 0 1rem 3.1rem; position: relative; } .industry-workflow li::before { color: var(--svc-accent-text); content: counter(industry-step, decimal-leading-zero); font-family: var(--jsr-font-heading); font-size: 0.78rem; font-weight: 700; left: 0; letter-spacing: 0.12em; position: absolute; top: 1.16rem; } .industry-proof { background: var(--industry-dark); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-proof__inner { align-items: center; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; max-width: var(--jsr-content-width); } .industry-proof p { color: rgb(255 255 255 / 72%); flex: 1 1 30rem; font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.72; margin: 0; } .industry-proof a { border: 1px solid rgb(159 205 195 / 72%); color: var(--svc-accent); font-family: var(--jsr-font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.75rem 1.1rem; text-decoration: none; text-transform: uppercase; transition: background var(--jsr-motion-fast), color var(--jsr-motion-fast), transform var(--jsr-motion-medium); } .industry-proof a:hover { background: var(--svc-accent); color: var(--jsr-color-slate-800); transform: translateY(-0.12rem); } .industry-single .industry-single__related { background: #ffffff; border-bottom: var(--jsr-divider); border-top: var(--jsr-divider); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-single .industry-single__related + .industry-single__related { background: var(--industry-gray); border-top: 0; } .industry-single .industry-single__related h2 { color: var(--svc-accent-text); } .industry-faqs { background: var(--industry-dark); padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-faqs h2 { color: #ffffff; } .industry-faq { border-bottom: var(--jsr-divider-light); margin: 0; max-width: var(--jsr-content-width); } .industry-faq:first-of-type { border-top: var(--jsr-divider-light); } .industry-faq summary { color: #ffffff; cursor: pointer; font-family: var(--jsr-font-heading); font-size: clamp(0.95rem, 1.3vw, 1.08rem); font-weight: 700; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0; position: relative; } .industry-faq summary::-webkit-details-marker { display: none; } .industry-faq summary::after { color: var(--svc-accent); content: "+"; font-size: 1.5rem; font-weight: 300; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .industry-faq[open] summary::after { content: "\2212"; } .industry-faq summary:hover { color: var(--svc-accent); } .industry-faq > div { color: rgb(255 255 255 / 70%); line-height: 1.72; padding-block-end: 1.5rem; } .industry-photo-strip { border-top: 5px solid var(--svc-accent); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: clamp(12rem, 20vw, 18rem); } .industry-photo-strip__img { background-position: center; background-size: cover; display: block; margin: 0; } .industry-single .industry-single__cta { background: var(--svc-accent); display: flex; flex-wrap: wrap; gap: 1rem; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem); } .industry-single .industry-single__cta .service-single__button { background: var(--jsr-color-slate-800); border: 2px solid var(--jsr-color-slate-800); border-radius: 0; color: #ffffff; font-family: var(--jsr-font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.9rem 2rem; text-decoration: none; text-transform: uppercase; transition: background var(--jsr-motion-fast), color var(--jsr-motion-fast), transform var(--jsr-motion-medium); } .industry-single .industry-single__cta .service-single__button--secondary { background: transparent; color: var(--jsr-color-slate-800); } .industry-single .industry-single__cta .service-single__button:hover { transform: translateY(-0.12rem); } @media (prefers-reduced-motion: no-preference) { .industry-hero__photo, .industry-workflow__media, .industry-photo-band { animation: jsr-fade-in 0.75s ease both; } .industry-facts li:hover, .industry-where li:hover, .industry-workflow li:hover { transform: translateX(0.22rem); } .industry-facts li, .industry-where li, .industry-workflow li { transition: transform var(--jsr-motion-medium); } } @media (max-width: 768px) { .industry-hero, .industry-workflow { grid-template-columns: 1fr; } .industry-hero__photo { aspect-ratio: 16 / 9; min-height: unset; order: -1; } .industry-intro__inner, .industry-editorial__inner { grid-template-columns: 1fr; } .industry-editorial__inner > h2, .industry-editorial__inner > h3, .industry-editorial__inner > p, .industry-editorial__inner > ul, .industry-editorial__inner > ol { grid-column: unset; position: static; } .industry-editorial__inner > p, .industry-editorial__inner > ul, .industry-editorial__inner > ol { border-top: 0; padding-block-start: 0; } .industry-workflow__media { aspect-ratio: 16 / 10; min-height: unset; } .industry-photo-grid__inner { grid-template-columns: 1fr 1fr; } .industry-photo-grid__item--lower { margin-top: 0; } .industry-photo-grid__item:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .industry-photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); height: clamp(14rem, 40vw, 20rem); } } @media (max-width: 480px) { .industry-photo-grid__inner, .industry-photo-strip { grid-template-columns: 1fr; } .industry-photo-grid__item:last-child { grid-column: auto; aspect-ratio: 3 / 4; } }