/* =====================================================================
   ECo Global Consulting — 2026 Website
   base.css — design tokens, theming, typography, shared components

   Brand palette (2026 Brand Kit):
     Midnight Violet  #3F133C   foundation / headers
     Golden Pollen    #FFCD5F   signature highlight / CTAs
     Coffee Bean      #0C0213   depth / near-black
     Sand Dune        #E2DCC3   light surfaces / spacious bg
     Camel            #B29960   accents / gold hairlines
     Dark Khaki       #5F4D3A   supporting UI / secondary type
   Type: Raleway (primary), Century Old Style (secondary / editorial)
   ===================================================================== */

/* ---- Self-hosted primary sans (variable font, weights 300-800) ---- */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Variable.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ---- Self-hosted secondary serif --------------------------------- */
/* The Century Reprise cut shipped until Aug 2026 had its OS/2 italic bit set on the Regular face, so every serif
   heading rendered slanted and every italic was a slant on a slant. These three are the Century Oldstyle BT cut
   from the brand kit, which is the only complete Century in it: a real roman, a real italic, a real bold. */
@font-face {
    font-family: 'Century Old Style';
    src: url('../fonts/CenturyOldStyle-Roman.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century Old Style';
    src: url('../fonts/CenturyOldStyle-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Headings sit at 400, so every <em> accent resolves to the real italic above at the same weight — nothing is
   synthesised. Bold is declared but unused, which downloads nothing: a browser fetches a face only when matched. */
@font-face {
    font-family: 'Century Old Style';
    src: url('../fonts/CenturyOldStyle-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Brand constants (theme-independent) -------------------------- */
:root {
    --violet:  #3F133C;
    --violet-deep: #2A0B28;
    --gold:    #FFCD5F;
    --gold-deep: #E8B23E;
    --coffee:  #0C0213;
    --sand:    #E2DCC3;
    --sand-light: #EDE8D6;
    --camel:   #B29960;
    --khaki:   #5F4D3A;

    --font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Century Old Style', Georgia, 'Times New Roman', serif;

    /* Type scale — four display steps, five text steps. d1 is the homepage headline; every page h1 uses it. */
    /* Each step runs a straight line from its 375px size to its 1440px size, so all five grow in step. */
    --fs-d1:   clamp(2rem, 1.68rem + 1.35vw, 2.9rem);    /* page h1, pull quote, closing headline — 32 → 46.4px */
    --fs-d2:   clamp(1.6rem, 1.39rem + .9vw, 2.2rem);    /* section h2, stat figures, card marks — 25.6 → 35.2px */
    --fs-d3:   clamp(1.3rem, 1.18rem + .53vw, 1.65rem);  /* sub-head, row titles, lead paragraph — 20.8 → 26.4px */
    --fs-d4:   clamp(1.15rem, 1.11rem + .15vw, 1.25rem); /* card and prose h3 — 18.4 → 20px */
    --fs-lede: clamp(1.05rem, 1rem + .2vw, 1.18rem);     /* intro paragraphs and captions — 16.8 → 18.9px */
    --fs-body: 1.05rem;                                  /* default body copy — 16.8px */
    --fs-sm:   .95rem;                                   /* secondary body, buttons, nav, inputs — 15.2px */
    --fs-xs:   .85rem;                                   /* dates, bylines, notes, small links — 13.6px */
    --fs-2xs:  .78rem;                                   /* uppercase micro-labels: eyebrows, tags, pills — 12.5px */

    /* Vertical rhythm. A section's padding is ~1.55× --fs-d1, cut twice from the 3.2× it carried before Aug 2026. */
    /* Only --sp-section moved in the second cut: it is doubled between two sections, so 144px still reads as a */
    /* clear break against the 56px --sp-block gaps inside one, a 2.6 : 1 distinction. */
    --sp-section: clamp(40px, 4.9vw, 72px);  /* padding-block on a full section — 144px between two of them */
    --sp-block:   clamp(32px, 4vw, 56px);    /* between blocks inside one section */
    --sp-tight:   clamp(20px, 2.4vw, 32px);  /* a heading and the copy it belongs to */

    --maxw: 1280px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --transition: 220ms cubic-bezier(.2, .7, .3, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Brand-alpha tokens (replace scattered rgba literals) */
    --camel-40: rgba(178, 153, 96, .40);
    --camel-25: rgba(178, 153, 96, .25);
    --gold-glow:        rgba(255, 205, 95, .28);
    --gold-glow-strong: rgba(255, 205, 95, .36);
    --gold-ring:        rgba(255, 205, 95, .20);
    --gold-focus:       rgba(255, 205, 95, .18);

    /* Inline-SVG icon set (masked with currentColor) — replaces entity glyphs */
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 11h12.17l-4.58-4.59L13 5l7 7-7 7-1.41-1.41L16.17 13H4z'/%3E%3C/svg%3E");
    --icon-arrow-left:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 11H7.83l4.58-4.59L11 5l-7 7 7 7 1.41-1.41L7.83 13H20z'/%3E%3C/svg%3E");
    --icon-arrow-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 4v12.17l-4.59-4.58L5 13l7 7 7-7-1.41-1.42L13 16.17V4z'/%3E%3C/svg%3E");
    --icon-star:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.9 6.26L21.8 9l-5.1 4.63L18.2 20.5 12 16.9 5.8 20.5l1.5-6.87L2.2 9l6.9-.74z'/%3E%3C/svg%3E");
    --icon-sparkle:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2c.6 4 1.4 4.8 5 5-3.6.2-4.4 1-5 5-.6-4-1.4-4.8-5-5 3.6-.2 4.4-1 5-5z'/%3E%3C/svg%3E");
}

/* ---- Light theme tokens ------------------------------------------- */
[data-theme="light"] {
    --bg:           #EDE8D6;
    --bg-alt:       #E2DCC3;
    --surface:      #FBF9F0;
    --surface-2:    #F3EEDD;
    --surface-inset:#FFFFFF;

    --text:         #2A1726;
    --text-strong:  #3F133C;
    --heading:      #3F133C;
    --text-muted:   #6A5847;
    --text-subtle:  #736149;   /* darkened to meet WCAG AA (~4.8:1 on --bg) */

    --accent:       #9C7C3C;   /* large-text/display gold on light (passes AA large) */
    --accent-strong:#7A5E2A;   /* small-text gold — ~4.95:1 on --bg, AA-safe */
    --hairline:     rgba(178, 153, 96, .45);
    --hairline-soft:rgba(95, 77, 58, .16);
    --border:       rgba(95, 77, 58, .18);

    --cta-bg:       #FFCD5F;
    --cta-text:     #2A0B28;
    --cta-hover:    #FFD976;

    --ghost-border: rgba(63, 19, 60, .35);
    --ghost-text:   #3F133C;
    --ghost-hover-border: var(--violet);   /* keep contrast on light bg (not gold) */
    --ghost-hover-text:   var(--accent-strong);

    --hero-grad: radial-gradient(120% 120% at 80% 0%, rgba(178,153,96,.22), transparent 55%),
                 linear-gradient(180deg, #EDE8D6 0%, #E6DFC8 100%);
    --panel-bg: linear-gradient(135deg, #3F133C 0%, #2A0B28 100%);
    --panel-text: #F3EEDD;
    --panel-heading: #F6F1E1;          /* brighter cream for headings on dark panels */
    --panel-tile-bg: #340F31;          /* reach-city tile on light theme */
    --shadow-sm: 0 1px 3px rgba(42, 11, 40, .08);
    --shadow-md: 0 14px 38px rgba(42, 11, 40, .12);
    --shadow-lg: 0 30px 70px rgba(42, 11, 40, .18);
    --header-bg: rgba(237, 232, 214, .82);
    --header-shadow: 0 10px 30px rgba(42, 11, 40, .10);   /* brand-tinted, not black */

    --success: #2E7D32;
    --error:   #C62828;

    --logo-main:      url('../images/logos/eco-main-purple.png');
    --on-panel-muted: rgba(243, 238, 221, .78);
}

/* ---- Dark theme tokens -------------------------------------------- */
/* Parked, not live: BaseLayout hardcodes data-theme="light" and nothing toggles it, so no visitor can reach
   these. Kept for a future switch, but never rendered — treat as untested if you turn it on. */
[data-theme="dark"] {
    --bg:           #0C0213;
    --bg-alt:       #160418;
    --surface:      #1B0820;
    --surface-2:    #24102A;
    --surface-inset:#2A0E29;

    --text:         #E7DFC9;
    --text-strong:  #F6F1E1;
    --heading:      #F6F1E1;
    --text-muted:   #C3B393;
    --text-subtle:  #9C8C70;

    --accent:       #D9BE7E;
    --accent-strong:#FFCD5F;
    --hairline:     rgba(178, 153, 96, .38);
    --hairline-soft:rgba(178, 153, 96, .16);
    --border:       rgba(178, 153, 96, .20);

    --cta-bg:       #FFCD5F;
    --cta-text:     #0C0213;
    --cta-hover:    #FFD976;

    --ghost-border: rgba(255, 205, 95, .45);
    --ghost-text:   #FFCD5F;
    --ghost-hover-border: var(--gold);   /* gold reads fine on dark */
    --ghost-hover-text:   var(--gold);

    --hero-grad: radial-gradient(120% 130% at 78% -10%, rgba(63,19,60,.95), transparent 60%),
                 radial-gradient(90% 90% at 10% 100%, rgba(178,153,96,.14), transparent 60%),
                 linear-gradient(180deg, #0C0213 0%, #160418 100%);
    --panel-bg: linear-gradient(135deg, #3F133C 0%, #0C0213 100%);
    --panel-text: #F3EEDD;
    --panel-heading: #F6F1E1;
    --panel-tile-bg: var(--violet-deep);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, .5);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
    --header-bg: rgba(12, 2, 19, .78);
    --header-shadow: 0 10px 30px rgba(0, 0, 0, .40);

    --success: #7DCB86;
    --error:   #F2B8B5;

    --logo-main:      url('../images/logos/eco-main-white.png');
    --on-panel-muted: rgba(243, 238, 221, .78);
}

/* ---- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Clip horizontal bleed at the root so nothing can scroll the page sideways on
   mobile. `clip` (not `hidden`) avoids creating a scroll container, so the
   sticky header and smooth scroll keep working. */
html, body { overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---- Typography --------------------------------------------------- */
h1, h2, h3, h4, h5 {
    margin: 0 0 .5em;
    color: var(--heading);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
h1 { font-size: var(--fs-d1); }
h2 { font-size: var(--fs-d2); }
h3 { font-size: var(--fs-d4); letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; }

.eyebrow {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-strong);   /* AA-safe small-caps label */
    margin: 0 0 1rem;
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 1px;
    background: var(--camel);
    vertical-align: middle;
    margin-right: 12px;
    transform: translateY(-2px);
}
.eyebrow.no-rule::before { display: none; }
.lede {
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.center { text-align: center; }

/* ---- Layout helpers ----------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.container.narrow { max-width: 880px; }
.section { padding: var(--sp-section) 0; }
.section.tight { padding: var(--sp-block) 0; }

.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--camel), transparent); border: 0; }

/* ---- Buttons ------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: 15px 30px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .01em;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--cta-bg); color: var(--cta-text); box-shadow: 0 10px 28px var(--gold-glow); }
.btn-primary:hover { background: var(--cta-hover); box-shadow: 0 16px 36px var(--gold-glow-strong); }
.btn-ghost { border: 1px solid var(--ghost-border); color: var(--ghost-text); }
.btn-ghost:hover { border-color: var(--ghost-hover-border); color: var(--ghost-hover-text); }
.btn-lg { padding: 17px 36px; font-size: var(--fs-sm); }

/* ---- Icon system — masked inline SVGs (replace entity glyphs) ------ */
.arrow {
    display: inline-block;
    width: .82em; height: .82em;
    vertical-align: -0.08em;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--icon-arrow-right) center / contain no-repeat;
    mask: var(--icon-arrow-right) center / contain no-repeat;
    /* hide the entity fallback glyph while keeping it in the DOM/markup */
    overflow: hidden; text-indent: 200%; white-space: nowrap;
}
.back-link .arrow { -webkit-mask-image: var(--icon-arrow-left); mask-image: var(--icon-arrow-left); }
.arrow.arrow-down { -webkit-mask-image: var(--icon-arrow-down); mask-image: var(--icon-arrow-down); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-row.center { justify-content: center; }

/* ---- Header & navigation ------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--header-bg);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--header-shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The wordmark is 34px tall, so the link box misses the 44px touch minimum by 10px. Padding closes it; the 76px
   header still has room. */
@media (pointer: coarse), (max-width: 860px) { .brand { padding: 5px 0; } }
.brand img { height: 38px; width: auto; }
.brand .brand-mono { height: 34px; }
/* Company slogan beside the wordmark, so it is on screen on every page at every
   scroll position. Serif italic behind a gold hairline reads as brand chrome
   rather than as a seventh nav item. Shown from 1280px up (--maxw) — below that
   the nav needs the width more than the slogan does, and the closing CTA and the
   footer still carry it. */
.brand-slogan { display: none; }
@media (min-width: 1280px) {
    .brand-slogan {
        display: inline-block;
        padding-left: 14px;
        border-left: 1px solid var(--hairline);
        font-family: var(--font-serif);
        font-style: italic;
        font-size: var(--fs-sm);
        line-height: 1;
        color: var(--accent-strong);
        white-space: nowrap;
    }
}

.primary-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--accent-strong); }
.nav-link.active, .nav-link[aria-current="page"] { color: var(--accent-strong); }
.nav-link.active::before {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
    background: var(--gold); border-radius: 2px;
}
/* mobile-only chrome inside the nav panel — hidden on desktop */
.nav-panel-head, .primary-nav .nav-cta, .nav-sub-toggle { display: none; }
.nav-item.has-menu > .nav-link::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .6;
    transition: transform var(--transition);
}
.nav-item.has-menu:hover > .nav-link::after { transform: rotate(45deg) translateY(1px); }

.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 270px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 210;
}
.nav-item.has-menu:hover .dropdown,
.nav-item.has-menu:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0; height: 16px;   /* hover bridge */
}
.dropdown a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;   /* labels are single-line now — no subtitles to wrap under */
    transition: background var(--transition), color var(--transition);
}
.dropdown a:hover { background: var(--surface-2); color: var(--accent-strong); }

.header-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Contact menu hanging off the header CTA. Contact has no nav item any more,
   so the button owns the three contact routes. Opens on :hover and on
   :focus-within — the same mechanism the nav dropdowns use above, so Tab
   reaches the three links in DOM order without any JS.
   Anchored to .cta-menu rather than to the button, so the button cannot drag
   the panel around; the .btn hover lift is switched off here as well, since a
   menu trigger that slides out from under the pointer is jittery. */
.cta-menu { position: relative; display: inline-flex; }
.cta-menu > .btn:hover { transform: none; }
.cta-menu > .btn::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: .6;
    transition: transform var(--transition);
}
.cta-menu:hover > .btn::after { transform: rotate(45deg) translateY(1px); }
/* Right-aligned, not centred. The button sits at the right edge of the header,
   where the nav dropdowns' translateX(-50%) would push a 270px panel past the
   container padding and off the screen. Same specificity as .dropdown, so
   these rules must stay below it in the file to win on source order. */
.cta-dropdown { left: auto; right: 0; transform: translateY(8px); }
.cta-menu:hover .cta-dropdown,
.cta-menu:focus-within .cta-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-sm); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 22px; height: 2px; background: var(--heading);
    border-radius: 2px; transition: transform var(--transition), opacity var(--transition); margin: 0 auto;
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after { transform: translateY(5px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: rotate(-45deg) translateY(-2px); }

/* ---- Footer ------------------------------------------------------- */
.site-footer { background: var(--panel-bg); color: var(--panel-text); padding: 72px 0 32px; position: relative; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }
.footer-brand img { height: 56px; width: auto; margin-bottom: 14px; }
.footer-brand p { color: var(--on-panel-muted); font-size: var(--fs-sm); max-width: 280px; }
/* Company slogan — sits between the wordmark and the descriptive tagline.
   Two classes so it outranks `.footer-brand p` above, which would otherwise
   win on specificity and repaint the slogan muted. */
.footer-brand .footer-slogan {
    color: var(--gold); font-size: var(--fs-2xs); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px;
}
.footer-col h4 { color: var(--gold); font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: rgba(243, 238, 221, .82); font-size: var(--fs-sm); }
/* 6px of padding leaves a 37px row, under the 44px touch minimum — a thumb gets the extra 10px, a mouse does not. */
@media (pointer: coarse), (max-width: 860px) { .footer-col a { padding: 11px 0; } }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
    margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--camel-25);
    color: var(--on-panel-muted); font-size: var(--fs-xs);
}
.footer-award { display: inline-flex; align-items: center; gap: 10px; }
.footer-award .star {
    display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em;
    background: var(--gold);
    -webkit-mask: var(--icon-star) center / contain no-repeat;
    mask: var(--icon-star) center / contain no-repeat;
    overflow: hidden; text-indent: 200%; white-space: nowrap;
}

/* ---- Shared bits -------------------------------------------------- */
/* .pill-badge and .kicker-num went with the last markup that used them; both were dead on 10 Aug 2026. */
.tag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); }

