:root {
  --brand: #194f90;
  --brand-deep: color-mix(in oklch, var(--brand) 100%, black 30%);
  --brand-deeper: color-mix(in oklch, var(--brand) 100%, black 50%);
  --brand-tint: color-mix(in oklch, var(--brand) 7%, white 93%);
  --gold: #ffb606;
  --green: #009d4f;
  --green-deep: color-mix(in oklch, var(--green) 100%, black 14%);
  --wa-green: #25d366; /* WhatsApp's own brand green -- deliberately NOT var(--green) (SESC's
                           brand green), used only on the WhatsApp glyph itself so it reads as
                           the real WhatsApp mark rather than an SESC-tinted icon. */

  --bg: oklch(0.995 0.001 258);
  --surface: oklch(0.965 0.005 258);
  --ink: oklch(0.24 0.028 258);
  --ink-soft: oklch(0.44 0.02 258);
  --ink-faint: oklch(0.56 0.016 258);
  --line: oklch(0.9 0.008 258);

  --font: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-sticky: 20;
  --z-mega: 30;
  --z-drawer: 40;
  --shell: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; }

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

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }

/* ---------- Top utility strip ---------- */
.utility { background: var(--brand); color: color-mix(in oklch, white 82%, transparent); font-size: 0.78rem; }
.utility .shell { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 16px; }
.utility a:hover { color: #fff; }
.utility-contact { display: flex; gap: 18px; align-items: center; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,0.92); backdrop-filter: blur(10px) saturate(1.3); border-bottom: 3px solid var(--green); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }

.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo img { height: 46px; width: auto; }
.logo-foot img { height: 60px; width: auto; }
@media (max-width: 430px) { .logo img { height: 38px; } }
.logo-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--brand); display: grid; place-items: center; color: #fff; }
.logo-text { font-weight: 800; font-size: 1.12rem; color: var(--brand); letter-spacing: 0.06em; line-height: 1; }
.logo-sub { display: block; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; letter-spacing: 0.05em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > li { position: relative; }
/* The mega panel is wider than its trigger, so it must center on the header, not on the <li>.
   Making this one item `static` promotes .site-header to its containing block. */
.nav > li.has-mega { position: static; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 26px 13px; font-size: 0.83rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border: 0; background: none; font-family: inherit; cursor: pointer; transition: color 160ms ease; }
.nav-link:hover, .nav > li:hover .nav-link, .nav > li:focus-within .nav-link { color: var(--brand); }
.nav-link[aria-current], .nav-link.is-active { color: var(--green); }
.nav-link .chev { width: 9px; height: 9px; transition: transform 200ms var(--ease); }
.nav > li:hover .chev, .nav > li:focus-within .chev { transform: rotate(180deg); }

.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.tool { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--brand); border-radius: 8px; color: var(--brand); background: #fff; position: relative; transition: background 160ms ease, color 160ms ease; }
.tool:hover { background: var(--brand); color: #fff; }
.account { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; width: auto; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.account .avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.account:hover .avatar { background: #fff; color: var(--brand); }

.burger { display: none; }

/* ---------- Dropdowns ---------- */
.drop, .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 180ms; }
li:hover > .drop, li:focus-within > .drop, li:hover > .mega, li:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }

.drop { position: absolute; top: 100%; left: 6px; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -24px rgba(25,79,144,0.45); padding: 8px; z-index: var(--z-mega); }
.drop a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.drop a:hover { background: var(--brand-tint); color: var(--brand); }
.drop a[aria-current] { color: var(--green); font-weight: 700; }

.mega { position: absolute; top: 100%; left: 50%; translate: -50% 0; width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 150px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(25,79,144,0.5); padding: 28px 26px; z-index: var(--z-mega); }
.mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.mega h3 { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; padding-bottom: 9px; border-bottom: 2px solid color-mix(in oklch, var(--brand) 18%, transparent); }
.mega h3 a:hover { text-decoration: underline; }
.mega li + li { margin-top: 1px; }
.mega a { display: block; font-size: 0.79rem; color: var(--ink-soft); padding: 4px 6px; border-radius: 5px; transition: color 140ms ease, background 140ms ease; }
.mega a:hover { color: var(--brand); background: #fff; }
.mega a[aria-current] { color: var(--green); font-weight: 700; }

/* 2026-07-23 -- "Education" nav: two lanes under one dropdown ("University" =
   the 3 department/category pages; "Courses" = those same departments drilled
   one level further into individual course pages). Reuses the existing
   .has-mega/.mega hover mechanism and .mega h3/.mega a leaf styling as-is --
   only the lane layout below is new. */
.mega-edu { display: flex; gap: 34px; align-items: flex-start; }
.mega-edu-lane { flex: 0 0 190px; }
.mega-edu-lane--courses { flex: 1 1 auto; min-width: 0; }
.edu-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.edu-course-grid h3 { font-size: 0.68rem; }

/* ---------- Title band ---------- */
.titleband { background: var(--brand); border-block: 3px solid var(--green); position: relative; }
.titleband::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, transparent 45%, black); mask-image: linear-gradient(90deg, transparent 45%, black); pointer-events: none; }
.titleband .shell { position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); min-height: 108px; padding-block: 14px; z-index: 1; }
.badge-ring { width: clamp(74px, 9vw, 92px); height: clamp(74px, 9vw, 92px); border-radius: 999px; background: #fff; border: 4px solid var(--green); flex: none; display: grid; place-items: center; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5); }
.badge-ring img { width: 100%; height: 100%; object-fit: cover; }
.titleband-text h1 { color: #fff; font-size: clamp(1.5rem, 3.1vw, 2.3rem); font-weight: 700; }
.crumb { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; color: color-mix(in oklch, white 68%, transparent); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.crumb a:hover { color: #fff; }
.crumb span.crumb-static { color: color-mix(in oklch, white 55%, transparent); }

/* ---------- Monogram fallback (no badge / no icon -- never a broken <img>) ---------- */
.monogram { width: 100%; height: 100%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; letter-spacing: 0.02em; }
.badge-ring .monogram { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.svc-card-badge .monogram, .icon-tile .monogram { font-size: 0.95rem; border-radius: 999px; }

/* ---------- Section shell ---------- */
section { padding-block: clamp(48px, 6.5vw, 82px); }
.tone { background: var(--surface); }
.tone-navy { background: linear-gradient(155deg, var(--brand) 0%, var(--brand-deep) 60%, var(--brand-deeper) 100%); color: #fff; }

.split { display: grid; gap: clamp(28px, 5vw, 62px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.flip .media { order: 2; } }

h2 { font-size: clamp(1.3rem, 2.3vw, 1.85rem); color: var(--brand); font-weight: 700; margin-bottom: 16px; }
.tone-navy h2 { color: #fff; }
.prose { color: var(--ink-soft); max-width: 62ch; font-size: 1rem; }
.prose p + p { margin-top: 0.85em; }

.media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: 0 24px 48px -30px rgba(25,79,144,0.6); }

/* ---------- Check list ---------- */
.checks { display: grid; gap: 3px; }
.check { display: flex; gap: 11px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.tone-navy .check { border-color: rgba(255,255,255,0.14); }
.tick { width: 21px; height: 21px; border-radius: 999px; flex: none; display: grid; place-items: center; background: color-mix(in oklch, var(--green) 14%, white 86%); color: var(--green); margin-top: 2px; }
.tone-navy .tick { background: rgba(255,255,255,0.14); color: #fff; }
.check span { font-size: 0.93rem; font-weight: 500; color: var(--ink); }
.tone-navy .check span { color: color-mix(in oklch, white 92%, transparent); }

/* ---------- Full-width banner section (zigzag breaker) ---------- */
.banner { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 40px; }
.banner img { width: 100%; aspect-ratio: 24 / 7; object-fit: cover; }
.banner-veil { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklch, var(--brand-deeper) 90%, transparent) 12%, transparent 78%); display: flex; align-items: center; padding: clamp(20px, 4vw, 52px); }
.banner-veil h2 { color: #fff; max-width: 16ch; margin: 0; }
@media (max-width: 720px) { .banner img { aspect-ratio: 16/9; } .banner-veil { background: color-mix(in oklch, var(--brand-deeper) 72%, transparent); } }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 44px; }

/* Single-column fallback for .split when a block has no photo -- without this, the fixed
   two-column .split grid leaves an empty, blank second column rather than letting the text take
   the full width. More specific than the bare `.split` rule, so it wins with no !important. */
.split.single { grid-template-columns: 1fr; max-width: 74ch; margin-inline: auto; }

/* ---------- Long list ---------- */
.longlist-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.count { font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.longlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 2px 34px; }
.plan { display: flex; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.plan::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--gold); flex: none; }

/* ---------- Icon grid (block type "icon-grid") ----------
   Each cell is the client's real per-item artwork PNG, which already has its CAPTION BAKED INTO
   the image -- so there is NO visible HTML caption (it would duplicate the baked text). The image
   IS the chip. Explicit column counts with real breakpoints (NOT auto-fit/auto-fill): fixed 1fr
   cells never stretch a lone item full-width (bug class 4); a partial last row just left-aligns.
   Icons render ~150-180 CSS px on desktop so the baked caption is legible, and scale down cleanly
   on narrow viewports. White tile backing so the transparent navy line-art always reads. */
.icongrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 980px) { .icongrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .icongrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .icongrid { grid-template-columns: repeat(2, 1fr); } }
.icongrid-item { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 8px 22px -18px rgba(25,79,144,0.4); }
.icongrid-item img { width: 100%; max-width: 190px; height: auto; display: block; margin-inline: auto; }
a.icongrid-item { transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms ease; }
a.icongrid-item:hover, a.icongrid-item:focus-visible { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 18px 34px -18px rgba(25,79,144,0.5); }
/* Monogram fallback -- ONLY when an item has no real icon (no baked caption), so it needs a
   visible label. Never triggers when every item matched 1:1. */
.icongrid-item--fallback { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px 14px; }
.icongrid-mono { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-tint); display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; color: var(--brand); }
.icongrid-fallback-label { font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); line-height: 1.25; }

/* ---------- Landing-page intro copy ---------- */
.page-intro { max-width: 68ch; color: var(--ink-soft); font-size: 1.02rem; margin-bottom: clamp(30px, 4vw, 46px); }

/* ---------- Service cards (category index -> its services, "icon + title") ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards-grid { grid-template-columns: 1fr; } }
.svc-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 24px -20px rgba(25,79,144,0.4); transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms ease; }
.svc-card:hover, .svc-card:focus-visible { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 18px 34px -18px rgba(25,79,144,0.5); }
.svc-card-badge { width: 52px; height: 52px; border-radius: 999px; flex: none; overflow: hidden; border: 2px solid var(--green); background: var(--brand-tint); }
.svc-card-badge img { width: 100%; height: 100%; object-fit: cover; }
.svc-card-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.svc-card-arrow { flex: none; color: var(--brand); transform: rotate(-90deg); }

/* ---------- Category cards (services index -> its 5 categories) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 30px -22px rgba(25,79,144,0.45); transition: transform 170ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms ease; }
.cat-card:hover, .cat-card:focus-visible { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 22px 40px -18px rgba(25,79,144,0.55); }
.cat-card h3 { font-size: 1.1rem; color: var(--brand); font-weight: 800; margin: 0; }
.cat-card p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.cat-card .count { font-size: 0.78rem; font-weight: 700; color: var(--green); letter-spacing: 0.03em; text-transform: uppercase; }
.cat-card .cat-card-arrow { align-self: flex-end; color: var(--brand); transform: rotate(-90deg); margin-top: -8px; }

/* ---------- CTA / WhatsApp pill ----------
   The client's own button graphic (assets/brand/whatsapp-cta.png), used as-is rather than
   redrawn in CSS -- it's their exact button, not our reconstruction of it. Source PNG had its
   transparency flattened onto a checkerboard (no real alpha channel); tools/build_home_assets
   or an equivalent one-off pass restores it before it lands in assets/brand/. */
.cta { padding-block: clamp(40px, 5vw, 60px); padding-inline: clamp(16px, 4vw, 44px); display: grid; place-items: center; }
.wa-cta { display: inline-block; max-width: 100%; transition: transform 170ms var(--ease), filter 200ms var(--ease); filter: drop-shadow(0 14px 26px rgba(0,0,0,0.35)); }
.wa-cta:hover, .wa-cta:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 18px 32px rgba(0,0,0,0.42)); }
.wa-cta:active { transform: scale(0.985); }
.wa-cta img { display: block; width: min(90vw, 420px); height: auto; }

/* ---------- Footer ---------- */
footer { background: var(--brand-deeper); color: color-mix(in oklch, white 66%, transparent); }
.foot-top { padding-block: 50px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 36px; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } }
footer h4 { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklch, white 52%, transparent); margin: 0 0 14px; }
footer .fcol ul { display: grid; gap: 9px; }
footer a { font-size: 0.88rem; color: var(--green); transition: color 150ms ease; }
footer a:hover { color: var(--gold); }
.map { border-radius: 12px; aspect-ratio: 16/10; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
.map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--green) !important; font-weight: 700; }
.map-link svg { flex: none; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.13); padding-block: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; color: color-mix(in oklch, white 52%, transparent); }
.foot-bottom a { color: color-mix(in oklch, white 62%, transparent); }
.foot-bottom a:hover { color: #fff; }

/* ---------- Scroll reveal ----------
   Visible by default; enhanced only where the native scroll timeline exists. A JS/class-gated
   opacity:0 default renders blank in print, no-JS, and headless capture, so it is not used. */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  [data-reveal] { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { transition-duration: 0.01ms !important; }
}

@media (max-width: 1080px) {
  .nav, .account { display: none; }
  .burger { display: grid; }
}
/* Small phones: the header row is logo + 2 tool buttons. Below ~430px those two blocks together
   exceed the viewport, so shed the non-essential text rather than let it clip. */
@media (max-width: 560px) {
  .utility .shell > span:first-child { display: none; }
  .utility .shell { justify-content: center; }
}
@media (max-width: 430px) {
  .logo-sub { display: none; }
  .header-tools { gap: 6px; }
  .tool { width: 38px; height: 38px; }
}

/* ============================================================================================
   Mobile drawer -- real off-canvas accordion menu (<1080px), data-driven from the same
   category/page data the desktop mega-menu reads, so the two can never disagree.
   ============================================================================================ */
.drawer-overlay { position: fixed; inset: 0; background: rgba(9, 20, 36, 0.55); z-index: var(--z-drawer); opacity: 0; transition: opacity 220ms var(--ease); }
.drawer-overlay[hidden] { display: none; }
.drawer-overlay.is-open { opacity: 1; }

.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(388px, 88vw); max-width: 100vw; background: #fff; z-index: calc(var(--z-drawer) + 1); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 260ms var(--ease); box-shadow: -24px 0 60px -24px rgba(0,0,0,0.45); }
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateX(0); }

.drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-close { width: 38px; height: 38px; border-radius: 8px; border: 1.5px solid var(--brand); color: var(--brand); background: #fff; display: grid; place-items: center; flex: none; }
.drawer-close:hover { background: var(--brand); color: #fff; }

.drawer-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px 28px; }
.drawer-list > li { border-bottom: 1px solid var(--line); }

.acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 10px; background: none; border: 0; font-weight: 700; font-size: 0.92rem; color: var(--ink); text-align: left; cursor: pointer; }
.acc-trigger .chev { width: 11px; height: 11px; color: var(--ink-faint); flex: none; transition: transform 200ms var(--ease); }
.acc-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acc-trigger.is-active { color: var(--green); }

.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease); }
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; min-height: 0; }

.acc-inner > ul { padding: 0 6px 10px 14px; display: grid; gap: 1px; }
.acc-inner a { display: block; padding: 9px 8px; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); border-radius: 7px; }
.acc-inner a:hover, .acc-inner a:focus-visible { background: var(--brand-tint); color: var(--brand); }
.acc-inner a[aria-current] { color: var(--green); font-weight: 700; }

/* nested category rows inside "Our Services" */
.acc-cat-row { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.acc-cat-row:first-child { border-top: 0; }
.acc-cat-link { flex: 1 1 auto; min-width: 0; padding: 13px 6px 13px 6px; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.acc-cat-link:hover, .acc-cat-link:focus-visible { color: var(--brand); }
.acc-cat-link[aria-current] { color: var(--green); }
.acc-chev-btn { width: 44px; flex: none; display: grid; place-items: center; background: none; border: 0; color: var(--ink-faint); cursor: pointer; }
.acc-chev-btn .chev { width: 10px; height: 10px; transition: transform 200ms var(--ease); }
.acc-chev-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acc-sub-panel .acc-inner > ul { padding-left: 28px; }

/* 2026-07-23 -- "Education" > University/Courses nesting: same generic
   .acc-trigger/.acc-panel pair as every other drawer item, one level deeper.
   site.js's querySelectorAll(".acc-trigger"/".acc-chev-btn") already picks
   these up with zero JS changes -- only the indentation/sizing below is new. */
.acc-inner > ul.drawer-list--nested > li.acc { border-top: 1px solid var(--line); }
.acc-inner > ul.drawer-list--nested > li.acc:first-child { border-top: 0; }
.acc-trigger--sub { font-size: 0.86rem; padding: 12px 8px; }

.drawer-link { display: block; padding: 15px 10px; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.drawer-link:hover, .drawer-link:focus-visible { color: var(--brand); }
.drawer-link[aria-current] { color: var(--green); }

/* Drawer utility row -- Search + My Account, the two header controls that are icon-only or hidden
   at mobile. Two explicit equal columns (not auto-fit), so no orphaned cell. */
.drawer-utility { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 10px 4px; }
.drawer-util-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border: 1.5px solid var(--brand); border-radius: 12px; background: #fff; color: var(--brand); font-weight: 700; font-size: 0.84rem; cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.drawer-util-btn:hover, .drawer-util-btn:focus-visible { background: var(--brand); color: #fff; }
.drawer-util-btn svg { width: 17px; height: 17px; flex: none; }

/* Full oversized-bubble .pill is sized in vw units against the *viewport*, wider than the
   drawer's own (max 388px) box -- reusing it here would overflow the drawer's internal scroll
   container. A compact, single-line, content-sized button is the correct component here. */
.drawer-wa { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 10px 6px; padding: 13px 16px; background: var(--green); color: #fff; font-weight: 800; font-size: 0.86rem; border-radius: 999px; text-align: center; box-shadow: 0 12px 26px -14px rgba(0,157,79,0.7); }
.drawer-wa:hover { background: var(--green-deep); }
.drawer-wa svg { width: 18px; height: 18px; color: #fff; flex: none; }

body.drawer-locked { overflow: hidden; }

/* ============================================================================================
   Home hero
   ============================================================================================ */
.hero { position: relative; background: linear-gradient(155deg, var(--brand) 0%, var(--brand-deep) 55%, var(--brand-deeper) 100%); color: #fff; overflow: hidden; border-bottom: 3px solid var(--green); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 85%); mask-image: linear-gradient(180deg, black 0%, transparent 85%); pointer-events: none; }
.hero .shell { position: relative; z-index: 1; padding-block: clamp(56px, 9vw, 108px); display: grid; gap: 20px; max-width: 46ch; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; color: #fff; }
.hero p { font-size: 1.05rem; color: color-mix(in oklch, white 88%, transparent); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 800; font-size: 0.88rem; border: 2px solid transparent; transition: transform 160ms var(--ease), background 160ms ease, color 160ms ease, border-color 160ms ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold); color: var(--brand-deeper); }
.btn-primary:hover { background: #fff; }
.btn-outline { border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(20px, 4vw, 44px); margin-top: 10px; }
.hero-stat b { display: block; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--gold); font-weight: 800; }
.hero-stat span { font-size: 0.76rem; color: color-mix(in oklch, white 78%, transparent); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================================================
   Team grid (team page)
   ============================================================================================ */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: 0 14px 30px -24px rgba(25,79,144,0.4); display: grid; gap: 4px; }
.team-avatar { width: 62px; height: 62px; border-radius: 999px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }
.team-card h3 { font-size: 1.02rem; color: var(--brand); font-weight: 800; }
.team-role { font-size: 0.82rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.team-cred { font-size: 0.85rem; color: var(--ink-soft); }

/* ============================================================================================
   Store / product grid
   ============================================================================================ */
.store-note { display: flex; gap: 12px; align-items: flex-start; background: var(--brand-tint); border: 1px solid color-mix(in oklch, var(--brand) 20%, transparent); border-radius: 14px; padding: 16px 18px; margin-bottom: clamp(30px, 4vw, 46px); font-size: 0.9rem; color: var(--ink-soft); max-width: 74ch; }
.store-note svg { flex: none; color: var(--brand); margin-top: 2px; }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 26px -22px rgba(25,79,144,0.4); transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), border-color 160ms ease; }
.prod-card:hover, .prod-card:focus-visible { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 20px 36px -18px rgba(25,79,144,0.5); }
.prod-thumb { aspect-ratio: 1 / 1; width: 100%; background: linear-gradient(155deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; display: grid; place-items: center; text-align: center; padding: 14px; }
.prod-thumb span { font-weight: 800; font-size: 0.92rem; letter-spacing: 0.01em; }
.prod-body { padding: 14px 16px 18px; display: grid; gap: 6px; }
.prod-cat { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
.prod-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.prod-price { font-size: 0.98rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

/* Product detail page */
.prod-detail { display: grid; gap: clamp(28px, 5vw, 62px); align-items: start; }
@media (min-width: 860px) { .prod-detail { grid-template-columns: 1fr 1fr; } }
.prod-detail .prod-thumb { aspect-ratio: 1 / 1; border-radius: 18px; box-shadow: 0 24px 48px -30px rgba(25,79,144,0.6); padding: 32px; }
.prod-detail .prod-thumb span { font-size: 1.15rem; }
.prod-detail-price { font-size: 1.6rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.prod-desc-empty { font-style: italic; color: var(--ink-faint); font-size: 0.92rem; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 14px 0; }
.variant-head { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 10px; }
.variant-list { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-chip { display: flex; align-items: baseline; gap: 6px; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--ink); background: #fff; }
.variant-chip .stock { font-weight: 500; color: var(--ink-faint); font-size: 0.78rem; }
.variant-chip.low .stock { color: var(--gold); }
.sku-line { font-size: 0.78rem; color: var(--ink-faint); margin-top: 4px; }

/* ============================================================================================
   Store / product page -- Brand-Forward Editorial. Merged from the client-approved "Concept 2"
   store redesign; this is now the sitewide canonical /store/ and /product/*/ treatment, not a
   body-class-scoped variant. Reuses every token/class above (--brand/--gold/--green/--ink*/
   --line/--ease/--shell, .titleband/.badge-ring/.prod-detail-price/.variant-*/.store-note/
   .wa-cta/.longlist-head/.count, and the .prod-card/.prod-grid/.prod-thumb/.prod-detail rules
   just above) -- only the layout below is new. Confirmed via
   `grep -rl 'prod-card\|prod-grid\|prod-thumb' public/demo/ --include=*.html` that .prod-* is
   used nowhere outside /store/ and /product/*/, so extending it here is safe.
   ============================================================================================ */
.c1-attr, .c2-chip {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-tint);
  border-radius: 999px;
  padding: 5px 12px;
}
.c1-attrs, .c2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.c1-desc { color: var(--ink-soft); font-size: 0.96rem; margin: 10px 0 0; max-width: 52ch; }

.c1-buy-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--wa-green); color: #fff; font-weight: 800; font-size: 0.96rem; padding: 13px 22px; border-radius: 12px; margin-top: 20px; box-shadow: 0 12px 24px -12px rgba(37,211,102,0.55); transition: transform 150ms var(--ease), box-shadow 180ms var(--ease); }
.c1-buy-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(37,211,102,0.6); }
.c1-buy-btn:active { transform: translateY(0) scale(0.98); }

.c2-hero { background: linear-gradient(180deg, var(--brand-tint), transparent); padding-block: clamp(30px, 5vw, 54px) 10px; }
.c2-hero-grid { display: grid; gap: clamp(24px, 5vw, 56px); align-items: center; }
@media (min-width: 860px) { .c2-hero-grid { grid-template-columns: 1fr 1.1fr; } }
.c2-eyebrow { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.c2-hero-text h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); color: var(--brand); font-weight: 800; margin-bottom: 12px; }
.c2-hero-text p { color: var(--ink-soft); font-size: 1.02rem; max-width: 46ch; margin-bottom: 22px; }
.c2-hero-photo { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 6 / 5; box-shadow: 0 30px 60px -30px rgba(25,79,144,0.55); }
.c2-hero-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.c2-hero-photo:hover img { transform: scale(1.04); }
.c2-hero-tag { position: absolute; left: 16px; bottom: 16px; background: rgba(10,20,36,0.72); backdrop-filter: blur(6px); color: #fff; font-size: 0.82rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; }

.c2-note { margin-top: 26px; }

.c2-band { padding-block: clamp(30px, 5vw, 50px); }
.c2-band--tint { background: var(--brand-tint); }

.c2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1080px) { .c2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .c2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .c2-grid { grid-template-columns: 1fr; } }

.c2-card { display: block; }
.c2-thumb { aspect-ratio: 1 / 1; border-radius: 999px; overflow: hidden; box-shadow: 0 16px 30px -18px rgba(25,79,144,0.45); border: 4px solid #fff; transition: transform 200ms var(--ease), box-shadow 220ms var(--ease); }
.c2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c2-card:hover .c2-thumb, .c2-card:focus-visible .c2-thumb { transform: translateY(-5px); box-shadow: 0 22px 38px -16px rgba(25,79,144,0.55); }
.c2-card-body { text-align: center; padding-top: 12px; display: grid; gap: 3px; }
.c2-card-body .prod-name { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.c2-card-body .prod-price { font-size: 0.92rem; font-weight: 800; color: var(--brand); }

.c2-detail { display: grid; gap: clamp(28px, 5vw, 62px); align-items: start; }
@media (min-width: 860px) { .c2-detail { grid-template-columns: 1fr 1fr; } }
.c2-detail-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -30px rgba(25,79,144,0.55); }
.c2-detail-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .c2-hero-photo img, .c2-thumb { transition: none !important; }
}

/* ============================================================================================
   HOME: hero slider
   ============================================================================================ */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The base stylesheet styles the OLD static hero and its rules out-specify the slider's, so
   neutralise them explicitly rather than trusting source order. Three real collisions:
     1. a generic section rule gives `.hero` 82px of block padding;
     2. `.hero .shell` (0,2,0) beats `.hero-ui` (0,1,0) and drags the controls bar back into
        flow as a padded grid, adding 287px of navy band above and below the photo;
     3. `.shell`'s margin-inline:auto centred the text column into the part of the scrim that is
        nearly transparent, destroying contrast. The column must sit hard left inside the shell. */
.hero { position: relative; isolation: isolate; background: var(--brand-deeper); overflow: hidden;
  padding: 0; }
.hero::after { content: none; }

.hero .shell.hero-content { display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 0; padding-block: 72px 104px;
  max-width: var(--shell); margin-inline: auto; }
.hero .hero-content > * { max-width: min(52ch, 100%); }
.hero .hero-sub { font-size: clamp(1rem, 1.35vw, 1.16rem); max-width: 52ch; }

/* `.hero-ui` is styled here WITHOUT a `.shell` qualifier on purpose: the real markup never
   puts a `.shell` class on this div (checked against the DOM contract), so a selector of
   `.hero-ui.shell` -- which is what this rule used to be -- can never match anything and the
   whole control bar would run flush edge-to-edge on wide screens with no safe inset. Give it
   the shell measure directly instead of depending on a class nobody adds. */
.hero .hero-ui { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  max-width: var(--shell); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px);
  padding-block: 0; display: flex; align-items: center; gap: 16px; }

/* Height is svh, not dvh: dvh tracks the browser chrome as it hides/shows on scroll, so the
   band would resize under the visitor mid-read on mobile Safari/Chrome. svh is the small
   (chrome-visible) viewport and stays put. */
.hero-viewport { position: relative; min-height: clamp(460px, 74svh, 720px); }

.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 900ms var(--ease), visibility 0s linear 900ms; }
.hero-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; z-index: 1; }

.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
/* Ken Burns pushes only on the slide that is actually showing. */
.hero-slide.is-active .hero-media img { animation: heroKB 9500ms var(--ease) forwards; }
@keyframes heroKB { from { transform: scale(1.09); } to { transform: scale(1.005); } }

/* Scrim: heavy under the text column, clearing toward the right so the photo stays visible.
   Two layers -- a horizontal wash for text contrast, a bottom vignette to seat the controls.

   Strength is PER SLIDE, not a constant: --scrim is set inline from the measured mean luma of
   each photo's left 55% (see home-manifest.json). Slide 2 is a body-composition chart on a
   near-white background (luma 247) and needs a far heavier wash than the dark massage room on
   slide 4 (luma 50). A single opacity that works for one blows out the other.

   --scrim-dir and --scrim-mix exist so hero.css can reuse this exact formula for the other
   five overlay/position combinations (mirror it for a right-anchored slide, halve it for
   scrim-soft) instead of hand-duplicating five near-identical gradient strings. Defaults
   below (90deg / var(--scrim)) reproduce the original single-look design exactly -- this rule
   IS "today's look", just with its two knobs named instead of inlined. */
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  --scrim: 0.88;
  --scrim-dir: 90deg;
  --scrim-mix: var(--scrim);
  /* The dark plateau must extend past the RIGHT EDGE of the text column, not stop at 38%.
     Measured: on the brightest slide (body-composition chart, photo mean RGB 245,241,237) a
     headline ending at 56% of the viewport was sitting on ~0.50 scrim alpha, i.e. a 2.6:1
     contrast. Holding near-full alpha to 50% and fading out by 90% puts the same pixel at
     ~0.73 alpha, ~5.8:1. Keep the plateau wider than `.hero-content > *`'s max-width. */
  background:
    linear-gradient(var(--scrim-dir), color-mix(in oklch, var(--brand-deeper) calc(var(--scrim-mix) * 100%), transparent) 0%,
                           color-mix(in oklch, var(--brand-deeper) calc(var(--scrim-mix) * 92%), transparent) 50%,
                           color-mix(in oklch, var(--brand-deeper) calc(var(--scrim-mix) * 45%), transparent) 70%,
                           color-mix(in oklch, var(--brand-deeper) calc(var(--scrim-mix) * 6%), transparent) 90%,
                           transparent 100%),
    linear-gradient(0deg, color-mix(in oklch, var(--brand-deeper) 62%, transparent) 0%, transparent 42%);
}

.hero-content { position: relative; z-index: 2; min-height: clamp(460px, 74svh, 720px);
  color: #fff; }
/* No align-self here (there used to be one, hard-pinning the eyebrow to the left forever) --
   it must follow whatever data-pos sets on .hero-content's align-items like every other
   child, or centred/right slides get every line in place except a stray left-anchored
   eyebrow. */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px; }
.hero-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
/* The client's banners are bilingual: Arabic sits above the English, larger and lighter.
   Arabic needs its own stack and a looser line-height; Segoe UI covers it on Windows but not
   on macOS/Linux, so name real Arabic faces before falling back. */
.hero .hero-h-ar { margin: 0 0 10px; font-family: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.5;
  color: color-mix(in oklch, white 92%, transparent); }
.hero .hero-h { margin: 0; font-size: clamp(1.75rem, 3.9vw, 3.3rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.025em; text-wrap: balance; color: #fff; }
.hero .hero-sub { margin-top: 20px; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.55;
  color: color-mix(in oklch, white 88%, transparent); max-width: 52ch; }
.hero .hero-sub-ar { margin-top: 18px; font-family: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  font-size: 1.05rem; color: var(--gold); font-weight: 600; }
.hero .hero-phone { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.hero-phone svg { width: 20px; height: 20px; color: var(--wa-green); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Slide contents stagger in behind the crossfade. Rewritten against the real element set --
   the old list staggered .hero-sub/.hero-sub-ar/.hero-phone, none of which the new partial
   emits, and never staggered .hero-eyebrow at all (an old oversight, not a new-contract gap).
   .hero-proof is new (the DOM contract's trust line under the actions row). */
.hero-slide.is-active .hero-eyebrow,
.hero-slide.is-active .hero-h-ar,
.hero-slide.is-active .hero-h,
.hero-slide.is-active .hero-actions,
.hero-slide.is-active .hero-proof { animation: heroRise 760ms var(--ease) backwards; }
.hero-slide.is-active .hero-h-ar { animation-delay: 60ms; }
.hero-slide.is-active .hero-h { animation-delay: 120ms; }
.hero-slide.is-active .hero-actions { animation-delay: 220ms; }
.hero-slide.is-active .hero-proof { animation-delay: 280ms; }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.btn-ghost { background: transparent; color: #fff; border: 1.6px solid color-mix(in oklch, white 55%, transparent); }
.btn-ghost:hover { background: color-mix(in oklch, white 12%, transparent); border-color: #fff; }

/* Controls. `.hero-ui`'s own box (position/inset/shell-measure) is set above, next to the
   comment explaining why it can't depend on a `.shell` class; this second rule only adds the
   children's flex behaviour so both stay easy to find from their own concerns. */
.hero-dots { display: flex; gap: 10px; }
.hero-dot { width: 34px; height: 5px; border-radius: 99px; border: 0; padding: 0; cursor: pointer;
  background: color-mix(in oklch, white 34%, transparent); transition: background 220ms var(--ease); }
/* DOM contract state is class `.is-on` + aria-current, not aria-selected -- the old rule keyed
   on aria-selected, which this markup never sets, so no dot would ever have shown as current. */
.hero-dot.is-on, .hero-dot[aria-current="true"] { background: var(--gold); }
.hero-dot:hover { background: color-mix(in oklch, white 62%, transparent); }
/* No `.hero-arrows` wrapper exists in the DOM contract -- prev/next are direct children of
   `.hero-ui` -- so there is nothing left here to group; `.hero-ui`'s own `gap` (set above)
   already spaces every direct child, arrows included. */
.hero-arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: #fff; background: color-mix(in oklch, white 12%, transparent);
  border: 1.4px solid color-mix(in oklch, white 34%, transparent);
  transition: transform 200ms var(--ease), background 200ms var(--ease); }
.hero-arrow:hover { background: color-mix(in oklch, white 24%, transparent); transform: translateY(-2px); }
.hero-arrow:active { transform: translateY(0) scale(0.95); }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow.prev svg { transform: rotate(180deg); }

.hero-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; z-index: 3;
  background: color-mix(in oklch, white 14%, transparent); }
.hero-progress span { display: block; height: 100%; width: 0; background: var(--gold); }
.hero[data-playing="true"] .hero-progress span { animation: heroBar var(--hero-interval, 6500ms) linear forwards; }
.hero[data-paused="true"] .hero-progress span { animation-play-state: paused; }
@keyframes heroBar { from { width: 0; } to { width: 100%; } }

@media (max-width: 860px) {
  .hero .shell.hero-content { padding-block: 60px 96px; }
  .hero .hero-content > * { max-width: 100%; }
  .hero-scrim { background:
    linear-gradient(180deg, color-mix(in oklch, var(--brand-deeper) 55%, transparent) 0%,
                            color-mix(in oklch, var(--brand-deeper) 86%, transparent) 62%,
                            color-mix(in oklch, var(--brand-deeper) 94%, transparent) 100%); }
  .hero-arrow { display: none; }
  /* Centring on justify-content used to matter here because the old rule set
     justify-content:space-between on `.hero-ui`; the replacement layout in hero.css groups the
     controls with a single margin-inline-end:auto on the play/pause button instead, and that
     grouping keeps working with the arrows gone, so there's nothing to override at this
     breakpoint any more. */
}

/* ============================================================================================
   HOME: 3D team coverflow
   ============================================================================================ */
.team3d { position: relative; background: var(--brand-deeper); color: #fff; overflow: hidden;
  padding-block: clamp(56px, 7vw, 92px); }
.team3d::before { content: ""; position: absolute; inset: -30% 20% 40%; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in oklch, var(--brand) 55%, transparent), transparent 70%); }
.team3d > * { position: relative; }
.team3d-head { text-align: center; margin-bottom: clamp(30px, 4vw, 52px); }
/* color, not just size. The global h2 rule above paints every heading brand navy,
   and a rule that matches the element always beats the white this dark section
   inherits from .team3d — so "Team" was navy on near-navy at 1.98:1 and read as a
   missing section rather than a heading. Same fix .tone-navy h2 and .banner-veil h2
   already make for the other dark bands; the sibling .team3d-head p had it and the
   heading was simply missed. */
.team3d-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); color: #fff; }
.team3d-head p { margin-top: 12px; color: color-mix(in oklch, white 70%, transparent); }

.t3d-stage { position: relative; height: clamp(360px, 44vw, 480px); perspective: 1700px;
  perspective-origin: 50% 44%; touch-action: pan-y; }
.t3d-ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.t3d-card { position: absolute; top: 0; left: 50%; width: clamp(180px, 17vw, 240px);
  height: 100%; margin-left: calc(clamp(180px, 17vw, 240px) / -2);
  transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease), filter 620ms var(--ease); }
.t3d-card[data-hidden="true"] { opacity: 0; pointer-events: none; }

.t3d-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: #0b1c33; border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 40px 70px -40px rgba(0,0,0,0.9);
  transition: box-shadow 500ms var(--ease); }
.t3d-btn img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.t3d-btn::after { content: ""; position: absolute; inset: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1.4px color-mix(in oklch, white 16%, transparent); }
.t3d-card.is-active .t3d-btn { box-shadow: 0 50px 90px -38px rgba(0,0,0,0.95),
  0 0 0 2px var(--green), 0 0 46px -6px color-mix(in oklch, var(--green) 60%, transparent); }
.t3d-card:not(.is-active) .t3d-btn { filter: brightness(0.52) saturate(0.65); }

/* Hover cue. Their own carousel dims the photo and zooms in an eye icon; do the same so it is
   obvious the cards open something. Shown on hover AND on keyboard focus. */
.t3d-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; gap: 10px;
  align-content: center; opacity: 0; pointer-events: none;
  background: color-mix(in oklch, var(--brand-deeper) 55%, transparent);
  transition: opacity 260ms var(--ease); }
.t3d-overlay span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; }
.t3d-overlay .t3d-eye { width: 52px; height: 52px; border-radius: 50%; display: grid;
  place-items: center; background: color-mix(in oklch, white 16%, transparent);
  border: 1.5px solid color-mix(in oklch, white 62%, transparent); color: #fff;
  transform: scale(0.78); transition: transform 320ms var(--ease); }
