/* =====================================================================
   TRILOT — concept B "PRISM"
   One beam in, three companies out. Light, glass, Swiss grid.
   ===================================================================== */
:root, [data-theme="light"], [data-theme="dark"] {
  --p-paper: #F3F1EC;
  --p-paper-2: #EAE7E0;
  --p-white: #FBFAF7;
  --p-ink: #0F0F0E;
  --p-ink-2: #3A3935;
  --p-muted: #7C786F;
  --p-rule: rgba(15, 15, 14, .12);
  --p-rule-2: rgba(15, 15, 14, .06);
  --p-sage: #6E9F48;
  --p-rust: #E2542C;
  --p-sky: #2F86C4;
  --p-amber: #F0A01A;
  --p-violet: #7B5CE0;
  --p-sand: #C58B4E;
  --p-spectrum: linear-gradient(90deg, #6E9F48 0%, #F0A01A 30%, #E2542C 55%, #7B5CE0 78%, #2F86C4 100%);
  --p-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", "Instrument Sans", system-ui, sans-serif;
  --p-sans: "Instrument Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  --p-mono: "JetBrains Mono", ui-monospace, monospace;
  --p-ease: cubic-bezier(.19, 1, .22, 1);
  --p-wrap: 1360px;
  --p-pad: clamp(18px, 4vw, 56px);
  /* re-map the legacy site tokens so existing page markup inherits the concept */
  --cream: var(--p-paper); --cream-2: var(--p-paper-2); --cream-3: #E0DCD2;
  --ink: var(--p-ink); --ink-2: var(--p-ink-2); --muted: var(--p-muted); --muted-2: #9A958B; --rule: var(--p-rule);
  --rust: var(--p-rust); --rust-2: #C2431F; --sage: var(--p-sage); --sky: var(--p-sky); --sky-2: #226B9F;
  --serif: var(--p-display); --logo: var(--p-display); --sans: var(--p-sans); --mono: var(--p-mono);
  --header-bg: rgba(243, 241, 236, .78);
  --p-glass: rgba(243, 241, 236, .76);
  --p-foot: #0F0F0E;
  --p-blend: multiply;
}
/* ---- DARK: same system, lights off ---- */
html[data-theme="dark"], html[data-theme="dark"] body {
  --p-paper: #0E0E0D;
  --p-paper-2: #171715;
  --p-white: #151513;
  --p-ink: #F1EEE8;
  --p-ink-2: #C9C4BA;
  --p-muted: #8E897F;
  --p-rule: rgba(241, 238, 232, .14);
  --p-rule-2: rgba(241, 238, 232, .055);
  --p-sage: #8BBF62;
  --p-rust: #F06A40;
  --p-sky: #4FA3E0;
  --p-amber: #F5B032;
  --p-violet: #957BF0;
  --p-sand: #D9A266;
  --p-spectrum: linear-gradient(90deg, #8BBF62 0%, #F5B032 30%, #F06A40 55%, #957BF0 78%, #4FA3E0 100%);
  --cream-3: #22211E; --muted-2: #6E6A62; --rust-2: #FF8A63; --sky-2: #7BBCEB;
  --header-bg: rgba(14, 14, 13, .72);
  --p-glass: rgba(14, 14, 13, .72);
  --p-foot: #060605;
  --p-blend: screen;
}
html.prism { background: var(--p-paper); color-scheme: light; }
html.prism[data-theme="dark"] { color-scheme: dark; }
/* theme switch: circular reveal (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 3%)); animation: p-vt .9s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes p-vt { to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 3%)); } }
.prism body { background: var(--p-paper) !important; color: var(--p-ink); font-family: var(--p-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.prism ::selection { background: var(--p-ink); color: var(--p-paper); }

/* ---- the Swiss grid: faint 12 columns behind everything ---- */
.prism body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--p-rule-2) 1px, transparent 1px);
  background-size: calc((min(100vw, var(--p-wrap)) - 2 * var(--p-pad)) / 12) 100%;
  background-position: calc((100vw - min(100vw, var(--p-wrap))) / 2 + var(--p-pad)) 0;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.prism main, .prism .site-footer, .prism .newsletter-strip { position: relative; z-index: 2; }

