/* ============================================================
   STRIVE OVERSEAS — style.css
   Color Palette: Deep Forest Green + Gold/Bronze
   ============================================================ */

/* Heritage display fallback for Robeaugo (Royal College Brochure register).
   Robeaugo is the brand display face; Cormorant Garamond carries the same
   institutional-prospectus feel until the licensed file is dropped in. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

/* ---------- Brand Display Font: Robeaugo ----------
   The bundled file is a single Semibold weight (assets/Font/Robeaugo-Semibold.otf).
   We map it across the full weight range (100 900) so every Robeaugo heading —
   whether the CSS asks for normal or 700 — renders in the genuine Semibold glyphs
   instead of a faux-bold or the Cormorant Garamond substitute.
   NOTE: this .otf ships under a Monotype desktop EULA; confirm a web-font
   licence before public/final hosting (see assets/Font/Licenses). */
@font-face {
    font-family: 'Robeaugo';
    src: url('assets/Font/Robeaugo-Semibold.woff2') format('woff2'),
         url('assets/Font/Robeaugo-Semibold.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The HTML `hidden` attribute must always hide, even on elements whose class sets
   an explicit `display` (e.g. `.form-field { display: flex }`), which would
   otherwise override the browser's default `[hidden] { display:none }`. */
[hidden] { display: none !important; }

html { font-size: 16px; }  /* smooth scroll handled by Lenis */

body {
    font-family: 'Segoe UI', 'Segoe UI Variable', system-ui, -apple-system, sans-serif;
    color: #1a1a1a;
    background: #fff;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---------- Design Tokens ---------- */
:root {
    --green:        #03301B;   /* primary dark green  */
    --green-mid:    #065831;   /* slightly lighter     */
    --green-light:  #e8f2ec;   /* subtle tint for BG   */
    --green-gradient: linear-gradient(180deg, #065831, #03301B);
    --gold:         #B97244;   /* main gold            */
    --gold-dark:    #9e6038;   /* darker gold          */
    --gold-light:   #EBCF9B;   /* lighter gold (blob)  */
    --gold-gradient: linear-gradient(180deg, #EBCF9B, #B97244);
    --white:        #ffffff;
    --off-white:    #f7f9f7;
    --text-dark:    #111;
    --text-mid:     #4a4a4a;
    --text-light:   #7a7a7a;
    --border:       #e2e8e4;
    --radius:       8px;
    --radius-lg:    16px;
    --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
    --shadow-md:    0 6px 24px rgba(0,0,0,.09);
}

/* ---------- Shared Utilities ---------- */
.sec-inner  { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.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;
}

/* Icon colour: gold on light themes, brighter gold-light on dark themes.
   Applies to common icon containers; inline style="" still wins when
   explicitly set per page. */
[data-theme="light"] .svc-icon,
[data-theme="light"] .svc-icon i,
[data-theme="light"] .check-list li i,
[data-theme="light"] .contract-card i,
[data-theme="light"] .stat-box i { color: var(--gold); }

[data-theme="dark"] .svc-icon,
[data-theme="dark"] .svc-icon i,
[data-theme="dark"] .check-list li i,
[data-theme="dark"] .contract-card i,
[data-theme="dark"] .stat-box i,
[data-theme="dark"] blockquote i { color: var(--gold-light); }
.two-col    { display: flex; gap: 60px; align-items: center; }
/* Flips the image to the right. Must be a class, never an inline style: inline
   outranks the stylesheet, so it would survive the mobile stack below. */
.two-col.reverse { flex-direction: row-reverse; }
.center     { text-align: center; }
.label-tag  {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold-dark); /* AA contrast on white (4.7:1) */
    margin-bottom: 12px;
}
.label-tag.light { color: rgba(255,255,255,.5); }
.label-tag.center { display: block; }

.sec-title {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--green);
    line-height: 1.25;
    margin-bottom: 20px;
}
.sec-title.center { text-align: center; }

/* ============================================================
   BUTTON SYSTEM
   ------------------------------------------------------------
   Tiers:
     Primary  →  .btn-green        (commit / submit / apply)
     Secondary→  .btn-outline-dark (browse / view / learn)
     Accent   →  .btn-gold         (book / talk / invitation)
   Sizes:
     Regular  →  base classes      (12px 26px / 0.95rem)
     Small    →  .btn-*-sm         (8px 18px / 0.85rem)
   ============================================================ */
.btn-green,
.btn-green-sm,
.btn-gold,
.btn-gold-sm,
.btn-outline-dark,
.btn-outline-light {
    display: inline-block;
    border-radius: 8px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    border: none;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    background-clip: border-box;
    transition: background .25s ease, color .25s ease, border-color .25s ease,
                transform .2s ease, box-shadow .25s ease;
}

/* ----- PRIMARY (green) ----- */
.btn-green {
    padding: 11px 26px;
    background: var(--green-gradient);
    color: var(--white);
    font-size: 0.95rem;
}
.btn-green:hover {
    background: var(--gold-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(185,114,68,.28);
}

.btn-green-sm {
    padding: 7px 18px;
    background: var(--green-gradient);
    color: var(--white);
    font-size: 0.85rem;
}
.btn-green-sm:hover {
    background: var(--gold-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(185,114,68,.28);
}

/* ----- ACCENT (gold) ----- */
.btn-gold {
    padding: 11px 26px;
    background: var(--gold-gradient);
    color: var(--white);
    font-size: 0.95rem;
}
.btn-gold:hover {
    background: var(--green-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6,88,49,.28);
}

.btn-gold-sm {
    padding: 7px 18px;
    background: var(--gold-gradient);
    color: var(--white);
    font-size: 0.85rem;
}
.btn-gold-sm:hover {
    background: var(--green-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6,88,49,.28);
}

/* ----- SECONDARY (outline-dark, on light backgrounds) ----- */
/* Border is rendered via inset box-shadow so heights match filled buttons */
.btn-outline-dark {
    padding: 11px 26px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--green);
    color: var(--green);
    font-size: 0.95rem;
}
.btn-outline-dark:hover {
    background: var(--green-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px transparent, 0 8px 20px rgba(6,88,49,.18);
}

/* Outline-dark small variant */
.btn-outline-dark-sm {
    display: inline-block;
    padding: 7px 18px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--green);
    color: var(--green);
    font-size: 0.85rem;
    border-radius: 8px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: background .25s, color .25s, transform .2s, box-shadow .25s;
}
.btn-outline-dark-sm:hover {
    background: var(--green-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px transparent, 0 6px 16px rgba(6,88,49,.18);
}

/* ----- SECONDARY (outline-light, on dark/green backgrounds) ----- */
.btn-outline-light {
    padding: 11px 26px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--gold);
    color: var(--gold-light);
    font-size: 0.95rem;
}
.btn-outline-light:hover {
    background: var(--gold-gradient);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px transparent, 0 8px 20px rgba(212,160,86,.28);
}

.link-more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-mid);
    position: relative;
}
.link-more::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--green-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}
.link-more:hover::after { transform: scaleX(1); }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    background: var(--green-mid);
    transition: box-shadow .3s, background-color .3s;
}
.navbar.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.18); }

/* Navbar Light Theme (Interactive on Scroll) */
.navbar.light {
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.navbar.light .nav-link {
    color: var(--text-mid);
}
.navbar.light .nav-link:hover, .navbar.light .nav-link.active {
    color: var(--green);
}
.navbar.light .cta-brochure {
    color: var(--green);
    border-color: var(--green);
    background: transparent;
}
.navbar.light .cta-brochure:hover {
    background: var(--green-gradient);
    border-color: transparent;
    color: var(--white);
    transform: translateY(-1px);
}
.navbar.light .cta-start {
    background: var(--green-gradient);
    color: var(--white);
}
.navbar.light .cta-start:hover {
    background: var(--gold-gradient);
    color: var(--white);
    border: none;
    box-shadow: 0 5px 14px rgba(212,160,86,.28);
}
.navbar.light .hamburger span {
    background: var(--green-gradient);
}

/* NOTE: there used to be a `.navbar.light .nav-links { background: white }`
   block here. It made sense when the mobile menu was a small dropdown that
   matched a white navbar. The menu is now a full-screen GREEN overlay, so
   painting it white made the white logo, the white X and the white dividers
   all vanish. The overlay now keeps its green gradient in every navbar state;
   see the `body.menu-open` overrides in the mobile block at the end. */

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Logo */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.logo-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: opacity .3s;
}

/* Show white logo on dark header, dark logo on light header */
.logo-light          { display: none; }
.navbar.light .logo-dark  { display: none; }
.navbar.light .logo-light { display: block; }

/* ---------- Brand lockup: logo + MEA accreditation ----------
   The credential sits OUTSIDE the logo <a> on purpose, so clicking it does
   not fire the "go home" link. Fine print by design: it should read as a
   quiet mark of authority, never compete with the logo. */
.brand-lockup { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Deliberately two classes deep: the footer's `.brand-col p` rule is 0-1-1 and
   would otherwise win on font-size, colour, margin and line-height. */
.brand-lockup .accreditation {
    position: relative;
    margin: 0;
    padding-left: 15px;          /* clears the divider */
    max-width: none;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;         /* the <br>s do the wrapping, nothing else */
    color: rgba(255, 255, 255, .8);
}

/* Divider as a pseudo-element rather than a border, so its height is a fixed
   40px instead of stretching to whatever the text box happens to be. */
.accreditation::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, .28);
}

/* The navbar flips green -> white on scroll, so the ink has to flip too. */
.navbar.light .accreditation          { color: rgba(3, 48, 27, .72); }
.navbar.light .accreditation::before  { background: rgba(3, 48, 27, .2); }

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 20px;
}

.nav-link {
    position: relative;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,.78);
    padding: 6px 10px;
    transition: color .2s ease;
    white-space: nowrap;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    background: var(--gold-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
.nav-link:hover, .nav-link.active {
    color: var(--white);
}
.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

/* CTA Buttons */
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.cta-brochure {
    padding: 9px 20px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    color: var(--white);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
    white-space: nowrap;
}
.cta-brochure:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--green);
    transform: translateY(-1px);
}

.cta-start {
    padding: 9px 22px;
    background: var(--gold-gradient);
    color: var(--white);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
    white-space: nowrap;
}
.cta-start:hover {
    background: var(--white);
    color: var(--green);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
}

