/* ==========================================================================
   PHARMAREG UAE — UAE Regulatory Affairs
   Design system: Swiss minimal, navy on warm cream, single deep accent
   ========================================================================== */

/* Switzer — Fontshare, Swiss-modeled neo-grotesque */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap');

/* Spline Sans — brand lockup wordmark */
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --paper:        #ffffff;          /* white base */
  --paper-2:      #ffffff;          /* sections all white */
  --paper-3:      #ffffff;          /* dividers */
  --card:         #f2f2f0;          /* light grey card */
  --card-2:       #f2f2f0;          /* secondary card */
  --ink:          #0b1626;          /* deep navy — primary */
  --ink-2:        #1a2f4e;          /* medium navy */
  --ink-3:        #4a5a72;          /* navy gray */
  --ink-4:        #8893a4;          /* muted */
  --rule:         rgba(11, 22, 38, 0.14);
  --rule-soft:    rgba(11, 22, 38, 0.10);
  --accent:       #c8a878;          /* discreet sand-gold for tiny accents */
  --shadow-sm:    0 1px 0 rgba(11,22,38,0.04), 0 2px 8px -4px rgba(11,22,38,0.08);
  --shadow-md:    0 1px 0 rgba(11,22,38,0.04), 0 12px 40px -16px rgba(11,22,38,0.18);
  --radius:       20px;
  --radius-sm:    14px;
  --radius-lg:    28px;

  /* Type scale (1.250 minor third for body, larger for display) */
  --t-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-sans:       'Switzer', 'Helvetica Neue', Helvetica, sans-serif;
  --t-brand:      'Spline Sans', 'Switzer', 'Helvetica Neue', sans-serif;

  --fs-eyebrow:   11px;
  --fs-micro:     12px;
  --fs-small:     14px;
  --fs-body:      16px;
  --fs-lead:      19px;
  --fs-h4:        22px;
  --fs-h3:        28px;
  --fs-h2:        44px;
  --fs-h1:        72px;
  --fs-display:   clamp(56px, 8.5vw, 132px);

  /* Spacing */
  --gutter:       24px;
  --margin:       48px;
  --section-y:    140px;

  /* Motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur:          540ms;

  /* Layout */
  --max-w:        1480px;
}

@media (max-width: 900px) {
  :root {
    --margin: 24px;
    --section-y: 80px;
    --fs-h1: 44px;
    --fs-h2: 32px;
    --fs-h3: 22px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--t-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  font-feature-settings: 'ss01', 'cv11', 'cv02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }

::selection { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--t-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow .num {
  color: var(--ink);
  margin-right: 8px;
}

.h-display {
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.body { font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.mono { font-family: var(--t-mono); font-size: var(--fs-micro); letter-spacing: 0.04em; }

.italic-serif {
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Eyebrow with rule + label pattern used to mark sections */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--t-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 500;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
}
.section-label--plain { gap: 0; }
.section-label--plain::before { display: none; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--margin);
  padding-right: var(--margin);
}
.shell-wide {
  width: 100%;
  padding-left: var(--margin);
  padding-right: var(--margin);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--sm { padding-top: 80px; padding-bottom: 80px; }
.section--lg { padding-top: 200px; padding-bottom: 200px; }

.rule { height: 1px; background: var(--rule); width: 100%; }

/* --------------------------------------------------------------------------
   5. Header / nav — floating panel-pill
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 24px;
}

.nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink);
  width: 100%;
  max-width: 1480px;
  transition: color 320ms var(--ease);
}

/* Right cluster (links + cta) — this is the part that gets the pill bg on scroll */
.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 16px;
  margin-left: auto;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 320ms var(--ease), backdrop-filter 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}

/* Scrolled: pill appears around right cluster only */
.site-header.is-scrolled .nav-right {
  background: rgba(252, 250, 245, 0.92);
  border-color: var(--rule-soft);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 2px 8px -2px rgba(11,22,38,0.08), 0 12px 32px -16px rgba(11,22,38,0.18);
  color: var(--ink);
}

/* Dark variant (pages with dark hero) — at top, text is light; pill is unchanged when scrolled */
.site-header.is-dark .nav-inner { color: var(--paper); }
.site-header.is-dark.is-scrolled .nav-right { color: var(--ink); }

.brand {
  position: absolute;
  top: 36px;
  pointer-events: auto;
  left: 48px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--t-brand);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 21px;
  color: var(--ink);
  padding: 4px 0;
}
.brand-mark {
  width: 1.5em; height: 1.5em;
  display: block;
  flex-shrink: 0;
  color: var(--ink);
}
.brand-word { display: inline-flex; align-items: flex-start; line-height: 1; }
.brand-word sup {
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  margin-left: 0.36em;
  top: 0.16em;
}

.nav-links {
  display: flex;
  gap: 0;
  align-items: center;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: currentColor;
  opacity: 0.78;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 220ms var(--ease), opacity 220ms var(--ease);
  position: relative;
}
.nav-links a:hover { background: rgba(127,127,127,0.12); opacity: 1; }
.nav-links a.is-active { opacity: 1; background: rgba(127,127,127,0.14); }
.nav-links a.is-active::after { display: none; }

.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: 0.01em;
  font-weight: 500;
  padding: 10px 18px;
  margin-left: 8px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  transition: background 220ms var(--ease), transform 220ms var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--ink-2); }
.nav-cta::after {
  content: '→';
  font-size: 13px;
  transition: transform 220ms var(--ease);
  display: inline-block;
}
.nav-cta:hover::after { transform: translateX(3px); }

/* Dark variant shadow no longer needed — pill only on right cluster */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner { padding: 8px 8px 8px 18px; gap: 0; }
  .brand { margin-right: 8px; font-size: 16px; }
  .nav-cta { padding: 9px 14px; font-size: 12px; margin-left: 8px; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 14px; letter-spacing: 0.01em;
  padding: 16px 26px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 320ms var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--ink-2); }