/* ---- header ---- */
.prism .site-header { position: sticky; top: 0; z-index: 60; background: var(--header-bg) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--p-rule) !important; transition: transform .6s var(--p-ease); }
.prism .site-header.is-hidden { transform: translateY(-105%); }
.prism .site-header__inner { max-width: var(--p-wrap); padding-left: var(--p-pad); padding-right: var(--p-pad); }
.prism .site-header__logo, .prism .site-header__logo span { font-family: var(--p-display) !important; font-weight: 700; font-style: normal !important; letter-spacing: -.04em; color: var(--p-ink) !important; }
.prism .site-header__logo span:last-child::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .12em; border-radius: 50%; background: conic-gradient(var(--p-sage) 0 33%, var(--p-rust) 0 66%, var(--p-sky) 0); vertical-align: .05em; }
.prism .site-nav a { font: 500 13.5px/1 var(--p-sans) !important; letter-spacing: .01em; color: var(--p-ink-2) !important; position: relative; }
.prism .site-nav a:hover { color: var(--p-ink) !important; }
.prism .site-nav a[data-active="true"] { color: var(--p-ink) !important; }
.prism .site-nav a[data-active="true"]::after, .prism .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--p-spectrum); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--p-ease); }
.prism .site-nav a:hover::after, .prism .site-nav a[data-active="true"]::after { transform: scaleX(1); }
.prism .header-control { border: 1px solid var(--p-rule) !important; background: transparent !important; color: var(--p-ink) !important; border-radius: 999px !important; font-family: var(--p-mono) !important; }
.prism .header-control--theme { display: inline-flex !important; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.prism .header-control--theme .theme-toggle__icon { transition: transform .6s var(--p-ease), opacity .4s; }
.prism[data-theme="light"] .theme-toggle__icon--sun, .prism:not([data-theme="dark"]) .theme-toggle__icon--sun { position: absolute; transform: translateY(140%) rotate(90deg); opacity: 0; }
.prism[data-theme="dark"] .theme-toggle__icon--moon { position: absolute; transform: translateY(-140%) rotate(-90deg); opacity: 0; }
.prism[data-theme="dark"] .theme-toggle__icon--sun { transform: none; opacity: 1; position: static; }
.prism .scroll-progress { background: var(--p-spectrum) !important; height: 2px !important; }
@media (max-width: 900px) { .prism .site-nav.open { background: var(--p-paper) !important; } }

/* ---- footer / newsletter ---- */
.prism .site-footer { background: var(--p-foot) !important; color: #CFCBC2 !important; border: 0 !important; }
.prism .site-footer a, .prism .site-footer h5, .prism .site-footer__brand { color: #F3F1EC !important; }
.prism .site-footer__brand { font-family: var(--p-display) !important; font-weight: 700; font-style: normal !important; letter-spacing: -.04em; }
.prism .site-footer p, .prism .site-footer li { color: #BDB8AE !important; }
.prism .site-footer::before { content: ""; display: block; height: 4px; background: var(--p-spectrum); }
.prism .newsletter-strip { background: var(--p-white) !important; border-top: 1px solid var(--p-rule) !important; border-bottom: 1px solid var(--p-rule) !important; }
.prism .newsletter-strip input { background: var(--p-paper) !important; border: 1px solid var(--p-rule) !important; border-radius: 999px !important; }

/* ---- type ---- */
.prism h1, .prism h2, .prism h3 { font-family: var(--p-display); font-style: normal; }
.prism .italic { font-style: normal !important; }
.p-spec { background: var(--p-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.p-label { font: 500 11px/1.3 var(--p-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.p-label b { color: var(--p-ink); font-weight: 500; }
[lang="ar"] .p-label { letter-spacing: 0; text-transform: none; font-family: var(--p-sans); font-size: 12.5px; }

/* ---- buttons ---- */
.p-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; border-radius: 999px; font: 600 15px/1 var(--p-sans); text-decoration: none !important; color: var(--p-paper) !important; background: var(--p-ink); border: 1px solid var(--p-ink); overflow: hidden; isolation: isolate; transition: transform .25s var(--p-ease), color .3s; will-change: transform; }
.p-btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--p-spectrum); transform: translateX(-101%); transition: transform .7s var(--p-ease); }
.p-btn:hover::before { transform: translateX(0); }
.p-btn:hover { color: var(--p-ink) !important; }
.p-btn .arr { display: inline-block; transition: transform .5s var(--p-ease); }
.p-btn:hover .arr { transform: translateX(4px); }
[dir="rtl"] .p-btn:hover .arr { transform: translateX(-4px); }
.p-btn--line { background: transparent; color: var(--p-ink) !important; border-color: var(--p-rule); }
.p-btn--line::before { background: var(--p-ink); }
.p-btn--line:hover { color: var(--p-paper) !important; }
.p-btn--xl { padding: 24px 36px; font-size: 18px; }
.p-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- chromatic cursor: three dots that converge when you stop ---- */
.p-cursor { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: none; mix-blend-mode: var(--p-blend); }
@media (hover: hover) and (pointer: fine) { .p-cursor { display: block; } }
.p-cursor i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; will-change: transform; transition: width .35s var(--p-ease), height .35s var(--p-ease), margin .35s var(--p-ease), opacity .3s; opacity: .85; }
.p-cursor i:nth-child(1) { background: var(--p-sage); } .p-cursor i:nth-child(2) { background: var(--p-rust); } .p-cursor i:nth-child(3) { background: var(--p-sky); }
.p-cursor.is-hover i { width: 44px; height: 44px; margin: -22px 0 0 -22px; opacity: .55; }

/* ---- page transition: horizontal spectral bands ---- */
.p-wipe { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: grid; grid-template-rows: repeat(3, 1fr); }
.p-wipe i { transform: scaleX(0); transition: transform .6s cubic-bezier(.77,0,.18,1); }
.p-wipe i:nth-child(1) { background: var(--p-sage); transform-origin: left; }
.p-wipe i:nth-child(2) { background: var(--p-rust); transform-origin: right; transition-delay: .05s; }
.p-wipe i:nth-child(3) { background: var(--p-sky); transform-origin: left; transition-delay: .1s; }
.p-wipe.in i { transform: scaleX(1); }
.p-wipe.out i:nth-child(1) { transform-origin: right; } .p-wipe.out i:nth-child(2) { transform-origin: left; } .p-wipe.out i:nth-child(3) { transform-origin: right; }
@media (prefers-reduced-motion: reduce) { .p-wipe { display: none; } }

/* ---- living spec-sheet infographics ---- */
.p-sheet { position: relative; margin: 0 0 clamp(28px, 4vw, 56px); padding: clamp(16px, 2.6vw, 36px); background: var(--p-white); border: 1px solid var(--p-rule); border-radius: 4px; box-shadow: 0 1px 0 rgba(15,15,14,.04), 0 30px 60px -40px rgba(15,15,14,.25); transition: transform .7s var(--p-ease), box-shadow .7s; }
.p-sheet::before, .p-sheet::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--p-ink); pointer-events: none; }
.p-sheet::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.p-sheet::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.p-sheet .p-sheet__tag { position: absolute; top: -9px; right: 22px; background: var(--p-white); padding: 0 8px; font: 500 10px/18px var(--p-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.p-sheet .p-sheet__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--p-spectrum); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--p-ease); }
.p-sheet.play .p-sheet__bar { transform: scaleX(1); }
.p-sheet:hover { box-shadow: 0 1px 0 rgba(15,15,14,.04), 0 40px 80px -40px rgba(15,15,14,.35); }
.p-sheet svg { display: block; width: 100%; height: auto; overflow: visible; }
.p-sheet .rise { opacity: 0; transform: translateY(8px); transform-box: fill-box; transition: opacity .6s var(--p-ease), transform .8s var(--p-ease); transition-delay: calc(var(--i) * 14ms); }
.p-sheet .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1); transition-delay: calc(var(--i) * 14ms); }
.p-sheet.play .rise { opacity: 1; transform: none; }
.p-sheet.play .draw { stroke-dashoffset: 0; }
.p-sheet rect { transition: filter .3s, transform .4s var(--p-ease); transform-box: fill-box; transform-origin: center; }
.p-sheet rect:hover { filter: saturate(1.4) brightness(1.04); }
@media (prefers-reduced-motion: reduce) { .p-sheet .rise, .p-sheet .draw { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; } }

