/* ==========================================================================
   SRI SUN — Site styles
   Depends on design-system.css for tokens, resets and shared primitives.
   Sections below follow the order of the page: header, hero, home sections,
   inner-page furniture, footer.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background-color: var(--surface);
    border-bottom: 1px solid var(--line);
    transition: background-color var(--dur-slow) var(--ease),
                border-color var(--dur-slow) var(--ease),
                box-shadow var(--dur-slow) var(--ease);
}

/* Every page opens on a dark hero or banner, so the header sits over it and
   only takes on its surface once the page has scrolled. Gated on `has-js`
   because the solid state is restored by script.js — without scripting the
   header stays opaque, which is the safe result. */
.has-js .header {
    background-color: transparent;
    border-bottom-color: transparent;
}

.has-js .header.is-scrolled {
    background-color: var(--surface);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.has-js .header:not(.is-scrolled) .logo-img {
    filter: brightness(0) invert(1);
}

.has-js .header:not(.is-scrolled) .nav-list a {
    color: rgba(255, 255, 255, 0.82);
}

.has-js .header:not(.is-scrolled) .nav-list a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

.has-js .header:not(.is-scrolled) .nav-list a.active {
    color: #fff;
}

.has-js .header:not(.is-scrolled) .nav-list a::before {
    background-color: #fff;
}

.has-js .header:not(.is-scrolled) .dropdown-toggle i {
    color: rgba(255, 255, 255, 0.6);
}

.has-js .header:not(.is-scrolled) .mobile-menu-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
    background-color: rgba(255, 255, 255, 0.1);
}

/* The dropdown menu is a white surface, so restore the normal treatment. */
.has-js .header:not(.is-scrolled) .nav-list .dropdown-item {
    color: var(--body);
}

.has-js .header:not(.is-scrolled) .nav-list .dropdown-item:hover {
    color: var(--ink);
    background-color: var(--surface-sunken);
}

/* The drawer is its own white surface, so restore the normal treatment. */
.has-js .header:not(.is-scrolled) .mobile-nav-open .nav-list a {
    color: var(--body);
}

.has-js .header:not(.is-scrolled) .mobile-nav-open .nav-list a.active {
    color: var(--primary-color);
}

.has-js .header:not(.is-scrolled) .mobile-nav-open .nav-list a::before {
    background-color: var(--primary-color);
}

.header .container {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: 100%;
    max-width: var(--container-wide);
}

/* Nav is pushed to the right so the contact action sits at the far end. */
.nav { margin-left: auto; }

.header-cta {
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: 0.01em;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    transition: opacity var(--dur) var(--ease);
}

.logo-img:hover { opacity: 0.85; }

/* Navigation ---------------------------------------------------------------- */

.nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
}

.nav-list li { position: relative; }

.nav-list a,
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-list a:hover {
    color: var(--ink);
    background-color: var(--surface-sunken);
}

/* A 2px accent rule marks the active page — the only nav decoration. */
.nav-list a::before {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease);
}

.nav-list a.active {
    color: var(--primary-color);
    background-color: transparent;
}

.nav-list a.active::before { transform: scaleX(1); }

.nav-list a:hover::before { transform: scaleX(0); }

/* Dropdown ------------------------------------------------------------------ */

.dropdown { position: relative; }

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown-toggle i {
    font-size: 0.625rem;
    color: var(--faint);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dropdown:hover .dropdown-toggle i {
    transform: rotate(180deg);
    color: var(--body);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 200px;
    padding: var(--space-1);
    list-style: none;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: var(--body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.dropdown-item:hover {
    background-color: var(--surface-sunken);
    color: var(--ink);
}

.dropdown-item::before { display: none; }

/* Mobile menu --------------------------------------------------------------- */

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background-color: var(--surface);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.mobile-menu-btn:hover {
    background-color: var(--surface-sunken);
    border-color: var(--line-strong);
}

.mobile-menu-btn i { font-size: 1.0625rem; }

.mobile-menu-close {
    position: absolute;
    top: 14px;
    right: var(--gutter);
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 1.125rem;
    background-color: var(--surface);
    z-index: 1;
    transition: background-color var(--dur) var(--ease);
}

.mobile-menu-close:hover { background-color: var(--surface-sunken); }

.mobile-nav-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-drawer);
    width: min(88vw, 340px);
    height: 100dvh;
    padding: calc(var(--header-h) + 8px) var(--gutter) var(--space-8);
    overflow-y: auto;
    background-color: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-overlay);
    animation: slideInRight var(--dur-slow) var(--ease) both;
}