/* Brochure dropdown (desktop: click to reveal a small menu below the button) */
.brochure-dd { position: relative; }
.brochure-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;   /* match the <a> CTAs (body line-height) so heights align */
}
.brochure-caret { font-size: 0.7rem; transition: transform .25s ease; }
.brochure-dd.open .brochure-caret { transform: rotate(180deg); }
.brochure-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 210px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.16);
    padding: 6px;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
}
.brochure-dd.open .brochure-menu { display: flex; }
.brochure-menu a {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.brochure-menu a:hover { background: var(--green-light); color: var(--green); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all .3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    background: var(--green-gradient);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 90px; /* offset sticky navbar */
    overflow: hidden;
    position: relative;
}

/* subtle radial glow behind image */
.hero::after {
    content: '';
    position: absolute;
    right: -80px; top: 50%;
    transform: translateY(-50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(212,160,86,.12) 0%, transparent 65%);
    pointer-events: none;
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 16px;
    display: flex;
    align-items: center;
    gap: 50px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Left Text */
.hero-text { flex: 1.15; }

.hero-eyebrow {
    font-size: 0.95rem;
    color: rgba(255,255,255,.65);
    margin-bottom: 16px;
    font-weight: 400;
}

.hero-title {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    font-size: 3.8rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.1em;
}
.hero-title.sm {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: -.5px;
    padding-bottom: 0.15em;
}

.hero-desc {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    max-width: 760px;
    margin-bottom: 36px;
    line-height: 1.65;
    font-weight: 300;
}

.hero-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,.5);
    margin-bottom: 14px;
    font-weight: 400;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
    max-width: 620px;
}

.htag {
    border: 1px solid rgba(255,255,255,.35);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.82rem;
    color: rgba(255,255,255,.9);
    transition: border-color .2s, background .2s;
    cursor: default;
}
.htag:hover { border-color: var(--gold); background: rgba(212,160,86,.1); }

.hero-stat {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    font-weight: 400;
}
.hero-stat strong {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    color: var(--gold-light);
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -0.3px;
    margin-right: 6px;
    /* Reserve digit width so the count-up doesn't shift the line. */
    display: inline-block;
    min-width: 4.5ch;
    font-variant-numeric: tabular-nums;
}

/* Right Image */
.hero-img-wrap {
    flex: 0.85;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero-img-blob {
    background: transparent;
    width: 440px;
    height: 560px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

/* All five figures share the same gold blob in the same spot, so the blob never
   moves — only the person changes. The incoming figure arrives slightly out of
   focus and sharpens as it fades and rises into place, like a camera finding
   focus; the outgoing one softens and fades out. No continuous zoom, so the blob
   edges stay steady. The blur is animated, so it's switched off for
   prefers-reduced-motion below. */
.hero-doctor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    opacity: 0;
    filter: blur(6px);
    transition: opacity 1.3s cubic-bezier(.4, 0, .2, 1),
                filter 1.3s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    will-change: opacity, transform, filter;
}
.hero-doctor.active {
    opacity: 1;
    filter: blur(0);
    animation: hero-rise 1.3s cubic-bezier(.4, 0, .2, 1);
}
@keyframes hero-rise {
    from { transform: translateY(10px); }
    to   { transform: translateY(0); }
}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-sec {
    padding: 100px 0;
    border-bottom: 1px solid var(--border);
}

.partners-marquee {
    margin-top: 44px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 88px;
    width: max-content;
    animation: partners-scroll 42s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.partner-logo { flex-shrink: 0; }
.partner-logo img {
    height: 44px;
    width: auto;
    filter: grayscale(1) opacity(.55);
    transition: filter .3s;
    display: block;
}
.partner-logo img:hover { filter: grayscale(0) opacity(1); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-sec { padding: 96px 0; }

.col-img { flex: 1; }
.col-img .rounded-img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }

/* The MD portrait is a tall 3:4 photo. Cap and centre it so it reads as a tidy
   portrait beside the bio instead of towering over the text column, while the
   text keeps its comfortable reading width. Also holds on mobile: width:100%
   + max-width means it never exceeds the column on a narrow screen. */
.col-img.founder-figure .rounded-img {
    display: block;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}

.col-text { flex: 1; }
.col-text p:not(.label-tag) { color: var(--text-mid); margin-bottom: 18px; font-size: 0.97rem; }

/* Grievance page: the "How We Handle It" panel sticks while the taller form
   scrolls past it. Goes static once the two columns stack on mobile. */
.grievance-aside { position: sticky; top: 110px; align-self: flex-start; }
@media (max-width: 900px) {
    .grievance-aside { position: static; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-sec { padding: 80px 0; background: var(--off-white); }

/* ---------- Carousel (services + jobs) ---------- */
.carousel { position: relative; margin-top: 40px; }
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: none;
    /* inset stroke + drop shadow as one box-shadow stack — no separate border, so the
       gold gradient fills cleanly on hover with no edge artifact. */
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    font-size: 0.95rem;
    transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.carousel-btn:hover {
    background: var(--gold-gradient);
    color: var(--white);
    box-shadow: inset 0 0 0 1px transparent, var(--shadow-md);
}
.carousel-btn.prev { left: -56px; }
.carousel-btn.next { right: -56px; }
@media (max-width: 1280px) {
    .carousel-btn.prev { left: 6px; }
    .carousel-btn.next { right: 6px; }
}
.carousel-btn[disabled] { opacity: .35; cursor: default; }
.carousel-btn[disabled]:hover { background: var(--white); color: var(--green); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md); }
.carousel > .cards-row,
.carousel > .jobs-grid { margin-top: 0; }

/* Default: grid layout for subpage usage */
.cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}

/* Carousel variant (home page): horizontal flex scroller */
.carousel .cards-row {
    display: flex;
    grid-template-columns: none;
    gap: 24px;
    margin-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 4px;
    padding: 4px 4px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carousel .cards-row::-webkit-scrollbar { display: none; }

.svc-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
}
.carousel .cards-row > .svc-card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    height: 480px;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.svc-img-wrap { flex-shrink: 0; overflow: hidden; }
.svc-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.carousel .cards-row > .svc-card .svc-img-wrap { height: 50%; }

.svc-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.svc-body h3 { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 1.05rem; color: var(--green); margin-bottom: 8px; font-weight: 700; }
.svc-body p  { font-size: 0.85rem; color: var(--text-light); margin-bottom: 14px; flex: 1; overflow: hidden; }

.svc-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.svc-foot > a { text-align: center; margin: 0; padding-left: 0; padding-right: 0; }
.svc-foot.svc-foot-single { grid-template-columns: 1fr; }

/* ============================================================
   VACANCIES
   ============================================================ */
.vacancies-sec { padding: 80px 0; }

.tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 28px 0;
    flex-wrap: wrap;
}
.tab-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* "View all" -> vacancies page (sits at the right of the tab row) */
.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid var(--border);
    border-radius: 50px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--green);
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
    transition: all .25s;
}
.view-all-link:hover {
    background: var(--green-gradient);
    color: var(--white);
    border-color: var(--green);
}
.view-all-link i { font-size: .78rem; transition: transform .25s; }
.view-all-link:hover i { transform: translateX(3px); }

.tab {
    padding: 10px 26px;
    border-radius: 50px;
    border: 1px solid var(--border);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-mid);
    transition: all .25s;
}
.tab.active, .tab:hover {
    background: var(--green-gradient);
    color: var(--white);
    border-color: var(--green);
}

.jobs-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: 4px;
    padding: 4px 4px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.jobs-grid::-webkit-scrollbar { display: none; }

.job-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.carousel .jobs-grid > .job-card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
}
.job-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.job-openings {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0;
}
.job-employer {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold);
    margin: -8px 0 -4px;
    line-height: 1.3;
}
.job-title {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0;
}

.job-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.job-meta li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    color: var(--text-mid);
    line-height: 1.35;
}
.job-meta li i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    color: var(--gold);
    font-size: 0.95rem;
}

.job-salary {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--green);
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.job-salary .salary-period {
    font-weight: 500;
    color: var(--text-light);
    font-size: 0.88rem;
}

.job-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}
.job-foot > a {
    text-align: center;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   STATS
   ============================================================ */
.stats-sec {
    background: var(--green-gradient);
    color: var(--white);
    padding: 80px 0;
}

.stats-layout { gap: 60px; align-items: flex-start; }

.stats-left { flex: 1; }
.stats-desc { color: rgba(255,255,255,.7); font-size: 0.97rem; margin-top: 18px; }

.stats-grid {
    flex: 1.4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stat-box {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}
.stat-box.wide {
    grid-column: span 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.stat-box.wide .stat-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.stat-num {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--gold-light);
    line-height: 1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.95rem; color: var(--white); font-weight: 600; }
.stat-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,.85);
    line-height: 1.55;
    margin-top: 6px;
    max-width: 320px;
    font-weight: 400;
}

.stat-img {
    width: 70px; height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-sec { padding: 80px 0; }

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.testi-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .3s, box-shadow .3s;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    display: block;
    width: 100%;
}
.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.testi-card:hover .play-btn {
    background: var(--gold-gradient);
    transform: translate(-50%, -50%) scale(1.08);
}
.testi-card:focus-visible {
    outline: 3px solid rgba(185,114,68,.35);
    outline-offset: 2px;
}

.testi-thumb {
    position: relative;
    height: 210px;
}
.testi-thumb img { width: 100%; height: 100%; object-fit: cover; }

.play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    background: var(--green-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    transition: transform .3s, background .25s;
}
.play-btn:hover { transform: translate(-50%,-50%) scale(1.12); background: var(--green-mid); }

.testi-badge {
    position: absolute;
    bottom: 10px; right: 10px;
    background: var(--green-gradient);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
}

.testi-info { padding: 18px 20px; }
.testi-info h4 { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--green); font-size: 1rem; margin-bottom: 4px; }
.testi-info p  { font-size: 0.85rem; color: var(--text-light); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-sec { padding: 80px 0; background: var(--off-white); }

.faq-inner { max-width: 820px; }

.faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }

.faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-q {
    width: 100%;
    text-align: left;
    padding: 18px 22px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: background .2s;
}
.faq-q:hover { background: var(--green-light); }
.faq-q i { color: var(--green); flex-shrink: 0; transition: transform .3s; }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0 22px;
}
.faq-a p { font-size: 0.95rem; color: var(--text-mid); }
.faq-a p + p { margin-top: 10px; }
.faq-a ul { margin: 10px 0 0; padding-left: 20px; list-style: disc; }
.faq-a li { font-size: 0.95rem; color: var(--text-mid); line-height: 1.55; margin-bottom: 6px; }
.faq-a li:last-child { margin-bottom: 0; }

/* Exact open height is set inline by JS (scrollHeight), so answers of any
   length, including the bulleted ones, expand fully without clipping. */
.faq-item.open .faq-a {
    padding: 0 22px 18px;
}
.faq-item.open .faq-q i { transform: rotate(180deg); }

