/* ==========================================================================
   Acumen HR Solutions
   Direction: "Private counsel". Warm paper, deep ink, the logo's cyan used
   sparingly. Newsreader for display, Hanken Grotesk for text. The arch
   motif comes from the arc over the three figures in the Acumen mark.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --paper: #f4f0e8;
    --paper-2: #ece6da;
    --paper-3: #e2dacb;
    --card: #fbf9f5;
    --white: #ffffff;

    --ink: #0b1a24;
    --ink-2: #10232f;
    --ink-3: #183242;
    --ink-4: #23435a;

    --text: #0b1a24;
    --text-2: #4b5861;
    --text-3: #626e76;

    --cyan: #1191d0;
    --cyan-deep: #0a6a9c;
    --cyan-soft: #6cc4ec;
    --cyan-wash: rgba(17, 145, 208, 0.1);

    --on-ink: #eef2f4;
    --on-ink-2: #a9b9c3;
    --on-ink-3: #7f939f;

    --ok: #2f7d5b;
    --warn: #b7791f;

    --line: rgba(11, 26, 36, 0.12);
    --line-2: rgba(11, 26, 36, 0.22);
    --line-ink: rgba(238, 242, 244, 0.12);
    --line-ink-2: rgba(238, 242, 244, 0.22);

    --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --f-text: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

    --container: 1320px;
    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(64px, 7.5vw, 120px);

    --radius-sm: 4px;
    --radius: 10px;
    --radius-lg: 18px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --shadow-card: 0 1px 0 rgba(11, 26, 36, 0.04), 0 18px 40px -18px rgba(11, 26, 36, 0.28), 0 6px 14px -8px rgba(11, 26, 36, 0.12);
    --shadow-float: 0 30px 60px -24px rgba(11, 26, 36, 0.45), 0 10px 22px -12px rgba(11, 26, 36, 0.25);

    --header-h: 84px;

    /* theme hooks (themes.css overrides these per data-theme) */
    --brand: #1191d0;
    --w-light: 300;
    --w-regular: 400;
    --display-tracking: -0.022em;
    --statement-weight: var(--w-light);
    --em-style: italic;
    --em-color: var(--cyan-deep);
    --em-color-ink: var(--cyan-soft);
    --em-gradient: none;
    --em-gradient-ink: none;
    --em-fill: currentColor;
    --primary: var(--ink);
    --primary-fg: var(--paper);
    --primary-hover: var(--cyan-deep);
    --primary-border: var(--ink);
    --primary-border-hover: var(--cyan-deep);
    --primary-shadow: none;
    --btn-light-bg: var(--paper);
    --btn-light-fg: var(--ink);
    --btn-light-hover: var(--white);
    --accent-solid: var(--ink);
    --accent-solid-fg: var(--paper);
    --header-glass: rgba(244, 240, 232, 0.86);
    --hero-bg: transparent;
    --hero-glow: rgba(17, 145, 208, 0.09);
    --tint-bg: var(--paper-2);
    --ink-bg: var(--ink);
    --field-bg: var(--white);
    --field-fg: var(--text);
    --field-hover-bg: #f6fbfe;
    --grain-opacity: 0.05;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--f-text);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

/* paper grain, very light */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--cyan); color: var(--white); }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 300;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--paper);
    border-radius: 999px;
    transform: translateY(-160%);
    transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.icon { flex: none; }

/* ---------- Type ---------- */
.display,
.h1,
.h2,
.h3,
.statement {
    font-family: var(--f-display);
    font-optical-sizing: auto;
    font-weight: var(--w-light);
    letter-spacing: var(--display-tracking);
    color: inherit;
}

.statement { font-weight: var(--statement-weight); }

/* accent words: italic in serif themes, gradient text in the sans themes */
.display em,
.h1 em,
.h2 em,
.h3 em,
.statement em,
.mega__title em,
.cta-split__title em,
.site-footer__headline em,
.client-tile--invite em {
    font-style: var(--em-style);
    font-weight: inherit;
    color: var(--em-color);
    background-image: var(--em-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--em-fill);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.statement em { font-weight: var(--statement-weight); }

.section--ink .h2 em,
.section--ink .display em,
.page-hero--ink .display em,
.cta-split__title em,
.site-footer__headline em,
.client-tile--invite em {
    color: var(--em-color-ink);
    background-image: var(--em-gradient-ink);
}

.display {
    font-size: clamp(2.9rem, 6.1vw, 6.25rem);
    line-height: 0.98;
}

.h1 {
    font-size: clamp(2.6rem, 5vw, 4.9rem);
    line-height: 1.02;
}

.h2 {
    font-size: clamp(2.1rem, 3.9vw, 3.75rem);
    line-height: 1.04;
    max-width: 18ch;
}

.h3 {
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.012em;
}

.statement {
    font-size: clamp(1.65rem, 2.75vw, 2.6rem);
    line-height: 1.22;
    letter-spacing: -0.016em;
}

.lead {
    font-size: clamp(1.06rem, 1.3vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-2);
    max-width: 52ch;
}

.body-lg {
    font-size: 1.08rem;
    line-height: 1.68;
    color: var(--text-2);
    max-width: 56ch;
}

.section--ink .body-lg,
.section--ink .lead { color: var(--on-ink-2); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-text);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.eyebrow:has(.eyebrow__num)::before { display: none; }

.eyebrow__num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: var(--w-regular);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cyan-deep);
    padding-right: 12px;
    border-right: 1px solid var(--line-2);
}

.eyebrow--light,
.section--ink .eyebrow { color: var(--on-ink-2); }
.section--ink .eyebrow__num,
.eyebrow--light .eyebrow__num { color: var(--cyan-soft); border-color: var(--line-ink-2); }

/* ---------- Buttons & links ---------- */
.btn {
    --btn-bg: var(--primary);
    --btn-fg: var(--primary-fg);
    --btn-fill: var(--primary-hover);
    --btn-border: var(--primary-border);
    --btn-border-hover: var(--primary-border-hover);
    --btn-hover-fg: var(--btn-fg);
    --btn-shadow: var(--primary-shadow);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    box-shadow: var(--btn-shadow);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    transition: color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-fill);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform 0.45s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before { transform: none; }
.btn:hover { border-color: var(--btn-border-hover); color: var(--btn-hover-fg); }

.btn .icon { transition: transform 0.35s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--sm { min-height: 44px; padding: 0 20px; font-size: 0.92rem; }

.btn--paper {
    --btn-bg: var(--btn-light-bg);
    --btn-fg: var(--btn-light-fg);
    --btn-fill: var(--btn-light-hover);
    --btn-border: var(--btn-light-bg);
    --btn-border-hover: var(--btn-light-hover);
    --btn-shadow: none;
}

.btn--ghost-light {
    --btn-bg: transparent;
    --btn-fg: var(--on-ink);
    --btn-fill: var(--btn-light-bg);
    --btn-border: var(--line-ink-2);
    --btn-border-hover: var(--btn-light-bg);
    --btn-hover-fg: var(--btn-light-fg);
    --btn-shadow: none;
}

.btn[aria-busy="true"] { pointer-events: none; opacity: 0.75; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.97rem;
    color: var(--text);
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    padding-bottom: 3px;
    transition: background-size 0.45s var(--ease), color 0.3s;
}
.link-arrow:hover { background-size: 100% 1px; color: var(--cyan-deep); }
.link-arrow .icon { transition: transform 0.35s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

.link-arrow--light,
.section--ink .link-arrow { color: var(--on-ink); }
.link-arrow--light:hover,
.section--ink .link-arrow:hover { color: var(--cyan-soft); }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    color: var(--text);
    transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--line);
    opacity: 0;
    transition: opacity 0.4s;
}