.mobile-nav-open .nav-list {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.mobile-nav-open .nav-list li { width: 100%; }

.mobile-nav-open .nav-list a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    font-size: var(--text-base);
    letter-spacing: var(--tracking-wide);
}

.mobile-nav-open .nav-list a:hover { background-color: transparent; }

.mobile-nav-open .nav-list a::before {
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    top: 10px;
    bottom: 10px;
    transform: scaleY(0);
}

.mobile-nav-open .nav-list a.active::before { transform: scaleY(1); }

.mobile-nav-open .nav-list a.active { padding-left: 14px; }

/* ==========================================================================
   Hero
   Cinematic photograph, heavy scrim, content anchored left. The red rule
   between the proposition and the discipline list is the only accent.
   ========================================================================== */

.hero {
    position: relative;
    height: 100svh;
    min-height: 620px;
    max-height: 940px;
    overflow: hidden;
}

.hero-banner {
    position: absolute;
    inset: 0;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* Denser on the left where the copy sits, so the photograph still reads
       on the right of the frame. */
    background:
        linear-gradient(90deg, rgba(10, 12, 16, 0.88) 0%, rgba(10, 12, 16, 0.62) 45%, rgba(10, 12, 16, 0.32) 100%),
        linear-gradient(180deg, rgba(10, 12, 16, 0.5) 0%, rgba(10, 12, 16, 0.2) 40%, rgba(10, 12, 16, 0.6) 100%);
}

.hero-overlay > .container {
    width: 100%;
}

.hero-text {
    max-width: 44rem;
    margin: 0;
    padding-top: var(--header-h);
    text-align: left;
    color: #fff;
}

/* Hero entrance: one short rise, lightly staggered. `both` fill means the
   final state holds even if the animation never runs. */
.hero-logo,
.hero-text h1,
.tagline-container,
.hero-buttons {
    animation: heroIn 640ms var(--ease) both;
}

.hero-logo { animation-delay: 60ms; }
.hero-text h1 { animation-delay: 140ms; }
.tagline-container { animation-delay: 220ms; }
.hero-buttons { animation-delay: 300ms; }

@keyframes heroIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.hero-logo {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--space-6);
}

.hero-logo-img {
    height: clamp(96px, 11vw, 160px);
    width: auto;
    object-fit: contain;
}

.hero-text h1 {
    font-family: 'Prachason Neue', var(--font-sans);
    font-size: clamp(2.75rem, 1.8rem + 4.4vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0;
}

.hero-text h1::after { content: none; }

.tagline-container {
    margin: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px);
}

.tagline,
.tagline-main {
    max-width: 30ch;
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
    font-weight: 400;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: #fff;
}

.tagline { margin-bottom: var(--space-8); }

/* The existing divider element, recast as the section's accent rule. */
.tagline-divider {
    width: 56px;
    height: 3px;
    margin: clamp(20px, 2.5vw, 32px) 0;
    background-color: var(--primary-color);
}

.tagline-services {
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--leading-normal);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    min-height: 50px;
    padding-inline: var(--space-8);
}

.hero-buttons .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: transparent;
}

.hero-buttons .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ==========================================================================
   Services
   ========================================================================== */

/* Primary sections lead with a left-aligned heading; the supporting bands
   below (certifications, clients) stay centred so the page has a hierarchy
   rather than four identical centred headers in a row. */
