/* ============================================================
   R3 GLOBAL — DESIGN SYSTEM
   Typography, spacing, hierarchy, buttons, cards, navigation.
   Loaded last so it governs the visual layer sitewide.
   Deliberately does NOT touch backgrounds, imagery, layout
   structure, routes or behaviour.
   ============================================================ */

/* === 1. TOKENS ============================================== */
:root {
  /* type families */
  --font-head: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter',   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* text colour hierarchy (dark surfaces) */
  --t-heading:   #FFFFFF;
  --t-strong:    #F8FAFC;
  --t-body:      #E5E7EB;
  --t-secondary: #CBD5E1;
  --t-muted:     #94A3B8;

  /* spacing scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 48px;
  --s-9: 64px;  --s-10: 80px; --s-11: 96px; --s-12: 120px;

  /* fluid type scale */
  --fs-h1:    clamp(2.5rem,  1.55rem + 3.6vw, 4.5rem);   /* 40 -> 72 */
  --fs-h2:    clamp(2rem,    1.45rem + 2.1vw, 3.25rem);  /* 32 -> 52 */
  --fs-h3:    clamp(1.375rem,1.19rem + 0.7vw, 1.875rem); /* 22 -> 30 */
  --fs-h4:    clamp(1.25rem, 1.16rem + 0.3vw, 1.5rem);   /* 20 -> 24 */
  --fs-lead:  clamp(1.125rem,0.99rem + 0.55vw,1.5rem);   /* 18 -> 24 */
  --fs-body:  clamp(1rem,    0.96rem + 0.16vw,1.125rem); /* 16 -> 18 */
  --fs-small: clamp(0.875rem,0.85rem + 0.1vw, 0.9375rem);/* 14 -> 15 */
  --fs-nav:   clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);   /* 15 -> 16 */
  --fs-btn:   clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);  /* 16 -> 17 */

  /* section rhythm */
  --sec-pad: clamp(64px, 7vw, 120px);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* === 2. BASE TYPE =========================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--t-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.14; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.20; letter-spacing: -0.02em; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }

p { font-size: var(--fs-body); line-height: 1.7; color: var(--t-body); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--t-strong); }
small { font-size: var(--fs-small); line-height: 1.5; }

/* === 3. CONTENT WIDTH ======================================= */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* controlled measure for prose */
.section-title p,
.sp-section-header p,
.pf-section-head p { max-width: 720px; margin-inline: auto; }

.hero-message      { max-width: 720px; }
.ab-intro-copy p   { max-width: 620px; }
.about-software p  { max-width: 800px; }

/* === 4. SECTION RHYTHM ====================================== */
.section,
.sp-intro,
.sp-cards-section,
.sp-cases-section,
.sp-features-section,
.pf-trust,
.pf-expertise,
.pf-coming { padding-block: var(--sec-pad); }

.section-title,
.sp-section-header,
.pf-section-head { margin-bottom: clamp(40px, 4.5vw, 56px); }

.section-title h2,
.sp-section-header h2,
.pf-section-head h2 { margin-bottom: var(--s-5); }

/* === 5. EYEBROW LABELS ====================================== */
.section-title .subtitle,
.about-content .subtitle,
.pf-label,
.cp-pill,
.svc-hero-tag {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  margin-bottom: var(--s-5);
}

/* === 6. LEAD / SUPPORTING TEXT ============================== */
.hero-tagline,
.about-software p.lead,
.svc-hero p,
.page-hero p,
.pf-hero p,
.cp-hero p {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.5;
  color: var(--t-body);
  letter-spacing: -0.01em;
}

.section-title p,
.sp-section-header p,
.pf-section-head p,
.sp-intro-right p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--t-secondary);
}

/* === 7. HERO ================================================ */
.hero h1,
.hero h1 .highlight { color: var(--t-heading); }

.hero-tagline { margin-bottom: var(--s-5); color: #E5E7EB; }

.hero-message {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: #D7DEE9;
  margin-bottom: var(--s-7);
}

.hero-inner { padding-block: clamp(112px, 11vw, 148px) clamp(64px, 7vw, 96px); }

.hero-trust { gap: var(--s-5); margin-top: var(--s-2); }
.trust-item {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--t-secondary);
}

/* === 8. BUTTONS ============================================= */
.btn,
.svc-hero-btn,
.cp-submit,
.pf-coming-btn {
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  min-height: 54px;
  padding: 16px 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 200ms var(--ease),
              background-color 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease;
}
.btn:hover,
.svc-hero-btn:hover,
.cp-submit:hover,
.pf-coming-btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.hero .btn-primary,
.btn-primary {
  background: #2563EB;
  border: 1px solid #2563EB;
  color: #FFFFFF;
  box-shadow: 0 8px 22px -10px rgba(37,99,235,0.85);
}
.hero .btn-primary:hover,
.btn-primary:hover {
  background: #1D4ED8;
  border-color: #1D4ED8;
  box-shadow: 0 12px 28px -10px rgba(37,99,235,0.95);
}

.hero .btn-outline {
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #0A2463;
}
.hero .btn-outline:hover { background: #F1F5F9; border-color: #F1F5F9; color: #0A2463; }

.cp-submit { border-radius: 12px; }

/* === 9. CARDS =============================================== */
.service-card,
.why-card,
.testimonial-card,
.sp-card,
.sp-case-card,
.sp-feature-card,
.pf-exp-card,
.value-card,
.vm-card {
  border-radius: 18px;
  padding: clamp(24px, 2.4vw, 32px);
}

.service-card h3,
.why-card h3,
.sp-card h3,
.sp-feature-card h3,
.pf-exp-card h3,
.value-card h3,
.vm-card h3 {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--t-heading);
  margin-bottom: var(--s-3);
}

.service-card p,
.why-card p,
.sp-card p,
.sp-feature-card p,
.pf-exp-card p,
.value-card p,
.vm-card p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--t-secondary);
}

/* === 10. NAVIGATION ========================================= */
.header-inner { padding: 12px clamp(20px, 2.2vw, 30px); min-height: 60px; }

.nav-links { gap: clamp(20px, 2.2vw, 32px); }
.nav-links a {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.nav-links a.active { font-weight: 600; }

.logo { padding-right: var(--s-4); }

/* === 11. FORMS ============================================== */
.cp-form-card label,
.form-group label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--t-strong);
  margin-bottom: var(--s-2);
  display: inline-block;
}
.cp-form-card input,
.cp-form-card select,
.cp-form-card textarea,
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 10px;
}

/* === 12. FAQ ================================================ */
.faq-item { border-radius: 14px; margin-bottom: var(--s-3); }
.faq-question {
  font-family: var(--font-head);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 22px 26px;
}
.faq-answer-inner {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  padding: 0 26px 22px;
  color: var(--t-secondary);
}

/* === 13. FOOTER ============================================= */
.footer { padding-top: var(--s-8); }
.footer-grid { gap: clamp(32px, 4vw, 56px); padding-bottom: var(--s-7); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-strong);
  margin-bottom: var(--s-4);
}
.footer-links { gap: var(--s-3); }
.footer-links a,
.footer-contact-item a,
.footer-contact-item span {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--t-secondary);
  transition: color 200ms ease;
}
.footer-links a:hover,
.footer-contact-item a:hover { color: #FFFFFF; }

.footer-brand .footer-tagline {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  color: var(--t-strong);
  margin-bottom: var(--s-3);
}
.footer-brand .footer-desc {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--t-muted);
  margin-bottom: var(--s-5);
}
.footer-bottom { padding-block: var(--s-5); }
.footer-bottom p,
.footer-bottom-links a {
  font-size: 0.8125rem;
  color: var(--t-muted);
  font-family: var(--font-body);
}
.footer-bottom-links a:hover { color: #FFFFFF; }

/* === 14. RESPONSIVE TIGHTENING ============================== */
@media (max-width: 1024px) {
  .hero-inner { padding-block: clamp(96px, 12vw, 120px) 56px; }
}

@media (max-width: 768px) {
  :root { --sec-pad: clamp(56px, 9vw, 72px); }
  .section-title, .sp-section-header, .pf-section-head { margin-bottom: 32px; }
  .btn, .svc-hero-btn, .cp-submit { min-height: 50px; padding: 14px 22px; font-size: 1rem; }
  .hero-trust { gap: var(--s-4); }
}

@media (max-width: 480px) {
  .container { padding-inline: 18px; }
  .hero-inner { padding-block: 92px 44px; }
  .btn { width: 100%; }
  .hero-buttons { width: 100%; }
}

/* nothing here should reintroduce horizontal scroll */
html, body { overflow-x: hidden; max-width: 100vw; }

/* === 15. ADJACENT-SECTION RHYTHM ============================
   Related sections that sit back to back were stacking two full
   section paddings and opening a dead gap. Halve the seam.     */
.sp-intro          { padding-block: var(--sec-pad) clamp(28px, 3vw, 44px); }
.sp-cards-section  { padding-block: clamp(28px, 3vw, 44px) var(--sec-pad); }
.pf-trust          { padding-block: clamp(32px, 3.5vw, 48px); }
.pf-expertise      { padding-block: clamp(32px, 3.5vw, 48px) var(--sec-pad); }

/* card headings that wrap to two lines shouldn't unbalance a row */
.why-card, .service-card, .sp-card, .sp-feature-card, .value-card, .vm-card { align-content: start; }

/* === 16. FOOTER POLISH ====================================== */
.footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #0b0b0d 0%, #08080a 100%);
}
.footer-grid { border-bottom: 1px solid rgba(255,255,255,0.07); }
.footer-brand .footer-tagline { font-style: normal; }

