/* ==========================================================================
   NAVIGARE — MAIN STYLESHEET
   Clean rebuild of the WordPress/Avada original
   ========================================================================== */

/* ----- 1. RESET & BASE ---------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Brand colours */
    --navy:        #1a2851;
    --navy-dark:   #131e3f;
    --green:       #4cb08b;
    --green-dark:  #4a9c76;
    --gold:        #d4a548;
    --gold-dark:   #b88a35;
    --white:       #ffffff;
    --off-white:   #f7f7f7;
    --grey-text:   #4a4a4a;
    --light-grey:  #e5e5e5;

    /* Brand gradient line (green → blue → gold) */
    --brand-gradient: linear-gradient(
        to right,
        var(--green) 0%,
        var(--green) 25%,
        #4a90c8 50%,
        #4a90c8 75%,
        var(--gold) 100%
    );

    /* Typography */
    --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Layout */
    --container-max: 1400px;
    --header-height: 100px;
    --side-padding:  6vw;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;   /* clip transient horizontal overflow (e.g. reveal-right
                             slide-ins start 40px to the right) so phones never
                             get a horizontal scrollbar. body already clips too. */
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--grey-text);
    background: var(--white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.25;
}

/* ----- 2. UTILITIES ------------------------------------------------------- */

/* Buttons are styled like ribbon tabs — flat top, slightly rounded bottom corners.
   The original Navigare buttons have a subtle "tab" shape with rounded bottom-right. */
.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--green);
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    text-align: left;
    line-height: 1.35;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 220px;
    height: 60px;
    padding: 12px 20px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.btn-green       { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--gold); }

.btn-gold        {
     background: var(--gold);
     color: var(--white);
}
.btn-gold:hover  { background: var(--navy); }

.btn-navy        {
    background: var(--navy);
    color: var(--white);
    width: 155px;
    height: 40px;
    font-size: 12px;}
.btn-navy:hover  { background: var(--green); }

/* Centered-text buttons (used in CTA banner and team CTA) */
.btn-centered {
    text-align: center;
    padding: 16px 38px;
}

/* The signature multi-colour gradient line under the logo on every page.
   Now uses the actual image asset (menu_header.gif) — a 1200x2 pixel strip. */
.brand-gradient-line {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 12px;
    /* Image stretches across the full width */
    object-fit: contain;
    object-position: center;
}

.image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ----- 3. HEADER ---------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
    padding: 18px var(--side-padding) 0;
    padding-left: 200px;
}

.site-header.scrolled {
    background: var(--navy);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
}

.logo img {
    height: 30px;
    width: auto;
    display: block;
}

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.5px;
    cursor: pointer;
    padding: 0;
    height: 38px; /* Match logo height for vertical alignment */
}

.menu-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 1.5px;
}

.menu-toggle-icon span {
    width: 3.2px;
    height: 3.2px;
    background: var(--white);
    border-radius: 30%
}

/* Header gradient line spans the full header width, beneath both logo and MENU */
.site-header .brand-gradient-line {
    margin-bottom: 0px;
}

/* ----- 4. MENU OVERLAY ---------------------------------------------------- */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    background: var(--navy-dark);
    /* Containment safety net: the desktop overlay positions submenus far to the
       right (see .nav-submenu). Clipping horizontal overflow here guarantees a
       closed overlay can never contribute to the page's horizontal scroll width
       at any viewport, and lets a tall stacked menu scroll vertically on small
       screens. No visible effect on desktop, where the submenus already fit. */
    overflow-x: hidden;
    overflow-y: auto;
}

.menu-overlay.is-open {
    visibility: visible;
    opacity: 1;
}

/* The animated tech/data MP4 video sits behind everything */
.menu-overlay-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark navy tint over the video for readability */
.menu-overlay-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.menu-overlay-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px var(--side-padding) 40px;
    padding-left: 200px;
}

.menu-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-close {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    padding: 4px 0;
}

.menu-close-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.menu-close-icon span {
    width: 4px;
    height: 4px;
    background: var(--white);
    border-radius: 50%;
}

/* Body of the overlay — left nav, right submenu area */
.menu-overlay-body {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 40px;
}

.overlay-nav-primary {
     position: relative;
    gap: 18px;
    width: 100%;
    max-width: 100%;
}

/* Each top-level item is a flex row: link on left, submenu on right */
.nav-item {
    position: relative;
    display: block;
}

.nav-link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--white);
    padding: 8px 0;
    position: relative;
    transition: color 0.25s ease;
    flex-shrink: 0;
    min-width: 280px;
}

/* Animated gold underline that extends across to highlight the submenu */
.nav-link.line::after {
    content: '';
    position: absolute;
    left: 170px;
    bottom: 1px;
    height: 2px;
    width: 0;
    background: var(--gold);
    transition: width 0.4s ease;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

/* Hover and active states turn the link gold and extend the underline */
.nav-item.is-active .nav-link,
.nav-item--active .nav-link {
    color: var(--gold);
}

/* All top-level links turn gold on hover — including Home and Contact us,
   which have no submenu — so hover behaviour is consistent across the menu. */
.nav-link:hover {
    color: var(--gold);
}

/* On hover, the underline extends across the whole row to the submenu */
.nav-item.is-active .nav-link::after {
    width: calc(100% + 430px);
}

/* NOTE: the active page is indicated by gold link text (the rule above). The
   former decorative underline on the active item (.nav-item--active
   .nav-link::after { width:100% }) was removed — it rendered as a stray line
   floating beside the link and was inconsistent with Home/Contact, which have
   no underline. Only the gold-text active indicator remains. */

/* Submenus appear to the right of the parent link, hidden by default */
.nav-submenu {
    position: absolute;
    left: 900px;
    top: 0;

    display: flex;
    flex-direction: column;
    gap: 1px;

    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);

    transition: all .3s ease;
}

.nav-item--has-submenu.is-active .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.nav-submenu a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.05px;
    text-transform: uppercase;
    color: var(--white);
    padding: 4px 0;
    transition: color 0.25s ease;
    width: 200px;
}

.nav-submenu a:hover {
    color: var(--gold);
}

.menu-overlay-footer {
    padding-top: 20px;
}

.menu-overlay-footer p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* ----- 5. HERO ------------------------------------------------------------ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    /* Header floats over the hero; no top margin */
    margin-top: 0;
}

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

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.hero-content {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hero-headline span{
     display: block;
     position: absolute;
     bottom: 240px;
     font-size: 28px;
     width: 740px;
     font-weight: 600;
     text-align: center;
     transform: translateX(-50%);
}

.hero-content img{
     position: absolute;
     height: 190px;
     right: 65px;
     bottom: -30px;
     transform: none;
}

.scroll-down {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--green);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
}

.scroll-line {
    width: 1px;
    height: 50px;
    background: var(--green);
    animation: scroll-pulse 2s ease-in-out infinite;
    transform-origin: top;
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50%      { opacity: 1;   transform: scaleY(1.2); }
}

/* ----- 6. PURPOSE SECTION ------------------------------------------------- */
.purpose-section {
    display: flex;
    min-height: 600px;
    background: #fff;
    margin: 0;
    overflow: hidden;
    margin-left: 150px;
    /* The 150px left indent is part of the desktop design. Width is reduced by
       the same amount so the section's right edge lands on the viewport edge
       instead of overflowing it. The two 590px columns are unaffected, so the
       desktop appearance is identical — this only removes the empty, clipped
       150px strip that previously created horizontal scroll at every width. */
    width: calc(100% - 150px);
}

.purpose-text {
    padding: 100px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    width: 590px;
    box-sizing: border-box;
}

.purpose-heading {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: lighter;
    color: #009B6B;
    line-height: normal;
}