.section-title--start {
    text-align: left;
}

.section-title--start::after {
    margin-inline: 0;
}

.services {
    background-color: var(--surface-subtle);
    border-block: 1px solid var(--line);
}

/* Eight services: four across on desktop fills two complete rows rather
   than leaving an orphan on a third. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    gap: var(--space-6);
}

.service-card-link {
    display: block;
    height: 100%;
    color: inherit;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 56px;
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.service-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

/* The image is the card's primary element, so it gets a generous share of
   the height and its own clipping frame for the hover scale. */
.service-card-media {
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.service-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}

.service-card:hover img { transform: scale(1.05); }

.service-card h3 {
    padding: var(--space-6) var(--space-6) var(--space-2);
    font-size: var(--text-lg);
    color: var(--ink);
    transition: color var(--dur) var(--ease);
}

.service-card:hover h3 { color: var(--primary-color); }

.service-card p {
    padding: 0 var(--space-6);
    color: var(--muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* Quiet, always-visible affordance rather than a hover-only badge. */
.service-card::before {
    content: 'Read More';
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-6);
    color: var(--primary-color);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform var(--dur) var(--ease);
}

.service-card:hover::before { transform: translateX(3px); }

/* ==========================================================================
   About
   The heading runs across the top. Below it the portrait image sits on the
   left and spans both text rows, so it starts right under the heading; the
   introduction, divisions, expertise and closing flow down the right. The
   image is sticky so it stays with the reader while the text scrolls.
   ========================================================================== */

.about {
    background-color: var(--surface);
}

.about-content {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas:
        "lead  lead"
        "media intro"
        "media text";
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: var(--space-10);
    align-items: start;
}

.about-lead  { grid-area: lead; }
.about-intro { grid-area: intro; }
.about-media { grid-area: media; }
.about-text  { grid-area: text; }

/* Heading and standfirst ----------------------------------------------------- */

/* A short accent rule closes the heading block. */
.about-lead::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background-color: var(--primary-color);
}

/* Portrait image -------------------------------------------------------------- */

.about-media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    margin: 0;
}

.about-media picture {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

/* The asset is portrait (941 x 1672); the ratio is held so it is never
   cropped to a letterbox on any breakpoint. */
.about-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 941 / 1672;
    object-fit: cover;
    object-position: center;
}

/* Text -------------------------------------------------------------------- */

.about-text {
    width: 100%;
}

.about-lead h2,
.about-text h2 {
    margin-bottom: var(--space-4);
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
    color: var(--ink);
    text-align: left;
}

.about-lead h2::after,
.about-text h2::after { content: none; }

/* The accent rule below carries the separation, so no border here. */
.about-tagline {
    margin: 0 0 var(--space-6);
}

.about-tagline h3 {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    font-weight: 500;
    line-height: var(--leading-snug);
    color: var(--body);
    letter-spacing: var(--tracking-normal);
}

/* Running text is held to a readable measure; the lists below use the full
   column width so the section fills the grid instead of trailing off. */
.about-intro > p,
.about-subtitle,
.division > p,
.specialization > p,
.about-conclusion p {
    max-width: 68ch;
}

/* Opening paragraph is set a step larger to carry the section. */
.about-subtitle {
    margin-bottom: var(--space-6);
    color: var(--ink-soft);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    font-weight: 400;
    line-height: var(--leading-normal);
}