.site-header.is-scrolled {
    background: var(--header-glass);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
}
.site-header.is-scrolled::after { opacity: 1; }

/* ink-hero pages: header floats light over the dark hero until scrolled */
body[data-header="ink"] .site-header { position: fixed; left: 0; right: 0; }
body[data-header="ink"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu) { color: var(--on-ink); }
body[data-header="ink"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu) .btn--ink { --btn-bg: var(--btn-light-bg); --btn-fg: var(--btn-light-fg); --btn-fill: var(--btn-light-hover); --btn-border: var(--btn-light-bg); --btn-border-hover: var(--btn-light-hover); --btn-shadow: none; }
body[data-header="ink"] .site-header:not(.is-scrolled):not(.is-mega):not(.is-menu) .logo__mark { color: var(--cyan-soft); }

.site-header.is-mega { background: var(--paper); }
.site-header.is-mega::after { opacity: 1; }

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    margin-right: auto;
}

.brand-mark { display: inline-block; line-height: 0; }
.brand-mark svg { width: 100%; height: auto; }

.logo__mark { width: 38px; color: var(--brand); transition: color 0.3s; }

.logo__type { display: grid; line-height: 1; }

.logo__name {
    font-family: var(--f-display);
    font-size: 1.42rem;
    font-weight: var(--w-regular);
    letter-spacing: -0.01em;
}

.logo__sub {
    margin-top: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    opacity: 0.66;
}

.nav__list { display: flex; align-items: center; gap: 6px; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.96rem;
    font-weight: 500;
    border-radius: 999px;
    transition: color 0.25s;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 8px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__link[data-current]::after,
.nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }

.nav__trigger .icon { transition: transform 0.35s var(--ease); }
.nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }

.site-header__actions { display: flex; align-items: center; gap: 8px; }

/* Mega menu */
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 40px 60px -40px rgba(11, 26, 36, 0.35);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
    color: var(--text);
}

.nav__mega.is-open .mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s;
}

.mega__inner {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr) 1.2fr;
    gap: 36px;
    padding-top: 40px;
    padding-bottom: 44px;
}

.mega__title {
    font-family: var(--f-display);
    font-size: 1.7rem;
    line-height: 1.12;
    font-weight: var(--w-light);
    letter-spacing: -0.015em;
    margin: 14px 0 22px;
}
.mega__title em { color: var(--cyan-deep); }

.mega__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.mega__link {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 9px 0;
    font-weight: 500;
    transition: color 0.25s, transform 0.35s var(--ease);
}
.mega__link:hover { color: var(--cyan-deep); transform: translateX(4px); }

.mega__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--text-3);
}

.mega__feature {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 240px;
    padding: 22px;
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--on-ink);
    isolation: isolate;
}

.mega__feature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.8s var(--ease);
}
.mega__feature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(11, 26, 36, 0.1) 0%, rgba(11, 26, 36, 0.88) 78%);
}
.mega__feature:hover .mega__feature-img { transform: scale(1.05); }
.mega__feature .mega__label { color: var(--on-ink-2); border-color: var(--line-ink-2); }
.mega__feature-title {
    display: block;
    font-family: var(--f-display);
    font-size: 1.45rem;
    line-height: 1.15;
    margin-bottom: 10px;
}
.mega__feature .link-arrow { color: var(--on-ink); }

/* Menu toggle + mobile menu */
.menu-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 6px 0 14px;
    font-weight: 600;
    font-size: 0.95rem;
}

.menu-toggle__lines { position: relative; width: 26px; height: 12px; }
.menu-toggle__lines i {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}
.menu-toggle__lines i:first-child { top: 0; }
.menu-toggle__lines i:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--ink);
    color: var(--on-ink);
    overflow-y: auto;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s var(--ease-in-out), visibility 0s linear 0.6s;
}
.site-header.is-menu .mobile-menu {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.6s var(--ease-in-out), visibility 0s;
}
.site-header.is-menu { background: var(--paper); color: var(--text); }

.mobile-menu__inner { padding-top: 28px; padding-bottom: 40px; display: grid; gap: 40px; }

.mobile-menu__list > li { border-bottom: 1px solid var(--line-ink); }
.mobile-menu__list a,
.mobile-menu__list summary {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    font-weight: var(--w-light);
    line-height: 1.1;
    letter-spacing: -0.015em;
    cursor: pointer;
    list-style: none;
}
.mobile-menu__list summary::-webkit-details-marker { display: none; }
.mobile-menu__list summary .icon { margin-left: auto; align-self: center; transition: transform 0.35s var(--ease); }
.mobile-menu__services[open] summary .icon { transform: rotate(45deg); }
.mobile-menu__list span {
    font-family: var(--f-text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--cyan-soft);
    min-width: 24px;
}
.mobile-menu__services ul { padding: 0 0 18px 40px; display: grid; gap: 2px; }
.mobile-menu__services ul a {
    font-family: var(--f-text);
    font-size: 1.05rem;
    padding: 9px 0;
    color: var(--on-ink-2);
}
.mobile-menu__foot { display: grid; gap: 22px; justify-items: start; }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section); }
.section--tint { background: var(--tint-bg); }
.section--ink { background: var(--ink-bg); color: var(--on-ink); }
.section--tight { padding-block: clamp(48px, 5.5vw, 80px); }

.section-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(36px, 4.5vw, 64px);
}
.section-head .eyebrow { margin-bottom: 24px; }
.section-head__aside { display: grid; gap: 20px; justify-items: start; color: var(--text-2); max-width: 46ch; }
.section--ink .section-head__aside { color: var(--on-ink-2); }

/* ---------- Arch & frames ---------- */
.arch {
    position: relative;
    overflow: hidden;
    border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 40% 40% var(--radius-sm) var(--radius-sm);
    background: var(--paper-3);
    aspect-ratio: 4 / 5;
}
.arch img { width: 100%; height: 100%; object-fit: cover; }

.frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--paper-3);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

.frame__caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(244, 240, 232, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    background: var(--hero-bg);
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(56px, 6vw, 88px);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    right: -12vw;
    top: -18vw;
    width: 62vw;
    height: 62vw;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--hero-glow), transparent 70%);
    pointer-events: none;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
}

.hero__eyebrow { margin-bottom: 30px; }
.hero__title { max-width: 12.5ch; }
.hero__lead { margin-top: 30px; }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
    margin-top: 40px;
}

.hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(44px, 5vw, 64px);
    border-top: 1px solid var(--line-2);
    max-width: 640px;
}
.hero__facts > div { padding: 20px 20px 0 0; }
.hero__facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.hero__facts dt {
    font-family: var(--f-display);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: var(--w-light);
    letter-spacing: -0.02em;
}
.hero__facts dd { margin-top: 8px; font-size: 0.88rem; line-height: 1.45; color: var(--text-2); }

.hero__visual {
    position: relative;
    padding: 24px 0 40px;
    max-width: 500px;
    justify-self: end;
    width: 100%;
}

/* a thin ring that echoes the arch, like the arc over the figures in the logo */
.hero__ring {
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--cyan);
    border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 40% 40% var(--radius-sm) var(--radius-sm);
    transform: scale(1.08);
    -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 58%);
    mask-image: linear-gradient(180deg, #000 18%, transparent 58%);
    pointer-events: none;
    animation: ring-in 2.2s var(--ease) 0.5s both;
}