.purpose-text p {
    color: #16244A;
    font-size: 22px;
    line-height: 1.5;
    margin: 0;
}

.purpose-text .btn {
    align-self: flex-start;
}

.purpose-text .btn:hover {
    background-color: #DAB057;
}

.purpose-image {
    position: relative;
    min-height: 600px;
    width: 590px;
    overflow: hidden;
}

.purpose-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----- 7. SERVICES SECTION ------------------------------------------------ */
.services-section {
    background-image: url('../images/bkg1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    margin-bottom: 0px;
    margin-top: 0;
}

.services-grid {
    display: flex;
    flex-direction: row;
    gap: 80px;
    max-width: var(--container-max);
    margin: 0 auto;
    align-items: flex-start;
}

.services-text p {
    color: var(--navy);
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 10px;
    line-height: 1.5;
    width: 350px;
    margin-left:150px;
}

.services-text strong {
    font-weight: 600;
    color: var(--white);
}

.services-text .btn {
    margin-left: 150px;
    margin-bottom: 20px;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-left: 100px;
}

.services-list li {
    display: flex;
    align-items: center;
    gap: 28px;
}

.services-list img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.services-list p {
    color: var(--navy);
    font-size: 20px;
    margin: 0;
}

/* Homepage service labels are navigation links to the What We Do products
   section. They inherit the paragraph's exact look (no change to default
   appearance) and turn gold on hover using the same transition as the site
   navigation. The link wraps the full label, so the entire text is clickable. */
.services-list p a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.services-list p a:hover {
    color: var(--gold);
}

/* ----- 8. TEAM SECTION ---------------------------------------------------- */
.team-section {
    background: var(--navy);
    color: var(--white);
    padding: 55px var(--side-padding);
}

.team-intro {
    max-width: 1100px;
    margin: 0 auto 50px;
}

.team-intro p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--white);
    width: 1100px;
}

.team-grid {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    max-width: 650px;
    margin-left: 120px;
}

.team-cta-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.team-grid {
    display: flex;
    align-items: stretch; /* important */
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.team-card {
    background: var(--white);
    overflow: hidden;
    width: 200px;          /* same width */
    display: flex;
    flex-direction: column;
}

.team-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.team-card-text {
    padding: 20px 22px 26px;
    flex-grow: 1;
}

.team-card-text h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.team-role {
    color: var(--gold);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.team-cta {
    display: inline-block;
    margin-top: 30px;
}

.team-section .team-cta {
    margin-left: 0;
    width: 190px;
    /* Aligns with the left edge of the team grid */
}

/* ----- 8b. TEAM MODAL ----------------------------------------------------- */
/* Triggered when a team card is clicked. Hidden by default. */
.team-card {
    cursor: pointer;
}

.team-card-trigger {
    display: block;
    width: 100%;
    padding: 0;
    background: var(--white);
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--navy);
    font: inherit;
    transition: transform 0.3s ease;
}

.team-card-trigger:hover {
    transform: translateY(-6px);
}

.team-card-trigger:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

/* The modal itself */
.team-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
}

.team-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.team-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 38, 0.85);
    cursor: pointer;
}

/* Side navigation arrows */
.team-modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 56px;
    line-height: 1;
    cursor: pointer;
    padding: 20px;
    transition: color 0.25s ease;
    z-index: 2;
    font-family: var(--font-display);
}

.team-modal-arrow:hover {
    color: var(--white);
}

.team-modal-arrow--prev {
    left: 20px;
}

.team-modal-arrow--next {
    right: 20px;
}

/* The dialog (photo + bio) */
.team-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    background: var(--white);
    overflow: hidden;
    border-radius: 0 8px 0 0;
}

.team-modal-photo {
    position: relative;
    overflow: hidden;
}

.team-modal-photo img {
    max-width: 100%;
    height: auto;
}

.team-modal-body {
    position: relative;
    padding: 50px 60px 50px 50px;
    overflow-y: auto;
    max-height: 90vh;
}

.team-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: var(--green);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.team-modal-close:hover {
    background: var(--green-dark);
}

.team-modal-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--navy);
    margin-bottom: 8px;
}

.team-modal-role {
    color: var(--gold);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 24px;
}