/* ---- glass stage (inner-page hero object) ---- */
.p-stage { position: absolute; z-index: 1; pointer-events: none; top: 0; right: 0; width: min(46vw, 640px); height: min(46vw, 640px); max-height: 80vh;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
[dir="rtl"] .p-stage { right: auto; left: 0; }
.p-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.p-stage__cap { position: absolute; right: 10%; bottom: 12%; font: 500 10px/1.4 var(--p-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); text-align: right; }
@media (max-width: 900px) { .p-stage { position: relative; width: 100%; height: 72vw; max-height: 420px; margin-top: -10px; } }

[hidden] { display: none !important; }

/* =====================================================================
   INNER PAGES — legacy markup restyled into the Prism system
   ===================================================================== */
.p-inner main { padding-bottom: 40px; }
.p-inner .container { max-width: var(--p-wrap); padding-left: var(--p-pad); padding-right: var(--p-pad); }
.p-inner h1 { font: 700 clamp(48px, 7.2vw, 124px)/.9 var(--p-display) !important; letter-spacing: -.055em !important; color: var(--p-ink); margin-top: .1em; font-variation-settings: "opsz" 96; }
.p-inner h1 em, .p-inner h1 .rust, .p-inner h1 .italic { background: var(--p-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-style: normal !important; padding-right: .04em; }
[lang="ar"].prism .p-inner h1, [lang="ar"] .p-inner h1 { letter-spacing: 0 !important; line-height: 1.12 !important; }
.p-inner h2 { font-family: var(--p-display) !important; font-weight: 700 !important; letter-spacing: -.035em; font-style: normal !important; color: var(--p-ink); }
.p-inner h3, .p-inner h4 { font-family: var(--p-display) !important; font-weight: 600 !important; letter-spacing: -.02em; font-style: normal !important; }
.p-inner .eyebrow, .p-inner .section-marker:not(h2), .p-inner .dim-meta, .p-inner .lbl { font: 500 11.5px/1.3 var(--p-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--p-muted) !important; }
.p-inner .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.p-inner .eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--p-spectrum); flex: none; }
[lang="ar"] .p-inner .eyebrow, [lang="ar"] .p-inner .lbl { letter-spacing: 0 !important; text-transform: none; font-family: var(--p-sans) !important; font-size: 13px !important; }
.p-inner .lede { font: 500 clamp(21px, 2vw, 30px)/1.3 var(--p-display) !important; letter-spacing: -.02em; color: var(--p-ink) !important; font-style: normal !important; }
.p-inner p, .p-inner li { color: var(--p-ink-2); }
.p-inner main a:not([class]) { color: var(--p-ink); text-decoration: underline; text-decoration-color: var(--p-rust); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.p-inner main a:not([class]):hover { text-decoration-color: var(--p-sky); }
.p-inner [data-dropcap="true"]::first-letter { font-family: var(--p-display) !important; font-weight: 800; color: var(--p-rust) !important; font-style: normal !important; }
.p-inner .service-page__body h2, .p-inner .service-page__body h3 { font-size: clamp(26px, 2.6vw, 38px) !important; }
.p-inner .service-page__body h2::before, .p-inner .service-page__body h3::before { content: ""; display: block; width: 40px; height: 3px; background: var(--p-spectrum); margin-bottom: 14px; }

/* tiles & cards → white sheets with ink hairlines */
.p-inner .svc-tile, .p-inner .cert-card, .p-inner .brand-card, .p-inner .contact-card, .p-inner .office-card, .p-inner .d-group, .p-inner .tl-entry, .p-inner .service-cta, .p-inner .cta-block, .p-inner .host-card, .p-inner .closing, .p-inner form.form-grid {
  background: var(--p-white) !important; border: 1px solid var(--p-ink) !important; border-radius: 0 !important; box-shadow: none !important; position: relative; transition: transform .6s var(--p-ease), box-shadow .6s var(--p-ease); }
.p-inner .svc-tile::before, .p-inner .cert-card::before, .p-inner .contact-card::before, .p-inner .d-group::before, .p-inner .tl-entry::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; background: var(--p-spectrum); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--p-ease); }
.p-inner .svc-tile:hover, .p-inner .cert-card:hover, .p-inner .contact-card:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--p-ink) !important; }
.p-inner .svc-tile:hover::before, .p-inner .cert-card:hover::before, .p-inner .contact-card:hover::before, .p-inner .d-group:hover::before, .p-inner .tl-entry:hover::before { transform: scaleX(1); }
.p-inner .svc-tile__num, .p-inner .brand-card__num { font: 500 12px var(--p-mono) !important; color: var(--p-muted) !important; }
.p-inner .svc-tile__title, .p-inner .brand-card__name { font-family: var(--p-display) !important; font-weight: 700 !important; letter-spacing: -.035em !important; font-style: normal !important; color: var(--p-ink) !important; }
.p-inner .svc-tile__cta, .p-inner .arrow-link { font: 600 13px var(--p-sans) !important; color: var(--p-ink) !important; }
.p-inner .tag-pill { border-radius: 999px !important; border: 1px solid var(--p-rule) !important; background: var(--p-paper) !important; color: var(--p-ink-2) !important; font-family: var(--p-mono) !important; font-size: 11px !important; }
.p-inner .d-group, .p-inner .tl-entry { padding: clamp(16px, 2.4vw, 28px) !important; }
.p-inner .cert-card__img { border-radius: 0 !important; border-bottom: 1px solid var(--p-rule); }
.p-inner .contact-card--primary { background: var(--p-ink) !important; color: var(--p-paper) !important; }
.p-inner .contact-card--primary h3, .p-inner .contact-card--primary p, .p-inner .contact-card--primary .arrow-link { color: var(--p-paper) !important; }