/* Audience toggle (Candidates / Employers) */
.faq-tabs {
    display: inline-flex;
    gap: 6px;
    margin-top: 28px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.faq-tab {
    border: none;
    background: transparent;
    padding: 10px 26px;
    border-radius: 999px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-mid);
    cursor: pointer;
    transition: background .25s, color .25s;
}
.faq-tab:hover:not(.active) { color: var(--green); }
.faq-tab.active {
    background: var(--green-gradient);
    color: var(--white);
}
.faq-a a { color: var(--green); font-weight: 600; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .faq-tabs { display: flex; width: 100%; }
    .faq-tab { flex: 1; padding: 11px 8px; }
}

/* ============================================================
   MAP
   ============================================================ */
/* ---------- Visit Us banner (replaces old map-sec) ---------- */
.visit-sec {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}
/* ── Closing CTA: large dark card on a light section ─────────────────
   The card itself carries Embassy Forest. Light section gives it room to
   breathe and stops the page closing on a slab of green.
   Oversized Cream-Gold serif headline + one primary CTA + secondary link. */
.visit-sec {
    background: var(--white);
    padding: clamp(72px, 8vw, 110px) 0 clamp(72px, 8vw, 110px);
    position: relative;
}
.visit-card {
    background: var(--green-gradient);
    color: var(--white);
    border: none;
    border-radius: clamp(20px, 2vw, 28px);
    padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 80px);
    box-shadow: 0 24px 60px rgba(3,48,27,.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.visit-card::before {
    /* Ambient cream-gold glow in the upper-right corner of the card. */
    content: "";
    position: absolute;
    top: -160px;
    right: -120px;
    width: 540px;
    height: 540px;
    background: radial-gradient(ellipse at center,
        rgba(235,207,155,.16) 0%,
        rgba(235,207,155,.06) 38%,
        transparent 68%);
    pointer-events: none;
}
.visit-card > * { position: relative; z-index: 1; }
/* Legacy gold-circle icon disappears entirely on the new closer. */
.visit-icon { display: none; }
.visit-text {
    display: contents;
}
/* Eyebrow above the headline. Cream-Gold @ ~70% opacity for restraint. */
.visit-card .label-tag,
.visit-card .label-tag.light {
    color: rgba(235,207,155,.7);
    margin-bottom: 22px;
}
/* Headline: oversized serif. Works for both .visit-headline and
   any pages still using .visit-text .sec-title for backward compat. */
.visit-headline,
.visit-card .sec-title,
.visit-text .sec-title {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: clamp(2.1rem, 4.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0 auto 22px;
    max-width: 22ch;
    text-align: center;
    padding-bottom: 0.08em;
}
/* Lead body copy under the headline. */
.visit-lead,
.visit-card p:not(.label-tag):not(.visit-secondary),
.visit-text p:not(.label-tag) {
    color: rgba(255,255,255,.78);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto 32px;
    max-width: 56ch;
    text-align: center;
}
.visit-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}
/* On the dark closing card, primary CTAs (.btn-green or .btn-gold) carry
   gold-gradient and hover into a white fill with green text — the same
   pattern the header's Talk-to-Us / Download-Brochure buttons use on dark.
   The secondary outline takes a white stroke so it reads cleanly. */
.visit-card .btn-green,
.visit-card .btn-gold {
    background: var(--gold-gradient);
    color: var(--white);
}
.visit-card .btn-green:hover,
.visit-card .btn-gold:hover {
    background: var(--white);
    color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.visit-card .btn-outline-dark {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
    color: var(--white);
}
.visit-card .btn-outline-dark:hover {
    background: var(--white);
    color: var(--green);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px transparent, 0 8px 20px rgba(0,0,0,.18);
}
/* Small text-link below the primary CTA: the secondary path. */
.visit-secondary {
    display: inline-block;
    margin-top: 22px;
    color: rgba(235,207,155,.85);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(235,207,155,.28);
    padding-bottom: 2px;
    transition: color .25s ease, border-color .25s ease;
}
.visit-secondary:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-light);
}

/* No mobile padding override here on purpose. `.visit-card` used to be a bare
   text block on a light section, and a `padding: 0 8px` rule below 900px was
   fine for that. It stopped being fine the moment the block became a filled,
   rounded green card: it stripped ALL the vertical padding, so on a phone the
   headline sat flush against the top edge and the secondary link against the
   bottom. The clamp() on .visit-card already lands on 56px / 28px at phone
   widths and scales up smoothly, so it needs no help. Don't re-add one. */

/* ---------- Connect section (home "Get in Touch") ---------- */

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--green-gradient); color: var(--white); padding: 96px 0 0; }

.footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px 80px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.brand-col p {
    font-size: 0.9rem;
    color: rgba(255,255,255,.65);
    margin: 18px 0 24px;
    max-width: 280px;
    line-height: 1.65;
}

/* --- Process page: timeline overview --- */
.timeline-flow {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}
.timeline-stage {
    flex: 1;
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
    position: relative;
}
.timeline-stage:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.timeline-num {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}
.timeline-body h4 {
    color: var(--green);
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
}
.timeline-body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.55;
}
.timeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold);
    font-size: 1.1rem;
    opacity: .7;
}
@media (max-width: 900px) {
    .timeline-arrow { display: none; }
    .timeline-stage { min-width: 100%; }
}

/* --- Process page: combined journey timeline (single sequential path) --- */
.process-journey-sec {
    padding: clamp(72px, 8vw, 110px) 0 clamp(72px, 8vw, 110px);
}
.journey-lede {
    max-width: 640px;
    margin: 14px auto 56px;
    color: var(--text-mid);
    font-size: 1rem;
    line-height: 1.7;
}
.journey-steps {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 780px;
    position: relative;
}
.journey-steps::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 32px;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(185,114,68,.45) 12%, rgba(185,114,68,.45) 88%, transparent 100%);
}
.journey-step {
    position: relative;
    padding: 0 0 36px 88px;
    list-style: none;
}
.journey-step:last-child { padding-bottom: 0; }
.journey-step-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: inset 0 0 0 1px rgba(185,114,68,.25), 0 4px 12px rgba(3,48,27,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Robeaugo', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--gold);
    z-index: 1;
}
.journey-step-body { padding-top: 8px; }
.journey-step-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
}
.journey-step-head h3 {
    font-family: 'Robeaugo', 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--green);
    margin: 0;
    line-height: 1.3;
}
.journey-duration {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 700;
    color: var(--gold);
    background: rgba(185,114,68,.08);
    padding: 5px 12px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}
.journey-step-body p {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.96rem;
    line-height: 1.7;
    max-width: 60ch;
}
.journey-footnote {
    max-width: 780px;
    margin: 56px auto 0;
    padding: 18px 24px;
    background: var(--off-white);
    border-radius: 14px;
    color: var(--text-mid);
    font-size: 0.88rem;
    line-height: 1.65;
}
.journey-footnote i {
    color: var(--gold);
    margin-right: 8px;
}

/* --- Process page: glossary disclosure (native <details>) --- */
.glossary-panel {
    max-width: 780px;
    margin: 24px auto 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(3,48,27,.04);
}
.glossary-panel summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    cursor: pointer;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    color: var(--green);
    font-size: 0.92rem;
    list-style: none;
    transition: background .2s;
    user-select: none;
}
.glossary-panel summary::-webkit-details-marker { display: none; }
.glossary-panel summary::marker { display: none; content: ''; }
.glossary-panel summary:hover { background: var(--off-white); }
.glossary-panel summary > i:first-child { color: var(--gold); font-size: 1rem; }
.glossary-chevron {
    margin-left: auto;
    color: var(--text-light);
    font-size: 0.78rem;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.glossary-panel[open] .glossary-chevron { transform: rotate(180deg); }
.glossary-panel[open] summary { border-bottom: 1px solid var(--border); }
.glossary-panel dl {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 24px;
    row-gap: 16px;
    margin: 0;
    padding: 24px 24px 26px;
}
.glossary-panel dt {
    font-weight: 700;
    color: var(--green);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.glossary-panel dd {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.92rem;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .glossary-panel dl { grid-template-columns: 1fr; row-gap: 4px; padding: 20px; }
    .glossary-panel dd { margin-bottom: 14px; }
    .glossary-panel summary { padding: 16px 20px; }
}
@media (max-width: 768px) {
    .journey-steps::before { left: 22px; top: 18px; bottom: 18px; }
    .journey-step { padding: 0 0 28px 60px; }
    .journey-step-num {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }
    .journey-step-body { padding-top: 4px; }
    .journey-step-head h3 { font-size: 1.15rem; }
    .journey-duration {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    .journey-lede { margin-bottom: 40px; }
}

/* --- Process page: challenges grid (featured + stacked) --- */
.challenges-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    margin-top: 48px;
}
.challenge-featured {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.challenge-icon-big {
    width: 56px;
    height: 56px;
    background: var(--gold-gradient);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
}
.challenge-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.challenge-featured h3 {
    color: var(--green);
    font-size: 1.35rem;
    margin: 0;
    font-weight: 700;
}
.challenge-featured > p {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.65;
}
.challenge-solution {
    padding: 14px 18px;
    background: var(--green-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem !important;
}
.challenge-solution strong { color: var(--green); }

.challenge-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.challenge-small {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.challenge-small:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.challenge-small > i {
    color: var(--gold);
    font-size: 1.4rem;
    margin-bottom: 4px;
}
.challenge-small h4 {
    color: var(--green);
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.challenge-small p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-mid);
    line-height: 1.55;
}
@media (max-width: 900px) {
    .challenges-grid { grid-template-columns: 1fr; }
}

/* --- Process page: success banner --- */
.success-banner {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}
.success-avatar img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--off-white);
}
.success-text blockquote {
    margin: 8px 0 12px;
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.55;
    font-style: italic;
}
.success-by {
    display: flex;
    flex-direction: column;
}
.success-by strong {
    color: var(--green);
    font-size: 0.95rem;
}
.success-by span {
    color: var(--text-light);
    font-size: 0.82rem;
    margin-top: 2px;
}
.success-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 24px;
    border-left: 1px solid var(--border);
}
.success-stats div {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}
.success-stats strong {
    color: var(--gold);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.success-stats span {
    color: var(--text-light);
    font-size: 0.78rem;
    margin-top: 3px;
}
@media (max-width: 900px) {
    .success-banner { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
    .success-stats { flex-direction: row; padding-left: 0; border-left: none; padding-top: 20px; border-top: 1px solid var(--border); }
    .success-stats div { flex: 1; min-width: 0; }
}

/* --- Career page: open roles --- */
.openings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* Career page: 2-col layout pairing "Why Work With Us" with the Apply form. */
.career-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: flex-start;
}
.career-why { position: sticky; top: 110px; }
.career-form-title {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    color: var(--green);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}
@media (max-width: 960px) {
    .career-split { grid-template-columns: 1fr; gap: 48px; }
    .career-why { position: static; }
}
.opening-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
.opening-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.opening-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    background: rgba(212,160,86,.12);
    border-radius: 50px;
    align-self: flex-start;
}
.opening-card h3 {
    color: var(--green);
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}
.opening-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.opening-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-mid);
}
.opening-meta li i {
    color: var(--gold);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.opening-card > p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-mid);
    line-height: 1.6;
}
.opening-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.opening-foot > a {
    text-align: center;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 768px) {
    .openings-grid { grid-template-columns: 1fr; }
}