.footer-links a { display: inline-flex; align-items: center; gap: 8px; }
.footer-links a svg { opacity: 0.55; transition: opacity 200ms ease, transform 200ms var(--ease); }
.footer-links a:hover svg { opacity: 1; transform: translateX(2px); }

.social-link { opacity: 0.65; transition: opacity 200ms ease, transform 200ms var(--ease); }
.social-link:hover { opacity: 1; transform: translateY(-2px); }

.footer-col h4,
.footer-brand .footer-tagline + * { margin-top: 0; }

/* the map's attribution overlay was swamping a short frame */
.footer-map-col iframe { height: 150px; border-radius: 12px; }

/* ============================================================
   17. DENSITY PASS
   --sec-pad was applied top AND bottom, so two adjacent sections
   stacked up to 240px of dead space. Tighten the whole rhythm so
   the site reads dense and premium rather than sparse.
   ============================================================ */
:root {
  --sec-pad: clamp(44px, 4.6vw, 76px);
}

/* heading groups sit closer to their content */
.section-title,
.sp-section-header,
.pf-section-head { margin-bottom: clamp(28px, 3vw, 40px); }

.section-title h2,
.sp-section-header h2,
.pf-section-head h2 { margin-bottom: var(--s-4); }

.section-title .subtitle,
.about-content .subtitle,
.pf-label,
.cp-pill,
.svc-hero-tag { margin-bottom: var(--s-4); }

/* hero: keep the top clearance for the fixed header, cut the tail */
.hero-inner { padding-block: clamp(104px, 9.5vw, 132px) clamp(40px, 4.4vw, 60px); }
.hero-message { margin-bottom: var(--s-6); }
.hero-trust   { margin-top: 0; }

/* grids */
.services-grid,
.why-grid,
.values-grid,
.sp-cards-grid,
.sp-cases-grid,
.sp-features-grid,
.pf-expertise-grid { gap: clamp(16px, 1.6vw, 24px); }
.industries-grid   { gap: clamp(10px, 1vw, 14px); }

/* inner-page heroes were carrying hero-sized padding */
.page-hero { padding-block: clamp(104px, 9.5vw, 128px) clamp(44px, 4.6vw, 68px); }
.svc-hero  { padding-block: clamp(104px, 9.5vw, 128px) clamp(40px, 4.4vw, 60px); }
.pf-hero   { padding-block: clamp(104px, 9.5vw, 128px) clamp(36px, 4vw, 52px); }
.cp-hero   { padding-block: clamp(100px, 9vw, 124px) clamp(28px, 3vw, 40px); }
.cp-body   { padding-bottom: clamp(48px, 5vw, 80px); }

/* about intro block */
.ab-intro  { margin-top: clamp(28px, 3.2vw, 44px); }
.ab-chips  { margin-top: var(--s-6); }

/* the last band before the footer shouldn't leave a trailing void */
main > section:last-of-type { padding-bottom: clamp(48px, 5vw, 80px); }

/* adjacent related bands share one gap instead of two */
.sp-cases-section  { padding-block: clamp(28px, 3vw, 44px) var(--sec-pad); }
.sp-features-section { padding-block: clamp(28px, 3vw, 44px) var(--sec-pad); }
.pf-coming { padding-block: clamp(32px, 3.4vw, 52px) var(--sec-pad); }

@media (max-width: 768px) {
  :root { --sec-pad: clamp(36px, 6vw, 52px); }
  .section-title, .sp-section-header, .pf-section-head { margin-bottom: 24px; }
  .hero-inner { padding-block: 92px 36px; }
}

/* second density step: section boundaries were still ~150px
   (76 bottom + 76 top). Bring the seam to roughly 100px.       */
:root { --sec-pad: clamp(34px, 3.6vw, 54px); }
.hero-inner { padding-block: clamp(100px, 9vw, 126px) clamp(30px, 3.2vw, 44px); }
.page-hero  { padding-block: clamp(100px, 9vw, 124px) clamp(34px, 3.6vw, 52px); }
.svc-hero   { padding-block: clamp(100px, 9vw, 124px) clamp(30px, 3.2vw, 44px); }
.pf-hero    { padding-block: clamp(100px, 9vw, 124px) clamp(26px, 2.8vw, 40px); }
main > section:last-of-type { padding-bottom: clamp(40px, 4.2vw, 64px); }
@media (max-width: 768px) { :root { --sec-pad: clamp(30px, 5vw, 44px); } }

/* === 18. FOOTER DENSITY ====================================
   The band under the columns was carrying 48px top + 40px grid
   bottom + 24px on the legal bar. Tighten without touching the
   footer's structure, links or content.                       */
.footer       { padding-top: var(--s-6); }
.footer-grid  { gap: clamp(24px, 3vw, 40px); padding-bottom: var(--s-5); }
.footer-links { gap: 10px; }
.social-links { gap: 10px; }
.footer-bottom { padding-block: var(--s-4); }
.footer-brand .footer-desc { margin-bottom: var(--s-4); }
.footer-contact-item { margin-bottom: 10px; }
.footer-map-col iframe { height: 132px; }

@media (max-width: 768px) {
  .footer { padding-top: var(--s-5); }
  .footer-grid { gap: 22px; padding-bottom: var(--s-4); }
  .footer-bottom { padding-block: var(--s-3); }
}

/* ============================================================
   19. SERVICES "HOW WE WORK" CARDS
   Brought in line with the home page why-cards: premium glass
   icon chip, icon and heading sharing a row, content-sized card.
   ============================================================ */
.sv-page .sp-feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon  title"
    "body  body"
    "link  link";
  column-gap: 16px;
  row-gap: 0;
  align-items: center;
  min-height: 0;
  background: rgba(8, 18, 40, 0.58);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
}

/* premium chip, same recipe as the home icons */
.sv-page .sp-feature-icon {
  grid-area: icon;
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 56px;
  margin-bottom: 0;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(96,165,250,0.30) 0%, rgba(29,78,216,0.30) 42%, rgba(10,26,62,0.68) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #dbe9ff;
  box-shadow:
    0 12px 28px -12px rgba(0, 0, 0, 0.75),
    0 0 22px -12px rgba(59, 130, 246, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.sv-page .sp-feature-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.05) 38%, transparent 60%);
}
.sv-page .sp-feature-icon svg {
  position: relative;
  z-index: 1;
  width: 25px;
  height: 25px;
  stroke: #dbe9ff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.sv-page .sp-feature-card:hover .sp-feature-icon {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px -12px rgba(0, 0, 0, 0.8),
    0 0 30px -10px rgba(59, 130, 246, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.sv-page .sp-feature-card h4 {
  grid-area: title;
  margin-bottom: 0;
  align-self: center;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--t-heading);
}
.sv-page .sp-feature-card p {
  grid-area: body;
  margin: 18px 0 0;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  line-height: 1.65;
  color: var(--t-secondary);
}
/* the arrow is a real link to contact.html, so it stays, just quieter */
.sv-page .sp-feat-arrow {
  grid-area: link;
  justify-self: end;
  align-self: end;
  margin-top: 16px;
  opacity: 0.55;
}
.sv-page .sp-feature-card:hover .sp-feat-arrow { opacity: 1; }

/* the per-card arrow links were removed from services.html, so the
   grid no longer needs a third row for them */
.sv-page .sp-feature-card {
  grid-template-areas:
    "icon  title"
    "body  body";
}

/* optional-field marker, quieter than the required asterisk */
.cp-form-card .opt,
.form-group .opt {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-muted);
  margin-left: 4px;
}