.about-intro > p {
    margin-bottom: var(--space-6);
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.about-intro > p:last-child { margin-bottom: 0; }

.about-description { margin-bottom: var(--space-10); }

.about-description p {
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.about-description p strong,
.about-description p .highlight {
    color: var(--ink);
    font-weight: 600;
}

.term-highlight {
    color: var(--primary-hover);
    font-weight: 600;
}

/* Divisions ----------------------------------------------------------------- */

.company-divisions {
    margin-top: var(--space-12);
}

.division {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.division + .division {
    margin-top: var(--space-8);
}

.division h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.division p {
    color: var(--muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}

/* Service links read as a list of links, not chips inside a card. */
.services-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px clamp(24px, 4vw, 56px);
    list-style: none;
}

.services-list li a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 7px 0;
    color: var(--ink-soft);
    font-size: var(--text-base);
    font-weight: 500;
}

.services-list li i {
    width: 15px;
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--faint);
    text-align: center;
    transition: color var(--dur) var(--ease);
}

.services-list li a:hover {
    color: var(--primary-color);
}

.services-list li a:hover i {
    color: var(--primary-color);
}

/* Expertise ----------------------------------------------------------------- */

.specialization {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.specialization h4 {
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.specialization > p {
    margin-bottom: var(--space-6);
    color: var(--muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* A hairline-ruled spec list rather than a grid of boxes. */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
    border-top: 1px solid var(--line-soft);
}

.sector-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

.sector-item i {
    width: 16px;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--primary-color);
    text-align: center;
}

.sector-item span { font-weight: 500; }

/* Closing ------------------------------------------------------------------- */

.about-conclusion {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.about-conclusion p {
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
}

.about-conclusion p + p { margin-top: var(--space-5); }

.highlight-text {
    display: block;
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--leading-snug);
}

.about-cta {
    margin-top: var(--space-10);
}

/* ==========================================================================
   Careers (home section)
   A light grey, full-bleed band. It still separates from the near-white
   services block above and the white certification strip below, and the
   photograph runs to the viewport edge rather than sitting inside the
   container. The services band already draws the seam above it, so only the
   lower edge is ruled here.
   ========================================================================== */

.careers {
    padding: 0;
    overflow: hidden;
    background-color: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
    color: var(--body);
}

/* The band spans the full width; the text column pads itself back to the
   container's left edge so it still aligns with the rest of the page. */
.careers > .container {
    max-width: none;
    padding-inline: 0;
}

/* Three tracks: a flexible spacer that reproduces the container's left
   margin, the text at half the container width, then the image filling the
   right half to the viewport edge. Derived from the grid's own width rather
   than `vw`, which would include the scrollbar and throw the text out of
   alignment with the rest of the page. */
.careers-content {
    display: grid;
    grid-template-columns:
        minmax(var(--gutter), 1fr)
        minmax(0, calc(var(--container-max) / 2 - var(--gutter)))
        50%;
    align-items: center;
    gap: 0;
}

.careers-text {
    grid-column: 2;
    padding-block: var(--section-y);
    padding-right: clamp(32px, 5vw, 80px);
}

.careers-text h2 {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--primary-hover);
    margin-bottom: var(--space-4);
}

.careers-text h3 {
    font-size: var(--h2);
    color: var(--ink);
    margin-bottom: var(--space-5);
}

.careers-text p {
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-10);
    max-width: 52ch;
}

/* Ruled columns rather than panels, matching the hairline language used for
   the service schedule. */
.careers-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    margin-bottom: var(--space-10);
    max-width: 52ch;
}

.careers-feature {
    padding: var(--space-4) 0 0;
    background: none;
    border: none;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
}

.careers-feature h4 {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.careers-feature p {
    color: var(--body);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    margin-bottom: 0;
    max-width: none;
}

.careers-image {
    grid-column: 3;
    position: relative;
    align-self: stretch;
    min-height: clamp(340px, 40vw, 560px);
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* ==========================================================================
   Certification
   A single ruled strip reads as one credential bar rather than four cards,
   with the logos optically matched to a common height.
   ========================================================================== */

.certification {
    background-color: var(--surface);
}

.certification .section-title {
    margin-bottom: var(--space-5);
}

.certification .section-description {
    margin-bottom: clamp(40px, 5vw, 72px);
}

.certification-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1000px;
    margin-inline: auto;
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.certification-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    padding: clamp(24px, 3vw, 40px);
    border-right: 1px solid var(--line);
    transition: background-color var(--dur) var(--ease);
}

.certification-item:last-child { border-right: none; }

.certification-item:hover {
    background-color: var(--surface-subtle);
}

.certification-item img {
    max-width: 100%;
    max-height: 84px;
    width: auto;
    object-fit: contain;
}

/* Legacy showcase markup (kept for the archived welcome template). */
.certification-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: transparent;
}

