/* ==========================================================================
   Al Saad — Homepage section composition
   Layout wiring per section; visuals come from components.css
   ========================================================================== */

/* ---- Site header / nav ---------------------------------------------------- */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 20;
    padding: var(--space-10) var(--gutter) 0;
    transition: transform .35s ease, background .3s ease, padding .3s ease, box-shadow .3s ease;
}
/* Once scrolled past the top, the header becomes a fixed solid bar that hides
   on scroll-down and slides back in on scroll-up (classes toggled in JS). */
.site-header.is-stuck {
    position: fixed;
    background: var(--color-d-brown);
    /*padding-top: var(--space-5);*/
    /*padding-bottom: var(--space-5);*/
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    transform: translateY(-100%);
    padding:10px 0;
}
.site-header.is-stuck.is-visible { transform: translateY(0); }

/* Back-to-top button */
.to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 40;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-cta);
    color: var(--color-white);
    box-shadow: 0 10px 28px rgba(48, 29, 23, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, filter .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { filter: brightness(1.12); }
.to-top:active { transform: scale(.94); }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin-inline: auto;
}
.site-logo img,
.site-logo .custom-logo { width: 200px; height: auto; display: block; }
.site-logo .custom-logo-link { display: inline-block; line-height: 0; }

/* Brand lockup (shield mark + wordmark + tagline) */
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
}
.site-brand__mark { width: 42px; height: 50px; flex: none; }
.site-brand__text { display: flex; flex-direction: column; gap: 3px; }
.site-brand__name {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 1.5rem;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}
.site-brand__tag {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: .7rem;
    letter-spacing: .34em;
    opacity: .85;
    line-height: 1;
}
/* Desktop horizontal navigation (collapses to the hamburger below 1024px) */
.site-nav { display: none; }
.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__list a {
    color: var(--color-white);
    font-size: 1.125rem;
    font-weight: var(--fw-regular);
    line-height: 1;
    opacity: .9;
    padding-block: 6px;
    border-bottom: 1px solid transparent;
    transition: opacity var(--transition), border-color var(--transition);
}
.site-nav__list a:hover { opacity: 1; }
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
    opacity: 1;
    border-bottom-color: currentColor;
}

/* ---- Dropdown submenus (desktop inline nav) ------------------------------ */
.site-nav__list .menu-item-has-children { position: relative; }
.site-nav__list .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
    transition: transform var(--transition);
}
.site-nav__list .menu-item-has-children:hover > a::after { transform: translateY(0) rotate(45deg); }
.site-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    margin-top: 14px;
    padding: var(--space-4) 0;
    list-style: none;
    background: var(--color-d-brown);
    border-radius: var(--radius-sm);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 40;
}
/* Invisible bridge so the hover doesn't drop while crossing the gap. */
.site-nav .sub-menu::before {
    content: "";
    position: absolute;
    top: -14px; left: 0; right: 0; height: 14px;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav .sub-menu a {
    display: block;
    padding: var(--space-3) var(--space-6);
    white-space: nowrap;
    font-size: 1rem;
    opacity: .85;
    border-bottom: 0;
}
.site-nav .sub-menu a:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
/* Third level flies out to the side of its parent item. */
.site-nav .sub-menu .menu-item-has-children > a::after {
    transform: translateY(-1px) rotate(-45deg);
    float: right;
    margin-left: var(--space-4);
}
.site-nav .sub-menu .sub-menu { top: 0; left: 100%; margin: 0 0 0 8px; }
.site-nav .sub-menu .sub-menu::before { top: 0; left: -8px; right: auto; width: 8px; height: 100%; }

.nav-toggle {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    color: var(--color-white);
}
/* Inner pages show the inline nav on desktop; the homepage always keeps the
   hamburger + overlay menu (no .has-inline-nav class on its body). */
@media (min-width: 1025px) {
    body.has-inline-nav .site-nav  { display: flex; }
    body.has-inline-nav .nav-toggle { display: none; }
}
.nav-toggle span {
    width: 24px; height: 3px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor;
}

/* Basic pages (no dark hero): make the header a solid dark bar so the white
   logo/nav are visible instead of white-on-white. */
body.has-solid-header .site-header {
    position: relative;
    background: var(--color-d-brown);
    padding-bottom: var(--space-8);
}

/* Overlay menu opened by the hamburger */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(48,29,23,.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
/* Close (×) button — top-right of the open overlay */
.nav-close {
    position: absolute;
    top: clamp(1.25rem, 4vw, 2rem);
    right: clamp(1.25rem, 4vw, 2rem);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--color-white);
    transition: opacity var(--transition), transform var(--transition);
}
.nav-close:hover { opacity: .7; }
.nav-close:active { transform: scale(.92); }
.nav-close span {
    position: absolute;
    width: 26px;
    height: 2px;
    background: currentColor;
}
.nav-close span:first-child { transform: rotate(45deg); }
.nav-close span:last-child  { transform: rotate(-45deg); }
.nav-overlay__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}
.nav-overlay__list a {
    font-family: var(--font-heading);
    font-weight: var(--fw-light);
    font-size: clamp(1.75rem, 5vw, 3rem);
    color: var(--color-white);
    transition: color var(--transition);
}
.nav-overlay__list a:hover { color: var(--color-l-brown); }
/* Overlay submenus — collapsed by default, expanded by tapping the caret */
.nav-overlay__list li { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
/* Link + caret sit on one row (JS wraps them). */
.nav-overlay__row { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-caret {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--color-white);
    opacity: .75;
    transition: opacity var(--transition);
}
.nav-caret:hover { opacity: 1; }
.nav-caret::before {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--transition);
}
.menu-item-has-children.is-open > .nav-overlay__row .nav-caret::before { transform: translateY(2px) rotate(-135deg); }
.nav-overlay__list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;               /* collapsed until the parent is opened */
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.nav-overlay__list .menu-item-has-children.is-open > .sub-menu { display: flex; }
.nav-overlay__list .sub-menu a { font-size: clamp(1.125rem, 3.5vw, 1.625rem); opacity: .82; }
.nav-overlay__list .sub-menu .sub-menu a { font-size: clamp(1rem, 3vw, 1.25rem); opacity: .65; }
body.nav-open { overflow: hidden; }
body.nav-open .nav-toggle { visibility: hidden; }   /* hide hamburger behind the × */

