/* ==========================================================================
   GDE Solutions — public site design system
   Tokens from docs/design-system.md. Mobile-first; no external resources.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
/* Poppins, the client's brand font (files supplied 2026-10-23, v3.200), self-hosted.
   SIL Open Font License 1.1: /assets/fonts/OFL.txt. Subset to Latin and Latin Extended. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/poppins-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700-italic.woff2") format("woff2"); }

/* ---- Tokens --------------------------------------------------------------- */
:root {
    --color-navy: #123d72;
    --color-blue: #1766ad;
    --color-green-deep: #073d2c;
    --color-green: #087d45;
    --color-green-soft: #eaf5e9;
    --color-white: #ffffff;
    --color-neutral: #f5f7f6;
    --color-text: #183044;
    --color-muted: #5c6b73;
    --color-border: #dce5e2;
    /* Derived tints/shades (same hues) */
    --color-blue-soft: #e8f1fa;
    --color-teal: #0a7f80;
    --color-teal-soft: #e3f4f3;
    --color-leaf: #35b36b;
    --color-amber: #b45309; /* training accent (reference); 5.0:1 on white */
    --color-amber-soft: #fdf3e7;
    --color-logo-bg: #04264a; /* the logo has white lettering: always shown on the logo's own navy */
    --color-header: #04264a; /* background of the 2026 logo artwork */
    --color-header-glow: #0a4580;
    --color-nav-text: #dbe8f6; /* 13:1 on the header navy */
    --color-sky: #6cc4ff; /* light blue of the logo's "E"; 8:1 on the header navy */
    --color-flame: #d63a1f; /* red-orange of the logo's "D"; 4.6:1 with white text */
    --color-flame-dark: #b52d15;
    --color-focus: #123d72; /* 10:1 on light backgrounds; white is used on dark areas */

    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Sinhala", sans-serif;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
    --text-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);
    --text-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    --container: 76rem;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(18, 61, 114, 0.06), 0 2px 8px rgba(18, 61, 114, 0.05);
    --shadow: 0 8px 24px rgba(18, 61, 114, 0.09);
    --header-height: 5.25rem;
    --transition: 160ms ease;
}

/* ---- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
/* Form controls do not inherit the page font by default: keep Poppins everywhere. */
button, input, select, textarea, optgroup { font-family: inherit; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3 { color: var(--color-navy); line-height: 1.2; margin: 0 0 var(--space-4); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-blue); text-underline-offset: 0.18em; }
a:hover { color: var(--color-navy); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.site-footer :focus-visible, .feature-band :focus-visible { outline-color: var(--color-white); }
main:focus { outline: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--color-white); color: var(--color-navy); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-weight: 700; box-shadow: var(--shadow); }
.skip-link:focus { top: var(--space-4); }
.lead { font-size: var(--text-lg); color: var(--color-muted); max-width: 46rem; }

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.icon--xl { width: 2.5rem; height: 2.5rem; }

/* ---- Buttons & links ------------------------------------------------------ */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0.65rem 1.2rem;
    font: inherit; font-size: var(--text-sm); font-weight: 700; line-height: 1.2; text-decoration: none;
    border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.button:hover { transform: translateY(-1px); }
.button--lg { min-height: 3.25rem; padding: 0.8rem 1.5rem; font-size: 1rem; }
.button--primary { background: var(--color-blue); color: var(--color-white); }
.button--primary:hover { background: var(--color-navy); color: var(--color-white); }
.button--outline { background: var(--color-white); color: var(--color-blue); border-color: var(--color-blue); }
.button--outline:hover { background: var(--color-blue-soft); color: var(--color-navy); border-color: var(--color-navy); }
.button--green { background: var(--color-green); color: var(--color-white); }
.button--green:hover { background: var(--color-green-deep); color: var(--color-white); }
.button--light { background: var(--color-white); color: var(--color-green-deep); }
.button--light:hover { background: var(--color-green-soft); color: var(--color-green-deep); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.75rem; font-weight: 700; text-decoration: none; color: var(--color-blue); } /* 44px tap target */
.text-link:hover { text-decoration: underline; color: var(--color-navy); }
.text-link .icon { transition: transform var(--transition); }
.text-link:hover .icon { transform: translateX(3px); }

.eyebrow { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-green); margin-bottom: var(--space-3); }
.eyebrow--light { color: #bfe8cf; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--text-h3); margin-top: var(--space-5); }
.prose h3, .prose h4 { font-size: 1.05rem; margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.prose--light, .prose--light h2, .prose--light h3, .prose--light a { color: var(--color-white); }

/* ---- Header & navigation -------------------------------------------------- */
/* Deep navy taken from the 2026 logo artwork, so the logo (transparent PNG/WebP) sits on its own colour. */
.site-header {
    position: sticky; top: 0; z-index: 50; color: var(--color-white);
    background: var(--color-header); background-image: radial-gradient(ellipse 60% 140% at 50% 0%, var(--color-header-glow), transparent 70%);
    border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--color-sky), var(--color-flame) 50%, var(--color-leaf)) 1;
    box-shadow: 0 4px 18px rgba(2, 18, 38, 0.28);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-height); }
.site-logo { display: block; flex: none; padding-block: var(--space-1); }
.site-logo img { width: auto; height: 3.6rem; transition: height 250ms ease; }
.site-header__inner { transition: min-height 250ms ease; }
.site-header a:focus-visible, .site-header button:focus-visible { outline-color: var(--color-white); }

.nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0.5rem 0.9rem; font: inherit; font-weight: 700;
    color: var(--color-white); background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }
.nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
/* Buttons that only work with JavaScript stay hidden until site.js reveals them. */
.nav-toggle[hidden], .submenu-toggle[hidden] { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__link, .submenu a {
    display: block; padding: 0.7rem 0.25rem; color: var(--color-nav-text); font-weight: 600; text-decoration: none; transition: color var(--transition);
}
.site-nav__link:hover, .submenu a:hover { color: var(--color-white); }
.site-nav__link[aria-current="page"], .submenu a[aria-current="page"], .site-nav__item.is-active > .site-nav__link { color: var(--color-sky); }
.submenu { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); }
.submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--color-nav-text); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.submenu-toggle:hover { color: var(--color-white); }
.submenu-toggle .icon { transition: transform var(--transition); }
.submenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__cta { margin-top: var(--space-3); }
/* Header call-to-action uses the red-orange of the logo's "D". */
.button--flame { background: linear-gradient(135deg, var(--color-flame), var(--color-flame-dark)); color: var(--color-white); box-shadow: 0 4px 14px rgba(214, 58, 31, 0.35); }
.button--flame:hover { background: var(--color-flame-dark); color: var(--color-white); }

/* Mobile menu (JavaScript adds .js; without it the menu is simply shown expanded) */
@media (max-width: 63.99rem) {
    :root { --header-height: 5.5rem; }
    .site-logo img { height: 4.6rem; }
    /* Scrolled (site.js): a smaller header leaves more of the screen for content. */
    html.header-compact { --header-height: 4.25rem; }
    html.header-compact .site-logo img { height: 3.4rem; }
    .js .site-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain;
        background: var(--color-header); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 16px 32px rgba(2, 18, 38, 0.35);
        padding: var(--space-3) var(--gutter) var(--space-5);
    }
    .js .site-nav.is-open { display: block; }
    /* Open menu: page behind is dimmed and does not scroll; floating buttons step aside. */
    html.menu-open body { overflow: hidden; }
    html.menu-open body::before { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(2, 14, 30, 0.55); }
    html.menu-open .float-contact { display: none; }
    .js .has-submenu.is-open > .submenu { margin: 0 0 var(--space-2) var(--space-2); padding-left: var(--space-3); border-left: 3px solid var(--color-sky); }
    .submenu a { font-size: 0.95rem; }
    .site-header__inner { flex-wrap: wrap; }
    html:not(.js) .site-nav { width: 100%; padding-bottom: var(--space-4); }
    .site-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .site-nav__item.has-submenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .has-submenu > .site-nav__link { flex: 1; }
    .has-submenu > .submenu { flex-basis: 100%; }
    .js .has-submenu > .submenu { display: none; }
    .js .has-submenu.is-open > .submenu { display: block; }
    .site-nav__cta { display: flex; }
}
@media (max-width: 22rem) { .site-logo img { height: 3.9rem; } html.header-compact .site-logo img { height: 3.1rem; } }

@media (min-width: 64rem) {
    /* Tall at the top of the page so the logo's tagline is legible; compact once scrolled. */
    :root { --header-height: 8rem; }
    .site-logo img { height: 7rem; }
    html.header-compact { --header-height: 5rem; }
    html.header-compact .site-logo img { height: 4.1rem; }
    .nav-toggle { display: none; }
    .site-nav { display: flex; align-items: center; gap: var(--space-4); }
    .site-nav__list { display: flex; align-items: center; gap: var(--space-1); }
    .site-nav__item { position: relative; display: flex; align-items: center; }
    .site-nav__link { padding: 0.5rem 0.6rem; font-size: var(--text-sm); border-radius: var(--radius-sm); position: relative; white-space: nowrap; }
    .site-nav__link::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--color-sky); transform: scaleX(0); transition: transform var(--transition); }
    .site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after, .site-nav__item.is-active > .site-nav__link::after { transform: scaleX(1); }
    .submenu-toggle { width: 1.75rem; height: 2.25rem; margin-left: -0.35rem; }
    /* The dropdown stays a light card for easy reading. */
    .submenu {
        position: absolute; top: calc(100% + 0.35rem); left: 0; min-width: 17rem; padding: var(--space-2);
        background: var(--color-white); border: 1px solid var(--color-border); border-top: 3px solid var(--color-sky); border-radius: var(--radius); box-shadow: var(--shadow);
        display: none;
    }
    .submenu a { padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-navy); }
    .submenu a:hover { background: var(--color-blue-soft); color: var(--color-navy); }
    .submenu a[aria-current="page"] { color: var(--color-blue); }
    .site-header .submenu a:focus-visible { outline-color: var(--color-focus); }
    /* No JavaScript: open on hover/focus. With JavaScript: open via the toggle button. */
    html:not(.js) .has-submenu:hover > .submenu, html:not(.js) .has-submenu:focus-within > .submenu,
    .js .has-submenu.is-open > .submenu { display: block; }
    /* Invisible bridge so the pointer can move from the item into the dropdown. */
    .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
    .site-nav__cta { margin-top: 0; }
}
/* Mouse users: the Services dropdown also opens on hover (the arrow button still works for keyboard and touch). */
@media (min-width: 64rem) and (hover: hover) {
    .js .has-submenu:hover > .submenu { display: block; }
    .has-submenu:hover > .submenu-toggle .icon { transform: rotate(180deg); }
}
@media (min-width: 64rem) and (max-width: 74.99rem) {
    /* Poppins is wide: keep every menu item and the button on one line. */
    :root { --header-height: 7rem; }
    html.header-compact { --header-height: 5rem; }
    .site-nav { gap: var(--space-2); }
    .site-nav__link { padding-inline: 0.45rem; font-size: 0.875rem; white-space: nowrap; }
    .site-nav__link::after { left: 0.45rem; right: 0.45rem; }
    .site-logo img { height: 5.6rem; }
    html.header-compact .site-logo img { height: 4.1rem; }
    .site-nav__cta { padding-inline: 0.85rem; font-size: 0.875rem; white-space: nowrap; }
}