.certification-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    overflow: hidden;
}

.certification-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Clients
   ========================================================================== */

.clients {
    background-color: var(--surface-subtle);
    border-block: 1px solid var(--line);
    overflow: hidden;
}

.clients .section-title { margin-bottom: var(--space-5); }

.clients .section-description { margin-bottom: clamp(40px, 5vw, 72px); }

.clients-swiper {
    padding: 0 64px;
    margin-bottom: var(--space-8);
}

/* Every logo is optically centred in a cell of the same size, so the row
   reads as an aligned set rather than loose artwork. */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112px;
    padding: var(--space-4);
}

.swiper-slide img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

.swiper-pagination {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: var(--space-8);
}

.swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 4px;
    background-color: var(--line-strong);
    opacity: 1;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active-main {
    background-color: var(--primary-color);
    transform: none;
}

.swiper-container-horizontal > .swiper-pagination-bullets { bottom: -32px; }

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    width: 36px;
    height: 36px;
    margin-top: 0;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--body);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 12px;
    font-weight: 700;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--primary-tint);
}

.clients-swiper .swiper-button-next {
    right: 0;
    top: 50%;
    z-index: 10;
}

.clients-swiper .swiper-button-prev {
    left: 0;
    top: 50%;
    z-index: 10;
}

/* ==========================================================================
   Contact (home section) & shared form furniture
   ========================================================================== */

.contact {
    background-color: var(--surface-subtle);
}

.contact-intro {
    max-width: 900px;
    margin-inline: auto;
}

.contact-info-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin: var(--space-10) 0;
}

.contact-summary-item {
    padding: var(--space-6);
    text-align: center;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur) var(--ease);
}

.contact-summary-item:hover { border-color: var(--line-strong); }

.contact-summary-item i {
    display: block;
    margin-bottom: var(--space-3);
    font-size: 1.25rem;
    color: var(--primary-color);
}

.contact-summary-item p {
    color: var(--body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.contact-summary-item a { color: var(--body); }

.contact-summary-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-cta { margin-top: var(--space-10); }

.contact-form {
    padding: var(--space-8);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   Goals / vision / mission (shared blocks)
   ========================================================================== */

.goals {
    background-color: var(--surface);
}

.goals-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
}

.goals-text h2 {
    font-size: var(--h2);
    color: var(--ink);
    margin-bottom: var(--space-5);
}

.goals-text p {
    color: var(--body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-5);
}

.vision-mission {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    margin: var(--space-10) 0;
}

.vision,
.mission {
    padding: var(--space-6);
    background-color: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur) var(--ease);
}

.vision:hover,
.mission:hover { border-color: var(--line-strong); }

.vision h3,
.mission h3 {
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    position: relative;
}

.vision h3::after,
.mission h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background-color: var(--primary-color);
}

.commitments { margin-top: var(--space-10); }

.commitment { margin-bottom: var(--space-6); }

.commitment h4 {
    font-size: var(--text-lg);
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.goals-image { position: relative; }

.goals-img {
    width: 100%;
    height: clamp(280px, 34vw, 420px);
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.goals-link {
    background-color: var(--surface-subtle);
    border-block: 1px solid var(--line);
    text-align: center;
}

.goals-link h2 {
    font-size: var(--h2);
    margin-bottom: var(--space-4);
}

.goals-link p {
    max-width: 62ch;
    margin: 0 auto var(--space-8);
    color: var(--muted);
    font-size: var(--text-md);
}

.cta-button-wrap,
.goals-link .cta-button { margin-top: var(--space-6); }

/* ==========================================================================
   Generic content blocks (used by the archived welcome template)
   ========================================================================== */

.about-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 5vw, 56px);
    margin: var(--space-10) 0;
}

