/* ==========================================================================
   ISL Group — design system v2
   Modern editorial layout, zero framework dependencies.
   Sections: tokens · base · layout · components · pages · responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --ink-950: #060d17;
    --ink-900: #0a1424;
    --ink-800: #101f36;
    --ink-700: #1a2c46;
    --ink-600: #2c405d;
    --ink-500: #4d6178;
    --ink-400: #6f8298;
    --ink-300: #9aa9bb;
    --ink-100: #eef1f6;

    --paper: #ffffff;
    --surface: #ffffff;
    --sand: #f7f6f2;
    --sand-2: #efede6;
    --line: #e3e7ec;
    --line-strong: #cfd6df;

    --accent: #0d7a68;
    --accent-600: #0a6355;
    --accent-300: #7fd3c7;
    --accent-soft: #e7f4f1;
    --accent-rgb: 13, 122, 104;
    --gold: #b8935a;

    --ok: #0d7a68;
    --warn: #b45309;
    --danger: #b42318;

    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-hero: "Poppins", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(10, 20, 36, .05);
    --shadow-sm: 0 4px 14px rgba(10, 20, 36, .06);
    --shadow: 0 18px 44px -22px rgba(10, 20, 36, .28);
    --shadow-lg: 0 40px 80px -40px rgba(10, 20, 36, .45);

    --container: 1240px;
    --gutter: clamp(18px, 4vw, 44px);
    --nav-h: 76px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-800);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* clip, not hidden: overflow-x:hidden makes the body a scroll container,
       which silently disables position:sticky for every descendant (the blog
       toolbar and the project detail aside both rely on it). clip refuses
       horizontal overflow just the same without creating that container, and
       the hidden line above stays as the fallback for older Safari. */
    overflow-x: hidden;
    overflow-x: clip;
}

body.nav-open { overflow: hidden; }

img, svg, video { 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; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 {
    margin: 0 0 .6em;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ink-950);
}
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

::selection { background: var(--accent); color: #fff; }

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

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px; top: -60px;
    z-index: 200;
    padding: 12px 18px;
    background: var(--ink-950);
    color: #fff;
    border-radius: var(--radius-sm);
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- 3. Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 10vw, 118px); }
.section--tight { padding-block: clamp(48px, 7vw, 78px); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink-950); color: #dbe3ec; }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--line { border-top: 1px solid var(--line); }

.section-head {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head__text { max-width: 62ch; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--ink-500); margin: 0; font-size: 1.02rem; }
.section-head--center {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
}
.section-head--center p { margin-inline: auto; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}
.section--ink .eyebrow { color: var(--accent-300); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 4. Buttons ---------- */
.btn {
    --btn-bg: var(--ink-950);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: .93rem;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; }

.btn--accent { --btn-bg: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-600); }
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink-900);
    border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink-900); background: var(--ink-950); color: #fff; }
.btn--light {
    --btn-bg: rgba(255, 255, 255, .1);
    --btn-fg: #fff;
    border-color: rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
}
.btn--light:hover { background: #fff; color: var(--ink-950); }
.btn--sm { padding: 10px 18px; font-size: .85rem; }
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    font-size: .9rem;
    color: var(--ink-900);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
    transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }
.link-arrow svg { width: 15px; height: 15px; }

/* ---------- 5. Navbar ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.is-solid {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgba(10, 20, 36, .04);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--nav-h);
}
.nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.nav__brand img { height: 38px; width: auto; }
.nav__brand-text {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
}
.nav__brand-text small {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .22em;
    opacity: .7;
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav__link {
    position: relative;
    display: inline-block;
    padding: 10px 14px;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .86);
    border-radius: var(--radius-pill);
    transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: #fff; }

.nav__right { display: flex; align-items: center; gap: 10px; }

.lang {
    position: relative;
}
.lang__button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lang__button:hover { background: rgba(255, 255, 255, .16); }
.lang__button svg { width: 15px; height: 15px; }
.lang__menu {
    position: absolute;
    right: 0; top: calc(100% + 8px);
    min-width: 168px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .2s var(--ease);
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .87rem;
    font-weight: 600;
    color: var(--ink-800);
}
.lang__menu a:hover, .lang__menu a[aria-current="true"] { background: var(--sand); color: var(--accent); }
.lang__menu span { font-size: .72rem; letter-spacing: .1em; color: var(--ink-400); }

.nav__cta { display: inline-flex; }
.nav__toggle {
    display: none;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    align-items: center;
    justify-content: center;
}
.nav__toggle svg { width: 20px; height: 20px; }

/* Light navbar variant for inner pages */
.site-header.is-solid .nav__brand-text,
.site-header.is-solid .nav__link,
.site-header.is-scrolled .nav__brand-text,
.site-header.is-scrolled .nav__link { color: var(--ink-800); }
.site-header.is-solid .nav__link.is-active,
.site-header.is-scrolled .nav__link.is-active { color: var(--ink-950); }
.site-header.is-solid .lang__button,
.site-header.is-scrolled .lang__button,
.site-header.is-solid .nav__toggle,
.site-header.is-scrolled .nav__toggle {
    color: var(--ink-800);
    border-color: var(--line-strong);
    background: transparent;
}

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: calc(var(--nav-h) + 20px) var(--gutter) 32px;
    background: var(--ink-950);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drawer__links { display: grid; align-content: start; gap: 2px; margin-top: 18px; }