/* ---- Sections ------------------------------------------------------------- */
.section { padding-block: var(--space-8); }
.section--white { background: var(--color-white); }
.section--soft { background: linear-gradient(180deg, var(--color-neutral), var(--color-white)); }
.section-header { margin-bottom: var(--space-6); max-width: 48rem; }
.section-header h2 { margin-bottom: var(--space-3); position: relative; padding-bottom: var(--space-3); }
.section-header h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; border-radius: 2px; background: var(--color-green); }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header--center h2::after { left: 50%; transform: translateX(-50%); }
.section-header__lead { color: var(--color-muted); font-size: var(--text-lg); }
.section-header--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.section-header--split h2 { margin-bottom: 0; }
.section-header--split .section-header__lead { max-width: 30rem; margin: 0; }
.section-lead { margin-bottom: var(--space-5); color: var(--color-muted); }

.page-intro { padding-block: var(--space-8); background: linear-gradient(180deg, var(--color-blue-soft), var(--color-white)); }

/* ---- Hero ----------------------------------------------------------------- */
/* Reference: text on the left over a light sky, a wide scene filling the right,
   leaves in the lower-left corner and layered waves into the next section. */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f3f9fd 0%, #eef7f2 100%); }
.hero__scene { position: relative; aspect-ratio: 16 / 9; }
.hero__scene picture { display: contents; }
.hero__scene-image { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.hero__inner { position: relative; z-index: 2; padding-block: var(--space-6) var(--space-7); }
.hero__welcome {
    display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; margin-bottom: var(--space-4); padding: 0.45rem 1rem 0.45rem 0.45rem;
    font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem); font-weight: 700; line-height: 1.35; color: var(--color-white);
    background: linear-gradient(120deg, var(--color-header), var(--color-blue) 60%, var(--color-green)); border-radius: 999px;
    box-shadow: 0 8px 22px rgba(4, 38, 74, 0.25);
}
.hero__welcome-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-white); color: var(--color-green); }
.hero__welcome-icon .icon { width: 1.05rem; height: 1.05rem; }
.hero__welcome strong { font-weight: 800; }
.hero__eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy); margin-bottom: var(--space-3); }
.hero__title { margin-bottom: var(--space-4); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; text-wrap: wrap; font-size: clamp(2rem, 1.2rem + 2.3vw, 2.95rem); }
.hero__title span { display: inline; white-space: nowrap; }
@media (max-width: 22rem) { .hero__title span { white-space: normal; } }
.hero__title span:last-child { display: block; }
.hero__title .tone-navy { color: var(--color-navy); }
.hero__title .tone-blue { color: var(--color-blue); }
.hero__title .tone-green { color: var(--color-green); }
.hero__intro { font-size: var(--text-lg); color: var(--color-text); max-width: 33rem; }
.hero .button-row { margin: var(--space-5) 0; }
.experience-badge { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-navy); font-size: 1.05rem; }
.experience-badge__icon { width: 2.6rem; height: 2.6rem; padding: 0.55rem; border-radius: 50% 50% 50% 8px; background: linear-gradient(135deg, var(--color-leaf), var(--color-green)); color: var(--color-white); box-shadow: 0 6px 14px rgba(8, 125, 69, 0.25); }
.hero__waves { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(70px, 11vw, 170px); pointer-events: none; }
.leaves { position: absolute; z-index: 3; pointer-events: none; width: clamp(110px, 14vw, 210px); height: auto; }
.leaves--hero { left: -40px; bottom: clamp(10px, 3vw, 50px); }
@media (min-width: 56rem) {
    .hero { min-height: clamp(560px, 46vw, 680px); display: flex; align-items: center; }
    .hero { min-height: clamp(560px, 47vw, 760px); }
    /* The photograph carries its own soft left fade, leaves and wave. */
    .hero__scene { position: absolute; inset: 0; aspect-ratio: auto; }
    .hero__scene-image { object-position: 70% 50%; }
    .hero__inner { padding-block: var(--space-8) calc(var(--space-9) + var(--space-5)); width: 100%; }
    .hero__text { max-width: 40rem; padding: var(--space-5) var(--space-5) var(--space-5) 0; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }
}

/* ---- Cards ---------------------------------------------------------------- */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 36rem) { .card-grid--4, .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.service-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--space-6) var(--space-5); background: var(--color-white);
    border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.service-card:hover, .service-card:focus-within { box-shadow: var(--shadow); transform: translateY(-3px); border-color: #c5d6d1; }
.service-card__title { margin-top: var(--space-4); margin-bottom: var(--space-3); }
.service-card__text { color: var(--color-muted); font-size: var(--text-sm); }
.service-card .text-link { margin-top: auto; padding-top: var(--space-2); }

.icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; color: var(--color-white); box-shadow: 0 6px 16px rgba(18, 61, 114, 0.18); }
.icon-badge--blue { background: var(--color-blue); }
.icon-badge--green { background: var(--color-green); }
.icon-badge--teal { background: var(--color-teal); }
.icon-badge--forest { background: var(--color-green-deep); }

.division-card {
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
    border: 1px solid var(--color-border); background: var(--color-white); box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.division-card:hover, .division-card:focus-within { box-shadow: var(--shadow); transform: translateY(-3px); }
.division-card--environmental { background: linear-gradient(180deg, var(--color-green-soft), var(--color-white)); }
.division-card--engineering { background: linear-gradient(180deg, var(--color-blue-soft), var(--color-white)); }
.division-card--training_advisory { background: linear-gradient(180deg, var(--color-amber-soft), var(--color-white)); }
.division-card__body { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; flex: 1; padding: var(--space-6) var(--space-5) var(--space-5); }
.division-card__icon { color: var(--color-green); }
.division-card__icon .icon { width: 3rem; height: 3rem; }
.division-card--engineering .division-card__icon { color: var(--color-blue); }
.division-card--training_advisory .division-card__icon, .division-card--training_advisory .division-card__title { color: var(--color-amber); }
.division-card--environmental .division-card__title { color: var(--color-green); }
.division-card__title { font-size: 1.15rem; margin-bottom: var(--space-2); }
.division-card__text { color: var(--color-muted); font-size: var(--text-sm); }
.division-card__text p { margin-bottom: var(--space-3); }
.division-card .text-link { font-size: var(--text-sm); color: var(--color-navy); }
.division-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-top: calc(-1 * var(--space-4)); }
.division-card__media picture { display: contents; }
/* The photo fades in from the card's tint so text and image read as one panel. */
.division-card__image { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-image: linear-gradient(180deg, transparent 0, #000 32%); transition: transform 600ms ease; }
.division-card:hover .division-card__image, .division-card:focus-within .division-card__image { transform: scale(1.04); }
.division-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
.division-card--environmental .division-card__media::after { background: linear-gradient(90deg, var(--color-green), var(--color-leaf)); }
.division-card--engineering .division-card__media::after { background: linear-gradient(90deg, var(--color-navy), var(--color-blue)); }
.division-card--training_advisory .division-card__media::after { background: linear-gradient(90deg, #8a3c0a, var(--color-amber)); }

.project-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-white); box-shadow: var(--shadow-sm); }
.project-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.project-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.project-card__category { color: var(--color-green); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-3); }
.project-card .text-link { margin-top: auto; }

.client-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.client-tile { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.client-tile__text { display: flex; flex-direction: column; gap: 0.2rem; }
.client-tile__icon { flex: none; width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: 50%; background: var(--color-blue-soft); color: var(--color-navy); }
.client-tile__name { font-weight: 700; color: var(--color-navy); line-height: 1.3; }
.client-tile__sector { font-size: 0.8125rem; color: var(--color-green); font-weight: 600; }
.client-tile--logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; }
.client-tile--logo img { max-height: 4rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.client-tile__caption { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--color-muted); }
.logo-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-5); align-items: center; }
.logo-strip img { max-height: 4rem; width: auto; margin-inline: auto; object-fit: contain; }