.t3d-overlay .t3d-eye svg { width: 24px; height: 24px; }
.t3d-btn:hover .t3d-overlay, .t3d-btn:focus-visible .t3d-overlay { opacity: 1; }
.t3d-btn:hover .t3d-eye, .t3d-btn:focus-visible .t3d-eye { transform: scale(1); }
/* Side cards are already dimmed; do not stack a second scrim on them. */
.t3d-card:not(.is-active) .t3d-overlay { background: none; }
.t3d-card:not(.is-active) .t3d-overlay span { display: none; }
@media (prefers-reduced-motion: reduce) { .t3d-overlay, .t3d-overlay .t3d-eye { transition: none; } }

.t3d-dept { position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 99px; color: #fff;
  background: color-mix(in oklch, var(--brand-deeper) 72%, transparent);
  backdrop-filter: blur(6px); border: 1px solid color-mix(in oklch, white 20%, transparent); }

.t3d-nav { position: absolute; top: 50%; z-index: 5; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: color-mix(in oklch, var(--brand-deeper) 78%, transparent);
  border: 1.4px solid color-mix(in oklch, white 30%, transparent);
  transition: transform 200ms var(--ease), background 200ms var(--ease); }
.t3d-nav:hover { background: var(--brand); transform: translateY(-50%) scale(1.06); }
.t3d-nav:active { transform: translateY(-50%) scale(0.95); }
.t3d-nav svg { width: 22px; height: 22px; }
.t3d-nav.prev { left: max(8px, 3vw); }
.t3d-nav.prev svg { transform: rotate(180deg); }
.t3d-nav.next { right: max(8px, 3vw); }

