/* PMT design system v2, extracted from the approved frame (flavour A · Kingdom Rising).
   base.css holds the shell (reset, header island, tab bar, buttons, eyebrow, duotone lozenge, pinned stage).
   This file holds what the frame proved and every page will reuse: surfaces, type, glass and depth, cards,
   figures, fields and the motion classes. Catalogue: components.php. */

/* ---------- Surfaces: navy for hero and feature sections, light for long reading ---------- */
.on-dark { background: var(--deep); color: var(--ink-on-dark); }
.on-dark--glow { background: radial-gradient(90% 80% at 72% 38%, #0D427C 0%, #062B55 38%, #041E3D 72%, #03152C 100%); }
.on-light { background: var(--paper-soft); color: var(--ink-body); }
.on-paper { background: var(--paper); color: var(--ink-body); }
.on-light :focus-visible, .on-paper :focus-visible { outline-color: var(--lime-strong); }
.on-light .eyebrow, .on-paper .eyebrow { color: var(--lime-strong); }
.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
/* the brand's diagonal cut between a navy section and the light one after it */
.cut-top { position: relative; }
.cut-top::before { content: ""; position: absolute; inset: -1px 0 auto; height: clamp(48px, 7vw, 104px); background: var(--deep); clip-path: polygon(0 0, 100% 0, 100% 2px, 0 100%); }

/* a navy section rising over the end of the light one before it (same slant as .cut-top) */
.rise { position: relative; isolation: isolate; }
.rise::before { content: ""; position: absolute; inset: auto 0 calc(100% - 1px); height: clamp(48px, 7vw, 104px); background: var(--deep); clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; }
/* the lozenge pattern behind a navy band; lozenges light near the mouse (frame.js lozfield) */
.lozband { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: url("../img/pattern-lozenge.svg") 0 0 / 352px auto; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, #000 45%, rgba(0, 0, 0, .35) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, #000 45%, rgba(0, 0, 0, .35) 100%); opacity: .38; }
.lozband.is-live { background: none; }
.lozband canvas { display: block; width: 100%; height: 100%; }

/* ---------- Type: Manrope 800 display, tight tracking; body 400 ---------- */
.t-display { font-size: clamp(2.5rem, min(4.7vw, 8.4vh), 4.25rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.t-h1 { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.t-h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
.t-h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
.t-h4 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
.t-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; }
.t-body { font-size: 1rem; line-height: 1.65; }
.t-small { font-size: .875rem; line-height: 1.5; }
.on-light :is(.t-display, .t-h1, .t-h2, .t-h3, .t-h4), .on-paper :is(.t-display, .t-h1, .t-h2, .t-h3, .t-h4) { color: var(--navy); }
.on-dark :is(.t-lead, .t-body, .t-small) { color: var(--ink-on-dark-soft); }
.on-light :is(.t-lead), .on-paper :is(.t-lead) { color: var(--ink-soft); }
.hl { color: var(--lime); }                       /* lime words: on navy only */
.on-light .hl, .on-paper .hl { color: var(--lime-strong); }
.link { color: var(--lime-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--lime-deep); }
.on-dark .link { color: var(--lime-glow); }
.on-dark .link:hover { color: #fff; }

/* ---------- Buttons on light surfaces (lime and glass live in base.css) ---------- */
.btn--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 30px -12px rgba(6, 43, 85, .6); }
.btn--navy:hover { background: var(--navy-raise); box-shadow: 0 14px 36px -10px rgba(6, 43, 85, .7); }
.btn--line { color: var(--navy); border: 1.5px solid var(--navy); }
.btn--line:hover { background: var(--navy); color: #fff; }
.btn--lg { min-height: 60px; padding: 0 34px; font-size: 1.0625rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Glass and depth: UI floats over the map on navy ---------- */
.glass { border-radius: 30px; background: rgba(6, 36, 74, .55); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1); }
.glass--thin { border-radius: 22px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }

/* glass story card: lozenge photo on the corner, eyebrow, optional figure, title, text */
.gcard { position: relative; display: grid; gap: 12px; justify-items: start; padding: 48px 34px 36px; }
.gcard__ph { position: absolute; top: -52px; inset-inline-end: 34px; width: 128px; height: 82px; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); }
.gcard > p:not(.eyebrow):not(.fig) { color: var(--ink-on-dark-soft); }
.fig { font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; color: var(--lime); font-variant-numeric: tabular-nums; }
.on-light .fig, .on-paper .fig { color: var(--navy); }

/* stats dock: figures divided by slanted rules */
.stats { display: inline-flex; margin: 0; }
.stats div { position: relative; display: grid; gap: 2px; align-content: center; padding: 14px 26px; max-width: 220px; }
.stats div + div::before { content: ""; position: absolute; inset-block: 16px; inset-inline-start: 0; width: 2px; background: rgba(255, 255, 255, .18); transform: skewX(-24deg); }
.stats dt { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #fff; }
.stats dd { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--ink-on-dark-soft); }
.on-light .stats, .on-paper .stats { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-1); }
.on-light .stats dt, .on-paper .stats dt { color: var(--navy); }
.on-light .stats dd, .on-paper .stats dd { color: var(--ink-soft); }
.on-light .stats div + div::before, .on-paper .stats div + div::before { background: var(--line); }

/* light card: white, soft border, lifts on hover */
.card { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s; }
a.card:hover, .card--lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: transparent; }
.card__n { font-size: .8125rem; font-weight: 800; color: var(--lime-strong); letter-spacing: .08em; }
.card .t-h4 { color: var(--navy); }
.card__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--navy); color: var(--lime); transform: skewX(-24deg); }
.card__ic .ic { transform: skewX(24deg); width: 24px; height: 24px; }

/* ---------- Fields ---------- */
.field { display: grid; gap: 6px; }
.field > label { font-size: .875rem; font-weight: 700; color: var(--navy); }
.field__req { color: var(--danger); }
.input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s, background-color .2s; }
textarea.input { min-height: 132px; padding-block: 14px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23062B55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
[dir="rtl"] select.input { background-position: left 14px center; }
.input::placeholder { color: var(--ink-mute); }
.input:hover { border-color: var(--navy); }
.input:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(128, 188, 0, .4); }
.field__hint { font-size: .8125rem; color: var(--ink-mute); }
.field__err { display: none; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--danger); }
.field.is-error .input { border-color: var(--danger); background: var(--danger-soft); }
.field.is-error .field__err { display: flex; }
.field.is-error .field__hint { display: none; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; line-height: 1.5; cursor: pointer; }
.check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 1.5px solid var(--line-strong); background: #fff; display: grid; place-items: center; transition: background-color .2s, border-color .2s; cursor: pointer; }
.check input::after { content: ""; width: 11px; height: 6px; border: solid var(--navy); border-width: 0 0 2.5px 2.5px; transform: translateY(-1.5px) rotate(-45deg) scale(0); transition: transform .2s var(--ease-spring); }
.check input:checked { background: var(--lime); border-color: var(--lime); }
.check input:checked::after { transform: translateY(-1.5px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(128, 188, 0, .4); }
/* the same fields on navy glass */
.on-dark .field > label { color: #fff; }
.on-dark .input { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: #fff; }
.on-dark .input::placeholder { color: var(--ink-on-dark-mute); }
.on-dark .input:hover { border-color: rgba(255, 255, 255, .6); }
.on-dark .input:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(128, 188, 0, .3); }
.on-dark select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); }
.on-dark select.input option { color: var(--ink); }
.on-dark .field__hint { color: var(--ink-on-dark-mute); }
.on-dark .field__err, .on-dark .field__req { color: #FFB4AB; }
.on-dark .field.is-error .input { border-color: #FFB4AB; background-color: rgba(180, 35, 24, .22); }
.on-dark .check input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); }
.on-dark .check input:checked { background: var(--lime); border-color: var(--lime); }
.on-dark .check { color: var(--ink-on-dark-soft); }