.btn .arrow { width: 14px; height: 10px; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn--on-dark {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.btn--on-dark:hover { background: #fff; border-color: #fff; }
.btn--ghost-on-dark {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.btn--ghost-on-dark:hover { background: var(--paper); color: var(--ink); }

/* Underline link */
.ulink {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: gap 220ms var(--ease);
}
.ulink:hover { gap: 16px; }
.ulink .arrow { width: 12px; height: 10px; }

/* --------------------------------------------------------------------------
   7. Custom cursor
   -------------------------------------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 200;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
  transition: width 280ms var(--ease), height 280ms var(--ease), opacity 220ms var(--ease);
}
.cursor-ring.is-hover {
  width: 64px; height: 64px;
}
.cursor-ring.is-label::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--t-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.cursor-hide { opacity: 0; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  html, body { cursor: auto !important; }
}

html.has-custom-cursor, html.has-custom-cursor * {
  cursor: none !important;
}
@media (hover: none), (pointer: coarse) {
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto !important; }
}

/* --------------------------------------------------------------------------
   8. Reveal animations
   Default: everything visible. JS adds .js-reveals to <html>, which then
   hides [data-reveal] elements until they're revealed. Transitions are
   short and bulletproof — if anything breaks, content still appears.
   -------------------------------------------------------------------------- */
html.js-reveals [data-reveal]:not(.is-in),
html.js-reveals [data-reveal-mask]:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
}
html.js-reveals [data-reveal],
html.js-reveals [data-reveal-mask] {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
html.js-reveals [data-reveal-mask] { display: inline-block; }
html.js-reveals [data-reveal-mask] > span { display: inline; }

[data-parallax] {
  will-change: transform;
}

[data-parallax] {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 220px;
  padding-bottom: 120px;
  overflow: hidden;
}
.hero--dark {
  background: var(--ink);
  color: var(--paper);
}
.hero--dark .lead, .hero--dark .body { color: rgba(243,239,231,0.75); }
.hero--dark .eyebrow, .hero--dark .section-label { color: rgba(243,239,231,0.6); }
.hero--dark .section-label::before { background: var(--paper); }

.hero-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  margin-bottom: 64px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.hero--dark .hero-meta { border-bottom-color: rgba(255,255,255,0.14); }

/* --------------------------------------------------------------------------
   10. Cards / list patterns
   -------------------------------------------------------------------------- */
.pillar {
  grid-column: span 4;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 20px;
}
.pillar .pillar-num {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.pillar h3 { letter-spacing: -0.02em; }
.pillar p { color: var(--ink-2); }
.pillar .ulink { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) {
  .pillar { grid-column: span 12; }
}

/* Service row — long horizontal list, big number, hover-extends arrow */
.svc-row {
  display: grid;
  grid-template-columns: 56px 1fr 1.2fr auto;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  transition: padding-left 380ms var(--ease);
}
.svc-row:last-child { border-bottom: 1px solid var(--rule); }
.svc-row:hover { padding-left: 16px; }
.svc-row .svc-num { font-family: var(--t-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; }
.svc-row .svc-title { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.svc-row .svc-meta { color: var(--ink-3); font-size: 14px; letter-spacing: 0.02em; }
.svc-row.is-featured .svc-num { color: var(--ink); }
.svc-row .svc-arrow {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  transition: transform 280ms var(--ease), color 280ms var(--ease);
}
.svc-row:hover .svc-arrow {
  color: var(--ink);
  transform: translateX(4px);
}
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 36px 1fr auto; gap: 16px; padding: 22px 0; }
  .svc-row .svc-meta { display: none; }
  .svc-row .svc-title { font-size: 18px; }
}

/* Industry card with image slot */
.industry-card {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.industry-card .img {
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.industry-card .img image-slot { width: 100%; height: 100%; }
.industry-card .label {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--t-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.industry-card h3 { font-size: 24px; letter-spacing: -0.02em; }

/* Editorial paragraph block */
.editorial p + p { margin-top: 1.4em; }

/* --------------------------------------------------------------------------
   11. CTA banner
   -------------------------------------------------------------------------- */
.cta-banner {
  background: var(--ink);
  color: var(--paper);
  padding: 120px var(--margin);
  position: relative;
  overflow: hidden;
}
.cta-banner .inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: end;
}
.cta-banner h2 { color: var(--paper); }
.cta-banner p { color: rgba(243,239,231,0.72); }
@media (max-width: 900px) {
  .cta-banner { padding: 80px var(--margin); }
  .cta-banner .inner { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--paper);
  color: var(--ink);
  padding: 80px var(--margin) 40px;
  border-top: 1px solid var(--rule);
}
.site-footer .inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--rule);
}
.footer-col h4 {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  margin-bottom: 22px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer-col a { transition: opacity 220ms var(--ease); }
.footer-col a:hover { opacity: 0.6; }

.footer-brand h2 {
  font-size: 56px;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-weight: 400;
}
.footer-brand p { color: var(--ink-3); font-size: 15px; max-width: 32ch; margin-top: 16px; }

.footer-tail {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px;
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer-marquee {
  font-family: var(--t-sans);
  font-weight: 400;
  letter-spacing: -0.04em;
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.9;
  margin: 80px 0 40px;
  white-space: nowrap;
  overflow: hidden;
}
.footer-marquee .track {
  display: inline-flex;
  gap: 80px;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   13. Trust bar
   -------------------------------------------------------------------------- */
.trust {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: center;
}
.trust p { font-size: 13px; color: var(--ink-3); max-width: 26ch; }
.trust-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  align-items: center;
}
.trust-logo {
  height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  opacity: 0.55;
  font-family: var(--t-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--rule);
  padding: 0 16px;
}
.trust-logo:last-child { border-right: 0; }
@media (max-width: 900px) {
  .trust { grid-template-columns: 1fr; }
  .trust-logos { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .trust-logo { border-right: 0; }
}

/* --------------------------------------------------------------------------
   14. Stat row
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: 40px 32px;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat .num {
  font-size: 56px;
  letter-spacing: -0.04em;
  font-weight: 400;
  line-height: 1;
  display: block;
}
.stat .num sup { font-size: 0.5em; vertical-align: super; margin-left: 4px; font-weight: 400; }
.stat .label {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
  display: block;
  max-width: 22ch;
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 28px 20px; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .stat:nth-child(2) { border-right: 0; }
  .stat .num { font-size: 40px; }
}

/* --------------------------------------------------------------------------
   15. Service detail page
   -------------------------------------------------------------------------- */
.svc-block {
  padding: 100px 0;
  border-top: 1px solid var(--rule);
}
.svc-block .grid12 { align-items: start; }
.svc-block .svc-idx {
  grid-column: span 1;
  font-family: var(--t-mono);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  padding-top: 6px;
}
.svc-block .svc-head {
  grid-column: span 5;
}
.svc-block .svc-head h2 {
  font-size: 40px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 28px;
}
.svc-block .svc-head .lead { font-size: 17px; }
.svc-block .svc-list {
  grid-column: span 6;
}
.svc-list h4 {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  margin-bottom: 24px;
}
.svc-list ul {
  display: flex; flex-direction: column;
}
.svc-list li {
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  color: var(--ink-2);
}
.svc-list li:last-child { border-bottom: 1px solid var(--rule); }
.svc-list li .li-num {
  font-family: var(--t-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  padding-top: 3px;
}
@media (max-width: 900px) {
  .svc-block .svc-idx, .svc-block .svc-head, .svc-block .svc-list {
    grid-column: span 12;
  }
}

/* --------------------------------------------------------------------------
   16. Form
   -------------------------------------------------------------------------- */
.field {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  position: relative;
}
.field label {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  font-family: var(--t-sans);
  font-size: 18px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  padding: 4px 0;
  letter-spacing: -0.01em;
  width: 100%;
  resize: none;
}
.field textarea { min-height: 80px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field.is-focus { border-bottom-color: var(--ink); }
.field .arrow-down {
  position: absolute;
  right: 0; bottom: 28px;
  pointer-events: none;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   17. Insights cards
   -------------------------------------------------------------------------- */
.article-card {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.article-card .img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-2);
}
.article-card .img image-slot { width: 100%; height: 100%; }
.article-card .meta {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-card .meta .dot { width: 3px; height: 3px; background: var(--ink-3); border-radius: 999px; }
.article-card h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.article-card .ulink { align-self: flex-start; margin-top: 4px; }

/* --------------------------------------------------------------------------
   18. Why list (numbered editorial)
   -------------------------------------------------------------------------- */
.why-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 48px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.why-row:last-child { border-bottom: 1px solid var(--rule); }
.why-row .why-num {
  font-family: var(--t-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-top: 6px;
}
.why-row h3 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }
.why-row p { color: var(--ink-2); }
@media (max-width: 900px) {
  .why-row { grid-template-columns: 32px 1fr; gap: 16px; padding: 32px 0; }
  .why-row p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   19. Misc utility
   -------------------------------------------------------------------------- */
.col-12 { grid-column: span 12; }
.col-10 { grid-column: span 10; }
.col-9  { grid-column: span 9; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-2  { grid-column: span 2; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-7 { grid-column-start: 7; }

@media (max-width: 900px) {
  [class*='col-'] { grid-column: span 12; }
  [class*='start-'] { grid-column-start: auto; }
}

.gap-lg { gap: 80px; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 64px; }
.mt-xl { margin-top: 120px; }
.mb-md { margin-bottom: 32px; }
.mb-lg { margin-bottom: 64px; }

.flex-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Striped placeholder image-slot decoration when empty */
image-slot::part(placeholder) {
  background:
    repeating-linear-gradient(135deg,
      rgba(11,22,38,0.04) 0 12px,
      rgba(11,22,38,0.07) 12px 24px);
}

/* ==========================================================================
   20. MODERN PANEL SYSTEM — contemporary card-driven layout
   ========================================================================== */

.panel {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.panel--white { background: var(--card-2); }
.panel--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}
.panel--ink p { color: rgba(243,239,231,0.72); }
.panel--ink .panel-eyebrow { color: rgba(243,239,231,0.5); }

.panel--clickable { cursor: pointer; }
.panel--clickable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule);
}

.panel-padded-lg { padding: 48px; }
.panel-padded-xl { padding: 64px; }
.panel-padded-sm { padding: 24px; }

.panel-eyebrow {
  font-family: var(--t-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-eyebrow .num {
  color: var(--ink);
}
.panel-title {
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
}
.panel--ink .panel-title { color: var(--paper); }
.panel-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.panel--ink .panel-body { color: rgba(243,239,231,0.78); }

.panel-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), transform 320ms var(--ease);
  align-self: flex-end;
  margin-top: auto;
  margin-left: auto;
}
.panel--clickable:hover .panel-arrow {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(-45deg);
}
.panel--ink .panel-arrow {
  border-color: rgba(255,255,255,0.2);
  color: var(--paper);
}
.panel--ink.panel--clickable:hover .panel-arrow {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.panel-img {
  margin: -32px -32px 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel-img image-slot { width: 100%; height: 100%; display: block; }
.panel-padded-lg .panel-img { margin: -48px -48px 0; border-radius: var(--radius) var(--radius) 0 0; }

/* Bento grid layouts */
.bento {
  display: grid;
  gap: 16px;
}
.bento-4 {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(280px, auto);
}
.bento-4 .b-feature { grid-column: span 7; grid-row: span 2; }
.bento-4 .b-tall    { grid-column: span 5; }
.bento-4 .b-wide    { grid-column: span 5; }
.bento-4 .b-half    { grid-column: span 6; }
.bento-4 .b-third   { grid-column: span 4; }

@media (max-width: 1000px) {
  .bento-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bento-4 .b-feature, .bento-4 .b-tall, .bento-4 .b-wide, .bento-4 .b-half, .bento-4 .b-third {
    grid-column: span 2; grid-row: auto;
  }
}
@media (max-width: 640px) {
  .bento-4 { grid-template-columns: 1fr; }
  .bento-4 > * { grid-column: span 1; }
}

/* Image card — now icon-led, body bottom-left, dark navy panel */
.img-card {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  border: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 28px;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), background 320ms var(--ease);
  cursor: pointer;
}
.img-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: var(--ink-2);
}
.img-card .ind-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  color: var(--paper);
  opacity: 0.85;
}
.img-card .img-card-body {
  padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.img-card .img-card-num {
  font-family: var(--t-sans);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(243,239,231,0.55); font-weight: 500;
}
.img-card .img-card-title {
  font-size: 22px; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--paper); font-weight: 500;
}
.img-card .img-card-body p { color: rgba(243,239,231,0.7); font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) {
  .img-card {
    padding: 18px;
    min-height: 184px;
  }
  .img-card .ind-icon { top: 18px; right: 18px; width: 38px; height: 38px; }
  .img-card .img-card-num { font-size: 11px; }
  .img-card .img-card-title {
    font-size: 17px;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Inset panel container — used for hero, stats, CTAs to feel "inset" */
.inset {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 0;
  overflow: hidden;
}
.inset--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}

/* Stats inline strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px;
  gap: 8px;
}
.stats-strip .stat-cell {
  padding: 28px 24px;
  border-radius: var(--radius-sm);
  background: var(--card-2);
  display: flex; flex-direction: column; gap: 12px;
}
.stats-strip .stat-cell .n {
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
  font-weight: 400;
}
.stats-strip .stat-cell .n sup { font-size: 0.5em; vertical-align: super; margin-left: 4px; }
.stats-strip .stat-cell .l {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 24ch;
  line-height: 1.4;
}
.inset--ink .stats-strip .stat-cell { background: rgba(255,255,255,0.04); }
.inset--ink .stats-strip .stat-cell .l { color: rgba(243,239,231,0.6); }
@media (max-width: 900px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .stat-cell .n { font-size: 36px; }
}

/* Why-panel grid (replaces the long editorial rows on home) */
.why-panel {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.why-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.why-panel .wn {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.why-panel h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 500;
}
.why-panel p {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.55;
}

/* Trust strip — minimal single line */
.trust-strip {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 24px 0;
}
.trust-strip .lbl {
  font-size: 13px;
  color: var(--ink-3);
}
.trust-strip .logos {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.trust-strip .logos span {
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--ink-3);
  opacity: 0.7;
}

/* Section header pattern — eyebrow + title + optional rhs */
.sec-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.sec-head h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 18ch;
  margin-top: 18px;
  font-weight: 400;
}
.sec-head .rhs {
  color: var(--ink-3);
  font-size: 15px;
  max-width: 38ch;
  justify-self: end;
}
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 24px; }
  .sec-head .rhs { justify-self: start; }
}

/* Hero split — text + image side by side, contemporary */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.hero-split .hero-text {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 540px;
}
.hero-split .hero-media {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 540px;
  position: relative;
}
.hero-split .hero-media image-slot { width: 100%; height: 100%; display: block; }
.hero-split h1 {
  font-size: clamp(44px, 5.6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 0.96;
  font-weight: 400;
}
.hero-split .hero-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 36ch;
}
.hero-split .hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 1000px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-text, .hero-split .hero-media { min-height: 0; }
  .hero-split .hero-media { aspect-ratio: 4/3; }
  .hero-split .hero-text { padding: 32px; }
}

/* Cleaner button refresh */
.btn {
  font-size: 14px;
  font-weight: 500;
  padding: 14px 22px;
}

/* CTA inset block (modern panel) */
.cta-inset {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.cta-inset h2 {
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  max-width: 16ch;
  color: var(--paper);
  font-weight: 400;
}
.cta-inset p {
  color: rgba(243,239,231,0.7);
  font-size: 16px;
  line-height: 1.55;
  max-width: 38ch;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .cta-inset { grid-template-columns: 1fr; padding: 48px 32px; gap: 32px; }
}

/* Service index — rectangular buttons */
.svc-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  text-decoration: none;
  transition: background 220ms var(--ease), border-color 220ms var(--ease);
}
.svc-pill::after {
  content: '→';
  font-size: 15px;
  color: var(--ink-4);
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.svc-pill:hover { background: var(--ink); border-color: var(--ink); }
.svc-pill:hover::after { color: var(--paper); transform: translateX(3px); }
.svc-pill .n { display: none; }
.svc-pill .t { font-size: 16px; color: var(--ink); letter-spacing: -0.01em; font-weight: 500; transition: color 220ms var(--ease); }
.svc-pill:hover .t { color: var(--paper); }
@media (max-width: 900px) {
  .svc-pill { padding: 16px 18px; }
  .svc-pill .t { font-size: 15px; }
}

/* Service mini-row — clickable index row, single-line */
.svc-mini {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px 24px;
  border-radius: var(--radius-sm);
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}
.svc-mini:hover { background: var(--card); transform: translateX(4px); }
.svc-mini .n { font-size: 13px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.04em; }
.svc-mini .t { font-size: 17px; color: var(--ink); letter-spacing: -0.01em; font-weight: 500; }
.svc-mini .meta { font-size: 13px; color: var(--ink-3); }
.svc-mini .a { color: var(--ink-3); transition: color 220ms var(--ease), transform 220ms var(--ease); }
.svc-mini:hover .a { color: var(--ink); transform: translateX(4px); }
@media (max-width: 900px) {
  .svc-mini { grid-template-columns: 32px 1fr auto; padding: 16px; }
  .svc-mini .meta { display: none; }
  .svc-mini .t { font-size: 15px; }
}

/* Cleaner footer — softer */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: 64px;
  padding-bottom: 32px;
}
.footer-brand h2 {
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveals [data-reveal], html.js-reveals [data-reveal-mask] > span {
    opacity: 1 !important; transform: none !important;
  }
}

/* ==========================================================================
   PAGE HERO PANEL — shared treatment for non-home pages
   ========================================================================== */

.page-hero-section {
  padding: 24px;
  padding-top: 64px;
}
.page-hero-panel {
  background: var(--card);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 96px 64px 80px;
  max-width: 1480px;
  margin: 0 auto;
}
.page-hero-panel .page-hero-eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 10px;
}
.page-hero-panel .page-hero-eyebrow::before {
  content: ''; display: inline-block; width: 18px; height: 1px; background: currentColor;
}
.page-hero-panel h1 {
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.035em;
  line-height: 0.96;
  font-weight: 400;
  margin: 0 0 32px;
  color: var(--ink);
  max-width: 18ch;
}
.page-hero-panel .page-hero-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 50ch;
}
@media (max-width: 900px) {
  .page-hero-panel { padding: 48px 24px; }
  .page-hero-panel h1 { font-size: clamp(31px, 8vw, 46px); overflow-wrap: break-word; }
}

/* Plain hero variant — just text on the page background, no panel */
.page-hero-plain {
  padding: 120px 24px 48px;
}
.page-hero-plain-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}
.page-hero-plain h1 {
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.035em;
  line-height: 0.96;
  font-weight: 400;
  margin: 0 0 24px;
  color: var(--ink);
  max-width: 18ch;
}
@media (max-width: 900px) {
  .page-hero-plain { padding: 80px 24px 32px; }
  .page-hero-plain-inner { padding: 0; }
  .page-hero-plain h1 { font-size: clamp(31px, 8vw, 46px); overflow-wrap: break-word; }
}

/* Spacing for the next section after the hero panel */
.page-hero-section + .section,
.page-hero-section + section {
  padding-top: 32px !important;
}

/* ==========================================================================
   Positioning section, split: navy panel for title, grey panel for body
   ========================================================================== */
/* Legacy banner — designed editorial panel with built coverage illustration */
.legacy-banner {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6,12,24,0.55) 0%, rgba(6,12,24,0.42) 48%, rgba(6,12,24,0.82) 100%),
    linear-gradient(90deg, rgba(6,12,24,0.94) 0%, rgba(6,12,24,0.62) 46%, rgba(6,12,24,0.32) 100%),
    #060c18 url('../assets/dna.webp') center/cover no-repeat;
  border-radius: 32px;
  box-shadow:
    0 2px 1px rgba(11,22,38,0.04),
    0 40px 80px -42px rgba(11,22,38,0.4);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "content"
    "credits";
}
/* (dotted-gradient texture removed — DNA imagery is now the panel background) */

/* Hero trust strip — text + grey authority logos on one line */
.trust-strip {
  margin: 32px auto 0;
  padding: 14px 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.trust-logos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
}
/* logo cells are invisible on desktop (wrappers collapse), become flex cells on mobile */
.tl-cell, .auth-cell { display: contents; }
.trust-logos img {
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}
/* cap-height-balanced sizing, matching the banner ratios (~70%) */
.trust-logos img.tl-mohap { height: 17px; }
.trust-logos img.tl-ede   { height: 13px; transform: translateY(0.5px); }
.trust-logos img.tl-dha   { height: 34px; }
.trust-logos img.tl-dm    { height: 19px; }
.trust-logos img.tl-doh   { height: 18px; }
@media (max-width: 760px) {
  .trust-strip { justify-content: flex-start; }
  .trust-logos { gap: 24px 28px; }
}
@media (max-width: 640px) {
  /* Creative mobile treatment: an enclosed, hairline-ruled logo matrix */
  .trust-strip {
    margin: 30px 0 0;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .trust-strip .small {
    text-align: center;
    max-width: 26ch;
    margin: 0 auto !important;
    line-height: 1.5;
  }
  .trust-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    border: 1px solid rgba(11,22,38,0.13);
    border-radius: 16px;
    overflow: hidden;
  }
  .tl-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 20px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(11,22,38,0.1);
    border-right: 1px solid rgba(11,22,38,0.1);
  }
  .tl-cell:nth-child(even) { border-right: none; }
  .tl-cell--doh {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: none;
  }
  /* every logo centered inside an equal box → balanced, proportional read */
  .trust-logos img,
  .trust-logos img.tl-mohap,
  .trust-logos img.tl-ede,
  .trust-logos img.tl-dha,
  .trust-logos img.tl-dm,
  .trust-logos img.tl-doh {
    height: auto;
    width: auto;
    max-height: 30px;
    max-width: 86%;
    transform: none;
    opacity: 0.82;
  }
  .trust-logos img.tl-ede { max-height: 22px; }
  .trust-logos img.tl-dha { max-height: 40px; }
}

/* White corner logo lockup for dark panels (hero + legacy banner) */
.panel-logo {
  position: absolute;
  top: 32px; right: 36px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--t-brand);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 17px;
  color: #ffffff;
  pointer-events: none;
}
.panel-logo .brand-mark {
  width: 1.45em; height: 1.45em;
  display: block; flex-shrink: 0;
  color: #ffffff;
}
.panel-logo .brand-word { display: inline-flex; align-items: flex-start; line-height: 1; }
.panel-logo .brand-word sup {
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-left: 0.34em;
  top: 0.16em;
}
@media (max-width: 640px) {
  .panel-logo { top: 24px; right: 24px; font-size: 15px; }
}
.lb-content {
  grid-area: content;
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 52px 60px 40px;
}
/* In-flow brand lockup at top-left of the banner content (replaces the eyebrow) */
.lb-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--t-brand);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 19px;
  color: #ffffff;
  margin-bottom: 26px;
}
.lb-logo .brand-mark { width: 1.45em; height: 1.45em; display: block; flex-shrink: 0; color: #ffffff; }
.lb-logo .brand-word { display: inline-flex; align-items: flex-start; line-height: 1; }
.lb-logo .brand-word sup {
  font-size: 0.3em; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6); margin-left: 0.34em; top: 0.16em;
}
.legacy-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--t-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.legacy-eyebrow .dot { color: rgba(255,255,255,0.4); }
.legacy-h {
  font-size: clamp(30px, 3.1vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  font-weight: 500;
  color: #ffffff;
  margin: 22px 0 0;
  max-width: 24ch;
  text-wrap: balance;
}
.lb-sub {
  margin: 22px 0 0;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

/* Credentials row */
.lb-credits {
  grid-area: credits;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 34px;
  padding: 8px 60px 38px;
}
.legacy-coverage-label {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--t-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
.legacy-authorities {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 36px;
}
.legacy-authorities img {
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 220ms var(--ease);
}
.legacy-authorities img:hover { opacity: 1; }
/* All four logos share the SAME text cap-height; only the emblems differ in size.
   MOHAP's image is essentially its text block (crest now scaled to text height), so it
   renders short to keep its lettering equal to the others. */
.legacy-authorities img.lg-mohap { height: 24px; transform: translateY(2.8px); }
.legacy-authorities img.lg-ede   { height: 18px; transform: translateY(0.5px); }
.legacy-authorities img.lg-dha   { height: 48px; }
.legacy-authorities img.lg-dm    { height: 27px; }
.legacy-authorities img.lg-doh   { height: 25px; }

/* keep label + logos on one line; tighten progressively as the panel narrows */
@media (max-width: 1320px) {
  .lb-credits { gap: 18px; padding: 20px 36px 28px; }
  .legacy-coverage-label { font-size: 10px; letter-spacing: 0.1em; }
  .legacy-authorities { gap: 22px; }
  .legacy-authorities img.lg-mohap { height: 20px; transform: translateY(2.4px); }
  .legacy-authorities img.lg-ede   { height: 14px; }
  .legacy-authorities img.lg-dha   { height: 37px; }
  .legacy-authorities img.lg-dm    { height: 21px; }
  .legacy-authorities img.lg-doh   { height: 19px; }
}
@media (max-width: 920px) {
  .lb-content { padding: 36px 28px 4px; }
  .lb-credits {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px 32px;
  }
  .legacy-coverage-label { font-size: 11px; letter-spacing: 0.18em; }
  .legacy-authorities { gap: 26px 34px; }
  .legacy-authorities img.lg-mohap { height: 24px; }
  .legacy-authorities img.lg-ede   { height: 18px; }
  .legacy-authorities img.lg-dha   { height: 48px; }
  .legacy-authorities img.lg-dm    { height: 27px; }
  .legacy-authorities img.lg-doh   { height: 25px; }
}
@media (max-width: 640px) {
  .legacy-banner { border-radius: 24px; }
  .lb-content { padding: 30px 22px 6px; }
  .legacy-h { font-size: clamp(27px, 7.6vw, 38px); max-width: 16ch; }
  .lb-sub { font-size: 15px; margin-top: 16px; max-width: none; }

  /* Frameless on the panel; logos centered in equal cells so they read as a
     balanced, proportional set rather than loose mismatched marks. */
  .lb-credits {
    margin: 6px 22px 6px;
    padding: 0;
    gap: 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .legacy-coverage-label {
    align-self: stretch;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    padding: 18px 0 4px;
  }
  .legacy-authorities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    width: 100%;
  }
  .auth-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 14px 10px;
    box-sizing: border-box;
  }
  .auth-cell--doh { grid-column: 1 / -1; }
  .legacy-authorities img,
  .legacy-authorities img.lg-mohap,
  .legacy-authorities img.lg-ede,
  .legacy-authorities img.lg-dha,
  .legacy-authorities img.lg-dm,
  .legacy-authorities img.lg-doh {
    height: auto;
    width: auto;
    max-height: 30px;
    max-width: 88%;
    transform: none;
    opacity: 0.92;
  }
  .legacy-authorities img.lg-ede { max-height: 22px; }
  .legacy-authorities img.lg-dha { max-height: 42px; }
}

/* Dual side-by-side service panels (Artwork + Translation) */
.dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dual-panel {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dual-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 8px;
}
.dual-eyebrow .num {
  color: var(--ink);
  padding: 4px 10px;
  background: rgba(11,22,38,0.06);
  border-radius: 6px;
}
.dual-title {
  font-size: clamp(28px, 2.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
  max-width: 18ch;
}
.dual-lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dual-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 500;
  margin: 8px 0 0;
}

/* Collapsible "What's included" */
.dual-details {
  margin-top: 8px;
  border-top: 1px solid rgba(11,22,38,0.10);
}
.dual-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 500;
}
.dual-summary::-webkit-details-marker { display: none; }
.dual-summary::marker { content: ''; }
.dual-chev {
  color: var(--ink);
  transition: transform 320ms var(--ease);
}
.dual-details[open] .dual-chev { transform: rotate(180deg); }
.dual-details[open] .dual-summary { border-bottom: 1px solid rgba(11,22,38,0.08); }
.dual-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dual-list li {
  position: relative;
  padding: 12px 0 12px 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
  border-top: 1px solid rgba(11,22,38,0.08);
}
.dual-list li:last-child { border-bottom: 1px solid rgba(11,22,38,0.08); }
.dual-list li::before {
  content: '';
  position: absolute;
  top: 18px; left: 0;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--ink);
}
.dual-list li::after {
  content: '';
  position: absolute;
  top: 20px; left: 2.5px;
  width: 5px; height: 2.5px;
  border-left: 1.2px solid var(--paper);
  border-bottom: 1.2px solid var(--paper);
  transform: rotate(-45deg);
}
@media (max-width: 1000px) {
  .dual-grid { grid-template-columns: 1fr; }
  .dual-panel { padding: 32px 28px; }
}