/* ---- Feature & CTA bands -------------------------------------------------- */
.feature-band { background: radial-gradient(circle at 85% 20%, rgba(53, 179, 107, 0.35), transparent 45%), linear-gradient(120deg, var(--color-green-deep), #0b5a3c 60%, var(--color-navy)); color: var(--color-white); }
.feature-band h2 { color: var(--color-white); }
.feature-band__inner { display: grid; gap: var(--space-6); align-items: center; }
.feature-band__text { max-width: 40rem; }
.feature-band__text .button { margin-top: var(--space-5); }
.feature-band__art { display: none; }
.feature-band__icon { width: 11rem; height: 11rem; color: rgba(255, 255, 255, 0.85); padding: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
@media (min-width: 56rem) { .feature-band__inner { grid-template-columns: 1.6fr 1fr; } .feature-band__art { display: flex; justify-content: center; } }



.cta-band { background: linear-gradient(180deg, var(--color-white), var(--color-green-soft)); text-align: center; }
.cta-band__inner { max-width: 48rem; }
.cta-band__text { color: var(--color-muted); font-size: var(--text-lg); margin-bottom: var(--space-5); }

/* ---- Homepage sections --------------------------------------------------- */
.split-heading span { display: block; }
.split-heading__accent { color: var(--color-green); }
.home-env { background: linear-gradient(180deg, #f4faf6 0%, var(--color-white) 70%); padding-block: var(--space-6) var(--space-7); }
.home-env .section-header h2::after, .home-divisions .section-header h2::after { display: none; }
.home-env .section-header h2 { padding-bottom: 0; }
.home-env .service-card { border-radius: var(--radius); }

/* Environmental services: four highlighted, interactive cards.
   Each card has its own tone; hover/focus (or, on touch screens, scrolling it
   into the middle of the screen) plays an icon animation matching the service. */
.env-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 36rem) { .env-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 64rem) { .env-grid { grid-template-columns: repeat(4, 1fr); } }
.env-card--blue { --tone: #1766ad; --tone-soft: #e3effa; --tone-shadow: rgba(23, 102, 173, 0.32); }
.env-card--green { --tone: #087d45; --tone-soft: #e1f3e6; --tone-shadow: rgba(8, 125, 69, 0.32); }
.env-card--teal { --tone: #0a7f80; --tone-soft: #dcf1f0; --tone-shadow: rgba(10, 127, 128, 0.32); }
.env-card--forest { --tone: #0b5a3c; --tone-soft: #e0eee7; --tone-shadow: rgba(7, 61, 44, 0.32); }
.env-card--navy { --tone: #123d72; --tone-soft: #e6edf6; --tone-shadow: rgba(18, 61, 114, 0.32); }
.env-card--amber { --tone: #b45309; --tone-soft: #fcefdf; --tone-shadow: rgba(180, 83, 9, 0.3); }
.env-card {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
    padding: var(--space-5) var(--space-5) var(--space-4);
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease, opacity 600ms ease;
}
.env-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tone); transform: scaleX(0.28); transform-origin: left; transition: transform 500ms ease; }
.env-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 0%, var(--tone-soft), transparent 72%); opacity: 0.45; transition: opacity 400ms ease; }
.env-card:hover, .env-card:focus-within, .env-card.is-active { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(18, 61, 114, 0.14); border-color: var(--tone); }
.env-card:hover::before, .env-card:focus-within::before, .env-card.is-active::before { transform: scaleX(1); }
.env-card:hover::after, .env-card:focus-within::after, .env-card.is-active::after { opacity: 1; }
.env-card__num { position: absolute; top: 0.6rem; right: 0.9rem; font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--tone); opacity: 0.13; transition: opacity 400ms ease; }
.env-card:hover .env-card__num, .env-card:focus-within .env-card__num, .env-card.is-active .env-card__num { opacity: 0.32; }
.env-card__badge { position: relative; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; color: var(--color-white); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tone) 70%, #ffffff), var(--tone) 70%); box-shadow: 0 10px 22px var(--tone-shadow); }
.env-card__badge::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--tone); border-radius: 50%; opacity: 0; }
.env-card:hover .env-card__badge::after, .env-card:focus-within .env-card__badge::after, .env-card.is-active .env-card__badge::after { animation: env-ring 1.6s ease-out infinite; }
.env-icon { width: 58%; height: 58%; overflow: visible; }
.env-card__title { font-size: 1.05rem; margin: 0 0 var(--space-2); padding-right: 2.2rem; }
.env-card__text { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.env-card__link { color: var(--tone); }
.env-card__link:hover { color: var(--color-navy); }
@media (min-width: 36rem) {
    .env-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--space-6) var(--space-5) var(--space-4); }
    .env-card::before { transform-origin: center; }
    .env-card__badge { width: 5.25rem; height: 5.25rem; }
    .env-card__title { padding-right: 0; }
    .env-card__body { display: flex; flex-direction: column; align-items: center; height: 100%; }
    .env-card__link { margin-top: auto; }
}

/* Icon animations, matched to each service. */
.env-icon path { transform-box: fill-box; }
:is(.env-card, .svc-card, .svc-row):hover .env-icon--wastewater path:nth-child(-n+2), :is(.env-card, .svc-card, .svc-row):focus-within .env-icon--wastewater path:nth-child(-n+2), :is(.env-card, .svc-card, .svc-row).is-active .env-icon--wastewater path:nth-child(-n+2) { animation: env-drop 1.6s ease-in-out infinite; }
:is(.env-card, .svc-card, .svc-row):hover .env-icon--wastewater path:nth-child(n+3), :is(.env-card, .svc-card, .svc-row):focus-within .env-icon--wastewater path:nth-child(n+3), :is(.env-card, .svc-card, .svc-row).is-active .env-icon--wastewater path:nth-child(n+3) { animation: env-wave 1.6s ease-in-out infinite; }
:is(.env-card, .svc-card, .svc-row):hover .env-icon--wastewater path:nth-child(4), :is(.env-card, .svc-card, .svc-row):focus-within .env-icon--wastewater path:nth-child(4), :is(.env-card, .svc-card, .svc-row).is-active .env-icon--wastewater path:nth-child(4) { animation-direction: reverse; }
.env-icon--noise path { transform-origin: center; }
:is(.env-card, .svc-card, .svc-row):hover .env-icon--noise path, :is(.env-card, .svc-card, .svc-row):focus-within .env-icon--noise path, :is(.env-card, .svc-card, .svc-row).is-active .env-icon--noise path { animation: env-bar 0.9s ease-in-out infinite; }
.env-icon--noise path:nth-child(2) { animation-delay: -0.15s; } .env-icon--noise path:nth-child(3) { animation-delay: -0.45s; } .env-icon--noise path:nth-child(4) { animation-delay: -0.3s; } .env-icon--noise path:nth-child(5) { animation-delay: -0.6s; } .env-icon--noise path:nth-child(6) { animation-delay: -0.1s; }
.env-icon--air path { stroke-dasharray: 26 6; }
:is(.env-card, .svc-card, .svc-row):hover .env-icon--air path, :is(.env-card, .svc-card, .svc-row):focus-within .env-icon--air path, :is(.env-card, .svc-card, .svc-row).is-active .env-icon--air path { animation: env-flow 1.2s linear infinite; }
.env-icon--air path:nth-child(2) { animation-delay: -0.4s; } .env-icon--air path:nth-child(3) { animation-delay: -0.8s; }
:is(.env-card, .svc-card, .svc-row):hover .env-icon--odour path, :is(.env-card, .svc-card, .svc-row):focus-within .env-icon--odour path, :is(.env-card, .svc-card, .svc-row).is-active .env-icon--odour path { animation: env-rise 1.8s ease-in-out infinite; }
.env-icon--odour path:nth-child(2) { animation-delay: -0.6s; } .env-icon--odour path:nth-child(3) { animation-delay: -1.2s; }
@keyframes env-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes env-drop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }
@keyframes env-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8%); } }
@keyframes env-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
@keyframes env-flow { to { stroke-dashoffset: -64; } }
@keyframes env-rise { 0% { transform: translateY(10%); opacity: 0.45; } 50% { opacity: 1; } 100% { transform: translateY(-10%); opacity: 0.45; } }

/* Scroll reveal (added by site.js only when the grid starts below the fold). */
.env-grid.reveal-pending .env-card { opacity: 0; transform: translateY(28px); }
.env-grid.is-revealing .env-card:nth-child(2) { transition-delay: 110ms; }
.env-grid.is-revealing .env-card:nth-child(3) { transition-delay: 220ms; }
.env-grid.is-revealing .env-card:nth-child(4) { transition-delay: 330ms; }
.home-divisions { background: var(--color-white); padding-block: var(--space-4) var(--space-7); }