.t3d-meta { text-align: center; margin-top: clamp(26px, 3.4vw, 40px); min-height: 132px; }
.t3d-name { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; }
.t3d-role { margin-top: 6px; color: var(--gold); font-weight: 700; font-size: 0.95rem; }
.t3d-meta .btn { margin-top: 20px; }
.t3d-meta[data-swap="true"] .t3d-name,
.t3d-meta[data-swap="true"] .t3d-role { animation: heroRise 420ms var(--ease); }

.t3d-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.t3d-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in oklch, white 26%, transparent); transition: all 240ms var(--ease); }
.t3d-dot[aria-selected="true"] { background: var(--green); width: 26px; border-radius: 99px; }

/* Reduced motion: no perspective, no rotation. Flatten to a snap rail. */
@media (prefers-reduced-motion: reduce) {
  .t3d-stage { perspective: none; height: auto; overflow-x: auto; scroll-snap-type: x mandatory;
    display: flex; gap: 18px; padding: 4px 4px 18px; }
  .t3d-ring { position: static; display: flex; gap: 18px; transform: none !important; }
  .t3d-card { position: static; margin: 0; height: 380px; flex: 0 0 auto;
    transform: none !important; opacity: 1 !important; scroll-snap-align: center; }
  .t3d-card[data-hidden="true"] { opacity: 1; pointer-events: auto; }
  .t3d-card:not(.is-active) .t3d-btn { filter: none; }
  .t3d-nav { display: none; }
  .hero-slide { transition: none; }
  .hero-slide.is-active .hero-media img,
  .hero-slide.is-active .hero-eyebrow, .hero-slide.is-active .hero-h,
  .hero-slide.is-active .hero-h-ar, .hero-slide.is-active .hero-sub,
  .hero-slide.is-active .hero-sub-ar, .hero-slide.is-active .hero-phone,
  .hero-slide.is-active .hero-actions { animation: none; }
  .hero-progress { display: none; }
}

