/* ============================================================
Rivercity Environmental — Design System
--------------------------------------------------------------
Sections:
1. Tokens / variables
2. Reset + base
3. Layout primitives
4. Header + nav
5. Hero (video)
6. Buttons + chips + tags
7. Sections + cards
8. Forms
9. Footer
10. Utilities + animations
============================================================ */
/* 1 — Tokens ------------------------------------------------- */
:root {
--rcgl-green-dark: #0f2f24;
--rcgl-green: #1f6b45;
--rcgl-green-mid: #2e7f55;
--rcgl-green-soft: #dfeee5;
--rcgl-eucalyptus: #7fa88a;
--rcgl-charcoal: #111817;
--rcgl-stone: #f4f1ea;
--rcgl-stone-2: #ece7da;
--rcgl-sand: #d9c7a3;
--rcgl-sand-soft: #efe5cf;
--rcgl-white: #ffffff;
--rcgl-ink: #0b1310;
--rcgl-ink-2: #2b3733;
--rcgl-mute: #5b6a64;
--rcgl-line: rgba(15, 47, 36, 0.10);
--rcgl-line-strong: rgba(15, 47, 36, 0.18);
--shadow-sm: 0 1px 2px rgba(11, 19, 16, 0.04), 0 1px 3px rgba(11, 19, 16, 0.06);
--shadow-md: 0 6px 18px rgba(11, 19, 16, 0.08), 0 2px 6px rgba(11, 19, 16, 0.04);
--shadow-lg: 0 24px 48px -12px rgba(11, 19, 16, 0.18), 0 8px 16px rgba(11, 19, 16, 0.06);
--shadow-xl: 0 40px 80px -16px rgba(11, 19, 16, 0.28);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-xl: 32px;
--radius-pill: 999px;
--container: 1240px;
--container-narrow: 960px;
--font-sans: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Manrope', 'Inter', system-ui, sans-serif;
--ease: cubic-bezier(.2, .7, .25, 1);
--t-fast: 160ms;
--t-med: 280ms;
--t-slow: 480ms;
}
/* 2 — Reset + base -------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* Smooth-scroll only for anchor jumps, never for wheel/trackpad
(browsers respect this automatically — listed for clarity).
When Lenis is active (.has-lenis is added by main.js) we hand
smooth-scroll over to Lenis for a single, unified easing. */
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Hint the compositor that we expect lots of vertical scrolling. */
overscroll-behavior-y: none;
}
/* Lenis adds `class="lenis"` to automatically when active.
Hand smooth-scroll over to Lenis for a single, unified easing. */
html.lenis { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* When Lenis is driving, it briefly toggles `html.lenis-scrolling`
while a smooth scroll is in progress. Pause expensive animations
during that window so the eased motion stays buttery. */
html.lenis-scrolling .hero-leaf,
html.lenis-scrolling .cta-band__leaf,
html.lenis-scrolling .page-hero__media--kenburns img,
html.lenis-scrolling .hero__media--kenburns img {
animation-play-state: paused;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.65;
color: var(--rcgl-ink-2);
background: var(--rcgl-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* `clip` keeps horizontal overflow contained without creating a new
scroll container — significantly smoother than `hidden` for long
pages because the browser keeps its native scroll optimizations. */
overflow-x: clip;
}
/* Fallback for browsers that don't support overflow-x: clip yet. */
@supports not (overflow-x: clip) {
body { overflow-x: hidden; }
}
img,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--rcgl-green);
text-decoration: none;
transition: color var(--t-fast) var(--ease);
}
a:hover {
color: var(--rcgl-green-dark);
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
color: var(--rcgl-ink);
line-height: 1.12;
letter-spacing: -0.015em;
margin: 0 0 0.6em;
font-weight: 700;
}
h1 {
font-size: clamp(2.25rem, 4.5vw + .5rem, 4.25rem);
letter-spacing: -0.025em;
font-weight: 800;
}
h2 {
font-size: clamp(1.75rem, 2.4vw + .8rem, 2.85rem);
}
h3 {
font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
}
h4 {
font-size: 1.1rem;
}
p {
margin: 0 0 1em;
}
p.lead {
font-size: clamp(1.05rem, .35vw + 1rem, 1.25rem);
line-height: 1.65;
color: var(--rcgl-ink-2);
}
::selection {
background: var(--rcgl-green);
color: var(--rcgl-white);
}
:focus-visible {
outline: 2px solid var(--rcgl-green);
outline-offset: 3px;
border-radius: 4px;
}
/* 3 — Layout primitives -------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
/* Edge-to-edge feel on mobile: tight 14px gutter on small phones, scaling
up to 40px on desktop. The min was 20px previously; dropped so cards,
photos and panels read wider on mobile. */
padding-inline: clamp(14px, 3.5vw, 40px);
}
.container--narrow {
max-width: var(--container-narrow);
}
.section {
padding-block: clamp(64px, 8vw, 120px);
position: relative;
}
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--dark { background: var(--rcgl-green-dark); color: var(--rcgl-stone); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--rcgl-white); }
.section--dark p { color: rgba(244, 241, 234, .82); }
.section--charcoal { background: var(--rcgl-charcoal); color: var(--rcgl-stone); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3, .section--charcoal h4 { color: var(--rcgl-white); }
.section--stone { background: var(--rcgl-stone); }
.section--soft { background: var(--rcgl-green-soft); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 700;
color: var(--rcgl-green);
margin: 0 0 18px;
}
.eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.section--dark .eyebrow,
.section--charcoal .eyebrow { color: var(--rcgl-eucalyptus); }
.section-head {
max-width: 820px;
margin-bottom: clamp(36px, 5vw, 60px);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.section-head--split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(24px, 4vw, 60px);
align-items: end;
max-width: none;
}
.section-head--split p { margin: 0; }
@media (max-width: 820px) {
.section-head--split { grid-template-columns: 1fr; align-items: start; }
}
/* Topographic / leaf decorative pattern overlay */
.bg-pattern::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../images/patterns/topo.svg");
background-size: 720px;
background-repeat: repeat;
opacity: .07;
pointer-events: none;
mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.bg-leaf::after {
content: "";
position: absolute;
right: -120px;
bottom: -80px;
width: 480px;
height: 480px;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .08;
pointer-events: none;
}
/* 4 — Header + nav ------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0);
transform: translateY(0) translateZ(0);
will-change: transform, background-color;
/* Only transition cheap properties. Animating `backdrop-filter`
was forcing the browser to re-blur the whole header area on
every scroll frame — the main cause of desktop scroll jank.
`transform` stays so the slide-hide-on-scroll-down still animates. */
transition: background-color var(--t-med) var(--ease),
box-shadow var(--t-med) var(--ease),
transform var(--t-med) var(--ease);
/* Promote the header to its own composite layer so wheel/trackpad
scroll never has to repaint the page through it.
NOTE: must NOT use `paint` containment — that would clip the
absolutely-positioned mega-menu panels (Services / More) which
extend below the header's bounding box. */
contain: layout;
}
/* Smart hide-on-scroll-down (revealed on scroll-up). Driven by JS toggling .site-header--hidden. */
.site-header--hidden {
transform: translateY(-100%) translateZ(0);
pointer-events: none;
}
.site-header--solid {
/* Slightly more opaque + lighter blur. blur(8px) costs roughly
1/3 of blur(14px) on a wide header. Saturate(140%) was an
extra filter pass that's barely visible at this opacity. */
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 0 var(--rcgl-line);
}
/* On non-hero pages, header is solid by default */
.site-header--page {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rcgl-line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-block: 14px;
min-height: 76px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--rcgl-green-dark);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.015em;
}
.brand__mark {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--rcgl-green-dark);
display: grid;
place-items: center;
color: var(--rcgl-white);
box-shadow: var(--shadow-sm);
flex-shrink: 0;
}
.brand__mark svg { width: 26px; height: 26px; }
.brand__text {
display: flex;
flex-direction: column;
line-height: 1.05;
}
.brand__text strong { font-size: 1.05rem; color: var(--rcgl-green-dark); }
.brand__text small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rcgl-mute); font-weight: 600; }
/* Real RCGL horizontal logo (image-based brand) */
.brand--logo {
gap: 0;
line-height: 0;
}
.brand--logo .brand__logo {
display: block;
height: 39px;
width: auto;
max-width: 193px;
object-fit: contain;
}
.brand--logo .brand__logo--white { display: none; }
/* Page (solid) header — show colour logo */
.site-header--page .brand--logo .brand__logo--colour { display: block; }
.site-header--page .brand--logo .brand__logo--white { display: none; }
/* Hero header (transparent over photo) — show white logo */
.site-header--hero:not(.site-header--solid) .brand--logo .brand__logo--colour { display: none; }
.site-header--hero:not(.site-header--solid) .brand--logo .brand__logo--white { display: block; }
/* Hero header once scrolled (solid) — flip back to colour logo */
.site-header--hero.site-header--solid .brand--logo .brand__logo--colour { display: block; }
.site-header--hero.site-header--solid .brand--logo .brand__logo--white { display: none; }
/* Mobile menu uses the white logo (dark menu background) */
.mobile-menu .brand--logo .brand__logo { height: 37px; max-width: 182px; }
/* Footer logo — white (base; desktop size in responsive.css) */
.brand--logo-footer { display: inline-block; }
.brand--logo-footer .brand__logo { height: 29px; max-width: 137px; }
.site-header--hero .brand,
.site-header--hero .brand__text strong { color: var(--rcgl-white); }
.site-header--hero .brand__text small { color: rgba(255, 255, 255, .7); }
.site-header--hero .brand__mark { background: rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.site-header--hero.site-header--solid .brand,
.site-header--hero.site-header--solid .brand__text strong { color: var(--rcgl-green-dark); }
.site-header--hero.site-header--solid .brand__text small { color: var(--rcgl-mute); }
.site-header--hero.site-header--solid .brand__mark { background: var(--rcgl-green-dark); }
.nav {
display: flex;
align-items: center;
gap: 2px;
}
.nav__link {
position: relative;
padding: 10px 12px;
font-weight: 600;
font-size: 0.92rem;
color: var(--rcgl-ink);
border-radius: 8px;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
white-space: nowrap;
}
.nav__link:hover { color: var(--rcgl-green); background: var(--rcgl-green-soft); }
.nav__link.is-active { color: var(--rcgl-green); }
.nav__link.is-active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
background: var(--rcgl-green);
border-radius: 2px;
}
.site-header--hero:not(.site-header--solid) .nav__link { color: rgba(255, 255, 255, .92); }
.site-header--hero:not(.site-header--solid) .nav__link:hover { background: rgba(255, 255, 255, .12); color: var(--rcgl-white); }
.site-header--hero:not(.site-header--solid) .nav__link.is-active { color: var(--rcgl-white); }
.site-header--hero:not(.site-header--solid) .nav__link.is-active::after { background: var(--rcgl-white); }
/* ============================================================
MEGA-MENU — desktop nav dropdown for Services / Sectors
============================================================ */
.nav__group { position: static; }
/* Compact dropdown aligns to trigger; full-width megas stay position static */
.nav__group--more { position: relative; }
.nav__trigger {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
}
.nav__chev {
width: 14px;
height: 14px;
transition: transform var(--t-fast) var(--ease);
}
.nav__group.is-open .nav__chev { transform: rotate(180deg); }
.nav__group.is-open > .nav__trigger { color: var(--rcgl-green); background: var(--rcgl-green-soft); }
.site-header--hero:not(.site-header--solid) .nav__group.is-open > .nav__trigger {
color: var(--rcgl-white);
background: rgba(255, 255, 255, .14);
}
.mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
background:
radial-gradient(1200px 360px at 80% -40%, rgba(127, 168, 138, 0.16), transparent 70%),
radial-gradient(900px 280px at 0% -20%, rgba(217, 199, 163, 0.18), transparent 65%),
var(--rcgl-white);
color: var(--rcgl-ink);
border-top: 1px solid var(--rcgl-line);
border-bottom: 1px solid var(--rcgl-line);
box-shadow: 0 30px 60px -28px rgba(15, 47, 36, 0.42);
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity .25s var(--ease), transform .25s var(--ease);
z-index: 90;
max-height: calc(100vh - 90px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Decorative top accent — gradient strip that runs across the panel */
.mega__accent {
position: sticky;
top: 0;
height: 3px;
background: linear-gradient(90deg,
var(--rcgl-green) 0%,
var(--rcgl-eucalyptus) 35%,
var(--rcgl-sand) 70%,
var(--rcgl-green) 100%);
background-size: 200% 100%;
animation: megaAccentShimmer 6s linear infinite;
z-index: 2;
}
@keyframes megaAccentShimmer {
from { background-position: 0% 50%; }
to { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.mega__accent { animation: none; }
}
.mega::-webkit-scrollbar { width: 8px; }
.mega::-webkit-scrollbar-thumb {
background: var(--rcgl-line);
border-radius: 8px;
}
.mega::-webkit-scrollbar-thumb:hover { background: var(--rcgl-line-strong); }
.nav__group.is-open .mega {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Compact "More" menu — card-style dropdown */
.nav__group--more .mega--compact {
left: auto;
right: 0;
top: calc(100% + 8px);
width: min(360px, calc(100vw - 40px));
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--rcgl-line);
background:
radial-gradient(420px 200px at 100% -20%, rgba(127, 168, 138, 0.18), transparent 65%),
radial-gradient(360px 180px at 0% 120%, rgba(217, 199, 163, 0.20), transparent 60%),
var(--rcgl-white);
box-shadow:
0 24px 56px -22px rgba(15, 47, 36, 0.45),
0 4px 12px rgba(15, 47, 36, 0.06);
}
.mega--compact .mega__accent { border-radius: 18px 18px 0 0; }
.mega__inner--compact {
padding: 16px 14px 14px;
}
.mega__heading--more {
margin: 2px 4px 10px;
}
.mega-more-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.mega-more-list li { margin: 0; }
.mega-more-card {
position: relative;
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid transparent;
color: var(--rcgl-ink);
text-decoration: none;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.mega-more-card:hover,
.mega-more-card:focus-visible {
background: var(--rcgl-white);
border-color: var(--rcgl-line);
transform: translateX(2px);
box-shadow: 0 6px 18px -10px rgba(15, 47, 36, 0.25);
}
.mega-more-card:focus-visible {
outline: 2px solid var(--rcgl-green);
outline-offset: 2px;
}
.mega-more-card.is-active {
background: var(--rcgl-green-soft);
border-color: rgba(31, 107, 69, 0.25);
}
.mega-more-card__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, var(--rcgl-green-soft), var(--rcgl-stone));
color: var(--rcgl-green-dark);
border: 1px solid rgba(31, 107, 69, 0.10);
transition: background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
transform var(--t-med) var(--ease);
}
.mega-more-card__icon svg {
width: 20px;
height: 20px;
}
.mega-more-card:hover .mega-more-card__icon,
.mega-more-card:focus-visible .mega-more-card__icon,
.mega-more-card.is-active .mega-more-card__icon {
background: linear-gradient(135deg, var(--rcgl-green) 0%, var(--rcgl-green-dark) 100%);
color: var(--rcgl-white);
border-color: transparent;
transform: rotate(-4deg) scale(1.04);
}
.mega-more-card__text { min-width: 0; line-height: 1.25; }
.mega-more-card__title {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.96rem;
color: var(--rcgl-green-dark);
letter-spacing: -0.01em;
}
.mega-more-card__desc {
display: block;
margin-top: 1px;
font-size: 0.78rem;
color: var(--rcgl-mute);
line-height: 1.35;
}
.mega-more-card__arrow {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rcgl-eucalyptus);
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.mega-more-card__arrow svg { width: 16px; height: 16px; }
.mega-more-card:hover .mega-more-card__arrow,
.mega-more-card:focus-visible .mega-more-card__arrow,
.mega-more-card.is-active .mega-more-card__arrow {
opacity: 1;
transform: translateX(0);
color: var(--rcgl-green);
}
/* Footer CTA inside the compact dropdown */
.mega-more-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
padding: 12px 14px;
border-radius: 12px;
background: linear-gradient(135deg, var(--rcgl-green-dark) 0%, #143b2c 100%);
color: var(--rcgl-white);
text-decoration: none;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
box-shadow: 0 8px 18px -10px rgba(15, 47, 36, 0.6);
overflow: hidden;
position: relative;
}
.mega-more-foot::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(220px 80px at 100% 0%, rgba(217, 199, 163, 0.22), transparent 70%);
pointer-events: none;
}
.mega-more-foot:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px -12px rgba(15, 47, 36, 0.55);
}
.mega-more-foot__text { display: flex; flex-direction: column; line-height: 1.25; position: relative; }
.mega-more-foot__text strong {
font-family: var(--font-display);
font-size: 0.92rem;
color: var(--rcgl-white);
}
.mega-more-foot__text em {
font-style: normal;
font-size: 0.78rem;
color: var(--rcgl-sand);
}
.mega-more-foot__arrow {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rcgl-white);
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
position: relative;
}
.mega-more-foot__arrow svg { width: 14px; height: 14px; }
.mega-more-foot:hover .mega-more-foot__arrow {
background: var(--rcgl-sand);
color: var(--rcgl-green-dark);
transform: translateX(3px);
}
button.nav__link.nav__trigger {
margin: 0;
}
.mega__inner { padding: 20px 24px 22px; }
/* Top eyebrow row inside Services mega */
.mega__eyebrow-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 16px;
margin: -4px 0 14px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--rcgl-line);
}
.mega__eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: linear-gradient(135deg, var(--rcgl-green-soft), var(--rcgl-stone));
border: 1px solid rgba(31, 107, 69, 0.18);
color: var(--rcgl-green-dark);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.mega__eyebrow-pill svg {
width: 14px;
height: 14px;
color: var(--rcgl-green);
}
.mega__eyebrow-aside {
font-size: 0.78rem;
font-weight: 600;
color: var(--rcgl-mute);
letter-spacing: 0.02em;
}
@media (max-width: 720px) {
.mega__eyebrow-aside { display: none; }
}
.mega__cols {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 36px;
}
.mega__heading {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rcgl-eucalyptus);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.mega__heading::before {
content: "";
display: block;
width: 22px;
height: 2px;
background: var(--rcgl-eucalyptus);
}
.mega__list ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 14px;
}
.mega__link {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 12px;
border: 1px solid transparent;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.mega__link::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, var(--rcgl-green) 0%, var(--rcgl-eucalyptus) 100%);
opacity: 0;
transform: scaleY(0.4);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega__link:hover,
.mega__link:focus-visible {
background: var(--rcgl-white);
border-color: var(--rcgl-line);
transform: translateX(2px);
box-shadow: 0 8px 22px -14px rgba(15, 47, 36, 0.35);
}
.mega__link:hover::before,
.mega__link:focus-visible::before {
opacity: 1;
transform: scaleY(1);
}
.mega__link-icon {
position: relative;
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 12px;
overflow: hidden;
background: var(--rcgl-green-soft);
box-shadow: inset 0 0 0 1px rgba(15, 47, 36, 0.06);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mega__link-icon::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 35%, rgba(15,47,36,0.18) 100%);
pointer-events: none;
}
.mega__link-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--t-med) var(--ease);
}
.mega__link:hover .mega__link-icon,
.mega__link:focus-visible .mega__link-icon {
box-shadow: inset 0 0 0 1px rgba(31, 107, 69, 0.35),
0 6px 14px -8px rgba(15, 47, 36, 0.4);
}
.mega__link:hover .mega__link-icon img,
.mega__link:focus-visible .mega__link-icon img {
transform: scale(1.08);
}
.mega__link-text strong {
display: block;
color: var(--rcgl-green-dark);
font-size: 0.92rem;
line-height: 1.2;
margin-bottom: 2px;
}
.mega__link-text em {
display: block;
font-style: normal;
color: var(--rcgl-mute);
font-size: 0.78rem;
line-height: 1.35;
}
/* Mega menu — service entries that surface flagship programs (e.g. Arboriculture) */
.mega__list-item--expanded .mega__link {
padding-bottom: 4px;
}
.mega-programs {
margin: 2px 0 0 70px;
display: grid;
gap: 1px;
padding-left: 10px;
border-left: 2px solid var(--rcgl-line);
}
.mega-program {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega-program:hover,
.mega-program:focus-visible {
background: var(--rcgl-stone);
transform: translateX(2px);
}
.mega-program:focus-visible {
outline: 2px solid var(--rcgl-green);
outline-offset: 2px;
}
.mega-program__text {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 8px;
line-height: 1.2;
}
.mega-program__eyebrow {
font-family: var(--font-sans);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rcgl-eucalyptus);
line-height: 1.2;
white-space: nowrap;
}
.mega-program__eyebrow::after {
content: "—";
margin-left: 6px;
color: var(--rcgl-line-strong);
letter-spacing: 0;
}
.mega-program__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9rem;
color: var(--rcgl-green-dark);
letter-spacing: -0.01em;
line-height: 1.2;
}
.mega-program__desc {
display: none;
}
.mega-program__arrow {
flex: 0 0 auto;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rcgl-eucalyptus);
transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega-program__arrow svg {
width: 14px;
height: 14px;
}
.mega-program:hover .mega-program__arrow,
.mega-program:focus-visible .mega-program__arrow {
color: var(--rcgl-green-dark);
transform: translateX(3px);
}
/* Flagship variant — subtle highlight via star */
.mega-program--flagship .mega-program__eyebrow {
color: var(--rcgl-green-dark);
}
.mega-program--flagship .mega-program__eyebrow::before {
content: "★";
margin-right: 5px;
color: var(--rcgl-sand);
font-size: 0.72rem;
line-height: 1;
}
.mega__all {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
padding: 10px 4px 2px;
border-top: 1px solid var(--rcgl-line);
color: var(--rcgl-green-dark);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.92rem;
letter-spacing: -0.005em;
text-transform: none;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mega__all svg {
width: 18px;
height: 18px;
transition: transform var(--t-med) var(--ease);
}
.mega__all:hover {
color: var(--rcgl-green);
border-top-color: var(--rcgl-green);
}
.mega__all:hover svg { transform: translateX(6px); }
.mega__all:focus-visible {
outline: 2px solid var(--rcgl-green);
outline-offset: 4px;
border-radius: 6px;
}
.mega__feature { display: flex; flex-direction: column; gap: 18px; }
.mega__feature-card {
position: relative;
overflow: hidden;
border-radius: 18px;
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
isolation: isolate;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
box-shadow: 0 12px 28px -16px rgba(15, 47, 36, 0.45);
}
.mega__feature-card::before {
content: "★ Top pick";
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
padding: 5px 11px;
border-radius: 999px;
background: rgba(217, 199, 163, 0.96);
color: var(--rcgl-green-dark);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(15, 47, 36, 0.18);
}
.mega__feature-card::after {
content: "";
position: absolute;
inset: -1px;
z-index: 3;
border-radius: 18px;
pointer-events: none;
background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,0.18) 75%, transparent 85%);
opacity: 0;
transition: opacity var(--t-med) var(--ease);
}
.mega__feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 44px -18px rgba(15, 47, 36, 0.55);
}
.mega__feature-card:hover::after { opacity: 1; }
.mega__feature-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.mega__feature-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15,47,36,0) 50%, rgba(15,47,36,.78) 100%);
}
.mega__feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease);
}
.mega__feature-card:hover .mega__feature-media img { transform: scale(1.06); }
.mega__feature-body { padding: 16px 20px 20px; }
.mega__feature-eyebrow {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--rcgl-sand);
text-transform: uppercase;
margin-bottom: 6px;
}
.mega__feature-body h3 {
margin: 0 0 8px;
font-size: 1.15rem;
color: var(--rcgl-white);
line-height: 1.25;
}
.mega__feature-body p {
margin: 0 0 12px;
color: rgba(255,255,255,.82);
font-size: 0.92rem;
line-height: 1.5;
}
.mega__feature-cta {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rcgl-sand);
font-weight: 700;
font-size: 0.88rem;
}
.mega__feature-cta svg { width: 14px; height: 14px; }
.mega__regions { padding-top: 4px; }
.mega__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mega__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
color: var(--rcgl-green-dark);
font-size: 0.82rem;
font-weight: 600;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.mega__chip:hover {
background: linear-gradient(135deg, var(--rcgl-green) 0%, var(--rcgl-green-dark) 100%);
border-color: transparent;
color: var(--rcgl-white);
transform: translateY(-1px);
box-shadow: 0 6px 14px -8px rgba(15, 47, 36, 0.5);
}
.mega__chip:hover svg { color: var(--rcgl-sand); }
.mega__chip svg {
width: 14px;
height: 14px;
color: var(--rcgl-eucalyptus);
transition: color var(--t-fast) var(--ease);
}
/* When header is over a hero (transparent), keep the panel readable but
preserve the soft gradient washes from the default .mega background. */
.site-header--hero .mega {
color: var(--rcgl-ink);
}
/* Mobile menu disclosure groups (Services / Sectors) */
.mobile-menu__group { border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-menu__group > summary {
list-style: none;
cursor: pointer;
}
.mobile-menu__group > summary::-webkit-details-marker { display: none; }
.mobile-menu__group[open] > summary { color: var(--rcgl-sand); }
.mobile-menu__sub {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0 12px 22px;
border-left: 2px solid rgba(255,255,255,.12);
margin: 4px 0 8px 16px;
}
.mobile-menu__sublink {
color: rgba(255,255,255,.78);
padding: 8px 10px;
font-size: 0.95rem;
border-radius: 8px;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mobile-menu__sublink strong { color: var(--rcgl-white); }
.mobile-menu__sublink:hover { color: var(--rcgl-white); background: rgba(255,255,255,.06); }
@media (max-width: 1280px) {
.mega__cols { grid-template-columns: 1fr; gap: 24px; }
.mega__list ul { grid-template-columns: 1fr; }
}
.header-cta {
display: flex;
align-items: center;
gap: 12px;
}
.header-phone {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rcgl-ink);
font-weight: 700;
font-size: 0.92rem;
padding: 9px 12px;
border-radius: 10px;
transition: color var(--t-fast) var(--ease);
}
.header-phone svg { width: 18px; height: 18px; color: var(--rcgl-green); }
.header-phone:hover { color: var(--rcgl-green); }
.site-header--hero:not(.site-header--solid) .header-phone { color: var(--rcgl-white); }
.site-header--hero:not(.site-header--solid) .header-phone svg { color: var(--rcgl-eucalyptus); }
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid var(--rcgl-line-strong);
background: var(--rcgl-white);
border-radius: 10px;
cursor: pointer;
color: var(--rcgl-ink);
}
.menu-toggle svg { width: 24px; height: 24px; }
.site-header--hero:not(.site-header--solid) .menu-toggle {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .35);
color: var(--rcgl-white);
backdrop-filter: blur(6px);
}
/* Mobile slide-out menu */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
z-index: 200;
transform: translateY(-100%);
transition: transform var(--t-slow) var(--ease);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px clamp(20px, 4vw, 32px);
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mobile-menu__close {
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
border-radius: 10px;
color: var(--rcgl-white);
display: grid;
place-items: center;
cursor: pointer;
}
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__nav {
flex: 1;
padding: 12px clamp(20px, 4vw, 32px);
display: flex;
flex-direction: column;
gap: 4px;
}
.mobile-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 4px;
color: var(--rcgl-white);
border-bottom: 1px solid rgba(255, 255, 255, .08);
font-size: 1.25rem;
font-weight: 600;
}
.mobile-menu__link svg { width: 18px; height: 18px; opacity: .6; }
.mobile-menu__foot {
padding: 24px clamp(20px, 4vw, 32px) 32px;
border-top: 1px solid rgba(255, 255, 255, .12);
display: grid;
gap: 12px;
}
.mobile-menu__contact {
display: flex;
align-items: center;
gap: 12px;
color: var(--rcgl-stone);
font-weight: 600;
}
.mobile-menu__contact svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--rcgl-eucalyptus);
}
/* Sticky desktop CTA — “Request Proposal” */
.sticky-side-cta {
position: fixed;
right: -10px;
top: 45%;
transform: rotate(-90deg) translateX(calc(50% + 10px));
transform-origin: right top;
background: var(--rcgl-green);
color: var(--rcgl-white);
padding: 12px 20px;
border-radius: 12px 12px 0 0;
font-weight: 700;
font-size: .85rem;
letter-spacing: .08em;
text-transform: uppercase;
box-shadow: var(--shadow-md);
z-index: 80;
transition: background var(--t-fast) var(--ease);
}
.sticky-side-cta:hover { background: var(--rcgl-green-dark); color: var(--rcgl-white); }
/* Mobile bottom sticky CTA bar */
.mobile-cta-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--rcgl-white);
border-top: 1px solid var(--rcgl-line-strong);
padding: 10px 12px env(safe-area-inset-bottom);
display: none;
grid-template-columns: 1fr 1fr;
gap: 10px;
z-index: 90;
box-shadow: 0 -8px 24px rgba(11, 19, 16, .08);
}
.mobile-cta-bar .btn { padding: 12px 14px; font-size: .92rem; }
/* 5 — Hero (video) ------------------------------------------- */
.hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
color: var(--rcgl-white);
overflow: hidden;
isolation: isolate;
margin-top: -76px;
padding-top: 76px;
background: var(--rcgl-green-dark);
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.hero__media video,
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(11, 19, 16, .55) 0%, rgba(11, 19, 16, .35) 35%, rgba(11, 19, 16, .65) 75%, rgba(11, 19, 16, .85) 100%),
radial-gradient(circle at 25% 30%, rgba(31, 107, 69, .2), transparent 60%);
z-index: 1;
}
.hero__content {
position: relative;
z-index: 2;
padding-block: clamp(80px, 10vw, 140px);
max-width: 980px;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.22em;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 8px 16px;
border-radius: var(--radius-pill);
margin-bottom: 28px;
backdrop-filter: blur(8px);
}
.hero__eyebrow::before {
content: "";
width: 8px;
height: 8px;
background: var(--rcgl-eucalyptus);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(127, 168, 138, 0.25);
}
.hero h1 {
color: var(--rcgl-white);
font-size: clamp(2.5rem, 5vw + .5rem, 5rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 28px;
max-width: 18ch;
text-wrap: balance;
}
.hero p {
color: rgba(255, 255, 255, .88);
font-size: clamp(1.05rem, .5vw + 1rem, 1.3rem);
max-width: 60ch;
margin-bottom: 36px;
text-wrap: pretty;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 28px;
}
.hero__trust {
font-size: .92rem;
color: rgba(255, 255, 255, .68);
max-width: 60ch;
border-left: 2px solid rgba(255, 255, 255, .25);
padding-left: 14px;
}
.hero__scroll {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, .8);
font-size: .75rem;
letter-spacing: .2em;
text-transform: uppercase;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.hero__scroll::after {
content: "";
width: 1px;
height: 36px;
background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
animation: scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
50.1%{ transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* Page hero (smaller, for inner pages) */
.page-hero {
position: relative;
color: var(--rcgl-white);
background: var(--rcgl-green-dark);
overflow: hidden;
isolation: isolate;
padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
}
.page-hero__media {
position: absolute;
inset: 0;
z-index: -1;
}
.page-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.page-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 47, 36, .65) 0%, rgba(15, 47, 36, .85) 100%);
}
.page-hero__inner { max-width: 760px; position: relative; }
.page-hero h1 {
color: var(--rcgl-white);
margin-bottom: 16px;
text-wrap: balance;
}
.page-hero p {
color: rgba(255, 255, 255, .85);
font-size: clamp(1.05rem, .35vw + 1rem, 1.25rem);
max-width: 60ch;
margin-bottom: 0;
}
.breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .14em;
color: rgba(255, 255, 255, .7);
margin-bottom: 22px;
flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255, 255, 255, .85); }
.breadcrumb a:hover { color: var(--rcgl-white); }
.breadcrumb span { opacity: .5; }
/* 6 — Buttons + chips ---------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.97rem;
letter-spacing: 0.005em;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
white-space: nowrap;
line-height: 1;
font-family: inherit;
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary {
background: var(--rcgl-green);
color: var(--rcgl-white);
box-shadow: 0 8px 22px -8px rgba(31, 107, 69, .55);
}
.btn--primary:hover {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(31, 107, 69, .65);
}
.btn--ghost {
background: rgba(255, 255, 255, 0.08);
color: var(--rcgl-white);
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
}
.btn--ghost:hover {
background: rgba(255, 255, 255, 0.18);
color: var(--rcgl-white);
border-color: rgba(255, 255, 255, 0.6);
}
.btn--outline {
background: transparent;
color: var(--rcgl-green-dark);
border-color: var(--rcgl-green-dark);
}
.btn--outline:hover {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.btn--sand {
background: var(--rcgl-sand);
color: var(--rcgl-green-dark);
}
.btn--sand:hover { background: var(--rcgl-sand-soft); color: var(--rcgl-green-dark); }
.btn--light {
background: var(--rcgl-white);
color: var(--rcgl-green-dark);
}
.btn--light:hover { background: var(--rcgl-stone); color: var(--rcgl-green-dark); transform: translateY(-1px); }
.btn--lg { padding: 18px 32px; font-size: 1.02rem; }
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--rcgl-green-soft);
color: var(--rcgl-green-dark);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.chip--dark { background: rgba(255, 255, 255, .1); color: var(--rcgl-stone); }
/* 7 — Sections + cards --------------------------------------- */
/* Trust strip (under hero) */
.trust-strip {
background: var(--rcgl-white);
margin-top: -1px;
border-bottom: 1px solid var(--rcgl-line);
}
.trust-strip__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.trust-strip__item {
padding: 36px 28px;
border-right: 1px solid var(--rcgl-line);
display: flex;
flex-direction: column;
gap: 10px;
}
.trust-strip__item:last-child { border-right: none; }
.trust-strip__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green);
display: grid; place-items: center;
}
.trust-strip__icon svg { width: 24px; height: 24px; }
.trust-strip__num {
font-size: 1.6rem;
font-weight: 800;
color: var(--rcgl-green-dark);
line-height: 1;
}
.trust-strip__label {
font-size: 0.92rem;
font-weight: 600;
color: var(--rcgl-mute);
line-height: 1.35;
}
@media (max-width: 980px) {
.trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
.trust-strip__item { border-right: none; border-bottom: 1px solid var(--rcgl-line); }
.trust-strip__item:nth-child(odd) { border-right: 1px solid var(--rcgl-line); }
.trust-strip__item:last-child,
.trust-strip__item:nth-last-child(2) { border-bottom: none; }
}
@media (max-width: 540px) {
.trust-strip__grid { grid-template-columns: 1fr; }
.trust-strip__item { border-right: none !important; border-bottom: 1px solid var(--rcgl-line) !important; }
.trust-strip__item:last-child { border-bottom: none !important; }
}
/* Service cards */
.cards {
display: grid;
gap: clamp(16px, 2vw, 24px);
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 880px) {
.cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.cards--2, .cards--3, .cards--4, .cards--auto { grid-template-columns: 1fr; }
}
.service-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--rcgl-charcoal);
color: var(--rcgl-white);
isolation: isolate;
aspect-ratio: 4 / 5;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 28px;
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
box-shadow: var(--shadow-sm);
}
.service-card__media {
position: absolute;
inset: 0;
z-index: -2;
}
.service-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow) var(--ease);
}
.service-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(11, 19, 16, .15) 0%, rgba(11, 19, 16, .55) 55%, rgba(11, 19, 16, .92) 100%);
transition: background var(--t-med) var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card:hover::before { background: linear-gradient(180deg, rgba(15, 47, 36, .25) 0%, rgba(15, 47, 36, .65) 55%, rgba(15, 47, 36, .94) 100%); }
.service-card__icon {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, .14);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .2);
color: var(--rcgl-white);
display: grid; place-items: center;
margin-bottom: auto;
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 {
color: var(--rcgl-white);
font-size: 1.45rem;
margin: 18px 0 10px;
}
.service-card p {
color: rgba(255, 255, 255, .82);
font-size: 0.96rem;
margin-bottom: 18px;
}
.service-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rcgl-white);
font-weight: 700;
font-size: 0.92rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.service-card__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.service-card:hover .service-card__cta svg { transform: translateX(4px); }
/* Sector cards (different style — hover dark overlay) */
.sector-card {
position: relative;
border-radius: var(--radius-md);
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
padding: 32px 28px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
overflow: hidden;
isolation: isolate;
text-decoration: none;
color: var(--rcgl-ink);
display: flex;
flex-direction: column;
gap: 14px;
min-height: 220px;
}
.sector-card__icon {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green);
display: grid; place-items: center;
}
.sector-card__icon svg { width: 24px; height: 24px; }
.sector-card h3 { font-size: 1.2rem; margin: 0; color: var(--rcgl-ink); }
.sector-card p { font-size: 0.95rem; margin: 0; color: var(--rcgl-mute); }
.sector-card__arrow {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--rcgl-green);
}
.sector-card__arrow svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.sector-card:hover {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
border-color: var(--rcgl-green-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.sector-card:hover h3 { color: var(--rcgl-white); }
.sector-card:hover p { color: rgba(255, 255, 255, .8); }
.sector-card:hover .sector-card__icon { background: rgba(255, 255, 255, .15); color: var(--rcgl-white); }
.sector-card:hover .sector-card__arrow { color: var(--rcgl-white); }
.sector-card:hover .sector-card__arrow svg { transform: translateX(4px); }
/* Feature split (text + image) */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 80px);
align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split__media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-lg);
background: var(--rcgl-green-dark);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--wide { aspect-ratio: 5 / 4; }
.split__media-badge {
position: absolute;
bottom: 18px;
left: 18px;
background: rgba(15, 47, 36, .85);
color: var(--rcgl-white);
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: .82rem;
font-weight: 600;
backdrop-filter: blur(8px);
max-width: 70%;
}
@media (max-width: 880px) {
.split { grid-template-columns: 1fr; }
.split--reverse > :first-child { order: 0; }
}
/* Bullet list (premium) */
.bullets {
display: grid;
gap: 14px;
padding: 0;
margin: 0 0 28px;
list-style: none;
}
.bullets li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 1rem;
color: var(--rcgl-ink-2);
line-height: 1.5;
}
.bullets li::before {
content: "";
flex: 0 0 22px;
width: 22px;
height: 22px;
margin-top: 2px;
background: var(--rcgl-green-soft);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
background-size: 14px;
}
.section--dark .bullets li,
.section--charcoal .bullets li { color: rgba(244, 241, 234, .92); }
.section--dark .bullets li::before,
.section--charcoal .bullets li::before {
background-color: rgba(255, 255, 255, .1);
background-image: url("data:image/svg+xml;utf8,");
}
.bullets--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .bullets--2 { grid-template-columns: 1fr; } }
/* Stat cards */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.stat {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 28px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat__num {
font-family: var(--font-display);
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 800;
color: var(--rcgl-green-dark);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -.02em;
}
.stat__label { font-size: .92rem; color: var(--rcgl-mute); font-weight: 600; }
.section--dark .stat { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.section--dark .stat__num { color: var(--rcgl-white); }
.section--dark .stat__label { color: rgba(244, 241, 234, .8); }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats { grid-template-columns: 1fr; } }
/* Location cards */
.location-card {
background: var(--rcgl-white);
border-radius: var(--radius-lg);
border: 1px solid var(--rcgl-line);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.location-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.location-card__head {
background: linear-gradient(135deg, var(--rcgl-green-dark), var(--rcgl-green));
color: var(--rcgl-white);
padding: 24px 24px 20px;
position: relative;
overflow: hidden;
}
.location-card__head::after {
content: "";
position: absolute;
right: -40px;
bottom: -40px;
width: 160px;
height: 160px;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .15;
}
.location-card__pin {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
color: var(--rcgl-white);
display: grid; place-items: center;
margin-bottom: 12px;
backdrop-filter: blur(6px);
}
.location-card__pin svg { width: 20px; height: 20px; }
.location-card__region { font-size: 0.85rem; opacity: .85; margin-bottom: 4px; letter-spacing: .04em; }
.location-card__depot { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--rcgl-white); letter-spacing: -.015em; }
.location-card__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.location-card__body p { color: var(--rcgl-mute); font-size: .95rem; margin: 0; }
.location-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rcgl-green);
font-weight: 700;
font-size: 0.9rem;
}
.location-card__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.location-card:hover .location-card__cta svg { transform: translateX(4px); }
/* Gallery */
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
grid-auto-rows: 200px;
}
.gallery__item {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--rcgl-charcoal);
isolation: isolate;
}
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow) var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__caption {
position: absolute;
bottom: 12px;
left: 12px;
right: 12px;
color: var(--rcgl-white);
font-size: .85rem;
font-weight: 600;
background: rgba(11, 19, 16, .65);
padding: 8px 12px;
border-radius: 8px;
backdrop-filter: blur(6px);
opacity: 0;
transform: translateY(8px);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery__item:hover .gallery__caption { opacity: 1; transform: translateY(0); }
@media (max-width: 880px) {
.gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
/* Final CTA */
.cta-band {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: linear-gradient(135deg, var(--rcgl-green-dark) 0%, var(--rcgl-green) 100%);
color: var(--rcgl-white);
padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 64px);
isolation: isolate;
}
.cta-band::after {
content: "";
position: absolute;
right: -120px;
top: -100px;
width: 480px; height: 480px;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .12;
z-index: -1;
}
.cta-band h2 { color: var(--rcgl-white); margin-bottom: 16px; max-width: 24ch; }
.cta-band p { color: rgba(255, 255, 255, .85); max-width: 60ch; margin-bottom: 28px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* ============================================================
CTA Band — Editorial v2
Two-column layout (content + photo) used at the bottom of every
page. Matches gallery / about / FAQ visual language: animated dot
eyebrow, split gradient title, trust pills, primary + ghost +
tertiary actions, real crew photo with floating "online" chip,
floating leaf motifs, topo background pattern.
============================================================ */
.section--cta { padding-block: clamp(40px, 5vw, 80px); }
.cta-band--editorial {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
padding: clamp(40px, 5vw, 64px);
background:
linear-gradient(135deg, #0a241b 0%, var(--rcgl-green-dark) 50%, #1d4d3a 100%);
box-shadow: 0 30px 60px -40px rgba(11, 19, 16, 0.65);
position: relative;
overflow: hidden;
isolation: isolate;
}
.cta-band--editorial::after {
/* Replace base pattern with subtle topo overlay */
content: "";
position: absolute;
inset: 0;
background-image: url("../images/patterns/topo.svg");
background-size: 600px;
opacity: 0.06;
z-index: -1;
pointer-events: none;
}
.cta-band--editorial-text { grid-template-columns: 1fr; }
/* ---- Floating leaf motifs (decorative) ---- */
.cta-band__leaf {
position: absolute;
pointer-events: none;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: 0.08;
z-index: 0;
will-change: transform;
}
.cta-band__leaf--a {
top: -120px;
right: -80px;
width: 420px; height: 420px;
transform: rotate(20deg);
animation: floatLeaf 22s ease-in-out infinite;
}
.cta-band__leaf--b {
bottom: -160px;
left: -100px;
width: 360px; height: 360px;
transform: rotate(-30deg);
opacity: 0.05;
animation: floatLeaf 28s ease-in-out infinite reverse;
}
/* ---- Content column ---- */
.cta-band__content {
position: relative;
z-index: 2;
min-width: 0;
}
.cta-band__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--rcgl-eucalyptus);
margin-bottom: 18px;
padding: 7px 14px 7px 12px;
background: rgba(127, 168, 138, 0.12);
border: 1px solid rgba(127, 168, 138, 0.25);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cta-band__eyebrow-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 4px rgba(127, 168, 138, 0.22);
animation: pulseDot 2.4s ease-in-out infinite;
}
.cta-band__title {
margin: 0 0 18px;
color: var(--rcgl-white);
font-size: clamp(1.9rem, 2.8vw + .5rem, 3.2rem);
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
max-width: 22ch;
}
.cta-band__title-accent {
background: linear-gradient(135deg, #c2dbc9 0%, #7fa88a 60%, #4f8a68 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
line-height: 1.18;
padding-bottom: 0.12em;
margin-bottom: -0.12em;
}
.cta-band__lede {
margin: 0 0 22px;
color: rgba(255, 255, 255, 0.86);
font-size: 1.02rem;
line-height: 1.6;
max-width: 56ch;
}
/* ---- Trust pills ---- */
.cta-band__pills {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cta-band__pills li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: rgba(255, 255, 255, 0.92);
font-size: 0.86rem;
font-weight: 600;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cta-band__pills li:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(127, 168, 138, 0.45);
}
.cta-band__pill-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.20);
flex: 0 0 auto;
}
/* ---- Actions ---- */
.cta-band--editorial .cta-band__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.cta-band--editorial .btn--sand {
box-shadow: 0 12px 28px -12px rgba(207, 175, 124, 0.55);
}
.cta-band--editorial .btn--sand:hover {
box-shadow: 0 16px 32px -10px rgba(207, 175, 124, 0.70);
transform: translateY(-1px);
}
.btn--ghost-on-dark {
background: rgba(255, 255, 255, 0.05);
color: var(--rcgl-white);
border: 1px solid rgba(255, 255, 255, 0.30);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.btn--ghost-on-dark:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.55);
transform: translateY(-1px);
}
.btn--ghost-on-dark svg { color: var(--rcgl-eucalyptus); }
/* ---- Tertiary text link ---- */
.cta-band__tertiary {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
color: var(--rcgl-eucalyptus);
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.cta-band__tertiary-arrow {
display: inline-flex;
align-items: center;
transition: transform var(--t-fast) var(--ease);
}
.cta-band__tertiary-arrow svg { width: 14px; height: 14px; }
.cta-band__tertiary:hover {
color: #c2dbc9;
gap: 12px;
}
.cta-band__tertiary:hover .cta-band__tertiary-arrow { transform: translateX(2px); }
/* ---- Media column ---- */
.cta-band__media {
position: relative;
z-index: 1;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
transform: rotate(-1.5deg);
transition: transform var(--t-medium) var(--ease);
}
.cta-band__media:hover { transform: rotate(0deg) scale(1.01); }
.cta-band__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
transition: transform 1.6s var(--ease);
}
.cta-band__media:hover img { transform: scale(1.03); }
/* "Online / replies same business day" floating chip */
.cta-band__media-chip {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(11, 19, 16, 0.78);
color: var(--rcgl-white);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.10);
text-align: left;
justify-content: flex-start;
flex-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cta-band__media-chip-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #5fc88a;
box-shadow: 0 0 0 4px rgba(95, 200, 138, 0.25);
animation: pulseDot 2.4s ease-in-out infinite;
flex: 0 0 auto;
}
/* ---- Responsive ---- */
@media (max-width: 960px) {
.cta-band--editorial {
grid-template-columns: 1fr;
gap: 28px;
padding: clamp(28px, 6vw, 44px);
}
.cta-band__media {
aspect-ratio: 16 / 9;
order: -1;
transform: rotate(0deg);
}
.cta-band__title { font-size: clamp(1.6rem, 5vw + .5rem, 2.4rem); }
}
@media (max-width: 540px) {
.cta-band--editorial .cta-band__actions .btn { width: 100%; justify-content: center; }
.cta-band__media-chip { font-size: 0.72rem; padding: 9px 12px; }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.cta-band__leaf,
.cta-band__eyebrow-dot,
.cta-band__media-chip-dot,
.cta-band__media,
.cta-band__media img {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* Pull-quote / feature block */
.feature-quote {
text-align: center;
max-width: 900px;
margin-inline: auto;
}
.feature-quote h2 {
font-size: clamp(1.6rem, 2.6vw, 2.6rem);
line-height: 1.25;
color: inherit;
text-wrap: balance;
}
.feature-quote h2 em {
font-style: normal;
background: linear-gradient(120deg, var(--rcgl-green) 0%, var(--rcgl-eucalyptus) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* SEQ Map block */
.seq-map {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
border-radius: var(--radius-xl);
padding: clamp(32px, 5vw, 64px);
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
}
.seq-map::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle at 30% 30%, rgba(127, 168, 138, .25), transparent 60%);
}
.seq-map h2 { color: var(--rcgl-white); }
.seq-map__visual {
position: relative;
aspect-ratio: 1 / 1;
background: rgba(255, 255, 255, .04);
border-radius: var(--radius-lg);
padding: 24px;
border: 1px solid rgba(255, 255, 255, .1);
}
.seq-map__svg { width: 100%; height: 100%; }
@media (max-width: 880px) {
.seq-map { grid-template-columns: 1fr; }
}
/* Why-cards (mini list with number) */
.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .why-cards { grid-template-columns: 1fr; } }
.why-card {
padding: 28px;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.section--dark .why-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.why-card__num {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 800;
color: var(--rcgl-eucalyptus);
margin-bottom: 16px;
letter-spacing: .08em;
}
.why-card h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--rcgl-ink); }
.why-card p { font-size: .95rem; color: var(--rcgl-mute); margin: 0; }
.section--dark .why-card h3 { color: var(--rcgl-white); }
.section--dark .why-card p { color: rgba(244, 241, 234, .82); }
/* Capability list (used on service pages) */
.capability-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 32px 0;
}
.capability-grid li {
background: var(--rcgl-stone);
padding: 18px;
border-radius: var(--radius-sm);
font-size: .95rem;
font-weight: 600;
color: var(--rcgl-ink);
list-style: none;
border-left: 3px solid var(--rcgl-green);
display: flex;
align-items: center;
gap: 10px;
}
.capability-grid li::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--rcgl-green);
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
background-size: 12px;
}
@media (max-width: 880px) { .capability-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .capability-grid { grid-template-columns: 1fr; } }
/* FAQ */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq details {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 4px 8px;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq details[open] { border-color: var(--rcgl-green); box-shadow: var(--shadow-sm); }
.faq summary {
cursor: pointer;
font-weight: 700;
font-size: 1.05rem;
color: var(--rcgl-ink);
list-style: none;
padding: 18px 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; color: var(--rcgl-green); font-size: 1.4rem; line-height: 1; transition: transform var(--t-fast) var(--ease); }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 14px 18px; color: var(--rcgl-mute); margin: 0; }
/* 8 — Forms --------------------------------------------------- */
.form {
display: grid;
gap: 18px;
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-size: 0.9rem;
font-weight: 700;
color: var(--rcgl-ink);
}
.field label .req { color: var(--rcgl-green); }
.field input,
.field select,
.field textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--rcgl-line-strong);
border-radius: var(--radius-sm);
background: var(--rcgl-white);
font-family: inherit;
font-size: 1rem;
color: var(--rcgl-ink);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--rcgl-green);
box-shadow: 0 0 0 4px rgba(31, 107, 69, .12);
}
.field input::placeholder,
.field textarea::placeholder { color: #9aa39e; }
.field-check {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 0.92rem;
color: var(--rcgl-mute);
line-height: 1.5;
}
.field-check input { margin-top: 4px; flex-shrink: 0; }
/* 9 — Footer ------------------------------------------------- */
.site-footer {
background: var(--rcgl-charcoal);
color: rgba(244, 241, 234, .8);
position: relative;
overflow: hidden;
}
.site-footer::after {
content: "";
position: absolute;
inset: 0;
background-image: url("../images/patterns/topo.svg");
background-size: 720px;
opacity: .04;
pointer-events: none;
}
.site-footer__top {
padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: clamp(28px, 4vw, 56px);
position: relative;
}
.site-footer__brand p {
font-size: 0.96rem;
color: rgba(244, 241, 234, .65);
margin: 18px 0 22px;
max-width: 36ch;
}
.site-footer__contact {
display: grid;
gap: 10px;
font-size: 0.95rem;
}
.site-footer__contact a {
color: var(--rcgl-stone);
display: inline-flex;
align-items: center;
gap: 10px;
}
.site-footer__contact a:hover { color: var(--rcgl-eucalyptus); }
.site-footer__contact svg { width: 16px; height: 16px; color: var(--rcgl-eucalyptus); }
.site-footer h4 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--rcgl-white);
margin-bottom: 18px;
font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer ul a {
color: rgba(244, 241, 234, .68);
font-size: 0.94rem;
transition: color var(--t-fast) var(--ease);
}
.site-footer ul a:hover { color: var(--rcgl-eucalyptus); }
.site-footer__sublink { padding-left: 14px; position: relative; }
.site-footer__sublink::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 1px;
background: rgba(244, 241, 234, .3);
}
.site-footer__sublink a {
color: rgba(244, 241, 234, .55);
font-size: 0.88rem;
}
.site-footer__bar {
border-top: 1px solid rgba(244, 241, 234, .12);
padding: 22px 0 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: .85rem;
color: rgba(244, 241, 234, .55);
position: relative;
flex-wrap: wrap;
}
.site-footer__bar a { color: rgba(244, 241, 234, .65); }
.site-footer__bar a:hover { color: var(--rcgl-eucalyptus); }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.site-footer__credit {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(244, 241, 234, .14);
background: rgba(244, 241, 234, .04);
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-footer__credit strong { color: rgba(244, 241, 234, .92); font-weight: 700; }
.site-footer__credit-icon { width: 14px; height: 14px; color: var(--rcgl-eucalyptus); flex-shrink: 0; }
.site-footer__credit:hover {
color: var(--rcgl-white);
border-color: rgba(127, 168, 138, .55);
background: rgba(127, 168, 138, .12);
}
.site-footer__credit:hover .site-footer__credit-icon { color: var(--rcgl-white); }
@media (max-width: 980px) {
.site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.site-footer__top { grid-template-columns: 1fr; }
.site-footer__bar { flex-direction: column; align-items: flex-start; }
}
/* 10 — Utilities + animations -------------------------------- */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: 32px; }
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ============================================================
PHOTO-LED COMPONENTS — Real RCGL imagery
============================================================ */
/* Hero photo variant */
.hero--photo { min-height: 78vh; }
.hero--photo .hero__media::after { display: none; }
.hero--photo .hero__overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(120deg, rgba(11,19,16,.78) 0%, rgba(11,19,16,.55) 45%, rgba(11,19,16,.30) 80%),
linear-gradient(180deg, rgba(11,19,16,.0) 60%, rgba(11,19,16,.55) 100%);
}
.hero--photo .hero__lede {
color: rgba(255,255,255,.92);
font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
max-width: 56ch;
margin-bottom: 32px;
}
.hero--photo h1 { max-width: 16ch; }
/* Eyebrow on dark/photo */
.eyebrow--light { color: var(--rcgl-eucalyptus); }
.eyebrow--light::before { background: var(--rcgl-eucalyptus); }
/* Logo strip — council clients */
.logo-strip {
background: var(--rcgl-white);
border-top: 1px solid var(--rcgl-line);
border-bottom: 1px solid var(--rcgl-line);
padding-block: 44px;
}
.logo-strip__label {
text-align: center;
text-transform: uppercase;
letter-spacing: .22em;
font-size: .78rem;
font-weight: 700;
color: var(--rcgl-mute);
margin-bottom: 26px;
}
.logo-strip__row {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.logo-strip__cell {
display: flex;
align-items: center;
justify-content: center;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: 12px;
padding: 14px 18px;
height: 84px;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.logo-strip__cell:hover {
border-color: var(--rcgl-eucalyptus);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.logo-strip__cell img {
max-height: 56px;
max-width: 100%;
width: auto;
object-fit: contain;
filter: grayscale(1) contrast(1.05);
opacity: .8;
transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.logo-strip__cell:hover img {
filter: none;
opacity: 1;
}
/* Sunshine Coast Council logo carries extra internal whitespace — visually scale up to match the others. */
.logo-strip__cell img[alt*="Sunshine Coast"] {
transform: scale(1.2);
}
@media (max-width: 1024px) {
.logo-strip__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.logo-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.logo-strip__cell { height: 72px; padding: 10px 12px; }
.logo-strip__cell img { max-height: 44px; }
}
/* Big feature strip — full-width image with content */
.feature-strip {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
background: var(--rcgl-stone);
}
.feature-strip__media {
position: relative;
min-height: 480px;
overflow: hidden;
}
.feature-strip__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feature-strip__content {
display: flex;
align-items: center;
padding-block: clamp(64px, 8vw, 120px);
padding-inline: clamp(32px, 5vw, 80px);
}
.feature-strip__content h2 {
margin-bottom: 18px;
text-wrap: balance;
}
.feature-strip__content p {
color: var(--rcgl-mute);
margin-bottom: 28px;
max-width: 50ch;
}
@media (max-width: 880px) {
.feature-strip { grid-template-columns: 1fr; }
.feature-strip__media { min-height: 320px; }
}
/* Split feature — 50/50 photo + content (alternates flow) */
.split-feature {
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: stretch;
background: var(--rcgl-charcoal);
color: var(--rcgl-white);
}
.split-feature__photo {
position: relative;
min-height: 460px;
}
.split-feature__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.split-feature__content {
padding-block: clamp(56px, 8vw, 110px);
padding-inline: clamp(32px, 5vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
}
.split-feature__content h2 { color: var(--rcgl-white); margin: 0; max-width: 18ch; text-wrap: balance; }
.split-feature__content p { color: rgba(255,255,255,.78); margin: 0; max-width: 52ch; }
.split-feature__content .eyebrow { color: var(--rcgl-eucalyptus); }
.split-feature__content .eyebrow::before { background: var(--rcgl-eucalyptus); }
.split-feature__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 880px) {
.split-feature { grid-template-columns: 1fr; }
.split-feature__photo { min-height: 320px; }
}
/* Sector cards — dark variant (used on dark section) */
.section--dark .sector-card,
.sector-card--dark {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.12);
color: var(--rcgl-white);
}
.section--dark .sector-card h3,
.sector-card--dark h3 { color: var(--rcgl-white); }
.section--dark .sector-card__icon,
.sector-card--dark .sector-card__icon {
background: rgba(127,168,138,.16);
color: var(--rcgl-eucalyptus);
}
.section--dark .sector-card__arrow,
.sector-card--dark .sector-card__arrow { color: var(--rcgl-eucalyptus); }
.section--dark .sector-card:hover,
.sector-card--dark:hover {
background: var(--rcgl-green);
border-color: var(--rcgl-green-mid);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.section--dark .sector-card:hover .sector-card__icon,
.sector-card--dark:hover .sector-card__icon { background: rgba(255,255,255,.18); color: var(--rcgl-white); }
.section--dark .sector-card:hover .sector-card__arrow,
.sector-card--dark:hover .sector-card__arrow { color: var(--rcgl-white); }
/* Accreditation row */
.accred-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 28px 48px;
margin-top: 20px;
}
.accred-row__item {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 18px 28px;
display: grid; place-items: center;
box-shadow: var(--shadow-sm);
min-height: 110px;
min-width: 180px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.accred-row__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.accred-row__item img {
height: 72px;
width: auto;
max-width: 240px;
object-fit: contain;
}
/* Careers CTA — photo with content overlay */
.careers-cta {
position: relative;
min-height: 520px;
color: var(--rcgl-white);
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
}
.careers-cta__media {
position: absolute;
inset: 0;
z-index: -2;
}
.careers-cta__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.careers-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(110deg, rgba(11,19,16,.85) 0%, rgba(11,19,16,.55) 55%, rgba(11,19,16,.35) 100%),
linear-gradient(180deg, rgba(11,19,16,.1) 0%, rgba(11,19,16,.55) 100%);
}
.careers-cta__content {
max-width: var(--container);
margin: 0 auto;
padding: clamp(64px, 10vw, 140px) clamp(20px, 4vw, 56px);
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
}
.careers-cta__content h2 {
color: var(--rcgl-white);
max-width: 22ch;
text-wrap: balance;
margin: 0 0 10px;
}
/* Careers — hero search-tag chips */
.careers-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.careers-hero-tag {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.2);
color: var(--rcgl-white);
font-size: 0.82rem;
font-weight: 600;
backdrop-filter: blur(4px);
}
/* Careers — informational role cards (NOT links — only Apply button leaves the site) */
/* ------------------------------------------------------------
Role card — careers page (editorial layout, gallery-card sibling)
Photo (16:10) + service eyebrow + title + lede + skill chips +
footer rule with "Apply via portal" + circular arrow.
The whole card is the click target via .role-card__open.
------------------------------------------------------------ */
.role-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
will-change: transform;
}
.role-card:hover {
transform: translateY(-5px);
border-color: var(--rcgl-eucalyptus);
box-shadow: 0 14px 32px rgba(11, 19, 16, 0.10);
}
.role-card__open {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
font: inherit;
}
.role-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rcgl-stone);
}
.role-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease);
}
.role-card:hover .role-card__media img { transform: scale(1.05); }
.role-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 18px 20px 18px;
gap: 8px;
}
.role-card__service {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--rcgl-green-dark);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
margin-bottom: 2px;
}
.role-card__service-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
margin-right: 2px;
transform: translateY(-1px);
flex: 0 0 auto;
}
.role-card__title {
font-size: clamp(1.05rem, 1.4vw + .55rem, 1.22rem);
font-weight: 700;
margin: 0;
color: var(--rcgl-ink);
line-height: 1.28;
letter-spacing: -0.01em;
text-wrap: balance;
}
.role-card__lede {
margin: 0;
color: var(--rcgl-mute);
font-size: 0.93rem;
line-height: 1.55;
}
.role-card__tags {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.role-card__tags li {
padding: 4px 10px;
border-radius: 999px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green-dark);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.role-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rcgl-line);
}
.role-card__cta {
color: var(--rcgl-green-dark);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.01em;
}
.role-card__arrow {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-green-dark);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.role-card__arrow svg {
width: 14px;
height: 14px;
transition: transform var(--t-fast) var(--ease);
}
.role-card:hover .role-card__arrow {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.role-card:hover .role-card__arrow svg { transform: translateX(2px); }
.role-card:hover .role-card__cta { color: var(--rcgl-green-dark); }
.careers-portal-note {
text-align: center;
margin-top: 28px;
color: var(--rcgl-mute);
font-size: 0.92rem;
}
/* Technology — integration grid */
.systems-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin-top: 8px;
}
.systems-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: 14px;
padding: 22px 22px;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.systems-card:hover {
border-color: var(--rcgl-eucalyptus);
transform: translateY(-2px);
box-shadow: 0 18px 28px -22px rgba(15, 47, 36, 0.22);
}
.systems-card__title {
font-weight: 800;
font-size: 1rem;
color: var(--rcgl-green-dark);
margin-bottom: 6px;
}
.systems-card__examples {
font-size: 0.88rem;
color: var(--rcgl-mute);
line-height: 1.55;
}
.systems-note {
margin-top: 22px;
color: var(--rcgl-mute);
font-size: 0.95rem;
max-width: 80ch;
}
/* Service Spotlight — per-service signature differentiator */
.spotlight {
padding: 80px 0;
background: linear-gradient(135deg, var(--rcgl-green-dark) 0%, var(--rcgl-eucalyptus) 100%);
color: var(--rcgl-white);
position: relative;
overflow: hidden;
}
.spotlight::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 20%, rgba(255,255,255,0.06) 0%, transparent 35%),
radial-gradient(circle at 84% 78%, rgba(255,255,255,0.05) 0%, transparent 40%);
pointer-events: none;
}
.spotlight__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 48px;
align-items: center;
z-index: 1;
}
.spotlight__media {
aspect-ratio: 4 / 3;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 60px -28px rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.12);
}
.spotlight__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.spotlight__body .eyebrow {
color: var(--rcgl-sand);
}
.spotlight__body .eyebrow::before {
background: var(--rcgl-sand);
}
.spotlight__body h2 {
color: var(--rcgl-white);
margin: 0 0 16px;
text-wrap: balance;
}
.spotlight__body p {
color: rgba(255,255,255,0.85);
margin: 0 0 24px;
max-width: 56ch;
line-height: 1.65;
}
.spotlight__stats {
display: grid;
/* Min track ~152px so four tiles only when the column is wide enough; avoids
~90px tracks that force wrapping and overflow into neighbouring cards. */
grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
gap: 18px;
margin-top: 8px;
}
.spotlight__stat {
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
isolation: isolate;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
padding: 18px 16px;
text-align: left;
}
.spotlight__stat-num {
font-size: clamp(1.35rem, 2.4vw, 2rem);
font-weight: 800;
color: var(--rcgl-sand);
letter-spacing: -0.02em;
line-height: 1.12;
margin-bottom: 4px;
min-width: 0;
overflow-wrap: anywhere;
text-wrap: balance;
}
.spotlight__stat-label {
font-size: 0.82rem;
color: rgba(255,255,255,0.78);
line-height: 1.4;
font-weight: 500;
margin-top: auto;
}
@media (max-width: 900px) {
.spotlight { padding: 56px 0; }
.spotlight__inner { grid-template-columns: 1fr; gap: 28px; }
}
/* ============================================================
SIGNATURE PROGRAM — flagship capability section
(e.g. Arboriculture · Hollow Habitat)
============================================================ */
.sig-program {
position: relative;
isolation: isolate;
background:
linear-gradient(180deg, var(--rcgl-stone) 0%, var(--rcgl-white) 60%);
border-top: 1px solid var(--rcgl-line);
border-bottom: 1px solid var(--rcgl-line);
}
/* Hero panel — photo + intro + stats */
.sig-program__hero {
padding: 96px 0 64px;
position: relative;
}
.sig-program__hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
.sig-program__media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-lg);
border: 1px solid var(--rcgl-line);
}
.sig-program__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sig-program__media-caption {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
background: rgba(15, 47, 36, 0.86);
backdrop-filter: blur(6px);
color: var(--rcgl-white);
font-size: 0.82rem;
font-weight: 600;
line-height: 1.4;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.sig-program__intro h2 {
font-size: clamp(1.85rem, 2.5vw + .8rem, 2.95rem);
margin: 8px 0 18px;
text-wrap: balance;
}
.sig-program__lede {
font-size: 1.05rem;
line-height: 1.6;
color: var(--rcgl-ink-2);
margin: 0 0 28px;
max-width: 56ch;
}
.sig-program__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.sig-program__stat {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-left: 3px solid var(--rcgl-eucalyptus);
border-radius: 14px;
padding: 16px 18px;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sig-program__stat:hover {
transform: translateY(-2px);
border-left-color: var(--rcgl-green);
box-shadow: var(--shadow-sm);
}
.sig-program__stat-num {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 800;
color: var(--rcgl-green-dark);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.sig-program__stat-label {
font-size: 0.84rem;
color: var(--rcgl-mute);
line-height: 1.4;
}
.sig-program__cta {
margin-top: 8px;
margin-bottom: 16px;
}
/* Prominent expand toggle — sits below the CTA, full width of the intro column */
.sig-program__expand-toggle {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
max-width: 520px;
padding: 18px 22px;
background: linear-gradient(135deg, var(--rcgl-green-dark) 0%, var(--rcgl-green) 100%);
border: 0;
border-radius: 16px;
color: var(--rcgl-white);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
box-shadow: 0 12px 28px -16px rgba(15, 47, 36, 0.5);
overflow: hidden;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.sig-program__expand-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px -16px rgba(15, 47, 36, 0.55);
filter: brightness(1.06);
}
.sig-program__expand-toggle:focus-visible {
outline: 3px solid var(--rcgl-sand);
outline-offset: 3px;
}
.sig-program__expand-toggle-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.22);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--t-med) var(--ease), background var(--t-fast) var(--ease);
}
.sig-program__expand-toggle-icon svg {
width: 22px;
height: 22px;
color: var(--rcgl-white);
transition: transform var(--t-med) var(--ease);
}
.sig-program__expand-toggle[aria-expanded="true"] .sig-program__expand-toggle-icon svg {
transform: rotate(180deg);
}
.sig-program__expand-toggle-text {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.sig-program__expand-toggle-label {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.005em;
line-height: 1.2;
}
.sig-program__expand-toggle-sub {
font-size: 0.82rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.82);
font-weight: 500;
}
/* Pulse cue — gentle ring that draws the eye to the toggle */
.sig-program__expand-toggle-pulse {
position: absolute;
top: 50%;
left: 22px;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(217, 199, 163, 0.7);
pointer-events: none;
animation: sigPulse 2.4s var(--ease) infinite;
}
.sig-program__expand-toggle[aria-expanded="true"] .sig-program__expand-toggle-pulse {
animation: none;
opacity: 0;
}
@keyframes sigPulse {
0% { transform: translateY(-50%) scale(0.8); opacity: 0.9; }
70% { transform: translateY(-50%) scale(1.6); opacity: 0; }
100% { transform: translateY(-50%) scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sig-program__expand-toggle-pulse { animation: none; opacity: 0; }
}
/* Expandable region — hidden by default; smooth fade-in when shown */
.sig-program__expand[hidden] { display: none; }
.sig-program__expand {
animation: sigExpandIn 480ms var(--ease) both;
}
@keyframes sigExpandIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.sig-program__expand { animation: none; }
}
/* Methodology phases */
.sig-program__phases {
padding: 56px 0;
background: var(--rcgl-white);
border-top: 1px solid var(--rcgl-line);
}
/* Species + evidence split */
.sig-program__detail {
padding: 56px 0;
background: var(--rcgl-stone);
}
.sig-program__detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.sig-program__panel {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
padding: 32px 30px;
box-shadow: var(--shadow-sm);
}
.sig-program__panel h3 {
font-size: 1.45rem;
margin: 6px 0 12px;
}
.sig-program__panel p {
color: var(--rcgl-mute);
margin: 0 0 18px;
line-height: 1.6;
}
.sig-program__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sig-program__chips .chip {
background: var(--rcgl-green-soft);
color: var(--rcgl-green-dark);
font-weight: 600;
font-size: 0.82rem;
padding: 8px 14px;
}
/* Clickable species chips — open the species modal */
.species-chips { gap: 10px; }
.species-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green-dark);
border: 1px solid var(--rcgl-line);
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.84rem;
cursor: pointer;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.species-chip:hover {
border-color: var(--rcgl-green);
background: var(--rcgl-white);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.species-chip__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
flex-shrink: 0;
}
.species-chip__name { line-height: 1.2; }
.species-chip__status {
margin-left: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rcgl-mute);
line-height: 1.2;
}
/* Status-coded variants */
.species-chip--endangered .species-chip__dot { background: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,.15); }
.species-chip--endangered .species-chip__status { background: rgba(198,40,40,.10); color: #8c1d1d; }
.species-chip--vulnerable .species-chip__dot { background: #e08a1c; box-shadow: 0 0 0 3px rgba(224,138,28,.15); }
.species-chip--vulnerable .species-chip__status { background: rgba(224,138,28,.12); color: #8a560f; }
.species-chip--mixed .species-chip__dot { background: #6c63b3; box-shadow: 0 0 0 3px rgba(108,99,179,.15); }
.species-chip--mixed .species-chip__status { background: rgba(108,99,179,.12); color: #4d4789; }
.species-chip--common .species-chip__dot { background: var(--rcgl-eucalyptus); }
/* Species modal */
.species-modal {
position: fixed;
inset: 0;
background: rgba(11, 19, 16, 0.86);
backdrop-filter: blur(8px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 64px 20px 80px;
/* Account for iOS safe-areas so the close button and content clear notches/home indicator */
padding-top: max(64px, env(safe-area-inset-top));
padding-bottom: max(80px, env(safe-area-inset-bottom));
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
.species-modal.is-open { opacity: 1; visibility: visible; }
.species-modal__close {
position: fixed;
top: max(16px, env(safe-area-inset-top));
right: max(16px, env(safe-area-inset-right));
width: 48px;
height: 48px;
background: var(--rcgl-white);
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--rcgl-ink);
box-shadow: var(--shadow-md);
z-index: 1001;
transition: transform var(--t-fast) var(--ease);
}
.species-modal__close:hover { transform: scale(1.06); }
.species-modal__close svg { width: 22px; height: 22px; }
.species-modal__inner {
max-width: 880px;
width: 100%;
margin: 0 auto;
}
.species-modal__content {
background: var(--rcgl-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.species-detail__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rcgl-stone);
}
.species-detail__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.species-detail__status {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: var(--rcgl-ink);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
backdrop-filter: blur(6px);
}
.species-detail__status--endangered { background: #c62828; color: #fff; }
.species-detail__status--vulnerable { background: #e08a1c; color: #fff; }
.species-detail__status--mixed { background: #6c63b3; color: #fff; }
.species-detail__status--common { background: var(--rcgl-green); color: #fff; }
.species-detail__body { padding: 32px 36px 36px; }
.species-detail__name {
font-size: clamp(1.6rem, 2vw + .5rem, 2.2rem);
margin: 0 0 4px;
}
.species-detail__sci {
display: block;
font-style: italic;
color: var(--rcgl-mute);
font-size: 1rem;
margin-bottom: 12px;
}
.species-detail__lede {
color: var(--rcgl-ink-2);
font-size: 1.02rem;
line-height: 1.6;
margin: 0 0 20px;
}
.species-detail__stats {
display: grid;
/* Auto-fit so stats reflow to a single column on narrow screens, no matter
what the modal's outer width settles on. minmax(0,1fr) prevents long
values from forcing horizontal overflow on small screens. */
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: 12px;
margin: 0 0 24px;
padding: 18px;
background: var(--rcgl-stone);
border-radius: var(--radius-md);
}
.species-detail__stat {
min-width: 0;
}
.species-detail__stat dt {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rcgl-mute);
font-weight: 700;
margin-bottom: 4px;
overflow-wrap: anywhere;
}
.species-detail__stat dd {
margin: 0;
color: var(--rcgl-ink);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.species-detail__panel {
padding: 18px 0 0;
border-top: 1px solid var(--rcgl-line);
margin-top: 18px;
}
.species-detail__panel h3 {
font-size: 1.05rem;
margin: 0 0 8px;
color: var(--rcgl-green-dark);
}
.species-detail__panel p {
color: var(--rcgl-ink-2);
margin: 0;
line-height: 1.65;
}
@media (max-width: 700px) {
.species-modal {
padding: 56px 12px 72px;
padding-top: max(56px, env(safe-area-inset-top));
padding-bottom: max(72px, env(safe-area-inset-bottom));
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
.species-modal__close {
top: max(12px, env(safe-area-inset-top));
right: max(12px, env(safe-area-inset-right));
width: 42px;
height: 42px;
}
.species-modal__close svg { width: 20px; height: 20px; }
.species-detail__media { aspect-ratio: 4 / 3; }
.species-detail__status { top: 12px; left: 12px; padding: 5px 12px; font-size: 0.7rem; }
.species-detail__body { padding: 22px 18px 26px; }
.species-detail__name { font-size: clamp(1.4rem, 5vw + .25rem, 1.85rem); }
.species-detail__sci { font-size: 0.92rem; margin-bottom: 10px; }
.species-detail__lede { font-size: 0.98rem; margin-bottom: 16px; }
.species-detail__stats {
grid-template-columns: 1fr;
padding: 14px;
gap: 10px;
margin-bottom: 18px;
}
.species-detail__panel { padding-top: 14px; margin-top: 14px; }
.species-detail__panel h3 { font-size: 1rem; }
}
body.species-modal-open { overflow: hidden; }
/* Differentiators — why we lead */
.sig-program__diff {
padding: 64px 0 88px;
background: linear-gradient(180deg, var(--rcgl-stone) 0%, var(--rcgl-green-soft) 100%);
}
.sig-program__diff h3 {
text-wrap: balance;
}
.sig-program__diff-list li {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: 12px;
padding: 14px 18px 14px 44px;
line-height: 1.5;
}
.sig-program__diff-list li::before {
left: 16px;
top: 16px;
}
@media (max-width: 960px) {
.sig-program__hero { padding: 64px 0 40px; }
.sig-program__hero-grid { grid-template-columns: 1fr; gap: 32px; }
.sig-program__media { aspect-ratio: 4 / 3; max-height: 480px; }
.sig-program__detail-grid { grid-template-columns: 1fr; gap: 24px; }
.sig-program__diff { padding: 48px 0 64px; }
}
@media (max-width: 540px) {
.sig-program__stats { grid-template-columns: 1fr; }
.sig-program__panel { padding: 24px 22px; }
}
/* ============================================================
ADDITIONAL PROGRAMS STRIP — companion feature blocks
(e.g. Carbon Offset, Data Capture under Arboriculture)
============================================================ */
.programs-strip__item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
background: var(--rcgl-white);
border-top: 1px solid var(--rcgl-line);
}
.programs-strip__item:last-child { border-bottom: 1px solid var(--rcgl-line); }
.programs-strip__item--reverse .programs-strip__media { order: 2; }
.programs-strip__media {
position: relative;
min-height: 480px;
overflow: hidden;
}
.programs-strip__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.programs-strip__content {
display: flex;
align-items: center;
padding: 80px 0;
background: var(--rcgl-stone);
}
.programs-strip__item--reverse .programs-strip__content {
background: linear-gradient(180deg, var(--rcgl-green-soft) 0%, var(--rcgl-stone) 100%);
}
.programs-strip__content h2 {
font-size: clamp(1.7rem, 2.2vw + .8rem, 2.6rem);
margin: 8px 0 16px;
text-wrap: balance;
}
.programs-strip__lede {
font-size: 1.02rem;
line-height: 1.65;
color: var(--rcgl-ink-2);
margin: 0 0 22px;
max-width: 56ch;
}
.programs-strip__highlights {
list-style: none;
padding: 0;
margin: 0 0 26px;
display: grid;
gap: 10px;
}
.programs-strip__highlights li {
position: relative;
padding-left: 30px;
color: var(--rcgl-ink-2);
font-size: 0.96rem;
line-height: 1.5;
}
.programs-strip__highlights li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--rcgl-green-soft);
border: 2px solid var(--rcgl-green);
}
.programs-strip__highlights li::after {
content: "";
position: absolute;
left: 6px;
top: 12px;
width: 6px;
height: 3px;
border-left: 2px solid var(--rcgl-green-dark);
border-bottom: 2px solid var(--rcgl-green-dark);
transform: rotate(-45deg);
}
@media (max-width: 960px) {
.programs-strip__item { grid-template-columns: 1fr; }
.programs-strip__item--reverse .programs-strip__media { order: 0; }
/* Drop the min-height: aspect-ratio + min-height combine to force a
physical min-width (h=320 * 3/2 = 480px), which overflows on phones
narrower than 480px. Let aspect-ratio compute height from width. */
.programs-strip__media { min-height: 0; aspect-ratio: 3 / 2; width: 100%; }
.programs-strip__content { padding: 56px 0; }
}
/* ============================================================
GALLERY — config-driven project grid + lightbox
============================================================ */
.gallery__filters {
display: grid;
gap: 16px;
margin-bottom: 36px;
padding-bottom: 22px;
border-bottom: 1px solid var(--rcgl-line);
}
/* Gallery page — shorter, lighter hero + less gap before search/filters */
.page-gallery .page-hero--photo {
min-height: clamp(260px, 36vh, 420px);
}
.page-gallery .page-hero--photo::before {
background:
linear-gradient(180deg, rgba(11, 19, 16, 0.34) 0%, rgba(11, 19, 16, 0.16) 48%, rgba(11, 19, 16, 0.55) 100%);
}
.page-gallery .page-hero--photo .page-hero__inner {
padding-block: clamp(36px, 4.5vw, 72px);
}
.page-gallery .project-gallery {
padding-top: clamp(22px, 3vw, 40px);
padding-bottom: clamp(64px, 8vw, 120px);
background: var(--rcgl-stone);
}
/* Search input */
.gallery__search-wrap {
position: relative;
max-width: 560px;
}
.gallery__search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--rcgl-mute);
pointer-events: none;
}
.gallery__search {
width: 100%;
height: 48px;
padding: 0 48px 0 48px;
border: 1px solid var(--rcgl-line-strong);
border-radius: 999px;
background: var(--rcgl-white);
font-family: inherit;
font-size: 0.95rem;
color: var(--rcgl-ink);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
-webkit-appearance: none;
appearance: none;
}
.gallery__search:focus {
outline: none;
border-color: var(--rcgl-green);
box-shadow: 0 0 0 3px rgba(91, 132, 100, 0.18);
}
.gallery__search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.gallery__search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-ink-2);
cursor: pointer;
padding: 0;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gallery__search-clear:hover {
background: var(--rcgl-line);
color: var(--rcgl-ink);
}
.gallery__search-clear svg {
width: 14px;
height: 14px;
}
.gallery__search-clear[hidden] { display: none; }
/* Filter rows (Region / Service) */
.gallery__filter-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
.gallery__filter-label {
flex: 0 0 auto;
min-width: 72px;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--rcgl-mute);
}
.gallery__filter-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1 1 0;
min-width: 0;
}
/* Mobile filter rules live further down (after .page-gallery .gallery__filters
base styling) so they win the source-order cascade. See "Mobile: tighten…" */
.gallery__filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: 999px;
color: var(--rcgl-ink-2);
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gallery__filter:hover {
border-color: var(--rcgl-eucalyptus);
color: var(--rcgl-green-dark);
}
.gallery__filter.is-active {
background: var(--rcgl-green-dark);
border-color: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.gallery__filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: var(--rcgl-stone);
color: var(--rcgl-mute);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
}
.gallery__filter.is-active .gallery__filter-count {
background: rgba(255, 255, 255, 0.18);
color: var(--rcgl-white);
}
.gallery__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
@media (max-width: 1100px) {
.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 720px) {
/* 1-col earlier so each card has room for a full-width photo, badge and
title — matches the edge-to-edge wide feel preferred on phones. */
.gallery__grid { grid-template-columns: 1fr; gap: 18px; }
}
/* ------------------------------------------------------------
Gallery card — clean editorial layout
Photo (16:9, no overlay) + service eyebrow + title + client +
footer row with location/year on the left and an arrow on the
right. The whole card is the click target via .gallery-card__open;
the arrow is a hover affordance, not a separate link.
------------------------------------------------------------ */
.gallery-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gallery-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--rcgl-eucalyptus);
}
.gallery-card[hidden] { display: none !important; }
.gallery-card__open {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
font: inherit;
}
.gallery-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rcgl-stone);
}
.gallery-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease);
}
.gallery-card:hover .gallery-card__media img { transform: scale(1.05); }
.gallery-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 18px 20px 18px;
gap: 6px;
}
.gallery-card__service {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--rcgl-green-dark);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
margin-bottom: 2px;
/* Cap to 2 lines — long service labels (e.g. "Landscape Construction ·
Hard & Softscape") stay readable instead of stacking 4 lines tall. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gallery-card__service-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
margin-right: 2px;
transform: translateY(-1px);
}
.gallery-card__title {
font-size: clamp(1.05rem, 1.4vw + .55rem, 1.22rem);
font-weight: 700;
margin: 0;
color: var(--rcgl-ink);
line-height: 1.28;
letter-spacing: -0.01em;
text-wrap: balance;
}
.gallery-card__client {
color: var(--rcgl-ink-2);
font-size: 0.92rem;
line-height: 1.4;
}
.gallery-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rcgl-line);
}
.gallery-card__where {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
color: var(--rcgl-mute);
font-size: 0.78rem;
line-height: 1.3;
min-width: 0;
overflow: hidden;
}
.gallery-card__where > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gallery-card__sep { color: var(--rcgl-line-strong); }
.gallery-card__arrow {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-green-dark);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery-card__arrow svg {
width: 14px;
height: 14px;
transition: transform var(--t-fast) var(--ease);
}
.gallery-card:hover .gallery-card__arrow {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.gallery-card:hover .gallery-card__arrow svg { transform: translateX(2px); }
.gallery__empty {
padding: 56px 0;
text-align: center;
color: var(--rcgl-mute);
font-size: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.gallery__empty[hidden] { display: none !important; }
.gallery__empty p { margin: 0; }
.gallery__empty-clear {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
background: var(--rcgl-green-dark);
border: 0;
border-radius: 999px;
color: var(--rcgl-white);
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.88rem;
cursor: pointer;
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gallery__empty-clear:hover {
background: var(--rcgl-green);
transform: translateY(-1px);
}
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
background: rgba(11, 19, 16, 0.86);
backdrop-filter: blur(8px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
overflow-y: auto;
padding: 64px 20px 80px;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
}
.lightbox__close {
position: fixed;
top: 16px;
right: 16px;
width: 48px;
height: 48px;
background: var(--rcgl-white);
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--rcgl-ink);
box-shadow: var(--shadow-md);
z-index: 1001;
transition: transform var(--t-fast) var(--ease);
}
.lightbox__close:hover { transform: scale(1.06); }
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__inner {
max-width: 1100px;
margin: 0 auto;
}
.lightbox__content {
background: var(--rcgl-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.lightbox__head {
padding: 36px 40px 24px;
border-bottom: 1px solid var(--rcgl-line);
}
.lightbox__eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.74rem;
font-weight: 700;
color: var(--rcgl-green-dark);
background: var(--rcgl-green-soft);
padding: 5px 11px;
border-radius: 999px;
margin-bottom: 12px;
}
.lightbox__title {
font-size: clamp(1.5rem, 2vw + .5rem, 2.2rem);
margin: 0 0 12px;
color: var(--rcgl-ink);
}
.lightbox__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
color: var(--rcgl-mute);
font-size: 0.92rem;
}
.lightbox__meta span:not(:last-child)::after {
content: "·";
margin-left: 14px;
color: var(--rcgl-line-strong);
}
.lightbox__desc {
padding: 24px 40px 0;
color: var(--rcgl-ink-2);
font-size: 1rem;
line-height: 1.65;
max-width: 76ch;
}
.lightbox__highlights {
list-style: none;
padding: 18px 40px 8px;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 24px;
}
.lightbox__highlights li {
position: relative;
padding-left: 24px;
color: var(--rcgl-ink-2);
font-size: 0.94rem;
line-height: 1.5;
}
.lightbox__highlights li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--rcgl-green-soft);
border: 2px solid var(--rcgl-green);
}
.lightbox__gallery {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
padding: 24px 0 0;
}
.lightbox__figure {
margin: 0;
background: var(--rcgl-stone);
}
.lightbox__figure img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 700px) {
.lightbox { padding: 56px 12px; }
.lightbox__head, .lightbox__desc, .lightbox__highlights { padding-left: 24px; padding-right: 24px; }
.lightbox__highlights { grid-template-columns: 1fr; }
}
body.lightbox-open { overflow: hidden; }
/* Location cards — simplified version */
.location-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 28px 26px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.location-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--rcgl-eucalyptus);
}
.location-card__pin {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green);
display: grid; place-items: center;
}
.location-card__pin svg { width: 20px; height: 20px; }
.location-card__region {
text-transform: uppercase;
letter-spacing: .12em;
font-size: .78rem;
font-weight: 700;
color: var(--rcgl-mute);
}
.location-card__depot {
font-size: 1.35rem;
font-weight: 800;
margin: 0;
color: var(--rcgl-ink);
letter-spacing: -.01em;
}
.location-card__cta {
margin-top: auto;
color: var(--rcgl-green);
font-weight: 700;
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .08em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.location-card__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.location-card:hover .location-card__cta svg { transform: translateX(4px); }
/* Photo-card variant for service detail / sector detail page heroes */
.page-hero--photo {
position: relative;
min-height: 56vh;
color: var(--rcgl-white);
display: flex;
align-items: flex-end;
isolation: isolate;
overflow: hidden;
margin-top: -76px;
padding-top: 76px;
}
.page-hero--photo .page-hero__media {
position: absolute; inset: 0; z-index: -2;
}
.page-hero--photo .page-hero__media img {
width: 100%; height: 100%; object-fit: cover;
}
.page-hero--photo::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, rgba(11,19,16,.55) 0%, rgba(11,19,16,.30) 40%, rgba(11,19,16,.85) 100%);
}
.page-hero--photo .page-hero__inner {
padding-block: clamp(64px, 8vw, 120px);
width: 100%;
}
.page-hero--photo h1 {
color: var(--rcgl-white);
font-size: clamp(2.2rem, 4vw + .5rem, 4rem);
margin: 14px 0 18px;
text-wrap: balance;
max-width: 22ch;
}
.page-hero--photo p {
color: rgba(255,255,255,.86);
max-width: 60ch;
margin: 0 0 24px;
font-size: 1.06rem;
}
/* Light bullets for dark photo splits */
.split-feature .bullets li,
.bullets--light li { color: rgba(255,255,255,.92); }
.split-feature .bullets li::before,
.bullets--light li::before { color: var(--rcgl-eucalyptus); }
/* Breadcrumb on photo hero */
.breadcrumb--light a { color: rgba(255,255,255,.85); }
.breadcrumb--light span { color: rgba(255,255,255,.7); }
/* Long-form prose blocks (service overview, sector overview) */
.prose p {
font-size: 1.04rem;
line-height: 1.7;
color: var(--rcgl-ink);
margin: 0 0 16px;
max-width: 70ch;
}
.prose p:last-child { margin-bottom: 0; }
/* Process list — numbered steps for "how a job runs" */
.process-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
counter-reset: step;
}
.process-step {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: 14px;
padding: 24px 22px;
position: relative;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.process-step:hover {
border-color: var(--rcgl-eucalyptus);
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.process-step__num {
display: inline-block;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.18em;
color: var(--rcgl-eucalyptus);
background: var(--rcgl-green-soft);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.process-step h3 {
margin: 0 0 8px;
font-size: 1.05rem;
color: var(--rcgl-green-dark);
line-height: 1.3;
}
.process-step p {
margin: 0;
font-size: 0.96rem;
color: var(--rcgl-mute);
line-height: 1.55;
}
.section--stone .process-step { background: var(--rcgl-white); }
/* Region link chips — service × region cross-links for local SEO */
.region-links {
margin-top: 26px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.region-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--rcgl-line);
background: var(--rcgl-white);
color: var(--rcgl-green-dark);
font-weight: 600;
font-size: 0.92rem;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.region-link svg { width: 16px; height: 16px; color: var(--rcgl-eucalyptus); }
.region-link:hover {
border-color: var(--rcgl-eucalyptus);
background: var(--rcgl-green-soft);
transform: translateY(-1px);
}
/* Generic feature card — used for "why us" / region tiles etc. */
.feature-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: 14px;
padding: 26px 24px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.feature-card:hover {
border-color: var(--rcgl-eucalyptus);
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.feature-card__icon {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green-dark);
margin-bottom: 6px;
}
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card h3 {
margin: 0;
font-size: 1.08rem;
color: var(--rcgl-green-dark);
line-height: 1.25;
}
.feature-card p {
margin: 0;
color: var(--rcgl-mute);
font-size: 0.96rem;
line-height: 1.55;
}
.feature-card--compact { padding: 22px 22px; }
.section--stone .feature-card { background: var(--rcgl-white); }
/* ============================================================
Contact page (page-contact) — flagship inviting layout
============================================================ */
/* ---- Hero ---------------------------------------------------- */
.page-hero--contact,
.page-hero--gallery,
.page-hero--careers,
.page-hero--about,
.page-hero--legal,
.page-hero--faq {
min-height: 82vh;
}
.page-hero--contact::before,
.page-hero--gallery::before,
.page-hero--careers::before,
.page-hero--about::before,
.page-hero--legal::before,
.page-hero--faq::before {
background:
linear-gradient(105deg, rgba(11,19,16,.78) 0%, rgba(11,19,16,.55) 38%, rgba(11,19,16,.18) 70%, rgba(11,19,16,.05) 100%),
linear-gradient(180deg, rgba(11,19,16,.05) 0%, rgba(11,19,16,.0) 50%, rgba(15,47,36,.92) 100%);
}
/* Gallery hero: hero photo is more landscape — frame the planted median, not sky */
.page-hero--gallery .page-hero__media--kenburns img {
object-position: 40% 60%;
}
.page-hero--careers .page-hero__media--kenburns img {
object-position: 50% 45%;
}
.page-hero--about .page-hero__media--kenburns img {
object-position: 50% 50%;
}
/* Legal pages get a slightly shorter hero — the doc is the focus, not the photo */
.page-hero--legal { min-height: 64vh; }
.page-hero--legal .page-hero__media--kenburns img {
object-position: 50% 55%;
filter: saturate(.92);
}
/* FAQ hero shares the legal "documentation" feel — quieter than gallery/about */
.page-hero--faq { min-height: 68vh; }
.page-hero--faq .page-hero__media--kenburns img {
object-position: 35% 30%;
}
/* Slow Ken Burns zoom on hero photo for life */
.page-hero__media--kenburns img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 65% 50%;
transform: scale(1.06);
animation: kenBurns 22s var(--ease) infinite alternate;
will-change: transform;
}
@keyframes kenBurns {
0% { transform: scale(1.06) translate3d(0, 0, 0); }
100% { transform: scale(1.16) translate3d(-1.5%, -1%, 0); }
}
/* Floating leaf motifs on hero */
.hero-leaf {
position: absolute;
z-index: 0;
pointer-events: none;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .12;
filter: brightness(1.4);
will-change: transform;
}
.hero-leaf--a {
width: 280px; height: 280px;
top: 14%; right: -60px;
animation: floatLeaf 14s ease-in-out infinite;
}
.hero-leaf--b {
width: 200px; height: 200px;
bottom: -30px; left: 6%;
animation: floatLeaf 18s ease-in-out infinite reverse;
opacity: .08;
}
@keyframes floatLeaf {
0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
50% { transform: translate3d(8px,-14px,0) rotate(8deg); }
}
/* Hero text reveal */
.page-hero--contact .breadcrumb,
.page-hero--gallery .breadcrumb,
.page-hero--careers .breadcrumb,
.page-hero--about .breadcrumb,
.page-hero--legal .breadcrumb,
.page-hero--faq .breadcrumb { animation: heroFadeUp 700ms var(--ease) both; animation-delay: 80ms; }
/* On the modifier variants the explicit
provides the (animated) dot, so suppress the base ::before dot to avoid
doubling up. */
.hero__eyebrow--contact::before,
.hero__eyebrow--gallery::before,
.hero__eyebrow--careers::before,
.hero__eyebrow--about::before,
.hero__eyebrow--legal::before,
.hero__eyebrow--faq::before {
display: none;
}
.hero__eyebrow--contact,
.hero__eyebrow--gallery,
.hero__eyebrow--careers,
.hero__eyebrow--about,
.hero__eyebrow--legal,
.hero__eyebrow--faq {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 12px;
background: rgba(127,168,138,.18);
border: 1px solid rgba(127,168,138,.35);
border-radius: var(--radius-pill);
color: var(--rcgl-white);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 700;
backdrop-filter: blur(6px);
animation: heroFadeUp 700ms var(--ease) both;
animation-delay: 160ms;
}
.hero__eyebrow-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 4px rgba(127,168,138,.25);
animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 4px rgba(127,168,138,.25); transform: scale(1); }
50% { box-shadow: 0 0 0 8px rgba(127,168,138,0); transform: scale(1.2); }
}
.contact-hero-title,
.gallery-hero-title,
.careers-hero-title,
.about-hero-title,
.legal-hero-title,
.faq-hero-title {
animation: heroFadeUp 800ms var(--ease) both;
animation-delay: 240ms;
font-size: clamp(2.4rem, 4.2vw + .5rem, 4.5rem);
line-height: 1.04;
letter-spacing: -.02em;
margin: 14px 0 18px;
max-width: 22ch;
text-wrap: balance;
}
/* Legal heroes are calmer — slightly smaller title than the flagship pages */
.legal-hero-title,
.faq-hero-title { font-size: clamp(2.1rem, 3.4vw + .5rem, 3.6rem); }
.contact-hero-title__accent,
.gallery-hero-title__accent,
.careers-hero-title__accent,
.about-hero-title__accent,
.legal-hero-title__accent,
.faq-hero-title__accent {
color: var(--rcgl-eucalyptus);
background: linear-gradient(135deg, #c2dbc9 0%, #7fa88a 60%, #4f8a68 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
line-height: 1.18;
padding-bottom: .12em;
margin-bottom: -.12em;
}
.contact-hero-lede,
.gallery-hero-lede,
.careers-hero-lede,
.about-hero-lede,
.legal-hero-lede,
.faq-hero-lede {
animation: heroFadeUp 800ms var(--ease) both;
animation-delay: 360ms;
max-width: 56ch;
color: rgba(255,255,255,.88);
font-size: clamp(1.02rem, .35vw + 1rem, 1.18rem);
margin: 0 0 22px;
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hero pills (stagger) */
.hero-pills {
list-style: none;
padding: 0;
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-pills li {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 18px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(6px);
color: var(--rcgl-white);
font-size: .92rem;
font-weight: 600;
letter-spacing: .005em;
}
.hero-pills__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 4px rgba(127,168,138,.18);
flex-shrink: 0;
}
.hero-pills--stagger li {
opacity: 0;
transform: translateY(14px);
animation: heroFadeUp 600ms var(--ease) both;
}
.hero-pills--stagger li:nth-child(1) { animation-delay: 480ms; }
.hero-pills--stagger li:nth-child(2) { animation-delay: 580ms; }
.hero-pills--stagger li:nth-child(3) { animation-delay: 680ms; }
/* Animated scroll cue — invites scrolling */
.hero-scroll-cue {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 32px;
padding: 12px 18px 12px 22px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.22);
color: var(--rcgl-white);
font-weight: 700;
font-size: .92rem;
letter-spacing: .02em;
text-decoration: none;
backdrop-filter: blur(8px);
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
animation: heroFadeUp 700ms var(--ease) both;
animation-delay: 820ms;
}
.hero-scroll-cue:hover {
background: rgba(255,255,255,.16);
color: var(--rcgl-white);
border-color: rgba(255,255,255,.4);
transform: translateY(-2px);
}
.hero-scroll-cue__icon {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
color: var(--rcgl-green-dark);
display: grid; place-items: center;
animation: scrollBounce 1.8s ease-in-out infinite;
}
.hero-scroll-cue__icon svg { width: 16px; height: 16px; }
@keyframes scrollBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* ---- Trusted-by marquee ------------------------------------- */
.trusted-marquee {
background: var(--rcgl-green-dark);
color: rgba(255,255,255,.85);
padding: 16px 0;
overflow: hidden;
display: flex;
align-items: center;
gap: 0;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.trusted-marquee__label {
flex-shrink: 0;
padding: 0 22px;
text-transform: uppercase;
letter-spacing: .18em;
font-size: .72rem;
font-weight: 800;
color: var(--rcgl-eucalyptus);
border-right: 1px solid rgba(255,255,255,.10);
margin-right: 8px;
}
.trusted-marquee__viewport {
flex: 1 1 auto;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
.trusted-marquee__track {
display: inline-flex;
align-items: center;
gap: 28px;
white-space: nowrap;
animation: marqueeScroll 38s linear infinite;
will-change: transform;
}
.trusted-marquee__track span {
font-size: .96rem;
font-weight: 600;
color: rgba(244,241,234,.92);
letter-spacing: .005em;
}
.trusted-marquee__sep {
color: var(--rcgl-eucalyptus);
font-size: .8rem;
opacity: .65;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.trusted-marquee:hover .trusted-marquee__track { animation-play-state: paused; }
@media (max-width: 600px) {
.trusted-marquee__label { padding: 0 14px; font-size: .66rem; }
.trusted-marquee__track span { font-size: .88rem; }
}
/* Contact grid — form + aside */
.contact-grid {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: clamp(24px, 3.5vw, 48px);
align-items: start;
}
@media (max-width: 960px) {
.contact-grid { grid-template-columns: 1fr; }
}
/* Form card */
.contact-form-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 32px);
box-shadow: var(--shadow-md);
}
.contact-form-card .eyebrow { margin-bottom: 10px; }
.contact-form-card h2 {
font-size: clamp(1.5rem, 1.8vw, 1.95rem);
line-height: 1.2;
letter-spacing: -.012em;
margin: 0 0 8px;
text-wrap: balance;
}
.contact-form-card__lede {
color: var(--rcgl-mute);
margin: 0 0 22px;
max-width: 56ch;
font-size: .96rem;
line-height: 1.55;
}
/* Tighten form spacing inside the card */
.contact-form-card .form { gap: 14px; }
.contact-form-card .form__row { gap: 14px; }
.contact-form-card .field label {
font-size: .82rem;
letter-spacing: .005em;
margin-bottom: 2px;
}
.contact-form-card .field input,
.contact-form-card .field select,
.contact-form-card .field textarea {
padding: 12px 14px;
font-size: .96rem;
border-radius: 10px;
border-color: rgba(15, 47, 36, 0.14);
}
.contact-form-card .field input:hover,
.contact-form-card .field select:hover,
.contact-form-card .field textarea:hover {
border-color: rgba(15, 47, 36, 0.28);
}
.contact-form-card .field textarea { min-height: 120px; }
.contact-form-card .field-check {
margin-top: 4px;
padding: 12px 14px;
background: var(--rcgl-stone);
border-radius: 10px;
align-items: center;
font-size: .88rem;
}
.contact-form-card .field-check input { margin-top: 0; }
.contact-form-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid var(--rcgl-line);
}
.contact-form-card__urgent {
color: var(--rcgl-mute);
font-size: .88rem;
letter-spacing: .005em;
}
.contact-form-card__urgent a {
color: var(--rcgl-green-dark);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
text-decoration-color: var(--rcgl-eucalyptus);
margin-left: 2px;
}
/* Aside stack */
.contact-aside {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 96px;
}
@media (max-width: 960px) {
.contact-aside { position: static; }
}
/* Generic contact card */
.contact-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
padding: 26px 26px 22px;
}
.contact-card .eyebrow { margin-bottom: 8px; }
.contact-card h3 {
font-size: 1.2rem;
line-height: 1.25;
letter-spacing: -.012em;
margin: 0 0 16px;
color: var(--rcgl-ink);
text-wrap: balance;
}
/* Numbered steps — tighter, more refined */
.contact-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.contact-steps li {
display: grid;
grid-template-columns: 30px 1fr;
gap: 14px;
align-items: start;
position: relative;
}
.contact-steps li:not(:last-child) {
padding-bottom: 12px;
border-bottom: 1px solid var(--rcgl-line);
}
.contact-steps li strong {
color: var(--rcgl-ink);
font-size: .98rem;
font-weight: 700;
line-height: 1.35;
display: block;
}
.contact-steps li p {
margin: 3px 0 0;
color: var(--rcgl-mute);
font-size: .89rem;
line-height: 1.5;
}
.contact-steps__num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--rcgl-green);
color: var(--rcgl-white);
display: grid; place-items: center;
font-weight: 800;
font-size: .82rem;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(31, 107, 69, .10);
}
/* Soft trust card — tighter, more polished */
.contact-card--soft {
background: linear-gradient(180deg, var(--rcgl-green-dark) 0%, #0a241b 100%);
color: var(--rcgl-white);
border-color: transparent;
position: relative;
overflow: hidden;
isolation: isolate;
padding: 22px 24px;
}
.contact-card--soft::after {
content: "";
position: absolute;
right: -90px; top: -90px;
width: 280px; height: 280px;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .07;
z-index: -1;
}
.contact-card--soft .contact-card__row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.contact-card--soft .contact-card__row:first-child { padding-top: 2px; }
.contact-card--soft .contact-card__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.contact-card--soft .contact-card__icon {
width: 36px; height: 36px;
border-radius: 9px;
background: rgba(127,168,138,.16);
color: var(--rcgl-eucalyptus);
display: grid; place-items: center;
flex-shrink: 0;
}
.contact-card--soft .contact-card__icon svg { width: 18px; height: 18px; }
.contact-card--soft strong {
color: var(--rcgl-white);
font-size: .96rem;
font-weight: 700;
display: block;
line-height: 1.3;
}
.contact-card--soft p {
margin: 3px 0 0;
color: rgba(244,241,234,.72);
font-size: .85rem;
line-height: 1.45;
}
.contact-card--soft a {
color: var(--rcgl-eucalyptus);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-fast) var(--ease);
}
.contact-card--soft a:hover { color: var(--rcgl-white); }
/* Location card description (added on contact page) */
.location-card__desc {
margin: 0;
color: var(--rcgl-mute);
font-size: .92rem;
line-height: 1.55;
}
/* CTA band lift on contact closing */
.section--cta-band { padding-top: 0; }
/* ---- Decorative section leaves (form section) --------------- */
.section--contact-form {
position: relative;
overflow: hidden;
isolation: isolate;
}
.section-leaf {
position: absolute;
pointer-events: none;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .05;
z-index: 0;
}
.section-leaf--tl {
width: 360px; height: 360px;
top: -90px; left: -90px;
transform: rotate(-12deg);
animation: floatLeaf 22s ease-in-out infinite;
}
.section-leaf--br {
width: 420px; height: 420px;
bottom: -120px; right: -120px;
transform: rotate(160deg);
animation: floatLeaf 26s ease-in-out infinite reverse;
}
.section--contact-form .container { position: relative; z-index: 1; }
/* ---- Animated stats band ----------------------------------- */
.contact-stats {
padding: clamp(56px, 7vw, 96px) 0;
background: linear-gradient(180deg, var(--rcgl-green-dark) 0%, #0a241b 100%);
color: var(--rcgl-white);
position: relative;
overflow: hidden;
isolation: isolate;
}
.contact-stats::after {
content: "";
position: absolute;
inset: 0;
background-image: url("../images/patterns/topo.svg");
background-size: 720px;
opacity: .05;
z-index: -1;
animation: drift 60s linear infinite;
}
@keyframes drift {
from { background-position: 0 0; }
to { background-position: 720px 0; }
}
.contact-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2vw, 36px);
text-align: center;
}
.contact-stats__item {
padding: 20px 16px;
border-right: 1px solid rgba(255,255,255,.08);
transition: transform var(--t-med) var(--ease);
}
.contact-stats__item:last-child { border-right: 0; }
.contact-stats__item:hover { transform: translateY(-3px); }
.contact-stats__num {
font-family: var(--font-display);
font-size: clamp(2.6rem, 4.5vw, 4rem);
font-weight: 800;
color: var(--rcgl-eucalyptus);
letter-spacing: -.02em;
line-height: 1;
margin-bottom: 12px;
background: linear-gradient(135deg, #c2dbc9 0%, #7fa88a 70%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.contact-stats__plus {
background: inherit;
-webkit-background-clip: inherit;
background-clip: inherit;
-webkit-text-fill-color: transparent;
}
.contact-stats__label {
color: rgba(244,241,234,.78);
font-size: .92rem;
font-weight: 600;
letter-spacing: .02em;
text-wrap: balance;
max-width: 22ch;
margin-inline: auto;
}
@media (max-width: 880px) {
.contact-stats__grid { grid-template-columns: repeat(2, 1fr); }
.contact-stats__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-block: 24px; }
.contact-stats__item:nth-last-child(-n+2) { border-bottom: 0; }
.contact-stats__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 480px) {
.contact-stats__grid { grid-template-columns: 1fr; }
.contact-stats__item { border-right: 0 !important; }
}
/* ---- Depot stagger reveal ---------------------------------- */
.contact-depots .location-card--animated {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms var(--ease), transform 700ms var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
transition-delay: var(--depot-delay, 0ms);
}
.contact-depots.is-visible .location-card--animated {
opacity: 1;
transform: translateY(0);
}
/* ------------------------------------------------------------
Contact-page depot card — editorial layout (gallery-card sibling)
Region eyebrow + depot title + description + footer rule with
"Call " + circular arrow. The whole card is a tel: link.
Scoped to .contact-depots so the shared .location-card style on
index / about / locations pages is unaffected.
------------------------------------------------------------ */
.contact-depots .location-card {
padding: 0;
overflow: hidden;
will-change: transform;
}
.contact-depots .location-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(11, 19, 16, 0.10);
}
.contact-depots .location-card__open {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 22px 22px 18px;
text-align: left;
background: transparent;
border: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
font: inherit;
gap: 10px;
}
.contact-depots .location-card__service {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
color: var(--rcgl-green-dark);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
}
.contact-depots .location-card__service-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
flex: 0 0 auto;
transform: translateY(-1px);
}
.contact-depots .location-card__depot {
font-size: clamp(1.15rem, 1.4vw + .55rem, 1.4rem);
font-weight: 800;
margin: 0;
color: var(--rcgl-ink);
line-height: 1.2;
letter-spacing: -0.015em;
text-wrap: balance;
}
.contact-depots .location-card__desc {
margin: 0;
color: var(--rcgl-mute);
font-size: 0.92rem;
line-height: 1.55;
flex: 1 1 auto;
}
.contact-depots .location-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rcgl-line);
}
.contact-depots .location-card__cta {
margin: 0;
color: var(--rcgl-green-dark);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0;
text-transform: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.contact-depots .location-card__arrow {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-green-dark);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-depots .location-card__arrow svg {
width: 14px;
height: 14px;
transition: transform var(--t-fast) var(--ease);
}
.contact-depots .location-card:hover .location-card__arrow {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.contact-depots .location-card:hover .location-card__arrow svg {
transform: translateX(2px);
}
/* ---- Closing CTA -------------------------------------------- */
.cta-band--contact {
position: relative;
overflow: hidden;
}
.cta-band--contact::before {
content: "";
position: absolute;
left: -180px; bottom: -160px;
width: 480px; height: 480px;
background: url("../images/patterns/leaf.svg") center/contain no-repeat;
opacity: .08;
z-index: 0;
animation: floatLeaf 24s ease-in-out infinite;
}
.cta-band--contact > * { position: relative; z-index: 1; }
/* ---- Reduced motion overrides ------------------------------ */
@media (prefers-reduced-motion: reduce) {
.page-hero__media--kenburns img,
.hero-leaf,
.section-leaf,
.contact-stats::after,
.trusted-marquee__track,
.hero-scroll-cue__icon,
.hero__eyebrow-dot,
.cta-band--contact::before {
animation: none !important;
}
.hero-pills--stagger li,
.contact-hero-title,
.gallery-hero-title,
.careers-hero-title,
.about-hero-title,
.legal-hero-title,
.faq-hero-title,
.contact-hero-lede,
.gallery-hero-lede,
.careers-hero-lede,
.about-hero-lede,
.legal-hero-lede,
.faq-hero-lede,
.hero-scroll-cue,
.hero__eyebrow--contact,
.hero__eyebrow--gallery,
.hero__eyebrow--careers,
.hero__eyebrow--about,
.hero__eyebrow--legal,
.hero__eyebrow--faq,
.page-hero--contact .breadcrumb,
.page-hero--gallery .breadcrumb,
.page-hero--careers .breadcrumb,
.page-hero--about .breadcrumb,
.page-hero--legal .breadcrumb,
.page-hero--faq .breadcrumb,
.gallery-card--animated {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ============================================================
Gallery page (page-gallery) — friendly, lively showcase
============================================================ */
/* ---- Friendly intro band ------------------------------------ */
.gallery-intro {
padding: clamp(48px, 6vw, 88px) 0 clamp(20px, 3vw, 36px);
background: linear-gradient(180deg, var(--rcgl-white) 0%, var(--rcgl-stone) 100%);
}
.gallery-intro__inner {
position: relative;
max-width: 920px;
margin: 0 auto;
text-align: center;
isolation: isolate;
}
.gallery-intro__inner > .section-leaf--tl {
width: 220px; height: 220px;
top: -60px; left: -40px;
opacity: .045;
z-index: -1;
}
.gallery-intro__head .eyebrow { justify-content: center; }
.gallery-intro__title {
font-size: clamp(1.65rem, 2.4vw + .3rem, 2.4rem);
line-height: 1.18;
letter-spacing: -.015em;
margin: 10px auto 14px;
max-width: 24ch;
text-wrap: balance;
color: var(--rcgl-ink);
}
.gallery-intro__lede {
color: var(--rcgl-ink-2);
font-size: clamp(1rem, .3vw + 1rem, 1.12rem);
line-height: 1.6;
max-width: 62ch;
margin: 0 auto;
}
.gallery-intro__cues {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 14px;
margin-top: 26px;
}
.gallery-intro__cue {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
color: var(--rcgl-ink-2);
font-size: .86rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(11,19,16,.04);
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gallery-intro__cue svg {
width: 16px; height: 16px;
color: var(--rcgl-green);
flex-shrink: 0;
}
.gallery-intro__cue:hover {
transform: translateY(-2px);
border-color: var(--rcgl-eucalyptus);
color: var(--rcgl-ink);
}
/* Tighten the spacing between intro and the project gallery section */
.page-gallery .gallery-intro + .project-gallery {
padding-top: clamp(20px, 3vw, 36px);
}
/* ---- Project filter bar polish (gallery) -------------------- */
.page-gallery .gallery__filters {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
padding: clamp(16px, 1.6vw, 22px);
box-shadow: 0 4px 18px rgba(11,19,16,.04);
}
/* ---- Card stagger reveal ------------------------------------ */
.gallery-card--animated {
opacity: 0;
transform: translateY(18px);
transition:
opacity 600ms var(--ease),
transform 600ms var(--ease),
border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
transition-delay: var(--card-delay, 0ms);
}
.gallery__grid--animated.is-visible .gallery-card--animated {
opacity: 1;
transform: translateY(0);
}
/* Lift card hover slightly more on the gallery page */
.gallery-card {
will-change: transform;
}
.gallery-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(11, 19, 16, 0.10);
}
/* ---- Stats band gallery variant ----------------------------
The contact-page stats band uses a dark gradient. On the gallery
we deliberately invert it to a bright/airy treatment so the page
doesn't stack three dark sections in a row (stats → CTA → footer)
and instead keeps the happy, bright feel of the home page. */
.gallery-stats {
background:
radial-gradient(circle at 18% 0%, rgba(127,168,138,.16) 0%, transparent 55%),
radial-gradient(circle at 88% 100%, rgba(127,168,138,.14) 0%, transparent 55%),
linear-gradient(180deg, var(--rcgl-white) 0%, var(--rcgl-stone) 100%);
color: var(--rcgl-ink);
border-top: 1px solid var(--rcgl-line);
border-bottom: 1px solid var(--rcgl-line);
margin-top: 0;
}
.gallery-stats::after { display: none; }
.gallery-stats .contact-stats__num {
background: linear-gradient(135deg, var(--rcgl-green) 0%, var(--rcgl-green-dark) 70%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.gallery-stats .contact-stats__label {
color: var(--rcgl-ink-2);
}
.gallery-stats .contact-stats__item {
border-right-color: var(--rcgl-line);
}
@media (max-width: 880px) {
.gallery-stats .contact-stats__item {
border-bottom-color: var(--rcgl-line);
border-right-color: var(--rcgl-line);
}
}
/* ---- Reduced motion overrides (gallery) -------------------- */
@media (prefers-reduced-motion: reduce) {
.gallery-intro__cue { transition: none !important; }
.gallery-card { will-change: auto; }
}
/* ---- Mobile/small-tablet: tighten the filter card and let chips wrap inside
it so nothing sits behind the panel edge or under a fade mask. Placed at
end-of-file to win the source-order cascade against earlier base styles. */
@media (max-width: 820px) {
.page-gallery .gallery__filters {
padding: 12px;
gap: 12px;
margin-bottom: 20px;
border-radius: var(--radius-md);
}
.page-gallery .gallery__search { height: 44px; font-size: 16px; padding-left: 44px; padding-right: 42px; }
.page-gallery .gallery__search-icon { left: 14px; width: 16px; height: 16px; }
.page-gallery .gallery__search-clear { right: 6px; width: 28px; height: 28px; }
.page-gallery .gallery__filter-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.page-gallery .gallery__filter-label {
min-width: 0;
font-size: .62rem;
letter-spacing: .14em;
padding-left: 4px;
}
/* Chips wrap normally inside the panel — no negative margins, no mask,
no horizontal scroll. Cleaner on phones where only 1–3 chips appear
per row anyway. */
.page-gallery .gallery__filter-chips {
flex-wrap: wrap;
gap: 6px;
padding: 0;
margin: 0;
}
.page-gallery .gallery__filter {
padding: 7px 13px;
font-size: .82rem;
white-space: nowrap;
}
.page-gallery .gallery__filter-count {
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: .68rem;
}
}
/* ============================================================
Sectors hub (page-sectors) + Sector page (page-sector)
--------------------------------------------------------------
Calm, services-page styling: no kenburns, no dark stats, no
marquee, no bicolor headline. Just clean cards, light bands
and a bit of polish on hover.
============================================================ */
/* ---- Sector hub: numbered cards grid ----------------------- */
.sector-hub__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 1100px) { .sector-hub__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .sector-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sector-hub__grid { grid-template-columns: 1fr; } }
.sector-hub-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--rcgl-ink);
box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.sector-hub-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--rcgl-eucalyptus);
color: var(--rcgl-ink);
}
.sector-hub-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--rcgl-stone);
}
.sector-hub-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--ease);
}
.sector-hub-card:hover .sector-hub-card__media img { transform: scale(1.04); }
.sector-hub-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11,19,16,0) 40%, rgba(11,19,16,.18) 100%);
pointer-events: none;
}
.sector-hub-card__num {
position: absolute;
top: 12px; left: 12px;
z-index: 2;
font-family: var(--font-display);
font-size: .85rem;
font-weight: 800;
letter-spacing: .08em;
color: var(--rcgl-green-dark);
background: var(--rcgl-white);
padding: 5px 10px;
border-radius: var(--radius-pill);
line-height: 1;
box-shadow: 0 2px 6px rgba(11,19,16,.08);
}
.sector-hub-card__body {
padding: 22px 22px 22px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.sector-hub-card__title {
font-size: 1.18rem;
line-height: 1.22;
margin: 0;
color: var(--rcgl-ink);
letter-spacing: -.01em;
font-weight: 700;
}
.sector-hub-card__lede {
margin: 0;
color: var(--rcgl-mute);
font-size: .92rem;
line-height: 1.55;
}
.sector-hub-card__chips {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sector-hub-card__chips li {
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--rcgl-green);
background: var(--rcgl-green-soft);
padding: 4px 10px;
border-radius: var(--radius-pill);
}
.sector-hub-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding-top: 10px;
color: var(--rcgl-green);
font-weight: 700;
font-size: .92rem;
}
.sector-hub-card__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.sector-hub-card:hover .sector-hub-card__cta svg { transform: translateX(3px); }
/* ---- Sector page: deliverable cards ------------------------ */
.sector-deliver-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 1.6vw, 22px);
}
@media (max-width: 1100px) { .sector-deliver-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .sector-deliver-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sector-deliver-grid { grid-template-columns: 1fr; } }
.sector-deliver-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 22px 20px 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sector-deliver-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
border-color: var(--rcgl-eucalyptus);
}
.sector-deliver-card__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--rcgl-green-soft);
color: var(--rcgl-green);
display: grid; place-items: center;
}
.sector-deliver-card__icon svg { width: 22px; height: 22px; }
.sector-deliver-card__title {
font-size: 1.02rem;
line-height: 1.25;
margin: 0;
color: var(--rcgl-ink);
letter-spacing: -.005em;
font-weight: 700;
}
.sector-deliver-card__body {
margin: 0;
color: var(--rcgl-mute);
font-size: .92rem;
line-height: 1.55;
}
/* ---- Procurement-ready (light list, no dark band) ---------- */
.sector-procurement-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 720px) { .sector-procurement-list { grid-template-columns: 1fr; } }
.sector-procurement-list li {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: flex-start;
padding: 18px 20px;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-left: 3px solid var(--rcgl-green);
border-radius: var(--radius-md);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sector-procurement-list li:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.sector-procurement-list__check {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--rcgl-green-soft);
color: var(--rcgl-green);
display: grid; place-items: center;
flex-shrink: 0;
margin-top: 2px;
}
.sector-procurement-list__check svg { width: 16px; height: 16px; stroke-width: 2.6; }
.sector-procurement-list strong {
display: block;
color: var(--rcgl-ink);
font-size: 1rem;
margin-bottom: 4px;
font-weight: 700;
}
.sector-procurement-list p {
margin: 0;
color: var(--rcgl-mute);
font-size: .9rem;
line-height: 1.5;
}
/* ---- Selected projects on sector pages --------------------- */
.sector-projects__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 2vw, 26px);
}
@media (max-width: 980px) { .sector-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sector-projects__grid { grid-template-columns: 1fr; } }
.sector-projects__more {
margin-top: clamp(24px, 3vw, 36px);
text-align: center;
}
.sector-project-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.sector-project-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.sector-project-card__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--rcgl-ink);
height: 100%;
}
.sector-project-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rcgl-stone);
}
.sector-project-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--ease);
}
.sector-project-card:hover .sector-project-card__media img { transform: scale(1.04); }
.sector-project-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11,19,16,.18) 0%, rgba(11,19,16,0) 38%);
pointer-events: none;
}
.sector-project-card__badge {
position: absolute;
top: 12px; left: 12px;
background: rgba(15,47,36,.78);
color: var(--rcgl-white);
padding: 5px 11px;
border-radius: var(--radius-pill);
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
backdrop-filter: blur(6px);
z-index: 2;
}
.sector-project-card__body {
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.sector-project-card__meta {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
color: var(--rcgl-mute);
font-size: .8rem;
font-weight: 600;
letter-spacing: .01em;
}
.sector-project-card__title {
font-size: 1.05rem;
line-height: 1.25;
margin: 0;
color: var(--rcgl-ink);
letter-spacing: -.005em;
font-weight: 700;
}
.sector-project-card__cta {
margin-top: auto;
padding-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rcgl-green);
font-weight: 700;
font-size: .9rem;
}
.sector-project-card__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.sector-project-card:hover .sector-project-card__cta svg { transform: translateX(3px); }
/* ---- SEQ council coverage strip ---------------------------- */
.sector-coverage__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 1024px) { .sector-coverage__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sector-coverage__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sector-coverage__grid { grid-template-columns: 1fr; } }
.sector-coverage-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 22px 20px 20px;
text-align: left;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sector-coverage-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
border-color: var(--rcgl-eucalyptus);
}
.sector-coverage-card__pin {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--rcgl-green-soft);
color: var(--rcgl-green);
display: grid; place-items: center;
margin-bottom: 4px;
}
.sector-coverage-card__pin svg { width: 18px; height: 18px; }
.sector-coverage-card h3 {
font-size: 1.02rem;
margin: 0;
color: var(--rcgl-ink);
letter-spacing: -.005em;
font-weight: 700;
}
.sector-coverage-card p {
margin: 0;
color: var(--rcgl-mute);
font-size: .88rem;
line-height: 1.45;
}
/* ---- Trust strip (commercial property + future sector pages) ----
Calm, single-row of 4 stat tiles that sits right under the hero.
Hairline dividers, hover tint, fades in via .reveal. */
.sector-trust-strip {
list-style: none;
margin: 0;
padding: 6px;
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
@media (max-width: 820px) { .sector-trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sector-trust-strip { grid-template-columns: 1fr; } }
.sector-trust-strip__item {
padding: 18px 22px;
text-align: center;
border-right: 1px solid var(--rcgl-line);
transition: background var(--t-fast) var(--ease);
}
.sector-trust-strip__item:last-child { border-right: 0; }
.sector-trust-strip__item:hover { background: var(--rcgl-stone); }
@media (max-width: 820px) {
.sector-trust-strip__item:nth-child(2n) { border-right: 0; }
.sector-trust-strip__item:nth-child(1),
.sector-trust-strip__item:nth-child(2) { border-bottom: 1px solid var(--rcgl-line); }
}
@media (max-width: 480px) {
.sector-trust-strip__item { border-right: 0; border-bottom: 1px solid var(--rcgl-line); }
.sector-trust-strip__item:last-child { border-bottom: 0; }
}
.sector-trust-strip__num {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2vw, 1.65rem);
font-weight: 800;
color: var(--rcgl-green-dark);
letter-spacing: -.02em;
line-height: 1.05;
}
.sector-trust-strip__label {
font-size: .82rem;
color: var(--rcgl-mute);
margin-top: 4px;
font-weight: 600;
line-height: 1.4;
}
/* ---- Sector spotlight (light variant of .spotlight) -----------
Two-column image + body block. Lives on white or stone bands.
Stat tiles sit in a 2-col grid below the body copy. */
.sector-spotlight {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
@media (max-width: 900px) { .sector-spotlight { grid-template-columns: 1fr; gap: 28px; } }
.sector-spotlight__media {
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--rcgl-stone);
box-shadow: var(--shadow-md);
position: relative;
}
.sector-spotlight__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1200ms var(--ease);
}
.sector-spotlight:hover .sector-spotlight__media img { transform: scale(1.03); }
.sector-spotlight__body .eyebrow { margin-bottom: 8px; }
.sector-spotlight__body h2 {
margin: 0 0 14px;
text-wrap: balance;
}
.sector-spotlight__body > p {
margin: 0 0 22px;
color: var(--rcgl-mute);
max-width: 56ch;
line-height: 1.65;
}
.sector-spotlight__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 480px) { .sector-spotlight__stats { grid-template-columns: 1fr; } }
.sector-spotlight__stat {
background: var(--rcgl-green-soft);
border: 1px solid color-mix(in srgb, var(--rcgl-green) 16%, transparent);
border-left: 3px solid var(--rcgl-green);
border-radius: var(--radius-md);
padding: 14px 16px;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sector-spotlight__stat:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.sector-spotlight__stat-num {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
font-weight: 800;
color: var(--rcgl-green-dark);
letter-spacing: -.01em;
line-height: 1.1;
}
.sector-spotlight__stat-label {
font-size: .8rem;
color: var(--rcgl-mute);
margin-top: 4px;
line-height: 1.4;
font-weight: 600;
}
/* ---- Deliver-card icon hover lift + subtle stagger reveal ---- */
.sector-deliver-card__icon {
transition: transform var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.sector-deliver-card:hover .sector-deliver-card__icon {
transform: scale(1.06) rotate(-2deg);
background: var(--rcgl-green);
color: var(--rcgl-white);
}
/* Stagger the cards in when the grid becomes visible. Keeps the
page feeling alive without going back to flagship animations. */
.sector-deliver-grid--stagger > .sector-deliver-card {
opacity: 0;
transform: translateY(14px);
transition: opacity 600ms var(--ease), transform 600ms var(--ease),
box-shadow var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card {
opacity: 1;
transform: translateY(0);
}
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(1) { transition-delay: 40ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(2) { transition-delay: 100ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(3) { transition-delay: 160ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(4) { transition-delay: 220ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(5) { transition-delay: 280ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(6) { transition-delay: 340ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(7) { transition-delay: 400ms; }
.sector-deliver-grid--stagger.is-visible > .sector-deliver-card:nth-child(8) { transition-delay: 460ms; }
@media (prefers-reduced-motion: reduce) {
.sector-deliver-grid--stagger > .sector-deliver-card {
opacity: 1;
transform: none;
transition: none;
}
.sector-deliver-card:hover .sector-deliver-card__icon {
transform: none;
}
}
/* ============================================================
About page (page-about) — editorial story + values + process
Designed to share visual DNA with the Project Gallery (hero,
trusted-by, editorial cards, dark stats band).
============================================================ */
/* ---- Story split — photo + multi-paragraph copy + badge ---- */
.section--story { padding: clamp(56px, 7vw, 96px) 0; }
.about-story {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
.about-story__media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: 0 20px 40px -28px rgba(15, 47, 36, 0.40);
}
.about-story__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.about-story:hover .about-story__media img { transform: scale(1.04); }
.about-story__badge {
position: absolute;
left: 22px;
bottom: 22px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 18px 12px;
border-radius: var(--radius-md);
background: rgba(15, 47, 36, 0.88);
color: var(--rcgl-white);
backdrop-filter: blur(8px);
box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .35);
}
.about-story__badge-num {
font-size: 2.1rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.01em;
color: var(--rcgl-eucalyptus);
}
.about-story__badge-plus {
font-size: 1.4rem;
margin-left: 2px;
color: var(--rcgl-sand);
}
.about-story__badge-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.85);
margin-top: 4px;
}
.about-story__content .eyebrow { margin-bottom: 12px; }
.about-story__content h2 {
font-size: clamp(1.7rem, 2.4vw + .4rem, 2.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 18px;
text-wrap: balance;
}
.about-story__lede {
font-size: clamp(1.02rem, .35vw + 1rem, 1.18rem);
line-height: 1.55;
color: var(--rcgl-ink);
margin: 0 0 18px;
}
.about-story__content .prose p { margin-bottom: 14px; color: var(--rcgl-ink-2); }
@media (max-width: 880px) {
.about-story { grid-template-columns: 1fr; }
.about-story__media { aspect-ratio: 16 / 11; max-height: 480px; }
.about-story__badge { left: 16px; bottom: 16px; }
.about-story__badge-num { font-size: 1.7rem; }
}
/* ---- Capability — editorial service cards (gallery sibling) ---- */
.about-capability { gap: 18px; }
.capability-card {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
will-change: transform;
}
.capability-card:hover {
transform: translateY(-5px);
border-color: var(--rcgl-eucalyptus);
box-shadow: 0 14px 32px rgba(11, 19, 16, 0.10);
}
.capability-card__open {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
font: inherit;
}
.capability-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rcgl-stone);
}
.capability-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease);
}
.capability-card:hover .capability-card__media img { transform: scale(1.05); }
.capability-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 18px 20px 18px;
gap: 8px;
}
.capability-card__service {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--rcgl-green-dark);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
margin-bottom: 2px;
}
.capability-card__service-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
margin-right: 2px;
transform: translateY(-1px);
flex: 0 0 auto;
}
.capability-card__title {
font-size: clamp(1.1rem, 1.4vw + .55rem, 1.3rem);
font-weight: 800;
margin: 0;
color: var(--rcgl-ink);
line-height: 1.22;
letter-spacing: -0.015em;
text-wrap: balance;
}
.capability-card__desc {
margin: 0;
color: var(--rcgl-mute);
font-size: 0.92rem;
line-height: 1.55;
flex: 1 1 auto;
}
.capability-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rcgl-line);
}
.capability-card__cta {
color: var(--rcgl-green-dark);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.01em;
}
.capability-card__arrow {
flex: 0 0 auto;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-green-dark);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.capability-card__arrow svg {
width: 14px; height: 14px;
transition: transform var(--t-fast) var(--ease);
}
.capability-card:hover .capability-card__arrow {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.capability-card:hover .capability-card__arrow svg { transform: translateX(2px); }
/* ---- Process — numbered editorial steps ---- */
.about-process {
list-style: none;
counter-reset: about-step;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.about-process__step {
position: relative;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 24px 26px;
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.about-process__step:hover {
border-color: var(--rcgl-eucalyptus);
box-shadow: 0 14px 28px rgba(11, 19, 16, 0.08);
transform: translateY(-3px);
}
.about-process__num {
flex: 0 0 auto;
font-size: 1.8rem;
font-weight: 800;
line-height: 1;
color: var(--rcgl-eucalyptus);
background: linear-gradient(135deg, #c2dbc9 0%, #7fa88a 60%, #4f8a68 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
min-width: 56px;
padding-top: 4px;
}
.about-process__body { flex: 1 1 auto; min-width: 0; }
.about-process__title {
margin: 0 0 6px;
font-size: 1.18rem;
font-weight: 800;
color: var(--rcgl-ink);
letter-spacing: -0.01em;
}
.about-process__desc {
margin: 0;
color: var(--rcgl-ink-2);
font-size: 0.96rem;
line-height: 1.55;
}
@media (max-width: 760px) {
.about-process { grid-template-columns: 1fr; }
.about-process__num { font-size: 1.5rem; min-width: 44px; }
}
/* ---- Pull quote / callout ---- */
.about-callout {
position: relative;
margin: 0;
padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px);
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-lg);
box-shadow: 0 14px 28px -18px rgba(11, 19, 16, 0.12);
overflow: hidden;
isolation: isolate;
}
.about-callout::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 6px;
background: linear-gradient(180deg, var(--rcgl-eucalyptus) 0%, var(--rcgl-green-dark) 100%);
border-radius: 6px 0 0 6px;
}
.about-callout__mark {
display: block;
font-family: var(--font-display, Georgia, serif);
font-size: 4rem;
line-height: 0.6;
color: var(--rcgl-eucalyptus);
opacity: 0.6;
margin-bottom: 4px;
letter-spacing: -0.06em;
}
.about-callout__quote {
margin: 0;
font-size: clamp(1.18rem, .6vw + 1rem, 1.45rem);
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--rcgl-ink);
text-wrap: balance;
}
.about-callout__cite {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--rcgl-line);
}
.about-callout__cite-label {
font-weight: 800;
color: var(--rcgl-green-dark);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.about-callout__cite-meta {
color: var(--rcgl-mute);
font-size: 0.86rem;
}
/* ---- About-page depot card — editorial layout (gallery sibling)
Same treatment as .contact-depots .location-card, scoped to
.about-depots so other pages keep their existing layout. ---- */
.about-depots .location-card {
padding: 0;
overflow: hidden;
will-change: transform;
}
.about-depots .location-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(11, 19, 16, 0.10);
}
.about-depots .location-card__open {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 22px 22px 18px;
text-align: left;
background: transparent;
border: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
font: inherit;
gap: 10px;
}
.about-depots .location-card__service {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
color: var(--rcgl-green-dark);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
}
.about-depots .location-card__service-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
flex: 0 0 auto;
transform: translateY(-1px);
}
.about-depots .location-card__depot {
font-size: clamp(1.15rem, 1.4vw + .55rem, 1.4rem);
font-weight: 800;
margin: 0;
color: var(--rcgl-ink);
line-height: 1.2;
letter-spacing: -0.015em;
text-wrap: balance;
}
.about-depots .location-card__desc {
margin: 0;
color: var(--rcgl-mute);
font-size: 0.92rem;
line-height: 1.55;
flex: 1 1 auto;
}
.about-depots .location-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--rcgl-line);
}
.about-depots .location-card__cta {
margin: 0;
color: var(--rcgl-green-dark);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0;
text-transform: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.about-depots .location-card__arrow {
flex: 0 0 auto;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-green-dark);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.about-depots .location-card__arrow svg {
width: 14px; height: 14px;
transition: transform var(--t-fast) var(--ease);
}
.about-depots .location-card:hover .location-card__arrow {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.about-depots .location-card:hover .location-card__arrow svg { transform: translateX(2px); }
/* About-page values — gentle hover lift on feature-card */
.about-value:hover .feature-card__icon {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.about-value .feature-card__icon { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) {
.about-story__media img,
.capability-card__media img {
transition: none !important;
transform: none !important;
}
}
/* ============================================================
Legal pages (page-legal: privacy-policy, terms)
Editorial document layout — sticky table of contents on the
left, numbered sections on the right, refined typography for
long-form policy text. Shares hero treatment with the gallery.
============================================================ */
.legal-page {
padding-top: clamp(40px, 5vw, 72px);
padding-bottom: clamp(40px, 5vw, 72px);
background: var(--rcgl-white);
}
/* ---- Meta strip — effective / reviewed / entity / contact ---- */
.legal-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 14px 18px;
margin-bottom: clamp(28px, 4vw, 56px);
background: var(--rcgl-stone);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
align-items: center;
}
.legal-meta__item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 14px;
border-right: 1px solid var(--rcgl-line);
min-width: 0;
}
.legal-meta__item:last-child { border-right: 0; }
.legal-meta__label {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--rcgl-mute);
}
.legal-meta__value {
font-size: 0.95rem;
font-weight: 700;
color: var(--rcgl-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.legal-meta__item--cta {
align-items: flex-end;
text-align: right;
padding-right: 6px;
}
.legal-meta__contact {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rcgl-green-dark);
font-size: 0.88rem;
font-weight: 700;
text-decoration: none;
transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.legal-meta__contact svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.legal-meta__contact:hover { color: var(--rcgl-green); }
.legal-meta__contact:hover svg { transform: translateX(2px); }
@media (max-width: 960px) {
.legal-meta { grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; }
.legal-meta__item { border-right: 0; padding: 8px 4px; }
.legal-meta__item:nth-child(odd) { border-right: 1px solid var(--rcgl-line); }
.legal-meta__item--cta { grid-column: 1 / -1; align-items: flex-start; text-align: left; padding-top: 12px; border-top: 1px solid var(--rcgl-line); border-right: 0 !important; }
.legal-meta__value { white-space: normal; }
}
@media (max-width: 540px) {
.legal-meta { grid-template-columns: 1fr; }
.legal-meta__item { border-right: 0 !important; }
}
/* ---- Two-column layout: TOC (sticky) + body ---- */
.legal-layout {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
@media (max-width: 960px) {
.legal-layout { grid-template-columns: 1fr; gap: 28px; }
}
/* ---- Sticky Table of Contents ---- */
.legal-toc {
position: sticky;
top: clamp(80px, 10vh, 110px);
align-self: start;
max-height: calc(100vh - 140px);
overflow: auto;
padding-right: 4px;
scrollbar-width: thin;
}
.legal-toc__inner {
background: var(--rcgl-stone);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
padding: 18px 18px;
}
.legal-toc__eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--rcgl-green-dark);
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rcgl-line);
}
.legal-toc__dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
}
.legal-toc__list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: legal-toc;
}
.legal-toc__list li { margin: 0; }
.legal-toc__list a {
display: flex;
align-items: baseline;
gap: 10px;
padding: 7px 8px;
border-radius: 8px;
color: var(--rcgl-ink-2);
text-decoration: none;
font-size: 0.86rem;
line-height: 1.35;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.legal-toc__list a:hover {
background: rgba(127, 168, 138, 0.10);
color: var(--rcgl-green-dark);
}
.legal-toc__list a:focus-visible {
outline: 2px solid var(--rcgl-eucalyptus);
outline-offset: 2px;
}
.legal-toc__num {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: 800;
font-size: 0.72rem;
color: var(--rcgl-mute);
letter-spacing: 0.04em;
min-width: 22px;
}
.legal-toc__list a:hover .legal-toc__num,
.legal-toc__list a.is-active .legal-toc__num {
color: var(--rcgl-green-dark);
}
.legal-toc__list a.is-active {
background: rgba(127, 168, 138, 0.16);
color: var(--rcgl-green-dark);
font-weight: 700;
}
.legal-toc__label { flex: 1 1 auto; min-width: 0; }
@media (max-width: 960px) {
.legal-toc {
position: static;
max-height: none;
overflow: visible;
padding: 0;
}
.legal-toc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
}
@media (max-width: 540px) {
.legal-toc__list { grid-template-columns: 1fr; }
}
/* ---- Body sections — numbered editorial ---- */
.legal-body { min-width: 0; scroll-padding-top: 100px; }
.legal-section { padding-block: 26px 30px; border-bottom: 1px solid var(--rcgl-line); scroll-margin-top: 90px; }
.legal-section:first-child { padding-top: 0; }
.legal-section:last-of-type { border-bottom: 0; }
.legal-section__head {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 14px;
}
.legal-section__num {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-size: 1.6rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: var(--rcgl-eucalyptus);
background: linear-gradient(135deg, #c2dbc9 0%, #7fa88a 60%, #4f8a68 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
min-width: 50px;
}
.legal-section__title {
margin: 0;
font-size: clamp(1.25rem, 1.6vw + .5rem, 1.6rem);
font-weight: 800;
color: var(--rcgl-ink);
line-height: 1.2;
letter-spacing: -0.01em;
text-wrap: balance;
}
.legal-section__body { font-size: 1rem; line-height: 1.65; color: var(--rcgl-ink-2); }
.legal-section__body p { margin: 0 0 12px; }
.legal-section__body p:last-child { margin-bottom: 0; }
.legal-section__body ul {
margin: 0 0 12px;
padding-left: 20px;
list-style: none;
}
.legal-section__body ul li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
line-height: 1.55;
}
.legal-section__body ul li::before {
content: "";
position: absolute;
top: 0.65em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 3px rgba(127, 168, 138, 0.18);
}
.legal-section__body strong { color: var(--rcgl-ink); font-weight: 700; }
.legal-section__body em { color: var(--rcgl-ink-2); font-style: italic; }
.legal-section__body a {
color: var(--rcgl-green-dark);
text-decoration: underline;
text-decoration-color: rgba(15, 47, 36, 0.25);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.legal-section__body a:hover {
color: var(--rcgl-green);
text-decoration-color: currentColor;
}
.legal-contact-list {
list-style: none;
padding: 18px 20px;
margin: 6px 0 0;
background: var(--rcgl-stone);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
}
.legal-contact-list li {
padding-left: 0 !important;
margin-bottom: 6px;
line-height: 1.5;
}
.legal-contact-list li::before { display: none !important; }
.legal-contact-list li:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
.legal-section__head { flex-direction: column; gap: 4px; }
.legal-section__num { font-size: 1.3rem; min-width: 0; }
.legal-section { padding-block: 22px 24px; }
}
/* ---- Bottom callout (privacy / terms questions) ---- */
.legal-callout {
margin-top: clamp(36px, 5vw, 56px);
padding: clamp(22px, 3vw, 32px);
display: grid;
grid-template-columns: auto 1fr;
gap: 22px;
align-items: start;
background: linear-gradient(135deg, var(--rcgl-green-dark) 0%, #0a241b 100%);
color: var(--rcgl-white);
border-radius: var(--radius-lg);
box-shadow: 0 18px 32px -22px rgba(11, 19, 16, 0.40);
position: relative;
isolation: isolate;
overflow: hidden;
}
.legal-callout::after {
content: "";
position: absolute;
inset: 0;
background-image: url("../images/patterns/topo.svg");
background-size: 540px;
opacity: 0.05;
z-index: -1;
pointer-events: none;
}
.legal-callout__icon {
flex: 0 0 auto;
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(127, 168, 138, 0.20);
color: var(--rcgl-eucalyptus);
}
.legal-callout__icon svg { width: 24px; height: 24px; }
.legal-callout__body { min-width: 0; }
.legal-callout__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--rcgl-eucalyptus);
margin-bottom: 6px;
}
.legal-callout__title {
margin: 0 0 8px;
font-size: clamp(1.15rem, 1.4vw + .5rem, 1.5rem);
font-weight: 800;
color: var(--rcgl-white);
line-height: 1.25;
letter-spacing: -0.01em;
}
.legal-callout__lede {
margin: 0 0 16px;
color: rgba(255, 255, 255, 0.84);
font-size: 0.96rem;
line-height: 1.55;
max-width: 60ch;
}
.legal-callout__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.legal-callout__actions .btn--ghost {
color: var(--rcgl-white);
border-color: rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.04);
}
.legal-callout__actions .btn--ghost:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.50);
}
@media (max-width: 600px) {
.legal-callout { grid-template-columns: 1fr; gap: 14px; }
.legal-callout__icon { width: 44px; height: 44px; }
}
/* ============================================================
FAQ page (page-faq) — reuses .legal-page layout (sticky TOC +
numbered editorial sections) and adds:
· section-head lede support
· TOC CTA card
· editorial / accordion ("faq-item")
============================================================ */
/* Section head with lede for FAQ groups */
.legal-section__head-text { min-width: 0; flex: 1 1 auto; }
.legal-section__lede {
margin: 6px 0 0;
color: var(--rcgl-mute);
font-size: 0.95rem;
line-height: 1.55;
max-width: 56ch;
}
/* TOC CTA card — sits below the category list */
.legal-toc__cta {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--rcgl-line);
}
.legal-toc__cta p {
margin: 0 0 6px;
font-size: 0.85rem;
color: var(--rcgl-mute);
}
.legal-toc__contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--rcgl-green-dark);
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.legal-toc__contact-link svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.legal-toc__contact-link:hover { color: var(--rcgl-green); gap: 12px; }
.legal-toc__contact-link:hover svg { transform: translateX(2px); }
/* FAQ accordion list */
.faq-list {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-item {
background: var(--rcgl-white);
border: 1px solid var(--rcgl-line);
border-radius: var(--radius-md);
transition: border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.faq-item:hover {
border-color: rgba(127, 168, 138, 0.45);
box-shadow: 0 8px 22px -16px rgba(15, 47, 36, 0.35);
}
.faq-item[open] {
background: var(--rcgl-stone);
border-color: rgba(127, 168, 138, 0.55);
box-shadow: 0 10px 24px -18px rgba(15, 47, 36, 0.40);
}
.faq-item__q {
list-style: none;
cursor: pointer;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--rcgl-ink);
font-weight: 700;
font-size: 1rem;
line-height: 1.45;
letter-spacing: -0.005em;
user-select: none;
border-radius: var(--radius-md);
transition: color var(--t-fast) var(--ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }
.faq-item__q:focus-visible {
outline: 2px solid var(--rcgl-eucalyptus);
outline-offset: 2px;
}
.faq-item:hover .faq-item__q,
.faq-item[open] .faq-item__q { color: var(--rcgl-green-dark); }
.faq-item__q-text { flex: 1 1 auto; min-width: 0; }
.faq-item__chevron {
flex: 0 0 auto;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--rcgl-stone);
color: var(--rcgl-green-dark);
transition: background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.faq-item__chevron svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.faq-item:hover .faq-item__chevron {
background: rgba(127, 168, 138, 0.20);
}
.faq-item[open] .faq-item__chevron {
background: var(--rcgl-green-dark);
color: var(--rcgl-white);
}
.faq-item[open] .faq-item__chevron svg { transform: rotate(180deg); }
.faq-item__a {
padding: 0 18px 18px;
color: var(--rcgl-ink-2);
font-size: 0.96rem;
line-height: 1.65;
animation: faqOpen 280ms var(--ease) both;
}
.faq-item__a p { margin: 0; }
@keyframes faqOpen {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* The numbered head looks better with the lede stacked on the right
on small screens — match the legal-page mobile breakpoint. */
@media (max-width: 760px) {
.legal-section__head-text { width: 100%; }
.legal-section__lede { font-size: 0.92rem; }
.faq-item__q { padding: 14px 14px; font-size: 0.96rem; gap: 12px; }
.faq-item__a { padding: 0 14px 14px; font-size: 0.94rem; }
.faq-item__chevron { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.faq-item__a { animation: none; }
.faq-item__chevron,
.faq-item__chevron svg { transition: none !important; }
}
/* ============================================================
HOME PAGE — editorial upgrade
Adds a cinematic Ken Burns hero, animated dot eyebrows on
section heads, a project gallery teaser, a flagship feature
badge, enriched location cards, and a combined accreditation
strip — all matching the design language of /gallery, /about,
/careers, /contact, /faq and the legal pages.
============================================================ */
/* ---- Hero (.hero--home extends .hero--photo) ---------------- */
.hero--home { min-height: 92vh; }
.hero--home .hero__media img {
/* Slow Ken Burns zoom on hero photo for life */
object-position: 50% 50%;
transform: scale(1.06);
animation: kenBurns 22s var(--ease) infinite alternate;
will-change: transform;
}
.hero--home .hero__overlay,
.hero--home .hero__media::after {
background:
linear-gradient(105deg, rgba(11,19,16,.78) 0%, rgba(11,19,16,.55) 38%, rgba(11,19,16,.18) 70%, rgba(11,19,16,.05) 100%),
linear-gradient(180deg, rgba(11,19,16,.05) 0%, rgba(11,19,16,.0) 50%, rgba(15,47,36,.92) 100%);
z-index: 1;
}
/* Pill eyebrow with animated dot (matches gallery/about/contact/faq) */
.hero__eyebrow--home::before { display: none; }
.hero__eyebrow--home {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 12px;
background: rgba(127,168,138,.18);
border: 1px solid rgba(127,168,138,.35);
border-radius: var(--radius-pill);
color: var(--rcgl-white);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 700;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: heroFadeUp 700ms var(--ease) both;
animation-delay: 160ms;
}
.home-hero-title {
animation: heroFadeUp 800ms var(--ease) both;
animation-delay: 240ms;
font-size: clamp(2.6rem, 5vw + .5rem, 5.2rem);
line-height: 1.04;
letter-spacing: -.03em;
margin: 14px 0 18px;
max-width: 18ch;
text-wrap: balance;
}
/* Three-row variant: each row on its own line with consistent vertical rhythm.
Layout:
Greener streets. (sans, white)
Beautiful (script, soft watercolor backdrop wash)
suburbs. (sans, mint accent)
Spacing is controlled by per-row padding (not flex `gap`) so the script's
ascender flourish (top of B) and descender flourish (tail of f) get
dedicated vertical room and never get clipped by neighbouring rows. */
.home-hero-title--three-line {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
max-width: none;
text-wrap: initial;
/* Belt-and-braces — defeat any inherited overflow:hidden from a parent */
overflow: visible;
}
.home-hero-title__row {
display: block;
line-height: 1.04;
overflow: visible;
}
.home-hero-title__row--lead {
padding-bottom: 0.05em;
}
/* Row 2 — the floral "Beautiful". The row is sized so the decorative lines
extend past the word on each side (lines roughly match the word width).
The row uses flex layout to vertically centre the script glyph between
"Greener streets." above and "suburbs." below. */
.home-hero-title__row--floral {
position: relative;
line-height: 1;
padding: 0;
/* Tightened margin so the script row sits closer to "Greener streets."
above and "suburbs." below — matches the close-knit rhythm of the
reference. (Was 0.18em, reduced to 0.02em.) */
margin: 0.02em 0 0.02em 0;
/* Width gives the flex-grown lines room to extend out roughly as far as
the word itself on each side — matches the proportion in the reference
image where each line ≈ 0.7× the word width. Value is in em so it
scales with the H1's clamp() font-size. */
width: 6.3em;
max-width: 100%;
isolation: isolate;
z-index: 2;
display: flex;
align-items: center;
min-height: 0.9em;
}
.home-hero-title__floral {
/* Italianno is a tall, thin italic calligraphy — matches the smooth,
restrained letterforms in the reference (Great Vibes is too swashy). */
font-family: 'Italianno', 'Allura', 'Great Vibes', 'Fraunces', Georgia, serif;
font-weight: 400;
font-style: normal;
font-synthesis: none;
/* Italianno renders tall — 0.95em here gives roughly the same visual
cap-height as Great Vibes at 0.78em. */
font-size: 0.95em;
line-height: 1;
letter-spacing: 0;
/* Warm dark champagne / amber-cream — matches the saturated, slightly
greenish-gold tone of the reference (darker than --rcgl-sand-soft). */
color: #cdb582;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
/* Flex layout: lines flex-grow to fill the row, "Beautiful" is a fixed
intrinsic-width middle item. */
display: flex;
width: 100%;
align-items: center;
gap: clamp(10px, 1.2vw, 20px);
}
/* Decorative horizontal ornament lines flanking the script word.
`flex: 1` so they grow to fill whatever space "Beautiful" doesn't use,
keeping total width = parent row width.
Lines fade at the OUTER edges only (not next to "Beautiful") — that's
the editorial divider style in the reference image. */
.home-hero-title__floral::before,
.home-hero-title__floral::after {
content: "";
flex: 1 1 auto;
min-width: 24px;
height: 1px;
/* Left line: fade in from transparent at left, solid by the word. */
background: linear-gradient(90deg,
rgba(205, 181, 130, 0) 0%,
rgba(205, 181, 130, 0.9) 60%,
rgba(205, 181, 130, 0.9) 100%);
}
.home-hero-title__floral::after {
/* Right line: solid at the word, fade out to transparent at right. */
background: linear-gradient(90deg,
rgba(205, 181, 130, 0.9) 0%,
rgba(205, 181, 130, 0.9) 40%,
rgba(205, 181, 130, 0) 100%);
}
/* Row 3 — "suburbs." in the existing mint gradient */
.home-hero-title__row--accent {
background: linear-gradient(135deg, #c2dbc9 0%, #7fa88a 60%, #4f8a68 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding-top: 0.04em;
padding-bottom: 0.12em;
margin-bottom: -0.12em;
line-height: 1.04;
}
/* Tablet (≤ 900px) — width in em already scales with H1. Only nudge the
script font-size + min-height for the breakpoint's tighter rhythm. */
@media (max-width: 900px) {
.home-hero-title__row--floral { margin: 0.02em 0; min-height: 0.85em; width: 6em; }
.home-hero-title__floral { font-size: 0.9em; }
}
/* Mobile (≤ 520px) — slightly tighter still for narrow screens. */
@media (max-width: 520px) {
.home-hero-title__row--floral { margin: 0.02em 0; min-height: 0.8em; width: 5.6em; }
.home-hero-title__floral { font-size: 0.85em; gap: 8px; }
}
.home-hero-lede {
animation: heroFadeUp 800ms var(--ease) both;
animation-delay: 360ms;
color: rgba(255,255,255,.92);
font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
margin: 0 0 26px;
max-width: 60ch;
}
.hero--home .hero__actions {
animation: heroFadeUp 700ms var(--ease) both;
animation-delay: 460ms;
}
/* ---- Editorial section heads -------------------------------- */
.section-head--editorial { max-width: 760px; }
.section-head--editorial.section-head--center { max-width: 760px; margin-inline: auto; }
.section-head__lede {
margin: 14px 0 0;
color: var(--rcgl-ink-2);
font-size: 1.04rem;
line-height: 1.6;
max-width: 60ch;
}
.section-head--center .section-head__lede {
margin-inline: auto;
}
/* Eyebrow modifier — replaces the flat line with the same animated
dot used in the hero pills, so section heads feel alive without
needing extra markup. */
.eyebrow--dot {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 12px;
background: rgba(31,107,69,.10);
border: 1px solid rgba(31,107,69,.22);
border-radius: var(--radius-pill);
color: var(--rcgl-green);
font-size: .72rem;
letter-spacing: .16em;
margin-bottom: 18px;
}
.eyebrow--dot::before {
content: "";
width: 7px; height: 7px;
background: currentColor;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(31,107,69,.18);
animation: pulseDot 2.4s ease-in-out infinite;
}
.section--dark .eyebrow--dot,
.section--charcoal .eyebrow--dot,
.eyebrow--light.eyebrow--dot {
background: rgba(127,168,138,.18);
border-color: rgba(127,168,138,.35);
color: var(--rcgl-eucalyptus);
}
.section--dark .eyebrow--dot::before,
.section--charcoal .eyebrow--dot::before,
.eyebrow--light.eyebrow--dot::before {
box-shadow: 0 0 0 3px rgba(127,168,138,.22);
}
/* ---- Flagship feature strip badge --------------------------- */
.feature-strip--flagship .feature-strip__media { position: relative; }
.feature-strip__badge {
position: absolute;
top: 22px;
left: 22px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 14px;
background: rgba(11,19,16,.78);
color: var(--rcgl-white);
border-radius: var(--radius-pill);
font-size: .78rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 12px 28px -16px rgba(0,0,0,.6);
border: 1px solid rgba(255,255,255,.14);
z-index: 2;
}
.feature-strip__badge-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rcgl-eucalyptus);
box-shadow: 0 0 0 4px rgba(127,168,138,.28);
animation: pulseDot 2.4s ease-in-out infinite;
}
.feature-strip--flagship .feature-strip__content h2 {
text-wrap: balance;
}
.feature-strip__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
/* ---- Project gallery teaser (3-up) -------------------------- */
.gallery-teaser {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 960px) {
.gallery-teaser { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.gallery-teaser { grid-template-columns: 1fr; }
}
.gallery-teaser-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--rcgl-white);
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 0 rgba(15,47,36,.04), 0 14px 30px -22px rgba(15,47,36,.18);
border: 1px solid rgba(15,47,36,.06);
transition: transform var(--t-medium) var(--ease), box-shadow var(--t-medium) var(--ease), border-color var(--t-medium) var(--ease);
}
.gallery-teaser-card:hover {
transform: translateY(-4px);
box-shadow: 0 1px 0 rgba(15,47,36,.06), 0 24px 44px -22px rgba(15,47,36,.30);
border-color: rgba(31,107,69,.20);
}
.gallery-teaser-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--rcgl-stone);
}
.gallery-teaser-card__media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
transition: transform 1.2s var(--ease);
}
.gallery-teaser-card:hover .gallery-teaser-card__media img {
transform: scale(1.04);
}
.gallery-teaser-card__service {
position: absolute;
top: 14px; left: 14px;
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: rgba(11,19,16,.75);
color: var(--rcgl-white);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
border-radius: var(--radius-pill);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.10);
z-index: 2;
max-width: calc(100% - 28px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.gallery-teaser-card__body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.gallery-teaser-card__client {
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--rcgl-green);
font-weight: 800;
}
.gallery-teaser-card__title {
font-size: 1.18rem;
line-height: 1.25;
margin: 0;
color: var(--rcgl-ink);
text-wrap: balance;
}
.gallery-teaser-card__location {
margin-top: 4px;
color: var(--rcgl-ink-2);
font-size: .88rem;
display: inline-flex;
align-items: center;
gap: 6px;
}
.gallery-teaser-card__location svg { width: 14px; height: 14px; color: var(--rcgl-green); }
.gallery-teaser-card__cta {
margin-top: auto;
padding-top: 14px;
color: var(--rcgl-green-dark);
font-weight: 800;
font-size: .92rem;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap var(--t-fast) var(--ease);
}
.gallery-teaser-card__cta svg { width: 16px; height: 16px; }
.gallery-teaser-card:hover .gallery-teaser-card__cta { gap: 12px; color: var(--rcgl-green); }
/* ---- Enriched location cards (.location-card--rich) --------- */
.location-card--rich {
background: var(--rcgl-white);
border: 1px solid rgba(15,47,36,.08);
border-radius: var(--radius-lg);
padding: 24px;
position: relative;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.location-card--rich:hover {
transform: translateY(-3px);
box-shadow: 0 22px 38px -24px rgba(15,47,36,.22);
border-color: rgba(31,107,69,.20);
}
.location-card--rich .location-card__pin {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(31,107,69,.10);
color: var(--rcgl-green-dark);
display: grid; place-items: center;
margin-bottom: 14px;
}
.location-card--rich .location-card__pin svg { width: 18px; height: 18px; }
.location-card--rich .location-card__region {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--rcgl-green);
font-weight: 800;
margin-bottom: 4px;
}
.location-card--rich .location-card__depot {
font-size: 1.4rem;
margin: 0 0 10px;
color: var(--rcgl-ink);
line-height: 1.15;
}
.location-card--rich .location-card__desc {
color: var(--rcgl-ink-2);
font-size: .9rem;
line-height: 1.55;
margin: 0 0 16px;
}
.location-card--rich .location-card__cta {
color: var(--rcgl-green-dark);
font-weight: 800;
font-size: .9rem;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.location-card--rich .location-card__cta svg { width: 14px; height: 14px; }
.location-card--rich:hover .location-card__cta { gap: 10px; color: var(--rcgl-green); }
/* ---- Accreditation strip (combined with locations) ----------
The logos have very different intrinsic dimensions (eg ISO is
800x474, QAA is 506x178). To keep them visually consistent we
set an EXPLICIT height on each ![]()
and let width follow the
aspect ratio. Using max-height % alone allowed the images to
overflow their containers because grid items default to
min-height: auto. Layout switches to a centred stack on tablet
and below so the row never gets cramped. */
.accred-strip {
margin-top: clamp(36px, 5vw, 60px);
padding: clamp(22px, 2.5vw, 30px) clamp(22px, 4vw, 40px);
background: var(--rcgl-white);
border: 1px solid rgba(15,47,36,.08);
border-radius: var(--radius-lg);
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: clamp(20px, 3vw, 36px);
box-shadow: 0 14px 30px -22px rgba(15,47,36,.10);
overflow: visible;
}
.accred-strip__label {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--rcgl-green);
font-weight: 800;
border-right: 1px solid rgba(15,47,36,.10);
padding-right: clamp(20px, 3vw, 36px);
line-height: 1.3;
white-space: nowrap;
align-self: stretch;
display: flex;
align-items: center;
flex: 0 0 auto;
}
.accred-strip__row {
display: flex;
flex-wrap: wrap;
gap: clamp(24px, 3vw, 44px);
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
}
.accred-strip__item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
position: relative;
z-index: 1;
padding: 8px 12px;
border-radius: 8px;
background: transparent;
transform-origin: center center;
transition: transform 280ms cubic-bezier(.2,.7,.25,1),
background 200ms ease,
box-shadow 280ms ease,
z-index 0s linear 0s;
will-change: transform;
}
.accred-strip__item img {
display: block;
height: clamp(48px, 5vw, 64px);
width: auto;
max-width: 100%;
object-fit: contain;
filter: saturate(.9);
transition: filter 200ms ease;
}
.accred-strip__item:hover,
.accred-strip__item:focus-within {
z-index: 10;
transform: scale(2.4) !important;
background: #ffffff;
box-shadow: 0 22px 50px -18px rgba(15,47,36,.35),
0 0 0 1px rgba(15,47,36,.06);
}
.accred-strip__item:hover img,
.accred-strip__item:focus-within img {
filter: saturate(1);
}
/* Tablet & mobile: stack the label above the logos so logos get the
full available width and never overflow the container. */
@media (max-width: 900px) {
.accred-strip {
flex-direction: column;
text-align: center;
padding: 22px clamp(18px, 5vw, 28px);
}
.accred-strip__label {
border-right: 0;
border-bottom: 1px solid rgba(15,47,36,.10);
padding: 0 0 16px;
width: 100%;
justify-content: center;
align-self: auto;
}
.accred-strip__row {
justify-content: center;
width: 100%;
gap: clamp(20px, 5vw, 32px);
}
/* Touch devices: smaller scale so hovered/tapped logo doesn't blow off-screen */
.accred-strip__item:hover,
.accred-strip__item:focus-within {
transform: scale(1.6) !important;
}
}
/* ---- Outline buttons on dark backgrounds -------------------- */
/* The base .btn--outline is designed for light backgrounds (dark green
text on transparent). On the dark Fleet split feature it disappears.
These overrides keep the same markup pattern usable site-wide. */
.split-feature .btn--outline,
.section--dark .btn--outline,
.section--charcoal .btn--outline {
color: var(--rcgl-white);
border-color: rgba(255, 255, 255, 0.45);
}
.split-feature .btn--outline:hover,
.section--dark .btn--outline:hover,
.section--charcoal .btn--outline:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--rcgl-white);
border-color: rgba(255, 255, 255, 0.7);
}
/* ---- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.hero--home .hero__media img,
.feature-strip__badge-dot,
.eyebrow--dot::before,
.gallery-teaser-card__media img,
.gallery-teaser-card,
.location-card--rich,
.accred-strip__item img,
.home-hero-title,
.home-hero-lede,
.hero--home .hero__actions,
.hero__eyebrow--home {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* ============================================================
Scroll performance
--------------------------------------------------------------
Long marketing pages are typically 8–12 viewports tall. Without
help, every paint frame the browser has to lay out and rasterise
the whole document, which causes choppy desktop scroll.
Two techniques here:
1. `content-visibility: auto` — the browser skips layout, style
and paint for sections that are far offscreen. Re-engages
automatically as they approach the viewport.
2. `contain-intrinsic-size` — reserves a height for the skipped
section so the scrollbar/anchor positions stay stable while
the section is "collapsed".
Hero is intentionally excluded (it's always on screen at load).
============================================================ */
.logo-strip,
.contact-stats,
.feature-strip,
.trust-strip,
.sector-trust-strip,
.cta-band,
.section--cta,
.section--cta-band,
.gallery-teaser,
.systems-grid,
.capability-grid,
.about-process,
.contact-grid,
.careers-cta,
.sig-program,
.accred-strip,
.sector-deliver-grid,
.gallery-stats {
content-visibility: auto;
contain-intrinsic-size: 1px 720px;
}
/* The footer is tall and always last — same trick. */
.site-footer {
content-visibility: auto;
contain-intrinsic-size: 1px 480px;
}
/* Promote big always-on background animations into their own
composite layers. Without this, the kenBurns / floatLeaf /
marquee animations dirty the parent's paint area on every
tick, which the compositor has to merge during scroll. */
.hero__media,
.page-hero__media,
.hero-leaf,
.cta-band__leaf {
transform: translateZ(0);
backface-visibility: hidden;
}