@keyframes ring-in {
    from { clip-path: inset(0 50% 100% 50%); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.hero__photo { position: relative; z-index: 1; }

.hero__dossier {
    position: absolute;
    z-index: 2;
    left: -18%;
    bottom: 0;
    width: min(300px, 74%);
    animation: float-in 1.1s var(--ease) 0.9s both;
}

.hero__chip {
    position: absolute;
    z-index: 2;
    right: -6%;
    top: 30%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background: var(--card);
    box-shadow: var(--shadow-card);
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--text-2);
    animation: float-in 1.1s var(--ease) 1.15s both;
}
.hero__chip strong { display: block; color: var(--text); font-weight: 600; }
.hero__chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 5px rgba(47, 125, 91, 0.14);
}

.hero__lifecycle { margin-top: clamp(56px, 7vw, 96px); }

@keyframes float-in {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Lifecycle ribbon ---------- */
.lifecycle { position: relative; }

.lifecycle__ends {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-3);
    margin-bottom: 14px;
}

.lifecycle__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.lifecycle__list::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    width: 100%;
    background: var(--cyan);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 2.2s var(--ease) 0.2s;
}
.js .lifecycle.is-in .lifecycle__list::before,
.no-js .lifecycle__list::before { transform: scaleX(1); }

.lifecycle__stage {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 26px 18px 6px 0;
    transition: transform 0.4s var(--ease);
}

.lifecycle__dot {
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--cyan);
    transition: background-color 0.3s, transform 0.4s var(--ease);
    transition-delay: calc(var(--i) * 0.28s + 0.3s);
}
.js .lifecycle.is-in .lifecycle__dot,
.no-js .lifecycle__dot { background: var(--cyan); }

.lifecycle__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--cyan-deep);
}
.lifecycle__label {
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-weight: var(--w-regular);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.lifecycle__note { font-size: 0.86rem; line-height: 1.4; color: var(--text-2); max-width: 22ch; }

.lifecycle__stage:hover { transform: translateY(-3px); }
.lifecycle__stage:hover .lifecycle__label { color: var(--cyan-deep); }
.lifecycle__stage:hover .lifecycle__dot { transform: scale(1.5); }

/* ---------- Clients ---------- */
.clients-strip {
    padding-block: clamp(48px, 6vw, 80px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.clients-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 55s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; gap: 16px; padding-right: 16px; }

.plaque {
    display: grid;
    place-items: center;
    width: 196px;
    height: 112px;
    padding: 18px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.plaque img { max-width: 100%; max-height: 70px; width: auto; object-fit: contain; }
.plaque:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- About intro ---------- */
.about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    gap: clamp(40px, 7vw, 120px);
}
.about-intro__side { display: grid; gap: 40px; align-content: start; }
.about-intro__photo { max-width: 280px; }
.about-intro__main { display: grid; gap: clamp(44px, 5vw, 64px); align-content: start; justify-items: start; }

.arch--small { border-radius: 50% 50% var(--radius-sm) var(--radius-sm) / 40% 40% var(--radius-sm) var(--radius-sm); }

.pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
    width: 100%;
}
.pillar { padding-top: 22px; border-top: 1px solid var(--line-2); }
.pillar__label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--cyan-deep);
    margin-bottom: 12px;
}
.pillar__text { color: var(--text-2); font-size: 1.04rem; line-height: 1.65; }

/* ---------- Practices index ---------- */
.index-list { border-top: 1px solid var(--line-2); }

.index-row { border-bottom: 1px solid var(--line-2); }

.index-row__link {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1.3fr) 110px 52px;
    gap: 24px;
    align-items: center;
    padding: 30px 0;
    transition: padding 0.5s var(--ease);
}

.index-row__link::before {
    content: "";
    position: absolute;
    inset: 0 -16px;
    background: var(--paper);
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: scaleY(0.6);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
    z-index: 0;
}
.index-row__link > * { position: relative; z-index: 1; }
.index-row__link:hover::before,
.index-row__link:focus-visible::before { opacity: 1; transform: none; }

.index-row__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-3);
}
.index-row__title {
    font-family: var(--f-display);
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    font-weight: var(--w-light);
    line-height: 1.08;
    letter-spacing: -0.015em;
    transition: transform 0.5s var(--ease), color 0.3s;
}
.index-row__short { color: var(--text-2); font-size: 0.98rem; line-height: 1.55; }
.index-row__stage {
    justify-self: start;
    padding: 5px 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}
.index-row__arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.5s var(--ease);
}
.index-row__link:hover .index-row__title { transform: translateX(10px); color: var(--cyan-deep); }
.index-row__link:hover .index-row__arrow { background: var(--accent-solid); border-color: transparent; color: var(--accent-solid-fg); transform: rotate(45deg); }

.index-preview {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    width: 260px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(0.85) rotate(-3deg);
    transition: opacity 0.3s var(--ease), transform 0.5s var(--ease);
    box-shadow: var(--shadow-float);
}
.index-preview.is-on {
    opacity: 1;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1) rotate(-3deg);
}
.index-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Dossier (NEST card) ---------- */
.dossier {
    background: var(--card);
    color: var(--text);
    border-radius: var(--radius);
    padding: 20px 20px 16px;
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(11, 26, 36, 0.06);
    font-size: 0.86rem;
}

.dossier__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dossier__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
}
.dossier__mark { width: 18px; color: var(--brand); }
.dossier__id {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-2);
}
.dossier__role {
    margin-top: 14px;
    font-family: var(--f-display);
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.dossier__meta { color: var(--text-3); font-size: 0.8rem; margin-top: 2px; }

.dossier__steps { display: grid; gap: 2px; margin-top: 16px; }
.dossier__step {
    display: grid;
    grid-template-columns: 30px 1fr 22px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    transition: color 0.4s;
}
.dossier__letter {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    font-family: var(--f-display);
    font-size: 1rem;
    transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.dossier__text { display: grid; line-height: 1.25; }
.dossier__word { font-weight: 600; font-size: 0.86rem; }
.dossier__note { font-size: 0.76rem; }
.dossier__state {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--white);
    background: var(--ok);
    transform: scale(0);
    transition: transform 0.45s var(--ease);
}

/* step states: active = the current letter, done = before it */
.dossier[data-step="1"] .dossier__step:nth-child(1),
.dossier[data-step="2"] .dossier__step:nth-child(2),
.dossier[data-step="3"] .dossier__step:nth-child(3),
.dossier[data-step="4"] .dossier__step:nth-child(4) { color: var(--text); }
.dossier[data-step="1"] .dossier__step:nth-child(1) .dossier__letter,
.dossier[data-step="2"] .dossier__step:nth-child(2) .dossier__letter,
.dossier[data-step="3"] .dossier__step:nth-child(3) .dossier__letter,
.dossier[data-step="4"] .dossier__step:nth-child(4) .dossier__letter {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--white);
    animation: pulse 2.2s ease-out infinite;
}
.dossier[data-step="2"] .dossier__step:nth-child(-n + 1),
.dossier[data-step="3"] .dossier__step:nth-child(-n + 2),
.dossier[data-step="4"] .dossier__step:nth-child(-n + 3) { color: var(--text); }
.dossier[data-step="2"] .dossier__step:nth-child(-n + 1) .dossier__letter,
.dossier[data-step="3"] .dossier__step:nth-child(-n + 2) .dossier__letter,
.dossier[data-step="4"] .dossier__step:nth-child(-n + 3) .dossier__letter { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dossier[data-step="2"] .dossier__step:nth-child(-n + 1) .dossier__state,
.dossier[data-step="3"] .dossier__step:nth-child(-n + 2) .dossier__state,
.dossier[data-step="4"] .dossier__step:nth-child(-n + 3) .dossier__state { transform: scale(1); }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(17, 145, 208, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(17, 145, 208, 0); }
    100% { box-shadow: 0 0 0 0 rgba(17, 145, 208, 0); }
}