.stat-item { text-align: left; }

.stat-number {
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
}

.stat-label {
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-10);
}

.feature {
    padding: var(--space-5);
    text-align: center;
    background-color: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.feature h4 {
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.about-image { position: relative; }

.about-image img {
    width: 100%;
    height: clamp(280px, 34vw, 420px);
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   Page banner (inner pages)
   ========================================================================== */

/* The header overlays this, so the offset is padding rather than margin. */
.page-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(300px, 42vh, 420px);
    padding-block: calc(var(--header-h) + var(--space-12)) clamp(32px, 5vw, 56px);
    background-color: var(--ink);
    background-image: linear-gradient(rgba(10, 12, 16, 0.5) 0%, rgba(10, 12, 16, 0.28) 40%, rgba(10, 12, 16, 0.82) 100%),
                      url('../images/Main Section/red color Petrochemical engineering works .jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: left;
}

.page-banner .container {
    position: relative;
    z-index: 2;
}

.page-banner h1 {
    max-width: 20ch;
    margin-bottom: var(--space-5);
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    font-weight: 700;
    color: #fff;
}

.page-banner p {
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--text-lg);
}

/* ==========================================================================
   Modal content typography
   ========================================================================== */

#modal-title {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    font-size: var(--h3);
    color: var(--ink);
    position: relative;
}

#modal-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background-color: var(--primary-color);
}

#modal-content {
    color: var(--body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

#modal-content h3 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--text-lg);
    color: var(--ink);
}

#modal-content p { margin-bottom: var(--space-4); }

#modal-content ul {
    margin: 0 0 var(--space-5) var(--space-5);
}

#modal-content li { margin-bottom: var(--space-2); }

/* ==========================================================================
   Footer
   Four columns on desktop: brand plate, quick links, contact, social.
   Hairline gradient rules separate the columns; the brand red is reserved
   for the top edge, the heading ticks and hover states.
   ========================================================================== */

.footer {
    position: relative;
    background-color: var(--surface-deep);
    /* A faint wash under the red edge keeps the band from reading as flat. */
    background-image:
        radial-gradient(1100px 340px at 10% 0%, rgba(220, 38, 38, 0.07), transparent 62%);
    color: var(--body);
    padding: clamp(40px, 4vw, 60px) 0 var(--space-6);
    font-size: var(--text-base);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-content {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) 1fr 1.05fr minmax(228px, 0.62fr);
    gap: clamp(24px, 2.8vw, 46px);
    align-items: start;
    margin-bottom: clamp(32px, 3.6vw, 48px);
}

/* The source file is a square canvas whose artwork occupies only a band
   across the middle; the rest is transparent. The box is set to the
   artwork's own 983x627 bounding area and the image is offset to sit in
   it, so the empty canvas is discarded and nothing visible is clipped.
   No frame, border or shadow: the mark sits straight on the band. */
.footer-logo {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 983 / 627;
    overflow: hidden;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 41%;
    margin-bottom: 0;
}

/* Hairline rules give the columns structure without boxing them in. They
   fade at both ends so they read as a seam rather than a border. */
.footer-links,
.footer-contact,
.footer-social {
    position: relative;
    padding-left: clamp(20px, 2.4vw, 40px);
}

/* The social row needs its full width for four targets on one line. */
.footer-social { padding-left: clamp(18px, 1.8vw, 28px); }

.footer-links::before,
.footer-contact::before,
.footer-social::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 1px;
    background-image: linear-gradient(
        180deg,
        rgba(17, 24, 39, 0) 0%,
        rgba(17, 24, 39, 0.16) 16%,
        rgba(17, 24, 39, 0.16) 84%,
        rgba(17, 24, 39, 0) 100%
    );
}