/* ---- Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--color-white);
    background: #2a2a2a;
    overflow: hidden;
}
/* Background image element (avoids inline CSS; src set in markup). */
.hero__bg,
.cases__bg,
.process__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6));
    z-index: 1;
}
.hero__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-24) var(--gutter);
    text-align: center;
}
.hero__content {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
}
.hero__title {
    font-size: var(--fs-h1);
    line-height: 1;
}
.hero__sub {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    max-width: 540px;
    margin-inline: auto;
}
.hero__tags { position: relative; z-index: 2; }

/* Mobile: ground the content near the bottom (over the darker overlay) and
   strengthen legibility instead of floating it over the busy mid-image. */
@media (max-width: 700px) {
    .hero__overlay { background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.35) 45%, rgba(0,0,0,.78)); }
    .hero__inner {
        align-items: flex-end;      /* bottom */
        justify-content: flex-start; /* left */
        text-align: left;
        padding: var(--space-16) var(--gutter) var(--space-14);
    }
    .hero__content { align-items: flex-start; width: 100%; max-width: 100%; gap: var(--space-5); }
    .hero__title { font-size: clamp(1.875rem, 7.5vw, 2.5rem); }
    .hero__sub { font-size: 1rem; max-width: 90%; margin-inline: 0; }
}

/* ---- Who We Are ----------------------------------------------------------- */
/* Decorative box-grid pattern image — pinned to the section's TOP edge,
   aligned to the content right edge (matches the design). */
.about-boxes {
    position: absolute;
    top: 0;
    right: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    width: clamp(320px, 34vw, 519px);
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 900px) { .about-boxes { display: none; } }

.about__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: clamp(4rem, 11vw, 9rem);
    position: relative;   /* keep heading above the pattern */
    z-index: 1;
}
.about__title { font-size: var(--fs-h2); color: var(--color-neutral-950); }
.about__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    margin-top: var(--space-14);
}
.about__lead { font-size: var(--fs-h2); color: var(--color-neutral-950); font-weight: var(--fw-light); }
.about__body { font-size: var(--fs-body); color: var(--color-neutral-950); font-weight: var(--fw-light); }
@media (max-width: 900px) { .about__cols { grid-template-columns: 1fr; } }

/* ---- Operational Excellence — pinned diagonal wheel carousel ------------- */
.ops-wheel { position: relative; background: var(--bg-dark); color: var(--text-on-dark); }
.ops-wheel__pin {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 5rem) var(--gutter);
}
@media (min-width: 901px) { .ops-wheel__pin { position: sticky; top: 0; } }

.ops-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Faint ring that rotates with scroll progress. */
/* Scroll-progress cue — the ring draws to a full white circle across the section. */
.ops-cue {
    position: absolute;
    left: var(--gutter);
    bottom: clamp(2rem, 5vw, 3.5rem);
    width: clamp(88px, 8vw, 116px);
    height: clamp(88px, 8vw, 116px);
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.ops-cue__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ops-cue__track { stroke: rgba(255, 255, 255, .16); }
.ops-cue__prog {
    stroke: var(--color-white);
    /* r=46 → circumference ≈ 289; JS sets dashoffset from scroll progress. */
    stroke-dasharray: 289;
    stroke-dashoffset: 289;                 /* empty until scrolled */
    transform: rotate(-90deg);              /* start drawing from the top */
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .1s linear;
}
.ops-cue__mouse { color: var(--color-white); opacity: .9; }

/* Header (eyebrow + title) stays put while the stats ride the conveyor. */
.ops-wheel__head {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}
.ops__title { font-size: var(--fs-h2); max-width: 22ch; }

/* Diagonal stat conveyor — JS drives transform + opacity from scroll. */
.ops-wheel__stats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ops-wheel__stat {
    position: absolute;
    top: 34%;
    left: clamp(41%, 32vw, 36%);
    width: max-content;
    will-change: transform, opacity;
}

@media (max-width: 900px) {
    .ops-wheel__pin { position: static; height: auto; min-height: 0; overflow: visible; }
    .ops-wheel__head { grid-template-columns: 1fr; }
    .ops-cue { display: none; }
    .ops-wheel__stats { position: static; display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-14); }
    /* width:auto (not the base max-content) so the stat fills the column and its
       label wraps instead of running off narrow screens. */
    .ops-wheel__stat { position: static; top: auto; left: auto; width: auto; max-width: 100%; opacity: 1 !important; transform: none !important; }
}

/* ---- What We Do (services) ------------------------------------------------ */
.services__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
    text-align: center;
    margin-bottom: var(--space-14);
}
.services__title { font-size: var(--fs-h2); color: var(--color-neutral-950); }
.services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-14);
    align-items: stretch;
}
.services__media {
    border-radius: var(--radius-md);
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 400px;
    transition: opacity .3s ease;
}

/* Tab panels — only the active tab's accordion + image is shown. */
.services__panel { display: none; }
.services__panel.is-active { display: block; }