.dossier__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.dossier__avatars { display: flex; }
.dossier__avatars i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--card);
    font-style: normal;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--white);
    background: var(--ink-3);
}
.dossier__avatars i + i { margin-left: -8px; }
.dossier__avatars i:nth-child(2) { background: var(--cyan-deep); }
.dossier__avatars i:nth-child(3) { background: #7c6a55; }
.dossier__status { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.dossier__status span { display: none; }
.dossier[data-step="1"] .dossier__status [data-for="1"],
.dossier[data-step="2"] .dossier__status [data-for="2"],
.dossier[data-step="3"] .dossier__status [data-for="3"],
.dossier[data-step="4"] .dossier__status [data-for="4"] { display: inline; }

.dossier--compact { padding: 16px 16px 12px; }
.dossier--compact .dossier__role { font-size: 1.25rem; margin-top: 10px; }
.dossier--compact .dossier__step { padding: 6px 0; grid-template-columns: 26px 1fr 20px; }
.dossier--compact .dossier__letter { width: 26px; height: 26px; font-size: 0.9rem; }
.dossier--compact .dossier__note { display: none; }

/* ---------- NEST ---------- */
.nest__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(40px, 7vw, 120px);
}
.nest__sticky {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    display: grid;
    gap: 24px;
    justify-items: start;
}
.nest__intro { color: var(--on-ink-2); font-size: 1.08rem; max-width: 40ch; }
.nest__dossier { width: min(360px, 100%); margin-top: 16px; }

.nest-step {
    display: grid;
    grid-template-columns: clamp(110px, 13vw, 190px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    min-height: 34vh;
    padding-block: 40px;
    border-bottom: 1px solid var(--line-ink);
}
.nest-step:first-child { border-top: 1px solid var(--line-ink); }

.nest-step__letter {
    font-family: var(--f-display);
    font-size: clamp(7rem, 15vw, 13rem);
    font-weight: var(--w-light);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-ink-2);
    transition: color 0.8s var(--ease), -webkit-text-stroke-color 0.8s var(--ease);
    text-align: center;
}
.nest-step.is-active .nest-step__letter { color: var(--cyan); -webkit-text-stroke-color: var(--cyan); }

.nest-step__body { opacity: 0.4; transition: opacity 0.6s var(--ease); }
.nest-step.is-active .nest-step__body { opacity: 1; }

.nest-step__count {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-ink-3);
}
.nest-step__word {
    font-family: var(--f-display);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: var(--w-light);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 10px 0 12px;
}
.nest-step__line { font-size: 1.12rem; color: var(--on-ink-2); max-width: 30ch; }

/* ---------- Outsourcing ---------- */
.outsourcing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: center;
}
.outsourcing__photo { aspect-ratio: 4 / 5; }
.outsourcing__copy { display: grid; gap: 26px; justify-items: start; }

.stream-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    width: 100%;
    margin-top: 8px;
}
.stream-list li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-weight: 500;
}
.stream-list span {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--cyan-deep);
    font-size: 0.95rem;
}

/* ---------- UI cards (BPO) ---------- */
.bpo__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
}
.bpo-item { display: grid; gap: 14px; align-content: start; }
.bpo-item__visual {
    position: relative;
    display: grid;
    place-items: center;
    height: 500px;
    padding: 36px 28px;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    overflow: hidden;
    margin-bottom: 10px;
}
.bpo-item__visual::before {
    content: "";
    position: absolute;
    width: 120%;
    aspect-ratio: 1;
    left: -10%;
    top: 46%;
    border-radius: 50%;
    border: 1px solid var(--line-2);
}
.bpo-item:nth-child(2) .bpo-item__visual { background: var(--ink-2); border-color: var(--ink-2); }
.bpo-item:nth-child(2) .bpo-item__visual::before { border-color: var(--line-ink-2); }
.bpo-item__title { font-family: var(--f-display); font-size: 1.65rem; font-weight: var(--w-regular); letter-spacing: -0.012em; }
.bpo-item__text { color: var(--text-2); max-width: 40ch; }

.ui-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: var(--card);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-float);
    font-size: 0.84rem;
    color: var(--text);
    transition: transform 0.6s var(--ease);
}
.bpo-item:hover .ui-card { transform: translateY(-6px) rotate(-0.6deg); }

.ui-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.pill {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-2);
}
.pill--ok { background: rgba(47, 125, 91, 0.12); color: var(--ok); }

.payslip__who {
    display: grid;
    margin: 14px 0 10px;
    font-family: var(--f-display);
    font-size: 1.2rem;
    line-height: 1.2;
}
.payslip__who span { font-family: var(--f-text); font-size: 0.76rem; color: var(--text-3); }
.payslip__rows > div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line);
    font-variant-numeric: tabular-nums;
}
.payslip__rows dt { color: var(--text-2); }
.payslip__rows dd { font-weight: 500; }
.payslip__rows .is-sub dt,
.payslip__rows .is-sub dd { font-weight: 700; color: var(--text); }
.payslip__rows .is-minus dd { color: #a24b3b; }
.payslip__net {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--on-ink);
}
.payslip__net span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); }
.payslip__net strong { font-family: var(--f-display); font-weight: var(--w-regular); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.payslip__net small { font-family: var(--f-text); font-size: 0.7rem; color: var(--on-ink-2); }

.verify__list { display: grid; margin-top: 6px; }
.verify__item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.verify__dot {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    color: var(--white);
}
.verify__item--ok .verify__dot { background: var(--ok); border-color: var(--ok); }
.verify__item--wait .verify__dot { border-color: var(--cyan); border-top-color: transparent; animation: spin 1.4s linear infinite; }
.verify__label { font-weight: 500; }
.verify__state { font-size: 0.74rem; color: var(--text-3); }
.verify__item--ok .verify__state { color: var(--ok); }
.verify__item--wait .verify__state { color: var(--cyan-deep); }
.verify__bar { height: 4px; border-radius: 4px; background: var(--paper-2); margin-top: 14px; overflow: hidden; }
.verify__bar span { display: block; height: 100%; width: var(--progress); background: var(--cyan); border-radius: inherit; }

@keyframes spin { to { transform: rotate(360deg); } }

.statutory__list { display: grid; margin-top: 4px; }
.statutory__list li {
    display: grid;
    gap: 1px;
    padding: 10px 0 10px 16px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.statutory__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
}
.statutory__body { font-weight: 600; }
.statutory__note { font-size: 0.76rem; color: var(--text-3); }

/* ---------- Smart HCM feature ---------- */
.hcm-feature { overflow: hidden; }
.hcm-feature__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.hcm-feature__copy { display: grid; gap: 26px; justify-items: start; }

.hcm-feature__groups { width: 100%; border-top: 1px solid var(--line-ink); }
.hcm-feature__groups li {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-ink);
    color: var(--on-ink-2);
}
.hcm-feature__groups b {
    font-family: var(--f-display);
    font-weight: var(--w-regular);
    font-size: 1.15rem;
    color: var(--on-ink);
}

.hcm-feature__visual { position: relative; }
.hcm-feature__toast {
    position: absolute;
    right: -2%;
    bottom: -64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--text-2);
    box-shadow: var(--shadow-float);
    font-size: 0.82rem;
    line-height: 1.3;
}
.hcm-feature__toast strong { display: block; color: var(--text); }
.hcm-feature__toast-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--cyan);
    color: var(--white);
}