.team-modal-bio p {
    color: var(--navy);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.team-modal-bio p:last-child {
    margin-bottom: 0;
}

.team-modal-bio em,
.team-modal-bio .quote {
    font-style: italic;
}

/* Lock body scroll when modal is open */
body.team-modal-open {
    overflow: hidden;
}


.never-guess-section {
    background: var(--white);
}

.never-guess-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.never-guess-text {
    padding: 100px 60px 100px var(--side-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    width: 590px;
    margin-left: 115px;
}

.never-guess-text p {
    color: var(--navy);
    font-size: 22px;
}

.never-guess-tagline {
    color: var(--gold) !important;
    font-family: var(--font-display);
    font-size: 22px;
    margin: 8px 0 !important;
    font-weight: 600;
}

.never-guess-portal {
    color: var(--green) !important;
    font-size: 18px !important;
    margin-top: 16px !important;
}

.never-guess-text .btn {
    align-self: flex-start;
    width: 180px;
    height: 40px;
    font-size: 12px;
    margin-top: 8px;
}

.never-guess-image {
    position: relative;
    min-height: 500px;
    width: 590px;
}

.never-guess-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* ----- 10. CTA BANNER ----------------------------------------------------- */
.cta-banner {
    background: var(--gold);
    padding: 50px var(--side-padding);
}

.cta-banner-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-banner .btn-navy{
    margin-right: 80px;
}

.cta-banner p {
    color: var(--white);
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    padding-left: 110px;
}

/* ----- 11. FOOTER --------------------------------------------------------- */
.site-footer {
    background: var(--navy);
    color: var(--white);
    padding: 50px var(--side-padding) 30px;
    position: relative;
    padding-left: 200px;
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 30px;
    width: auto;
    display: block;
    margin-bottom: 12px;
}

.footer-logo .brand-gradient-line {
    margin-top: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.4fr;
    gap: 60px;
    padding-top: 10px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 22px;
    color: var(--white);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col a {
    font-size: 14px;
    color: var(--white);
    transition: color 0.25s ease;
}

.footer-col a:hover {
    color: var(--gold);
}

.footer-contact {
    border-left: 1px solid #448fcc;
    border-right: 1px solid #448fcc;
    padding: 0 40px;
}

.footer-address {
    font-size: 14px;
    margin-bottom: 24px;
    color: var(--white);
}

.footer-contact dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 14px;
}

.footer-contact dt {
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact dd a {
    color: var(--white);
}

.footer-contact dd a:hover {
    color: var(--gold);
}

.footer-legal ul {
    margin-bottom: 30px;
}

.copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 40px;
}

.back-to-top {
    /* Scroll-to-top control. Based on the supplied #toTop styling (a fixed tab
       anchored to the bottom edge with rounded top corners), adapted to the
       site's design language:
         - colour uses the brand near-black (--navy-dark) instead of #333, and
           turns green on hover like the rest of the site;
         - it fades in/out (opacity + visibility) for a smooth appearance rather
           than a hard display toggle;
         - z-index sits above page content but below the menu overlay (2000) and
           team modal (3000), so those full-screen layers still cover it
           (the literal 100000 would have floated it over the open menu).
       It is fixed to the viewport's bottom-right on every page and is revealed
       once the user scrolls (the .is-visible class is toggled in scripts.js). */
    position: fixed;
    right: 30px;
    bottom: 0;
    z-index: 1500;
    width: 48px;
    height: 35px;
    background-color: var(--navy-dark);
    border: none;
    border-radius: 4px 4px 0 0;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.back-to-top.is-visible {
    opacity: 0.9;
    visibility: visible;
    pointer-events: auto;
}

.back-to-top:hover {
    background-color: var(--green);
    opacity: 1;
}

/* ----- 12. RESPONSIVE ----------------------------------------------------- */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-legal {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 30px;
    }
    .footer-contact {
        border-right: none;
        padding-right: 0;
    }
}

/* ==================================================================
   NAV / FULL-SCREEN MENU OVERLAY — TABLET & MOBILE (1024px and below)
   --------------------------------------------------------------------
   Why 1024px:
     The desktop overlay lays the primary links out on the left with each
     submenu floating to the RIGHT (.nav-submenu { position:absolute; left:900px }).
     That layout only fits at desktop widths (submenu right edge ~1320px). At
     1024px and below it no longer fits, so the menu is restructured to a
     vertical, tap-to-expand list. Boundary kept in sync with the matchMedia
     check in scripts.js.

   Problems solved:
     1. Horizontal scroll: the absolutely-positioned submenu at left:900px
        stayed in layout even while the overlay was closed, inflating the page
        width on every page below ~1320px. Resetting it to static flow
        (position:static; left:auto) removes that off-canvas box entirely.
     2. Cramped overlay: the desktop 200px left padding is reduced to the normal
        side padding so the menu uses the available width on tablets/phones.
     3. Touch usability: submenus stack beneath their parent and reveal on tap
        (.is-expanded) instead of relying on hover.

   Components affected: .menu-overlay-inner, .nav-item, .nav-link, .nav-submenu.
================================================================== */
@media (max-width: 1024px) {
    /* Drop the heavy desktop left indent so the menu fills the screen. */
    .menu-overlay-inner {
        padding-left: var(--side-padding);
    }

    /* Stack each top-level item; links no longer need the 280px reserve. */
    .nav-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-link {
        min-width: 0;
        font-size: 22px;
    }

    /* Keep the decorative gold hover underline within the link on small
       screens (the desktop "calc(100% + 430px)" extension would overflow).
       The active item has no underline — it is indicated by gold text only. */
    .nav-item:hover .nav-link::after,
    .nav-item.is-active .nav-link::after {
        width: 100%;
    }

    /* ROOT FIX: pull the submenu out of its absolute, far-right desktop
       position and let it flow directly beneath its parent link. This is what
       stops the menu from extending the page width on small screens. */
    .nav-submenu {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        padding-left: 20px;
        padding-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        transform: none;
    }
    /* Reveal a submenu when its parent is tapped (.is-expanded). */
    .nav-item--has-submenu.is-expanded .nav-submenu {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding-top: 12px;
        padding-bottom: 8px;
    }
    /* Disable hover-reveal on touch so submenus don't flicker open. */
    .nav-item--has-submenu:hover .nav-submenu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }
    .nav-item--has-submenu.is-expanded:hover .nav-submenu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    /* Team modal stacks photo on top of bio on mobile */
    .team-modal {
        padding: 0;
    }
    .team-modal-dialog {
        grid-template-columns: 1fr;
        max-height: 100vh;
        height: 100vh;
        max-width: 100%;
    }
    .team-modal-photo {
        max-height: 35vh;
    }
    .team-modal-photo img {
        height: 35vh;
    }
    .team-modal-body {
        padding: 30px 24px;
        max-height: 65vh;
    }
    .team-modal-name {
        font-size: 20px;
    }
    .team-modal-arrow {
        font-size: 36px;
        padding: 12px;
    }
    .team-modal-arrow--prev { left: 4px; }
    .team-modal-arrow--next { right: 4px; }

    :root {
        --side-padding: 24px;
    }

    /* NOTE: purpose / services / never-guess / team are flex layouts; their
       single-column stacking is handled in the consolidated RESPONSIVE LAYER
       at the end of this file (the old grid-template-columns overrides here
       were no-ops on flex containers and have been removed). The spacing
       tweaks below remain useful once those sections are stacked. */
    .purpose-text,
    .never-guess-text {
        padding: 60px 24px;
    }

    .purpose-image,
    .never-guess-image {
        min-height: 320px;
    }

    .services-section,
    .team-section {
        padding: 60px 24px;
    }

    .services-grid {
        gap: 40px;
    }

    .team-grid {
        gap: 24px;
    }

    .cta-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-contact {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 30px 0;
    }

    .footer-legal {
        border-top: none;
    }

    .menu-toggle-text { display: none; }
}

@media (max-width: 480px) {
    .logo img { height: 30px; }
    .hero { min-height: 500px; }
    .services-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}


/* ==========================================================================
   13. WHO WE ARE PAGE — page-specific styles
   --------------------------------------------------------------------------
   Sections use the same --side-padding (6vw) as the rest of the site so
   the left edge of all content lines up with the logo across pages.
   ========================================================================== */


/* ----- 13a. HERO VARIANT (Who We Are) ------------------------------------ */
/* Centered headline overlay on the hero photo */
.hero--wwa {
    align-items: center;
    display: flex;
    justify-content: center;
}

.hero-content--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 40px;
    padding: 0 var(--side-padding);
    width: 100%;
    max-width: 100%;
}

.hero-headline {
    max-width: 780px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}


/* ----- 13b. SHARED TEXT SECTION ----------------------------------------- */
/* Reusable centered/left-aligned text block used on intro, hygiene factors,
   complaints text, etc. */
.text-section {
    background: var(--white);
    padding: 80px 200px;
}

.text-section--centered .text-block {
    text-align: center;
    margin-inline: auto;
}

.text-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1000px;
    margin: 0;
}

.text-block--dark p { color: var(--navy); }
.text-block--light p { color: var(--white); }

.text-block p {
    color: var(--navy);
    font-size: 24px;
    line-height: 1.7;
    margin: 0;
}

/* Green accent paragraph for highlighted passages */
.text-accent-green {
    color: var(--green) !important;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px !important;
    line-height: 1.5 !important;
}


/* ----- 13c. SECTION HEADINGS -------------------------------------------- */
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 30px 0;
}

.section-heading--light { color: var(--white); }
.section-heading--gold  { color: var(--gold); }
.section-heading--navy  { color: var(--navy); }


/* ----- 13d. OUR STORY SECTION (green background) ----------------------- */
.our-story-section {
    background-image:
        url('../images/bkg.jpg');
    background-size: cover;
    background-position: center;
    padding: 80px var(--side-padding);
}

.our-story-section h2{
    margin-left: 110px;
}

.our-story-section .text-block p {
    display: block;
    color: var(--navy);
    font-size: 20px;
    width: 1200px;
    margin-left: 110px;
}

.our-story-section .text-block p span{
    color: var(--white);
}

/* ----- 13e. FEATURE IMAGE SECTION -------------------------------------- */
.feature-image-section {
    padding: 0 var(--side-padding);
    background: var(--white);
}

.feature-image {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.feature-image img {
    width: 90%;
    height: auto;
    max-height: 540px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-left: 110px;
    margin-top: 70px;
}

/* ----- 13f. HYGIENE FACTORS PASSAGE ------------------------------------- */
.industry-insights-section {
    background: var(--white);
    padding: 80px var(--side-padding);
}

.industry-insights-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0;
    margin-left: 110px;
}

.industry-insights-text {
    color: var(--navy);
    font-size: 20px;
}

.industry-insights-highlight {
    font-size: 20px;
    color: var(--green);
}

/* ----- 13f. EXTENDED GOLD CTA BANNER ----------------------------------- */
.cta-banner--extended {
    padding: 90px var(--side-padding);
}

.cta-banner--extended .text-block {
    align-items: flex-start;
}

.cta-banner--extended .text-block p {
    display: block;
    color: var(--white);
    font-size: 20px;
    line-height: 1.6;
    width: 1250px;
}