/* --- contact background: new blueprint art ---------------------
   Calmer and already bright, so it needs less lift than the old
   circuit-board image and a lighter scrim.                      */
.ct-bg img { filter: brightness(1.02) saturate(1.08) contrast(1.02); }
.ct-bg::after {
  background:
    radial-gradient(ellipse 78% 70% at 50% 45%, rgba(4,10,24,0.58) 0%, rgba(4,10,24,0.46) 55%, rgba(4,10,24,0.38) 100%),
    linear-gradient(180deg, rgba(4,10,24,0.46) 0%, rgba(4,10,24,0.28) 42%, rgba(4,10,24,0.62) 100%);
}

/* === 20. FAQ — two columns, header-matched corners ==========
   Six stacked rows made the section unnecessarily tall. Paired
   into 3 rows of 2, with the 16px radius the header uses.      */
.services-faq {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;   /* an open answer grows its own cell only */
}
.faq-item {
  border-radius: 16px;
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .services-faq { grid-template-columns: 1fr; gap: 12px; }
}

/* industries description reads better as one line; the shared 720px
   prose cap was forcing the wrap. nowrap only where it actually fits. */
.hm-page #industries .section-title p { max-width: none; }
@media (min-width: 1000px) {
  .hm-page #industries .section-title p {
    white-space: nowrap;
    font-size: clamp(1rem, 0.7rem + 0.42vw, 1.125rem);
  }
}

/* ============================================================
   21. INDUSTRIES MARQUEE
   One continuous row scrolling right to left. The track holds
   two identical sets, so translating it -50% lands exactly on
   the start of the duplicate: the loop has no visible seam.
   ============================================================ */
.hm-page .industries-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* fade the ends so tags enter and leave rather than pop */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.hm-page .industries-track {
  display: flex;
  width: max-content;
  animation: industries-scroll 42s linear infinite;
}
.hm-page .industries-set {
  display: flex;
  flex-shrink: 0;
  gap: clamp(10px, 1vw, 14px);
  padding-right: clamp(10px, 1vw, 14px);
}
.hm-page .industries-marquee .industry-tag {
  flex-shrink: 0;
  white-space: nowrap;
}
@keyframes industries-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* let people read a tag they are interested in */
.hm-page .industries-marquee:hover .industries-track { animation-play-state: paused; }

/* full-bleed: the row reads better running edge to edge */
.hm-page #industries .container { max-width: none; padding-inline: 0; }
.hm-page #industries .section-title { padding-inline: clamp(20px, 4vw, 40px); }

/* keeps rolling regardless of the OS reduce-motion setting, just
   gentler when that preference is on. No scrollbar in either case. */
@media (prefers-reduced-motion: reduce) {
  .hm-page .industries-track { animation-duration: 75s; }
}

/* ---- industry icons: white and dimensional --------------------
   They inherited a navy stroke from the light-theme stylesheet,
   which read dim and flat against the dark marquee.            */