/* --- Steps grid (Eligibility + Three steps, used on contact + referral) --- */
.steps-grid {
    display: flex;
    margin-top: 48px;
    gap: 48px;
    align-items: flex-start;
}
.steps-grid > div { flex: 1; min-width: 0; }
.steps-heading {
    color: var(--green);
    font-size: 1.4rem;
    margin: 0 0 24px;
    font-weight: 700;
}
.steps-checklist {
    list-style: none;
    padding: 32px;
    margin: 0;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.steps-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-mid);
    line-height: 1.55;
}
.steps-checklist li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.steps-checklist li i {
    color: var(--gold);
    margin-top: 4px;
    flex-shrink: 0;
}
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.steps-row {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.steps-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.steps-num {
    width: 44px;
    height: 44px;
    background: var(--gold-gradient);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
}
.steps-row h4 {
    color: var(--green);
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
}
.steps-row p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.55;
}
.steps-cta {
    margin-top: 48px;
}
.steps-disclaimer {
    margin-top: 48px;
    background: var(--off-white);
    border: 1px solid var(--border);
    padding: 20px 24px;
    border-radius: 8px;
}
.steps-disclaimer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.6;
}
@media (max-width: 900px) {
    .steps-grid { flex-direction: column; gap: 32px; }
}

/* --- Contact page: Office cards + Quick contact links --- */
.office-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
}
.office-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.office-icon {
    margin-bottom: 16px;
    font-size: 2rem;
    color: var(--gold);
    line-height: 1;
}
.office-card h3 {
    margin: 0 0 12px;
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.office-card h3 .hq-pill {
    font-size: 0.62rem;
    padding: 3px 8px;
    line-height: 1;
    letter-spacing: 0.8px;
    transform: translateY(-1px);
}
.office-address {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.55;
}
.office-hours {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.office-hours li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--text-mid);
}
.office-hours li i {
    color: var(--gold);
    font-size: 0.82rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.office-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.office-phone {
    background: var(--off-white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green);
}
.office-link {
    color: var(--green);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .25s;
}
.office-link:hover { color: var(--gold); }
.office-link i { transition: transform .25s; }
.office-link:hover i { transform: translateX(3px); }

.quick-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 32px;
}
.quick-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.quick-icon {
    margin-bottom: 14px;
    font-size: 1.5rem;
    color: var(--gold);
    line-height: 1;
}
.quick-card h4 {
    color: var(--green);
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
}
.quick-card p {
    color: var(--text-mid);
    margin: 0;
    font-size: 0.92rem;
}
@media (max-width: 768px) {
    .quick-contacts { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Contact page layout ───────────────────────────────────
   Asymmetric 2-col: form on the right, supporting sidebar on the left.
   Sidebar carries response-time promise + direct contacts as a useful
   alternative to filling the form. */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 64px;
    align-items: start;
}
.contact-side {
    position: sticky;
    top: 110px;
}
.contact-side-title {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    color: var(--green);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}
.contact-side-lead {
    color: var(--text-mid);
    font-size: 0.97rem;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 38ch;
}
.contact-direct {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.contact-direct li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.contact-direct li > i {
    color: var(--gold-dark);
    font-size: 1rem;
    margin-top: 4px;
    flex-shrink: 0;
}
.contact-direct li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-direct li span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-light);
}
.contact-direct li a {
    color: var(--green);
    font-weight: 600;
    font-size: 0.98rem;
    word-break: break-word;
}
.contact-direct li a:hover { color: var(--gold-dark); }
.contact-side-note {
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.contact-side-note a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--gold-light);
    text-underline-offset: 3px;
}
.contact-side-note a:hover { color: var(--gold-dark); }

@media (max-width: 900px) {
    .contact-split { grid-template-columns: 1fr; gap: 48px; }
    .contact-side { position: static; }
}

/* ── Asymmetric office grid: Kochi (HQ) takes 1.6fr, the other two 1fr each.
   Subtle break from the 3-equal-column default. */
.cards-row.offices-asymmetric {
    grid-template-columns: 1.6fr 1fr 1fr;
}
.office-card-anchor {
    background: linear-gradient(180deg, var(--off-white), var(--white));
    border-color: rgba(185,114,68,.20);
}
.office-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0 0 16px;
}

@media (max-width: 900px) {
    .cards-row.offices-asymmetric { grid-template-columns: 1fr; }
}

/* ── Other ways to engage: paired CTA cards ───────────────────────────
   Replaces the two stacked single-CTA sections (Strategic Partner + Referral
   Callout). Two compact cards side-by-side share one section header. */
.other-ways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
}
.other-way {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.other-way:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.other-way-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0;
}
.other-way h3 {
    color: var(--green);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 4px 0 4px;
    line-height: 1.25;
}
.other-way p {
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}
.other-way .btn-green,
.other-way .btn-outline-dark {
    align-self: flex-start;
}

@media (max-width: 900px) {
    .other-ways-grid { grid-template-columns: 1fr; }
}

/* --- Process page: two-column process steps --- */
.process-cols {
    display: flex;
    align-items: stretch;
    gap: 32px;
}
.process-col {
    flex: 1;
    background: var(--off-white);
    border-radius: var(--radius-lg);
    padding: 36px;
}
.process-col-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.process-col-icon {
    width: 52px;
    height: 52px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
    flex-shrink: 0;
}
.process-col-head h3 {
    color: var(--green);
    font-size: 1.4rem;
    margin: 0;
    font-weight: 700;
}
.process-col .process-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}
.process-step {
    position: relative;
    padding: 16px 0 16px 48px;
    border-bottom: 1px solid var(--border);
}
.process-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.process-step strong {
    color: var(--green);
    display: block;
    margin-bottom: 4px;
    font-size: 0.98rem;
}
.process-step > span:not(.step-num) {
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.55;
}
@media (max-width: 900px) {
    .process-cols { flex-direction: column; }
}