.nav-drawer__links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: clamp(1.4rem, 6vw, 2rem);
    font-weight: 600;
    letter-spacing: -.02em;
}
.nav-drawer__links a small { font-size: .68rem; letter-spacing: .16em; color: var(--ink-300); }
.nav-drawer__footer { display: grid; gap: 16px; }
.nav-drawer__meta { font-size: .82rem; color: var(--ink-300); }
.nav-drawer__lang { display: flex; gap: 8px; }
.nav-drawer__lang a {
    flex: 1;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nav-drawer__lang a[aria-current="true"] { background: #fff; color: var(--ink-950); }

/* ---------- 6. Hero ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(94svh, 900px);
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: clamp(36px, 6vw, 64px);
    overflow: hidden;
    background: var(--ink-950);
    color: #fff;
    isolation: isolate;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--ink-900);
}
.hero__media img,
.hero__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}
.hero__media video {
    opacity: 0;
    transition: opacity .9s var(--ease);
}
.hero__media video.is-ready { opacity: .9; }
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 13, 23, .78) 0%, rgba(6, 13, 23, .38) 42%, rgba(6, 13, 23, .92) 100%),
        radial-gradient(90% 70% at 15% 20%, rgba(var(--accent-rgb, 13, 122, 104), .38), transparent 60%);
}
.hero__inner { width: 100%; }
.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #e8eef5;
}
.hero__kicker i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-300);
    box-shadow: 0 0 0 4px rgba(127, 211, 199, .18);
}
.hero h1 {
    max-width: 17ch;
    margin: 22px 0 20px;
    color: #fff;
    font-size: clamp(2.6rem, 6.6vw, 5.2rem);
    letter-spacing: -.045em;
    line-height: 1.02;
}
.hero h1 em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--accent-300);
}
.hero__lead {
    max-width: 56ch;
    margin: 0 0 30px;
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    color: rgba(255, 255, 255, .82);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__slogan {
    margin-top: 22px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .62);
}
.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(40px, 7vw, 76px);
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 26px;
}
.hero__stat strong {
    display: block;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: #fff;
}
.hero__stat span {
    display: block;
    margin-top: 8px;
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}
.hero__scroll {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.hero__scroll i {
    display: block;
    width: 1px; height: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), transparent);
}
.hero--inner {
    align-items: center;
    min-height: 0;
    padding-top: calc(var(--nav-h) + clamp(56px, 10vw, 108px));
    padding-bottom: clamp(48px, 7vw, 84px);
}
.hero--inner h1 { max-width: 24ch; margin-bottom: 14px; font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.hero--inner .hero__lead { max-width: 68ch; margin-bottom: 0; }

/* ---------- 7. Cards & grids ---------- */
.grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.4vw, 30px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-500); font-size: .94rem; }
.card__index {
    position: absolute;
    top: 18px; right: 22px;
    font-family: var(--font-display);
    font-size: .95rem;
    color: var(--ink-300);
}

/* About split */
.split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.split__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--sand-2);
    aspect-ratio: 4 / 3.4;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    border-radius: inherit;
    pointer-events: none;
}
.split__badge {
    position: absolute;
    left: 18px; bottom: 18px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.split__badge strong { display: block; font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; }
.split__badge span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.split h2 { margin-bottom: 16px; }
.split p { color: var(--ink-500); }

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.stat-row strong { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1; }
.stat-row span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }

/* Project cards */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
}
.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.project-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sand-2);
}
.project-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-out);
}
.project-card:hover .project-card__media img { transform: scale(1.045); }
.project-card__badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-800);
}
.project-card__badge--int { color: var(--accent-600); }
.project-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    flex: 1;
}
.project-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.project-card__meta svg { width: 13px; height: 13px; }
.project-card__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.32;
}
.project-card__title a::after { content: ""; position: absolute; inset: 0; }
.project-card__desc {
    margin: 0;
    color: var(--ink-500);
    font-size: .88rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--ink-400);
}
.project-card__foot .dot { color: var(--accent); }

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    margin-bottom: 28px;
}
.filter-bar__grow { flex: 1 1 220px; }
.field {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: var(--sand);
    font-size: .9rem;
    transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(13, 122, 104, .12);
}
.filter-search { position: relative; }
.filter-search .field { padding-left: 40px; }
.filter-search svg {
    position: absolute;
    left: 13px; top: 50%;
    width: 16px; height: 16px;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
}
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap .field { appearance: none; padding-right: 34px; min-width: 150px; cursor: pointer; }
.select-wrap svg {
    position: absolute;
    right: 12px;
    width: 14px; height: 14px;
    color: var(--ink-400);
    pointer-events: none;
}
.filter-bar__count {
    padding: 0 8px;
    font-size: .8rem;
    color: var(--ink-400);
    white-space: nowrap;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-600);
    transition: .2s var(--ease);
}
.chip:hover { border-color: var(--ink-300); }
.chip.is-active { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.chip small { margin-left: 6px; opacity: .55; font-size: .72rem; }

/* Empty state */
.empty-state {
    padding: 60px 24px;
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-400);
}
.empty-state svg { width: 32px; height: 32px; margin: 0 auto 12px; opacity: .5; }

/* Vision / mission */
.vm {
    position: relative;
    padding-block: clamp(64px, 10vw, 118px);
    background: var(--ink-950);
    color: #cfdae6;
    overflow: hidden;
}
/*
 * The photograph is meant to be seen: the tint is light enough to read the
 * port behind the cards, while the cards themselves carry most of the
 * contrast so the wording never fights the image.
 */
.vm__bg { position: absolute; inset: 0; opacity: .68; }
.vm__bg img { width: 100%; height: 100%; object-fit: cover; }
.vm__bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(112deg, rgba(6, 13, 23, .9) 0%, rgba(6, 13, 23, .66) 46%, rgba(6, 13, 23, .34) 100%),
        linear-gradient(180deg, rgba(6, 13, 23, .55) 0%, rgba(6, 13, 23, 0) 34%, rgba(6, 13, 23, .5) 100%);
}
.vm .container { position: relative; }
.vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vm-card {
    padding: clamp(26px, 3.4vw, 42px);
    background: rgba(7, 15, 26, .62);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg);
    box-shadow: 0 26px 60px rgba(3, 8, 16, .35);
    backdrop-filter: blur(10px) saturate(115%);
}
.vm-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(127, 211, 199, .12);
    color: var(--accent-300);
}
.vm-card__icon svg { width: 20px; height: 20px; }
.vm-card h3 { color: #fff; font-size: 1.35rem; margin-bottom: 12px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.vm-card p, .vm-card li { color: rgba(226, 234, 242, .9); font-size: .95rem; }
.vm-card ul { display: grid; gap: 10px; }
.vm-card li { position: relative; padding-left: 22px; }
.vm-card li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 8px; height: 8px;
    border: 1px solid var(--accent-300);
    border-radius: 50%;
}

/* Process — the diagram sits directly on the page, no frame, caption centred */
.process-figure {
    position: relative;
    margin: 0;
}
.process-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}
.process-figure figcaption {
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    font-size: .84rem;
    color: var(--ink-400);
    text-align: center;
}

/* Ongoing */
.ongoing {
    display: grid;
    gap: 14px;
}
.ongoing__item {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.ongoing__thumb { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 10; background: var(--sand-2); }
.ongoing__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ongoing__body h3 { margin-bottom: 6px; font-size: 1.05rem; }
.ongoing__body p { margin: 0; color: var(--ink-500); font-size: .9rem; }
.ongoing__progress { width: min(220px, 30vw); }
.ongoing__progress strong { display: block; margin-bottom: 8px; font-size: .8rem; letter-spacing: .06em; }
.bar { height: 5px; border-radius: 99px; background: var(--sand-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-300)); }