/* +/× indicator on each accordion row (× when open, + when closed) */
.accordion__row > .accordion__body { flex: 1; }
.accordion__icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex: none;
    align-self: flex-start;
    margin-top: 4px;
    color: var(--color-ink-2);
}
.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s ease;
}
.accordion__icon::before { transform: translate(-50%, -50%); }
.accordion__icon::after  { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__item.is-open .accordion__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.accordion__item.is-open .accordion__icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Desktop uses the shared side image; the per-item inline image is hidden. */
.accordion__inline-img { display: none; }

@media (max-width: 900px) {
    /* minmax(0,1fr) lets the single column shrink below its content's min-content
       so a nowrap button inside an open row can't inflate the whole track. */
    .services__grid { grid-template-columns: minmax(0, 1fr); }
    .accordion__body { min-width: 0; }
    /* The short accordion CTA (e.g. "View Our Services") stays on one line. */
    .accordion__reveal .btn { white-space: nowrap; }
    /* No images in the services accordion on mobile — text only. */
    .services__media,
    .process__media,
    .accordion__inline-img { display: none; }
}

/* ---- Thermoplastic PVC — background image (D-Brown + frames) -------------- */
.pvc-section { background: var(--color-d-brown); color: var(--text-on-dark); }
.pvc-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.pvc-section > .container { position: relative; z-index: 1; }

/* ---- Product split (PVC / FBE) -------------------------------------------- */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; }
.product--reverse .product__media { order: 2; }
.product__media { border-radius: var(--radius-md); object-fit: cover; width: 100%; display: block;max-width: 100%;}
.product__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-10); }
.product__body .btn { align-self: flex-start; }   /* keep CTA sized to its text */
.product__title { font-size: var(--fs-h2); }
.notice-card {
    padding: var(--space-8) var(--space-6);
    background: #5d4139;
    border-radius: var(--radius-md);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.notice-card__title { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.5rem; }
.notice-card__text  { font-size: 1.25rem; font-weight: var(--fw-light); }

/* "Coming soon" variant — status badge + framed card + register CTA. */
.notice-card--soon {
    gap: var(--space-4);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 44px rgba(48, 29, 23, .28);
}
.soon-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 auto;
}
.soon-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-l-brown);
    box-shadow: 0 0 0 0 rgba(239, 224, 213, .6);
    animation: soonPulse 2s ease-out infinite;
}
@keyframes soonPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 224, 213, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(239, 224, 213, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 224, 213, 0); }
}
.notice-card__cta { align-self: flex-start; margin-top: var(--space-1); }
@media (max-width: 900px) {
    .product { grid-template-columns: minmax(0, 1fr); }
    .product__body { min-width: 0; }
    .product--reverse .product__media { order: 0; }
}

/* ---- Differentiators — pinned, scroll-driven vertical slider -------------- */
.diff-wrap { position: relative; height: 400vh; background: var(--bg-dark); color: var(--text-on-dark); }
.diff-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.diff__head { max-width: 620px; margin-bottom: var(--space-14); }
.diff__title { font-size: var(--fs-h2); }

.diff-slider {
    position: relative;
    min-height: clamp(340px, 60vh, 570px);
}
.diff-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    opacity: 0;
    transform: translateY(60px);              /* enters from below (vertical) */
    transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.diff-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.diff-slide.is-prev { opacity: 0; transform: translateY(-60px); }  /* exits upward */
/* Even slides (02, 04 …): content first — left on desktop, top on mobile. */
.diff-slide--reverse .diff-slide__media   { order: 2; }
.diff-slide--reverse .diff-slide__content { order: 1; }

.diff-slide__media {
    width: 100%;
    border-radius: var(--radius-md);
    object-fit: cover;
    aspect-ratio: 7 / 6;
}
.diff-slide__content { display: flex; flex-direction: column; }
/* Ghost number — clipped at the top (only the lower part shows) */
.diff-slide__num {
    display: block;
    overflow: hidden;
    line-height: 0;
}
.diff-slide__num > span {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(6rem, 13vw, 12.5rem);
    line-height: .99;
    letter-spacing: -0.05em;
    opacity: .4;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-l-brown);
    margin-bottom: 0;
}
.diff-slide__title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: var(--fw-light);
    margin-top: -20px;
    margin-bottom: var(--space-5);
    background: #301D17;
    position: relative;
    z-index: 12;
    padding-top: 20px;
}
.diff-slide__desc { font-size: var(--fs-body); font-weight: var(--fw-light); max-width: 30ch; }

/* Laptops / short viewports: compact the pinned slide so the content and image
   fit within one screen (otherwise the description gets clipped by the pin). */
@media (min-width: 901px) and (max-height: 860px) {
    .diff-pin { min-height: 0; padding-block: clamp(1.75rem, 4vh, 3rem); }
    .diff__head { margin-bottom: clamp(1.25rem, 3vh, 2.25rem); }
    .diff-slider { min-height: clamp(240px, 44vh, 420px); }
    .diff-slide__media { aspect-ratio: 16 / 11; max-height: 52vh; }
    .diff-slide__num > span { font-size: clamp(4.5rem, 12vh, 9rem); }
    .diff-slide__title { font-size: clamp(1.5rem, 3vh, 2.125rem); }
    .diff-slide__desc { font-size: var(--fs-body-sm); }
}

/* Pagination dots */
.diff-dots { display: flex; gap: var(--space-3); margin-top: var(--space-14); }
.diff-dot {
    width: 40px; height: 3px;
    background: rgba(255,255,255,.25);
    transition: background var(--transition);
}
.diff-dot.is-active { background: var(--color-red); }

/* Prev/next arrows — hidden on desktop (scroll-driven there) */
.diff-nav { display: none; }
.diff-nav__btn {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: var(--color-white);
    background: transparent;
    transition: background var(--transition), border-color var(--transition), filter var(--transition);
}
.diff-nav__btn:hover { background: rgba(255,255,255,.1); }
.diff-nav__btn:active { transform: scale(.95); }
/* Next button is filled with the brand colour; prev stays outlined. */
.diff-nav__btn[data-diff-next],
.diff-nav__btn[data-cases-next] {
    background: var(--color-cta);
    border-color: var(--color-cta);
}
.diff-nav__btn[data-diff-next]:hover,
.diff-nav__btn[data-cases-next]:hover {
    background: var(--color-cta);
    filter: brightness(1.14);
}

@media (max-width: 900px) {
    /* Unpin — a one-at-a-time carousel with prev/next arrows. */
    .diff-wrap { height: auto; }
    .diff-pin { position: static; height: auto; min-height: 0; overflow: visible; padding: clamp(3.5rem, 7vw, 5rem) var(--gutter); }
    .diff-slider { min-height: 0; position: relative; }
    .diff-slide {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        gap: var(--space-8);
        opacity: 1 !important;
        transform: none !important;
    }
    .diff-slide.is-active { display: grid; }
    .diff-slide__desc { max-width: none; }
    .diff-slide__title { margin-top: -10px; }
    .diff-nav { display: flex; gap: var(--space-4); margin-top: var(--space-10); }
}

/* ---- Case studies — pinned horizontal slider ----------------------------- */
.cases-wrap { position: relative; height: 400vh; background: #333; }
.cases-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    color: var(--color-white);
}
.cases-track {
    display: flex;
    height: 100%;
    will-change: transform;   /* JS snaps translateX to whole slides */
    transition: transform .8s cubic-bezier(.7, 0, .25, 1);   /* smooth slide-to-slide */
}
.cases-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-20) var(--gutter) clamp(5rem, 10vh, 8rem);
}
.cases__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* .cases__bg is a <picture>; make its <img> fill and cover the slide. */
.cases__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cases__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.65));
}
.cases__content { position: relative; z-index: 2; max-width: 624px; display: flex; flex-direction: column; gap: var(--space-5); }
.cases__title { font-size: var(--fs-h2); }