/* --- Services page: Iconic centered card variant (extracted from inline) --- */
.svc-card.svc-iconic {
    padding: 40px 32px;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.svc-iconic .svc-icon {
    margin-bottom: 20px;
    font-size: 2.5rem;
    color: var(--gold);
    line-height: 1;
}
.svc-iconic h3 {
    margin: 0 0 12px;
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 700;
}
.svc-iconic p {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Compact variant — smaller padding/icon, used on Our Professional Services row */
.svc-card.svc-iconic-compact {
    padding: 32px 28px;
}
.svc-iconic-compact .svc-icon {
    margin-bottom: 16px;
    font-size: 2.2rem;
}
.svc-iconic-compact h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}
.svc-iconic-compact p {
    font-size: 0.9rem;
    margin-bottom: 20px;
    flex: 1;
}
/* Make footer button stretch full card width even when card is align-items: center */
.svc-iconic .svc-foot,
.svc-iconic-compact .svc-foot {
    align-self: stretch;
    width: 100%;
}

/* Check-style card variant — used on Why Choose Strive */
.svc-card.svc-check {
    padding: 32px;
}
.svc-check h3 {
    color: var(--green);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
}
.svc-check h3 i {
    color: var(--gold);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.svc-check p {
    margin: 0;
    padding-left: 30px;
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Cards-row layout variants */
.cards-row.cards-row-2 {
    grid-template-columns: repeat(2, 1fr);
}
.cards-row.cards-row-narrow {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Section lead paragraph (replaces inline-style centered intros) */
.section-lead {
    max-width: 720px;
    margin: 16px auto 0;
    text-align: center;
    color: var(--text-mid);
}

/* --- About page: Mission & Vision cards (extracted from inline) --- */
.about-content-sec { padding: 120px 0; }
.about-content-sec > .sec-inner > .two-col { align-items: flex-start; gap: 88px; }
.about-content-sec .col-text { flex: 1.15; }
.about-content-sec .col-text .sec-title { margin-bottom: 28px; }
.mv-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 12px;
}
.mv-card {
    padding: 28px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(6,88,49,.06);
}
.mv-card h3 {
    color: var(--green);
    margin: 0 0 10px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mv-card h3 i { color: var(--gold); }
.mv-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
}

/* --- About page: Generic Contract Conditions (horizontal timeline) ---
   Same circles-on-a-gold-hairline as the Process page's YOUR JOURNEY, but
   running horizontally: two rows of four, number on top and label below.
   Collapses to a single vertical track on phones (a row of circles won't fit). */
.contract-timeline {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 940px;
    margin: 48px auto 0;
}
.contract-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
}
.contract-step {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.contract-num {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: inset 0 0 0 1px rgba(185, 114, 68, .25), 0 4px 12px rgba(3, 48, 27, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Robeaugo', 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--gold);
    margin-bottom: 16px;
    z-index: 1;
}
.contract-step-body h4 {
    color: var(--green);
    margin: 0 0 3px;
    font-size: 0.98rem;
    font-weight: 700;
}
.contract-step-body p {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.88rem;
}
.contract-note {
    margin: 48px auto 0;
    max-width: 760px;
    font-size: 0.9rem;
    color: var(--text-mid);
    text-align: center;
    padding: 18px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 8px;
}
/* Phones: flip each row to a vertical track, circle to the left of the label */
@media (max-width: 700px) {
    .contract-timeline { gap: 8px; max-width: 400px; }
    .contract-track { flex-direction: column; }
    .contract-step {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0 0 28px 76px;
    }
    .contract-step:last-child { padding-bottom: 0; }
    .contract-num {
        position: absolute;
        left: 0;
        top: 0;
        margin-bottom: 0;
    }
    .contract-step-body { padding-top: 8px; }
}

/* --- About page: Statutory Information table --- */
.stat-table-wrap {
    margin-top: 40px;
    overflow-x: auto;
    border-radius: var(--radius-lg);
}
.stat-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.stat-table tr { border-bottom: 1px solid var(--border); }
.stat-table tr:last-child { border-bottom: none; }
.stat-table th {
    padding: 18px 20px;
    text-align: left;
    background: var(--off-white);
    color: var(--green);
    width: 20%;
    font-weight: 600;
    font-size: 0.92rem;
}
.stat-table td {
    padding: 18px 20px;
    width: 30%;
    color: var(--text-mid);
    font-size: 0.92rem;
}
@media (max-width: 768px) {
    .stat-table { font-size: 0.85rem; }
    .stat-table th, .stat-table td { padding: 14px; width: auto; }
}

/* --- About page: two-column hero --- */
.about-hero {
    background: var(--green-gradient);
    color: var(--white);
    padding: 120px 16px 80px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.about-hero::after {
    content: '';
    position: absolute;
    right: -80px; top: 50%;
    transform: translateY(-50%);
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(212,160,86,.12) 0%, transparent 62%);
    pointer-events: none;
}
.about-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
    width: 100%;
}
.about-hero-text { flex: 1.1; }
.about-hero-text .hero-title {
    font-size: 3rem;
    margin-bottom: 20px;
}
.about-hero-text .hero-desc {
    max-width: 520px;
    margin-bottom: 36px;
    line-height: 1.65;
}
.about-hero-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
.ahs-item { display: flex; flex-direction: column; }
.ahs-item strong {
    font-family: 'Robeaugo', 'Cormorant Garamond', 'Segoe UI', Georgia, serif;
    color: var(--gold-light);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.ahs-item span {
    font-size: 0.85rem;
    color: rgba(255,255,255,.68);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.about-hero-img {
    flex: 0.9;
    display: flex;
    justify-content: flex-end;
}
.about-hero-img img {
    max-width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
@media (max-width: 992px) {
    .about-hero { padding: 120px 16px 64px; }
    .about-hero-inner { flex-direction: column; gap: 40px; }
    .about-hero-text .hero-title { font-size: 2.4rem; }
    .about-hero-stats { gap: 28px; }
}

/* --- Why Choose Strive (about page): dark band echoing home stats-sec --- */
.why-strive-sec {
    background: var(--green-gradient);
    color: var(--white);
    padding: 80px 0;
}
.why-strive-sec .stats-left { flex: 1; }
.why-strive-sec .why-grid { flex: 1.4; }
.why-strive-sec .stats-desc {
    color: rgba(255,255,255,.72);
    font-size: 0.97rem;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .why-strive-sec .sec-inner.stats-layout { flex-direction: column; gap: 40px; }
    .why-strive-sec .why-grid { width: 100%; }
}

/* --- Why Choose Us: mixed-width grid --- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.why-tile {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.why-tile > i {
    color: var(--gold-light);
    font-size: 1.8rem;
    margin-bottom: 18px;
    display: block;
}
.why-tile h3 {
    color: var(--gold-light);
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
}
.why-tile p {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(255,255,255,.78);
    line-height: 1.6;
}
.why-tile-wide {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 32px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
}
.why-wide-text > i {
    color: var(--gold-light);
    font-size: 1.8rem;
    margin-bottom: 18px;
    display: block;
}
.why-wide-text h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--gold-light); font-weight: 700; }
.why-wide-text p { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,.78); line-height: 1.6; }
.why-wide-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.why-wide-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,.85);
}
.why-wide-list li i {
    color: var(--gold-light);
    font-size: 0.9rem;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-tile-wide { grid-template-columns: 1fr; gap: 20px; }
    .why-wide-list { grid-template-columns: 1fr; }
}

/* --- Referral reward stages --- */
.reward-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.reward-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.reward-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.reward-card.reward-card-highlight {
    border: 2px solid var(--gold);
    box-shadow: 0 14px 34px rgba(185,114,68,.15);
}
.reward-stage {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.reward-card h3 {
    font-size: 1.2rem;
    color: var(--green);
    margin: 0;
}
.reward-desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-mid);
    line-height: 1.55;
}
.reward-amount {
    margin: 6px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--green);
    font-family: 'Segoe UI', system-ui, sans-serif;
}
@media (max-width: 900px) {
    .reward-grid { grid-template-columns: 1fr; }
}

/* Referral social proof */
.referral-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 56px;
}
.referral-social-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    position: relative;
}
.referral-social-card > i {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: block;
    opacity: .7;
}
.referral-social-card p {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.6;
    font-style: italic;
}
.referral-social-by {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.referral-social-by strong {
    color: var(--green);
    font-size: 0.92rem;
    font-weight: 700;
}
.referral-social-by span {
    font-size: 0.78rem;
    color: var(--text-light);
}
@media (max-width: 768px) {
    .referral-social { grid-template-columns: 1fr; }
}

/* Form section label (used within .apply-form to group fields) */
.form-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.form-section-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 36px;
    height: 2px;
    background: var(--gold-gradient);
    border-radius: 2px;
}
.apply-form .form-section-label + .form-grid,
.apply-form .form-section-label + .form-field { margin-top: 4px; }
.apply-form > .form-section-label:not(:first-child) { margin-top: 12px; }

/* Grievance / referral / career escalation banner — premium emphasis */
.escalation-sec {
    background: var(--off-white);
    padding: 80px 0;
}
.escalation-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 44px 48px;
    box-shadow: 0 14px 38px rgba(185,114,68,.08);
    display: flex;
    align-items: center;
    gap: 36px;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.escalation-card::before {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(212,160,86,.18) 0%, transparent 65%);
    pointer-events: none;
}
.escalation-icon {
    width: 76px;
    height: 76px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(185,114,68,.32);
    z-index: 1;
}
.escalation-text { z-index: 1; flex: 1; min-width: 0; }
.escalation-text .label-tag { color: var(--gold); }
.escalation-text .sec-title { margin: 6px 0 12px; }
.escalation-text > p {
    color: var(--text-mid);
    margin: 0 0 24px;
    line-height: 1.65;
}
.escalation-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .escalation-card { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 20px; }
    .escalation-icon { width: 60px; height: 60px; font-size: 1.4rem; }
}

/* --- Process grid (2x2 tile layout used on grievance, process etc.) --- */
.process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}
.process-tile {
    background: var(--white);
    padding: 22px 20px;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.process-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.process-tile > i {
    color: var(--gold);
    font-size: 1.4rem;
    margin-bottom: 12px;
    display: block;
}
.process-tile h4 {
    color: var(--green);
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
}
.process-tile p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-mid);
    line-height: 1.5;
}
@media (max-width: 640px) {
    .process-grid { grid-template-columns: 1fr; }
}

/* --- Generic application form (career / grievance / referral) --- */
.apply-form-wrap {
    background: var(--white);
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
.apply-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}
.form-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 7px;
    letter-spacing: 0.2px;
}
.form-field label span { color: var(--gold); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: var(--white);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(31,76,53,.12);
}
.form-field input[type="file"] { padding: 10px 14px; cursor: pointer; background: var(--off-white); }
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231F4C35' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 38px;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.form-actions .btn-green { cursor: pointer; border: none; }
.form-note {
    font-size: 0.82rem;
    color: var(--text-light);
    margin: 0;
    flex: 1;
    min-width: 200px;
}
.form-error {
    width: 100%;
    margin: 12px 0 0;
    color: #c0392b;
    font-size: 0.9rem;
    font-weight: 500;
}
/* Inline "sent" confirmation card, shown below the submit button on success */
.form-sent {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 13px 16px;
    background: var(--green-light);
    border-radius: var(--radius);
    color: var(--green);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.45;
    animation: form-sent-in .3s ease-out;
}
.form-sent i { font-size: 1.15rem; flex-shrink: 0; }
@keyframes form-sent-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.form-success {
    text-align: center;
    padding: 50px 20px;
}
.form-success i {
    font-size: 3rem;
    color: var(--green);
    margin-bottom: 18px;
    display: block;
}
.form-success h3 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: var(--green);
}
.form-success p {
    color: var(--text-mid);
    margin: 0;
    font-size: 0.95rem;
}
@media (max-width: 768px) {
    .apply-form-wrap { padding: 24px 20px; }
    .apply-form .form-grid { grid-template-columns: 1fr; gap: 0; }
}

.footer-stay {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.footer-stay-label {
    font-family: 'Robeaugo', 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    color: var(--gold-light);
    margin: 0 0 14px;
    font-weight: 600;
    line-height: 1.25;
}

.subscribe-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.subscribe-row input {
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    color: var(--white);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.subscribe-row input::placeholder { color: rgba(255,255,255,.45); }
.subscribe-row input:focus {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}
.subscribe-row button {
    padding: 11px 18px;
    background: transparent;
    color: var(--white);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    font-weight: 600;
    font-size: 0.88rem;
    font-family: inherit;
    transition: background .25s, color .25s, box-shadow .25s, transform .2s;
}
.subscribe-row button:hover {
    background: var(--white);
    color: var(--green);
    box-shadow: inset 0 0 0 1px transparent;
    transform: translateY(-1px);
}
.subscribe-hint,
.subscribe-success {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255,255,255,.45);
}
.subscribe-success { color: var(--gold-light); font-weight: 500; }
.subscribe-success i { margin-right: 7px; }
.subscribe-row.is-success .subscribe-hint { display: none; }

.whatsapp-btn-wrap { margin-top: 12px; }
.whatsapp-community-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 18px;
    background: transparent;
    color: var(--white);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background .25s, color .25s, box-shadow .25s, transform .2s;
}
.whatsapp-community-btn i { font-size: 1rem; }
.whatsapp-community-btn:hover {
    background: var(--white);
    color: var(--green);
    box-shadow: inset 0 0 0 1px transparent;
    transform: translateY(-1px);
}

/* ---------- Process steps (process.html) ---------- */
.process-steps .step-num {
    position: absolute;
    left: 0;
    top: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.footer-col h4 {
    font-family: 'Robeaugo', 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 18px;
    letter-spacing: 0.2px;
}

.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { display: inline-block; font-size: 0.9rem; color: rgba(255,255,255,.65); transition: color .2s ease, transform .2s ease; }
.footer-col ul a:hover { color: var(--white); transform: translateX(4px); }

.contact-list li {
    display: flex;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255,255,255,.65);
    margin-bottom: 12px;
    align-items: flex-start;
}
.contact-list li i {
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--gold-light);
}

/* ---------- Footer locations (HQ + branches) ---------- */
.locations-list li {
    margin-bottom: 16px;
    line-height: 1.45;
}
.locations-list li > div { display: flex; flex-direction: column; gap: 1px; }
.locations-list li strong {
    color: var(--white);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hq-pill {
    display: inline-block;
    background: var(--gold-light);
    color: var(--green);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 1px 6px;
    border-radius: 999px;
}
.footer-hours {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,.5);
    margin-top: 6px;
    line-height: 1.6;
}
.footer-hours i { color: var(--gold-light); font-size: 0.85rem; line-height: 1.6; }
.footer-hours .fh-body p { margin: 0; }
.footer-hours .fh-office { color: rgba(255,255,255,.72); font-weight: 600; }
.footer-hours .fh-mt { margin-top: 8px; }