/* legacy buttons → prism pills */
.p-inner .btn-primary, .p-inner .btn--rust, .p-inner .btn, .p-inner .btn-secondary, .p-inner .btn-ghost, .p-inner .btn--ghost, .prism .tertiary-handshake a, .prism .newsletter-strip button {
  border-radius: 999px !important; padding: 14px 22px !important; font: 600 14px/1 var(--p-sans) !important; letter-spacing: 0 !important; text-transform: none !important; transition: transform .25s var(--p-ease), background .3s, color .3s !important; }
.p-inner .btn-primary, .p-inner .btn--rust, .prism .tertiary-handshake .btn-primary, .prism .newsletter-strip button { background: var(--p-ink) !important; color: var(--p-paper) !important; border: 1px solid var(--p-ink) !important; }
.p-inner .btn-primary:hover, .p-inner .btn--rust:hover, .prism .tertiary-handshake .btn-primary:hover, .prism .newsletter-strip button:hover { background: var(--p-rust) !important; border-color: var(--p-rust) !important; }
.p-inner .btn-secondary, .p-inner .btn-ghost, .p-inner .btn--ghost, .prism .tertiary-handshake .btn-secondary, .prism .tertiary-handshake .btn-ghost { background: transparent !important; color: var(--p-ink) !important; border: 1px solid var(--p-rule) !important; }
.p-inner .btn-secondary:hover, .p-inner .btn-ghost:hover, .p-inner .btn--ghost:hover, .prism .tertiary-handshake .btn-secondary:hover, .prism .tertiary-handshake .btn-ghost:hover { background: var(--p-ink) !important; color: var(--p-paper) !important; }
.prism .tertiary-handshake { background: transparent !important; border-top: 1px solid var(--p-rule) !important; position: relative; z-index: 2; }
.prism .tertiary-handshake__lede { font-family: var(--p-display) !important; font-weight: 600; letter-spacing: -.02em; font-style: normal !important; }