/* Partners */
.partners {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.partners__item {
    display: grid;
    place-items: center;
    padding: 26px 18px;
    min-height: 110px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    filter: grayscale(1);
    opacity: .62;
    transition: filter .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.partners__item:nth-child(6n) { border-right: 0; }
.partners__item:hover { filter: none; opacity: 1; background: var(--sand); }
.partners__item img { max-height: 38px; width: auto; object-fit: contain; }

/* CTA band */
.cta-band {
    position: relative;
    padding: clamp(40px, 6vw, 72px);
    background: var(--accent);
    border-radius: var(--radius-lg);
    color: #fff;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}
.cta-band::before {
    content: "";
    position: absolute;
    right: -80px; top: -120px;
    width: 320px; height: 320px;
    border: 60px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    /*
     * Decoration only. A positioned pseudo-element paints above in-flow
     * content, so without this it covers the right half of the band and
     * swallows the click on the button that sits there.
     */
    pointer-events: none;
}
.cta-band::after {
    content: "";
    position: absolute;
    left: -70px; bottom: -150px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%);
    pointer-events: none;
}
/* Keep the copy and the button above both decorations. */
.cta-band > * { position: relative; z-index: 1; }
.cta-band__body { max-width: 60ch; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 8px; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .82); max-width: 52ch; }
.cta-band .btn { background: #fff; color: var(--ink-950); }

/* Colours chosen in Panel Admin > Get in Touch (--sec-bg / --sec-ink). */
.cta-band--themed { background: var(--sec-bg); color: var(--sec-ink); }
.cta-band--themed h2 { color: var(--sec-ink); }
.cta-band--themed p { color: color-mix(in srgb, var(--sec-ink) 82%, transparent); }

/* ---------- 8. Footer ---------- */
.site-footer {
    background: var(--ink-950);
    color: var(--ink-300);
    padding-top: clamp(56px, 8vw, 88px);
    font-size: .92rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(36px, 5vw, 56px);
}
.site-footer h4 {
    margin-bottom: 16px;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-weight: 700;
}
.site-footer a { color: #cfdae6; transition: color .2s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-brand img { height: 40px; margin-bottom: 18px; }
.footer-brand p { max-width: 34ch; color: var(--ink-300); }
.footer-links { display: grid; gap: 10px; }
.footer-contact { display: grid; gap: 12px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--accent-300); }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    color: #dbe3ec;
    transition: .2s var(--ease);
}
.socials a:hover { background: #fff; color: var(--ink-950); border-color: #fff; }
.socials svg { width: 16px; height: 16px; }
/*
 * Networks that have no profile yet. The icon stays in the row so the footer
 * always reads as complete, but the slot is inert: muted, no hover, no pointer.
 */
.socials .socials__off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .34);
    cursor: default;
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .8rem;
    color: rgba(255, 255, 255, .42);
}
.footer-bottom a { color: rgba(255, 255, 255, .6); }

/* ---------- 9. Gallery hub ---------- */
.gallery-hub { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(260px, 30vw, 360px);
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}
.gallery-card img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease-out);
}
.gallery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 13, 23, .1) 0%, rgba(6, 13, 23, .82) 100%);
}
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card h3 { color: #fff; margin-bottom: 8px; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.gallery-card p { margin: 0 0 16px; color: rgba(255, 255, 255, .78); font-size: .9rem; max-width: 42ch; }
.gallery-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.gallery-card__meta span { display: inline-flex; align-items: center; gap: 8px; }
.gallery-card__meta svg { width: 14px; height: 14px; }

/* ---------- 10. Project detail ---------- */
.detail {
    padding-block: clamp(40px, 6vw, 70px) clamp(60px, 9vw, 100px);
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    font-size: .78rem;
    color: var(--ink-400);
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb svg { width: 12px; height: 12px; opacity: .6; }

.detail-head {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
    padding-bottom: clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--line);
}
.detail-head h1 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); margin-bottom: 14px; }
.detail-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--sand);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-600);
}
.tag svg { width: 13px; height: 13px; color: var(--accent); }
.tag--solid { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.tag--solid svg { color: var(--accent-300); }

.facts {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.facts__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
}
.facts__row:last-child { border-bottom: 0; }
.facts__row span { color: var(--ink-400); }
.facts__row strong { text-align: right; font-weight: 650; color: var(--ink-900); }

.detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(28px, 5vw, 64px);
    padding-top: clamp(32px, 5vw, 54px);
}
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 16px; }
.prose p { color: var(--ink-500); font-size: 1.02rem; line-height: 1.8; }
.prose p:last-child { margin-bottom: 0; }

.mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.mosaic__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sand-2);
    border: 0;
    padding: 0;
}
.mosaic__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mosaic__item img, .mosaic__item video {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-out);
}
.mosaic__item:hover img { transform: scale(1.04); }
.mosaic__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(6, 13, 23, .35));
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.mosaic__item:hover::after { opacity: 1; }
.mosaic__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(6, 13, 23, .25);
}
.mosaic__play svg { width: 34px; height: 34px; }

.detail-aside { align-self: start; display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 20px); }
.aside-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sand);
}
.aside-card h4 { margin-bottom: 12px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.aside-list { display: grid; gap: 10px; font-size: .88rem; }
.aside-list a { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-700); }
.aside-list a:hover { color: var(--accent); }
.aside-list span { color: var(--ink-400); font-size: .8rem; }

.detail-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.detail-nav a {
    display: grid;
    gap: 4px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: .25s var(--ease);
}
.detail-nav a:hover { border-color: var(--ink-900); background: var(--sand); }
.detail-nav small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.detail-nav strong { font-size: .92rem; font-weight: 650; }
.detail-nav a:last-child { text-align: right; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 9, 16, .92);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { max-width: min(1100px, 92vw); max-height: 84vh; }
.lightbox__stage img, .lightbox__stage video {
    max-width: 100%;
    max-height: 84vh;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.lightbox__close, .lightbox__prev, .lightbox__next {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: .2s var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: #fff; color: var(--ink-950); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox svg { width: 18px; height: 18px; }
.lightbox__count {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .76rem;
    letter-spacing: .1em;
}

/* ---------- 11. Inner pages ---------- */
.page-header {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 96px));
    padding-bottom: clamp(40px, 6vw, 64px);
    background: var(--sand);
    border-bottom: 1px solid var(--line);
}
.page-header h1 { max-width: 22ch; margin-bottom: 14px; }
.page-header p { max-width: 66ch; margin: 0; color: var(--ink-500); font-size: 1.04rem; }
.page-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 26px;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.page-header__meta strong { color: var(--ink-900); }

/* --- Brochure: one card per language edition -----------------------------
   Each card defines its own accent so the Indonesian and English brochures are
   distinguishable at a glance: muted red for the Indonesian edition, deep navy
   for the English one. .brochure-card--id / --en only swap the variables. */
.brochure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    /* Each card keeps its own height. If the cards were stretched to match each
       other, opening the share panel in one edition would grow the whole row and
       stretch the untouched edition into a tall empty block - it looked like a
       second, blank panel had opened. */
    align-items: start;
}
/* Where :has() exists, match the two heights for a tidier resting state, then
   fall back to natural heights the instant a panel is open. Browsers without
   :has() simply keep the rule above, which is the bug-free behaviour. */