/* Pager fixed at the bottom of the pinned viewport */
.cases-pager {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(1.5rem, 4vh, 3rem);
    z-index: 3;
}

.cases-nav { display: none; }  /* desktop uses scroll; arrows are mobile-only */

@media (max-width: 900px) {
    /* Unpin — one-at-a-time carousel with the arrows overlaid on the slide. */
    .cases-wrap { height: auto; background: var(--color-d-brown); }
    .cases-pin { position: relative; height: auto; overflow: visible; padding-bottom: 0; }
    .cases-track { flex-direction: column; height: auto; transform: none !important; }
    .cases-slide { display: none; flex: none; min-height: 78vh; }
    .cases-slide.is-active { display: flex; }
    .cases-pager { display: none; }
    /* Arrows sit inside the slide (bottom-right), not in a brown strip below. */
    .cases-nav {
        display: flex;
        gap: var(--space-4);
        position: absolute;
        right: var(--gutter);
        bottom: clamp(1.25rem, 4vw, 2rem);
        margin: 0;
        padding: 0;
        z-index: 4;
    }
    .cases-nav .diff-nav__btn { width: 48px; height: 48px; }
}

/* ---- Process (From Metal to Market) --------------------------------------- */
.process__head { display: flex; flex-direction: column; gap: var(--space-5); max-width: 622px; margin-bottom: var(--space-14); }
.process__title { font-size: var(--fs-h2); color: var(--color-neutral-950); }
.process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); align-items: start; }

/* Process accordion (numbered steps) */
.process-list { display: flex; flex-direction: column; gap: 0; }
.process-list .accordion__item { gap: 0; }
.process-step__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    width: 100%;
    text-align: left;
    padding-block: 27px;
    color: var(--color-d-brown);
}
.process-step__num {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 2.5rem;
    line-height: 1;
    flex: none;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(48,29,23,.45);   /* ghost outlined number */
}
.process-step.is-open .process-step__num { -webkit-text-stroke-color: rgba(48,29,23,.7); }
.process-step__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.process-step__title { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.625rem; color: var(--color-d-brown); opacity: .55; transition: opacity var(--transition); }
.process-step.is-open .process-step__title { opacity: 1; }
.process-step__text { font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--color-d-brown); max-width: 34ch; }

/* Red arrow — only on the active step */
.process-step__arrow { flex: none; align-self: center; color: var(--color-red); opacity: 0; transition: opacity var(--transition); }
.process-step.is-open .process-step__arrow { opacity: 1; }

.process__media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #444;
    min-height: 400px;
    aspect-ratio: 1 / 1;
}
.process__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: opacity .3s ease; }
.process__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.6));
    z-index: 1;
}
@media (max-width: 900px) { .process__grid { grid-template-columns: 1fr; } }

/* ---- Contact -------------------------------------------------------------- */
/* Contact section — full-bleed background image */
.contact-section { position: relative; overflow: hidden; background: var(--color-d-brown); color: var(--color-white); }
.contact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.contact-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 55%, rgba(0,0,0,.35));
}
.contact-section > .container { position: relative; z-index: 2; }

.contact { display: grid; grid-template-columns: minmax(320px, 622px) 1fr; gap: var(--space-14); align-items: start; }
.contact__head { display: flex; flex-direction: column; gap: var(--space-10); }
.contact__title { font-size: var(--fs-h2); color: var(--color-white); }
.contact__cards { display: flex; flex-direction: column; gap: var(--space-5); max-width: 499px; }
.contact__form-wrap {
    padding: var(--space-10) var(--space-6);
    background: var(--color-d-brown);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}
.contact__note { color: var(--color-l-brown); font-size: 1.125rem; line-height: 1.4; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
    background: var(--color-d-brown);
    color: var(--color-white);
    padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--space-14);
    max-width: var(--container-max);
    margin-inline: auto;
}
.footer-col__title { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.5rem; margin-bottom: var(--space-6); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-weight: var(--fw-light); font-size: 1.25rem; opacity: .9; transition: opacity var(--transition); }
.footer-col a:hover { opacity: 1; }
.footer-brand__text { font-weight: var(--fw-light); font-size: 1.25rem; max-width: 42ch; margin-top: var(--space-6); }
.site-footer__bottom {
    max-width: var(--container-max);
    margin: var(--space-14) auto 0;
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
    font-size: 1rem;
    opacity: .8;
}
@media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICE PAGE (template-service.php)
   New layouts only — everything else reuses the shared components.
   ========================================================================== */

/* ---- Hero: left-aligned service variant ---------------------------------- */
.hero--service { min-height: 100vh; }
.hero__inner--service {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero-service { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.hero-service__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-light);       /* 300 */
    font-size: var(--fs-h1);            /* clamps to 74px at desktop */
    line-height: 1;                     /* 100% */
    letter-spacing: -.02em;
    max-width: 20ch;
}
.hero-service__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}
.hero-service__sub { max-width: 900px; margin-inline: 0; flex: 1 1 480px; }
/* Inner-page hero: solid brand-brown tag strip (instead of the translucent black). */
.hero--service .tagstrip { background: var(--color-cta); }
@media (max-width: 700px) {
    .hero-service__row { flex-direction: column; align-items: flex-start; }
    /* Don't let the paragraph grow vertically (it would push the button down
       and spread the content to the top); keep the block compact at the bottom. */
    .hero-service__sub { flex: 0 1 auto; }
}

/* Faint rotated-square outline behind the intro (matches the design's
   background diamond). Reuses the section's own stacking (container sits above). */
.about-diamond {
    position: absolute;
    top: -40px;
    left: 0;
    height: 450px;
    width: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
@media (max-width: 900px) { .about-diamond { display: none; } }

/* ---- Reusable two-column section header (title left / intro right) -------- */
.sec-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.sec-head__title-wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.sec-head__title { font-size: var(--fs-h2); max-width: 100%; }
/* Vertically centre the right-hand intro against the title (divisions/industries). */
.sec-head--center { align-items: center; }
.sec-head__intro { display: flex; flex-direction: column; gap: var(--space-6); font-weight: var(--fw-light); }
.sec-head__lead { font-size: var(--fs-body); }
.sec-head__intro > p { font-size: var(--fs-body-sm); opacity: .85; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } }

/* ---- Division block (intro row + card grid) ------------------------------ */
.division { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
.division__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.division__media { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.division__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.division__text--wide { max-width: 640px; }
.division__title { font-size: var(--fs-h2); font-weight: var(--fw-light); }
.division__desc { font-size: var(--fs-body); font-weight: var(--fw-light); }
@media (max-width: 900px) { .division__intro { grid-template-columns: 1fr; } }

/* ---- Service card grid (4-up) -------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.svc-card { display: flex; flex-direction: column; gap: var(--space-5); }
.svc-card__media { width: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.svc-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: var(--color-ink); }
.svc-card__text { font-weight: var(--fw-light); font-size: var(--fs-body-sm); opacity: .82; }
/* On the dark division (02) the card copy sits on brown, so lift it. */
.svc-card--dark .svc-card__title { color: var(--color-white); }
.svc-card--dark .svc-card__text { color: var(--color-l-brown); opacity: .9; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

/* ---- Industries mosaic (bento) ------------------------------------------- */
.industries__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(150px, 18vw, 220px);
    gap: var(--space-5);
    /* Default is the 6-tile mosaic; the --n{count} modifiers below reshape the
       layout so fewer tiles never leave empty rows / white space. */
    grid-template-areas:
        "con con inf oil"
        "con con hos hos"
        "man man gov gov";
}
.industries__grid--n1 { grid-template-areas: "con con con con"; }
.industries__grid--n2 { grid-template-areas: "con con inf inf"; }
.industries__grid--n3 {
    grid-template-areas:
        "con con inf inf"
        "con con oil oil";
}
.industries__grid--n4 {
    grid-template-areas:
        "con con inf oil"
        "con con hos hos";
}
.industries__grid--n5 {
    grid-template-areas:
        "con con inf inf"
        "con con oil oil"
        "hos hos man man";
}
/* Tiles map to the mosaic areas by position (first six rows of the repeater). */
.ind-tile:nth-child(1) { grid-area: con; }
.ind-tile:nth-child(2) { grid-area: inf; }
.ind-tile:nth-child(3) { grid-area: oil; }
.ind-tile:nth-child(4) { grid-area: hos; }
.ind-tile:nth-child(5) { grid-area: man; }
.ind-tile:nth-child(6) { grid-area: gov; }
.ind-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
}
.ind-tile__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ind-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 55%);
}
.ind-tile:hover .ind-tile__media { transform: scale(1.05); }
.ind-tile__caption {
    position: relative;
    z-index: 1;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 0;   /* desc spacing handled by its own margin on hover */
}
.ind-tile__label {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: 1.25rem;
}
.ind-tile__desc {
    font-weight: var(--fw-light);
    font-size: 1.0625rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .88);
    max-width: 42ch;
    /* Hidden until hover — reveals with a slide + fade. */
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    overflow: hidden;
    transition: max-height var(--transition), opacity var(--transition), transform var(--transition), margin-top var(--transition);
}
.ind-tile:hover .ind-tile__desc,
.ind-tile:focus-within .ind-tile__desc {
    max-height: 12em;
    opacity: 1;
    transform: translateY(0);
    margin-top: var(--space-2);
}
@media (max-width: 700px) {
    .industries__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
        grid-template-areas: "con con" "inf oil" "hos hos" "man gov";
    }
    .industries__grid--n1 { grid-template-areas: "con con"; }
    .industries__grid--n2 { grid-template-areas: "con con" "inf inf"; }
    .industries__grid--n3 { grid-template-areas: "con con" "inf oil"; }
    .industries__grid--n4 { grid-template-areas: "con con" "inf oil" "hos hos"; }
    .industries__grid--n5 { grid-template-areas: "con con" "inf oil" "hos man"; }
}

/* ---- Why clients choose (pinned — reasons reveal one by one) -------------- */
.reasons-wrap { position: relative; }
.reasons-pin { padding: clamp(3.5rem, 7vw, 5rem) var(--gutter); }
.reasons {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}
/* Desktop: pin the section and reveal each reason as the user scrolls through. */
@media (min-width: 901px) {
    .reasons-pin {
        position: sticky;
        top: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    /* Scoped to the pinned wrapper only — other .reason grids (e.g. the
       sub-service perf grid) must stay visible without a scroll controller. */
    .js .reasons-wrap .reason {
        opacity: 0;
        transform: translateY(48px);
        transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
    }
    .js .reasons-wrap .reason.is-active { opacity: 1; transform: none; }
}
.reasons__intro { display: flex; flex-direction: column; gap: var(--space-6); }
.reasons__title { font-size: var(--fs-h2); font-weight: var(--fw-light); max-width: 16ch; }
.reasons__lead { font-weight: var(--fw-light); font-size: var(--fs-body-sm); opacity: .8; max-width: 46ch; }
.reasons__list { display: flex; flex-direction: column; }
/* Number stacked ABOVE the title; thin divider between reasons (cream bg). */
.reason {
    display: flex;
    flex-direction: column;
    padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
    border-top: 1px solid rgba(48, 29, 23, .14);
}
.reason:first-child { border-top: 0; padding-top: 0; }
.reason__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: clamp(5rem, 13vw, 12.5rem);
    line-height: .9;
    letter-spacing: -.05em;
    opacity: .4;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-d-brown);
    /* border: 1px solid #301D17; */
    margin-bottom: -32px;
}
.reason__body { display: flex; flex-direction: column; gap: var(--space-3); }
.reason__title {
    position: relative;
    z-index: 2;
    background: var(--bg-cream);            /* covers the number's lower edge */
    padding-top: 18px;
    margin-top: -18px;
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: var(--color-ink);
}
.reason__text { font-weight: var(--fw-light); font-size: var(--fs-body-sm); color: var(--color-d-brown); opacity: .8; }
@media (max-width: 900px) {
    .reasons { grid-template-columns: 1fr; gap: var(--space-8); }
    /* Not pinned on mobile — cancel the tall scroll height JS sets for desktop. */
    .reasons-wrap { height: auto !important; }
    .reason__title { margin-top: 10px; }
}