.social-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.social-row a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: none;
    /* Inset stroke instead of border so the gold-gradient hover fills cleanly with no edge artifact. */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.95rem;
    line-height: 1;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.social-row a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: inherit;
}
.social-row a:hover {
    background: var(--gold-gradient);
    box-shadow: inset 0 0 0 1px transparent;
    color: var(--white);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 22px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,.45);
}
.footer-bottom-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.footer-credits {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}
.footer-credits span { display: inline-flex; align-items: center; }
.footer-license {
    color: rgba(255,255,255,.55);
}
.footer-license em {
    font-style: normal;
    color: var(--gold-light);
    font-weight: 600;
    margin-left: 4px;
    letter-spacing: 0.4px;
}
.footer-policy-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 18px;
}
.footer-policy-links a {
    font-size: 0.82rem;
    color: rgba(255,255,255,.55);
    transition: color .2s;
}
.footer-policy-links a:hover { color: var(--gold-light); }
.footer-policy-links a[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   FIRST-VISIT CURTAIN + PAGE TRANSITIONS
   ============================================================ */
.page-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--green-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.page-curtain.revealed {
    opacity: 0;
    transform: scale(1.08);   /* slight zoom-out as it fades for premium reveal */
    pointer-events: none;
}
/* Mini nav transitions: slide up to cover, slide off top on arrival */
.page-curtain.quick {
    transform: translateY(0);
    transition: transform .4s cubic-bezier(.77, 0, .175, 1);
    will-change: transform;
}
.page-curtain.quick.revealed {
    opacity: 1;
    transform: translateY(-101%);
}
.page-curtain.quick.below {
    transform: translateY(101%);
    transition: none;
}
.page-curtain.quick .curtain-inner {
    display: none;
}

.curtain-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.94);
    animation: curtain-fade-in .55s cubic-bezier(.16, 1, .3, 1) .1s forwards;
}
.curtain-mark {
    position: relative;
    display: inline-block;
    width: 116px;
    height: 116px;
}
.curtain-logo {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,.4));
}
.curtain-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%);
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 160% 0;
    animation: curtain-shine 1.2s cubic-bezier(.45, .05, .25, 1) .55s forwards;
    pointer-events: none;
    -webkit-mask-image: url(assets/logo-mark.png);
    mask-image: url(assets/logo-mark.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
@keyframes curtain-fade-in {
    to { opacity: 1; transform: scale(1); }
}
@keyframes curtain-shine {
    to { background-position: -60% 0; }
}

/* Page content fade + slide-up. We skip the navbar (fixed), curtain,
   and any modal/overlay so transforms don't interfere with fixed positioning
   and so opacity:1 doesn't force overlays open at page-ready. */
.page-body > :not(.navbar):not(.page-curtain):not(.job-modal):not(.video-modal) {
    opacity: 0;
    transform: translateY(12px) scale(.995);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
}
.page-body.ready > :not(.navbar):not(.page-curtain):not(.job-modal):not(.video-modal) {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.page-body.leaving > :not(.navbar):not(.page-curtain):not(.job-modal):not(.video-modal) {
    opacity: 0;
    transform: translateY(-8px) scale(.998);
    transition: opacity .26s cubic-bezier(.4, 0, .2, 1),
                transform .26s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .page-curtain,
    .curtain-inner,
    .curtain-line,
    .page-body > *,
    .partners-track,
    .hero-doctor,
    .hero-img-blob,
    [data-aos] {
        transition: none !important;
        animation: none !important;
    }
    /* AOS-revealed elements stay visible without the slide-up entrance */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-doctor { opacity: 1 !important; filter: none !important; }
}

/* ============================================================
   STACKING SECTIONS (services page)
   Full-screen sections that stick and overlap on scroll.
   ============================================================ */
.card-stack { background: var(--white); }

.stack-card {
    position: sticky;
    top: 90px;
    width: 100%;
    min-height: calc(100vh - 90px);
    padding: 60px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.stack-card-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 64px;
}
.stack-card.reverse .stack-card-inner { flex-direction: row-reverse; }

.stack-card .col-img { flex: 1; }
.stack-card .col-img img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.stack-card .col-text { flex: 1; }
.stack-card .col-text .sec-title { margin-bottom: 16px; }
.stack-card .col-text p:not(.label-tag) {
    font-size: 1rem;
    line-height: 1.7;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.98rem;
}
.check-list li i {
    font-size: 1.05rem;
    width: 22px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ---- Theme: White (default) ---- */
.stack-card.theme-white { background: var(--white); }
.stack-card.theme-white .col-text p:not(.label-tag),
.stack-card.theme-white .check-list li { color: var(--text-mid); }
.stack-card.theme-white .check-list li i { color: var(--gold); }

/* ---- Theme: Green gradient ---- */
.stack-card.theme-green {
    background: var(--green-gradient);
    color: rgba(255,255,255,.85);
}
.stack-card.theme-green .label-tag { color: var(--gold-light); }
.stack-card.theme-green .sec-title {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--white);
    padding-bottom: 0;
}
.stack-card.theme-green .col-text p:not(.label-tag),
.stack-card.theme-green .check-list li { color: rgba(255,255,255,.82); }
.stack-card.theme-green .check-list li i { color: var(--gold-light); }
.stack-card.theme-green .col-img img { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.stack-card.theme-green .btn-green {
    background: var(--gold-gradient);
    color: var(--white);
}

/* Progressive: scale down + fade sections as they get covered.
   Last card isn't covered by anything, so skip it. */
@supports (animation-timeline: view()) {
    .stack-card:not(:last-child) {
        animation: stack-recede linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 80%;
    }
}
@keyframes stack-recede {
    to {
        transform: scale(.96) translateY(-8px);
        filter: brightness(.9);
    }
}

/* Mobile: keep the sticky overlap/stacking effect, just stack the two
   columns vertically. Sticky positioning works on iOS Safari (unlike
   animation-timeline), so the cards still slide up and cover each other.
   Image height is trimmed so a full card fits within the viewport and
   nothing gets clipped while a card is pinned. */
@media (max-width: 900px) {
    .stack-card {
        top: 90px;   /* flush under the fixed 90px navbar */
        min-height: calc(100svh - 90px);
        padding: 28px 0;
    }
    .stack-card-inner { flex-direction: column; gap: 18px; padding: 0 20px; }
    .stack-card.reverse .stack-card-inner { flex-direction: column; }
    /* Keep a whole card within the pinned viewport on small phones so the
       incoming card doesn't cover the button/last list item before it's seen. */
    .stack-card .col-img img { max-height: 30vh; }
    .stack-card .check-list { margin-top: 14px; }
    .stack-card .check-list li { padding: 7px 0; }
}

/* ============================================================
   VACANCIES PAGE
   ============================================================ */
.vacancies-page { padding: 80px 0 96px; background: var(--off-white); }

/* ---------- Filter row (search + dropdowns + clear, single line) ---------- */
.filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 32px;
    flex-wrap: wrap;
}
.search-box-wrap {
    position: relative;
    flex: 1.7 1 240px;
    min-width: 220px;
}
.search-box-wrap > i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 0.9rem;
    pointer-events: none;
}
.search-box-wrap input {
    width: 100%;
    padding: 13px 18px 13px 44px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 14px;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text-dark);
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.search-box-wrap input::placeholder { color: var(--text-light); }
.search-box-wrap input:hover {
    background: var(--white);
    border-color: rgba(185,114,68,.35);
}
.search-box-wrap input:focus,
.search-box-wrap input:not(:placeholder-shown) {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(185,114,68,.14);
}

.filter-row select {
    flex: 1 1 150px;
    min-width: 130px;
    padding: 13px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: transparent;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text-mid);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23B97244' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 38px;
    transition: border-color .2s, background-color .2s, box-shadow .2s, color .2s;
}
.filter-row select:hover {
    background-color: var(--white);
    border-color: rgba(185,114,68,.35);
}
.filter-row select:focus,
.filter-row select.has-value {
    background-color: var(--white);
    border-color: var(--gold);
    color: var(--text-dark);
    box-shadow: 0 0 0 3px rgba(185,114,68,.14);
}
.filter-row .clear-btn {
    flex: 0 0 auto;
    padding: 13px 26px;
    background: var(--gold-gradient);
    border: 0;
    border-radius: 999px;
    color: var(--white);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter .2s, transform .2s, box-shadow .2s;
}
.filter-row .clear-btn i { font-size: 0.82rem; }
.filter-row .clear-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(185,114,68,.28);
}

/* ---------- Results bar (count + view toggle) ---------- */
.results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 28px 0 16px;
}
.results-bar .job-count { margin: 0; }

.view-toggle {
    display: inline-flex;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}
.view-toggle button {
    width: 38px;
    min-height: 34px;
    border-radius: 10px;
    color: var(--text-light);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}
.view-toggle button:hover { color: var(--green); }
.view-toggle button.active {
    background: var(--white);
    color: var(--green);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.job-count {
    font-size: 0.9rem;
    color: var(--text-mid);
    margin: 28px 0 16px;
}
.job-count strong { color: var(--green); }

.vacancy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.vacancy-grid .job-card { cursor: pointer; }

/* ---------- List view ---------- */
.vacancy-grid.list-view {
    grid-template-columns: 1fr;
    gap: 12px;
}
.vacancy-grid.list-view .job-card {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
}
.vacancy-grid.list-view .job-card > * { margin: 0; }
.vacancy-grid.list-view .job-card-head { flex: 0 1 220px; min-width: 0; }
.vacancy-grid.list-view .job-title {
    flex: 1.2 1 0;
    font-size: 1.02rem;
    line-height: 1.3;
}
.vacancy-grid.list-view .job-meta {
    flex: 1.4 1 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.vacancy-grid.list-view .job-meta li { font-size: 0.85rem; }
.vacancy-grid.list-view .job-foot {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
}
.vacancy-grid.list-view .job-foot .job-salary { white-space: nowrap; }
.vacancy-grid.list-view .job-foot-actions {
    grid-template-columns: auto auto;
    width: auto;
}
.vacancy-grid.list-view .job-foot-actions > * { padding: 8px 18px; }

/* ---------- Job card refinements (kept from updated card design) ---------- */
.job-card-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.job-card-head .job-employer {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--gold);
    font-weight: 600;
}
.country-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.2;
}
.country-chip i { color: var(--gold); font-size: 0.78rem; }