@supports selector(:has(*)) {
    .brochure-grid:not(:has(.share-panel:not([hidden]))) { align-items: stretch; }
}
.brochure-card {
    --ed-ink: var(--accent-600);
    --ed-strong: var(--accent-600);
    --ed-soft: var(--accent-soft);
    --ed-line: rgba(var(--accent-rgb), .28);
    --ed-grad: linear-gradient(100deg, var(--accent-600), var(--accent-300));

    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 3vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: .3s var(--ease);
}
.brochure-card--id {
    --ed-ink: #a13327;
    --ed-strong: #86291f;
    --ed-soft: #fdf4f3;
    --ed-line: #f0d7d3;
    --ed-grad: linear-gradient(100deg, #8f2a22, #d3796a);
}
.brochure-card--en {
    --ed-ink: #1c3f6e;
    --ed-strong: #142f54;
    --ed-soft: #f2f6fb;
    --ed-line: #d7e1ef;
    --ed-grad: linear-gradient(100deg, #12263f, #3f7fb8);
}
.brochure-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--ed-grad);
}
.brochure-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: var(--ed-line);
}
.brochure-card__flag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 11px;
    border: 1px solid var(--ed-line);
    border-radius: var(--radius-pill);
    background: var(--ed-soft);
    color: var(--ed-ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
}
.brochure-card__flag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ed-ink);
}
.brochure-card h3 { margin: 0; }
.brochure-card p { margin: 0; color: var(--ink-500); font-size: .92rem; }
/* The shared note strip is spaced for a page section; inside a card it sits in
   the flex gap, so its own top margin and accent icons are re-tuned. */
.brochure-card .note-strip {
    margin-top: 0;
    padding-top: 14px;
    border-top-color: var(--ed-line);
    color: var(--ink-500);
}
.brochure-card .note-strip svg { color: var(--ed-ink); }

/* The download button carries the edition colour; Share stays a quiet second
   action tinted with the same hue so the pair still reads as one card. */
.brochure-card .btn { margin-top: 0; align-self: center; }
.brochure-card .btn:not(.btn--ghost) { --btn-bg: var(--ed-ink); }
.brochure-card .btn:not(.btn--ghost):hover {
    --btn-bg: var(--ed-strong);
    box-shadow: 0 14px 26px -16px var(--ed-ink);
}
.brochure-card .btn--ghost {
    --btn-fg: var(--ed-ink);
    border-color: var(--ed-line);
}
.brochure-card .btn--ghost:hover,
.brochure-card .btn--ghost[aria-expanded="true"] {
    --btn-fg: var(--ed-ink);
    background: var(--ed-soft);
    border-color: var(--ed-ink);
    color: var(--ed-ink);
}

/* Brochure share. The panel is an inline disclosure, not a floating popover:
   the card has no room for a popover and an overlay would clip on mobile. */
.brochure-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}
.brochure-card__actions .btn { margin-top: 0; align-self: center; }
.share-panel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ed-line, var(--line));
    border-radius: var(--radius-sm);
    background: var(--ed-soft, var(--sand));
    animation: share-panel-in .22s var(--ease-out);
}
.share-panel[hidden] { display: none; }
.share-panel__label {
    margin: 0;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ed-ink, var(--ink-400));
}
.share-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.share-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink-700);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.share-item[hidden] { display: none; }
.share-item svg { width: 16px; height: 16px; flex: none; color: var(--ed-ink, var(--accent-600)); }
.share-item:hover,
.share-item:focus-visible {
    border-color: var(--ed-ink, var(--accent));
    background: var(--surface);
    color: var(--ed-strong, var(--ink-900));
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -14px var(--ed-ink, var(--accent));
}
.share-item.is-done {
    border-color: var(--ed-ink, var(--accent));
    background: var(--surface);
    color: var(--ed-ink, var(--accent-600));
}
@keyframes share-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .share-panel { animation: none; }
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.contact-list { display: grid; gap: 14px; }
.contact-item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.contact-item svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }
.contact-item h4 { margin: 0 0 3px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.contact-item p, .contact-item a { margin: 0; font-size: .95rem; color: var(--ink-800); }
.map-frame {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--sand);
    min-height: 380px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

.quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quick-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: .25s var(--ease);
}
.quick-link:hover { border-color: var(--ink-900); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quick-link__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    flex: none;
}
.quick-link__icon svg { width: 18px; height: 18px; }
.quick-link strong { display: block; font-size: .93rem; }
.quick-link span { font-size: .78rem; color: var(--ink-400); }

/* ---------- 12. Motion ---------- */
[data-reveal] {
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
}
.js-ready [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }

.to-top {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-800);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 17px; height: 17px; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1180px) {
    .nav__link { padding: 10px 10px; }
    .nav__cta { display: none; }
    .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .partners__item:nth-child(6n) { border-right: 1px solid var(--line); }
    .partners__item:nth-child(4n) { border-right: 0; }
}