/* dashboard mock */
.hcm {
    border-radius: var(--radius-lg);
    background: #f7f5f0;
    color: var(--text);
    box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    font-size: 0.78rem;
    transform: perspective(1800px) rotateY(-7deg) rotateX(2deg);
    transform-origin: left center;
    transition: transform 1s var(--ease);
}
.hcm-feature__visual:hover .hcm { transform: perspective(1800px) rotateY(-2deg) rotateX(0deg); }

.hcm__chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #ebe6dc;
    border-bottom: 1px solid var(--line);
}
.hcm__dots { display: flex; gap: 6px; }
.hcm__dots i { width: 9px; height: 9px; border-radius: 50%; background: #cfc7b8; }
.hcm__title { font-weight: 600; color: var(--text-2); }
.hcm__user {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.62rem;
    font-weight: 700;
}

.hcm__body { display: grid; grid-template-columns: 150px 1fr; min-height: 420px; }
.hcm__side { padding: 18px 12px; border-right: 1px solid var(--line); background: #f1ede5; }
.hcm__mark { width: 26px; color: var(--brand); margin: 0 8px 16px; }
.hcm__side li { padding: 7px 10px; border-radius: 6px; color: var(--text-2); }
.hcm__side li.is-active { background: var(--ink); color: var(--paper); font-weight: 600; }

.hcm__main { padding: 18px 20px; display: grid; gap: 14px; align-content: start; }
.hcm__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hcm__kicker { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.hcm__hello { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.15; }
.hcm__chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 0.7rem; white-space: nowrap; }

.hcm__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hcm__kpis > div {
    display: grid;
    padding: 12px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--line);
}
.hcm__kpis span { color: var(--text-3); font-size: 0.68rem; }
.hcm__kpis strong { font-family: var(--f-display); font-weight: var(--w-regular); font-size: 1.55rem; line-height: 1.2; }
.hcm__kpis em { font-style: normal; font-size: 0.66rem; color: var(--ok); }

.hcm__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.hcm__panel { padding: 12px 14px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); }
.hcm__panel-title { font-weight: 600; margin-bottom: 10px; }

.hcm__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 110px; align-items: end; }
.hcm__bars span { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; }
.hcm__bars i {
    align-self: end;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1s var(--ease);
}
.hcm__bars span:nth-child(n + 6) i { background: #cfd9df; }
.hcm__bars b { font-weight: 500; font-size: 0.64rem; color: var(--text-3); }
.js .is-in .hcm__bars i,
.no-js .hcm__bars i { transform: scaleY(1); }
.hcm__bars span:nth-child(2) i { transition-delay: 0.06s; }
.hcm__bars span:nth-child(3) i { transition-delay: 0.12s; }
.hcm__bars span:nth-child(4) i { transition-delay: 0.18s; }
.hcm__bars span:nth-child(5) i { transition-delay: 0.24s; }
.hcm__bars span:nth-child(6) i { transition-delay: 0.3s; }
.hcm__bars span:nth-child(7) i { transition-delay: 0.36s; }

.hcm__leaves li {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}
.hcm__leaves li:last-child { border-bottom: 0; }
.hcm__avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--paper-2);
    font-size: 0.6rem;
    font-weight: 700;
}
.hcm__leave-who { display: grid; line-height: 1.25; font-weight: 600; }
.hcm__leave-who small { font-weight: 400; color: var(--text-3); font-size: 0.66rem; }
.hcm__leave-act { display: flex; gap: 4px; }
.hcm__leave-act i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-2); }
.hcm__leave-act i.ok { background: var(--ok); border-color: var(--ok); }

.hcm__payroll ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hcm__payroll li { display: grid; gap: 6px; font-size: 0.7rem; color: var(--text-3); }
.hcm__payroll li span { height: 4px; border-radius: 4px; background: var(--paper-2); }
.hcm__payroll li.is-done span { background: var(--ok); }
.hcm__payroll li.is-active span { background: linear-gradient(90deg, var(--cyan) 55%, var(--paper-2) 55%); }
.hcm__payroll li.is-done,
.hcm__payroll li.is-active { color: var(--text); font-weight: 600; }

/* ---------- Advisory ---------- */
.advisory__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 104px);
}
.advisory__copy { display: grid; gap: 26px; align-content: start; justify-items: start; }
.advisory__links { display: grid; width: 100%; border-top: 1px solid var(--line-2); margin-top: 6px; }
.advisory__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: var(--w-light);
    letter-spacing: -0.01em;
    transition: color 0.3s, padding 0.5s var(--ease);
}
.advisory__link span { font-style: italic; font-size: 0.95rem; color: var(--text-3); min-width: 28px; }
.advisory__link .icon { margin-left: auto; transition: transform 0.4s var(--ease); }
.advisory__link:hover { color: var(--cyan-deep); padding-left: 8px; }
.advisory__link:hover .icon { transform: rotate(45deg); }

.advisory__areas { position: relative; padding-bottom: 80px; }
.advisory__photo { aspect-ratio: 5 / 4; width: 88%; }
.areas {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(380px, 70%);
    padding: 26px 28px;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-float);
}
.areas__label {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cyan-soft);
    margin-bottom: 12px;
}
.areas__list { counter-reset: area; }
.areas__list li {
    counter-increment: area;
    display: flex;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-ink);
    font-size: 0.93rem;
}
.areas__list li:last-child { border-bottom: 0; }
.areas__list li::before {
    content: counter(area, decimal-leading-zero);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--on-ink-3);
    padding-top: 3px;
}

/* ---------- CTA split ---------- */
.cta-split {
    position: relative;
    isolation: isolate;
    color: var(--on-ink);
    background: var(--ink);
    overflow: hidden;
}
.cta-split__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0.9;
}
.cta-split::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(11, 26, 36, 0.62), rgba(11, 26, 36, 0.9));
}
.cta-split__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cta-split__half {
    display: grid;
    gap: 22px;
    justify-items: start;
    align-content: start;
    padding: clamp(72px, 9vw, 136px) clamp(0px, 4vw, 64px) clamp(72px, 9vw, 136px) 0;
}
.cta-split__half + .cta-split__half { padding-left: clamp(28px, 5vw, 72px); border-left: 1px solid var(--line-ink-2); }
.cta-split__title {
    font-family: var(--f-display);
    font-weight: var(--w-light);
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    max-width: 16ch;
}
.cta-split__title em { color: var(--cyan-soft); font-style: italic; }
.cta-split__text { color: var(--on-ink-2); max-width: 42ch; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--ink);
    color: var(--on-ink);
    padding-top: clamp(72px, 9vw, 128px);
    overflow: hidden;
    border-top: 1px solid var(--line-ink);
}
.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(48px, 7vw, 120px);
    padding-bottom: clamp(56px, 7vw, 96px);
}
.site-footer__lead { display: grid; gap: 22px; align-content: start; justify-items: start; }
.site-footer__headline {
    font-family: var(--f-display);
    font-weight: var(--w-light);
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
}
.site-footer__headline em { color: var(--cyan-soft); }
.site-footer__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 8px; }

.site-footer__cols { display: grid; grid-template-columns: 1.15fr 0.8fr 1.2fr; gap: 32px; }
.site-footer__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--on-ink-3);
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line-ink);
}
.site-footer__cols li { padding: 5px 0; }
.site-footer__cols a { color: var(--on-ink-2); transition: color 0.25s; }
.site-footer__cols a:hover { color: var(--on-ink); }
.site-footer__contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--on-ink-2); }
.site-footer__contact .icon { margin-top: 4px; color: var(--cyan-soft); }