/* ============================================================================================
   ABOUT (home) -- the client's own "About us" prose, set against a real SESC photograph
   rather than the stock paper-planes image their current site uses.
   ============================================================================================ */
.about-home { padding-block: clamp(56px, 7vw, 92px); }
.about-home .shell { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 72px);
  align-items: center; }
.about-home h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-home p { margin-top: 20px; color: var(--ink-soft); line-height: 1.8; max-width: 62ch; }
.about-figure { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 40px 70px -50px rgba(25,79,144,0.75); }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-figure::after { content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand) 18%, transparent); border-radius: 20px; }
@media (max-width: 860px) { .about-home .shell { grid-template-columns: 1fr; } }

/* ============================================================================================
   TEAM PAGE grid -- same data, same modal as the home coverflow. One row in the admin feeds
   both surfaces; they must never disagree.
   ============================================================================================ */
.team-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1000px) { .team-people { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-people { grid-template-columns: repeat(2, 1fr); } }
.person { padding: 0; border: 0; background: #0b1c33; border-radius: 18px; overflow: hidden;
  cursor: pointer; text-align: left; position: relative; display: block;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.person:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -28px rgba(11,28,51,0.7); }
/* height:auto is load-bearing. The <img> carries width/height attributes, which map to
   presentational hints; width:100% beats the width hint but the height hint survives and
   defeats aspect-ratio, rendering the card 747px tall instead of 389px. */
.person img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 50% 20%; }
/* These are <span>s inside a <button>, so they default to inline and the name/role run together
   and spill outside the card. They must be blocks. */