.hm-page .industry-tag svg {
  width: 19px;
  height: 19px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 1.7;
  opacity: 0.96;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 8px rgba(160, 200, 255, 0.35));
  transition: filter 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.hm-page .industry-tag:hover svg {
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 12px rgba(160, 200, 255, 0.75));
}
.hm-page .industry-tag { color: #EAF2FF; }

/* ============================================================
   22. HOME — WHITE PAGE, DARK CINEMATIC HERO
   The office photo is now scoped to the hero instead of running
   the whole page, so the body below reads clean white.
   ============================================================ */
.hm-page { background: #FFFFFF; }

/* image layer now lives inside the hero */
.hm-page .hm-bg { position: absolute; inset: 0; z-index: 0; }
.hm-page .hero  { position: relative; overflow: hidden; }

/* body sections go white with dark type */
.hm-page main,
.hm-page .section,
.hm-page .section-light { background: #FFFFFF; }

.hm-page .section h2,
.hm-page .section h3,
.hm-page .section h4,
.hm-page .section-title h2 {
  color: #0B1220;
  text-shadow: none;
}
.hm-page .section p,
.hm-page .section li,
.hm-page .section-title p { color: #48566B; text-shadow: none; }

/* eyebrow pill keeps the brand blue on white */
.hm-page .section-title .subtitle {
  background: #16388F;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.16);
}

/* ---- industry pills, light treatment ---- */
.hm-page .industry-tag {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 1px solid #E3E8F0;
  color: #16233A;
  box-shadow: 0 1px 2px rgba(11,18,32,0.05), 0 6px 16px -10px rgba(11,18,32,0.28);
}
.hm-page .industry-tag:hover {
  background: #FFFFFF;
  border-color: #C7D6EE;
  box-shadow: 0 2px 4px rgba(11,18,32,0.06), 0 10px 22px -10px rgba(37,99,235,0.4);
}
.hm-page .industry-tag svg {
  stroke: #2563EB;
  opacity: 1;
  filter: none;
}
.hm-page .industry-tag:hover svg { filter: none; transform: translateY(-1px); }

/* the marquee fade must match the new white backdrop */
.hm-page .industries-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---- header: glass over the hero, solid once scrolled onto white ---- */
.hm-page .header.scrolled {
  background: rgba(255,255,255,0.90);
  border-color: rgba(11,18,32,0.08);
  box-shadow: 0 6px 24px -12px rgba(11,18,32,0.35);
}
.hm-page .header.scrolled .logo-img { filter: none !important; }
.hm-page .header.scrolled .nav-links a { color: #26344B; }
.hm-page .header.scrolled .nav-links a:hover,
.hm-page .header.scrolled .nav-links a.active { color: #0B1220; }
.hm-page .header.scrolled .nav-links a.active::after { background: #2563EB; }
.hm-page .header.scrolled .hamburger span { background: #0B1220; }

.hm-page .back-to-top {
  background: #FFFFFF;
  border-color: #E3E8F0;
  box-shadow: 0 6px 18px -8px rgba(11,18,32,0.35);
}
.hm-page .back-to-top svg { stroke: #26344B; }
/* [data-theme="dark"] body in theme.css out-specifies a bare .hm-page,
   so the dark body was still painting below the footer */
[data-theme="dark"] body.hm-page,
html body.hm-page { background: #FFFFFF; }

/* ============================================================
   23. SERVICES — WHITE PAGE, DARK CINEMATIC HERO
   Same structure as home: the schematic is scoped to the hero,
   everything below reads clean white.
   ============================================================ */
[data-theme="dark"] body.sv-page,
html body.sv-page { background: #FFFFFF; }

.sv-page .sv-bg  { position: absolute; inset: 0; z-index: 0; }
.sv-page .svc-hero { position: relative; overflow: hidden; }

/* body surfaces */
.sv-page main,
.sv-page .sp-intro,
.sv-page .sp-cards-section,
.sv-page .sp-features-section,
.sv-page .service-detail,
.sv-page .section,
.sv-page .section-light { background: #FFFFFF; }
.sv-page .section-light { background: #F6F8FC; }

/* type */
.sv-page main h2,
.sv-page main h3,
.sv-page main h4,
.sv-page .sp-section-header h2,
.sv-page .sp-intro-left h2 { color: #0B1220; text-shadow: none; }

.sv-page main p,
.sv-page main li,
.sv-page .sp-intro-right p { color: #48566B; text-shadow: none; }
.sv-page main strong { color: #0B1220; }

/* ---- service cards: light, bordered ---- */
.sv-page .sp-card,
.sv-page .sp-feature-card {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 1px solid #E3E8F0;
  box-shadow: 0 1px 2px rgba(11,18,32,0.04), 0 12px 28px -18px rgba(11,18,32,0.35);
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.sv-page .sp-card:hover,
.sv-page .sp-feature-card:hover {
  transform: translateY(-3px);
  border-color: #C7D6EE;
  box-shadow: 0 2px 4px rgba(11,18,32,0.05), 0 20px 40px -20px rgba(37,99,235,0.35);
}
.sv-page .sp-card h3,
.sv-page .sp-feature-card h4 { color: #0B1220; }
.sv-page .sp-card p,
.sv-page .sp-card li,
.sv-page .sp-feature-card p { color: #48566B; }

/* the premium chip reads better as a light blue tile on white */
.sv-page .sp-feature-icon {
  background: linear-gradient(150deg, #EAF1FF 0%, #D8E6FF 100%);
  border: 1px solid #CBDDF8;
  box-shadow: 0 1px 2px rgba(11,18,32,0.05), inset 0 1px 0 #FFFFFF;
}
.sv-page .sp-feature-icon::after { content: none; }
.sv-page .sp-feature-icon svg { stroke: #1D4ED8; filter: none; }
.sv-page .sp-feature-card:hover .sp-feature-icon {
  box-shadow: 0 2px 6px rgba(37,99,235,0.22), inset 0 1px 0 #FFFFFF;
}

/* ---- FAQ on white ---- */
.sv-page .faq-item {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: #E3E8F0;
  box-shadow: 0 1px 2px rgba(11,18,32,0.04);
}
.sv-page .faq-question { background: transparent; color: #0B1220; text-shadow: none; }
.sv-page .faq-question:hover,
.sv-page .faq-item.active .faq-question,
.sv-page .faq-item.open .faq-question { color: #1D4ED8; }
.sv-page .faq-answer-inner { color: #48566B; text-shadow: none; }

/* ---- header adapts once scrolled onto white ---- */
.sv-page .header.scrolled {
  background: rgba(255,255,255,0.90);
  border-color: rgba(11,18,32,0.08);
  box-shadow: 0 6px 24px -12px rgba(11,18,32,0.35);
}
.sv-page .header.scrolled .logo-img { filter: none !important; }
.sv-page .header.scrolled .nav-links a { color: #26344B; }
.sv-page .header.scrolled .nav-links a:hover,
.sv-page .header.scrolled .nav-links a.active { color: #0B1220; }
.sv-page .header.scrolled .nav-links a.active::after { background: #2563EB; }
.sv-page .header.scrolled .hamburger span { background: #0B1220; }

.sv-page .back-to-top {
  background: #FFFFFF;
  border-color: #E3E8F0;
  box-shadow: 0 6px 18px -8px rgba(11,18,32,0.35);
}
.sv-page .back-to-top svg { stroke: #26344B; }
/* the hero stays dark, so keep its copy light: the white-body text
   rules above were reaching into it and dimming the subheading */
.sv-page .svc-hero h1 { color: #FFFFFF; }
.sv-page .svc-hero p  { color: rgba(228,238,252,0.94); }
.sv-page .svc-hero .svc-hero-tag { color: #FFFFFF; }

/* ============================================================
   24. GLOBAL HEADER — light translucent glass on every page
   One header treatment sitewide: frosted white, never solid,
   regardless of what sits behind it.
   ============================================================ */
[data-theme="dark"] .header,
[data-theme="dark"] .header.scrolled,
.hm-page .header, .hm-page .header.scrolled,
.sv-page .header, .sv-page .header.scrolled,
.ab-page .header, .ab-page .header.scrolled,
.pf-page .header, .pf-page .header.scrolled,
.ct-page .header, .ct-page .header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 30px -14px rgba(11, 18, 32, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
/* a touch more opaque once scrolled, still see-through */
[data-theme="dark"] .header.scrolled,
.hm-page .header.scrolled,
.sv-page .header.scrolled,
.ab-page .header.scrolled,
.pf-page .header.scrolled,
.ct-page .header.scrolled {
  background: rgba(255, 255, 255, 0.90);
  box-shadow:
    0 10px 34px -14px rgba(11, 18, 32, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* logo back to its navy artwork, no inversion */
[data-theme="dark"] .logo-img,
[data-theme="dark"] .header.scrolled .logo-img,
.hm-page .logo-img, .hm-page .header.scrolled .logo-img,
.sv-page .logo-img, .sv-page .header.scrolled .logo-img,
.ab-page .logo-img, .pf-page .logo-img, .ct-page .logo-img {
  filter: none !important;
}

/* nav reads dark on the light glass */
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .header.scrolled .nav-links a,
.hm-page .nav-links a, .hm-page .header.scrolled .nav-links a,
.sv-page .nav-links a, .sv-page .header.scrolled .nav-links a,
.ab-page .nav-links a, .pf-page .nav-links a, .ct-page .nav-links a {
  color: #2A3648;
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .header.scrolled .nav-links a:hover,
[data-theme="dark"] .header.scrolled .nav-links a.active,
.hm-page .nav-links a:hover, .hm-page .nav-links a.active,
.sv-page .nav-links a:hover, .sv-page .nav-links a.active,
.ab-page .nav-links a:hover, .ab-page .nav-links a.active,
.pf-page .nav-links a:hover, .pf-page .nav-links a.active,
.ct-page .nav-links a:hover, .ct-page .nav-links a.active {
  color: #0B1220;
}
[data-theme="dark"] .nav-links a.active::after,
[data-theme="dark"] .header.scrolled .nav-links a.active::after,
.hm-page .nav-links a.active::after,
.sv-page .nav-links a.active::after,
.ab-page .nav-links a.active::after,
.pf-page .nav-links a.active::after,
.ct-page .nav-links a.active::after { background: #2563EB; }

[data-theme="dark"] .hamburger span,
[data-theme="dark"] .header.scrolled .hamburger span,
.hm-page .hamburger span, .sv-page .hamburger span,
.ab-page .hamburger span, .pf-page .hamburger span,
.ct-page .hamburger span { background: #0B1220; }

/* ============================================================
   25. FOOTER — brand blue, sampled from the logo artwork
   The dominant blue in header logo r3.png is #003090; the panel
   is built around it with white type.
   ============================================================ */
.footer {
  background: linear-gradient(180deg, #0A3A9E 0%, #033090 48%, #02246E 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
}
.footer-grid { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }

.footer-col h4 { color: #FFFFFF; }

.footer-brand .footer-tagline { color: #FFFFFF; }
.footer-brand .footer-desc { color: rgba(255, 255, 255, 0.78); }

.footer-links a,
.footer-contact-item a,
.footer-contact-item span { color: rgba(255, 255, 255, 0.84); }
.footer-links a:hover,
.footer-contact-item a:hover { color: #FFFFFF; }
.footer-contact-item strong { color: rgba(255, 255, 255, 0.66); }

.footer-links a svg,
.footer-contact-item svg { stroke: rgba(255, 255, 255, 0.72); }

/* logo sits on blue, so the white artwork is right here */
.footer .logo-img { filter: brightness(0) invert(1) !important; }

.social-link { opacity: 0.8; }
.social-link:hover { opacity: 1; }
.social-link svg { fill: #FFFFFF; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.16);
}
.footer-bottom p,
.footer-bottom-links a { color: rgba(255, 255, 255, 0.72); }
.footer-bottom-links a:hover { color: #FFFFFF; }

.footer-map-col iframe {
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.92;
}
/* deeper footer blue */
.footer {
  background: linear-gradient(180deg, #08296F 0%, #051E55 52%, #03143A 100%);
}
.footer-bottom { background: rgba(0, 0, 0, 0.22); }

/* ============================================================
   26. ABOUT / PORTFOLIO / CONTACT — WHITE PAGES
   Same structure as home and services: image scoped to the hero,
   white body below. Shared tokens first, page specifics after.
   ============================================================ */
[data-theme="dark"] body.ab-page, html body.ab-page,
[data-theme="dark"] body.pf-page, html body.pf-page,
[data-theme="dark"] body.ct-page, html body.ct-page { background: #FFFFFF; }

.ab-page .ab-bg, .pf-page .pf-bg, .ct-page .ct-bg { position: absolute; inset: 0; z-index: 0; }
.ab-page .page-hero, .pf-page .pfx-hero, .ct-page .cp-hero { position: relative; overflow: hidden; }

/* body surfaces */
.ab-page main, .ab-page .section, .ab-page .section-light,
.pf-page main, .pf-page .pfx-section, .pf-page .pfx-cta,
.ct-page main, .ct-page .contact-page-main, .ct-page .cp-body { background: #FFFFFF; }
.ab-page .section-light { background: #F6F8FC; }

/* type on white */
.ab-page main h2, .ab-page main h3, .ab-page main h4,
.pf-page main h2, .pf-page main h3,
.ct-page main h2, .ct-page main h3,
.ab-page .about-software h2, .pf-page .pfx-head h2 { color: #0B1220; text-shadow: none; }

.ab-page main p, .ab-page main li,
.pf-page main p, .pf-page main li,
.ct-page main p, .ct-page main li { color: #48566B; text-shadow: none; }
.ab-page main strong, .pf-page main strong { color: #0B1220; }

/* heroes stay dark, so keep their copy light */
.ab-page .page-hero h1, .pf-page .pfx-hero h1, .ct-page .cp-hero h1 { color: #FFFFFF; }
.ab-page .page-hero p,  .pf-page .pfx-hero p,  .ct-page .cp-hero p,
.pf-page .pfx-lead { color: rgba(230,240,255,0.94); }
.ab-page .page-hero .ab-intro-copy h2 { color: #FFFFFF; }
.ab-page .page-hero .ab-intro-copy p  { color: rgba(224,236,252,0.92); }

/* ---- cards, light ---- */
.ab-page .vm-card, .ab-page .value-card, .ab-page .about-pillar,
.pf-page .pfx-show, .pf-page .pfx-cta-inner {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 1px solid #E3E8F0;
  box-shadow: 0 1px 2px rgba(11,18,32,0.04), 0 12px 28px -18px rgba(11,18,32,0.35);
}
.ab-page .vm-card:hover, .ab-page .value-card:hover,
.pf-page .pfx-show:hover {
  border-color: #C7D6EE;
  box-shadow: 0 2px 4px rgba(11,18,32,0.05), 0 20px 40px -20px rgba(37,99,235,0.35);
}
.ab-page .vm-card h3, .ab-page .value-card h3,
.pf-page .pfx-show h3 { color: #0B1220; }
.ab-page .vm-card p, .ab-page .value-card p,
.pf-page .pfx-show p { color: #48566B; }
.ab-page .about-pillar { color: #16233A; }

/* value / vision icons as pale blue tiles */
.ab-page .value-icon, .ab-page .vm-card .vm-icon {
  background: linear-gradient(150deg, #EAF1FF 0%, #D8E6FF 100%);
  border: 1px solid #CBDDF8;
  box-shadow: 0 1px 2px rgba(11,18,32,0.05), inset 0 1px 0 #FFFFFF;
}
.ab-page .value-icon::after, .ab-page .vm-card .vm-icon::after { content: none; }
.ab-page .value-icon svg,
.ab-page .vm-card.vision .vm-icon svg,
.ab-page .vm-card.mission .vm-icon svg { stroke: #1D4ED8; filter: none; }

/* ---- portfolio specifics ---- */
.pf-page .pfx-eyebrow, .pf-page .pfx-show-cat { color: #1D4ED8; }
.pf-page .pfx-head p { color: #48566B; }
.pf-page .pfx-row { border-top-color: #E3E8F0; }
.pf-page .pfx-row:last-child { border-bottom-color: #E3E8F0; }
.pf-page .pfx-row-num { color: #0B1220; }
.pf-page .pfx-step-no { color: #1D4ED8; }
.pf-page .pfx-step::before { background: #FFFFFF; border-color: #2563EB; box-shadow: 0 0 0 5px rgba(37,99,235,0.12); }
.pf-page .pfx-steps::before {
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.35) 12%, rgba(37,99,235,0.35) 88%, transparent);
}
.pf-page .pfx-tags li { background: #F2F6FC; border-color: #DCE6F5; color: #33445E; }
.pf-page .pfx-btn-ghost { color: #1D4ED8; }
.pf-page .pfx-btn-ghost:hover { color: #0B1220; }
.pf-page .pfx-cta-glow {
  background:
    radial-gradient(ellipse 46% 46% at 30% 40%, rgba(37,99,235,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 42% 42% at 72% 60%, rgba(96,165,250,0.12) 0%, transparent 68%);
}

/* ---- contact specifics ---- */
.ct-page .cp-form-card, .ct-page .cp-sidebar-card {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: 1px solid #E3E8F0;
  box-shadow: 0 1px 2px rgba(11,18,32,0.04), 0 16px 36px -22px rgba(11,18,32,0.4);
}
.ct-page .cp-form-card label,
.ct-page .cp-sidebar-card h3,
.ct-page .cp-sidebar-heading { color: #0B1220; }
.ct-page .cp-form-card .opt { color: #7A8AA3; }
.ct-page .cp-form-card input,
.ct-page .cp-form-card select,
.ct-page .cp-form-card textarea {
  background: #FFFFFF;
  border-color: #D8E0EC;
  color: #16233A;
}
.ct-page .cp-form-card input::placeholder,
.ct-page .cp-form-card textarea::placeholder { color: #9AA8BC; }
.ct-page .cp-info-icon { background: #EAF1FF; border: 1px solid #D6E4FA; }
.ct-page .cp-info-icon svg { stroke: #1D4ED8; }
.ct-page .cp-info-item strong { color: #7A8AA3; }
.ct-page .cp-info-item span { color: #16233A; }
.ct-page .cp-info-item a { color: #1D4ED8; }

/* back-to-top matches the light pages */
.ab-page .back-to-top, .pf-page .back-to-top, .ct-page .back-to-top {
  background: #FFFFFF; border-color: #E3E8F0;
  box-shadow: 0 6px 18px -8px rgba(11,18,32,0.35);
}
.ab-page .back-to-top svg, .pf-page .back-to-top svg, .ct-page .back-to-top svg { stroke: #26344B; }
/* about lead + strong were still carrying dark-mode colours,
   which washed out completely against white */
.ab-page .about-software p.lead   { color: #26344B; }
.ab-page .about-software p strong { color: #0B1220; }
.ab-page .about-software p        { color: #48566B; }
/* contact hero copy sits as direct children of the section, so it
   needs lifting above the positioned image layer */
.ct-page .cp-hero > *:not(.ct-bg) { position: relative; z-index: 2; }

/* ---- contact hero without an image: light treatment ----------
   It was styled dark to sit on the photo; with the image gone it
   becomes a clean white opener.                                */
.ct-page .cp-hero {
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, #EEF4FF 0%, rgba(255,255,255,0) 70%),
    #FFFFFF;
}
.ct-page .cp-hero::before { content: none; }
.ct-page .cp-hero h1 { color: #0B1220; text-shadow: none; }
.ct-page .cp-hero p  { color: #48566B; text-shadow: none; }
.ct-page .cp-pill {
  background: #16388F;
  border-color: rgba(255,255,255,0.16);
  color: #FFFFFF;
}

/* ============================================================
   27. ABOUT — "BASED IN SHARJAH" BAND
   Two columns: copy left, image panel right. Compact, dark navy
   band sitting inside the white page.
   ============================================================ */

.ab-page .shx-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
}

.ab-page .shx-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7FB0FF;
  margin-bottom: 18px;
}
.ab-page .shx-copy h2 {
  color: #FFFFFF;
  font-size: clamp(1.9rem, 1.25rem + 2.1vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  text-shadow: none;
}
.ab-page .shx-copy p {
  color: rgba(219, 231, 250, 0.88);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 52ch;
  text-shadow: none;
}

.ab-page .shx-serving {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 0.9rem;
  color: rgba(190, 210, 240, 0.72);
}

/* image panel — UAE photograph */
.ab-page .shx-visual {
  position: relative;
  min-height: clamp(280px, 27vw, 400px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: #030814;
  background-image: url("../r3 all images/uae.jpg");
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.85);
}
/* soft inner vignette: settles a bright photo into the black box */
.ab-page .shx-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,6,16,0.28) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(0deg, rgba(2,6,16,0.34) 0%, rgba(0,0,0,0) 26%),
    radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 52%, rgba(2,6,16,0.30) 100%);
}

@media (max-width: 900px) {
  .ab-page .shx-grid { grid-template-columns: 1fr; gap: 26px; }
  .ab-page .shx-visual { min-height: 220px; order: -1; }
  .ab-page .shx-copy p { max-width: none; }
}

/* The band is a self-contained black box: inset and cornered like the
   floating header, and held clear of the footer rather than butting into it. */
[data-theme="dark"] .ab-page .section.sharjah-band,
.ab-page .section.sharjah-band {
  position: relative;
  margin-inline: 36px;                        /* matches .header left/right */
  margin-top: clamp(8px, 1.4vw, 20px);
  margin-bottom: clamp(56px, 5.2vw, 88px);    /* gap before the footer */
  padding-block: clamp(46px, 4.6vw, 74px);
  border-radius: 16px;                        /* matches .header radius */
  overflow: hidden;
  background-color: #000000;
  background-image:
    radial-gradient(118% 96% at 10% 0%, rgba(37, 99, 235, 0.17) 0%, rgba(0, 0, 0, 0) 58%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 72px -36px rgba(0, 0, 0, 0.7);
}
.ab-page .sharjah-band .container { max-width: 1240px; }

@media (max-width: 480px) {
  [data-theme="dark"] .ab-page .section.sharjah-band,
  .ab-page .section.sharjah-band {
    margin-inline: 16px;                      /* matches .header at 480px */
    margin-bottom: 44px;
  }
}

/* ============================================================
   29. HEADER ON WIDE SCREENS
   The bar stretches with the viewport but its type is a fixed
   16px, so on a large monitor the nav and logo read small against
   all that width. Scale them with the bar past 1600px. Applies to
   every page, so the five headers stay identical.
   ============================================================ */
@media (min-width: 1600px) {
  .header-inner { padding: 14px 38px; min-height: 68px; }
  .nav-links { gap: 38px; }
  .nav-links a { font-size: 1.08rem; }
  .logo-img { height: 58px !important; min-height: 58px !important; }
}
@media (min-width: 1900px) {
  .header-inner { padding: 16px 46px; min-height: 74px; }
  .nav-links { gap: 44px; }
  .nav-links a { font-size: 1.16rem; }
  .logo-img { height: 62px !important; min-height: 62px !important; }
}

/* ============================================================
   30. RESPONSIVE PASS — touch targets, minimum type, mobile hygiene
   Measured at 360/390/414/768/834/1024/1280/1440/1920. No page
   overflows horizontally at any of those; what follows fixes the
   things that were technically fine but poor to actually use.
   ============================================================ */

/* iOS inflates text in landscape unless told not to */
html {
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
/* stop the grey flash on tap without killing the focus ring */
a, button, .btn, summary {
  -webkit-tap-highlight-color: rgba(37, 99, 235, 0.18);
}

@media (max-width: 1023px) {
  /* The hamburger is THE navigation control below 1024 and it measured
     33x24 — roughly half the 44px minimum. The bars stay 25px wide;
     only the hit area grows. */
  .hamburger {
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  /* footer social icons were 30x30 */
  .social-link { width: 44px; height: 44px; }
  .social-links { gap: 6px; margin-left: -10px; }

  /* footer quick links were 22px tall; pad the row, not the text */
  .footer-links a {
    display: inline-block;
    padding-block: 8px;
  }
  .footer-contact-item a {
    display: inline-block;
    padding-block: 4px;
  }
}

/* Small-label type floor. These sat between 11.2px and 12px, which is
   below comfortable reading size on a phone. Page-scoped because the
   defining rules are compound selectors that out-specify a bare class. */
@media (max-width: 640px) {
  .hm-page .section-title .subtitle,
  .sv-page .section-title .subtitle,
  .ab-page .section-title .subtitle,
  .pf-page .section-title .subtitle,
  .ct-page .section-title .subtitle,
  .ab-page .about-content .subtitle,
  .sv-page .service-detail-content .service-label,
  .sv-page .svc-hero .svc-hero-tag,
  .ct-page .cp-pill,
  .ct-page .cp-info-item strong,
  .hm-page .hero-card .hero-card-pill,
  .ab-page .about-pillars .about-pillar {
    font-size: 0.79rem;   /* 12.6px */
  }
}

/* The footer map is a cross-origin OpenStreetMap embed, so its
   attribution bar can't be restyled — only out-sized. At 132px it ate
   a third of the frame on desktop and half of it on a phone. */
.footer-map-col iframe { height: 168px; }
@media (max-width: 1023px) { .footer-map-col iframe { height: 190px; } }
@media (max-width: 640px)  { .footer-map-col iframe { height: 215px; } }

/* A 1024px iPad in landscape is still a finger, not a mouse. Width alone
   can't tell them apart, so repeat the touch sizing for any coarse
   pointer regardless of viewport width. */
@media (pointer: coarse) {
  .social-link { width: 44px; height: 44px; }
  .social-links { gap: 6px; margin-left: -10px; }
  .footer-links a { display: inline-block; padding-block: 8px; }
  .footer-contact-item a { display: inline-block; padding-block: 4px; }
  .nav-links a { padding-block: 10px; }
}

/* ============================================================
   31. LIGHT / DARK MODE
   Light is the shipped design and needs no attribute. Dark is
   opt-in via <html data-mode="dark">, set by js/mode.js.
   The footer is deliberately excluded: it stays brand navy in
   both modes, as does every dark cinematic hero.
   ============================================================ */
:root {
  --dm-bg:        #0B0F19;
  --dm-surface:   #131A29;
  --dm-surface-2: #0F1522;
  --dm-line:      rgba(255, 255, 255, 0.10);
  --dm-line-2:    rgba(255, 255, 255, 0.22);
  --dm-heading:   #F2F6FC;
  --dm-body:      #A9B6CA;
  --dm-accent:    #7FB0FF;
}

/* ---- the toggle itself ---- */
.mode-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(11, 18, 32, 0.12);
  background: rgba(11, 18, 32, 0.05);
  color: #26344B;
  cursor: pointer;
  padding: 0;
  margin-left: 18px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.mode-toggle:hover { background: rgba(11, 18, 32, 0.10); color: #0B1220; }
.mode-toggle:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.mode-toggle .mode-ic {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* light mode shows the moon, the thing you would switch TO */
.mode-toggle .mode-ic--sun  { display: none; }
[data-mode="dark"] .mode-toggle .mode-ic--sun  { display: block; }
[data-mode="dark"] .mode-toggle .mode-ic--moon { display: none; }

[data-mode="dark"] .mode-toggle {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.08);
  color: #DCE7F8;
}
[data-mode="dark"] .mode-toggle:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* below 1024 the nav is hidden, so the toggle needs to hold its own
   place beside the hamburger rather than collapsing against it */
@media (max-width: 1023px) {
  .mode-toggle { margin-left: auto; margin-right: 12px; }
}

/* swapping mode should be instant, not a cross-fade of every surface */
.mode-switching,
.mode-switching * { transition: none !important; }

/* ============================================================
   DARK MODE - SURFACES
   ============================================================ */
[data-mode="dark"] html body.hm-page,
[data-mode="dark"] html body.sv-page,
[data-mode="dark"] html body.ab-page,
[data-mode="dark"] html body.pf-page,
[data-mode="dark"] html body.ct-page,
[data-mode="dark"] body.hm-page,
[data-mode="dark"] body.sv-page,
[data-mode="dark"] body.ab-page,
[data-mode="dark"] body.pf-page,
[data-mode="dark"] body.ct-page { background: var(--dm-bg); }

[data-mode="dark"] .hm-page .section-light,
[data-mode="dark"] .sv-page .section-light,
[data-mode="dark"] .ab-page .section-light,
[data-mode="dark"] .pf-page .section-light { background: var(--dm-surface-2); }

[data-mode="dark"] .ct-page main,
[data-mode="dark"] .ct-page .contact-page-main,
[data-mode="dark"] .ct-page .cp-body,
[data-mode="dark"] .pf-page .pfx-section,
[data-mode="dark"] .pf-page .pfx-cta { background: var(--dm-bg); }

/* ---- cards and panels ---- */
[data-mode="dark"] .sv-page .sp-feature-card,
[data-mode="dark"] .sv-page .faq-item,
[data-mode="dark"] .pf-page .pfx-show,
[data-mode="dark"] .pf-page .pfx-cta-inner,
[data-mode="dark"] .ct-page .cp-form-card,
[data-mode="dark"] .ct-page .cp-sidebar-card,
[data-mode="dark"] .hm-page .industry-tag,
[data-mode="dark"] .hm-page .industry-tag:hover,
[data-mode="dark"] .ab-page .vm-card,
[data-mode="dark"] .sv-page .service-detail-card {
  background: var(--dm-surface);
  border-color: var(--dm-line);
}
[data-mode="dark"] .sv-page .sp-feature-card:hover,
[data-mode="dark"] .pf-page .pfx-show:hover,
[data-mode="dark"] .hm-page .industry-tag:hover { border-color: var(--dm-line-2); }

/* ---- headings and strong text ---- */
[data-mode="dark"] .hm-page .section-title h2,
[data-mode="dark"] .sv-page .sp-intro-left h2,
[data-mode="dark"] .sv-page .sp-feature-card h4,
[data-mode="dark"] .sv-page .faq-question,
[data-mode="dark"] .sv-page main strong,
[data-mode="dark"] .ab-page .about-software h2,
[data-mode="dark"] .ab-page main strong,
[data-mode="dark"] .ab-page .about-software p strong,
[data-mode="dark"] .ab-page .about-pillar,
[data-mode="dark"] .pf-page .pfx-head h2,
[data-mode="dark"] .pf-page .pfx-show h3,
[data-mode="dark"] .pf-page .pfx-row-num,
[data-mode="dark"] .pf-page .pfx-step h3,
[data-mode="dark"] .pf-page .pfx-cta-inner h2,
[data-mode="dark"] .pf-page main strong,
[data-mode="dark"] .pf-page .pfx-btn-ghost:hover,
[data-mode="dark"] .ct-page .cp-hero h1,
[data-mode="dark"] .ct-page .cp-form-card label,
[data-mode="dark"] .ct-page .cp-sidebar-card h3,
[data-mode="dark"] .ct-page .cp-sidebar-heading,
[data-mode="dark"] .ct-page .cp-info-item span,
[data-mode="dark"] .hm-page .industry-tag { color: var(--dm-heading); }

/* ---- body copy ---- */
[data-mode="dark"] .hm-page .section-title p,
[data-mode="dark"] .sv-page .sp-intro-right p,
[data-mode="dark"] .sv-page .sp-feature-card p,
[data-mode="dark"] .sv-page .faq-answer-inner,
[data-mode="dark"] .ab-page .about-software p,
[data-mode="dark"] .ab-page .about-software p.lead,
[data-mode="dark"] .pf-page .pfx-head p,
[data-mode="dark"] .pf-page .pfx-show p,
[data-mode="dark"] .pf-page .pfx-row p,
[data-mode="dark"] .pf-page .pfx-step p,
[data-mode="dark"] .pf-page .pfx-cta-inner p,
[data-mode="dark"] .ct-page main p,
[data-mode="dark"] .ct-page main li,
[data-mode="dark"] .ct-page .cp-hero p { color: var(--dm-body); }

/* ---- rules, dividers, small chrome ---- */
[data-mode="dark"] .pf-page .pfx-row,
[data-mode="dark"] .pf-page .pfx-row:last-child {
  border-top-color: var(--dm-line);
  border-bottom-color: var(--dm-line);
}
[data-mode="dark"] .pf-page .pfx-tags li {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dm-line);
  color: #C6D4E8;
}
[data-mode="dark"] .pf-page .pfx-step::before { background: var(--dm-bg); }
[data-mode="dark"] .sv-page .sp-feature-icon {
  background: linear-gradient(150deg, rgba(37, 99, 235, 0.24) 0%, rgba(10, 36, 99, 0.42) 100%);
  border-color: rgba(127, 176, 255, 0.26);
}
[data-mode="dark"] .ct-page .cp-info-icon {
  background: rgba(37, 99, 235, 0.20);
  border-color: rgba(127, 176, 255, 0.28);
}
[data-mode="dark"] .ct-page .cp-info-item a,
[data-mode="dark"] .pf-page .pfx-btn-ghost { color: var(--dm-accent); }
[data-mode="dark"] .ct-page .cp-info-item strong,
[data-mode="dark"] .ct-page .cp-form-card .opt { color: #8C9AB2; }

/* ---- form controls ---- */
[data-mode="dark"] .ct-page .cp-form-card input,
[data-mode="dark"] .ct-page .cp-form-card select,
[data-mode="dark"] .ct-page .cp-form-card textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--dm-line-2);
  color: var(--dm-heading);
}
[data-mode="dark"] .ct-page .cp-form-card input::placeholder,
[data-mode="dark"] .ct-page .cp-form-card textarea::placeholder { color: #7E8CA3; }

/* ---- floating controls ---- */
[data-mode="dark"] .hm-page .back-to-top,
[data-mode="dark"] .sv-page .back-to-top,
[data-mode="dark"] .ab-page .back-to-top,
[data-mode="dark"] .pf-page .back-to-top,
[data-mode="dark"] .ct-page .back-to-top {
  background: var(--dm-surface);
  border-color: var(--dm-line);
}
[data-mode="dark"] .hm-page .back-to-top svg,
[data-mode="dark"] .sv-page .back-to-top svg,
[data-mode="dark"] .ab-page .back-to-top svg,
[data-mode="dark"] .pf-page .back-to-top svg,
[data-mode="dark"] .ct-page .back-to-top svg { stroke: var(--dm-heading); }

/* ============================================================
   DARK MODE - HEADER
   The glass goes from frosted white to frosted graphite.
   ============================================================ */
[data-mode="dark"] .header,
[data-mode="dark"] .header.scrolled,
[data-mode="dark"] .hm-page .header, [data-mode="dark"] .hm-page .header.scrolled,
[data-mode="dark"] .sv-page .header, [data-mode="dark"] .sv-page .header.scrolled,
[data-mode="dark"] .ab-page .header, [data-mode="dark"] .ab-page .header.scrolled,
[data-mode="dark"] .pf-page .header, [data-mode="dark"] .pf-page .header.scrolled,
[data-mode="dark"] .ct-page .header, [data-mode="dark"] .ct-page .header.scrolled {
  background: rgba(15, 21, 34, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 10px 34px -16px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-mode="dark"] .nav-links a,
[data-mode="dark"] .hm-page .nav-links a, [data-mode="dark"] .hm-page .header.scrolled .nav-links a,
[data-mode="dark"] .sv-page .nav-links a, [data-mode="dark"] .sv-page .header.scrolled .nav-links a,
[data-mode="dark"] .ab-page .nav-links a,
[data-mode="dark"] .pf-page .nav-links a,
[data-mode="dark"] .ct-page .nav-links a { color: #C3CFE2; }

[data-mode="dark"] .nav-links a:hover,
[data-mode="dark"] .nav-links a.active,
[data-mode="dark"] .hm-page .nav-links a:hover, [data-mode="dark"] .hm-page .nav-links a.active,
[data-mode="dark"] .sv-page .nav-links a:hover, [data-mode="dark"] .sv-page .nav-links a.active,
[data-mode="dark"] .ab-page .nav-links a:hover, [data-mode="dark"] .ab-page .nav-links a.active,
[data-mode="dark"] .pf-page .nav-links a:hover, [data-mode="dark"] .pf-page .nav-links a.active,
[data-mode="dark"] .ct-page .nav-links a:hover, [data-mode="dark"] .ct-page .nav-links a.active { color: #FFFFFF; }

[data-mode="dark"] .hamburger span,
[data-mode="dark"] .hm-page .hamburger span,
[data-mode="dark"] .sv-page .hamburger span,
[data-mode="dark"] .ab-page .hamburger span,
[data-mode="dark"] .pf-page .hamburger span,
[data-mode="dark"] .ct-page .hamburger span,
[data-mode="dark"] .hm-page .header.scrolled .hamburger span,
[data-mode="dark"] .sv-page .header.scrolled .hamburger span { background: #FFFFFF; }

/* the logo artwork is navy; invert it so it reads on the dark glass */
[data-mode="dark"] .header .logo-img,
[data-mode="dark"] .hm-page .header .logo-img,
[data-mode="dark"] .sv-page .header .logo-img,
[data-mode="dark"] .ab-page .header .logo-img,
[data-mode="dark"] .pf-page .header .logo-img,
[data-mode="dark"] .ct-page .header .logo-img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.94;
}

/* ---- dark mode, second pass: surfaces the first sweep missed ---- */
[data-mode="dark"] .hm-page main,
[data-mode="dark"] .sv-page main,
[data-mode="dark"] .ab-page main,
[data-mode="dark"] .pf-page main { background: var(--dm-bg); }

[data-mode="dark"] .sv-page .sp-card,
[data-mode="dark"] .ab-page .value-card,
[data-mode="dark"] .ab-page .about-pillar,
[data-mode="dark"] .ab-page .vm-card {
  background: var(--dm-surface);
  border-color: var(--dm-line);
}

[data-mode="dark"] .sv-page .sp-card h3,
[data-mode="dark"] .sv-page .sp-card h4,
[data-mode="dark"] .ab-page .value-card h3,
[data-mode="dark"] .ab-page .vm-card h3 { color: var(--dm-heading); }

[data-mode="dark"] .sv-page .sp-card p,
[data-mode="dark"] .sv-page .sp-card li,
[data-mode="dark"] .ab-page .value-card p,
[data-mode="dark"] .ab-page .vm-card p,
[data-mode="dark"] .pf-page .pfx-row p,
[data-mode="dark"] .pf-page .pfx-row li { color: var(--dm-body); }

/* the brand blue used for small labels is too dark to read on graphite */
[data-mode="dark"] .pf-page .pfx-eyebrow,
[data-mode="dark"] .pf-page .pfx-show-cat,
[data-mode="dark"] .pf-page .pfx-step-no,
[data-mode="dark"] .ab-page .subtitle,
[data-mode="dark"] .sv-page .service-label,
[data-mode="dark"] .sv-page .faq-item.open .faq-question,
[data-mode="dark"] .ab-page .vm-card .vm-icon svg,
[data-mode="dark"] .ct-page .cp-info-icon svg { color: var(--dm-accent); stroke: var(--dm-accent); }

/* ---- dark mode, third pass: shared section headers and list rows ---- */
[data-mode="dark"] main .section-title h2,
[data-mode="dark"] main .sp-section-header h2,
[data-mode="dark"] main .pf-section-head h2 { color: var(--dm-heading); }

[data-mode="dark"] main .section-title p,
[data-mode="dark"] main .sp-section-header p,
[data-mode="dark"] main .pf-section-head p { color: var(--dm-body); }

[data-mode="dark"] .pf-page .pfx-row,
[data-mode="dark"] .pf-page .pfx-step { color: var(--dm-body); }

/* the toggle is a touch target too */
@media (max-width: 1023px), (pointer: coarse) {
  .mode-toggle { width: 44px; height: 44px; }
  .mode-toggle .mode-ic { width: 21px; height: 21px; }
}

/* ============================================================
   32. HERO TYPE — ONE TREATMENT ACROSS PAGES
   The About hero used .page-hero h1 (3.4rem cap, weight 700),
   while Home used .hero h1 (4.2rem cap, weight 800). Same role,
   two scales. About now takes the Home treatment.
   Contact's h1 was set to var(--font-body) — Inter — which broke
   the Manrope-for-headings rule; corrected here too.
   ============================================================ */
.ab-page .page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.ct-page .cp-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

/* the supporting line under the hero heading, matched to Home */
.ab-page .page-hero > .container > .page-hero-copy p,
.ct-page .cp-hero p {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* mirror Home's two mobile steps so the phone sizes agree as well */
@media (max-width: 600px) {
  .ab-page .page-hero h1,
  .ct-page .cp-hero h1 { font-size: 2.1rem; letter-spacing: -0.6px; }
}
@media (max-width: 480px) {
  .ab-page .page-hero h1,
  .ct-page .cp-hero h1 { font-size: 1.85rem; }
}

/* About's "Enterprise Software Built..." sat at 49.6 while every other
   section heading on the site is on the h2 token. Put it on the token. */
.ab-page .about-content h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

/* the same phone step the other section headings already take */
@media (max-width: 768px) {
  .ab-page .about-content h2 { font-size: clamp(1.5rem, 5.5vw, 1.9rem); }
}

/* ============================================================
   33. LIGHT-MODE LEFTOVERS FROM THE DARK BUILD
   These rules were written when the pages had dark backdrops and
   were never revisited when the pages went white, so the text was
   white-on-white. Found by a contrast audit, not by eye.
   ============================================================ */
.ab-page .section-title h2 { color: #0B1220; text-shadow: none; }
.ab-page .section-title p  { color: #48566B; text-shadow: none; }

/* the About outline button was light-on-light glass */
.ab-page .btn-outline-blue {
  background: #FFFFFF;
  border-color: #C7D6EE;
  color: #16388F;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.ab-page .btn-outline-blue:hover {
  background: #16388F;
  border-color: #16388F;
  color: #FFFFFF;
}

/* ---- dark mode counterparts ---- */
[data-mode="dark"] .ab-page .section-title h2 { color: var(--dm-heading); }
[data-mode="dark"] .ab-page .section-title p  { color: var(--dm-body); }
[data-mode="dark"] .ab-page .btn-outline-blue {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dm-line-2);
  color: var(--dm-accent);
}
[data-mode="dark"] .ab-page .btn-outline-blue:hover {
  background: rgba(127, 176, 255, 0.16);
  border-color: var(--dm-accent);
  color: #FFFFFF;
}

/* the contact form's success panel kept dark text on a dark card */
[data-mode="dark"] .ct-page .form-success h3 { color: var(--dm-heading); }
[data-mode="dark"] .ct-page .form-success p  { color: var(--dm-body); }

/* ---- dark mode: hamburger bars once the header is scrolled ----
   style.css sets .header.scrolled .hamburger span to navy at (0,3,1),
   which out-specified the mode rule on About, Portfolio and Contact,
   leaving the bars invisible against the dark glass. */
[data-mode="dark"] .ab-page .header.scrolled .hamburger span,
[data-mode="dark"] .pf-page .header.scrolled .hamburger span,
[data-mode="dark"] .ct-page .header.scrolled .hamburger span { background: #FFFFFF; }

/* ------------------------------------------------------------
   Dark mode: the header must look the SAME scrolled or not.
   Previously the glass sat at 74-82% in both states, so whatever
   the page scrolled under it — a bright photo, a white section —
   bled through and the nav appeared to change colour. It never
   did; the backdrop behind it did.

   Both states now share one opaque graphite panel, one border and
   one shadow, so scrolling changes nothing about the header.
   ------------------------------------------------------------ */
[data-mode="dark"] .header,
[data-mode="dark"] .header.scrolled,
[data-mode="dark"] .hm-page .header, [data-mode="dark"] .hm-page .header.scrolled,
[data-mode="dark"] .sv-page .header, [data-mode="dark"] .sv-page .header.scrolled,
[data-mode="dark"] .ab-page .header, [data-mode="dark"] .ab-page .header.scrolled,
[data-mode="dark"] .pf-page .header, [data-mode="dark"] .pf-page .header.scrolled,
[data-mode="dark"] .ct-page .header, [data-mode="dark"] .ct-page .header.scrolled {
  background: rgba(13, 18, 30, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 10px 34px -16px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* nav colour is already state-independent; state it explicitly so a
   future .scrolled rule can't reintroduce the shift */
[data-mode="dark"] .header .nav-links a,
[data-mode="dark"] .header.scrolled .nav-links a,
[data-mode="dark"] .hm-page .header.scrolled .nav-links a,
[data-mode="dark"] .sv-page .header.scrolled .nav-links a,
[data-mode="dark"] .ab-page .header.scrolled .nav-links a,
[data-mode="dark"] .pf-page .header.scrolled .nav-links a,
[data-mode="dark"] .ct-page .header.scrolled .nav-links a { color: #C3CFE2; }

[data-mode="dark"] .header .nav-links a:hover,
[data-mode="dark"] .header .nav-links a.active,
[data-mode="dark"] .header.scrolled .nav-links a:hover,
[data-mode="dark"] .header.scrolled .nav-links a.active,
[data-mode="dark"] .hm-page .header.scrolled .nav-links a.active,
[data-mode="dark"] .sv-page .header.scrolled .nav-links a.active,
[data-mode="dark"] .ab-page .header.scrolled .nav-links a.active,
[data-mode="dark"] .pf-page .header.scrolled .nav-links a.active,
[data-mode="dark"] .ct-page .header.scrolled .nav-links a.active { color: #FFFFFF; }

[data-mode="dark"] .header .hamburger span,
[data-mode="dark"] .header.scrolled .hamburger span { background: #FFFFFF; }

[data-mode="dark"] .header .logo-img,
[data-mode="dark"] .header.scrolled .logo-img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.94;
}