.compliance-band { position: relative; overflow: hidden; padding-block: var(--space-7); background: linear-gradient(100deg, #f1f9f1 0%, #e3f2e4 48%, #0f7a42 74%, var(--color-green-deep) 100%); }
.compliance-band__inner { position: relative; z-index: 2; display: grid; gap: var(--space-5); align-items: center; justify-items: start; }
.compliance-band__emblem { display: inline-flex; width: 8.5rem; height: 8.5rem; padding: 0.9rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow); border: 4px solid #cfe9d2; }
.compliance-band__emblem img { width: 100%; height: auto; }
.compliance-band__text h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); color: var(--color-green-deep); margin-bottom: var(--space-3); }
.compliance-band__text .prose { color: var(--color-text); max-width: 32rem; margin-bottom: var(--space-4); }
.button--forest { background: var(--color-green-deep); color: var(--color-white); }
.button--forest:hover { background: var(--color-green); color: var(--color-white); }
.compliance-band__certificate { margin: 0; width: min(100%, 20rem); }
.compliance-band__certificate a { display: block; padding: 0.6rem; background: var(--color-white); border-radius: var(--radius-sm); box-shadow: 0 18px 36px rgba(7, 61, 44, 0.28); transform: rotate(-2deg); transition: transform var(--transition), box-shadow var(--transition); }
.compliance-band__certificate a:hover, .compliance-band__certificate a:focus-visible { transform: rotate(0) scale(1.03); box-shadow: 0 22px 44px rgba(7, 61, 44, 0.35); }
.compliance-band__certificate img { width: 100%; height: auto; }
.compliance-band__certificate figcaption { margin-top: var(--space-3); font-size: 0.8125rem; font-weight: 600; color: var(--color-green-deep); text-align: center; }
.compliance-band__statement { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); font-weight: 700; line-height: 1.3; color: var(--color-green-deep); }
.leaves--band-left { left: -50px; top: -30px; transform: rotate(180deg) scaleX(-1); opacity: 0.9; }
.leaves--band-right { right: -40px; bottom: -40px; transform: scaleX(-1); }
@media (max-width: 63.99rem) { .compliance-band { background: linear-gradient(180deg, #f1f9f1 0%, #e3f2e4 60%, #cfe9d2 100%); } .leaves--band-left { display: none; } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .compliance-band__inner { grid-template-columns: auto 1fr; } .compliance-band__certificate { grid-column: 2; } .compliance-band__statement { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
    .compliance-band__inner { grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 0.8fr); gap: var(--space-6); }
    .compliance-band__certificate { width: 100%; }
    .compliance-band__statement { color: var(--color-white); padding-left: var(--space-4); }
    .compliance-band__certificate figcaption { color: var(--color-white); }
}

.johkasou-band { position: relative; overflow: hidden; background: linear-gradient(180deg, #eaf4fb, #f3faf6); border-top: 4px solid var(--color-leaf); }
.johkasou-band__scene { position: relative; aspect-ratio: 16 / 9; }
.johkasou-band__scene picture { display: contents; }
/* Mobile: the photo fades into the band below it; desktop: it fades in from the text side. */
.johkasou-band__image { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.johkasou-band__inner { position: relative; z-index: 2; padding-block: var(--space-5) var(--space-7); }
.johkasou-band__text h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); line-height: 1.15; }
.johkasou-band__text .prose { color: var(--color-text); max-width: 30rem; margin-bottom: var(--space-5); }
.johkasou-band .button--primary { background: var(--color-navy); }
.johkasou-band .button--primary:hover { background: var(--color-blue); }
@media (min-width: 56rem) {
    .johkasou-band { min-height: clamp(26rem, 34vw, 34rem); display: flex; align-items: center; }
    .johkasou-band__scene { position: absolute; inset: 0 0 0 36%; aspect-ratio: auto; }
    .johkasou-band__image { object-position: 65% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.6) 14%, #000 32%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.6) 14%, #000 32%); }
    .johkasou-band__inner { width: 100%; padding-block: var(--space-8); }
    .johkasou-band__text { max-width: 30rem; }
}

.home-projects { background: linear-gradient(180deg, var(--color-white), #f4faf6); }
@media (min-width: 36rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
/* A single featured project: wide spotlight instead of a lone card. */
.project-spotlight { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow); }
.project-spotlight__media { position: relative; min-height: 16rem; }
.project-spotlight__media > picture { display: contents; }
.project-spotlight__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-spotlight__label { position: absolute; top: var(--space-4); left: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.4rem 0.9rem; border-radius: 999px; color: var(--color-white); font-weight: 700; font-size: var(--text-sm); background: var(--color-green); box-shadow: var(--shadow-sm); }
.project-spotlight__before { position: absolute; right: var(--space-4); bottom: var(--space-4); width: 38%; max-width: 13rem; margin: 0; overflow: hidden; border-radius: var(--radius); border: 4px solid var(--color-white); box-shadow: var(--shadow); }
.project-spotlight__before img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.project-spotlight__before figcaption { position: absolute; top: 0.4rem; left: 0.4rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--color-white); background: #b42318; }
.project-spotlight__body { padding: var(--space-6); }
.project-spotlight__title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin-bottom: var(--space-2); }
.project-spotlight__summary { font-size: var(--text-lg); color: var(--color-text); }
.project-spotlight__points { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2) var(--space-4); }
@media (min-width: 36rem) { .project-spotlight__points { grid-template-columns: 1fr 1fr; } }
.project-spotlight__points li { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; font-size: var(--text-sm); color: var(--color-navy); }
.project-spotlight__points .icon { flex: none; margin-top: 0.15rem; color: var(--color-green); }
@media (min-width: 56rem) { .project-spotlight { grid-template-columns: 1.1fr 1fr; } .project-spotlight__media { min-height: 100%; } .project-spotlight__body { padding: var(--space-7) var(--space-6); } }

.home-clients { background: var(--color-white); padding-block: var(--space-7) var(--space-5); }
.home-clients .client-tile { padding: var(--space-3) var(--space-4); }
.home-clients .client-tile__name { font-size: var(--text-sm); }
.home-clients .section-header h2::after { display: none; }

.cta-scene { position: relative; overflow: hidden; text-align: center; background: #eaf5fb; min-height: clamp(24rem, 36vw, 34rem); display: flex; align-items: flex-start; }
/* Landscape photo as the section background; a white fade over the sky keeps the text readable. */
.cta-scene__landscape { position: absolute; inset: 0; }
.cta-scene__landscape picture { display: contents; }
.cta-scene__image { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.cta-scene__landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0.35) 52%, rgba(255, 255, 255, 0) 68%); }
.cta-scene__inner { position: relative; z-index: 2; max-width: 48rem; padding-block: var(--space-7) var(--space-9); }
.cta-scene__inner h2 { margin-bottom: var(--space-2); }
.cta-scene__text { color: var(--color-text); font-size: var(--text-lg); margin-bottom: var(--space-5); }
.cta-scene .button--green { box-shadow: 0 10px 24px rgba(8, 125, 69, 0.3); }
@media (max-width: 40rem) { .cta-scene__landscape::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.2) 78%, rgba(255, 255, 255, 0) 90%); } .cta-scene__inner { padding-bottom: var(--space-8); } }

/* ---- About Us ------------------------------------------------------------- */
.hero__eyebrow--light { color: #bfe8cf; }
.about-overview { background: var(--color-white); overflow: hidden; }
.about-overview__inner { display: grid; gap: var(--space-7); align-items: center; }
.about-overview__body { font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-5); }
.about-overview__media { position: relative; }
.about-overview__image { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 28px 28px 28px 96px; box-shadow: 0 24px 48px rgba(18, 61, 114, 0.18); }
.about-overview__media picture { display: block; position: relative; z-index: 1; }
.about-overview__accent { position: absolute; z-index: 0; inset: 12% -4% -6% 10%; border-radius: 28px 28px 28px 96px; background: linear-gradient(135deg, var(--color-leaf), var(--color-blue)); opacity: 0.22; }
@media (min-width: 56rem) { .about-overview__inner { grid-template-columns: 1fr 1fr; } }

.about-divisions { background: linear-gradient(180deg, #f4faf6, var(--color-white)); }
.about-divisions .section-header h2::after, .about-values .section-header h2::after, .about-work .section-header h2::after { left: 50%; transform: translateX(-50%); }
.about-divisions__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .about-divisions__grid { grid-template-columns: repeat(3, 1fr); } }
.about-division__link { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); min-height: 17rem; color: var(--color-white); text-decoration: none; box-shadow: var(--shadow); isolation: isolate; }
.about-division__link picture { display: contents; }
.about-division__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.about-division__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 30, 50, 0.05) 0%, rgba(7, 30, 50, 0.55) 45%, rgba(7, 30, 50, 0.9) 100%); }
.about-division--environmental .about-division__link::before { background: linear-gradient(180deg, rgba(7, 61, 44, 0.05) 0%, rgba(7, 61, 44, 0.6) 45%, rgba(7, 61, 44, 0.94) 100%); }
.about-division--engineering .about-division__link::before { background: linear-gradient(180deg, rgba(18, 61, 114, 0.05) 0%, rgba(18, 61, 114, 0.6) 45%, rgba(18, 61, 114, 0.94) 100%); }
.about-division--training_advisory .about-division__link::before { background: linear-gradient(180deg, rgba(90, 40, 8, 0.05) 0%, rgba(110, 45, 6, 0.62) 45%, rgba(110, 45, 6, 0.94) 100%); }
.about-division__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.about-division__name { font-size: 1.2rem; font-weight: 700; }
.about-division__summary { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.9); }
.about-division__more { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; font-size: var(--text-sm); }
.about-division__link:hover .about-division__image, .about-division__link:focus-visible .about-division__image { transform: scale(1.06); }
.about-division__link:hover .about-division__more .icon, .about-division__link:focus-visible .about-division__more .icon { transform: translateX(3px); }
.about-division__link:focus-visible { outline-color: var(--color-navy); }

.about-purpose { background: var(--color-white); }
.about-purpose__grid { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .about-purpose__grid { grid-template-columns: 1fr 1fr; } }
.purpose-card { position: relative; overflow: hidden; padding: var(--space-7) var(--space-6) var(--space-6); border-radius: var(--radius-lg); color: var(--color-white); box-shadow: var(--shadow); }
.purpose-card--green { background: radial-gradient(circle at 90% 10%, rgba(53, 179, 107, 0.45), transparent 50%), linear-gradient(135deg, var(--color-green), var(--color-green-deep)); }
.purpose-card--navy { background: radial-gradient(circle at 90% 10%, rgba(43, 155, 214, 0.45), transparent 50%), linear-gradient(135deg, var(--color-blue), var(--color-navy)); }
.purpose-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, 0.08); }
.purpose-card__icon { display: inline-flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); margin-bottom: var(--space-4); }
.purpose-card__icon .icon { width: 1.75rem; height: 1.75rem; }
.purpose-card__title { color: var(--color-white); font-size: 1.5rem; margin-bottom: var(--space-3); }
.purpose-card__text { font-size: var(--text-lg); line-height: 1.6; color: rgba(255, 255, 255, 0.95); }