.person-body { display: block; padding: 16px 18px 20px; background: var(--brand); color: #fff; }
.person-name { display: block; font-weight: 800; letter-spacing: -0.01em; }
.person-role { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 600;
  color: color-mix(in oklch, white 76%, transparent); }
.person::after { content: ""; position: absolute; inset: 0; border-radius: 18px;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 240ms var(--ease); }
.person:hover::after, .person:focus-visible::after { box-shadow: inset 0 0 0 2px var(--green); }
.team-dept-head { margin: clamp(36px, 4vw, 56px) 0 20px; display: flex; align-items: center; gap: 16px; }
.team-dept-head h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); white-space: nowrap; }
.team-dept-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 620px) {
  .t3d-nav { display: none; }
  .t3d-stage { height: clamp(340px, 92vw, 420px); }
}

/* ============================================================================================
   HOME: profile modal (native <dialog>)
   ============================================================================================ */
.tm { width: min(980px, 94vw); max-height: 90dvh; padding: 0; border: 0; border-radius: 22px;
  background: var(--bg); color: var(--ink); overflow: hidden; }
.tm::backdrop { background: color-mix(in oklch, var(--brand-deeper) 72%, transparent);
  backdrop-filter: blur(5px); }
.tm[open] { animation: tmIn 320ms var(--ease); }
.tm[open]::backdrop { animation: tmFade 320ms var(--ease); }
@keyframes tmIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes tmFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tm[open], .tm[open]::backdrop { animation: none; } }

/* The portrait must keep its native 3:4. Letting the column stretch to the modal's full height
   made object-fit:cover scale a 560x747 photo up 1.08x and crop ~307px off the sides, beheading
   the shoulders. Anchor it to the top at its own aspect ratio and paint the column behind it. */
.tm-grid { display: grid; grid-template-columns: 300px 1fr; max-height: 90dvh;
  background: linear-gradient(to right, #0b1c33 0 300px, transparent 300px); }
.tm-portrait { position: relative; align-self: start; background: #0b1c33; }
.tm-portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 50% 18%; }
.tm-portrait .tm-dept { position: absolute; left: 16px; bottom: 16px; font-size: 0.68rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: color-mix(in oklch, var(--brand) 82%, transparent); padding: 7px 11px; border-radius: 99px; }

.tm-body { padding: clamp(24px, 3vw, 40px); overflow-y: auto; }
.tm-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); transition: transform 180ms var(--ease); }
.tm-close:hover { transform: rotate(90deg); }
.tm-close svg { width: 18px; height: 18px; }
.tm-name { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.tm-role { margin-top: 5px; color: var(--brand); font-weight: 700; }
.tm-bio { margin-top: 18px; color: var(--ink-soft); line-height: 1.72; max-width: 68ch; }
.tm-h { margin-top: 26px; margin-bottom: 12px; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.tm-list { display: grid; gap: 9px; }
.tm-list li { display: flex; gap: 10px; color: var(--ink-soft); line-height: 1.55; }
.tm-list svg { width: 15px; height: 15px; margin-top: 5px; flex: 0 0 auto; color: var(--green); }
.tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-chip { font-size: 0.82rem; font-weight: 600; padding: 7px 13px; border-radius: 99px;
  background: var(--brand-tint); color: var(--brand); }
.tm-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.tm-cta .btn svg { width: 16px; height: 16px; flex: none; color: var(--wa-green); }
/* The shell's .btn-outline is tuned for the dark hero (white border on navy). The modal sits on
   a light surface and needs a brand-coloured outline instead. */
.btn-outline-brand { background: transparent; color: var(--brand); border: 1.6px solid var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

@media (max-width: 760px) {
  .tm-grid { grid-template-columns: 1fr; background: none; }
  .tm-portrait { align-self: stretch; height: 260px; }
  .tm-portrait img { height: 100%; aspect-ratio: auto; object-position: 50% 18%; }
}

/* ---- Brief profile (home). Mirrors the client's own popup: circular portrait ringed in green,
   name, role, then labelled Job Title / Education fields and a short brief. The full history
   lives on the team page; this is the teaser, exactly as their site does it. ---- */
.tm[data-mode="brief"] { width: min(760px, 94vw); }
.tm-brief { padding: clamp(28px, 3.4vw, 44px); text-align: center; position: relative; }
.tm-brief .tm-close { top: 16px; right: 16px; }
.tm-avatar { width: 168px; height: 168px; margin: 4px auto 20px; border-radius: 50%;
  overflow: hidden; background: #0b1c33; box-shadow: 0 0 0 3px var(--green), 0 20px 40px -26px rgba(11,28,51,0.8); }
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.tm-brief .tm-name { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.tm-brief .tm-role { margin-top: 4px; }
.tm-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px;
  margin: 28px 0 8px; text-align: left; }
.tm-field { background: var(--brand-tint); border-radius: 14px; padding: 16px 18px; }
.tm-field dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); }
.tm-field dd { margin: 6px 0 0; color: var(--ink); font-weight: 600; line-height: 1.5; }
.tm-briefhead { margin-top: 26px; text-align: left; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.tm-brieftext { margin-top: 10px; text-align: left; color: var(--ink-soft); line-height: 1.75; }
.tm-brief .tm-cta { justify-content: flex-start; }
@media (max-width: 620px) {
  .tm-avatar { width: 132px; height: 132px; }
  .tm-fields { grid-template-columns: 1fr; }
  .tm-brief .tm-cta { flex-direction: column; align-items: stretch; }
  .tm-brief .tm-cta .btn { justify-content: center; }
}

/* ============================================================================================
   HOME: partners
   ============================================================================================ */
.partners { padding-block: clamp(52px, 6vw, 78px); }
.partners-head { text-align: center; margin-bottom: 40px; }
.partners-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.partners-head p { margin-top: 10px; color: var(--ink-faint); }
.partners-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.partner { display: grid; place-items: center; padding: 26px 18px; background: var(--bg); }
.partner img { max-height: 62px; width: auto; filter: grayscale(1); opacity: 0.62;
  transition: filter 260ms var(--ease), opacity 260ms var(--ease), transform 260ms var(--ease); }
.partner:hover img, .partner:focus-visible img { filter: none; opacity: 1; transform: scale(1.04); }
@media (max-width: 940px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================================
   HOME: reviews -- rebuilt to match the client's original speech-bubble card (grey bubble with a
   tail, navy avatar disc ringed in green, name, green stars). Theirs ships as five flat PNGs;
   this is the same design as real, selectable, translatable text. Sampled from their artwork:
   bubble #e7e8e9, navy #1f4285, stars #1db263 (brighter than the brand green, so keep it).
   ============================================================================================ */
.reviews { background: var(--surface); padding-block: clamp(56px, 7vw, 88px); overflow: hidden; }
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 34px; flex-wrap: wrap; }
.reviews-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

.rev-arrows { display: flex; gap: 10px; }
.rev-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--brand); background: var(--bg); border: 1px solid var(--line);
  transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease); }