.footer-links h4,
.footer-contact h4,
.footer-social h4 {
    margin-bottom: var(--space-5);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* A short brand tick under each heading, echoing the rule along the top. */
.footer-links h4::after,
.footer-contact h4::after,
.footer-social h4::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    margin-top: var(--space-2);
    border-radius: 2px;
    background-color: var(--primary-color);
}

/* Eight links stacked singly left a tall gap beside the shorter columns;
   two tracks bring the column down to the height of its neighbours. */
.footer-links ul {
    list-style: none;
    columns: 2;
    column-gap: clamp(14px, 1.8vw, 28px);
}

.footer-links li {
    margin-bottom: var(--space-3);
    break-inside: avoid;
}

.footer-links a,
.footer-contact a {
    position: relative;
    display: inline-block;
    color: var(--body);
    text-decoration: none;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* The underline wipes in from the left and out to the right. */
.footer-links a::after,
.footer-contact a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur-slow) var(--ease);
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--ink);
    text-decoration: none;
}

.footer-links a:hover { transform: translateX(3px); }

.footer-links a:hover::after,
.footer-contact a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Each line is its own paragraph in the markup; the label is promoted to a
   block so the value sits beneath it. Labelled lines open a new group. */
.footer-contact p {
    margin-bottom: var(--space-2);
    line-height: var(--leading-snug);
}

.footer-contact p:has(strong) { margin-top: var(--space-4); }

.footer-contact p:first-of-type { margin-top: 0; }

.footer-contact p:last-child { margin-bottom: 0; }

.footer-contact strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--body);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    color: var(--muted);
    font-size: 0.9375rem;
    transition: var(--transition);
}

.social-icon:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
}

.footer-bottom {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-strong);
    color: var(--body);
    font-size: var(--text-sm);
    text-align: center;
}

.footer-bottom p { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .footer-links a,
    .footer-contact a,
    .footer-links a::after,
    .footer-contact a::after,
    .social-icon { transition: none; }

    .footer-links a:hover,
    .social-icon:hover { transform: none; }
}

/* ==========================================================================
   Floating contact button
   Desktop has the header action, so this is a small-screen affordance only.
   ========================================================================== */

.fixed-cta {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 999;
}

.btn-floating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 18px;
    border-radius: var(--radius);
    background-color: var(--primary-color);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-md);
    transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn-floating i {
    font-size: 0.875rem;
    line-height: 1;
}

.btn-floating:hover {
    background-color: var(--primary-hover);
    box-shadow: var(--shadow-overlay);
    color: #fff;
}

.cta-text { font-weight: 500; }

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    /* Two columns: brand + quick links, then contact + social. Only the
       right-hand column of each row keeps its seam. */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(28px, 4vw, 48px);
        row-gap: clamp(32px, 4.5vw, 48px);
    }

    .footer-contact {
        padding-left: 0;
    }

    .footer-contact::before { display: none; }

    .footer-logo { max-width: 340px; }
}

/* The full navigation stops fitting alongside the logo before 991px, so
   the drawer takes over there. script.js uses the same breakpoint. */
@media (min-width: 992px) {
    .fixed-cta { display: none; }
}