.about-values { background: linear-gradient(180deg, var(--color-white), #f4faf6); }
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .value-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.value-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); text-align: center; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; }
.value-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--color-leaf); }
.value-tile__icon { display: inline-flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: linear-gradient(135deg, var(--color-leaf), var(--color-green)); box-shadow: 0 10px 22px rgba(8, 125, 69, 0.28); }
.value-tile:nth-child(2) .value-tile__icon { background: linear-gradient(135deg, #2b9bd6, var(--color-blue)); box-shadow: 0 10px 22px rgba(23, 102, 173, 0.28); }
.value-tile:nth-child(3) .value-tile__icon { background: linear-gradient(135deg, #2bb3a8, var(--color-teal)); box-shadow: 0 10px 22px rgba(10, 127, 128, 0.28); }
.value-tile:nth-child(4) .value-tile__icon { background: linear-gradient(135deg, #e08a2c, var(--color-amber)); box-shadow: 0 10px 22px rgba(180, 83, 9, 0.28); }
.value-tile__icon .icon { width: 1.9rem; height: 1.9rem; }
.value-tile__name { font-weight: 700; color: var(--color-navy); font-size: 1.1rem; }

.about-expertise { position: relative; overflow: hidden; color: var(--color-white); background: radial-gradient(circle at 85% 15%, rgba(53, 179, 107, 0.3), transparent 45%), linear-gradient(120deg, var(--color-navy), #0e4a63 55%, var(--color-green-deep)); }
.about-expertise h2 { color: var(--color-white); }
.about-expertise__inner { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 56rem) { .about-expertise__inner { grid-template-columns: 1fr 1.2fr; gap: var(--space-8); } }
.about-expertise :focus-visible { outline-color: var(--color-white); }
.expert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.expert-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); transition: background 300ms ease; }
.expert-list li:hover { background: rgba(255, 255, 255, 0.14); }
.expert-list__icon { flex: none; display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-leaf); color: var(--color-white); }
.expert-list__icon .icon { width: 1rem; height: 1rem; }

.about-work { background: var(--color-white); }
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-card { margin: 0; }
.work-card__link { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; background: #1f2a33; box-shadow: var(--shadow); }
.work-card__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.work-card__link:hover img, .work-card__link:focus-visible img { transform: scale(1.05); }
.work-card__zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-navy); box-shadow: var(--shadow-sm); transform: rotate(-45deg); }
.work-card figcaption { margin-top: var(--space-3); font-weight: 600; color: var(--color-navy); }

.cta-scene--compact { min-height: clamp(20rem, 30vw, 28rem); }

/* ---- Services overview & division pages ------------------------------------ */
.svc-divisions { background: linear-gradient(180deg, var(--color-white), #f4faf6); }
.svc-divisions .section-header h2::after, .svc-industries .section-header h2::after, .svc-others .section-header h2::after { left: 50%; transform: translateX(-50%); }
.svc-divisions__list { display: grid; gap: var(--space-8); }
.svc-panel { display: grid; gap: var(--space-6); align-items: center; }
.svc-panel__media { position: relative; }
.svc-panel__media picture { display: block; }
.svc-panel__image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px 28px 96px 28px; box-shadow: 0 24px 48px rgba(18, 61, 114, 0.18); }
.svc-panel--reverse .svc-panel__image { border-radius: 28px 28px 28px 96px; }
.svc-panel__badge { position: absolute; top: -18px; left: 24px; display: inline-flex; width: 4.25rem; height: 4.25rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: var(--color-green); border: 4px solid var(--color-white); box-shadow: var(--shadow); }
.svc-panel--engineering .svc-panel__badge { background: var(--color-blue); }
.svc-panel--training_advisory .svc-panel__badge { background: var(--color-amber); }
.svc-panel__badge .icon { width: 1.9rem; height: 1.9rem; }
.svc-panel__number { margin: 0; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--color-green); opacity: 0.18; }
.svc-panel--engineering .svc-panel__number { color: var(--color-blue); }
.svc-panel--training_advisory .svc-panel__number { color: var(--color-amber); }
.svc-panel__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: var(--space-1) 0 var(--space-3); }
.svc-panel__summary { font-size: var(--text-lg); color: var(--color-text); }
.svc-panel__services { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: 0 var(--space-4); }
@media (min-width: 36rem) { .svc-panel__services { grid-template-columns: 1fr 1fr; } }
.svc-panel__services a { display: flex; gap: var(--space-2); align-items: flex-start; min-height: 2.75rem; padding-block: 0.55rem; color: var(--color-navy); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.svc-panel__services a:hover { color: var(--color-blue); }
.svc-panel__services .icon { flex: none; margin-top: 0.15rem; color: var(--color-green); }
.svc-panel--engineering .svc-panel__services .icon { color: var(--color-blue); }
.svc-panel--training_advisory .svc-panel__services .icon { color: var(--color-amber); }
@media (min-width: 56rem) {
    .svc-panel { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .svc-panel--reverse .svc-panel__media { order: 2; }
}

.svc-industries { background: var(--color-white); }
.industry-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 36rem) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }
.industry-tile { position: relative; padding: var(--space-6) var(--space-5) var(--space-5); background: linear-gradient(180deg, var(--color-white), #f4faf6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease; }
.industry-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--color-leaf); }
.industry-tile__icon { display: inline-flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 16px; color: var(--color-white); background: linear-gradient(135deg, var(--color-blue), var(--color-navy)); margin-bottom: var(--space-4); box-shadow: 0 10px 22px rgba(18, 61, 114, 0.25); }
.industry-tile:nth-child(2) .industry-tile__icon { background: linear-gradient(135deg, var(--color-leaf), var(--color-green)); }
.industry-tile:nth-child(3) .industry-tile__icon { background: linear-gradient(135deg, #e08a2c, var(--color-amber)); }
.industry-tile:nth-child(4) .industry-tile__icon { background: linear-gradient(135deg, #2bb3a8, var(--color-teal)); }
.industry-tile__icon .icon { width: 1.7rem; height: 1.7rem; }
.industry-tile__title { font-size: 1.05rem; margin-bottom: var(--space-2); }
.industry-tile__text { color: var(--color-muted); font-size: var(--text-sm); margin: 0; }

.svc-intro { background: var(--color-white); }
.svc-intro__inner { display: grid; gap: var(--space-6); align-items: start; }
.svc-intro__body { font-size: var(--text-lg); color: var(--color-text); }
@media (min-width: 56rem) { .svc-intro__inner { grid-template-columns: 1.3fr 1fr; gap: var(--space-8); } }
.svc-jump { padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-green-soft), var(--color-white)); border: 1px solid var(--color-border); border-top: 4px solid var(--color-green); box-shadow: var(--shadow-sm); }
.svc-intro--blue .svc-jump { background: linear-gradient(160deg, var(--color-blue-soft), var(--color-white)); border-top-color: var(--color-blue); }
.svc-intro--amber .svc-jump { background: linear-gradient(160deg, var(--color-amber-soft), var(--color-white)); border-top-color: var(--color-amber); }
.svc-jump__title { font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-2); }
.svc-jump ul { list-style: none; margin: 0; padding: 0; }
.svc-jump a { display: flex; gap: var(--space-3); align-items: center; min-height: 2.75rem; color: var(--color-navy); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border-bottom: 1px solid rgba(18, 61, 114, 0.08); }
.svc-jump li:last-child a { border-bottom: 0; }
.svc-jump a:hover { color: var(--color-blue); }
.svc-jump .icon { flex: none; width: 1.2rem; height: 1.2rem; color: var(--color-green); }
.svc-intro--blue .svc-jump .icon { color: var(--color-blue); }
.svc-intro--amber .svc-jump .icon { color: var(--color-amber); }

.svc-list { background: linear-gradient(180deg, #f4faf6, var(--color-white)); padding-top: var(--space-6); }
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .svc-grid { grid-template-columns: 1fr 1fr; } }
.svc-card {
    position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: calc(var(--header-height) + var(--space-5));
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease, opacity 600ms ease;
}
.svc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tone); transform: scaleX(0.22); transform-origin: left; transition: transform 500ms ease; }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 0% 0%, var(--tone-soft), transparent 60%); opacity: 0.6; transition: opacity 400ms ease; }
.svc-card:hover, .svc-card:focus-within, .svc-card.is-active { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(18, 61, 114, 0.12); border-color: var(--tone); }
.svc-card:hover::before, .svc-card:focus-within::before, .svc-card.is-active::before { transform: scaleX(1); }
.svc-card:hover::after, .svc-card:focus-within::after, .svc-card.is-active::after { opacity: 1; }
.svc-card:target { border-color: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft), var(--shadow); }
.svc-card__num { position: absolute; top: 0.7rem; right: 1rem; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--tone); opacity: 0.14; }
.svc-card__icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 18px; color: var(--color-white); background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 72%, #ffffff), var(--tone)); box-shadow: 0 10px 22px var(--tone-shadow); }
.svc-card__icon .icon { width: 1.9rem; height: 1.9rem; }
.svc-card__icon .env-icon { width: 62%; height: 62%; overflow: visible; }
.svc-card__icon::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--tone); border-radius: 22px; opacity: 0; }
.svc-card:hover .svc-card__icon::after, .svc-card:focus-within .svc-card__icon::after, .svc-card.is-active .svc-card__icon::after { animation: env-ring 1.6s ease-out infinite; }
.svc-card__body { min-width: 0; }
.svc-card__text li { overflow-wrap: anywhere; }
@media (max-width: 30rem) { .svc-card { grid-template-columns: 1fr; } }
.svc-card__title { font-size: 1.2rem; margin: 0.3rem 2.5rem var(--space-3) 0; }
.svc-card__text { color: var(--color-text); }
.svc-card__text ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2) var(--space-5); }
.svc-card__text li { position: relative; padding-left: 1.4rem; }
.svc-card__text li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px var(--tone-soft); }
@media (min-width: 36rem) { .svc-card__text ul:has(li:nth-child(6)) { grid-template-columns: 1fr 1fr; } }
.svc-card--feature { grid-column: 1 / -1; color: var(--color-white); border-color: transparent; background: radial-gradient(circle at 90% 10%, rgba(53, 179, 107, 0.35), transparent 50%), linear-gradient(120deg, var(--color-navy), #0e4a63 55%, var(--color-green-deep)); }
.svc-card--feature::after { display: none; }
.svc-card--feature .svc-card__title, .svc-card--feature .svc-card__text { color: var(--color-white); }
.svc-card--feature .svc-card__num { color: var(--color-white); opacity: 0.2; }
.svc-card--feature .svc-card__icon { background: var(--color-white); color: var(--color-green); }
.svc-card--feature :focus-visible { outline-color: var(--color-white); }
@media (min-width: 48rem) { .svc-card--feature { padding: var(--space-7) var(--space-6); } .svc-card--feature .svc-card__text { font-size: var(--text-lg); max-width: 52rem; } }
.svc-grid.reveal-pending .svc-card { opacity: 0; transform: translateY(24px); }
.svc-grid.is-revealing .svc-card:nth-child(2) { transition-delay: 90ms; }
.svc-grid.is-revealing .svc-card:nth-child(3) { transition-delay: 180ms; }
.svc-grid.is-revealing .svc-card:nth-child(4) { transition-delay: 270ms; }

/* Services with a photograph: alternating image-and-text rows. */
.svc-rows { display: grid; gap: var(--space-7); }
.svc-row { scroll-margin-top: calc(var(--header-height) + var(--space-5)); display: grid; gap: var(--space-5); align-items: center; }
.svc-row__media { position: relative; }
.svc-row__media picture { display: block; overflow: hidden; border-radius: 28px 28px 96px 28px; box-shadow: 0 24px 48px rgba(18, 61, 114, 0.18); }
.svc-row--reverse .svc-row__media picture { border-radius: 28px 28px 28px 96px; }
.svc-row__image { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; transition: transform 700ms ease; }
.svc-row:hover .svc-row__image, .svc-row:focus-within .svc-row__image { transform: scale(1.04); }
.svc-row__media::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -10px; height: 6px; border-radius: 3px; background: var(--tone); opacity: 0.85; }
.svc-row__num { position: absolute; top: var(--space-4); left: var(--space-4); display: inline-flex; min-width: 3rem; height: 3rem; align-items: center; justify-content: center; padding: 0 0.6rem; border-radius: 999px; font-weight: 800; color: var(--color-white); background: var(--tone); box-shadow: 0 8px 18px var(--tone-shadow); }
.svc-row__body { position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--tone-soft), var(--color-white) 70%); border: 1px solid var(--color-border); border-top: 4px solid var(--tone); box-shadow: var(--shadow-sm); }
.svc-row__body .svc-card__icon { margin-bottom: var(--space-4); }
.svc-row:hover .svc-card__icon::after, .svc-row:focus-within .svc-card__icon::after, .svc-row.is-active .svc-card__icon::after { animation: env-ring 1.6s ease-out infinite; }
.svc-row__title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); margin-bottom: var(--space-3); }
.svc-row__body .svc-card__text { font-size: var(--text-lg); }
.svc-row__link { color: var(--tone); }
@media (min-width: 56rem) {
    .svc-row { grid-template-columns: 1.1fr 1fr; gap: 0; }
    .svc-row__body { margin-left: -3rem; z-index: 1; }
    .svc-row--reverse .svc-row__media { order: 2; }
    .svc-row--reverse .svc-row__num { left: auto; right: var(--space-4); }
    .svc-row--reverse .svc-row__body { margin-left: 0; margin-right: -3rem; }
}
.svc-grid--after { margin-top: var(--space-8); }