.job-card .job-title {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 1.18rem;
    line-height: 1.3;
    color: var(--text-dark);
    font-weight: 700;
    margin: 0;
}

.vacancy-grid .job-foot,
.jobs-grid .job-foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    padding-top: 18px;
    margin-top: auto;
    border-top: 1px solid var(--border);
    grid-template-columns: none;
}
.vacancy-grid .job-foot .job-salary,
.jobs-grid .job-foot .job-salary {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--green);
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
}
.vacancy-grid .job-foot .job-salary .salary-amount,
.jobs-grid .job-foot .job-salary .salary-amount { font-size: inherit; }
.vacancy-grid .job-foot .job-salary .salary-period,
.jobs-grid .job-foot .job-salary .salary-period {
    font-weight: 500;
    color: var(--text-light);
    font-size: 0.85rem;
}

.job-foot-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.job-foot-actions > * {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    font-size: 0.92rem;
}

.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-mid);
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}
.no-results i { font-size: 2.2rem; color: var(--gold); margin-bottom: 14px; }

/* ---------- Modal ---------- */
.job-modal {
    position: fixed;
    inset: 0;
    background: rgba(3,48,27,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.job-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.modal-card {
    background: var(--white);
    border-radius: 16px;
    max-width: 920px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 40px 44px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    position: relative;
    transform: translateY(20px);
    transition: transform .25s;
}
.job-modal.open .modal-card { transform: translateY(0); }
.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--off-white);
    box-shadow: inset 0 0 0 1px var(--border);
    color: var(--text-mid);
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
.modal-close:hover {
    background: var(--green);
    color: var(--white);
    box-shadow: inset 0 0 0 1px var(--green);
}
.modal-card h2 { color: var(--green); font-size: 1.6rem; margin-bottom: 4px; }
.modal-card .modal-employer { color: var(--gold); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.modal-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.modal-section h4 {
    font-size: 0.78rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.modal-grid .cell span {
    font-size: 0.75rem;
    color: var(--text-light);
    display: block;
    margin-bottom: 2px;
}
.modal-grid .cell strong { color: var(--green); font-size: 0.95rem; }
.modal-card .modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.modal-card .modal-actions a { flex: 1; text-align: center; }

/* ---------- Job detail (rich modal content) ---------- */
.job-detail-hero { padding-bottom: 4px; }
.job-detail-hero h2 {
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    line-height: 1.2;
    margin: 4px 0 14px;
}
.job-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--text-mid);
    font-size: 0.88rem;
    margin-top: 4px;
}
.job-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.job-detail-meta i { color: var(--gold); font-size: 0.82rem; }

.job-detail-stats {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 14px;
    background: linear-gradient(180deg, #f7f3eb 0%, #fbf8f1 100%);
    border: 1px solid #ead9bf;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 18px 0 4px;
}
.jds-cell { display: flex; flex-direction: column; gap: 2px; }
.jds-label {
    font-size: 0.72rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}
.jds-cell strong {
    font-size: 1.1rem;
    color: var(--green);
    font-weight: 700;
    line-height: 1.25;
}
.jds-salary { font-size: 1.18rem !important; }
.jds-note {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 1px;
}

.modal-paragraph {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-mid);
    line-height: 1.65;
}
.modal-paragraph strong { color: var(--green); font-weight: 600; }

.job-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 22px;
}
.job-detail-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}
.job-detail-list li i { color: var(--gold); font-size: 0.95rem; margin-top: 3px; }
.job-detail-list li strong {
    display: block;
    font-size: 0.78rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 600;
}
.job-detail-list li span {
    color: var(--text-dark);
    font-size: 0.92rem;
    line-height: 1.4;
}

.req-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.req-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;
}
.req-pill {
    background: var(--green);
    color: var(--gold-light);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    align-self: start;
}
.req-list li p {
    margin: 4px 0 0;
    color: var(--text-mid);
    font-size: 0.9rem;
    line-height: 1.5;
}

.benefit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.benefit-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.86rem;
    color: var(--text-dark);
    font-weight: 500;
}
.benefit-chip i { color: var(--gold); font-size: 0.88rem; }

.step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    counter-reset: jobstep;
}
.step-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
}
.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: var(--white);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.step-list li strong {
    display: block;
    color: var(--green);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.step-list li p {
    margin: 0;
    color: var(--text-mid);
    font-size: 0.9rem;
    line-height: 1.5;
}

.doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}
.doc-list li {
    display: flex;
    align-items: start;
    gap: 10px;
    color: var(--text-mid);
    font-size: 0.9rem;
    line-height: 1.45;
}
.doc-list li i { color: var(--gold); font-size: 0.92rem; margin-top: 3px; flex-shrink: 0; }