@media (max-width: 991px) {
    .header-cta { display: none; }

    /* The About rail collapses into a normal heading block. */
    .about-content {
        grid-template-columns: 1fr;
        grid-template-areas:
            "lead"
            "intro"
            "media"
            "text";
        gap: var(--space-8);
    }

    .about-media { position: static; }

    /* A full-width portrait would fill the whole screen, so it is cropped
       shorter once the columns stack. */
    .about-media img { aspect-ratio: 4 / 5; }

    .nav-list { display: none; }

    /* The closed nav would otherwise share the auto margin with the
       hamburger and pull it to the middle of the header. */
    .nav:not(.mobile-nav-open) { display: none; }

    .mobile-menu-btn { display: flex; }

    .logo-img { height: 44px; }

    .mobile-nav-open .nav-list { display: flex !important; }

    .mobile-nav-open .mobile-menu-close { display: flex; }

    /* Fallback for the hamburger while the drawer is open; script.js also
       sets this so older browsers without :has() stay correct. */
    body:has(.mobile-nav-open) .mobile-menu-btn { display: none; }

    /* Dimmed page behind the drawer. Clicks fall through to the document
       handler that closes the menu. */
    body:has(.mobile-nav-open)::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-header) - 1);
        background-color: rgba(17, 24, 39, 0.4);
        pointer-events: none;
        animation: fadeIn var(--dur) var(--ease) both;
    }

    .careers-content,
    .goals-content {
        grid-template-columns: 1fr;
    }

    .careers-content {
        grid-template-columns: 1fr;
    }

    .careers-text {
        grid-column: 1;
        padding-inline: var(--gutter);
        padding-block: var(--section-y) var(--space-12);
    }

    .careers-image {
        grid-column: 1;
        min-height: 280px;
    }

    .goals-image { order: -1; }

    .certification-image { height: 220px; }

    /* Mobile dropdown collapses inline inside the drawer. */
    .dropdown-menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 var(--space-4);
        border: none;
        border-left: 2px solid var(--line);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        opacity: 0;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
    }

    .dropdown.show .dropdown-menu {
        max-height: 500px !important;
        opacity: 1 !important;
    }

    .dropdown-toggle {
        justify-content: space-between;
        width: 100%;
    }

    .dropdown-toggle.active i { transform: rotate(180deg); }

    .dropdown-item {
        padding: 12px 4px;
        font-size: var(--text-base);
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .hero {
        height: auto;
        min-height: 100svh;
        max-height: none;
    }

    .hero-text { padding-block: calc(var(--header-h) + 32px) 48px; }

    /* Copy spans the full width here, so the scrim is even rather than
       weighted to the left. */
    .hero-overlay {
        background:
            linear-gradient(180deg, rgba(10, 12, 16, 0.72) 0%, rgba(10, 12, 16, 0.5) 40%, rgba(10, 12, 16, 0.8) 100%);
    }

    .tagline-main,
    .tagline-services { max-width: none; }

    /* .services-grid is left to auto-fill: two up on tablet, one on phone. */
    .contact-content,
    .about-features {
        grid-template-columns: 1fr;
    }

    .careers-features,
    .services-list,
    .sectors-grid {
        grid-template-columns: 1fr;
    }

    .about-stats { gap: var(--space-8); }

    .clients-swiper { padding-inline: 44px; }

    .swiper-button-next,
    .swiper-button-prev { width: 32px; height: 32px; }

    .swiper-slide { height: 76px; }

    .swiper-slide img { max-height: 44px; }

    .contact-form { padding: var(--space-5); }

    .modal-content { padding: var(--space-6); }

    .footer { padding-top: var(--space-12); }

    .footer-logo { max-width: 300px; }

    .cta-text { display: none; }

    .btn-floating { padding: 0 14px; }
}

@media (max-width: 700px) {
    .certification-grid { grid-template-columns: repeat(2, 1fr); }

    .certification-item {
        border-bottom: 1px solid var(--line);
        min-height: 116px;
    }

    .certification-item:nth-child(2n) { border-right: none; }

    .certification-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* Below this the columns stack, so every seam and indent comes off and
   the sections separate by whitespace alone. */
@media (max-width: 640px) {
    .footer-content {
        grid-template-columns: 1fr;
        row-gap: var(--space-8);
    }

    .footer-links,
    .footer-contact,
    .footer-social {
        padding-left: 0;
    }

    .footer-links::before,
    .footer-contact::before,
    .footer-social::before { display: none; }

    .footer-logo { max-width: 300px; }

    .footer-links h4,
    .footer-contact h4,
    .footer-social h4 { margin-bottom: var(--space-4); }

    .footer-bottom { text-align: left; }
}

@media (max-width: 560px) {
    .hero-buttons { width: 100%; }

    .hero-buttons .btn { flex: 1 1 100%; }
}