@media (max-width: 1024px) {
    :root { --nav-h: 68px; }
    .nav__menu, .lang { display: none; }
    .nav__toggle { display: inline-flex; }
    .nav__brand-text { color: #fff; }
    .site-header.is-solid .nav__brand-text,
    .site-header.is-scrolled .nav__brand-text { color: var(--ink-900); }

    .split { grid-template-columns: 1fr; }
    .split__media { order: -1; aspect-ratio: 16 / 10; }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-head { grid-template-columns: 1fr; align-items: start; }
    .detail-body { grid-template-columns: 1fr; }
    .detail-aside { position: static; grid-row: 1; }
    .details-sidebar-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-grid > :last-child { grid-column: span 3; }
    .ongoing__item { grid-template-columns: 180px 1fr; }
    .ongoing__progress { grid-column: 2; width: 100%; }
    .cta-band { grid-template-columns: 1fr; }
    .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vm-grid { grid-template-columns: 1fr; }
    .gallery-hub { grid-template-columns: 1fr; }
    .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 1px; }
    .hero { min-height: 88svh; }
    .section-head { grid-template-columns: 1fr; align-items: start; }
    .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mosaic__item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
    .details-sidebar-inline { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > :last-child { grid-column: span 2; }
    .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .partners__item:nth-child(4n) { border-right: 1px solid var(--line); }
    .partners__item:nth-child(3n) { border-right: 0; }
    .brochure-grid, .quick-links { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    .project-grid { grid-template-columns: 1fr; }
    .grid--2 { grid-template-columns: 1fr; }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--4 .card { padding: 20px 16px; }
    .grid--4 .card p { font-size: .88rem; }
    .grid--4 .card__index { display: none; }
    .filter-bar { padding: 10px; }
    .filter-bar__grow { flex-basis: 100%; }
    .select-wrap { flex: 1 1 calc(50% - 5px); }
    .select-wrap .field { min-width: 0; width: 100%; }
    .hero { min-height: 82svh; }
    .hero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
    .hero__actions .btn { flex: 1 1 auto; }
    .hero__stats { gap: 18px 1px; }
    .hero__stat span { font-size: .66rem; }
    .stat-row { grid-template-columns: 1fr 1fr; gap: 16px; }
    .ongoing__item { grid-template-columns: 1fr; }
    .ongoing__thumb { aspect-ratio: 16 / 9; }
    .ongoing__progress { grid-column: auto; }
    .mosaic { grid-template-columns: 1fr 1fr; }
    .mosaic__item:first-child { aspect-ratio: 4 / 3; }
    .detail-nav { grid-template-columns: 1fr; }
    .detail-nav a:last-child { text-align: left; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-grid > :last-child { grid-column: auto; }
    .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .partners__item:nth-child(3n) { border-right: 1px solid var(--line); }
    .partners__item:nth-child(2n) { border-right: 0; }
    .cta-band { padding: 28px 22px; }
    .lightbox__prev { left: 10px; }
    .lightbox__next { right: 10px; }
    .lightbox__close { top: 10px; right: 10px; }
    .to-top { right: 14px; bottom: 14px; }
}

@media (max-width: 400px) {
    .stat-row { grid-template-columns: 1fr; }
    .hero__stats { grid-template-columns: 1fr 1fr; }
    .mosaic { grid-template-columns: 1fr; }
    .select-wrap { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .js-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 14. Utilities ---------- */
[hidden] { display: none !important; }

.icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.15em;
    flex: none;
}

/* Brand plate keeps the dark-blue wordmark legible over imagery. */
.nav__brand {
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 20px -12px rgba(6, 13, 23, .5);
    transition: background .3s var(--ease), padding .3s var(--ease);
}
.nav__brand img { height: 34px; width: auto; }
.nav-overlay .site-header.is-scrolled .nav__brand { background: transparent; box-shadow: none; padding: 6px 0; }

.hero__media [data-parallax] {
    transform: scale(1.06);
    transform-origin: center top;
    will-change: transform;
}

.mosaic__item { cursor: zoom-in; }

/* Two-column text block used inside prose sections. */
.prose-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-700);
    line-height: 1.75;
}

.note-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: var(--ink-400);
}
.note-strip span { display: inline-flex; align-items: center; gap: 8px; }
.note-strip svg { width: 15px; height: 15px; color: var(--accent); }

@media print {
    .site-header, .site-footer, .to-top, .filter-bar, .lightbox, .hero__media, .cta-band { display: none !important; }
    body { color: #000; }
    .hero { min-height: 0; padding: 20px 0; background: #fff; color: #000; }
    .hero h1, .hero__lead { color: #000; }
}

/* ==========================================================================
   Home v2 — centred hero, portfolio cards, section skins
   ========================================================================== */

/* ---------- Centred hero ---------- */
.hero--center {
    align-items: center;
    text-align: center;
    min-height: min(88svh, 820px);
    padding-top: calc(var(--nav-h) + clamp(56px, 10vw, 120px));
    padding-bottom: clamp(56px, 9vw, 110px);
}
.hero--center .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero--center .hero__kicker { margin-bottom: 24px; }
.hero__company {
    max-width: 22ch;
    margin: 0 auto 20px;
    color: #fff;
    font-size: clamp(2.05rem, 5.9vw, 4.7rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase;
    text-wrap: balance;
}
.hero--center .hero__lead {
    max-width: 64ch;
    margin: 0 auto 18px;
    font-size: clamp(1.02rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}
.hero--center .hero__slogan {
    margin: 0 0 34px;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    color: #fff;
    opacity: .94;
}
.hero--center .hero__actions { justify-content: center; }

/* ---------- Section colour skins ---------- */
.section--themed { background: var(--sec-bg, transparent); color: var(--sec-ink, inherit); }
.section--themed > .container > .section-head h2,
.section--themed > .container > h2,
.section--themed .split h2 { color: var(--sec-ink); }
.section--themed > .container > .section-head p { color: color-mix(in srgb, var(--sec-ink) 72%, transparent); }
.section--themed > .container > .section-head .eyebrow { color: var(--accent); }
.section--themed .link-arrow { color: var(--sec-ink); }

.vm.section--themed { background: var(--sec-bg); color: var(--sec-ink); }
.vm h2, .vm .section-head h2 { color: var(--sec-ink); }
.vm .eyebrow { color: var(--accent-300); }
.vm .section-head p { color: color-mix(in srgb, var(--sec-ink) 72%, transparent); }

/* ---------- Home portfolio showcase ---------- */
.showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
}
.showcase__card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink-900);
    box-shadow: var(--shadow-sm);
    isolation: isolate;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.showcase__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.showcase__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.showcase__card:hover img { transform: scale(1.06); }
.showcase__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 13, 23, 0) 32%, rgba(6, 13, 23, .9) 100%);
}
.showcase__index {
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .82);
}
.showcase__body {
    position: absolute;
    inset: auto 0 0;
    display: block;
    padding: clamp(16px, 2vw, 24px);
    color: #fff;
}
.showcase__body strong {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.showcase__body span {
    display: block;
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.showcase__more { margin: 32px 0 0; text-align: center; }

@media (max-width: 1024px) {
    .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .showcase { grid-template-columns: 1fr; }
    .hero--center { min-height: 0; }
}

/* ---------- Footer logo aspect + partners ---------- */
.footer-brand img {
    height: 46px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}
.footer-brand p { margin-top: 4px; }

.partners__item { padding: 22px 16px; }
.partners__item img {
    max-height: 60px;
    max-width: 88%;
    width: auto;
    object-fit: contain;
}

/* ---------- Floating WhatsApp (shares the corner with .to-top) ---------- */
.float-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 12px 28px -12px rgba(37, 211, 102, .9);
    transition: bottom .3s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.float-wa:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(37, 211, 102, .95); }
.float-wa svg { width: 23px; height: 23px; }

/*
 * The bubble owns the bottom-right corner while the reader is still at the
 * top. As soon as the back-to-top button fades in it takes that spot, so the
 * bubble glides up one slot instead of overlapping it.
 */
.to-top.is-visible + .float-wa { bottom: 76px; }

@media (max-width: 640px) {
    .float-wa { right: 14px; bottom: 14px; width: 44px; height: 44px; }
    .to-top.is-visible + .float-wa { bottom: 70px; }
    .float-wa svg { width: 22px; height: 22px; }
}

/* ---------- Gallery: two scope columns ---------- */
.gallery-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}
.gallery-column {
    display: grid;
    gap: 18px;
}
.gallery-column__head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.gallery-column__head .eyebrow { display: block; margin-bottom: 6px; }
.gallery-column__head h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.gallery-column .gallery-hub { grid-template-columns: 1fr; }
.gallery-column .gallery-card { width: 100%; }