.modal-callout {
    background: var(--green);
    color: var(--white);
    border-radius: 16px;
    padding: 24px 28px;
    border: 0;
    margin-top: 28px;
}
.modal-mandatory {
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--text-mid);
    background: rgba(185,114,68,.06);
    border-radius: 16px;
    padding: 14px 18px;
    line-height: 1.55;
}
.modal-mandatory strong { color: var(--gold); }
.modal-callout p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--white);
}
.modal-callout p + p { margin-top: 10px; }
.modal-callout strong { color: var(--gold-light); font-weight: 700; }
.modal-callout-contact {
    font-size: 0.88rem !important;
    color: var(--gold-light) !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.modal-callout-contact i { margin-right: 4px; }

/* ============================================================
   TESTIMONIAL VIDEO MODAL
   ============================================================ */
.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(3,48,27,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.video-modal.open { opacity: 1; pointer-events: auto; }
.video-modal-card {
    position: relative;
    width: 100%;
    max-width: 960px;
    transform: translateY(16px);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.video-modal.open .video-modal-card { transform: translateY(0); }
.video-modal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
    color: var(--white);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.video-modal-close:hover {
    background: var(--white);
    color: var(--green);
    box-shadow: inset 0 0 0 1px transparent;
    transform: scale(1.06);
}
@media (max-width: 768px) {
    .video-modal { padding: 12px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The credential needs ~160px beside the logo. On a full desktop nav (6 links
   + 2 buttons) that room only exists at 1200px and up. Between 901px and
   1199px the nav is already compressing, so the credential is hidden rather
   than allowed to shove the links out of line. Below 900px the hamburger
   takes over and the space comes back, so it returns (smaller).
   Scoped to .navbar: the footer copy has a whole grid column to itself and
   stays visible at every width. */
@media (min-width: 901px) and (max-width: 1199px) {
    .navbar .accreditation { display: none; }
}

@media (max-width: 1024px) {
    .hero-title { font-size: 3.4rem; }
    .hero-img-blob { width: 380px; height: 490px; }
    .nav-links { gap: 4px; }
    .nav-link { font-size: 0.82rem; padding: 5px 8px; }

    .vacancy-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hamburger { display: flex; }

    /* Logo + hamburger ride ABOVE the overlay, so the X stays tappable.
       Targets the whole lockup, not just .logo, or the credential would be
       left behind the full-screen menu. */
    .navbar .brand-lockup,
    .navbar .hamburger { position: relative; z-index: 2; }

    /* Only the logo and hamburger are on screen now, so the credential fits,
       but it has to shrink to leave room on a ~360px phone. */
    .logo-img { height: 48px; }   /* a touch smaller on phones */
    .brand-lockup { gap: 4px; }
    .brand-lockup .accreditation {
        font-size: 0.47rem;
        letter-spacing: .05em;
        padding-left: 11px;
    }
    .accreditation::before { height: 32px; }

    /* ---------- Full-screen menu overlay ----------
       Was: an absolutely-positioned panel inside the navbar's padding box,
       so it came out 355px wide on a 375px screen with the page showing
       through beside it, and it snapped open via `display` (which cannot
       be animated). Now it's a true edge-to-edge overlay driven by
       opacity/transform, which can.                                    */
    .nav-links {
        position: fixed;
        inset: 0;                       /* edge to edge, full screen */
        z-index: 1;                     /* over the page, under logo/hamburger */
        margin: 0;
        padding: 112px 28px 40px;       /* clears the 90px navbar */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background: var(--green-gradient);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .38s cubic-bezier(.16, 1, .3, 1),
                    transform .38s cubic-bezier(.16, 1, .3, 1),
                    visibility 0s linear .38s;
    }
    .nav-links.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .38s cubic-bezier(.16, 1, .3, 1),
                    transform .38s cubic-bezier(.16, 1, .3, 1),
                    visibility 0s;
    }

    /* Links: full-width rows, generous tap area, staggered reveal. */
    .nav-links .nav-link {
        display: block;
        width: 100%;
        padding: 17px 2px;
        font-size: 1.2rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
    }
    .nav-links.open .nav-link { opacity: 1; transform: none; }
    .nav-links.open .nav-link:nth-child(1) { transition-delay: .10s; }
    .nav-links.open .nav-link:nth-child(2) { transition-delay: .15s; }
    .nav-links.open .nav-link:nth-child(3) { transition-delay: .20s; }
    .nav-links.open .nav-link:nth-child(4) { transition-delay: .25s; }
    .nav-links.open .nav-link:nth-child(5) { transition-delay: .30s; }
    .nav-links.open .nav-link:nth-child(6) { transition-delay: .35s; }

    /* ---------- The CTAs ----------
       These were `display: none` on mobile, i.e. "Talk to Us" and the
       brochure were unreachable for phone users, who are most of the
       audience. They now sit at the foot of the open menu.            */
    .nav-cta {
        position: fixed;
        left: 28px;
        right: 28px;
        bottom: 40px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 12px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(14px);
        transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    }
    .nav-links.open ~ .nav-cta {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: opacity .4s ease .34s,
                    transform .4s cubic-bezier(.16, 1, .3, 1) .34s,
                    visibility 0s;
    }
    .nav-cta .cta-brochure,
    .nav-cta .cta-start {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Brochure dropdown → two full-width buttons in the overlay (the menu has
       room here, and a popup near the screen bottom would be awkward). */
    .brochure-dd { width: 100%; display: flex; flex-direction: column; gap: 12px; }
    .brochure-toggle { display: none; }
    .brochure-menu {
        display: flex;
        position: static;
        min-width: 0;
        padding: 0;
        gap: 12px;
        background: transparent;
        box-shadow: none;
    }
    .brochure-menu a {
        width: 100%;
        text-align: center;
        padding: 11px 20px;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 8px;
        color: var(--white);
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* ---------- Hamburger morphs into an X ----------
       Bars are 2px tall with a 5px gap, so 7px of travel meets in the middle. */
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ---------- Menu open beats the navbar's white theme ----------
       Scroll down and the navbar flips to `.light`: white bar, grey links,
       green-outlined CTAs, dark logo. All of that is styled for WHITE.
       The overlay is always GREEN, so every one of those turns invisible
       (green text on green, white logo on white). While the menu is open we
       switch the whole navbar back to its light-on-dark set.
       These carry an extra `body` + `.light` so they out-rank the
       `.navbar.light ...` rules (0-3-0) that would otherwise win.       */
    body.menu-open .navbar.light { background: transparent; box-shadow: none; }
    body.menu-open .navbar.light .nav-links { background: var(--green-gradient); }

    body.menu-open .navbar .logo-dark  { display: block; }   /* white-ink logo */
    body.menu-open .navbar .logo-light { display: none; }

    /* Menu open = green overlay behind the lockup, so the credential must go
       back to light ink even when the navbar was in its scrolled/white state. */
    body.menu-open .navbar .accreditation,
    body.menu-open .navbar.light .accreditation { color: rgba(255, 255, 255, .8); }
    body.menu-open .navbar .accreditation::before,
    body.menu-open .navbar.light .accreditation::before { background: rgba(255, 255, 255, .28); }

    body.menu-open .navbar .hamburger span,
    body.menu-open .navbar.light .hamburger span { background: var(--white); }

    body.menu-open .navbar .nav-link,
    body.menu-open .navbar.light .nav-link { color: rgba(255, 255, 255, .85); }
    body.menu-open .navbar.light .nav-link:hover,
    body.menu-open .navbar.light .nav-link.active { color: var(--white); }

    body.menu-open .navbar.light .cta-brochure {
        background: transparent;
        border-color: rgba(255, 255, 255, .5);
        color: var(--white);
    }
    body.menu-open .navbar.light .cta-start {
        background: var(--gold-gradient);
        color: var(--white);
    }

    /* --- Hero, re-sequenced for a phone --------------------------
       Wanted order: eyebrow, headline, paragraph, PHOTO, "tell us what you
       are looking for" + pills, then the 5,000+ line. The pills and the stat
       sit INSIDE .hero-text while the photo is .hero-text's sibling, so
       `order` on its own can't interleave them (order only shuffles siblings).
       `display: contents` dissolves the wrapper and promotes its six children
       to flex items of .hero-inner, which lets the photo slot in between.
       Above 900px .hero-text is a normal box again, so the desktop
       two-column hero is untouched.

       gap: 0 is load-bearing. .hero-inner's 50px gap today only falls between
       the text block and the photo; once the wrapper stops generating a box
       it would fall between EVERY element. The elements' own margins already
       carry the vertical rhythm, so the gap has to go. Same reason
       text-align sits on .hero-inner rather than on the dissolved wrapper. */
    .hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        text-align: center;
        padding: 48px 16px 60px;
    }
    .hero-text { display: contents; }

    .hero-eyebrow  { order: 1; }
    .hero-title    { order: 2; }
    .hero-desc     { order: 3; max-width: 100%; }
    .hero-img-wrap { order: 4; justify-content: center; margin-bottom: 36px; }
    .hero-label    { order: 5; }
    .hero-tags     { order: 6; justify-content: center; max-width: 100%; }
    .hero-stat     { order: 7; }

    /* Fluid rather than two fixed sizes: fill the column up to 380px, and let
       aspect-ratio derive the height. 4/5 matches the source images (640x800),
       so `object-fit: contain` fills edge to edge with no letterboxing.
       min() means it can never overflow, even at 320px. */
    .hero-img-blob {
        width: min(100%, 380px);
        height: auto;
        aspect-ratio: 4 / 5;
    }

    /* .reverse is listed explicitly: it's a 0-2-0 selector, so a bare
       `.two-col` (0-1-0) here would lose to it no matter the source order,
       and the section would stay side-by-side on a phone. */
    .two-col,
    .two-col.reverse { flex-direction: column; gap: 36px; }
    /* .cards-row-2 is a 0-2-0 selector, so a bare `.cards-row` here (0-1-0)
       can't collapse it — list it explicitly or it stays 2-up and cramped. */
    .cards-row,
    .cards-row.cards-row-2 { grid-template-columns: 1fr; }
    .carousel .cards-row > .svc-card { flex: 0 0 85%; }
    .carousel .jobs-grid > .job-card { flex: 0 0 85%; }
    .testi-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-box.wide { grid-column: auto; }

    .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .stats-layout { flex-direction: column; }

    .filter-row { gap: 10px; }
    .search-box-wrap { flex: 1 1 100%; min-width: 0; }
    .filter-row select { flex: 1 1 calc(50% - 6px); min-width: 0; }
    .filter-row .clear-btn { flex: 1 1 100%; justify-content: center; }
    .vacancy-grid { grid-template-columns: 1fr; }
    .vacancy-grid.list-view .job-card { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
    .vacancy-grid.list-view .job-card-head,
    .vacancy-grid.list-view .job-title,
    .vacancy-grid.list-view .job-meta,
    .vacancy-grid.list-view .job-foot { flex: initial; }
    .vacancy-grid.list-view .job-meta { flex-direction: column; }
    .vacancy-grid.list-view .job-foot {
        flex-direction: column;
        gap: 14px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
    }
    .vacancy-grid.list-view .job-foot-actions { width: 100%; grid-template-columns: 1fr 1fr; }

    .modal-card { padding: 28px 22px 22px; max-height: 92vh; }
    .job-detail-stats { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
    .job-detail-list { grid-template-columns: 1fr; }
    .doc-list { grid-template-columns: 1fr; }
    .modal-card .modal-actions { flex-direction: column; }
    .req-list li { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 560px) {
    .hero-title { font-size: 2.8rem; }
    /* No .hero-img-blob size here any more — the fluid min()/aspect-ratio rule
       in the 900px block already scales it down to fit the column. */
    .sec-title { font-size: 1.9rem; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .subscribe-row { grid-template-columns: 1fr; }
    .subscribe-row button { width: 100%; }
}

/* ========== SUBPAGE STYLES ========== */
.page-header {
    padding: 160px 0 80px;
    background: var(--green-gradient);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--green) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(40px);
}
.page-header .hero-title {
    font-size: 3.5rem;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--white);
    padding-bottom: 0;
}
.page-header .hero-desc {
    max-width: 600px;
    margin: 0 auto;
    color: #cbd5e1;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
}
.stat-table th, .stat-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.stat-table th {
    background: var(--off-white);
    color: var(--green);
    font-weight: 600;
}
.stat-table tr:last-child th, .stat-table tr:last-child td {
    border-bottom: none;
}


/* ============================================================
   MOBILE (phone) FIXES
   Loaded last so it wins the cascade over aos.css.
   ============================================================ */

/* --- Kill the sideways page scroll -------------------------
   AOS reveals elements with a 100px horizontal slide
   (fade-left = translateX(+100px), fade-right = -100px).
   A desktop viewport has slack for that; a 375px phone does not,
   so any not-yet-revealed element juts off-screen and the whole
   page scrolls sideways by ~84px.
   On phones we reveal upward instead: same effect, no overflow.
   AOS's own `.aos-animate` rule (higher specificity) still resets
   the transform to 0, so the animation finishes normally.        */
/* Applies up to 1024px, not just phones: the overflow happens at ANY width
   where content + the 100px slide exceeds the viewport, which includes
   tablets and small laptops. Only true desktop has enough margin slack. */
@media (max-width: 1024px) {
    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="fade-up-left"],
    [data-aos="fade-up-right"],
    [data-aos="fade-down-left"],
    [data-aos="fade-down-right"] {
        transform: translate3d(0, 24px, 0);
    }
}

/* Belt-and-braces, at EVERY width: a marketing page should never scroll
   sideways. `clip` (not `hidden`) so it doesn't silently break position:sticky. */
html, body { overflow-x: clip; max-width: 100%; }

/* --- Stop iOS zooming the page when a field is tapped -------
   Mobile Safari force-zooms whenever a focused input/select/textarea
   has a font-size under 16px. Ours were 14.4-15.2px, so tapping any
   field on the contact / apply / referral forms yanked the page in.
   16px is the exact threshold that suppresses it.

   !important is deliberate: the component rules that set these
   (e.g. `.form-field input[type="text"]`, specificity 0-2-1) each
   out-rank any sane blanket selector, and there are a dozen of them
   across the forms. This is a usability floor, not a style opinion,
   so it must win everywhere.                                     */
@media (max-width: 900px) {
    input, select, textarea { font-size: 16px !important; }
}

/* --- Thumb-sized tap targets (WCAG 2.1: 44x44) --------------
   Buttons computed to 41-42px tall and the social icons to 38px.
   Growing the padding (rather than forcing min-height) keeps the
   label optically centred and changes no display types.         */
@media (max-width: 900px) {
    .btn-green,
    .btn-outline-dark,
    .btn-gold,
    .clear-btn,
    .subscribe-row button,
    .cta-start,
    .cta-brochure {
        padding-top: 13px;
        padding-bottom: 13px;
    }
    .social-row a { width: 44px; height: 44px; }
    .office-link { padding: 12px 0; }

    /* Icon-only buttons were the worst offenders: a 36px close button
       on a modal is genuinely hard to hit with a thumb. */
    .modal-close,
    .video-modal-close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .view-toggle button { min-width: 44px; min-height: 44px; }
    .tab { padding-top: 12px; padding-bottom: 12px; }
}

/* --- Carousel arrows are desktop-only ------------------------
   The services + job-portal rows are native scroll-snap scrollers, so
   on a touch screen you just swipe them. Below 1280px the arrows are
   positioned INSIDE the row (left/right: 6px), which parks them on top
   of the card artwork to duplicate a gesture the device already gives
   you for free. Hidden, not removed: the buttons stay in the DOM so the
   existing carousel JS keeps measuring and toggling them untouched. */
@media (max-width: 1024px) {
    .carousel-btn { display: none; }
}

/* Footer only. The footer drops to 2 columns at 900px and to 1 column at
   560px. In the band between, the brand column is narrower than the lockup
   (~293px), so the credential would spill into the Quick Links column.
   Stack it under the logo there, dropping the divider with it. */
@media (min-width: 561px) and (max-width: 660px) {
    .footer .brand-lockup {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .footer .brand-lockup .accreditation { padding-left: 0; }
    .footer .accreditation::before { display: none; }
}

/* Last-resort guard. The logo alone is 172px wide, so below ~350px there is
   no honest room for the credential beside it without shrinking it past
   legibility. Dropped rather than allowed to overflow. */
@media (max-width: 349px) {
    .accreditation { display: none; }
}