/* ==========================================================================
   Acumen HR: "Azure" look
   acumen.css holds layout and base tokens. This layer sets the Azure tokens
   (white + cyan-to-royal-blue gradients, Galano Grotesque + Cera Pro) and
   adds depth: glow, glass cards, gradient accent words.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Galano Grotesque"; src: url("../fonts/galano-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Cera Pro"; src: url("../fonts/cera-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cera Pro"; src: url("../fonts/cera-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cera Pro"; src: url("../fonts/cera-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ==========================================================================
   Tokens
   ========================================================================== */

:root[data-theme="azure"] {
    --paper: #ffffff;
    --paper-2: #f2f7fc;
    --paper-3: #e4edf7;
    --card: #ffffff;
    --ink: #06142a;
    --ink-2: #0a1d3a;
    --ink-3: #102b55;
    --ink-4: #1b4a8c;
    --text: #0a1b33;
    --text-2: #43546b;
    --text-3: #5b6b80;
    --cyan: #1196d6;
    --cyan-deep: #0a6fb5;
    --cyan-soft: #6fcdf6;
    --cyan-wash: rgba(17, 150, 214, 0.1);
    --on-ink: #eef5fc;
    --on-ink-2: #a9bed5;
    --on-ink-3: #8299b4;
    --line: rgba(10, 27, 51, 0.09);
    --line-2: rgba(10, 27, 51, 0.16);
    --line-ink: rgba(238, 245, 252, 0.12);
    --line-ink-2: rgba(238, 245, 252, 0.24);

    --f-display: "Galano Grotesque", "Cera Pro", "Segoe UI", system-ui, sans-serif;
    --f-text: "Cera Pro", "Segoe UI", system-ui, sans-serif;
    --w-light: 700;
    --w-regular: 700;
    --statement-weight: 500;
    --display-tracking: -0.035em;

    --grad-brand: linear-gradient(120deg, #14a7e8 0%, #1b74e4 55%, #2a4fcf 100%);
    --grad-text: linear-gradient(100deg, #0ea5e9 0%, #1d6fe0 55%, #2b4fd0 100%);
    --grad-text-ink: linear-gradient(100deg, #8adcff 0%, #45bff5 45%, #7aa9ff 100%);
    --em-style: normal;
    --em-color: #0a6fb5;
    --em-color-ink: #6fcdf6;
    --em-gradient: var(--grad-text);
    --em-gradient-ink: var(--grad-text-ink);
    --em-fill: transparent;

    --primary: var(--grad-brand);
    --primary-fg: #ffffff;
    --primary-hover: linear-gradient(120deg, #0d63c4 0%, #1f3fae 100%);
    --primary-border: transparent;
    --primary-border-hover: transparent;
    --primary-shadow: 0 14px 30px -12px rgba(27, 116, 228, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    --btn-light-bg: #ffffff;
    --btn-light-fg: #0a1b33;
    --btn-light-hover: #e6f3fd;
    --accent-solid: var(--grad-brand);
    --accent-solid-fg: #ffffff;

    --header-glass: rgba(255, 255, 255, 0.8);
    --hero-bg:
        radial-gradient(55% 65% at 92% 6%, rgba(20, 167, 232, 0.22), transparent 62%),
        radial-gradient(45% 55% at 0% 100%, rgba(42, 79, 207, 0.1), transparent 60%),
        linear-gradient(180deg, #f2f8ff 0%, #ffffff 100%);
    --hero-glow: rgba(27, 116, 228, 0.22);
    --tint-bg:
        radial-gradient(55% 70% at 100% 0%, rgba(20, 167, 232, 0.1), transparent 60%),
        linear-gradient(180deg, #f3f8fd 0%, #eaf2fb 100%);
    --ink-bg:
        radial-gradient(60% 70% at 92% 0%, rgba(20, 167, 232, 0.38), transparent 60%),
        radial-gradient(55% 60% at 0% 100%, rgba(42, 79, 207, 0.4), transparent 62%),
        #06142a;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --visual-bg: linear-gradient(160deg, #eef6fe 0%, #dcebfb 100%);
    --visual-bg-dark: radial-gradient(70% 70% at 80% 0%, rgba(20, 167, 232, 0.45), transparent 60%), linear-gradient(160deg, #0b2147 0%, #06142a 100%);
    --row-hover-bg: linear-gradient(90deg, rgba(20, 167, 232, 0.1), rgba(42, 79, 207, 0.04));
    --dot: rgba(10, 70, 140, 0.14);

    --shadow-card: 0 1px 2px rgba(10, 27, 51, 0.05), 0 18px 40px -18px rgba(18, 84, 170, 0.3);
    --shadow-float: 0 40px 70px -28px rgba(18, 84, 170, 0.48), 0 12px 24px -12px rgba(10, 27, 51, 0.18);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    --field-bg: #ffffff;
    --field-fg: #0a1b33;
    --field-hover-bg: #f2f8ff;
    --grain-opacity: 0;
}

/* "Document" components (candidate file, payslip, dashboard, logo tiles)
   always render as light paper so they read as real objects on any theme. */
:root[data-theme="azure"] :is(.dossier, .ui-card, .hcm, .hero__chip, .hcm-feature__toast, .plaque, .client-tile:not(.client-tile--invite)) {
    --text: #0a1b33;
    --text-2: #46566b;
    --text-3: #627184;
    --line: rgba(10, 27, 51, 0.1);
    --line-2: rgba(10, 27, 51, 0.18);
    --paper: #f3f7fb;
    --paper-2: #e9f0f7;
    --card: #ffffff;
    --white: #ffffff;
    --ink: #0a1b33;
    --ink-3: #17325a;
    --on-ink: #eef5fc;
    --on-ink-2: #a8bdd4;
    --cyan: #1196d6;
    --cyan-deep: #0a6fb5;
    color: var(--text);
}

/* ==========================================================================
   Depth layer
   ========================================================================== */

:root[data-theme="azure"] .hero { isolation: isolate; }

/* dotted grid behind the hero visual */
:root[data-theme="azure"] .hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 45%;
    height: 760px;
    z-index: -1;
    background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(60% 60% at 60% 35%, #000 20%, transparent 75%);
    mask-image: radial-gradient(60% 60% at 60% 35%, #000 20%, transparent 75%);
    pointer-events: none;
}

/* soft light pooling behind the portrait */
:root[data-theme="azure"] .hero__visual::before {
    content: "";
    position: absolute;
    inset: 8% -10% 2% -10%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--hero-glow), transparent 75%);
    filter: blur(20px);
    pointer-events: none;
}

:root[data-theme="azure"] .arch {
    box-shadow: var(--shadow-float);
}

:root[data-theme="azure"] .hero__ring {
    border-width: 1.5px;
}

/* facts become glass stat cards */
:root[data-theme="azure"] .hero__facts {
    gap: 14px;
    border-top: 0;
    max-width: 660px;
}

:root[data-theme="azure"] .hero__facts > div,
:root[data-theme="azure"] .hero__facts > div + div {
    padding: 20px 20px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
}

:root[data-theme="azure"] :is(.hero__facts dt, .facts dt, .hcm-hero__total span) {
    background-image: var(--em-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: var(--w-light);
}

:root[data-theme="azure"] .hcm-hero__total span { background-image: var(--em-gradient-ink); }

/* lifecycle sits in a raised glass bar */
:root[data-theme="azure"] .lifecycle__list {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    padding: 0 6px;
}

:root[data-theme="azure"] .lifecycle__list::before {
    left: 24px;
    right: 24px;
    width: auto;
    background: var(--em-gradient, var(--cyan));
    height: 2px;
    top: -1px;
    border-radius: 2px;
}

:root[data-theme="azure"] .lifecycle__stage {
    padding: 28px 20px 22px;
    border-radius: calc(var(--radius-lg) - 6px);
    transition: background-color 0.35s, transform 0.4s var(--ease);
}

:root[data-theme="azure"] .lifecycle__stage:hover { background: var(--row-hover-bg); }
:root[data-theme="azure"] .lifecycle__dot { left: 20px; box-shadow: 0 0 0 4px var(--cyan-wash); }

/* rounded, lifted plaques */
:root[data-theme="azure"] .plaque {
    border-radius: var(--radius);
    border-color: rgba(10, 27, 51, 0.08);
}
:root[data-theme="azure"] .plaque:hover { box-shadow: var(--shadow-card); }

/* practices index: tinted hover band */
:root[data-theme="azure"] .index-row__link::before {
    background: var(--row-hover-bg);
    border-radius: var(--radius);
}

/* vision / mission as cards */
:root[data-theme="azure"] .pillar {
    padding: 26px 26px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-card);
}

/* outsourcing streams as raised chips */
:root[data-theme="azure"] .stream-list { gap: 10px; }
:root[data-theme="azure"] .stream-list li {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: var(--shadow-card);
    transition: transform 0.4s var(--ease);
}
:root[data-theme="azure"] .stream-list li:hover { transform: translateY(-3px); }

/* HR BPO stages get coloured backdrops */
:root[data-theme="azure"] .bpo-item__visual {
    background: var(--visual-bg);
    border-color: transparent;
    box-shadow: var(--shadow-card);
}
:root[data-theme="azure"] .bpo-item:nth-child(2) .bpo-item__visual { background: var(--visual-bg-dark); }
:root[data-theme="azure"] .bpo-item__visual::before { border-color: rgba(255, 255, 255, 0.5); }

/* framed photos and cards */
:root[data-theme="azure"] :is(.frame, .service-card__media, .wide-photo) {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

:root[data-theme="azure"] :is(.module, .detail-card, .empty-state, .client-tile) {
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

:root[data-theme="azure"] .form-card { box-shadow: var(--shadow-float); }

:root[data-theme="azure"] .areas {
    border-radius: var(--radius);
    background: var(--visual-bg-dark);
}

:root[data-theme="azure"] .btn:hover { transform: translateY(-2px); }

/* dark bands carry the same gradient light as the hero */
:root[data-theme="azure"] .site-footer { background: var(--ink-bg); }

:root[data-theme="azure"] .cta-split::before {
    background:
        radial-gradient(60% 80% at 100% 0%, var(--hero-glow), transparent 60%),
        linear-gradient(180deg, rgba(6, 20, 42, 0.7), rgba(6, 20, 42, 0.92));
}

/* NEST: the active letter fills with the accent gradient */
:root[data-theme="azure"] .nest-step.is-active .nest-step__letter {
    background-image: var(--em-gradient-ink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
}

/* large watermark of the mark in the about section */
:root[data-theme="azure"] .about-intro { overflow: hidden; isolation: isolate; }
:root[data-theme="azure"] .about-intro::after {
    content: "";
    position: absolute;
    right: -9%;
    top: 6%;
    width: min(40vw, 560px);
    aspect-ratio: 1;
    z-index: -1;
    background: var(--em-gradient, var(--cyan));
    opacity: 0.045;
    -webkit-mask: url("../../images/brand/acumen-mark.svg") center / contain no-repeat;
    mask: url("../../images/brand/acumen-mark.svg") center / contain no-repeat;
    pointer-events: none;
}

/* ==========================================================================
   Type details
   ========================================================================== */

:root[data-theme="azure"] .display {
    font-size: clamp(2.8rem, 5.7vw, 5.7rem);
    line-height: 1.01;
}

:root[data-theme="azure"] .hero__title { max-width: 13ch; }
:root[data-theme="azure"] .h1 { line-height: 1.04; }
:root[data-theme="azure"] .h2 { line-height: 1.06; letter-spacing: -0.032em; }
:root[data-theme="azure"] .statement { letter-spacing: -0.02em; line-height: 1.28; }

/* small numerals were italic serif in v1: make them upright and bold */
:root[data-theme="azure"] :is(.eyebrow__num, .lifecycle__num, .lifecycle__ends, .index-row__num, .mega__num, .stream-list span, .pillar__label, .vm__label, .areas__label, .stage-block__num, .service-card__meta span, .tag--num, .detail-card__num, .advisory__link span, .nest-step__count) {
    font-style: normal;
}

:root[data-theme="azure"] :is(.steps li, .numbered li)::before { font-style: normal; font-weight: 700; }

:root[data-theme="azure"] :is(.index-row__num, .lifecycle__num, .stream-list span, .mega__num, .eyebrow__num, .stage-block__num, .tag--num, .detail-card__num) {
    font-family: var(--f-text);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

:root[data-theme="azure"] :is(.pillar__label, .vm__label, .areas__label) {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    background-image: var(--em-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

:root[data-theme="azure"] :is(.vm__label, .areas__label) { background-image: var(--em-gradient-ink); }

:root[data-theme="azure"] .lifecycle__ends { font-family: var(--f-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* eyebrows become pill tags */
:root[data-theme="azure"] .eyebrow {
    padding: 8px 15px 8px 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--text);
    gap: 10px;
}

:root[data-theme="azure"] .eyebrow::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-brand);
    opacity: 1;
    box-shadow: 0 0 0 4px var(--cyan-wash);
}

:root[data-theme="azure"] .eyebrow:has(.eyebrow__num)::before { display: none; }
:root[data-theme="azure"] .eyebrow__num {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: var(--grad-brand);
    color: #ffffff;
    font-size: 0.7rem;
}

:root[data-theme="azure"] :is(.section--ink, .page-hero--ink, .cta-split, .site-footer, .mobile-menu) .eyebrow,
:root[data-theme="azure"] .eyebrow--light {
    color: var(--on-ink);
    border-color: var(--line-ink-2);
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="azure"] .logo__name { font-weight: 700; letter-spacing: -0.02em; font-size: 1.32rem; }
:root[data-theme="azure"] .nav__link { font-weight: 500; }

:root[data-theme="azure"] .nest-step__letter { font-weight: 800; }
:root[data-theme="azure"] .site-footer__wordmark { font-weight: 800; letter-spacing: -0.05em; }

@media (max-width: 1023px) {
    :root[data-theme="azure"] .lifecycle__stage { border-radius: 0; }
    :root[data-theme="azure"] .lifecycle__list > li:nth-child(-n + 3) .lifecycle__stage { border-top-color: transparent; }
}

@media (max-width: 720px) {
    :root[data-theme="azure"] .lifecycle__list > li:nth-child(3) .lifecycle__stage { border-top-color: var(--line); }
    :root[data-theme="azure"] .hero__facts > div,
    :root[data-theme="azure"] .hero__facts > div + div { padding: 14px 16px; border-bottom: 1px solid var(--line); }
    :root[data-theme="azure"] .lifecycle__list { padding: 0; }
    :root[data-theme="azure"] .lifecycle__stage { padding: 22px 16px 18px; }
    :root[data-theme="azure"] .about-intro::after { width: 80vw; right: -30%; top: 2%; }
}