/* ---- Scroll reveal ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    /* Kill the looping/parallax motion that can trigger vestibular discomfort.
       The eyebrow rule keeps its hairline — only the travelling gold segment
       stops, which is all the animation adds.

       !important is load-bearing here, not decoration. Every selector below is
       (0,1,0) or (0,2,0) and most of these elements get their animation or
       hover transform from site.css / pages.css, which the page loads AFTER
       base.css (see BaseLayout). A media query adds no specificity, so without
       !important the later file wins and the whole block does nothing — which
       is how the ticker and the card hovers came to ignore the setting. */
    .r-eyebrow::after { animation: none !important; }
    /* The hero slideshow's auto-advance is stopped in main.js, which reads the same query; this kills the
       crossfade so a dot press swaps the photo outright instead of dissolving. */
    .hs-slide { transition: none !important; }
    .btn:hover, .btn:hover .arrow,
    .sol-card:hover, .news-card:hover,
    .r-news-item:hover, .r-services .svc-row:hover { transform: none !important; }
}

/* ---- Mobile nav — full-screen overlay ----------------------------- */
/* Breakpoint is 1100px (not 980): the full desktop nav + brand + CTA needs
   ~1080px to fit, so the hamburger takes over below that to avoid overflow. */
@media (max-width: 1100px) {
    .nav-toggle { display: flex; align-items: center; justify-content: center; }
    .header-cta > .cta-menu { display: none; }
    .dropdown::before { display: none; }   /* desktop hover-bridge is dead weight on mobile */

    /* The horizontal wordmark is ~7.9:1 — at 38px tall it's ~300px wide and,
       being flex-shrink:0, it shoves the toggle off the right edge on phones.
       Cap it to a share of the viewport (aspect ratio preserved) so brand +
       toggle always fit and the toggle keeps its 28px container padding. */
    .brand img { height: auto; max-height: 36px; max-width: 56vw; }

    /* drop backdrop-filter on mobile: a filtered ancestor becomes the
       containing block for fixed children, which would trap the overlay
       inside the 76px header instead of filling the viewport. */
    .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

    /* full-viewport overlay, single scroll context */
    .primary-nav {
        position: fixed; inset: 0; z-index: 300;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--bg);
        padding: 0 0 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0; visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }
    body.nav-open .primary-nav { opacity: 1; visibility: visible; transform: none; }
    body.nav-open { overflow: hidden; }            /* lock background scroll */

    /* overlay top bar: brand + close */
    .nav-panel-head {
        display: flex; align-items: center; justify-content: space-between;
        height: 76px; padding: 0 24px; flex-shrink: 0;
        border-bottom: 1px solid var(--border);
        position: sticky; top: 0; background: var(--bg); z-index: 2;
    }
    /* Same cap as .brand img above: the horizontal wordmark is ~7.9:1, so at a fixed 38px it runs ~300px wide
       and collides with the close button inside a 375px panel. */
    .nav-panel-head img { height: auto; max-height: 38px; max-width: 58vw; width: auto; }
    .nav-close {
        width: 44px; height: 44px; border-radius: var(--radius-sm);
        display: flex; align-items: center; justify-content: center; position: relative;
    }
    .nav-close::before, .nav-close::after {
        content: ""; position: absolute; width: 22px; height: 2px;
        background: var(--heading); border-radius: 2px;
    }
    .nav-close::before { transform: rotate(45deg); }
    .nav-close::after  { transform: rotate(-45deg); }

    .primary-nav > .nav-item:first-of-type { border-top: none; }
    /* wrapping flex row: label + chevron button share line one, the submenu takes line two */
    .nav-item { width: 100%; padding: 0 24px; display: flex; flex-wrap: wrap; }
    /* 500, the same Medium the desktop nav carries — a nav link is supporting information in either context. */
    .nav-link {
        width: 100%; padding: 18px 2px; font-size: var(--fs-d4); font-weight: 500;
        justify-content: space-between; border-bottom: 1px solid var(--hairline-soft);
    }
    /* the label yields the right edge to the button, which is the only thing that opens the submenu here */
    .nav-item.has-menu > .nav-link { width: auto; flex: 1 1 auto; min-width: 0; }
    .nav-item.has-menu > .nav-link::after { display: none; }
    .nav-sub-toggle {
        display: flex; align-items: center; justify-content: flex-end;
        flex: 0 0 auto; width: 56px; padding-right: 2px; color: var(--text);
        border-bottom: 1px solid var(--hairline-soft);   /* continues the label's hairline across the row */
    }
    .nav-sub-toggle::after {
        content: "";
        width: 6px; height: 6px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(45deg) translateY(-1px);
        opacity: .6;
        transition: transform var(--transition);
    }
    .dropdown {
        position: static; transform: none; opacity: 1; visibility: visible;
        box-shadow: none; border: none; background: transparent;
        padding: 4px 2px 14px; min-width: 0; flex: 0 0 100%;
        max-height: 0; overflow: hidden; transition: max-height var(--transition);
        display: block;
    }
    .nav-item.has-menu.open .dropdown { max-height: 600px; }
    /* keep submenus in flow — override the desktop hover/focus-within translateX(-50%) */
    .nav-item.has-menu:hover .dropdown,
    .nav-item.has-menu:focus-within .dropdown { transform: none; }
    .nav-item.has-menu.open > .nav-sub-toggle::after { transform: rotate(225deg) translateY(-1px); }
    /* nowrap is a desktop-only affordance; at 320px "Global Service Delivery
       Model" is wider than the overlay, so let it wrap here. */
    .dropdown a { padding: 11px 12px; font-size: var(--fs-sm); white-space: normal; }

    /* CTA pinned at the bottom of the overlay. It stands alone here — the
       desktop button's Clients/Careers/Investor Relations menu is not repeated,
       because /contact opens on a hero offering those same three routes. */
    .primary-nav .nav-cta {
        display: inline-flex; justify-content: center;
        margin: 26px 24px 0; padding: 16px 30px;
    }
}

@media (max-width: 720px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
    .footer-top { grid-template-columns: 1fr; }
}