.site-footer__wordmark {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 2vw, 28px);
    font-family: var(--f-display);
    font-weight: var(--w-light);
    font-size: clamp(5rem, 21vw, 19rem);
    line-height: 0.74;
    letter-spacing: -0.045em;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-ink-2);
    user-select: none;
    /* the word is cropped cleanly by the rule above the copyright line */
    overflow: hidden;
    padding-top: 0.14em;
}
.site-footer__mark { width: 0.42em; color: var(--ink-4); flex: none; margin-bottom: 0.02em; }

.site-footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 26px 0 32px;
    border-top: 1px solid var(--line-ink);
    font-size: 0.88rem;
    color: var(--on-ink-3);
    background: transparent;
}
.site-footer__bottom-links { display: flex; gap: 24px; }
.site-footer__bottom a:hover { color: var(--on-ink); }

.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-float);
    transition: transform 0.4s var(--ease), background-color 0.3s;
}
.wa-float:hover { transform: translateY(-3px); background: var(--ok); }
.wa-float .icon { width: 26px; height: 26px; }

/* ---------- Inner page hero ---------- */
.page-hero {
    position: relative;
    padding-top: clamp(32px, 4.5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 72px);
}
.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 104px);
    align-items: end;
}
.page-hero__copy { display: grid; gap: 28px; justify-items: start; }
.page-hero__copy .h1 { max-width: 15ch; }
.page-hero__visual .arch { max-width: 420px; margin-left: auto; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-3);
}
.breadcrumb a:hover { color: var(--cyan-deep); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; opacity: 0.6; }

.page-hero--ink {
    background: var(--ink-bg);
    color: var(--on-ink);
    padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px));
    overflow: hidden;
}
.page-hero--ink .lead { color: var(--on-ink-2); }
.page-hero--ink .breadcrumb { color: var(--on-ink-3); }
.page-hero--ink .eyebrow { color: var(--on-ink-2); }

.wide-photo {
    margin-top: clamp(48px, 6vw, 80px);
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Prose & lists for inner pages ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
    gap: clamp(36px, 6vw, 104px);
}
.split__side .eyebrow { position: sticky; top: calc(var(--header-h) + 32px); }

.prose { display: grid; gap: 22px; max-width: 64ch; }
.prose p { color: var(--text-2); font-size: 1.08rem; line-height: 1.72; }
.prose h2 { font-family: var(--f-display); font-weight: var(--w-regular); font-size: 1.7rem; letter-spacing: -0.01em; margin-top: 18px; color: var(--text); }
.prose ul { display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 22px; color: var(--text-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--cyan-deep); }

.numbered {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
    border-top: 1px solid var(--line-2);
    counter-reset: n;
}
.numbered li {
    counter-increment: n;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: var(--w-light);
    line-height: 1.25;
}
.numbered li::before {
    content: counter(n, decimal-leading-zero);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--cyan-deep);
    padding-top: 0.25em;
}
.numbered--single { grid-template-columns: 1fr; }

/* facts row */
.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line-2);
}
.facts > div { padding: 26px 24px 0 0; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.facts dt { font-family: var(--f-display); font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: var(--w-light); line-height: 1; letter-spacing: -0.02em; }
.facts dd { margin-top: 10px; color: var(--text-2); font-size: 0.95rem; max-width: 22ch; }

/* quote blocks for vision & mission */
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-ink); }
.vm__item { padding: clamp(36px, 5vw, 64px) clamp(0px, 4vw, 56px) 0 0; }
.vm__item + .vm__item { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line-ink); }
.vm__label { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--cyan-soft); margin-bottom: 18px; }
.vm__text { font-family: var(--f-display); font-weight: var(--w-light); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.25; letter-spacing: -0.012em; }

/* NEST strip (compact, for inner pages) */
.nest-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); }
.nest-strip li { padding: 28px 24px 0 0; }
.nest-strip li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.nest-strip__letter { font-family: var(--f-display); font-size: 4.2rem; font-weight: var(--w-light); line-height: 1; color: var(--cyan); }
.nest-strip__word { font-weight: 700; margin-top: 10px; }
.nest-strip__line { color: var(--text-2); margin-top: 4px; }
.section--ink .nest-strip { border-color: var(--line-ink-2); }
.section--ink .nest-strip li + li { border-color: var(--line-ink); }
.section--ink .nest-strip__line { color: var(--on-ink-2); }

/* service cards (services index page) */
.stage-block { padding-block: clamp(40px, 4.5vw, 64px); border-top: 1px solid var(--line-2); }
.stage-block:first-of-type { border-top: 0; padding-top: 0; }
.stage-block__head { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); }
.stage-block__label { display: grid; gap: 6px; align-content: start; }
.stage-block__num { font-family: var(--f-display); font-style: italic; color: var(--cyan-deep); }
.stage-block__title { font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: var(--w-light); line-height: 1; letter-spacing: -0.02em; }
.stage-block__note { color: var(--text-2); font-size: 0.95rem; }

.service-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.service-cards--single { grid-template-columns: 1fr; }

.service-card { display: grid; gap: 18px; align-content: start; }
.service-card__body { display: grid; gap: 12px; justify-items: start; }
.service-card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-3); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.045); }
.service-card__meta { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--text-3); }
.service-card__meta span:first-child { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--cyan-deep); }
.service-card__title { font-family: var(--f-display); font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: var(--w-light); line-height: 1.1; letter-spacing: -0.015em; transition: color 0.3s; }
.service-card:hover .service-card__title { color: var(--cyan-deep); }
.service-card__text { color: var(--text-2); max-width: 48ch; }
.service-cards--single .service-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.service-cards--single .service-card__body { display: grid; gap: 14px; justify-items: start; }

/* service detail */
.service-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
}
.tag--num { font-family: var(--f-display); font-style: italic; font-weight: var(--w-regular); letter-spacing: 0; text-transform: none; font-size: 1rem; color: var(--cyan-deep); }

.service-landscape { margin-top: clamp(48px, 6vw, 80px); aspect-ratio: 21 / 9; }
.service-overview { display: grid; gap: 24px; max-width: 780px; }
.service-overview .statement { font-size: clamp(1.45rem, 2.2vw, 2.05rem); line-height: 1.3; }

.details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.detail-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 30px 28px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--card);
}
.detail-card__num { font-family: var(--f-display); font-style: italic; color: var(--cyan-deep); }
.detail-card__title { font-family: var(--f-display); font-size: 1.6rem; font-weight: var(--w-regular); letter-spacing: -0.012em; }
.detail-card__text { color: var(--text-2); }