.svc-others { background: var(--color-white); }
@media (min-width: 48rem) { .about-divisions__grid--two { grid-template-columns: repeat(2, 1fr); } }

/* ---- Products --------------------------------------------------------------- */
.prod-intro { background: var(--color-white); padding-bottom: var(--space-5); }
.prod-intro__inner { max-width: 48rem; text-align: center; }
.prod-intro h2::after { display: none; }
.prod-feature { background: linear-gradient(180deg, var(--color-white), #f4faf6); }
.prod-feature__inner { display: grid; gap: var(--space-6); align-items: center; }
.prod-feature__media { position: relative; }
.prod-feature__media picture { display: block; overflow: hidden; border-radius: 28px 28px 96px 28px; box-shadow: 0 24px 48px rgba(18, 61, 114, 0.2); }
.prod-feature__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 65% 50%; }
.prod-feature__tag { position: absolute; left: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 1rem; border-radius: 999px; background: var(--color-white); color: var(--color-navy); font-weight: 700; box-shadow: var(--shadow); }
.prod-feature__tag .icon { color: var(--color-blue); }
.prod-feature__body h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.prod-feature__text { font-size: var(--text-lg); color: var(--color-text); margin-bottom: var(--space-4); }
.prod-points { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 36rem) { .prod-points { grid-template-columns: 1fr 1fr; } }
.prod-points li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); font-weight: 600; color: var(--color-navy); font-size: var(--text-sm); }
.prod-points__icon { flex: none; display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-green); color: var(--color-white); }
.prod-points__icon .icon { width: 0.95rem; height: 0.95rem; }
@media (min-width: 56rem) { .prod-feature__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }
.prod-equipment { background: var(--color-white); }
.prod-equipment .section-header h2::after, .prod-support .section-header h2::after { left: 50%; transform: translateX(-50%); }
@media (min-width: 64rem) { .prod-equipment__grid { grid-template-columns: repeat(3, 1fr); } }
.prod-support { background: linear-gradient(180deg, #f4faf6, var(--color-white)); }
.prod-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 36rem) { .prod-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .prod-steps { grid-template-columns: repeat(4, 1fr); } }
.prod-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-5); text-align: center; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); counter-increment: step; }
.prod-step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0.7rem; right: 1rem; font-size: 1.6rem; font-weight: 800; color: var(--color-blue); opacity: 0.15; }
.prod-step__icon { display: inline-flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: linear-gradient(135deg, #2b9bd6, var(--color-blue)); box-shadow: 0 10px 22px rgba(23, 102, 173, 0.28); margin-bottom: var(--space-2); }
.prod-step:nth-child(even) .prod-step__icon { background: linear-gradient(135deg, var(--color-leaf), var(--color-green)); box-shadow: 0 10px 22px rgba(8, 125, 69, 0.28); }
.prod-step__icon .icon { width: 1.6rem; height: 1.6rem; }
.prod-step__title { font-weight: 700; color: var(--color-navy); }
.prod-step__text { color: var(--color-muted); font-size: var(--text-sm); }

/* ---- Projects --------------------------------------------------------------- */
.proj-areas { background: linear-gradient(180deg, #f4faf6, var(--color-white)); }
.proj-areas .section-header h2::after, .proj-clients .section-header h2::after, #case-studies::after { left: 50%; transform: translateX(-50%); }
.proj-area-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 36rem) { .proj-area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .proj-area-grid { grid-template-columns: repeat(4, 1fr); } }
.proj-area__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease; }
.proj-area__link:hover, .proj-area__link:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(18, 61, 114, 0.14); border-color: var(--tone); }
.proj-area__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.proj-area__media picture { display: contents; }
.proj-area__image { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.proj-area__link:hover .proj-area__image, .proj-area__link:focus-visible .proj-area__image { transform: scale(1.06); }
.proj-area__pattern { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.9); background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 22px), linear-gradient(135deg, #2bb3a8, var(--color-teal) 55%, var(--color-navy)); }
.proj-area__pattern .icon { width: 4rem; height: 4rem; }
.proj-area__num { position: absolute; top: var(--space-3); left: var(--space-3); display: inline-flex; min-width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 999px; color: var(--color-white); font-weight: 800; background: var(--tone); box-shadow: 0 8px 18px var(--tone-shadow); }
.proj-area__body { position: relative; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-6) var(--space-5) var(--space-5); }
.proj-area__icon { position: absolute; top: -1.6rem; right: var(--space-5); display: inline-flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: var(--tone); border: 3px solid var(--color-white); box-shadow: var(--shadow-sm); }
.proj-area__title { font-weight: 700; font-size: 1.05rem; color: var(--color-navy); line-height: 1.3; }
.proj-area__text { color: var(--color-muted); font-size: var(--text-sm); }
.proj-area__more { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; font-size: var(--text-sm); color: var(--tone); }
.proj-profile { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--color-navy), #0e4a63 55%, var(--color-green-deep)); color: var(--color-white); }
.proj-profile__title { font-weight: 700; margin-bottom: var(--space-3); }
.proj-profile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 36rem) { .proj-profile__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .proj-profile__list { grid-template-columns: repeat(5, 1fr); } }
.proj-profile__list li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius); background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); font-weight: 600; font-size: var(--text-sm); }
.proj-profile__icon { flex: none; display: inline-flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-leaf); }
.proj-profile__icon .icon { width: 1.1rem; height: 1.1rem; }
.proj-clients { background: linear-gradient(180deg, var(--color-white), #f4faf6); }
.proj-clients__groups { display: grid; gap: var(--space-7); }
.proj-clients__sector { display: flex; align-items: center; gap: var(--space-3); font-size: 1.15rem; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-border); }
.proj-clients__sector .icon { width: 2.4rem; height: 2.4rem; padding: 0.5rem; border-radius: 50%; color: var(--color-white); background: var(--color-blue); }
.proj-clients__group:nth-child(2) .proj-clients__sector .icon { background: var(--color-green); }

/* Case studies */
.case-list { display: grid; gap: var(--space-7); }
.case-study { scroll-margin-top: calc(var(--header-height) + var(--space-5)); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--color-border); border-top: 5px solid var(--color-blue); box-shadow: var(--shadow); }
.case-study__tag { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--color-blue-soft); color: var(--color-navy); font-size: 0.8125rem; font-weight: 700; }
.case-study__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: var(--space-2); }
.case-study__facts { display: flex; align-items: center; gap: var(--space-2); color: var(--color-green); font-weight: 600; margin-bottom: var(--space-2); }
.case-study__summary { font-size: var(--text-lg); color: var(--color-text); max-width: 52rem; }
.case-study__visuals { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 48rem) { .case-study__visuals { grid-template-columns: 1fr 1fr; } }
.case-study__figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.case-study__figure picture { display: block; }
.case-study__figure img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.case-study__figure figcaption { position: absolute; top: var(--space-3); left: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.4rem 0.9rem; border-radius: 999px; color: var(--color-white); font-weight: 700; font-size: var(--text-sm); background: #b42318; box-shadow: var(--shadow-sm); }
.case-study__figure--after figcaption { background: var(--color-green); }
.case-study__groups { display: grid; gap: var(--space-5); }
@media (min-width: 56rem) { .case-study__groups { grid-template-columns: 1fr 1fr; } }
.case-group { padding: var(--space-5); border-radius: var(--radius); background: #fdf2f1; border: 1px solid #f3d0cc; }
.case-group--solution { background: var(--color-green-soft); border-color: #c6e4cc; }
.case-group__title { display: flex; align-items: center; gap: var(--space-2); font-size: 1.05rem; margin: 0 0 var(--space-4); color: #9f1d13; }
.case-group--solution .case-group__title { color: var(--color-green-deep); }
.case-group__title .icon { width: 1.6rem; height: 1.6rem; padding: 0.3rem; border-radius: 50%; color: var(--color-white); background: #b42318; }
.case-group--solution .case-group__title .icon { background: var(--color-green); }
.case-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.case-group__list li { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-white); box-shadow: var(--shadow-sm); }
.case-group__list strong { color: var(--color-navy); }
.case-group__list span { color: var(--color-muted); font-size: var(--text-sm); }
.case-study__sheet { margin: var(--space-5) 0 0; }

/* ---- Gallery ---------------------------------------------------------------- */
.gallery-section { background: linear-gradient(180deg, #f4faf6, var(--color-white)); }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.gallery-filters[hidden] { display: none; }
.gallery-filter { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0.5rem 1rem; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-navy); background: var(--color-white); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.gallery-filter:hover { border-color: var(--color-blue); }
.gallery-filter[aria-pressed="true"] { color: var(--color-white); background: var(--color-blue); border-color: var(--color-blue); }
.gallery-filter__count { display: inline-flex; min-width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; padding: 0 0.35rem; border-radius: 999px; font-size: 0.75rem; background: var(--color-blue-soft); color: var(--color-navy); }
.gallery-filter[aria-pressed="true"] .gallery-filter__count { background: rgba(255, 255, 255, 0.2); color: var(--color-white); }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 36rem) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-tile[hidden] { display: none; }
.gallery-tile__link { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: #1f2a33; box-shadow: var(--shadow-sm); color: var(--color-white); text-decoration: none; }
.gallery-tile__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.gallery-tile__overlay { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 0.2rem; padding: var(--space-6) var(--space-4) var(--space-4); background: linear-gradient(180deg, rgba(7, 30, 50, 0), rgba(7, 30, 50, 0.88)); }
.gallery-tile__category { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-sky); }
.gallery-tile__caption { font-weight: 600; font-size: var(--text-sm); line-height: 1.35; }
.gallery-tile__zoom { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-navy); transform: rotate(-45deg) scale(0.85); opacity: 0; transition: opacity 300ms ease, transform 300ms ease; }
.gallery-tile__link:hover img, .gallery-tile__link:focus-visible img { transform: scale(1.06); }
.gallery-tile__link:hover .gallery-tile__zoom, .gallery-tile__link:focus-visible .gallery-tile__zoom { opacity: 1; transform: rotate(-45deg) scale(1); }
.gallery-tile__link:focus-visible { outline-offset: 4px; }
.lightbox { width: min(96vw, 72rem); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: #0b1a24; color: var(--color-white); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lightbox::backdrop { background: rgba(5, 15, 25, 0.82); }
.lightbox__inner { position: relative; }
.lightbox__figure { margin: 0; }
.lightbox__image { display: block; width: 100%; max-height: 80vh; object-fit: contain; background: #0b1a24; }
.lightbox__image[hidden] { display: none; }
.lightbox__video { display: block; width: min(100%, calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; margin-inline: auto; border: 0; background: #000; }
.gallery-tile--video img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-tile__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gallery-tile__play .icon { width: 4rem; height: 4rem; color: var(--color-white); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); transition: transform 300ms ease; }
.gallery-tile__link:hover .gallery-tile__play .icon, .gallery-tile__link:focus-visible .gallery-tile__play .icon { transform: scale(1.1); }
.lightbox__caption { padding: var(--space-3) var(--space-5); font-weight: 600; }
.lightbox__close, .lightbox__nav { position: absolute; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-navy); cursor: pointer; box-shadow: var(--shadow); }
.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__nav { top: 45%; }
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--prev .icon { transform: rotate(180deg); }
.lightbox__nav--next { right: var(--space-3); }
.lightbox :focus-visible { outline-color: var(--color-white); }
.gallery-planned { background: var(--color-white); }
.gallery-planned .section-header h2::after { left: 50%; transform: translateX(-50%); }
.gallery-planned__list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--space-4); max-width: 40rem; }
.gallery-planned__item { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px dashed #b9c9c4; background: linear-gradient(135deg, var(--color-white), #f0f7f6); }
.gallery-planned__item strong { display: block; color: var(--color-navy); }
.gallery-planned__item span span { color: var(--color-muted); font-size: var(--text-sm); }
.gallery-planned__icon { flex: none; display: inline-flex; width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: linear-gradient(135deg, #2bb3a8, var(--color-teal)); }
.gallery-planned__icon .icon { width: 1.5rem; height: 1.5rem; }

/* ---- Contact ---------------------------------------------------------------- */
.contact-quick { background: var(--color-white); padding-bottom: var(--space-5); }
.contact-quick__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .contact-quick__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
.contact-quick__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--tone-soft), var(--color-white) 70%); border: 1px solid var(--color-border); border-top: 4px solid var(--tone); box-shadow: var(--shadow-sm); transition: transform 300ms ease, box-shadow 300ms ease; }
.contact-quick__item:hover, .contact-quick__item:focus-within { transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-quick__icon { display: inline-flex; width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: var(--tone); box-shadow: 0 10px 22px var(--tone-shadow); margin-bottom: var(--space-3); }
.contact-quick__icon .icon { width: 1.5rem; height: 1.5rem; }
.contact-quick__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.contact-quick__value { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.15rem; font-weight: 700; color: var(--color-navy); text-decoration: none; overflow-wrap: anywhere; }
.contact-quick__value::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.contact-quick__value:hover { color: var(--tone); }
.contact-quick__hint { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 80rem) {
    .contact-quick__grid { grid-template-columns: repeat(4, 1fr); }
    .contact-quick__item { padding-inline: var(--space-4); }
    .contact-quick__value { font-size: 1rem; }
}
.contact-main { background: linear-gradient(180deg, var(--color-white), #f4faf6); padding-top: var(--space-5); }
.contact-office { display: flex; gap: var(--space-4); align-items: flex-start; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.contact-office address { font-style: normal; }
.contact-office__name { font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-1); }
.contact-office__icon { flex: none; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 12px; color: var(--color-white); background: var(--color-green); }
.contact-office__icon--alt { background: var(--color-blue); }
.contact-office p:last-child { margin-bottom: 0; }
.contact-help { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.contact-help__title { font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-2); }
.contact-help ul { list-style: none; margin: 0; padding: 0; }
.contact-help a { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; color: var(--color-navy); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.contact-help a:hover { color: var(--color-blue); }
.contact-help .icon { color: var(--color-green); }
.contact-closed { padding: var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-blue-soft), var(--color-green-soft)); border: 1px solid var(--color-border); }
.contact-closed__icon { display: inline-flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: var(--color-blue); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.contact-closed__icon .icon { width: 1.6rem; height: 1.6rem; }
.contact-closed .button-row { margin-bottom: 0; }

/* ---- Footer --------------------------------------------------------------- */
/* Footer in the logo's navy (same as the header), so the logo sits on its own background colour. */
.site-footer { position: relative; overflow: hidden; background: var(--color-header); background-image: radial-gradient(ellipse 70% 120% at 15% 0%, var(--color-header-glow), transparent 65%); border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--color-sky), var(--color-flame) 50%, var(--color-leaf)) 1; color: var(--color-nav-text); font-size: var(--text-sm); }
.site-footer a { color: var(--color-white); text-decoration: none; }
.site-footer a:hover { color: var(--color-sky); text-decoration: underline; }
.site-footer__grid { position: relative; z-index: 1; display: grid; gap: var(--space-6); padding-block: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 1.5fr 0.8fr 1.1fr 1.2fr; } }
.footer-logo { display: inline-block; }
.footer-logo img { height: 5.5rem; width: auto; }
.site-footer__about { margin-top: var(--space-4); max-width: 22rem; color: var(--color-nav-text); }
.site-footer__tagline { margin-top: var(--space-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; color: #9fdcb8; }
.social { margin-top: var(--space-5); }
.social__label { margin: 0 0 var(--space-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sky); }
.site-footer .social__list { display: flex; gap: var(--space-3); }
.site-footer .social__link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; min-height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--color-white); transition: background var(--transition), transform var(--transition), border-color var(--transition); }
.site-footer .social__link .icon { width: 1.3rem; height: 1.3rem; }
.site-footer .social__link--facebook .icon { width: 1.6rem; height: 1.6rem; }
.site-footer .social__link:hover { transform: translateY(-2px); color: var(--color-white); text-decoration: none; }
.site-footer .social__link--facebook:hover { background: #1877f2; border-color: #1877f2; }
.site-footer .social__link--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.site-footer__heading { position: relative; color: var(--color-white); font-size: 1rem; letter-spacing: 0; margin-bottom: var(--space-4); padding-bottom: var(--space-2); }
.site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 3px; border-radius: 2px; background: var(--color-sky); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.site-footer__contact .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; color: var(--color-sky); }
.site-footer__leaves { position: absolute; right: -30px; bottom: -20px; width: 200px; opacity: 0.18; pointer-events: none; transform: scaleX(-1); }
.site-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-block: var(--space-4); }
.site-footer__bottom p { margin: 0; }
.site-footer__credit { white-space: nowrap; }
.site-footer__credit a { display: inline-block; padding-block: 0.6rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---- Floating WhatsApp & call buttons (every page) ----------------------------- */
.float-contact { position: fixed; z-index: 60; right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.float-contact__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; color: var(--color-white); text-decoration: none; box-shadow: 0 10px 24px rgba(7, 30, 50, 0.3); transition: width 300ms ease, padding 300ms ease, transform 200ms ease; overflow: hidden; }
.float-contact__btn--whatsapp { background: #1a8a4b; }
.float-contact__btn--call { background: var(--color-blue); }
.float-contact__btn:hover, .float-contact__btn:focus-visible { color: var(--color-white); transform: translateY(-2px); }
.float-contact__icon { flex: none; width: 1.6rem; height: 1.6rem; }
/* The label is the accessible name (read by screen readers); it also slides into view on hover or keyboard focus. */
.float-contact__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.float-contact__btn--whatsapp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #1a8a4b; animation: float-pulse 2.4s ease-out infinite; }
@keyframes float-pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (hover: hover) and (min-width: 48rem) {
    .float-contact__btn:hover, .float-contact__btn:focus-visible { width: auto; padding: 0 1.2rem 0 1rem; gap: var(--space-2); }
    .float-contact__btn:hover .float-contact__label, .float-contact__btn:focus-visible .float-contact__label { position: static; width: auto; height: auto; clip: auto; font-weight: 700; font-size: var(--text-sm); }
}
.float-contact :focus-visible { outline-color: var(--color-navy); }
@media (max-width: 47.99rem) { .float-contact__btn { width: 3.1rem; height: 3.1rem; } .site-footer__bottom-inner { padding-bottom: 5rem; } }

/* ---- Inner pages ---------------------------------------------------------- */
.page-header { position: relative; padding-top: var(--space-7); background: linear-gradient(160deg, var(--color-white) 0%, var(--color-blue-soft) 55%, var(--color-green-soft) 100%); }
.page-header .container { padding-bottom: var(--space-8); }
.page-header h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); margin-bottom: var(--space-4); }
.page-header__intro { font-size: var(--text-lg); max-width: 46rem; color: var(--color-text); }
.page-header__intro > :last-child { margin-bottom: 0; }
/* Inner page header with a decorative photo: text on a light fade at the left. */
.page-header--photo { overflow: hidden; background: #f3f9fd; min-height: clamp(18rem, 30vw, 26rem); display: flex; align-items: center; }
.page-header--photo .container { position: relative; z-index: 2; width: 100%; padding-bottom: calc(var(--space-8) + var(--space-3)); }
.page-header__photo { position: absolute; inset: 0; }
.page-header__photo picture { display: contents; }
.page-header__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-header__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243, 249, 253, 0.97) 0%, rgba(243, 249, 253, 0.92) 44%, rgba(243, 249, 253, 0.6) 66%, rgba(243, 249, 253, 0.1) 86%); }
.page-header--photo .page-header__intro { max-width: 38rem; }
.page-header__waves { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(44px, 7vw, 100px); }
@media (max-width: 40rem) { .page-header__photo::after { background: linear-gradient(180deg, rgba(243, 249, 253, 0.92) 0%, rgba(243, 249, 253, 0.85) 60%, rgba(243, 249, 253, 0.6) 100%); } }
.breadcrumb ol { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-muted); }
.breadcrumb a { color: var(--color-blue); display: inline-flex; align-items: center; min-height: 2.75rem; }
.breadcrumb ol { align-items: center; }
.muted { color: var(--color-muted); }
.prose--narrow { max-width: 48rem; }