/* ---- Engineered for scale (stats + image) -------------------------------- */
.scale {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}
.scale__body { display: flex; flex-direction: column; gap: var(--space-6); }
.scale__title { font-size: var(--fs-h2); font-weight: var(--fw-light); }
.scale__desc { font-weight: var(--fw-light); font-size: var(--fs-body-sm); opacity: .85; max-width: 46ch; }
.scale__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3rem);
    row-gap: clamp(1.75rem, 3.5vw, 2.75rem);
    margin-top: var(--space-6);
}
/* Compact stat treatment for this grid: smaller value/label, red unit. */
.scale__stats .stat { gap: var(--space-3); }
.scale__stats .stat__value { font-size: clamp(2.25rem, 3.2vw, 2.75rem); }
.scale__stats .stat__unit { color: var(--color-red); font-size: 1rem; margin-left: .15em; }
.scale__stats .stat__label { font-size: 1.0625rem; }
.scale__media { width: 100%; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 5 / 4; }
@media (max-width: 900px) { .scale { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .scale__stats { grid-template-columns: 1fr; } }

/* ---- CTA band (centered) ------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    max-width: 760px;
}
.cta-band__title { font-size: var(--fs-h2); font-weight: var(--fw-light); color: var(--color-white); }
.cta-band__desc { font-weight: var(--fw-light); font-size: var(--fs-body); color: var(--color-l-brown); max-width: 56ch; }

/* ==========================================================================
   SUB-SERVICE PAGE (template-sub-service.php)
   ========================================================================== */

/* ---- Systems: selector list (left) + feature card (right) ---------------- */
.svc-list { display: flex; flex-direction: column; gap: var(--space-10); }
.svc-list__group { display: flex; flex-direction: column; gap: var(--space-4); }
.svc-list__subhead { color: var(--color-red); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); }
.svc-list__note { font-weight: var(--fw-light); font-size: var(--fs-body-sm); color: var(--color-d-brown); opacity: .8; max-width: 46ch; }
.svc-rows { display: flex; flex-direction: column; }
.svc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    text-align: left;
    padding-block: var(--space-5);
    border-top: 1px solid rgba(48, 29, 23, .12);
    color: var(--color-ink);
    transition: opacity var(--transition);
}
.svc-rows .svc-row:last-child { border-bottom: 1px solid rgba(48, 29, 23, .12); }
/* Faint outlined index number (continuous 01–06). */
.svc-row__num {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-d-brown);
    opacity: .38;
}
.svc-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-row__title { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: 1.375rem; color: var(--color-ink); }
.svc-row__cap { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.svc-row__arrow { color: transparent; flex: none; transition: color var(--transition), transform var(--transition); }
.svc-row.is-active .svc-row__title { font-weight: var(--fw-medium); }
.svc-row.is-active .svc-row__arrow { color: var(--color-red); transform: translateX(3px); }
.svc-row:not(.is-active) { opacity: .62; }
.svc-row:hover { opacity: 1; }

.svc-feature {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
}
.svc-feature__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.svc-feature__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.05) 62%); }
.svc-feature__content { position: relative; z-index: 1; padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; gap: var(--space-5); }
.svc-feature__title { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.svc-feature__desc { font-weight: var(--fw-light); font-size: var(--fs-body-sm); max-width: 46ch; }
.svc-feature__tags { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pill--tag { border-color: rgba(255,255,255,.4); color: var(--color-white); font-size: 1rem; padding: var(--space-2) var(--space-5); }
@media (max-width: 900px) { .svc-feature { min-height: 340px; } }

/* ---- Precision stats: value + red unit + sub-title + description ---------- */
.scale__stats .stat--precision { gap: var(--space-2); }
.stat--precision .stat__value { font-size: clamp(2.25rem, 3.2vw, 2.75rem); }
.stat--precision .stat__unit { color: var(--color-red); font-size: 1rem; margin-left: .15em; }
.stat__sub { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.125rem; margin-top: var(--space-2); }
.stat__desc { font-weight: var(--fw-light); font-size: 1rem; opacity: .78; }

/* ---- Reasons as a 2-up grid (long-term performance) ----------------------
   Column-major order (01,02 left · 03,04 right) with crossing divider lines,
   and full (un-cut) ghost numbers with the title below. */
.reasons__list--grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    align-items: start;
}
.reasons__list--grid .reason {
    border-top: 0;
    padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(2rem, 3.5vw, 3rem) 0;
}
/* Right column: inset content off the centre line. */
.reasons__list--grid .reason:nth-child(3),
.reasons__list--grid .reason:nth-child(4) { padding-left: clamp(1.5rem, 3vw, 3rem); }
/* Bottom row: inset content off the centre line. */
.reasons__list--grid .reason:nth-child(2),
.reasons__list--grid .reason:nth-child(4) { padding-top: clamp(2rem, 3.5vw, 3rem); }
/* Divider cross — perfectly centred vertical + horizontal lines. */
.reasons__list--grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(48, 29, 23, .14);
    transform: translateX(-50%);
}
.reasons__list--grid::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(48, 29, 23, .14);
    transform: translateY(-50%);
}
/* Numbers shown in full (no bottom cut), thin outline, title tucked close. */
.reasons__list--grid .reason__num {
    font-size: clamp(3.5rem, 7vw, 8.5rem);
    -webkit-text-stroke: 1px var(--color-d-brown);
    margin-bottom: var(--space-2);
}
.reasons__list--grid .reason__title { background: none; padding-top: 0; margin-top: 0; }
/* Body overlaps the number's lower edge with a cream band (cut-from-bottom). */
.reasons__list--grid .reason__body {
    margin-top: -38px;
    background: var(--bg-cream);
    padding-top: 20px;
    position: relative;
    z-index: 1;
}
@media (max-width: 640px) {
    .reasons__list--grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .reasons__list--grid::before, .reasons__list--grid::after { display: none; }
    .reasons__list--grid .reason { padding: 0 0 var(--space-8) 0; }
    .reasons__list--grid .reason:not(:first-child) { border-top: 1px solid rgba(48, 29, 23, .14); padding-top: var(--space-8); }
}