/* ---------- Motion: each move explains something, runs once, and shows its end state under reduced motion.
   [data-reveal] gets .is-in when it enters the screen (kit.js reveal()). ---------- */
.js [data-reveal] .w > span { transform: translateY(115%); }
.js [data-reveal].is-in .w > span { transform: none; transition: transform 1s var(--ease-out) calc(var(--i) * 75ms + 100ms); }
.js [data-reveal] .in { opacity: 0; translate: 0 18px; }
.js [data-reveal].is-in .in { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease-out) calc(var(--d, 0) * 120ms + 200ms), translate .9s var(--ease-out) calc(var(--d, 0) * 120ms + 200ms), transform .4s var(--ease-out), box-shadow .4s, border-color .3s, background-color .3s; }
.calm [data-reveal] .w > span { transform: none !important; transition: none !important; }
.calm [data-reveal] .in { translate: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation-duration: 2s; } }

@media (max-width: 760px) {
  .gcard { padding: 36px 22px 24px; gap: 8px; }
  .gcard__ph { width: 96px; height: 62px; top: -36px; inset-inline-end: 26px; }
  .glass { border-radius: 26px; }
  .fig { font-size: 4rem; }
  .stats div { padding: 12px 16px; }
  .stats dt { font-size: 1.5rem; }
}