.cta-banner-tagline {
    color: var(--white) !important;
    font-family: var(--font-display);
    font-size: 20px !important;

    margin: 12px 0 !important;
}

.cta-banner--extended a{
    display: block;
    width: 200px;
    height: 40px;
    font-size: 12px;
    margin-left: 115px;
}

/* ----- 13g. MEET THE TEAM (Who We Are variant) ------------------------- */

.meet-team-section {
    background: var(--navy);
    color: var(--white);
    padding: 55px var(--side-padding);
}

.meet-team-section h2{
    margin-left: 110px;
}

.meet-team-section .text-block {
    max-width: 1150px;
    margin: 0 auto 50px;
    margin-left: 115px;
}

.meet-team-section .text-block span {
    color: var(--gold);
}

.meet-team-section .text-block p {
    font-size: 20px;
    line-height: 1.7;
    color: var(--white);
}

.team-tagline {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

.team-body {
    color: var(--white);
    font-size: 18px;
    line-height: 1.7;
}

/* Three-card team layout */
.team-grid--wwa {
    display: flex;
    align-items: stretch;
    gap: 32px;

    max-width: 1100px;
    margin: 40px auto 0;
}

.team-grid--wwa .team-card {
    background: var(--white);

    overflow: hidden;

    width: 210px;

    display: flex;
    flex-direction: column;
}

.team-grid--wwa .team-img{
    margin-top
}


/* ----- 13h. VALUES SECTION (How We Think and Behave) ------------------- */
.values-section {
    background: var(--white);
    padding: 80px 200px 50px;
}

.values-intro {
    max-width: 1100px;
    margin: 0 0 50px 0;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.7;
}

.values-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Each value card is a collapsible <details>/<summary> row */
.value-card {
    background: var(--navy);
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.value-card:first-child {
    border-radius: 0 30px 0 0;
}

.value-card:last-child {
    border-bottom: none;
}

.value-card summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 22px 32px;
    cursor: pointer;
    list-style: none;
    transition: all 1s ease;
}

.value-card summary::-webkit-details-marker { display: none; }
.value-card summary::marker { content: ''; }

.value-card summary:hover {
    background: var(--green);
}


.value-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.value-title {
    flex: 1;
    text-align: right;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}

.value-card summary:hover .value-title {
    color: var(--navy);
}

.value-chevron {
    flex-shrink: 0;
    color: var(--green);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.3s ease;
    margin-bottom: 10px;
}

.value-card summary:hover .value-chevron {
    color: var(--white);
}

.value-card[open] .value-chevron {
    transform: rotate(90deg);
}

.value-body {
    background-image: url('../images/bkg-1.jpg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 0 32px 22px calc(32px + clamp(48px, 5vw, 64px) + 24px);
}

.value-body p {
    display: block;
    position: relative;
    color: var(--white);
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 1050px;
    right: 80px;
}


/* ----- 13i. COMPLAINTS TEXT + CTA --------------- ----------------------- */

.complaints-section{
    max-width: 1100px;
    margin: 0 0 50px 200px;
    color: var(--navy);
    font-size: 20px;
}

.complaints-content .btn {
    display: block;
    margin-top: 20px;
    width: 250px;
    height: 40px;
    font-size: 12px;
}



/* ----- 13j. BUSINESS UNITS SECTION (pie diagram) ----------------------- */
.business-units-section {
    position: relative;
    background: var(--navy);
    color: var(--white);
    padding: 80px var(--side-padding) 120px;
    overflow: hidden;
}

.business-units-bg {
    position: absolute;
    inset: 0;
    background:
        url('../images/what-we-do-bkg.jpg') center/cover no-repeat;
    z-index: 0;
}

.business-units-inner {
    display: block;
    position: relative;
    z-index: 1;
    margin-left: 115px;
}

.business-units-intro {
    margin: 0 0 40px 0;
    color: var(--white);
    font-size: 20px;
}

/* Pie diagram — four gold quadrants forming a circle, with a white
   "People & Capital" centre. Built with Flexbox + border-radius corners. */
.pie-diagram {
    --pie-size: clamp(280px, 38vw, 460px);
    --pie-gap: calc(var(--pie-size) * 0.055);
    --pie-centre: calc(var(--pie-size) * 0.32);

    position: relative;
    width: var(--pie-size);
    height: var(--pie-size);
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pie-gap);
    border-radius: 50%;
}

.pie-quadrant {
    position: relative;
    flex: 0 0 calc(50% - var(--pie-gap) / 2);
    height: calc(50% - var(--pie-gap) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 16px;
}

/* Round outer corner of each quadrant so together they form a circle */
.pie-quadrant--top-left     { border-radius: 100% 0 0 0; }
.pie-quadrant--top-right    { border-radius: 0 100% 0 0; }
.pie-quadrant--bottom-left  { border-radius: 0 0 0 100%; }
.pie-quadrant--bottom-right { border-radius: 0 0 100% 0; }

.pie-label {
    display: inline-block;
    max-width: 70%;
    line-height: 1.3;
}

/* Push labels toward outer half of each quadrant */
.pie-quadrant--top-left     .pie-label { transform: translate(-15%, -15%); }
.pie-quadrant--top-right    .pie-label { transform: translate(15%, -15%); }
.pie-quadrant--bottom-left  .pie-label { transform: translate(-15%, 15%); }
.pie-quadrant--bottom-right .pie-label { transform: translate(15%, 15%); }

/* White centre circle */
.pie-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pie-centre);
    height: var(--pie-centre);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--navy);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 5;            /* keep the centre circle above the hover panels */
}

/* ----- Business-unit hover panels ------------------------------------------
   Hovering / focusing / tapping a gold quadrant turns that quadrant into a
   dark-navy panel listing the unit's services. The panel is absolutely
   positioned to fill its OWN quadrant exactly (inset: 0), so it occupies the
   precise space of the hovered quadrant, respects the same gap as the gold
   segments, aligns perfectly with its neighbours and never extends past the
   chart. It changes neither the chart's size nor position. Only one quadrant
   can be hovered / active at a time, so only one panel is ever shown. */
.pie-info {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* hover is tracked on the quadrant, not the panel */
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.pie-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.pie-info li {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

/* Navigare brand mark (the green caret icon) before each service item.
   Sized in `em` so it scales with the list's font-size at every breakpoint,
   and painted with `contain` so the square asset is never distorted. The
   parent <li> is a flex row with `align-items: center`, which keeps the icon
   vertically centred against the text and the gap consistent. The same rule
   styles the mobile panel list, which mirrors these items below the chart. */
.pie-info li::before,
.pie-mobile-panel-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    background: url('../images/Navigare_icon.png') center / contain no-repeat;
}

/* Push each panel's list toward its quadrant's OUTER edge (away from the
   centre circle) and centre it vertically, matching the reference. */
.pie-quadrant--top-left     .pie-info,
.pie-quadrant--bottom-left  .pie-info { justify-content: flex-start; text-align: left; }
.pie-quadrant--top-right    .pie-info,
.pie-quadrant--bottom-right .pie-info { justify-content: flex-end;   text-align: left; }

/* Keep the label readable while idle, then fade it out as its panel appears
   so nothing shows through along the panel edges. */
.pie-label { transition: opacity 0.2s ease; }

/* Reveal rules.
   - Desktop: only on devices with a true hovering pointer, so touchscreens
     don't get a "stuck" hover state (taps are handled in JS instead).
   - Keyboard: focus shows the panel.
   - Touch / JS: the .is-active class (toggled on tap) shows the panel. */
@media (hover: hover) and (pointer: fine) {
    .pie-quadrant:hover .pie-info { opacity: 1; visibility: visible; }
    .pie-quadrant:hover .pie-label { opacity: 0; }
}
.pie-quadrant:focus-within .pie-info,
.pie-quadrant.is-active     .pie-info { opacity: 1; visibility: visible; }
.pie-quadrant:focus-within .pie-label,
.pie-quadrant.is-active     .pie-label { opacity: 0; }


/* ----- Mobile info panel (below the chart) ---------------------------------
   On small screens the per-quadrant panels are too small to hold the service
   lists without overflowing the circle, so the selected unit's details are
   shown here instead — full-width, in normal document flow beneath the pie.
   Hidden by default (and on desktop); revealed only on small screens by the
   small-screen block further below, and populated by scripts.js. */
.pie-mobile-panel {
    display: none;              /* desktop + default state */
    box-sizing: border-box;
    margin: 28px auto 0;
    max-width: var(--pie-size, 460px);
    padding: 20px 22px;
    background: rgba(26, 40, 81, 0.92);     /* deep navy, matches the panels */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--green);    /* brand accent edge */
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.pie-mobile-panel-title {
    margin: 0 0 12px;
    color: var(--green);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.pie-mobile-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--white);
}