.dm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dm-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), background 320ms var(--ease);
}
.dm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: var(--ink-2);
}
.dm-icon {
  width: 44px;
  height: 44px;
  color: var(--paper);
  opacity: 0.85;
  margin-bottom: 4px;
}
.dm-title {
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-weight: 500;
  color: var(--paper);
}
.dm-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(243,239,231,0.78);
}
.dm-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(243,239,231,0.85);
}
.dm-list li::before {
  content: '';
  position: absolute;
  top: 6px; left: 0;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--paper);
}
.dm-list li::after {
  content: '';
  position: absolute;
  top: 9px; left: 3px;
  width: 6px; height: 3px;
  border-left: 1.4px solid var(--ink);
  border-bottom: 1.4px solid var(--ink);
  transform: rotate(-45deg);
}
.dm-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 20px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.dm-cta:hover {
  background: #fff;
  border-color: #fff;
}
@media (max-width: 1200px) {
  .dm-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dm-grid { grid-template-columns: 1fr; }
}

/* About page: two-column readable panel */
.about-panel {
  background: var(--card);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.about-panel-left .section-label { display: inline-flex; }
.about-quote {
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  font-weight: 400;
  color: var(--ink);
  max-width: 14ch;
}
.about-panel-right p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.about-panel-right p.lead { font-size: 19px; line-height: 1.5; }
.about-panel-right p + p { margin-top: 1.2em; }
@media (max-width: 900px) {
  .about-panel { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
}

.about-image-panel {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/8;
}
.about-image-panel image-slot { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .about-image-panel { aspect-ratio: 4/3; }
}

/* ==========================================================================
   21. RESPONSIVE CARD GRIDS — collapsible utility classes
   Used in place of inline grid-template-columns so columns can reflow on
   small screens (inline styles can't be reached by media queries).
   ========================================================================== */
.cards { display: grid; gap: 16px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 980px) {
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards-3:not(.cards-keep),
  .cards-2:not(.cards-keep) { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22. MOBILE NAVIGATION — hamburger toggle + full-screen overlay menu
   Markup is injected by site.js, so every page gets it for free.
   ========================================================================== */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: currentColor;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bars {
  position: relative;
  width: 20px;
  height: 13px;
}
.nav-toggle .bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 320ms var(--ease), opacity 220ms var(--ease), top 320ms var(--ease);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5.65px; }
.nav-toggle .bars span:nth-child(3) { top: 11.3px; }
.nav-toggle.is-open .bars span:nth-child(1) { top: 5.65px; transform: rotate(45deg); }
.nav-toggle.is-open .bars span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .bars span:nth-child(3) { top: 5.65px; transform: rotate(-45deg); }

/* Full-screen menu panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 26px var(--margin) 36px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 360ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 360ms var(--ease), transform 420ms var(--ease), visibility 0s;
}
html.menu-open, html.menu-open body { overflow: hidden; }

.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mm-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--t-brand);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 19px;
  color: #fff;
}
.mm-brand .brand-mark { width: 1.45em; height: 1.45em; color: #fff; }
.mm-brand .brand-word { display: inline-flex; align-items: flex-start; line-height: 1; }
.mm-brand .brand-word sup {
  font-size: 0.3em; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6); margin-left: 0.34em; top: 0.16em;
}
.mm-close {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.mm-close svg { width: 16px; height: 16px; }

/* Big stacked links */
.mm-links {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 6vh, 52px) 0 28px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mm-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  font-size: clamp(34px, 11vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-weight: 400;
  color: rgba(243,239,231,0.62);
  transition: color 240ms var(--ease), transform 360ms var(--ease);
}
.mm-links a .mm-num {
  font-family: var(--t-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(243,239,231,0.34);
  transform: translateY(-0.5em);
}
.mm-links a.is-active,
.mm-links a:active { color: #fff; }
.mm-links a.is-active .mm-num { color: var(--accent); }

/* Staggered entrance for links */
html.menu-open .mm-links a {
  animation: mmIn 520ms var(--ease) both;
  animation-delay: calc(120ms + var(--i, 0) * 55ms);
}
@keyframes mmIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer block inside menu */
.mm-foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mm-foot .btn { align-self: flex-start; }
.mm-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: rgba(243,239,231,0.72);
}
.mm-contact a { color: rgba(243,239,231,0.72); }
.mm-contact .mm-label {
  font-family: var(--t-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243,239,231,0.4);
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* Top-bar CTA lives inside the menu on mobile */
  .nav-right .nav-cta { display: none; }
  .nav-right { padding: 5px; }
  .brand { left: var(--margin); top: 27px; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   WhatsApp chat widget — floating button + redirect card (all pages)
   ========================================================================== */
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px -8px rgba(11,22,38,0.45), 0 2px 6px rgba(11,22,38,0.2);
  cursor: pointer;
  transition: transform 320ms var(--ease), background 220ms var(--ease);
}
.wa-fab:hover { background: #1fbe5a; transform: translateY(-2px) scale(1.04); }
.wa-fab.is-open { background: var(--ink); }
.wa-fab .wa-i { display: grid; place-items: center; }
.wa-fab .wa-i-chat svg { width: 32px; height: 32px; }
.wa-fab .wa-i-close svg { width: 18px; height: 18px; }
.wa-fab .wa-i-close { display: none; }
.wa-fab.is-open .wa-i-chat { display: none; }
.wa-fab.is-open .wa-i-close { display: grid; }

.wa-card {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 120;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 64px -22px rgba(11,22,38,0.5), 0 6px 16px rgba(11,22,38,0.12);
  font-family: var(--t-sans);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
html.wa-open .wa-card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 14px 15px 16px;
  background: var(--ink);
  color: var(--paper);
}
.wa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wa-avatar svg { width: 24px; height: 24px; }
.wa-id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wa-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wa-status {
  font-size: 12px;
  color: rgba(243,239,231,0.72);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wa-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #25d366;
  display: inline-block;
  flex-shrink: 0;
}
.wa-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: rgba(243,239,231,0.8);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 200ms var(--ease);
}
.wa-close:hover { background: rgba(255,255,255,0.12); }
.wa-close svg { width: 13px; height: 13px; }

.wa-body { padding: 22px 18px; background: var(--card); }
.wa-bubble {
  position: relative;
  background: var(--paper);
  border-radius: 3px 14px 14px 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(11,22,38,0.12);
  max-width: 92%;
}
.wa-bubble-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.wa-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 200ms var(--ease);
}
.wa-cta:hover { background: #1fbe5a; }
.wa-cta svg { width: 20px; height: 20px; }

/* Call (tel:) button — sits to the LEFT of the WhatsApp FAB */
.call-fab {
  position: fixed;
  right: 96px; /* 24 (WA right) + 60 (WA width) + 12 (gap) */
  bottom: 24px;
  z-index: 120;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px -8px rgba(11,22,38,0.5), 0 2px 6px rgba(11,22,38,0.22);
  transition: transform 320ms var(--ease), background 220ms var(--ease);
}
.call-fab:hover { background: var(--ink-2); transform: translateY(-2px) scale(1.04); }
.call-fab svg { width: 26px; height: 26px; }

/* Hide the floating widgets while the full-screen mobile menu is open */
html.menu-open .wa-fab,
html.menu-open .wa-card,
html.menu-open .call-fab { display: none; }

@media (max-width: 640px) {
  .wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-fab .wa-i-chat svg { width: 28px; height: 28px; }
  .wa-card { right: 16px; left: 16px; bottom: 80px; width: auto; max-width: none; }
  .call-fab { right: 80px; bottom: 16px; width: 54px; height: 54px; } /* 16 + 54 + 10 */
  .call-fab svg { width: 24px; height: 24px; }
}

@media print {
  .wa-fab, .wa-card, .call-fab { display: none !important; }
}


/* ==========================================================================
   Services nav dropdown (mega menu) — injected by site.js
   ========================================================================== */
.nav-item { position: relative; display: inline-flex; }
.nav-mega {
  position: absolute; top: 100%; left: 50%; margin-top: 12px;
  transform: translateX(-50%) translateY(6px);
  width: 480px; max-width: 84vw;
  background: rgba(252,250,245,0.98);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid var(--rule-soft); border-radius: 16px;
  box-shadow: 0 14px 44px -14px rgba(11,22,38,0.32);
  padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 95; color: var(--ink);
}
.nav-mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-item:hover .nav-mega, .nav-item:focus-within .nav-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-mega a {
  display: block; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; color: var(--ink); opacity: 1; letter-spacing: 0; white-space: normal;
  transition: background .18s var(--ease);
}
.nav-mega a:hover { background: rgba(11,22,38,0.06); }
.nav-mega .mega-all { grid-column: 1 / -1; border-top: 1px solid var(--rule-soft); margin-top: 4px; padding-top: 6px; }
.nav-mega .mega-all a { font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 900px) { .nav-mega { display: none !important; } }