/* ---------- Partner / client logo tile: white, so any logo colour works on navy or light ---------- */
.org-logo { display: flex; align-items: center; justify-content: center; gap: 10px; height: 92px; padding: 0 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 800; font-size: .9375rem; white-space: nowrap; }
.org-logo img { max-height: 54px; max-width: 100%; width: auto; }
.org-logo i { width: 24px; height: 11px; border-radius: 3px; background: var(--lime); transform: skewX(-24deg); flex: none; }

/* ---------- Breadcrumb ---------- */
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; font-size: .875rem; font-weight: 600; }
.crumb li { display: inline-flex; align-items: center; }
.crumb li + li::before { content: ""; width: 7px; height: 12px; margin-inline: 12px; border-radius: 2px; background: var(--lime); transform: skewX(-24deg); }
.crumb a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-on-dark-soft); transition: color .2s; }
.crumb a .ic { width: 16px; height: 16px; }
.crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumb [aria-current] { color: #fff; }
.on-light .crumb a, .on-paper .crumb a { color: var(--ink-soft); }
.on-light .crumb [aria-current], .on-paper .crumb [aria-current] { color: var(--navy); }

/* ---------- Slider: native scroll with snap; the reader moves it ---------- */
.slider__track { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > li { flex: none; scroll-snap-align: start; }
.slider__track:focus-visible { outline-offset: 6px; border-radius: 12px; }
.slider__nav { display: flex; gap: 10px; }
.slider__nav button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--navy); color: var(--navy); transition: background-color .2s, color .2s, opacity .2s, border-color .2s; }
.slider__nav button:hover:not(:disabled) { background: var(--navy); color: #fff; }
.slider__nav button:disabled { opacity: .3; cursor: default; }
.on-dark .slider__nav button { border-color: rgba(255, 255, 255, .5); color: #fff; }
.is-static .slider__nav { display: none; }
.is-static .slider__track { justify-content: center; }

/* ---------- Slanted logo tile (the brand lozenge holding a logo) ---------- */
.loztile { display: grid; place-items: center; height: 112px; border-radius: 18px; background: var(--paper-soft); border: 1px solid var(--line); transform: skewX(-24deg); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.loztile .org-logo { transform: skewX(24deg); height: auto; padding: 0 8px; background: none; border: 0; }
.loztile:hover { background: #fff; border-color: var(--lime); box-shadow: var(--shadow-2); }
.on-light .loztile { background: #fff; }

/* ---------- Closing call to action ---------- */
.cta { overflow-x: clip; background: radial-gradient(70% 70% at 80% 100%, #0D427C 0%, transparent 70%) var(--deep); padding-bottom: calc(var(--section-y) + clamp(56px, 8vw, 120px)); }
.cta .lozband { opacity: .3; }
.cta__panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4.5vw, 64px); border-radius: 36px; }
.cta__copy { display: grid; gap: 16px; justify-items: start; }
.cta__copy .t-h1 { color: #fff; }
.cta__copy .t-lead { max-width: 48ch; }
.cta__copy .btn { margin-top: 8px; }
.cta__reach { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; padding: 18px 0 0; width: 100%; border-top: 1px solid var(--glass-line); }
.cta__reach a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 700; color: #fff; }
.cta__reach a:hover { color: var(--lime-glow); }
.cta__reach .ic { color: var(--lime); }
.cta__art { position: relative; padding: 6% 16% 10% 14%; }
.cta__art::before { content: ""; position: absolute; inset: auto 2% 2% auto; width: 52%; aspect-ratio: 2.2 / 1; border-radius: 18px; background: var(--lime); transform: skewX(-24deg); }
.cta__art .loz { position: relative; aspect-ratio: 4 / 3.5; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.cta__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; padding: 18px clamp(20px, 4.5vw, 64px); border-radius: 24px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .04); color: #fff; transition: background-color .3s, border-color .3s; }
.cta__alt:hover { background: rgba(255, 255, 255, .09); border-color: rgba(166, 217, 74, .7); }
.cta__alt strong { font-size: 1.0625rem; font-weight: 800; }
.cta__alt span { color: var(--lime-glow); font-weight: 700; }
.cta__alt i { margin-inline-start: auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: var(--navy); transition: translate .3s var(--ease-out); }
.cta__alt:hover i { translate: 5px 0; }
[dir="rtl"] .cta__alt:hover i { translate: -5px 0; }
@media (max-width: 900px) { .cta__panel { grid-template-columns: 1fr; border-radius: 28px; } .cta__art { order: -1; max-width: 380px; width: 100%; margin-inline: auto; } }
@media (max-width: 760px) { .cta__copy .btn { width: 100%; } }

/* Phones: long button labels wrap instead of forcing their column wider than the screen */
@media (max-width: 760px) {
  .btn { white-space: normal; text-align: center; padding-block: 10px; max-width: 100%; }
  .cta__panel, .og-hero__grid, .sd-hero__grid, .sx__head, .sd-over__grid { grid-template-columns: minmax(0, 1fr); }
  .cta__copy, .og-hero__copy, .sd-hero__copy { min-width: 0; }
}

/* breadcrumb as a glass pill, with room below it */
.crumb { margin-bottom: 10px; max-width: 100%; }
.crumb ol { display: inline-flex; padding: 8px 18px 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); }
.on-light .crumb ol, .on-paper .crumb ol { background: #fff; border-color: var(--line); }
@media (max-width: 760px) { .crumb ol { border-radius: 18px; padding: 8px 14px; font-size: .8125rem; } .crumb li + li::before { margin-inline: 9px; } }

/* visually hidden, still read by screen readers */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* kinetic headlines: the highlighted last words (words($s, n)); lime on navy, dark lime on light */
.w--hl { color: var(--lime); }
.on-light .w--hl, .on-paper .w--hl { color: var(--lime-strong); }

/* ---------- FAQ slabs: numbered question; the answer drawer slides open (kit.js faqs()). FAQ page and the Home teaser ---------- */
.fq-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.fq { border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: box-shadow .3s, border-color .3s; }
.fq:hover { border-color: var(--ink-faint); }
.fq.is-open { border-color: transparent; box-shadow: var(--shadow-2); }
.fq[hidden] { display: none; }
.fq__q { margin: 0; font: inherit; }
.fq__q button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; text-align: start; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: var(--navy); }
.fq__q b { display: grid; place-items: center; width: 46px; height: 38px; margin-inline-start: 6px; border-radius: 9px; background: var(--paper-soft); font-size: .875rem; transform: skewX(-24deg); transition: background-color .3s, color .3s; }
.fq__q b .num { transform: skewX(24deg); }
.fq.is-open .fq__q b { background: var(--navy); color: var(--lime); }
.fq__ic { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background-color .3s, border-color .3s; }
.fq__ic::before, .fq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--navy); transition: rotate .35s var(--ease-out); }
.fq__ic::after { rotate: 90deg; }
.fq.is-open .fq__ic { background: var(--lime); border-color: var(--lime); }
.fq.is-open .fq__ic::after { rotate: 0deg; }
.fq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.fq__a > div { min-height: 0; overflow: hidden; }
.fq__a p { max-width: 70ch; padding: 0 24px 22px 88px; line-height: 1.7; color: var(--ink-soft); opacity: 0; translate: 0 -8px; transition: opacity .3s, translate .5s var(--ease-out); }
[dir="rtl"] .fq__a p { padding: 0 88px 22px 24px; }
.fq.is-open .fq__a { grid-template-rows: 1fr; }
.fq.is-open .fq__a p { opacity: 1; translate: 0 0; transition-delay: .1s; }
.calm .fq__a, .calm .fq__a p, .calm .fq__ic::before, .calm .fq__ic::after { transition: none; }
@media (max-width: 760px) {
  .fq__q button { gap: 12px; padding: 16px; font-size: 1rem; }
  .fq__q b { width: 40px; height: 34px; }
  .fq__a p, [dir="rtl"] .fq__a p { padding: 0 18px 18px; }
}