.pie-mobile-panel-list li {
    display: flex;
    align-items: center;
    gap: 9px;
}

@keyframes pieMobilePanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ----- 13k. RESPONSIVE OVERRIDES FOR WHO WE ARE ----------------------- */

/* Pie chart — responsive layout (tablet + phone).
   The Business Units section drops its desktop left-indent at <=1024px and runs
   as a single full-width column, so the chart's responsive sizing, centring,
   label placement and spacing all live here, covering the whole range from
   large tablets down to small phones. Sizing is fluid (no fixed px on the small
   end) so the chart fills the available width and scales smoothly; auto inline
   margins keep it perfectly centred, and it can never shift or overflow. */
@media (max-width: 1024px) {
    /* Full-width column for the chart to centre within. */
    .business-units-inner {
        margin-inline: 0;
        width: 100%;
    }

    /* Fluid diameter: fill the column width minus both gutters and a small even
       inset for breathing room, capped so it doesn't grow unbounded on the
       widest tablets. Horizontally centred; vertical rhythm set below. */
    .pie-diagram {
        --pie-size: min(420px, calc(100vw - 2 * var(--side-padding) - 24px));
        --pie-gap: calc(var(--pie-size) * 0.05);
        margin: 0 auto;
    }
    .pie-mobile-panel {
        margin-inline: auto;
    }

    /* Centre each label within its quadrant. The desktop layout nudges labels
       toward the outer corners; the reference centres them, so the per-corner
       transforms are cancelled here. */
    .pie-quadrant .pie-label {
        transform: none;
        max-width: 86%;
    }

    /* Open, vertically-balanced rhythm: clear gaps between the heading, the
       intro line and the chart, with even space left around the chart (the
       intro's bottom margin sets the space above; the section padding the space
       below). Keeps the section feeling open rather than cramped. */
    .business-units-section .section-heading {
        margin-bottom: 36px;
    }
    .business-units-intro {
        margin-bottom: 48px;
    }
}

/* Pie chart — small-screen behaviour switch (phones).
   At phone widths the chart's quadrants are too small to host their service
   panels, so we take the panels out of the quadrants entirely: the in-quadrant
   .pie-info is removed (guaranteeing the pie stays a perfect, symmetrical circle
   that nothing is ever drawn on top of), and the selected unit's details appear
   in the shared .pie-mobile-panel below the chart. The selected quadrant keeps
   its label and is tinted navy so it's clear which unit is in view. Larger
   tablets (769–1024px) keep the in-quadrant panels, which fit at that size. */