.next-service {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding-block: clamp(48px, 6vw, 80px);
    border-top: 1px solid var(--line-2);
}
.next-service__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.next-service__title { font-family: var(--f-display); font-weight: var(--w-light); font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.025em; margin-top: 12px; transition: color 0.3s; }
.next-service__arrow {
    display: grid;
    place-items: center;
    width: clamp(64px, 8vw, 96px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    transition: background-color 0.4s, color 0.4s, transform 0.6s var(--ease);
}
.next-service:hover .next-service__title { color: var(--cyan-deep); }
.next-service:hover .next-service__arrow { background: var(--accent-solid); border-color: transparent; color: var(--accent-solid-fg); transform: rotate(-45deg); }

/* modules (Smart HCM page) */
.module-group { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-2); }
.module-group:first-child { border-top: 0; padding-top: 0; }
.module-group__title { font-family: var(--f-display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: var(--w-light); letter-spacing: -0.015em; line-height: 1.05; }
.module-group__count { color: var(--text-3); font-size: 0.9rem; margin-top: 8px; }
.module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.module {
    display: grid;
    gap: 6px;
    padding: 20px 22px;
    border-radius: var(--radius-sm);
    background: var(--card);
    border: 1px solid var(--line);
    transition: border-color 0.3s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.module:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.module__name { font-weight: 600; display: flex; gap: 10px; align-items: center; }
.module__name::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex: none; }
.module__text { color: var(--text-2); font-size: 0.94rem; }

.hcm-hero__visual { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.hcm-hero__index { align-self: end; width: 100%; max-width: 420px; justify-self: end; }
.hcm-hero__total { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; color: var(--on-ink-2); }
.hcm-hero__total span { font-family: var(--f-display); font-weight: var(--w-light); font-size: clamp(3.4rem, 6vw, 5.2rem); line-height: 0.9; color: var(--cyan-soft); letter-spacing: -0.03em; }
.hcm-feature__groups a { transition: color 0.25s; }
.hcm-feature__groups a:hover { color: var(--on-ink); }
.module-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.hcm-hero__visual .hcm { transform: perspective(2200px) rotateX(8deg); transform-origin: center top; max-width: 1100px; margin-inline: auto; }

/* clients wall */
.client-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.client-tile {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 14px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.client-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.client-tile__logo { display: grid; place-items: center; height: 120px; }
.client-tile__logo img { max-height: 92px; max-width: 80%; width: auto; object-fit: contain; }
.client-tile__name { padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--text-2); }
.client-tile--invite {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
    align-content: space-between;
    grid-template-rows: auto auto;
    padding: 26px;
}
.client-tile--invite p { font-family: var(--f-display); font-size: 1.5rem; font-weight: var(--w-light); line-height: 1.15; }

/* steps (careers / contact) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-display); font-style: italic; color: var(--cyan-deep); font-size: 1.05rem; }
.steps h3 { font-family: var(--f-display); font-weight: var(--w-regular); font-size: 1.55rem; letter-spacing: -0.01em; }
.steps p { color: var(--text-2); }
.steps--compact { grid-template-columns: 1fr; gap: 0; }
.steps--compact li { grid-template-columns: 40px 1fr; padding: 18px 0; gap: 4px 12px; }
.steps--compact li::before { grid-row: span 2; }
.steps--compact h3 { font-size: 1.2rem; }

.empty-state {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
    padding: clamp(28px, 4vw, 44px);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    background: var(--card);
}
.empty-state__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cyan-wash); color: var(--cyan-deep); }
.empty-state__title { font-family: var(--f-display); font-size: 1.6rem; font-weight: var(--w-regular); letter-spacing: -0.01em; }
.empty-state p { color: var(--text-2); margin-top: 8px; max-width: 60ch; }

/* ---------- Forms ---------- */
.form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 48px);
    box-shadow: var(--shadow-card);
    scroll-margin-top: calc(var(--header-h) + 24px);
}
.form-card__head { margin-bottom: 28px; }
.form-card__title { font-family: var(--f-display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: var(--w-light); letter-spacing: -0.018em; line-height: 1.1; }
.form-card__sub { color: var(--text-3); margin-top: 8px; font-size: 0.94rem; }

.form-alert {
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: rgba(162, 75, 59, 0.08);
    border: 1px solid rgba(162, 75, 59, 0.3);
    color: #8a3a2c;
    font-weight: 600;
    font-size: 0.94rem;
}

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }

.field { display: grid; gap: 8px; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field__label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 0.92rem; }
.field__optional { font-weight: 400; color: var(--text-3); font-size: 0.82rem; }

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--field-bg);
    color: var(--field-fg);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder,
.field textarea::placeholder { color: #8a949a; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(11, 26, 36, 0.4); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--cyan-deep); box-shadow: 0 0 0 4px rgba(17, 145, 208, 0.16); }

.field__select { position: relative; }
.field__select select { padding-right: 44px; cursor: pointer; }
.field__select .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); }

.field__hint { font-size: 0.84rem; color: var(--text-3); }
.field__error { font-size: 0.86rem; font-weight: 600; color: #a24b3b; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c4553f; background: var(--field-error-bg, #fffaf8); }
.field select option { color: #0b1a24; background: #ffffff; }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.form__note { display: flex; gap: 8px; align-items: center; font-size: 0.86rem; color: var(--text-3); }

.dropzone {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius);
    background: var(--field-bg);
    cursor: pointer;
    transition: border-color 0.25s, background-color 0.25s;
}
.dropzone:hover,
.dropzone.is-drag { border-color: var(--cyan-deep); background: var(--field-hover-bg); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.dropzone:focus-within { border-color: var(--cyan-deep); box-shadow: 0 0 0 4px rgba(17, 145, 208, 0.16); }
.dropzone__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cyan-wash); color: var(--cyan-deep); }
.dropzone__title { font-weight: 600; }
.dropzone__meta { font-size: 0.86rem; color: var(--text-3); }
.dropzone.has-file .dropzone__icon { background: rgba(47, 125, 91, 0.14); color: var(--ok); }
.field.has-error .dropzone { border-color: #a24b3b; }

.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 0.94rem; color: var(--text-2); cursor: pointer; }
.check input {
    width: 22px;
    height: 22px;
    min-height: 0;
    margin: 1px 0 0;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    background: var(--field-bg);
    appearance: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.check input:checked { background: var(--accent-solid); border-color: transparent; }
.check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg) translate(1px, -1px); }

.form-success { display: grid; gap: 14px; justify-items: start; padding: 12px 0; outline: none; }
.form-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(47, 125, 91, 0.14); color: var(--ok); }
.form-success__title { font-family: var(--f-display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: var(--w-light); letter-spacing: -0.018em; }
.form-success p { color: var(--text-2); max-width: 48ch; }

/* contact details */
.contact-list { display: grid; border-top: 1px solid var(--line-2); }
.contact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.contact-list .icon { color: var(--cyan-deep); margin-top: 2px; }
.contact-list__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.contact-list__value { font-size: 1.08rem; font-weight: 500; }
.contact-list a:hover { color: var(--cyan-deep); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact-grid__side { display: grid; gap: 44px; position: sticky; top: calc(var(--header-h) + 32px); }

/* privacy */
.legal { max-width: 72ch; }

/* 404 */
.not-found { min-height: 70vh; display: grid; align-content: center; }
.not-found__code { font-family: var(--f-display); font-size: clamp(6rem, 18vw, 14rem); font-weight: var(--w-light); line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--line-2); }

/* ---------- Media split (photo beside content) ---------- */
.media-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    gap: clamp(36px, 6vw, 96px);
    align-items: center;
}
.media-split--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
.media-split--flip .media-split__photo { order: 2; }
.media-split__photo { width: 100%; max-width: 460px; }
.media-split__photo.frame { max-width: none; aspect-ratio: 4 / 3; }
.media-split__body { display: grid; gap: 22px; justify-items: start; align-content: start; }

.nest-strip.nest-strip--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-top: 0; width: 100%; margin-top: 10px; }
.nest-strip.nest-strip--grid li,
.nest-strip.nest-strip--grid li + li {
    padding: 22px 22px 20px;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-card);
}
.nest-strip--grid .nest-strip__letter { font-size: 2.8rem; }

/* three captioned photos under the lifecycle */
.photo-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: clamp(14px, 2vw, 24px);
    margin-top: clamp(32px, 4vw, 56px);
}
.photo-row .frame { height: clamp(220px, 24vw, 340px); }

/* service overview beside its "includes" card */
.overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.overview-grid__main { display: grid; gap: 22px; justify-items: start; }
.include-card {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-float);
    display: grid;
    gap: 18px;
    justify-items: start;
}
.include-card__title { font-family: var(--f-display); font-weight: var(--w-regular); font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.15; }
.include-card .numbered { width: 100%; }
.include-card .numbered li { font-size: 1.12rem; padding: 15px 0; }