/* ---- Process: pinned horizontal slider ----------------------------------- */
.steps-wrap { position: relative; }
.steps-pin { padding-block: clamp(3.5rem, 7vw, 5rem); overflow: hidden; }
.steps-viewport { margin-top: clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.steps-track {
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    width: max-content;
    /* Align the first card with the container's content edge. */
    padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    will-change: transform;   /* JS drives translateX from scroll progress */
}
.step-card { flex: none; width: clamp(300px, 38vw, 560px); display: flex; flex-direction: column; }
.step-card__eyebrow { color: var(--color-muted); font-size: var(--fs-body-sm); }
.step-card__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: clamp(1.75rem, 2.6vw, 2.375rem);
    margin: var(--space-2) 0 var(--space-6);
}
.step-card__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step-card__text { font-weight: var(--fw-light); font-size: var(--fs-body-sm); color: var(--color-d-brown); opacity: .8; margin-top: var(--space-6); }

@media (min-width: 901px) {
    .steps-pin {
        position: sticky;
        top: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
/* Mobile: no pin — native horizontal swipe. */
@media (max-width: 900px) {
    .steps-wrap { height: auto !important; }
    .steps-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .steps-track { transform: none !important; }
    .step-card { width: min(80vw, 420px); }
}

/* ==========================================================================
   COATING SYSTEM PAGE (template-coating-system.php)
   ========================================================================== */

/* Hero: uppercase product title + subtitle line. */
.hero--product .hero-service__title { text-transform: uppercase; }
.hero-service__head { display: flex; flex-direction: column; gap: var(--space-3); }
.hero-service__eyebrow { font-size: var(--fs-body); font-weight: var(--fw-light); color: var(--color-l-brown); }

/* Selector rows: descriptions (Key Benefits always; Process on active row). */
.svc-row__desc { font-weight: var(--fw-light); font-size: var(--fs-body-sm); color: var(--color-d-brown); opacity: .8; }
.svc-row--benefit { grid-template-columns: 1fr; align-items: start; }
.svc-row--benefit:not(.is-active) { opacity: 1; }
.svc-row--benefit .svc-row__title { font-size: 1.5rem; margin-bottom: 6px; }
.svc-row--benefit.is-active .svc-row__title { font-weight: var(--fw-medium); }
.svc-row__desc--reveal { display: none; }
.svc-row.is-active .svc-row__desc--reveal { display: block; margin-top: var(--space-3); }

/* Image-only feature card (no overlay/tags). */
.svc-feature--plain { min-height: 0; display: block; }
.svc-feature--plain .svc-feature__media { position: static; display: block; width: 100%; height: 100%; min-height: 480px; }

/* Narrow container (FAQ). */
.container--narrow { max-width: 900px; }

/* ---- FAQ accordion ------------------------------------------------------- */
.faq__head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-5); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.faq__title { font-size: var(--fs-h2); }
/* Reset the inherited accordion gaps (they'd add ~40px of dead space). */
.faq { gap: 0; }
.faq__item { gap: 0; border-top: 1px solid rgba(48, 29, 23, .14); }
.faq__item:last-child { border-bottom: 1px solid rgba(48, 29, 23, .14); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    text-align: left;
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--color-ink);
}
.faq__question { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.faq__icon { position: relative; width: 20px; height: 20px; flex: none; color: var(--color-ink); }
.faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity var(--transition);
}
.faq__icon::before { width: 16px; height: 1.5px; }        /* horizontal bar */
.faq__icon::after  { width: 1.5px; height: 16px; }        /* vertical bar (hidden when open → minus) */
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a { padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.faq__a p { font-weight: var(--fw-light); font-size: var(--fs-body-sm); color: var(--color-d-brown); opacity: .82; max-width: 70ch; }

/* ==========================================================================
   COLOUR LIBRARY PAGE (template-colour-library.php)
   ========================================================================== */
.colour-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.colour-group__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    color: var(--color-ink);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(.75rem, 1.4vw, 1.25rem);
}

/* Each swatch is a card: colour chip on top, white footer below.
   A real <button> so it's keyboard-accessible + click to copy. */
.swatch {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.swatch:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(48, 29, 23, .16); }
.swatch:active { transform: translateY(-1px); }
.swatch__chip {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    background: var(--chip, #ccc);   /* --chip carries the data-driven colour */
    overflow: hidden;
}

/* Hover / copied tooltip inside the chip. */
.swatch__tip {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .92);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: .7rem;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: none;
}
.swatch__tip::after { content: "Click to copy"; }
.swatch:hover .swatch__tip { opacity: 1; transform: none; }
.swatch.is-copied .swatch__tip { opacity: 1; transform: none; background: var(--color-cta); color: var(--color-white); }
.swatch.is-copied .swatch__tip::after { content: "Copied!"; }

/* White footer with the code + name. */
.swatch__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--color-white);
    padding: var(--space-5) var(--space-5) var(--space-6);
}
.swatch__code { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.0625rem; color: var(--color-ink); }
.swatch__name { font-size: .8rem; color: var(--color-muted); }

@media (max-width: 1024px) { .swatch-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- About: team roster -------------------------------------------------- */
.team { display: flex; flex-direction: column; margin-top: clamp(2.5rem, 5vw, 4rem); }
.team__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1.5rem, 6vw, 6rem);
    align-items: start;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
    border-top: 1px solid rgba(48, 29, 23, .14);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background var(--transition), box-shadow var(--transition);
}
.team__row:last-child { border-bottom: 1px solid rgba(48, 29, 23, .14); }
/* Hovered member gets a lighter panel + brand accent bar (inset = no shift). */
.team__row:hover {
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 3px 0 0 var(--color-cta);
}
.team__name { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--color-ink); }
.team__role { display: block; margin-top: 4px; font-size: var(--fs-body-sm); color: var(--text-caption); }
.team__desc { font-weight: var(--fw-light); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--color-d-brown); opacity: .82; max-width: 70ch; }