@media (max-width: 768px) {
    .pie-info {
        display: none;
    }

    /* The quadrant no longer hosts a panel, so keep its label readable even
       when active (the desktop rule fades it out to reveal the in-quadrant
       panel, which doesn't exist here). */
    .pie-quadrant.is-active .pie-label,
    .pie-quadrant:focus-within .pie-label {
        opacity: 1;
    }

    /* Selected-segment indicator: tint the active quadrant navy. Same box, so
       the circle stays perfectly round and symmetrical — only the colour
       changes. */
    .pie-quadrant {
        transition: background-color 0.25s ease;
    }
    .pie-quadrant.is-active {
        background: var(--navy);
    }

    .pie-mobile-panel:not([hidden]) {
        display: block;
        animation: pieMobilePanelIn 0.28s ease both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pie-mobile-panel:not([hidden]) {
        animation: none;
    }
    .pie-quadrant {
        transition: none;
    }
}

@media (max-width: 768px) {
    .text-section,
    .our-story-section,
    .meet-team-section,
    .values-section,
    .business-units-section,
    .cta-banner--extended {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .hero-headline {
        font-size: 17px;
    }

    .value-card summary {
        padding: 18px 20px;
        gap: 16px;
    }

    .value-title {
        font-size: 15px;
    }

    .value-body {
        padding: 0 20px 18px 20px;
    }

    .team-grid--wwa {
        gap: 20px;
    }
}

@media (max-width: 600px) {
    /* Small-screen type tuning only. The chart's size, gap, label centring and
       vertical spacing are handled fluidly in the (max-width: 768px) block
       above, so they're not repeated here. */
    .pie-quadrant {
        font-size: 13px;
        padding: 8px;
    }

    .pie-label {
        line-height: 1.25;
    }

    .pie-center {
        font-size: 13px;
    }

    .section-heading {
        font-size: 24px;
    }
}

/* ==========================================================================
   14. WHAT WE DO PAGE
   - Reuses the global .hero / .section-heading / .scroll-down components.
   - Introduces a self-contained ".offering-*" accordion that mirrors the
     visual language of the Who We Are ".value-card" accordion, but supports
     rich body content (lead line + sub-headings + multiple paragraphs).
   - Native <details>/<summary> means NO JavaScript is required.
   ========================================================================== */

/* ----- 14a. HERO VARIANT (What We Do) ---------------------------------- */
/* Same centred-overlay treatment as the Who We Are hero. The navy tint over
   the finance photo is applied here so the white headline stays legible. */
.hero--wwd {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* The intro copy sits centred over the hero, slightly above mid-line, with
   the scroll cue anchored toward the bottom — matching the original layout. */
.hero--wwd .hero-content--centered {
    gap: clamp(60px, 16vh, 150px);
    justify-content: flex-start;
    padding-top: clamp(120px, 26vh, 240px);
}

.hero--wwd .hero-headline {
    max-width: 820px;
    font-size: 28;
    font-weight: 400;
    line-height: 1.45;
    margin-bottom: 50px;
}



/* ----- 14b. OFFERING SECTION (Products / Market Segments) -------------- */
/* Shared wrapper for both accordion groups. Dark by default (Products and
   Services), with a light modifier for the Market Segments group. */
.offering-section {
    background: var(--white);
    padding: 50px var(--side-padding);
}

.offering-section--light {
    background: var(--white);
}

/* The gold heading sits above the list, left-aligned, on both groups. */
.offering-section .section-heading {
    max-width: var(--container-max);
    margin: 0 auto 40px;
    margin-left: 115px;
}


/* ----- 14c. OFFERING ACCORDION LIST ------------------------------------ */
.offering-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Each row is a stand-alone navy "tab" card with the signature rounded
   top-right corner used throughout the brand. */
.offering-card {
    background: var(--navy);
    color: var(--white);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.offering-card:first-child {
    border-radius: 0 30px 0 0;
}

/* On the light section the navy cards need a touch more separation from the
   white page behind them. */
.offering-section--light .offering-card {
    box-shadow: 0 8px 24px rgba(26, 40, 81, 0.22);
}

/* Clickable header row: icon + title + chevron, vertically centred. */
.offering-card summary {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 36px;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s ease;
}

/* Hide the default disclosure triangle across browsers. */
.offering-card summary::-webkit-details-marker { display: none; }
.offering-card summary::marker { content: ''; }

.offering-card summary:hover {
    background: var(--green);
}

/* Keyboard focus visibility for accessibility. */
.offering-card summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -4px;
}

/* The brand icons already include their own circular ring, so the wrapper
   only needs to fix the box size and keep them from shrinking. */
.offering-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offering-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Title is pushed left, chevron right — title takes the remaining space.
   In the screenshots the title is right-aligned within that space. */
.offering-title {
    flex: 1;
    text-align: right;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}

.offering-card summary:hover .offering-title {
    color: var(--navy);
}

/* Chevron rotates from "›" (closed) to a downward caret when open. */
.offering-chevron {
    flex-shrink: 0;
    color: var(--green);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.3s ease;
    margin-bottom: 10px;
}

.offering-card summary:hover .offering-chevron {
    color: var(--white);
}

.offering-card[open] .offering-chevron {
    transform: rotate(90deg);
}


/* ----- 14d. OFFERING BODY (expanded panel) ----------------------------- */
/* The expanded panel uses the faint chart photo as a textured backdrop with
   a navy wash so the white copy stays readable — matching the screenshots. */
.offering-body {
    position: relative;
    padding: 36px clamp(28px, 5vw, 64px) 44px;
    background:
        linear-gradient(rgba(26, 40, 81, 0.55), rgba(26, 40, 81, 0.55)),
        url('../images/bkg-1.jpg') center/cover no-repeat;
}

.offering-body > * {
    max-width: 1180px;
}

.offering-body p {
    color: var(--white);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.7;
    margin: 0;
}

/* Intro line such as "Our Data offering is fourfold:". */
.offering-lead {
    margin-bottom: 28px;
}

/* Sub-headings (e.g. TRADING AND MARKET STRUCTURE) carry the small green
   Navigare brand mark via a ::before pseudo-element, so the markup stays clean
   and the icon is decorative only. */
.offering-subheading {
    position: relative;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 26px 0 8px;
    padding-left: 22px;
}

/* Tighten the gap between the first sub-heading and any lead line above it. */
.offering-lead + .offering-subheading {
    margin-top: 4px;
}

.offering-subheading:first-child {
    margin-top: 0;
}

.offering-subheading::before {
    content: "";                /* Navigare brand mark, matching the list bullets */
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 0.85em;
    height: 0.85em;
    background: url('../images/Navigare_icon.png') center / contain no-repeat;
}


/* ----- 14e. WHAT WE DO RESPONSIVE -------------------------------------- */
@media (max-width: 768px) {
    .offering-section {
        padding: 56px var(--side-padding);
    }

    .offering-card summary {
        padding: 18px 20px;
        gap: 16px;
    }

    .offering-icon {
        width: 48px;
        height: 48px;
    }

    .offering-title {
        text-align: left;     /* easier to read on a narrow column */
    }

    .offering-chevron {
        font-size: 28px;
    }

    .offering-body {
        padding: 26px 20px 32px;
    }
}

/* ==========================================================================
   15. CONTACT US PAGE
   - Reuses the global .hero / .scroll-down components.
   - Two-column section: contact details (left) + embedded map (right),
     built with CSS Grid and collapsing to a single column on small screens.
   ========================================================================== */

/* Accessibility helper: visible to screen readers, hidden visually.
   Used for the "Contact Us" heading that the original design omits on screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- 15a. HERO VARIANT (Contact Us) ---------------------------------- */

.hero--contact .hero-content--centered {
    justify-content: flex-end;
    gap: 0;
    padding-bottom: clamp(40px, 8vh, 80px);
}


/* ----- 15b. CONTACT SECTION (details + map) ---------------------------- */
.contact-section {
    background: var(--white);
    padding: 90px var(--side-padding);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
}


/* ----- 15c. CONTACT DETAILS (definition list) -------------------------- */
.contact-details {
    /* Nudge the block toward the column centre, matching the original layout. */
    padding-left: 115px;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each row pairs a bold navy label with its value, aligned at the top so
   multi-line values (Post, Address) read cleanly beside their label. */
.contact-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px;
    align-items: start;
}

.contact-row dt {
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.contact-row dd {
    margin: 0;
    color: var(--navy);
    font-size: 20px;

    line-height: 1.5;
}

.contact-row dd a {
    color: var(--navy);
    transition: color 0.25s ease;
}

.contact-row dd a:hover {
    color: var(--green);
}


/* ----- 15d. CONTACT MAP (responsive iframe frame) --------------------- */
.contact-map {
    position: relative;
    width: 100%;
    /* Maintain a steady aspect ratio so the map never collapses or overflows. */
    aspect-ratio: 16 / 11;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(26, 40, 81, 0.18);
}

.contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* ----- 15e. CONTACT RESPONSIVE ----------------------------------------- */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

    .contact-map {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 56px var(--side-padding);
    }
}

@media (max-width: 480px) {
    /* On very narrow screens stack label above value for breathing room. */
    .contact-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ==========================================================================
   16. DISCLAIMER / LEGAL PAGE
   - Text-only page: navy title band (sits behind the fixed transparent
     header) + a single constrained-measure column of body copy.
   - Self-contained ".legal-*" namespace so it never touches the shared
     .text-section used on Who We Are.
   ========================================================================== */

/* ----- 16a. TITLE BAND -------------------------------------------------- */
/* Top padding clears the fixed header; the navy background keeps the white
   logo + MENU legible since there is no hero photo on this page. */
.disclaimer-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--navy);
    z-index: 1000;
    padding: 18px var(--side-padding) 0;
    padding-left: 200px;
}

.disclaimer-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
}


.contact-site-header .logo img {
    height: 30px;
    width: auto;
    display: block;
}

.legal-header {
    padding-top: 110px;
}

.legal-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.legal-title {
    color: var(--gold);
    font-size: 38px;
    font-weight: 500;
    line-height: 1.05;
    max-width: 1000px;
    margin-left: 145px;
}


/* ----- 16b. CONTENT COLUMN --------------------------------------------- */
.legal-section {
    background: var(--white);
    padding: 40px var(--side-padding) 90px;
    padding-bottom: 40px;
}

/* Constrained measure — legal copy is dense, so cap line length for
   readability rather than letting it span the full container width. */
.legal-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 21px;
    color: var(--navy);
}

.legal-content p {
    display: block;
    color: var(--navy);
    font-size: 16px;
    font-weight: 600;
    width: 1100px;
    margin-left: 115px;
}

/* Inline links pick up the brand green on hover, consistent with the rest
   of the site. */
.legal-content a {
    color: var(--blue-dark);
    font-weight: 700;
    font-style: italic;
    transition: color 0.25s ease;
}

.legal-content a:hover {
    color: var(--green-dark);
}

/* Bold lead-in sub-sections ("Research Content", "Privacy & PAIA Statement"). */
.legal-subheading {
    margin: 16px 0 0;
    color: var(--navy);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05;
    margin-left: 115px;
}


/* ----- 16c. LEGAL RESPONSIVE ------------------------------------------- */
@media (max-width: 768px) {
    .legal-header {
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 36px;
    }

    .legal-section {
        padding-top: 40px;
        padding-bottom: 60px;
    }
}

/* ==========================================================================
   18. ICON HOVER SWAP (green default -> white on hover)
   - Applies to .offering-icon (What We Do) and .value-icon (Who We Are).
   - The original green icon (.icon-default) stays in normal flow, so each
     container keeps its exact existing size, alignment, spacing and
     responsive behaviour. The matching *_white_transparent icon (.icon-hover)
     is layered directly on top and cross-fades in on hover.
   - Only opacity/position are touched here; no typography, colours, card
     layout or other animations are changed.
   ========================================================================== */