/* About page photo bento under the hero */
.about-mosaic {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: repeat(2, clamp(170px, 15vw, 240px));
    gap: clamp(12px, 1.6vw, 20px);
    margin-top: clamp(36px, 4.5vw, 64px);
}
.about-mosaic .frame { height: 100%; }
.about-mosaic__a { grid-row: 1 / 3; }
.about-mosaic__d { grid-column: 2 / 4; }
.about-mosaic__d img { object-position: 50% 45%; }

/* heading on the left, a card on the right */
.split-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
}
.split-head .eyebrow { margin-bottom: 20px; }

/* ---------- Reveal motion ---------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The wipe is on the <img>, never on the observed figure: a clip-path on the
   observed element itself makes IntersectionObserver see it as hidden, so it
   would never be revealed. The figure (with its tinted background) stays put. */
.js [data-reveal="image"] {
    opacity: 1;
    transform: none;
}
.js [data-reveal="image"] img {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.12);
    transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease);
    transition-delay: var(--d, 0ms);
}
.js [data-reveal="image"].is-in img { clip-path: inset(0 0 0 0); transform: none; }

.js [data-reveal="rise"] { transform: translateY(60px); }
.js [data-reveal="line"] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .nav__list { gap: 0; }
    .nav__link { padding: 0 10px; }
    .nav__link::after { left: 10px; right: 10px; }
    .mega__inner { grid-template-columns: 1.2fr repeat(3, 1fr); }
    .mega__feature { display: none; }
    .index-row__link { grid-template-columns: 52px minmax(0, 1.2fr) minmax(0, 1.2fr) 52px; }
    .index-row__stage { display: none; }
    .hcm__body { grid-template-columns: 1fr; }
    .hcm__side { display: none; }
}

@media (max-width: 1023px) {
    :root { --header-h: 72px; }

    .nav,
    .site-header__actions .nav__link--plain { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-header__actions .btn { display: none; }

    .hero__grid,
    .page-hero__grid,
    .about-intro__grid,
    .nest__grid,
    .outsourcing__grid,
    .hcm-feature__grid,
    .advisory__grid,
    .split,
    .contact-grid,
    .site-footer__top { grid-template-columns: 1fr; }

    .hero__visual { justify-self: center; max-width: 440px; margin-top: 12px; }
    .hero__dossier { left: -6%; }
    .hero__chip { right: -2%; }

    .lifecycle__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
    .lifecycle__list::before { display: none; }
    .lifecycle__stage { border-top: 1px solid var(--line); }
    .lifecycle__ends { display: none; }

    .about-intro__side { grid-template-columns: 1fr auto; align-items: end; }
    .about-intro__photo { max-width: 180px; }

    .section-head { grid-template-columns: 1fr; align-items: start; }

    .nest__sticky { position: static; }
    .nest-step { min-height: 0; padding-block: 40px; }

    .bpo__grid { grid-template-columns: 1fr; max-width: 560px; }
    .hcm { transform: none; }
    .hcm-feature__visual:hover .hcm { transform: none; }

    .advisory__photo { width: 100%; }
    .areas { position: relative; width: auto; margin: -60px 16px 0; }
    .advisory__areas { padding-bottom: 0; }

    .cta-split__grid { grid-template-columns: 1fr; }
    .cta-split__half { padding-right: 0; }
    .cta-split__half + .cta-split__half { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-ink-2); }

    .site-footer__cols { grid-template-columns: 1fr 1fr; }
    .site-footer__cols > div:last-child { grid-column: 1 / -1; }

    .split__side .eyebrow { position: static; }
    .contact-grid__side { position: static; }

    .page-hero__visual .arch { margin: 0; max-width: 360px; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .details-grid,
    .steps { grid-template-columns: 1fr; }
    .media-split,
    .media-split--flip,
    .overview-grid,
    .split-head { grid-template-columns: 1fr; }
    .media-split--flip .media-split__photo { order: 0; }
    .media-split__photo { max-width: 380px; }
    .photo-row { grid-template-columns: 1fr 1fr; }
    .photo-row .frame { height: clamp(160px, 30vw, 240px); }
    .about-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: clamp(140px, 34vw, 220px); }
    .about-mosaic__a { grid-row: span 2; grid-column: 1 / -1; }
    .about-mosaic__a img { object-position: 50% 25%; }
    .about-mosaic__d { grid-column: 1 / -1; }
    .photo-row .frame:first-child { grid-column: 1 / -1; height: clamp(200px, 48vw, 320px); }
    .nest-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .nest-strip li:nth-child(3) { padding-left: 0; border-left: 0; }
    .stage-block__head,
    .module-group { grid-template-columns: 1fr; }
    .client-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-cards--single .service-card { grid-template-columns: 1fr; }
    .vm { grid-template-columns: 1fr; }
    .vm__item + .vm__item { padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
    body { font-size: 16px; }
    .hero__facts { grid-template-columns: 1fr; }
    .hero__facts > div,
    .hero__facts > div + div { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .hero__facts dd { margin: 0; }
    .hero__dossier { position: relative; left: auto; width: 100%; margin-top: -60px; }
    .hero__chip { top: 18%; right: -8px; }

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

    .index-row__link { grid-template-columns: 40px 1fr 44px; gap: 14px; padding: 22px 0; }
    .index-row__short { grid-column: 2 / 3; grid-row: 2; font-size: 0.92rem; }
    .index-row__arrow { width: 44px; height: 44px; grid-row: 1 / 3; grid-column: 3; }
    .index-preview { display: none; }

    .pillars,
    .stream-list,
    .numbered,
    .module-list,
    .form__grid { grid-template-columns: 1fr; }

    .nest-step { grid-template-columns: 1fr; gap: 12px; }
    .nest-step__letter { text-align: left; font-size: 6rem; }

    .hcm { font-size: 0.7rem; }
    .hcm__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hcm__grid { grid-template-columns: 1fr; }
    .hcm__payroll ol { grid-template-columns: repeat(2, 1fr); }
    .hcm-feature__toast { position: relative; right: auto; bottom: auto; margin: -20px 12px 0; }

    .bpo-item__visual { min-height: 340px; padding: 28px 18px; }

    .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-tile__logo { height: 90px; }
    .client-tile__logo img { max-height: 70px; }

    .site-footer__cols { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr; }
    .facts > div,
    .facts > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .nest-strip { grid-template-columns: 1fr; }
    .nest-strip.nest-strip--grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .nest-strip.nest-strip--grid li,
    .nest-strip.nest-strip--grid li + li { padding: 16px; border: 1px solid var(--line); }
    .nest-strip li,
    .nest-strip li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
    .wide-photo,
    .service-landscape { aspect-ratio: 4 / 3; }
    .empty-state { grid-template-columns: 1fr; }
    .form__foot .btn { width: 100%; }
    .plaque { width: 150px; height: 92px; padding: 14px 16px; }
    .plaque img { max-height: 56px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .js [data-reveal],
    .js [data-reveal="image"],
    .js [data-reveal="image"] img { opacity: 1; transform: none; clip-path: none; }
    .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
    .marquee__list[aria-hidden="true"] { display: none; }
    .marquee__list { flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
    .hcm { transform: none; }
}

/* keep the NEST cards' padding when the plain strip's tablet rules kick in */
@media (max-width: 1023px) {
    .nest-strip.nest-strip--grid li:nth-child(3) { padding-left: 22px; border-left: 1px solid var(--line); }
}
@media (max-width: 720px) {
    .nest-strip.nest-strip--grid li:nth-child(3) { padding-left: 16px; }
}