@media (max-width: 760px) {
    .team__row { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- About: "What We Do" 3-up highlights (ghost numbers) ------------------ */
.about-expertise__grid {
    list-style: none;
    margin: clamp(3rem, 6vw, 5.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.about-expertise__grid .reason { border-top: 0; padding: 0; }
/* White section — title panel covers the ghost number's lower edge in white. */
.about-expertise__grid .reason__title { background: var(--color-white); }
@media (max-width: 820px) {
    .about-expertise__grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* ---- Certifications: certificate slider ---------------------------------- */
.cert-slider { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.cert-track {
    --cert-gap: clamp(1.25rem, 2.5vw, 2rem);
    --cert-per-view: 3;                     /* 3 certificates visible on desktop */
    display: flex;
    gap: var(--cert-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 var(--gutter) var(--space-5);
    scrollbar-width: none;                 /* Firefox */
    -ms-overflow-style: none;
}
.cert-track::-webkit-scrollbar { display: none; }
.cert-card {
    /* Show exactly --cert-per-view cards across the gutter-padded track. */
    flex: 0 0 calc((100% - (var(--cert-per-view) - 1) * var(--cert-gap)) / var(--cert-per-view));
    scroll-snap-align: start;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (max-width: 1024px) { .cert-track { --cert-per-view: 2; } }   /* 2 on tablet */
@media (max-width: 600px)  { .cert-track { --cert-per-view: 1.1; } } /* 1 + peek on mobile */
.cert-card__frame {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: 0 18px 44px rgba(48, 29, 23, .16);
    transition: transform var(--transition), box-shadow var(--transition);
}
.cert-card__frame:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(48, 29, 23, .24); }
.cert-card__img { width: 100%; height: auto; display: block; }
.cert-card__cap { display: flex; flex-direction: column; gap: 2px; padding-inline: var(--space-1); }
.cert-card__label { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.125rem; color: var(--color-ink); }
.cert-card__desc { font-size: var(--fs-body-sm); font-weight: var(--fw-light); color: var(--color-d-brown); opacity: .78; }
/* Arrows aligned to the container gutter. */
.cert-nav { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.cert-nav .diff-nav__btn { border-color: rgba(48, 29, 23, .3); color: var(--color-ink); }
.cert-nav .diff-nav__btn:hover { background: rgba(48, 29, 23, .06); }
.cert-nav .diff-nav__btn[data-cert-next] { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-white); }
.cert-nav .diff-nav__btn[data-cert-next]:hover { background: var(--color-cta); filter: brightness(1.14); }

/* ---- Lightbox (certificate viewer) --------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(20, 12, 9, .96); }
.lightbox__stage {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: min(92vw, 720px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    transform: scale(.96);
    transition: transform .28s ease;
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.lightbox__cap { color: rgba(255, 255, 255, .85); font-size: var(--fs-body-sm); letter-spacing: .02em; text-align: center; }
.lightbox__btn {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: var(--color-white);
    background: rgba(255, 255, 255, .04);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .14); }
.lightbox__btn:active { transform: scale(.94); }
.lightbox__close { top: clamp(1rem, 3vw, 1.75rem); right: clamp(1rem, 3vw, 1.75rem); }
.lightbox__nav { top: 50%; margin-top: -26px; }
.lightbox__nav--prev { left: clamp(.5rem, 2.5vw, 2rem); }
.lightbox__nav--next { right: clamp(.5rem, 2.5vw, 2rem); }
body.lb-open { overflow: hidden; }
@media (max-width: 600px) {
    .lightbox__nav { top: auto; bottom: clamp(1rem, 4vw, 2rem); margin-top: 0; }
    .lightbox__nav--prev { left: 25%; }
    .lightbox__nav--next { right: 25%; }
}

/* ---- Minimal centered pages (Coming Soon / 404) -------------------------- */
.pagemin {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem);
    background: var(--color-d-brown);
    color: var(--text-on-dark);
    overflow: hidden;
}
.pagemin__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .45; }
.pagemin__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(120% 90% at 50% 30%, rgba(48,29,23,.35), rgba(48,29,23,.9) 78%);
}
.pagemin__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}
.pagemin__code {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: clamp(6rem, 22vw, 15rem);
    line-height: .85;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-l-brown);
    opacity: .55;
}
.pagemin__title { font-size: var(--fs-h1); font-weight: var(--fw-light); line-height: 1; }
.pagemin__text { font-weight: var(--fw-light); font-size: var(--fs-body); color: rgba(255,255,255,.82); max-width: 54ch; }
.pagemin__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); }

/* ---- Contact page --------------------------------------------------------- */
/* Light variant of the enquiry section (dark form card on a light section). */
.contact--light { align-items: stretch; }                       /* left column fills the form height */
.contact--light .contact__head { justify-content: space-between; }  /* heading top, details bottom */
.contact--light .contact__title { color: var(--color-ink); }
.contact-methods { display: flex; flex-direction: column; gap: var(--space-6); max-width: 460px; }
.contact-method { display: flex; align-items: flex-start; gap: var(--space-4); }
.contact-method__icon {
    flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--color-black);
    color: var(--color-white);
}
.contact-method__title { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 1.25rem; color: var(--color-ink); margin-bottom: 4px; }
.contact-method__meta { font-size: var(--fs-body-sm); color: var(--color-d-brown); opacity: .82; line-height: 1.4; }
.contact-method__meta a { color: var(--color-cta); }

/* Native select styled like the other fields. */
.field--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23efe0d5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
    cursor: pointer;
}

/* Facility map + overlay card */
.map-wrap { position: relative; }
.map-embed { overflow: hidden; line-height: 0; }
.map-embed iframe { width: 100%; height: clamp(420px, 60vh, 640px); border: 0; display: block; }
.map-card {
    position: absolute;
    top: 50%;                                  /* vertically centred on the map */
    left: clamp(1.5rem, 4vw, 3rem);
    transform: translateY(-50%);
    width: min(400px, calc(100% - 3rem));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--color-d-brown);
    color: var(--color-white);
}
.map-card__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--fw-light); line-height: 1; }
.map-card__addr { font-size: var(--fs-body-sm); font-weight: var(--fw-light); color: rgba(255,255,255,.82); line-height: 1.5; }
/* Solid white "Get Direction" button */
.map-card .btn { align-self: flex-start; background: var(--color-white); color: var(--color-ink); border: 0; }
.map-card .btn:hover { background: var(--color-l-brown); }

@media (max-width: 900px) {
    .map-card { position: static; width: auto; transform: none; margin-top: var(--space-5); }
}