.rev-arrow:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.rev-arrow:active { transform: translateY(0) scale(0.95); }
.rev-arrow svg { width: 19px; height: 19px; }
.rev-arrow.prev svg { transform: rotate(180deg); }

/* A scroll-snap rail, not a transform track: native touch, native keyboard, no index math to
   desync. Autoplay just calls scrollTo(). */
.rev-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 34px;
  scrollbar-width: none; overflow-anchor: none; }
.rev-rail::-webkit-scrollbar { display: none; }
@media (max-width: 1000px) { .rev-rail { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 640px) { .rev-rail { grid-auto-columns: 86%; } }

.review { scroll-snap-align: start; position: relative; background: #e7e8e9; border-radius: 14px;
  padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px;
  transition: transform 260ms var(--ease); }
.review:hover { transform: translateY(-3px); }
/* The speech tail, bottom-left, exactly as in their artwork. */
.review::after { content: ""; position: absolute; left: 34px; bottom: -17px; width: 44px; height: 18px;
  background: #e7e8e9; clip-path: polygon(0 0, 100% 0, 22% 100%); }

.review-head { display: flex; align-items: center; gap: 16px; }
.review-avatar { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; display: grid;
  place-items: center; background: #1f4285; color: #fff; box-shadow: 0 0 0 2px #1db263; }
.review-avatar svg { width: 34px; height: 34px; }
.review-meta { min-width: 0; }
.review-name { font-weight: 800; font-size: 1.06rem; color: #1f4285; letter-spacing: -0.01em; }
.review-stars { display: flex; gap: 3px; margin-top: 5px; color: #1db263; }
.review-stars svg { width: 19px; height: 19px; }

/* <blockquote> carries a UA default of `margin: 1em 40px`, which strangles the quote to about
   half the card width. Reset it. */
.review-body { display: grid; gap: 8px; margin: 0; }
.review-ar { font-size: 1.04rem; line-height: 1.9; color: #1f4285; font-weight: 600; }
.review-en { color: #1f4285; line-height: 1.62; }
.review-en.is-translation { font-size: 0.92rem; color: color-mix(in oklch, #1f4285 74%, white); }

.rev-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.rev-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in oklch, var(--brand) 22%, white); transition: all 240ms var(--ease); }
.rev-dot[aria-selected="true"] { background: var(--brand); width: 26px; border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .review:hover { transform: none; }
}

/* ============================================================================================
   SERVICE PAGE: click-to-play video ("watch" module)
   ============================================================================================ */
.watch-head { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.watch-head h2 { margin: 0; }
.watch-head p { margin-top: 10px; color: var(--ink-soft); font-size: 0.95rem; }

.watch-card { max-width: 860px; margin-inline: auto; }
.watch-media { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  background: #0b1c33; box-shadow: 0 30px 60px -34px rgba(25,79,144,0.55); isolation: isolate; }

.watch-video, .watch-poster { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.watch-video { background: #0b1c33; }
.watch-poster { z-index: 1; transition: opacity 260ms var(--ease), visibility 0s linear 260ms; }

/* Always-on vignette behind the button, so the affordance reads on bright posters too, not just
   on hover -- this IS the primary call to action on the card, not a hover-only reveal. */
.watch-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46% 46% at 50% 50%, rgba(9,20,36,0.34), transparent 72%); }

.watch-play { position: absolute; z-index: 2; inset: 0; margin: auto;
  width: clamp(72px, 10vw, 96px); height: clamp(72px, 10vw, 96px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: color-mix(in oklch, var(--brand-deeper) 82%, transparent);
  border: 3px solid #fff;
  box-shadow: 0 20px 44px -16px rgba(0,0,0,0.6), 0 0 0 8px color-mix(in oklch, white 14%, transparent);
  transition: transform 220ms var(--ease), background 220ms var(--ease), box-shadow 220ms var(--ease); }
.watch-play svg { width: 34%; height: 34%; margin-left: 6%; }
.watch-media:hover .watch-play, .watch-play:hover, .watch-play:focus-visible {
  transform: scale(1.08); background: var(--green);
  box-shadow: 0 26px 54px -16px rgba(0,0,0,0.64), 0 0 0 10px color-mix(in oklch, var(--green) 26%, transparent); }
.watch-play:active { transform: scale(0.96); }

/* Playing state: poster + vignette + button all fade out together, revealing the <video> (which
   now carries native `controls`, added by JS) underneath. */
.watch-media.is-playing .watch-poster,
.watch-media.is-playing::before,
.watch-media.is-playing .watch-play { opacity: 0; visibility: hidden; pointer-events: none;
  transition-delay: 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
  .watch-media:hover .watch-play, .watch-play:hover, .watch-play:focus-visible { transform: none; }
}

/* 2026-07-23 -- "Education" stays the single top-level nav item (as
   originally built), with University/Courses nested under it as plain,
   non-interactive "Coming Soon" labels -- no links out to the real
   store (the whole point of this demo is to never lead a client
   there). Reuses the existing .has-mega/.mega hover mechanism and
   .acc-trigger/.acc-panel toggle mechanism as-is for the "Education"
   parent itself; only the two coming-soon items' own styling is new. */
.mega-edu-simple { width: max-content; min-width: 220px; }
.edu-coming-soon-list { display: flex; flex-direction: column; gap: 2px; }
.nav-coming-soon-item {
  display: block;
  font-size: 0.79rem;
  color: var(--ink-faint);
  padding: 4px 6px;
  cursor: default;
}
.drawer-coming-soon-item {
  display: block;
  padding: 9px 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: default;
}