@media (max-width: 860px) {
    .gallery-columns { grid-template-columns: 1fr; }
}

/* Footer colour skin (set from Tampilan) */
.site-footer { background: var(--sec-bg, var(--ink-950)); color: var(--sec-ink, var(--ink-300)); }

/* ---------- Editable navigation submenus ---------- */
.nav__item { position: relative; }
.nav__item > .nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__item > .nav__link svg { width: 12px; height: 12px; opacity: .65; }
.nav__sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 6px;
    min-width: 210px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    z-index: 80;
}
.nav__item.has-sub:hover > .nav__sub,
.nav__item.has-sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub li { list-style: none; }
.nav__sub a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink-700);
    white-space: nowrap;
}
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-600); }
.nav-drawer__child { padding-left: 34px !important; font-size: .92rem !important; opacity: .82; }
.nav-drawer__child::before { content: "—"; margin-right: 8px; opacity: .5; }
.footer-brand__tagline { color: var(--accent-300); font-weight: 600; font-size: .9rem; }

/* ---------- Blog ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 30px);
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--accent-300);
}
.blog-card.is-pinned {
    border-color: var(--accent-300);
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), .10);
}
.blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink-100);
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__pin {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.blog-card__pin svg { width: 12px; height: 12px; }
.blog-card__pin--inline {
    position: static;
    padding: 3px 9px;
    margin-left: 4px;
    vertical-align: middle;
}
.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
    flex: 1;
}
.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .76rem;
    font-weight: 600;
    color: var(--ink-400);
}
.blog-card__cat {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-600);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .68rem;
}
.blog-card__title {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.32rem);
    line-height: 1.28;
    letter-spacing: -.01em;
}
.blog-card__title a { color: var(--ink-900); }
.blog-card:hover .blog-card__title a { color: var(--accent-600); }
.blog-card__excerpt {
    margin: 0;
    color: var(--ink-500);
    font-size: .92rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: .02em;
}
.blog-card__more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.blog-card__more:hover svg { transform: translateX(3px); }

/* ---------- Blog listing toolbar ------------------------------------------
   Search, category chips and sort live in one glass card at the top of the
   list. The card scrolls away with the page on every breakpoint so it never
   covers the articles underneath. site.js drives every control through
   data-* attributes only: with JS switched off the whole list is simply shown
   and the controls are inert, so nothing is ever hidden from a visitor. */
.blog-toolbar {
    position: relative;
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: var(--shadow-xs);
}
.blog-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Search field. The clear button and the "/" key hint share the same slot and
   are mutually exclusive, so there is never an overlap or a dead gap. */
.blog-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.blog-search > svg {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--ink-400);
    pointer-events: none;
    transition: color .2s var(--ease);
}
.blog-search:focus-within > svg { color: var(--accent); }
.blog-search .field { padding-left: 42px; padding-right: 50px; }
.blog-search__clear,
.blog-search__hint {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
}
.blog-search__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.blog-search__clear:hover { background: var(--accent-soft); color: var(--accent-600); }
.blog-search__clear svg { width: 13px; height: 13px; }
.blog-search__hint {
    padding: 3px 8px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink-400);
    pointer-events: none;
}

/* Sort. .select-wrap already pins one chevron to the right edge, so the leading
   icon has to be pulled back to the left explicitly. */
.blog-sort .field { padding-left: 36px; min-width: 200px; }
.blog-sort > svg:first-child { left: 12px; right: auto; width: 15px; height: 15px; }

.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: .8rem; }
.blog-chips .chip:hover { border-color: var(--accent-300); background: var(--accent-soft); color: var(--accent-600); }

.blog-toolbar__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.blog-count {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: .82rem;
    color: var(--ink-400);
}
.blog-count [data-filter-count] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.blog-count__total { opacity: .75; }
.blog-reset { margin-left: auto; }

/* Removable summary of what is currently filtered. */
.blog-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blog-active__label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.blog-active__pills { display: flex; flex-wrap: wrap; gap: 7px; }
.blog-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 280px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--accent-300);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-600);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.blog-pill:hover { border-color: var(--accent); background: var(--surface); }
.blog-pill__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-pill__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px; height: 17px;
    flex: none;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .16);
}
.blog-pill__x svg { width: 10px; height: 10px; }

.blog-more { text-align: center; margin: 34px 0 0; }

@media (max-width: 900px) {
    /* Sort drops to its own full-width row under the search box. */
    .blog-sort { flex: 1 1 100%; }
    .blog-sort .field { min-width: 0; }
}
@media (hover: none) {
    /* No physical keyboard to press "/" with. */
    .blog-search__hint { display: none; }
}
@media print {
    .blog-toolbar, .blog-more { display: none !important; }
}

/* The hero above an article is a flat navy block, so the cover photo is the
   only image in view. Give it real breathing room and centre the column: the
   old rule had zero top padding and pinned the 920px column to the left. */
.blog-article {
    max-width: 920px;
    margin-inline: auto;
    padding-block: clamp(46px, 6vw, 88px) clamp(56px, 7vw, 92px);
}
.blog-article__cover {
    margin: 0 auto clamp(34px, 4.6vw, 56px);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--ink-100);
    aspect-ratio: 16 / 9;
}
.blog-article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-article__body { max-width: 760px; margin-inline: auto; }
.blog-article__body h2 { margin-top: 34px; }
.blog-article__body h3 { margin-top: 26px; }
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 18px 22px; color: var(--ink-500); line-height: 1.8; }
.blog-article__body li { margin-bottom: 8px; }
.blog-article__body a { color: var(--accent-600); text-decoration: underline; text-underline-offset: 2px; }
.blog-article__body blockquote {
    margin: 0 0 20px;
    padding: 18px 22px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.blog-article__back { max-width: 760px; margin: 44px auto 0; }
.page-header--article { padding-bottom: clamp(26px, 4vw, 44px); }
.page-custom__body { max-width: 920px; }
.page-custom__body .prose { max-width: 760px; }
.page-custom--wide .page-custom__body { max-width: none; }
.page-custom--wide .page-custom__body .prose { max-width: none; }

@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-article { padding-block: 34px clamp(46px, 9vw, 66px); }
    .blog-article__body,
    .blog-article__back { max-width: 100%; }
}

/* ==========================================================================
   v3 — navy identity, single-line company name, page heroes, scope labels
   Everything here is additive: it refines the design system above without
   changing any existing selector contract used by the templates.
   ========================================================================== */

/* ---------- Hero: company name in the classic Poppins 700 ---------- */
/*
 * Typeface and weight follow the earlier ISL site (Poppins 700), but the size
 * is deliberately modest and always centred: the 26-character legal name is a
 * label, not a poster headline. `.hero--center h1.hero__company` outranks the
 * original `.hero h1` rule so its 17ch box and large size cannot win again.
 * Tracking is slightly positive so the letters never look cramped.
 */