.overview__inner { display: grid; gap: var(--space-4) var(--space-7); }
.overview__inner h2 { margin: 0; }
.overview__inner .prose { font-size: var(--text-lg); }
@media (min-width: 56rem) { .overview__inner { grid-template-columns: minmax(14rem, 1fr) 2fr; } }

.icon--lg { width: 2rem; height: 2rem; }
.card-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.info-card {
    display: flex; flex-direction: column; padding: var(--space-6); background: var(--color-white);
    border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--color-green); scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.info-card__icon { display: inline-flex; width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-green-soft); color: var(--color-green); margin-bottom: var(--space-4); }
.info-card__title { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.info-card__summary { color: var(--color-navy); font-weight: 600; }
.info-card .prose { color: var(--color-text); }
.info-card .text-link { margin-top: auto; padding-top: var(--space-3); }
:target.info-card { box-shadow: 0 0 0 3px var(--color-green), var(--shadow); }

.prep-panel { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-neutral); border: 1px dashed #b9c9c4; max-width: 48rem; }
.prep-panel__icon { flex: none; display: inline-flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-green); }
.prep-panel__title { font-weight: 700; color: var(--color-navy); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.prep-panel p:last-child { margin-bottom: 0; }
@media (max-width: 30rem) { .prep-panel { flex-direction: column; } }

.empty-state { display: grid; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: linear-gradient(135deg, var(--color-white), var(--color-green-soft)); box-shadow: var(--shadow-sm); }
.empty-state__art { aspect-ratio: 8 / 3; }
.empty-state__art img { width: 100%; height: 100%; object-fit: cover; }
.empty-state__body { padding: var(--space-6); }
.empty-state__title { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 700; color: var(--color-navy); line-height: 1.25; margin-bottom: var(--space-3); }
.empty-state__label { font-weight: 600; color: var(--color-navy); margin-bottom: var(--space-2); }
.empty-state__list { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.empty-state__list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.empty-state__list .icon { color: var(--color-green); margin-top: 0.25em; }
@media (min-width: 56rem) { .empty-state { grid-template-columns: 1fr 1.2fr; align-items: stretch; } .empty-state__art { aspect-ratio: auto; } }

.project-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .project-card--wide { flex-direction: row; } .project-card--wide .project-card__image { width: 40%; aspect-ratio: auto; } }

/* ---- Contact & forms ------------------------------------------------------ */
.contact-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 64rem) { .contact-layout { grid-template-columns: 1fr 1.6fr; } }
.contact-card, .form-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-white); box-shadow: var(--shadow-sm); }
.contact-card { background: linear-gradient(180deg, var(--color-green-soft), var(--color-white) 60%); }
.form-card { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.form-card > .prose, .contact-card > h2, .form-card > h2 { margin-bottom: var(--space-5); }
.contact-card h2, .form-card h2 { font-size: var(--text-h3); }
.contact-list { margin: 0; }
.contact-list dd a { display: inline-flex; align-items: center; min-height: 2.75rem; overflow-wrap: anywhere; }
.contact-list dt { font-weight: 700; color: var(--color-navy); margin-top: var(--space-4); }
.contact-list dt:first-child { margin-top: 0; }
.contact-list dd { margin: var(--space-1) 0 0; }
.contact-list address { font-style: normal; }

.field { margin: 0 0 var(--space-5); }
.field label { display: block; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-1); }
.required { font-weight: 400; color: var(--color-muted); font-size: var(--text-sm); }
.hint { margin: 0 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.error { margin: 0 0 var(--space-2); color: #b42318; font-weight: 700; font-size: var(--text-sm); }
.field input, .field select, .field textarea {
    width: 100%; min-height: 2.9rem; padding: 0.65rem 0.8rem; font: inherit; color: var(--color-text);
    background: var(--color-white); border: 1.5px solid #6b7e86; /* 4.2:1 against white (WCAG 1.4.11) */ border-radius: var(--radius-sm);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--color-navy); }
.field--error input, .field--error select, .field--error textarea { border-color: #b42318; border-width: 2px; }
.form-row { display: grid; gap: 0 var(--space-5); }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
.error-summary { border: 2px solid #b42318; border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); background: #fff5f4; }
.error-summary h2 { font-size: 1.05rem; color: #b42318; margin-bottom: var(--space-2); }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: #b42318; }
.notice { padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--color-blue-soft); border-left: 4px solid var(--color-blue); margin-bottom: var(--space-5); }
.notice p:last-child { margin-bottom: 0; }
.notice--success { background: var(--color-green-soft); border-left-color: var(--color-green); }
.notice--error { background: #fff5f4; border-left-color: #b42318; }
/* Honeypot: off-screen for people, still present for bots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Draft preview -------------------------------------------------------- */
.preview-banner { background: #fff4d6; border-bottom: 2px solid #b7791f; color: #4a3200; padding: var(--space-3) 0; font-size: var(--text-sm); }
.preview-banner a { color: #4a3200; font-weight: 700; }

/* ---- Motion & print ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-logo img, .site-header__inner { transition: none; }
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .button:hover, .service-card:hover, .service-card:focus-within, .division-card:hover, .division-card:focus-within, .division-card:hover .division-card__image, .division-card:focus-within .division-card__image, .compliance-band__certificate a, .value-tile:hover, .contact-quick__item:hover, .contact-quick__item:focus-within, .gallery-tile__link:hover img, .proj-area__link:hover, .proj-area__link:hover .proj-area__image, .about-division__link:hover .about-division__image, .work-card__link:hover img,
    .env-card:hover, .env-card:focus-within, .env-card.is-active { transform: none; }
    .env-card .env-icon path, .env-card .env-card__badge::after { animation: none !important; }
    .env-grid.reveal-pending .env-card, .svc-grid.reveal-pending .svc-card { opacity: 1; transform: none; }
    .float-contact__btn--whatsapp::before { animation: none; display: none; }
    .svc-card:hover, .svc-card:focus-within, .svc-card.is-active, .industry-tile:hover { transform: none; }
    .svc-card .env-icon path, .svc-card__icon::after, .svc-row .env-icon path { animation: none !important; }
    .svc-row:hover .svc-row__image, .svc-row:focus-within .svc-row__image { transform: none; }
}
@media print {
    .site-header, .site-footer, .hero__scene, .hero__waves, .leaves, .nav-toggle, .float-contact { display: none !important; }
    body { color: #000; }
}