/* forms */
.p-inner input, .p-inner textarea, .p-inner select { background: var(--p-paper) !important; border: 1px solid var(--p-rule) !important; border-radius: 0 !important; color: var(--p-ink) !important; font-family: var(--p-sans) !important; }
.p-inner input:focus, .p-inner textarea:focus, .p-inner select:focus { border-color: var(--p-ink) !important; box-shadow: 4px 4px 0 var(--p-ink) !important; outline: none; }
.p-inner table { border-collapse: collapse; }
.p-inner th { font: 500 11px var(--p-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted) !important; border-bottom: 2px solid var(--p-ink) !important; }
.p-inner td { border-color: var(--p-rule) !important; }

/* legacy reveal: sharper */
.p-inner .fade-in { transition: opacity .9s var(--p-ease), transform .9s var(--p-ease) !important; }

/* ---- inner page figure plate ---- */
.p-fig { position: relative; z-index: 2; padding: clamp(22px, 3vw, 40px) 0 0; }
.p-fig__frame { position: relative; height: clamp(240px, 40vh, 440px); border: 1px solid var(--p-ink); background: var(--p-white); overflow: hidden; }
.p-fig__frame canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.p-fig__frame::before, .p-fig__frame::after { content: ""; position: absolute; z-index: 2; width: 16px; height: 16px; border: 1.5px solid var(--p-ink); pointer-events: none; }
.p-fig__frame::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.p-fig__frame::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.p-fig__cap { position: absolute; z-index: 2; left: 34px; bottom: 14px; }
.p-fig__coord { position: absolute; z-index: 2; right: 34px; top: 14px; }
[dir="rtl"] .p-fig__cap { left: auto; right: 34px; } [dir="rtl"] .p-fig__coord { right: auto; left: 34px; }
.p-fig--flat .p-fig__frame { background: repeating-linear-gradient(90deg, transparent 0 39px, var(--p-rule-2) 39px 40px), var(--p-white); }
@media (max-width: 640px) { .p-fig__coord { display: none; } .p-fig__cap { left: 14px; bottom: 10px; font-size: 9.5px; right: 14px; } }
.p-wrap { max-width: var(--p-wrap); margin: 0 auto; padding: 0 var(--p-pad); width: 100%; box-sizing: border-box; }

/* ---- figure plate with motion loop (service pages) ---- */
.p-fig__frame--split canvas { width: 64% !important; }
[dir="rtl"] .p-fig__frame--split canvas { left: auto; right: 0; }
.p-fig__vid { position: absolute; top: 0; right: 0; bottom: 0; width: 36%; height: 100%; object-fit: cover; border-left: 1px solid var(--p-ink); background: var(--p-paper); z-index: 1; }
[dir="rtl"] .p-fig__vid { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--p-ink); }
.p-fig__frame--split .p-fig__coord { right: calc(36% + 24px); }
[dir="rtl"] .p-fig__frame--split .p-fig__coord { right: auto; left: calc(36% + 24px); }
@media (max-width: 760px) {
  .p-fig__frame--split { height: auto; aspect-ratio: auto; display: grid; }
  .p-fig__frame--split canvas { position: relative !important; width: 100% !important; height: 260px !important; }
  .p-fig__vid { position: relative; width: 100%; height: auto; aspect-ratio: 1; border-left: 0; border-top: 1px solid var(--p-ink); }
  [dir="rtl"] .p-fig__vid { border-right: 0; }
}
.p-inner form.form-grid { padding: clamp(18px, 3vw, 32px) !important; }