.hero--center h1.hero__company {
    max-width: min(100%, 52rem);
    width: auto;
    margin: 0 auto clamp(14px, 1.8vw, 22px);
    font-family: var(--font-hero);
    font-size: clamp(1.15rem, 2.1vw, 2.05rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .045em;
    text-align: center;
    text-transform: none;
    white-space: normal;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 14px 38px rgba(4, 10, 20, .5);
}
@media (max-width: 640px) {
    .hero--center h1.hero__company {
        font-size: clamp(1.05rem, 4.35vw, 1.5rem);
        letter-spacing: .03em;
    }
}

/* ---------- Navy accents on every section header ---------- */
.eyebrow::before {
    content: "";
    flex: none;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .65;
}
.section-head h2::after,
.section > .container > .section-head h2::after {
    content: "";
    display: block;
    width: 62px;
    height: 3px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-300));
}
.section-head--center h2::after { margin-inline: auto; }

/* Service and feature cards */
.card__icon {
    background: var(--accent-soft);
    background: color-mix(in srgb, var(--accent) 9%, #fff);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.card__index { color: color-mix(in srgb, var(--accent) 34%, #fff); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.stat-row strong { color: var(--accent); }
.chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.chip.is-active small { opacity: .75; }
.showcase__index { color: var(--accent-300); }
.aside-card h4 { color: var(--accent-600); }

/* ---------- Vision & mission: the approach label must be white ---------- */
.vm .eyebrow { color: #fff; }
.vm .eyebrow::before { background: #fff; opacity: .8; }
.vm .section-head h2::after { background: rgba(255, 255, 255, .45); }
.vm-card__icon { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Scope labels: domestic green, international blue ---------- */
.project-card__badge {
    background: #e5f6ec;
    color: #12613a;
    box-shadow: 0 6px 18px rgba(6, 13, 23, .18);
}
.project-card__badge--int {
    background: #e6eefc;
    color: #1a3f74;
}

/* ---------- Inner page hero with photographic background ---------- */
.page-hero {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 108px));
    padding-bottom: clamp(46px, 6vw, 78px);
    overflow: hidden;
    background: var(--ink-950);
    color: #fff;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(6, 13, 23, .96) 0%,
        rgba(10, 20, 36, .88) 38%,
        rgba(22, 54, 92, .58) 72%,
        rgba(22, 54, 92, .42) 100%);
}
.page-hero h1 { max-width: 26ch; margin-bottom: 16px; color: #fff; }
.page-hero p { max-width: 68ch; color: rgba(255, 255, 255, .84); }
.page-hero .eyebrow { color: #fff; }
.page-hero .eyebrow::before { background: var(--accent-300); opacity: 1; }
.page-hero .breadcrumb { color: rgba(255, 255, 255, .62); }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, .82); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .page-header__meta { color: rgba(255, 255, 255, .7); }
.page-hero .page-header__meta strong { color: #fff; }
.page-hero .page-header__meta svg { color: var(--accent-300); }
.page-hero--short {
    padding-top: calc(var(--nav-h) + clamp(34px, 5vw, 56px));
    padding-bottom: clamp(30px, 4vw, 48px);
}
.page-hero--short h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }

/* Detail pages: keep the project photo visible behind the title */
.page-hero .tag,
.page-hero .tag--solid {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.page-hero .tag svg { color: var(--accent-300); }

@media (max-width: 760px) {
    .page-hero { padding-top: calc(var(--nav-h) + 44px); }
    .page-hero h1 { max-width: none; }
}

/* ---------- Scope chip (project detail hero) ---------- */
.scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.4;
}
.scope-chip--domestic {
    background: #e5f6ec;
    color: #12613a;
    box-shadow: inset 0 0 0 1px rgba(18, 97, 58, .16);
}
.scope-chip--international {
    background: #e6eefc;
    color: #1a3f74;
    box-shadow: inset 0 0 0 1px rgba(26, 63, 116, .18);
}

/* ---------- Project detail: photo band above the article ---------- */
.detail--heroed { padding-top: 0; }
.detail--heroed > .container { padding-top: clamp(30px, 5vw, 52px); }
.page-hero--detail .detail-head {
    align-items: end;
    padding-bottom: 0;
    border-bottom: 0;
}
.page-hero--detail .detail-head h1 { max-width: 24ch; }
.page-hero--detail .prose-lead { color: rgba(255, 255, 255, .85); }
.page-hero--detail .facts {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 26px 60px -30px rgba(6, 13, 23, .8);
}
.page-hero--detail .facts__row { border-bottom-color: var(--line); }
.page-hero--detail .facts__row span { color: var(--ink-400); }
.page-hero--detail .facts__row strong { color: var(--ink-900); }

/* ---------- FAQ accordion (halaman Get in Touch) ---------- */
.faq-list {
    display: grid;
    gap: 12px;
    max-width: 62rem;
}
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.faq-item:hover { border-color: var(--ink-300); }
.faq-item[open] {
    border-color: var(--accent);
    box-shadow: 0 14px 34px -22px rgba(6, 13, 23, .45);
}
.faq-item__q {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ink-900);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius);
}
.faq-item__num {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.faq-item__text { font-size: 1rem; line-height: 1.45; }
.faq-item__toggle {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sand);
    color: var(--ink-600);
    transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.faq-item__toggle svg { width: 15px; height: 15px; }
.faq-item[open] .faq-item__toggle {
    transform: rotate(45deg);
    background: var(--ink-950);
    color: #fff;
}
.faq-item__a {
    padding: 0 20px 20px 54px;
    color: var(--ink-600);
    font-size: .95rem;
    line-height: 1.7;
}

/* ---------- Contact form ---------- */
.cf {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: start;
}
.cf__intro h2 { margin-bottom: 14px; }
.cf__intro > p { color: var(--ink-500); max-width: 46ch; }

.cf__facts {
    display: grid;
    gap: 14px;
    margin: 26px 0 22px;
    padding: 0;
    list-style: none;
}
.cf__facts li { display: flex; align-items: flex-start; gap: 12px; }
.cf__fact-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-soft, #e7f4f1);
    color: var(--accent);
}
.cf__fact-icon svg { width: 17px; height: 17px; }
.cf__facts strong {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.cf__facts a, .cf__facts span:not(.cf__fact-icon) { font-size: .92rem; color: var(--ink-800); }
.cf__facts a:hover { color: var(--accent); }

.cf__privacy {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--ink-400);
}
.cf__privacy svg { width: 15px; height: 15px; flex: none; }

.cf__form {
    display: grid;
    gap: 16px;
    padding: clamp(22px, 3vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -50px rgba(6, 13, 23, .6);
}
.cf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf__field { display: grid; gap: 7px; min-width: 0; }
.cf__label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-700);
}
.cf__label span { color: #c0392b; }
.cf__form .field { background: var(--paper-2, #f8fafc); }
.cf__form .field:focus { background: var(--surface); }
.cf__form textarea.field { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf__field--select .select-wrap { display: flex; width: 100%; }
.cf__field--select .select-wrap .field { width: 100%; min-width: 0; }

.cf__field.is-invalid .field {
    border-color: #c0392b;
    background: #fdf3f2;
}
.cf__field.is-invalid .cf__label { color: #c0392b; }

.cf__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .74rem;
    color: var(--ink-400);
}
.cf__meta svg { width: 13px; height: 13px; }
.cf__meta span:first-child { display: inline-flex; align-items: center; gap: 5px; }

.cf__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}
.cf__actions .btn { min-width: 172px; justify-content: center; }
.cf__note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    color: var(--ink-400);
}
.cf__note svg { width: 14px; height: 14px; }

/* Honeypot: present in the DOM, never visible to a human */
.cf__hp {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.cf-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-sm, 12px);
    font-size: .9rem;
}
.cf-alert strong { display: block; font-size: .92rem; }
.cf-alert p { margin: 3px 0 0; font-size: .86rem; }
.cf-alert__list {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: .86rem;
    line-height: 1.5;
}
.cf-alert__list li + li { margin-top: 2px; }
.cf-alert__icon { display: inline-flex; flex: none; margin-top: 2px; }
.cf-alert__icon svg { width: 18px; height: 18px; }
.cf-alert--ok { background: #e7f6ee; color: #14603c; border: 1px solid #bfe6d0; }
.cf-alert--error { background: #fdecea; color: #8f2c22; border: 1px solid #f3ccc6; }

@media (max-width: 960px) {
    .cf { grid-template-columns: minmax(0, 1fr); }
    .cf__intro > p { max-width: none; }
}
@media (max-width: 560px) {
    .cf__row { grid-template-columns: minmax(0, 1fr); }
    .faq-item__a { padding-left: 20px; }
    .faq-item__q { padding: 16px; gap: 10px; }
    .cf__actions .btn { width: 100%; }
}

/* ==========================================================================
   Dark theme
   Activated by <html data-theme="dark">. The anti-flicker script in
   views/components/header.php sets that attribute before first paint and
   assets/js/site.js toggles it. Light is the default: with no data-theme
   attribute none of the rules below match, so the light tokens stand.
   ========================================================================== */
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — page, raised cards, alternating bands */
    --paper: #0a1017;
    --surface: #121c29;
    --sand: #0e1723;
    --sand-2: #1a2635;
    --line: #24313f;
    --line-strong: #35485e;

    /* Text ramp — flipped to read light-on-dark */
    --ink-950: #f4f7fb;
    --ink-900: #e8eef6;
    --ink-800: #d6dfeb;
    --ink-700: #c0ccdd;
    --ink-600: #a4b4c8;
    --ink-500: #8797ad;
    --ink-400: #6f8098;
    --ink-300: #5b6b82;
    --ink-100: #1b283a;

    --gold: #d6b684;

    /* Deeper shadows read correctly on dark surfaces */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .38);
    --shadow: 0 18px 44px -22px rgba(0, 0, 0, .70);
    --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, .80);
}