/* Positioning context for the overlay (does not affect box size). */
.offering-icon,
.value-icon {
    position: relative;
}

/* Default green icon: keeps its existing sizing rules, only fades on hover. */
.offering-icon .icon-default,
.value-icon .icon-default {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* White icon stacked exactly over the green one, hidden until hover. */
.offering-icon .icon-hover,
.value-icon .icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Offering icons live in a fixed square box -> overlay fills it exactly. */
.offering-icon .icon-hover {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Value icons are sized from the image itself (the existing 70% rule). Match
   the green image's width and let height follow the square aspect ratio so the
   white overlay lands pixel-for-pixel on top. */
.value-icon .icon-hover {
    width: 70%;
    height: auto;
    object-fit: contain;
}

/* Cross-fade: on row hover, green fades out and white fades in. */
.offering-card summary:hover .offering-icon .icon-default,
.value-card summary:hover .value-icon .icon-default {
    opacity: 0;
}

.offering-card summary:hover .offering-icon .icon-hover,
.value-card summary:hover .value-icon .icon-hover {
    opacity: 1;
}

/* ==========================================================================
   19. RESPONSIVE LAYER (consolidated tablet & mobile corrections)
   --------------------------------------------------------------------------
   The desktop design (>= 1440px) is the reference and is intentionally left
   untouched: every rule below lives inside a max-width media query, so it can
   only ever affect smaller screens. Breakpoints are ordered widest -> narrowest
   and each is documented with WHY it exists, WHAT it fixes and WHICH components
   it touches. Nav/overlay responsiveness is handled separately in section 12.

   Root causes addressed here:
     - Several content blocks use desktop-tuned FIXED widths (590-1250px) and
       large editorial LEFT INDENTS (110-150px). On narrower viewports these
       cannot shrink, producing horizontal scroll and cramped/overlapping text.
     - Two-column sections built with flexbox never collapsed on small screens
       (the previous grid-template overrides were no-ops on flex containers).
   The fixes convert the fixed widths to fluid (max-width) values, neutralise
   the indents, and stack the multi-column sections — all without altering the
   desktop appearance.
   ========================================================================== */

/* ==================================================
   LAPTOP BREAKPOINT (1400px and below)
   Purpose:
     The "Our story" body copy uses a fixed width:1200px plus a 110px indent.
     Together with the section's side padding this exceeds the viewport on
     standard laptops (it overflows at ~1396px, e.g. 1366px screens) while
     staying within bounds at >=1440px. Capping it fluidly here keeps the
     reference desktop (>=1440px) identical and removes the laptop scroll.
   Affects: .our-story-section .text-block p
================================================== */
@media (max-width: 1400px) {
    .our-story-section .text-block p {
        width: auto;
        max-width: 100%;
    }
}

/* ==================================================
   TABLET & MOBILE BREAKPOINT (1024px and below)
   Purpose:
     Collapse the desktop two-column / heavily-indented editorial layout into a
     clean single-column flow so nothing overflows or crowds on tablets and
     phones. This is the main structural breakpoint.
   What it fixes:
     1. Stacks the flex/grid two-column sections (purpose, services,
        never-guess, team) into one full-width column.
     2. Converts desktop fixed-width paragraphs to fluid width so they wrap to
        the viewport instead of forcing horizontal scroll.
     3. Removes the 110-150px editorial left indents that waste space / overflow
        once the screen is narrow.
     4. Trims oversized horizontal section padding (200px) to the page gutter.
   Affects: purpose / services / never-guess / team sections, our-story,
     meet-the-team, business-units, industry-insights, value cards, CTA banner,
     legal page and the who-we-are hero headline.
================================================== */
@media (max-width: 1024px) {

    /* --- 1. Stack the two-column "purpose" section ------------------------ */
    .purpose-section {
        flex-direction: column;
        margin-left: 0;        /* drop the 150px desktop indent */
        width: 100%;           /* was calc(100% - 150px) for the indent */
    }
    .purpose-text,
    .purpose-image {
        width: 100%;           /* were fixed 590px columns */
    }

    /* --- 2. Stack the "services" section (flex row -> column) ------------- */
    .services-grid {
        flex-direction: column;
        gap: 40px;
    }
    .services-text p {
        width: auto;           /* was fixed 350px */
        margin-left: 0;        /* was 150px */
    }
    .services-text .btn {
        margin-left: 0;        /* was 150px */
    }
    .services-list {
        margin-left: 0;        /* was 100px */
    }

    /* --- 3. Stack the "never guess" section (grid -> single column) ------- */
    .never-guess-grid {
        grid-template-columns: 1fr;
    }
    .never-guess-text,
    .never-guess-image {
        width: 100%;           /* were fixed 590px columns */
    }
    .never-guess-text {
        margin-left: 0;        /* was 115px */
    }

    /* --- 4. Team grid: stays a row on tablet (it fits); stacks at <=768px - */

    /* --- 5. Fluid body copy: remove desktop fixed widths + indents -------- */
    .team-intro p,
    .cta-banner--extended .text-block p,
    .value-body p,
    .legal-content p {
        width: auto;
        max-width: 100%;
    }
    /* The value-card body copy is nudged left 80px on desktop (position:relative;
       right:80px). With the reduced mobile padding that would push text off the
       left edge, so the nudge is removed here. */
    .value-body p {
        right: 0;
    }

    /* --- 6. Neutralise editorial left indents (110-150px) ---------------- */
    .our-story-section h2,
    .our-story-section .text-block p,
    .meet-team-section h2,
    .meet-team-section .text-block,
    .business-units-inner,
    .industry-insights-content,
    .offering-section .section-heading,
    .cta-banner--extended a,
    .feature-image img,
    .complaints-section,
    .legal-title,
    .legal-subheading,
    .legal-content p {
        margin-left: 0;
    }

    /* --- 7. Trim oversized horizontal padding to the page gutter --------- */
    .text-section {
        padding: 60px var(--side-padding);
    }
    .values-section {
        padding: 60px var(--side-padding) 40px;
    }
    /* The footer and the disclaimer's fixed header both carry an extra 200px
       desktop left indent; reset them so their contents line up with the page
       gutter and don't extend the layout on phones. */
    .site-footer,
    .disclaimer-header {
        padding-left: var(--side-padding);
    }

    /* --- 8. Off-grid sections onto the shared gutter --------------------- */
    /* These two sections position their content with desktop left-margins
       instead of the standard section padding, so once those margins are
       reset (above) their content sits flush at x=0 while every other section
       starts at the page gutter. Give them the same horizontal gutter so all
       headings, copy and buttons share one left/right edge on tablet + phone. */
    .complaints-section,
    .legal-header {
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }
    /* Leftover desktop spacing on the home CTA button — drop it so the button
       aligns to the same gutter as the surrounding copy. */
    .cta-banner .btn-navy {
        margin-right: 0;
    }
}

/* ==================================================
   MOBILE BREAKPOINT (768px and below) — fine tuning
   Purpose:
     With the page gutter now at 24px (set in the existing 768px block), tidy a
     few elements that are still tuned for wider screens.
   What it fixes:
     - The who-we-are hero headline (fixed 740px) is capped to the viewport so
       it never overflows on phones while staying centred.
     - The feature image and value-card body lose their wide left offsets so
       they use the full mobile width.
   Affects: .hero-headline span, .feature-image img, .value-body
================================================== */
@media (max-width: 768px) {
    .hero-headline span {
        width: min(740px, calc(100vw - 48px));
        max-width: calc(100vw - 48px);
    }
    .feature-image img {
        width: 100%;
    }
    .value-body {
        /* Was a ~120px left indent; reduce to a comfortable mobile inset. */
        padding-left: 28px;
        padding-right: 24px;
    }
    /* Stack the team cards into one column on phones (they remain a row on
       tablets, where there is room). Affects home + who-we-are team grids. */
    .team-grid {
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
        margin-left: 0;
    }
}

/* ==================================================
   SMALL-PHONE BREAKPOINT (480px and below)
   Purpose:
     Guarantee the business-units pie diagram (min 280px) plus its section
     padding fits inside the smallest target (320px) without overflow, and keep
     its labels legible.
   Affects: .pie-diagram, .pie-quadrant
================================================== */
@media (max-width: 480px) {
    /* The legal page title is one long string ("...CONFIDENTIALITY...") whose
       longest word is wider than a 320px screen at the desktop 38px size.
       Scale it down and allow long words to wrap so it never overflows.
       (The pie chart is sized fluidly in the 768px block above.) */
    .legal-title {
        font-size: clamp(24px, 8vw, 32px);
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   9. SCROLL-REVEAL ANIMATIONS  (IntersectionObserver-driven)
   --------------------------------------------------------------------------
   A subtle fade-up entrance for content as it scrolls into view, matching the
   feel of the original Navigare site (gentle upward drift + fade, ~0.7s).

   Purely additive — no existing rule, layout, colour, spacing or type above
   is altered. Safe degradation:
     • A tiny inline script in each animated page's <head> adds `.has-reveal`
       to <html> BEFORE first paint. The hidden start-state below is scoped to
       that class, so if JavaScript is unavailable the elements are never
       hidden and the page renders exactly as it did before.
   Direction is chosen per element to mirror the original site's motion:
   text/left-hand content slides in from the left (.reveal-left), images and
   right-hand content slide in from the right (.reveal-right), and stacked card
   groups rise up (.reveal-up). `.reveal` is the shared hook the observer binds
   to; the directional class only changes the starting transform.
   ========================================================================== */

/* Hidden start-state — applied only when JS is available (.has-reveal on <html>).
   Default direction is up; directional modifiers below override the transform. */
.has-reveal .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Directional start offsets (same distance/timing as the default, only the axis
   and sign change). Listed after the base rule so they win the transform. */
.has-reveal .reveal-up    { transform: translateY(40px); }
.has-reveal .reveal-left  { transform: translateX(-40px); }
.has-reveal .reveal-right { transform: translateX(40px); }

/* Revealed end-state — added by the observer when the element enters view.
   Higher specificity than the directional rules, so it settles every direction
   to its natural position. */
.has-reveal .reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Stagger helpers — small escalating delays for cascaded reveals
   (e.g. heading -> text -> button, or a row of cards). */
.has-reveal .reveal-delay-1 { transition-delay: 0.12s; }
.has-reveal .reveal-delay-2 { transition-delay: 0.24s; }
.has-reveal .reveal-delay-3 { transition-delay: 0.36s; }
.has-reveal .reveal-delay-4 { transition-delay: 0.48s; }

/* ==========================================================================
   10. SUBTLE HOVER MOTION on summary content  (desktop pointers only)
   --------------------------------------------------------------------------
   On hover of a value-card / offering-card summary, the icon and the title
   inside it nudge a few pixels to the right — complementing the horizontal
   scroll-reveal language. The OUTER summary element itself does not move,
   which preserves the card visually in every detail that already existed:
     • the card's background, border-bottom, box-shadow and border-radius
       all stay pinned in place
     • `.offering-card`'s `overflow: hidden` cannot clip anything because
       nothing inside ever moves further than the 6px nudge (well within
       the summary's 36px horizontal padding)
     • every existing hover style — green background, navy title text,
       icon swap, chevron colour change — is preserved exactly as-is
   The chevron is intentionally left alone: it already owns a transform
   (the 90° rotation when the parent <details> is open), and adding a
   hover translation would fight that existing interaction.
   The whole block sits inside (hover: hover) and (pointer: fine) so touch
   devices that emulate :hover on tap never get stuck mid-translation.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .value-icon,
    .value-title,
    .offering-icon,
    .offering-title {
        transition: transform 0.3s ease;
    }
    .value-card summary:hover .value-icon,
    .value-card summary:hover .value-title,
    .offering-card summary:hover .offering-icon,
    .offering-card summary:hover .offering-title {
        transform: translateX(6px);
    }
}


/* ==========================================================================
   MOBILE-ONLY HEADER + BRAND-GRADIENT ADJUSTMENTS  (<= 768px)
   --------------------------------------------------------------------------
   Phone-scoped only — the tablet (769–1024px) and desktop layouts are left
   exactly as they were. Placed at the end of the file so it cleanly overrides
   the base header padding and the <=1024px disclaimer-header reset.

   1. Brand gradient: remove the decorative gradient line from the page headers
      on mobile. It is intentionally kept everywhere else it appears — i.e. the
      footer — and brand COLOURS on buttons/links are untouched.
   2. Header layout: the desktop header carries a 200px left indent (to line the
      logo up with the desktop editorial column). On phones that just pushes the
      logo inward, so we replace it with equal ~18px gutters and lay the row out
      edge-to-edge with Flexbox: logo hard-left, MENU hard-right, vertically
      centred. The header stays transparent over the hero (background untouched).
   ========================================================================== */
@media (max-width: 768px) {
    /* 1 — Brand gradient line: headers only; the footer keeps its line. */
    .site-header .brand-gradient-line,
    .disclaimer-header .brand-gradient-line {
        display: none;
    }

    /* 2 — Equal horizontal padding removes the desktop 200px left indent so the
       logo sits hard-left and MENU hard-right, with consistent side gutters. */
    .site-header,
    .disclaimer-header {
        padding: 18px;
    }

    /* Flex row: the two items pushed to opposite ends, vertically centred and
       aligned on the same line. (Reinforced here per the mobile-header spec;
       the desktop rule already sets this, so nothing else changes.) */
    .header-inner,
    .disclaimer-header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}


/* ==========================================================================
   MOBILE-ONLY CTA ALIGNMENT + HERO ARROW  (<= 768px)
   --------------------------------------------------------------------------
   Phone-scoped only — tablet (769–1024px) and desktop are left unchanged.

   1 & 2. CTA alignment (home "Find out what confidence…" banner and the gold
      "The future is bright. Join us." banner). On desktop the banner paragraphs
      carry a 110px left indent (part of a horizontal row treatment). When the
      banners stack on mobile that indent leaves the text floating to the right
      while the button sits at the page gutter — reading as centred text with a
      left-aligned button. Dropping the indent puts the heading/paragraph and
      the button on the same left edge (the gutter); the buttons already reset
      to the gutter, and the existing flex `gap` keeps the spacing consistent.

   3. Hero decorative arrow (Who We Are / What We Do only). Shrink it, tuck it
      into the bottom-right corner so it bleeds off-screen like a background
      element, lower its opacity, and send it behind the text so it can never
      obstruct the headline or the SCROLL DOWN indicator.
   ========================================================================== */
@media (max-width: 768px) {
    /* 1 & 2 — banner text shares the gutter with its button. */
    .cta-banner p {
        padding-left: 0;
    }

    /* 3 — subtle bottom-right brand decoration. */
    .hero-content img {
        height: 130px;        /* ~32% smaller than the 190px desktop size */
        right: -45px;         /* bottom-right, bleeding off the right edge */
        bottom: -45px;        /* and off the bottom edge */
        opacity: 0.4;         /* less prominent */
        z-index: -1;          /* behind the headline and SCROLL DOWN */
    }
}