/* ---------- Theme toggle (visible in both themes) ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, .16); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Light shows the moon ("switch to dark"); dark shows the sun. */
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }

/* Solid / scrolled navbar: the white glass becomes dark glass. */
.site-header.is-solid .theme-toggle,
.site-header.is-scrolled .theme-toggle {
    color: var(--ink-800);
    border-color: var(--line-strong);
    background: transparent;
}

/* ---------- Dark-only overrides ---------- */
[data-theme="dark"] .site-header.is-scrolled,
[data-theme="dark"] .site-header.is-solid {
    background: rgba(10, 16, 23, .88);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

/* The plain .btn is a dark navy button in light mode; invert it so it still
   stands out on the dark canvas. Modifier buttons keep their own colours. */
[data-theme="dark"] .btn { --btn-bg: #e9eef5; --btn-fg: #0a1017; }
[data-theme="dark"] .btn--ghost:hover { background: #e9eef5; border-color: #e9eef5; color: #0a1017; }

/* Components that are intentionally dark keep the original navy surface so
   the flipped ink ramp does not turn them white. */
[data-theme="dark"] .skip-link,
[data-theme="dark"] .section--ink,
[data-theme="dark"] .nav-drawer,
[data-theme="dark"] .hero,
[data-theme="dark"] .hero__media { background-color: #060d17; }
[data-theme="dark"] .showcase__card { background-color: #0e1723; }
[data-theme="dark"] .section--ink { color: #dbe3ec; }

/* Inverse controls sit on a light/coloured surface: keep their text dark. */
[data-theme="dark"] .btn--light:hover,
[data-theme="dark"] .nav-drawer__lang a[aria-current="true"],
[data-theme="dark"] .cta-band .btn,
[data-theme="dark"] .socials a:hover,
[data-theme="dark"] .lightbox__close:hover,
[data-theme="dark"] .lightbox__prev:hover,
[data-theme="dark"] .lightbox__next:hover { color: #0a1017; }

/* Active filter chip + solid tag. */
[data-theme="dark"] .chip.is-active { background: var(--accent); border-color: var(--accent); color: #04121a; }
[data-theme="dark"] .tag--solid { background: #0e1a2b; border-color: var(--line-strong); color: var(--ink-950); }

/* Partner logos are usually dark artwork: give each a light tile so they
   stay visible on the dark wall. */
[data-theme="dark"] .partners { background: var(--surface); }
[data-theme="dark"] .partners__item { background: #eef2f7; }
[data-theme="dark"] .partners__item:hover { background: #ffffff; }

/* Footer keeps a dark surface even without an admin colour. */
[data-theme="dark"] .site-footer { background: var(--sec-bg, #060d17); color: var(--sec-ink, #9fb0c4); }

/* Home sections carry an inline --sec-bg that is light by default. Fold it
   into the dark canvas and force light text so the home page reads dark. */
[data-theme="dark"] .section--themed {
    background: color-mix(in srgb, var(--sec-bg, var(--paper)) 12%, var(--paper));
    color: var(--ink-800);
}
[data-theme="dark"] .section--themed > .container > .section-head h2,
[data-theme="dark"] .section--themed > .container > h2,
[data-theme="dark"] .section--themed .split h2 { color: var(--ink-950); }
[data-theme="dark"] .section--themed > .container > .section-head p { color: color-mix(in srgb, var(--ink-950) 72%, transparent); }
[data-theme="dark"] .section--themed > .container > .section-head .eyebrow { color: var(--accent-300); }
[data-theme="dark"] .section--themed .link-arrow { color: var(--ink-950); }