/* ============================================================================
   SHS · World-class polish layer
   Adds: a11y affordances, reduced-motion, focus-visible, back-to-top,
   form validation states, scrollbar styling, print stylesheet, small fixes.
   Loaded AFTER styles.css so it wins specificity ties.
   ============================================================================ */

/* -- A11Y: Skip link --------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  padding: 12px 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid var(--ember);
  transition: top 0.3s var(--ease);
}

/* ============================================================================
   V7.3 - REBALANCED BRAND RATIO THEME
   User-directed weighting built from the approved SHS Brand Guide palette:
   50% Midnight Navy · 30% White · 15% Smart Energy Gold · 5% Tech/Royal Blue
   The active cascade is repeated after the legacy V7.2 block at file end.
   ============================================================================ */
@media screen {
  /* White is restored as the primary reading and content surface. */
  .section-ivory {
    background:
      radial-gradient(circle at 90% 8%, rgba(245, 158, 11, .08), transparent 26%),
      var(--brand-white);
    color: var(--navy-blue);
    box-shadow: inset 0 4px 0 rgba(11, 45, 82, .9);
  }
  .section-ivory .section-head :is(h1, h2, h3, h4),
  .section-ivory > .wrap > :is(h1, h2, h3, h4),
  .section-ivory .solution-family-head h2,
  .section-ivory .service-story-head h2 {
    color: var(--navy-blue);
  }
  .section-ivory .section-head :is(p, .lead),
  .section-ivory > .wrap > .lead,
  .section-ivory .solution-family-head p,
  .section-ivory .service-story-head .lead {
    color: var(--ink-soft);
  }
  .section-ivory :is(.eyebrow, .label-ink),
  .section-ivory .section-head em,
  .section-ivory .solution-family-head em {
    color: var(--brand-gold);
  }
  .section-ivory .eyebrow::before { background: var(--brand-gold); }
  .section-ivory .solution-family-head > a {
    border-color: rgba(11, 45, 82, .28);
    background: var(--brand-white);
    color: var(--navy-blue);
  }
  .section-ivory .solution-family-head > a:hover {
    border-color: var(--royal-blue);
    background: var(--royal-blue);
    color: var(--brand-white);
  }

  /* Service stories contribute to the 30% white layer and keep imagery crisp. */
  .service-story-section {
    background:
      linear-gradient(90deg, var(--royal-blue) 0 5px, transparent 5px),
      radial-gradient(circle at 94% 6%, rgba(245, 158, 11, .09), transparent 28%),
      var(--brand-white);
  }
  .service-story-section .service-story-head h2 { color: var(--navy-blue); }
  .service-story-section .service-story-head .lead { color: var(--ink-soft); }
  .service-story-section .service-story-head .eyebrow { color: var(--brand-gold); }
  .service-story-section .service-story-head .eyebrow::before { background: var(--brand-gold); }
  .service-story-section .service-story-card {
    background: var(--brand-white);
    border-color: rgba(11, 45, 82, .16);
    box-shadow: 0 18px 50px rgba(7, 30, 54, .10);
  }

  /* White cards sit cleanly on both dark navy and light reading sections. */
  .section-ivory :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
    .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
    .connected-principles article, .connected-feature, .bathroom-card,
    .og-service-card, .og-process article) {
    background: var(--brand-white);
    border-color: rgba(11, 45, 82, .14);
    box-shadow: 0 18px 50px rgba(7, 30, 54, .09);
  }
  .section-ivory :is(.sl-features, .logo-grid, .partners, .og-service-grid) {
    border-color: rgba(11, 45, 82, .12);
    background: rgba(11, 45, 82, .08);
  }

  /* Royal blue is a restrained 5% supporting character, not a main field. */
  .manifesto {
    background:
      radial-gradient(circle at 86% 18%, rgba(245, 158, 11, .18), transparent 34%),
      linear-gradient(145deg, var(--royal-blue) 0%, #0D3A69 100%);
  }
  .manifesto :is(h1, h2, h3, h4, p, .lead, .label-ink) { color: var(--brand-white); }
  .manifesto :is(.eyebrow, .manifesto-decorator),
  .manifesto-quote em { color: var(--brand-gold) !important; }
  .manifesto-side { border-color: rgba(255, 255, 255, .24); }

  /* Gold remains a meaningful surface, reduced from 20% to about 15%. */
  .trust-bar-pro,
  .trust-bar,
  .realisation-section {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 48%),
      var(--brand-gold);
  }

  /* Keep the dominant 50% navy layer visually calm and authoritative. */
  .section-paper {
    background:
      radial-gradient(circle at 92% 10%, rgba(245, 158, 11, .10), transparent 28%),
      linear-gradient(145deg, var(--navy-blue) 0%, #092847 100%);
  }
  .footer {
    background:
      radial-gradient(circle at 12% 10%, rgba(11, 45, 82, .58), transparent 34%),
      var(--navy-blue);
  }
}

/* ============================================================================
   V7.4 - GOLD RIBBON & HIGH-CONTRAST BLUE SURFACES
   Gold is reserved for ribbons, rules, icons, controls and short text accents.
   It no longer sits behind full content sections. Blue surfaces use white copy.
   ============================================================================ */
@media screen {
  /* Remove the previous full-width gold fields. The slim inset rule keeps the
     premium gold presence without competing with the information hierarchy. */
  .trust-bar-pro,
  .trust-bar {
    position: relative;
    background:
      linear-gradient(180deg, var(--brand-white) 0%, #F7F8FB 100%);
    color: var(--navy-blue);
    border-top: 0;
    border-bottom: 1px solid rgba(7, 30, 54, .12);
    box-shadow: inset 0 6px 0 var(--brand-gold);
  }
  .trust-bar-pro :is(h2, h3, h4, p, span),
  .trust-bar :is(h2, h3, h4, p, span) {
    color: var(--navy-blue);
  }
  .trust-bar-pro :is(.eyebrow, .tb-meta, .cred-text small),
  .trust-bar :is(.eyebrow, .tb-meta, .cred-text small) {
    color: var(--brand-gold);
  }
  .trust-bar-pro .eyebrow::before,
  .trust-bar .eyebrow::before {
    background: var(--brand-gold);
  }
  .trust-bar-pro :is(.cred, .cert-badge, .partner),
  .trust-bar :is(.cred, .cert-badge, .partner) {
    background: var(--brand-white);
    border-color: rgba(7, 30, 54, .13);
  }

  .realisation-section {
    position: relative;
    background:
      radial-gradient(circle at 92% 12%, rgba(11, 45, 82, .06), transparent 30%),
      var(--brand-white);
    color: var(--navy-blue);
    box-shadow: inset 0 6px 0 var(--brand-gold);
  }
  .realisation-copy :is(h2, h3, p, .lead) { color: var(--navy-blue); }
  .realisation-copy .eyebrow { color: var(--brand-gold); }
  .realisation-copy .eyebrow::before { background: var(--brand-gold); }
  .realisation-list li {
    background: var(--brand-white);
    border-color: rgba(7, 30, 54, .13);
    color: var(--ink-soft);
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, .9);
  }

  /* Navy and royal blue remain the principal backgrounds. White is the default
     reading colour; gold is limited to selected words and micro-labels. */
  :is(.hero, .page-hero, .case-hero, .section-deep, .section-paper,
      .manifesto, .cta-strip, .one-card-section, .grms-section,
      .connected-feature-dark, .solution-viz, .cs-media, .og-case-brand,
      .footer) {
    color: var(--brand-white);
  }
  :is(.hero, .page-hero, .case-hero, .section-deep, .section-paper,
      .manifesto, .cta-strip, .one-card-section, .grms-section,
      .connected-feature-dark, .solution-viz, .cs-media, .og-case-brand,
      .footer)
      :is(h1, h2, h3, h4, h5, h6) {
    color: var(--brand-white);
  }
  :is(.hero, .page-hero, .case-hero, .section-deep, .section-paper,
      .manifesto, .cta-strip, .one-card-section, .grms-section,
      .connected-feature-dark, .solution-viz, .cs-media, .og-case-brand,
      .footer)
      :is(p, .lead, li, small) {
    color: rgba(255, 255, 255, .78);
  }
  :is(.hero, .page-hero, .case-hero, .section-deep, .section-paper,
      .manifesto, .cta-strip, .one-card-section, .grms-section,
      .connected-feature-dark, .solution-viz, .cs-media, .og-case-brand,
      .footer)
      :is(em, .eyebrow, .label-ink, .solution-item-num,
          .cta-contact-label, .page-hero-meta-val em) {
    color: var(--brand-gold);
  }
  :is(.section-paper, .section-deep, .manifesto, .cta-strip,
      .one-card-section, .grms-section) {
    border-top-color: rgba(245, 158, 11, .78);
    box-shadow: inset 0 4px 0 rgba(245, 158, 11, .88);
  }

  /* Preserve dark-blue text inside every white content card nested in a blue
     section; this prevents the parent colour rule from washing out cards. */
  :is(.section-paper, .section-deep, .manifesto, .one-card-section, .grms-section)
    :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
        .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
        .connected-principles article, .connected-feature:not(.connected-feature-dark),
        .bathroom-card, .og-service-card, .og-process article, .cred, .partner,
        .logo-cell, .realisation-list li, .guest-journey-gallery figure) {
    color: var(--navy-blue);
  }
  :is(.section-paper, .section-deep, .manifesto, .one-card-section, .grms-section)
    :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
        .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
        .connected-principles article, .connected-feature:not(.connected-feature-dark),
        .bathroom-card, .og-service-card, .og-process article, .cred, .partner,
        .logo-cell, .realisation-list li, .guest-journey-gallery figure)
    :is(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--navy-blue);
  }
  :is(.section-paper, .section-deep, .manifesto, .one-card-section, .grms-section)
    :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
        .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
        .connected-principles article, .connected-feature:not(.connected-feature-dark),
        .bathroom-card, .og-service-card, .og-process article, .cred, .partner,
        .logo-cell, .realisation-list li, .guest-journey-gallery figure)
    :is(p, .lead, li, small) {
    color: var(--ink-soft);
  }

  /* A refined ribbon language: short gold strokes, not gold canvases. */
  .section-paper,
  .manifesto,
  .one-card-section,
  .grms-section,
  .cta-strip,
  .footer {
    border-top: 4px solid var(--brand-gold);
  }
  .section-paper .section-head,
  .manifesto-inner,
  .one-card-section .section-head,
  .grms-section .section-head {
    position: relative;
  }
  .section-paper .section-head::after,
  .manifesto-inner::after,
  .one-card-section .section-head::after,
  .grms-section .section-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -28px;
    width: clamp(72px, 9vw, 138px);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-gold), rgba(245, 158, 11, 0));
    pointer-events: none;
  }

  /* Gold buttons remain intentionally small, high-value highlights. */
  :is(.btn-hero, .nav-cta, .floating-cta) {
    background: var(--brand-gold);
    color: var(--navy-blue);
  }
  :is(.btn-hero, .nav-cta, .floating-cta):hover {
    background: var(--orange-bright);
    color: var(--navy-blue);
  }
}
.skip-link:focus { top: 16px; outline: none; }

/* -- A11Y: Focus-visible styles --------------------------------------------- */
/* Remove default outlines — we supply our own visible-only focus ring. */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Inside dark surfaces the ember ring stays visible — no override needed. */
.btn-hero:focus-visible,
.nav-cta:focus-visible {
  outline-offset: 4px;
}

/* -- A11Y: reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  [data-stagger] .w { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .hero-meta-top .live::before { animation: none !important; }
}

/* -- Scrollbar styling ------------------------------------------------------ */
html {
  scrollbar-color: var(--clay) var(--ivory-deep);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ivory-deep); }
::-webkit-scrollbar-thumb {
  background: var(--stone);
  border-radius: 100px;
  border: 2px solid var(--ivory-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--clay); }

/* -- Hero layout: better breakpoint for the right-column stats -------------- */
@media (max-width: 1200px) and (min-width: 1025px) {
  .hero-inner { grid-template-columns: 1fr 300px; gap: 56px; }
  .hero-stat-val { font-size: 36px; }
}

/* -- Back-to-top button ----------------------------------------------------- */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition: all 0.35s var(--ease);
  z-index: 90;
  box-shadow: 0 10px 30px -10px rgba(14, 27, 44, 0.5);
  cursor: pointer;
}
.to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.to-top:hover {
  background: var(--clay);
  transform: translateY(-3px) scale(1);
}
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .to-top { width: 46px; height: 46px; right: 16px; bottom: 16px; }
}

/* -- Form validation states ------------------------------------------------- */
/* Only visualize invalid AFTER the user has interacted (JS toggles .was-invalid
   on blur). This avoids showing red borders on empty required fields at page
   load — which was the problem with the naive :invalid selector. */
.form-wrap input.was-invalid,
.form-wrap textarea.was-invalid,
.form-wrap select.was-invalid {
  border-color: var(--rose);
  background: rgba(181, 74, 54, 0.04);
}
.form-wrap input.was-invalid:focus,
.form-wrap textarea.was-invalid:focus,
.form-wrap select.was-invalid:focus {
  box-shadow: 0 0 0 3px rgba(181, 74, 54, 0.15);
}
.form-wrap input,
.form-wrap select,
.form-wrap textarea {
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  box-shadow: 0 0 0 3px rgba(198, 93, 47, 0.12);
}
/* Inputs need a placeholder present for the :not(:placeholder-shown) trick */
.form-wrap input::placeholder,
.form-wrap textarea::placeholder {
  color: rgba(14, 27, 44, 0.35);
}

/* Button: loading + success states */
.form-wrap button {
  position: relative;
  transition: background 0.3s, transform 0.2s;
  min-width: 220px;
  border-radius: 100px;
}
.form-wrap button[disabled] {
  background: var(--stone);
  cursor: not-allowed;
}
.form-wrap button.loading span.btn-label { opacity: 0; }
.form-wrap button.loading::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(245, 241, 234, 0.3);
  border-top-color: var(--ivory);
  border-radius: 50%;
  animation: form-spin 0.8s linear infinite;
}
@keyframes form-spin { to { transform: rotate(360deg); } }

/* Success state */
.form-success {
  display: none;
  padding: 32px;
  background: var(--ink);
  color: var(--ivory);
  border-left: 3px solid var(--ember);
  border-radius: 6px;
  margin-top: 24px;
}
.form-success.show { display: block; animation: form-success-in 0.5s var(--ease); }
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-success .kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}
.form-success h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--ivory);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.form-success p {
  color: rgba(245, 241, 234, 0.75);
  font-size: 15px;
  line-height: 1.55;
}
.form-success em { color: var(--ember); font-style: italic; }

/* Inline field-level error badge (injected by JS) */
.field-error {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-top: 6px;
  display: block;
  min-height: 14px;
}

/* -- Main landmark -- ensure padding not shifted -- */
main { display: block; }

/* -- External-link indicator ------------------------------------------------ */
/* Visual affordance that tel:/mailto: links are interactive */
.cta-contact a,
.footer-col a[href^="tel:"],
.footer-col a[href^="mailto:"] {
  transition: color 0.2s;
}

/* -- Print stylesheet ------------------------------------------------------- */
@media print {
  .nav, .to-top, .marquee, .cta-strip, .hero-grain, .hero-noise, .hero-lines,
  .nav-burger, .skip-link, .jumpnav { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .cta-strip, .section-deep, .page-hero {
    background: #fff !important;
    color: #000 !important;
    padding: 24px 0 !important;
  }
  .hero-title, .page-hero h1, .cta-inner h2,
  .section-deep h1, .section-deep h2, .section-deep h3, .section-deep h4 {
    color: #000 !important;
  }
  .hero-title em, .page-hero h1 em, .cta-inner h2 em { color: #C65D2F !important; }
  .section { padding: 32px 0 !important; page-break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -- Selection ink on light backgrounds tuned -- */
::selection { background: var(--ember); color: var(--ink); }

/* -- Small fix: the store page's custom <style> uses `.active` links without
      matching the site nav active color on dark backgrounds — covered by
      nav.on-dark .nav-links a.active already; no change needed. ------------ */

/* -- Nav: smoother transition for ultra-wide viewports ---------------------- */
@media (min-width: 1441px) {
  .wrap { max-width: 1440px; }
}

/* -- Case covers: ensure min-height on mobile --------------------------------*/
@media (max-width: 640px) {
  .case-cover { min-height: 260px; }
  .case.wide .case-cover { min-height: 220px; }
}

/* -- Manifesto decorator: hide on narrow to avoid overlap ------------------- */
@media (max-width: 640px) {
  .manifesto-decorator { display: none; }
}

/* -- Leader cards with real photos ----------------------------------------- */
.leader-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ivory-deep);
  margin-bottom: 24px;
  filter: grayscale(15%) contrast(1.03);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
  display: block;
}
.leader:hover .leader-photo {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.01);
}

/* Featured executive card spanning the full row */
.leader-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 48px;
  align-items: start;
  padding: 48px;
  background: var(--ink);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
  border: none;
}
.leader-featured::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(198, 93, 47, 0.35) 0%, transparent 55%);
  pointer-events: none;
}
.leader-featured > * { position: relative; z-index: 1; }
.leader-featured .leader-photo {
  margin-bottom: 0;
  filter: grayscale(0%);
  aspect-ratio: 4 / 5;
}
.leader-featured h4 {
  color: var(--ivory);
  font-size: clamp(28px, 3vw, 42px);
  margin-bottom: 12px;
}
.leader-featured .leader-role {
  color: var(--ember);
  font-size: 11px;
  margin-bottom: 20px;
}
.leader-featured p {
  color: rgba(245, 241, 234, 0.75);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 20px;
  max-width: 68ch;
}
.leader-featured .leader-creds {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  line-height: 1.8;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid rgba(245, 241, 234, 0.14);
}
.leader-featured .leader-creds strong { color: var(--ember); font-weight: 500; }
.leader-featured-ceo::after {
  content: 'Chief Executive Officer';
  position: absolute;
  top: 24px; right: 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ember);
  opacity: 0.8;
}
@media (max-width: 840px) {
  .leader-featured {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 28px;
  }
  .leader-featured .leader-photo { aspect-ratio: 1 / 1; max-width: 320px; }
  .leader-featured-ceo::after { display: none; }
}

/* Small leader card overrides so photo replaces initials avatar */
.leader:has(.leader-body) { padding: 0; overflow: hidden; }
.leader-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.leader-body h4 { margin-bottom: 6px; }
.leader-body .leader-role { margin-bottom: 14px; }

/* Full 20-up team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  position: relative;
}
.team-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--clay);
  z-index: 2;
  transition: width 0.4s var(--ease);
}
.team-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 20px 40px -20px rgba(14, 27, 44, 0.2);
}
.team-card:hover::before { width: 100%; }

.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--ivory-deep);
  filter: grayscale(20%);
  transition: filter 0.5s var(--ease);
  display: block;
}
.team-card:hover .team-photo { filter: grayscale(0%); }

.team-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.team-body h4 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--ink);
}
.team-body .role {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clay);
  line-height: 1.5;
  min-height: 28px;
}
.team-body .bio {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 12px;
  flex: 1;
}

/* Hide per request when a card marks itself as "compact" */
.team-card.compact .team-body .bio { display: none; }

/* Credentials pill */
.team-card .creds {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--stone);
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* -- Logo grid (clients + partners) ---------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.logo-grid .logo-cell {
  background: var(--ivory);
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  transition: background 0.3s var(--ease);
}
.logo-grid .logo-cell:hover { background: var(--paper); }
.logo-grid .logo-cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(25%);
  opacity: 0.88;
  transition: filter 0.4s, opacity 0.4s;
}
.logo-grid .logo-cell:hover img { filter: grayscale(0%); opacity: 1; }
@media (max-width: 1024px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* Partner grid variant — lighter bg, used on paper sections */
.section-paper .logo-grid { background: var(--line); }
.section-paper .logo-grid .logo-cell { background: var(--paper); }

/* -- Case study detail rows ----------------------------------------------- */
.casestudy {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}
.casestudy:last-of-type { border-bottom: none; }
.casestudy.reverse { grid-template-columns: 1fr 1.1fr; }
.casestudy.reverse .cs-text { order: 2; }
.casestudy.reverse .cs-media { order: 1; }
.cs-media {
  background: var(--ink);
  color: var(--ivory);
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 440px;
}
.cs-media::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(198, 93, 47, 0.32) 0%, transparent 55%);
  pointer-events: none;
}
.cs-media > * { position: relative; z-index: 1; }
.cs-client-logo {
  display: block;
  max-width: 140px;
  height: auto;
  background: var(--ivory);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 24px;
}
.cs-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.cs-headline {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ivory);
}
.cs-headline em { color: var(--ember); }
.cs-sub {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ivory);
  margin-top: 20px;
}
.cs-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  margin-top: 16px;
}
.cs-text .eyebrow { margin-bottom: 18px; }
.cs-text h3 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}
.cs-text h3 em { color: var(--clay); font-style: italic; }
.cs-text p { font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
.cs-facts {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.cs-fact {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--line-faint);
}
.cs-fact:last-child { border-bottom: none; }
.cs-fact dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 2px;
}
.cs-fact dd { color: var(--ink); font-weight: 500; }
.cs-fact dd em { color: var(--clay); font-style: italic; }
.cs-quote {
  margin-top: 24px;
  padding: 20px 24px;
  border-left: 3px solid var(--ember);
  background: var(--paper);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.cs-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
@media (max-width: 900px) {
  .casestudy, .casestudy.reverse { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .casestudy.reverse .cs-text, .casestudy.reverse .cs-media { order: initial; }
  .cs-media { min-height: 320px; padding: 32px 28px; }
}

/* -- Named-clients marquee (portfolio) ------------------------------------ */
.clients-marquee-section {
  background: var(--paper);
  padding: 32px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Division card backgrounds — added for home page enhancement */
.div-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.div-card.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  z-index: -1;
  transition: opacity 0.45s var(--ease), transform 0.8s var(--ease);
}
.div-card.has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 27, 44, 0.75) 0%, rgba(11, 45, 82, 0.65) 100%);
  z-index: -1;
  pointer-events: none;
}
.div-card.has-bg:hover::before { opacity: 0.42; transform: scale(1.04); }
.div-card.bg-network::before      { background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776702/shs-assets/assets/backgrounds/network.jpg'); }
.div-card.bg-cyber::before        { background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776702/shs-assets/assets/backgrounds/cybersecurity.jpg'); }
.div-card.bg-energy::before       { background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776701/shs-assets/assets/backgrounds/solar.jpg'); }
.div-card.bg-spaces::before       { background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776703/shs-assets/assets/backgrounds/space.jpg'); }
.div-card.bg-operate::before      { background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776701/shs-assets/assets/backgrounds/build-operate.jpg'); }
.div-card.bg-smart-hotel::before  { background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776701/shs-assets/assets/backgrounds/smart-hotel.jpg'); }
.div-card.has-bg,
.div-card.has-bg h3,
.div-card.has-bg h3 em,
.div-card.has-bg p,
.div-card.has-bg .div-num,
.div-card.has-bg .div-arrow { color: var(--ivory); }
.div-card.has-bg h3 em { color: var(--ember); }
.div-card.has-bg .div-num { color: var(--ember); }
.div-card.has-bg p { color: rgba(245,241,234,0.82); }
.div-card.has-bg .div-tags span {
  background: rgba(245, 241, 234, 0.08);
  border-color: rgba(245, 241, 234, 0.22);
  color: rgba(245, 241, 234, 0.92);
}

/* Case cards on the home page — background-image variant */
.case-cover-inner.has-photo {
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}
.case-cover-inner.has-photo > * { position: relative; z-index: 1; }
.case-cover-inner.has-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 27, 44, 0.35) 0%, rgba(14, 27, 44, 0.88) 100%);
  z-index: 0;
}

/* Case-study media with real photo backgrounds */
.cs-media.cs-media-photo {
  background-size: cover;
  background-position: center;
  position: relative;
}
.cs-media.cs-media-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(14, 27, 44, 0.72) 0%, rgba(14, 27, 44, 0.92) 100%);
  z-index: 0;
}
.cs-media.cs-media-photo > * { position: relative; z-index: 1; }
.cs-media.cs-media-photo::after { background: none; } /* override the old radial */

/* ===== LOGO IN NAV & FOOTER ===== */
.nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
}
.nav.on-dark .nav-logo-img {
  filter: brightness(1.02);
}
@media (max-width: 720px) {
  .nav-logo-img { height: 36px; }
}

/* ---- V6: original service-story galleries ---- */
.service-story-section {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 124px) 0;
  background:
    radial-gradient(circle at 92% 4%, rgba(20, 184, 214, .12), transparent 32%),
    linear-gradient(180deg, #f7f4ee 0%, #fff 100%);
}
.service-story-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
  gap: clamp(28px, 6vw, 88px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.service-story-head h2 {
  max-width: 760px;
  margin-top: 20px;
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--midnight);
}
.service-story-head h2 em { color: var(--orange); }
.service-story-head .lead { color: var(--ink-soft); }
.service-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
.service-story-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(7, 30, 54, .11);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(7, 30, 54, .08);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(7, 30, 54, .14);
}
.service-story-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--midnight);
}
.service-story-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.service-story-card:hover .service-story-media img { transform: scale(1.035); }
.service-story-body {
  position: relative;
  padding: 30px 28px 32px;
}
.service-story-mark {
  position: absolute;
  top: -24px;
  right: 22px;
  width: 48px;
  height: 48px;
  padding: 8px;
  object-fit: contain;
  border: 4px solid #fff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(7, 30, 54, .16);
}
.service-story-step {
  display: block;
  margin-bottom: 13px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}
.service-story-card h3 {
  padding-right: 38px;
  font-family: var(--f-display);
  font-size: clamp(23px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--midnight);
}
.service-story-card p {
  margin-top: 13px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
@media (max-width: 960px) {
  .service-story-head { grid-template-columns: 1fr; }
  .service-story-grid { grid-template-columns: 1fr; }
  .service-story-card { display: grid; grid-template-columns: minmax(260px, .9fr) 1fr; }
  .service-story-media { aspect-ratio: auto; min-height: 300px; }
  .service-story-body { align-self: center; }
}
@media (max-width: 620px) {
  .service-story-section { padding: 68px 0; }
  .service-story-card { display: block; }
  .service-story-media { aspect-ratio: 16 / 9; min-height: 0; }
  .service-story-body { padding: 28px 22px 26px; }
}

/* ---- Hierarchical solutions mega-menu ---- */
.dropdown-menu.solution-mega {
  width: min(860px, calc(100vw - 44px));
  max-width: 860px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 8%, rgba(39, 194, 255, .13), transparent 32%),
    rgba(7, 30, 54, .985);
}
.solution-mega > .dropdown-kicker {
  grid-column: 1 / -1;
  padding: 2px 4px 8px;
  color: rgba(255,255,255,.48);
}
.nav-service-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
}
.solution-mega a.nav-group-head {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 13px 13px 0 0;
}
.solution-mega a.nav-group-head img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  padding: 7px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
}
.solution-mega a.nav-group-head span { gap: 2px; }
.solution-mega a.nav-group-head small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255,255,255,.56);
}
.solution-mega a.nav-group-head b {
  color: var(--orange);
  font-size: 16px;
  font-weight: 400;
}
.solution-mega .nav-group-links {
  display: grid;
  gap: 3px;
  padding-top: 7px;
}
.solution-mega .nav-group-links a {
  padding: 10px 11px;
  border-radius: 13px;
}
.solution-mega .nav-group-links a strong { font-size: 13px; }
.solution-mega .nav-group-links a span {
  font-size: 10.5px;
  line-height: 1.42;
}
.solution-mega a.is-current {
  border-color: rgba(39,194,255,.42);
  background: rgba(39,194,255,.10);
}
.nav-service-group-secondary {
  grid-column: 1 / -1;
  padding: 10px 12px 12px;
}
.nav-group-label {
  padding: 5px 8px 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.solution-mega .nav-group-links.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 0;
}

/* ---- Hotel PMS page components ---- */
.service-brand-chip {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 7px 11px 7px 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: rgba(7,30,54,.34);
  color: rgba(255,255,255,.78);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.service-brand-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.hero-proof-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-proof-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.hero-proof-list span {
  color: rgba(255,255,255,.56);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero-proof-list strong {
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px,3vw,38px);
  font-weight: 400;
  line-height: 1;
}
.delivery-steps {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--line);
  background: var(--line);
}
.delivery-step {
  min-height: 260px;
  padding: 30px 26px;
  background: var(--white);
}
.delivery-step > span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 46px;
  border-radius: 50%;
  background: var(--midnight);
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 10px;
}
.delivery-step h3,
.project-proof-card h3 {
  font-family: 'DM Serif Display',serif;
  font-size: 24px;
  font-weight: 400;
}
.delivery-step p,
.project-proof-card p {
  margin-top: 11px;
  color: var(--stone);
  font-size: 14px;
  line-height: 1.7;
}
.project-proof-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-top: 44px;
}
.project-proof-card {
  display: flex;
  min-height: 290px;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--midnight);
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.project-proof-card:hover {
  transform: translateY(-5px);
  border-color: rgba(245,158,11,.4);
  box-shadow: 0 22px 50px rgba(7,30,54,.11);
}
.project-proof-card > span {
  margin-bottom: 44px;
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.project-proof-card b {
  margin-top: auto;
  padding-top: 20px;
  color: var(--tech-blue);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.service-path-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.service-path-links a {
  padding: 12px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--tech-blue);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.service-path-links a:hover { border-color: var(--orange); color: var(--orange); }
.hotel-robotics-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(39,194,255,.12), transparent 34%),
    var(--midnight);
}
.hotel-robotics-band .section-head h2 { color: #fff; }
.hotel-robotics-band .section-head .lead { color: rgba(255,255,255,.72); }
.robotics-product-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 44px;
}
.robotics-product {
  min-height: 430px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  color: #fff;
  backdrop-filter: blur(12px);
}
.robotics-product > span {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin-bottom: 48px;
  border: 1px solid rgba(39,194,255,.45);
  border-radius: 50%;
  color: #7ee7ff;
  font-family: var(--f-mono);
  font-size: 10px;
}
.robotics-product h3 {
  font-family: 'DM Serif Display',serif;
  font-size: 26px;
  font-weight: 400;
}
.robotics-product p {
  margin-top: 12px;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.7;
}
.robotics-product ul {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.robotics-product li {
  position: relative;
  padding-left: 17px;
  color: rgba(255,255,255,.8);
  font-size: 12px;
  line-height: 1.5;
}
.robotics-product li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.luggage-porter-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(39,194,255,.1), transparent 30%),
    linear-gradient(180deg,#f7f4ee 0%,#fff 100%);
}
.luggage-porter-visuals {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(16px,2.5vw,30px);
  margin-top: 44px;
}
.luggage-porter-visuals-six {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.luggage-porter-visual {
  overflow: hidden;
  border: 1px solid rgba(7,30,54,.11);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 65px rgba(7,30,54,.11);
}
.luggage-porter-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.luggage-porter-visual figcaption {
  display: grid;
  gap: 10px;
  padding: 24px 26px 28px;
}
.luggage-porter-visual figcaption span {
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.luggage-porter-visual figcaption strong {
  color: var(--midnight);
  font-family: 'DM Serif Display',serif;
  font-size: clamp(20px,2vw,27px);
  font-weight: 400;
  line-height: 1.25;
}
.porter-access-panel {
  display: grid;
  grid-template-columns: minmax(260px,.72fr) minmax(0,1.5fr);
  gap: clamp(28px,5vw,72px);
  margin-top: 56px;
  padding: clamp(30px,4vw,52px);
  border: 1px solid rgba(7,30,54,.12);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7,30,54,.08);
}
.porter-access-copy h3 {
  margin-top: 16px;
  color: var(--midnight);
  font-family: 'DM Serif Display',serif;
  font-size: clamp(28px,3vw,42px);
  font-weight: 400;
  line-height: 1.12;
}
.porter-access-copy p {
  margin-top: 18px;
  color: var(--stone);
  font-size: 14px;
  line-height: 1.75;
}
.porter-access-methods {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.porter-access-methods article {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 240px;
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--midnight);
}
.porter-access-methods article > span {
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
}
.porter-access-methods strong {
  color: #fff;
  font-family: 'DM Serif Display',serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
}
.porter-access-methods p {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.65;
}
.luggage-flow-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  margin-top: 52px;
  border: 1px solid var(--line);
  background: var(--line);
}
.luggage-flow-step {
  min-height: 285px;
  padding: 30px 28px;
  background: #fff;
}
.luggage-flow-step > span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 38px;
  border-radius: 50%;
  background: var(--midnight);
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 10px;
}
.luggage-flow-step h3,
.porter-detail h3,
.porter-deployment h3 {
  color: var(--midnight);
  font-family: 'DM Serif Display',serif;
  font-size: clamp(24px,2.3vw,32px);
  font-weight: 400;
}
.luggage-flow-step p {
  margin-top: 12px;
  color: var(--stone);
  font-size: 14px;
  line-height: 1.7;
}
.porter-details-grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.75fr);
  gap: clamp(24px,4vw,52px);
  margin-top: 72px;
  align-items: start;
}
.porter-detail h3 {
  margin-top: 16px;
  margin-bottom: 28px;
}
.porter-safety-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.porter-safety-list li {
  display: grid;
  gap: 7px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.porter-safety-list strong {
  color: var(--midnight);
  font-family: 'DM Serif Display',serif;
  font-size: 19px;
  font-weight: 400;
}
.porter-safety-list span {
  color: var(--stone);
  font-size: 13px;
  line-height: 1.65;
}
.porter-deployment {
  display: grid;
  grid-template-columns: minmax(250px,.55fr) minmax(0,1fr);
  gap: clamp(26px,5vw,76px);
  margin-top: 52px;
  padding: clamp(28px,4vw,48px);
  border-radius: 24px;
  background: var(--midnight);
  color: #fff;
}
.porter-deployment h3 {
  margin-top: 15px;
  color: #fff;
}
.porter-deployment > p {
  color: rgba(255,255,255,.74);
  font-size: 15px;
  line-height: 1.8;
}
.porter-use-cases {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.porter-use-cases span {
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  color: rgba(255,255,255,.8);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media (max-width: 980px) {
  .page-hero > .wrap { grid-template-columns: 1fr !important; }
  .delivery-steps,
  .project-proof-grid,
  .robotics-product-grid,
  .luggage-flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .porter-details-grid,
  .porter-access-panel { grid-template-columns: 1fr; }
  .luggage-porter-visuals-six { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .delivery-steps,
  .project-proof-grid,
  .robotics-product-grid,
  .luggage-flow-grid,
  .luggage-porter-visuals,
  .porter-deployment,
  .porter-access-methods { grid-template-columns: 1fr; }
  .luggage-porter-visuals-six { grid-template-columns: 1fr; }
  .delivery-step { min-height: auto; }
  .delivery-step > span,
  .project-proof-card > span { margin-bottom: 24px; }
  .project-proof-card { min-height: 240px; }
  .robotics-product { min-height: auto; }
  .robotics-product > span { margin-bottom: 26px; }
  .luggage-flow-step { min-height: auto; }
  .luggage-flow-step > span { margin-bottom: 24px; }
}
@media (max-width: 1100px) {
  .dropdown-menu.solution-mega {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 16px;
  }
  .solution-mega > .dropdown-kicker,
  .nav-service-group-secondary { grid-column: 1; }
  .solution-mega .nav-group-links.compact { grid-template-columns: 1fr; }
  .solution-mega a.nav-group-head { grid-template-columns: 34px 1fr auto; }
  .nav-item.dropdown-open > .dropdown-menu { display: grid; }
}
.footer-brand-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: var(--navy);
  padding: 4px;
}

/* ===== FIX: Division card text overflow/flip issue ===== */
/* The previous .div-card styling had a "white flip" effect overlaying content on hover.
   Override so text stays readable throughout. */
.div-card.has-bg {
  background: var(--ink); /* fallback only — .has-bg::before and ::after handle the rest */
}
.div-card.has-bg::after {
  /* Make gradient stronger so text is always readable */
  background: linear-gradient(135deg, rgba(14, 27, 44, 0.82) 0%, rgba(11, 45, 82, 0.78) 100%);
}
.div-card.has-bg:hover::after {
  background: linear-gradient(135deg, rgba(14, 27, 44, 0.70) 0%, rgba(11, 45, 82, 0.60) 100%);
}
.div-card.has-bg h3 { color: var(--ivory) !important; }
.div-card.has-bg h3 em { color: var(--ember) !important; }
.div-card.has-bg p { color: rgba(245, 241, 234, 0.88) !important; }
.div-card.has-bg .div-num { color: var(--ember) !important; opacity: 1; }
.div-card.has-bg .div-arrow { color: var(--ember) !important; }
.div-card.has-bg .div-tags span {
  background: rgba(245, 241, 234, 0.1) !important;
  border: 1px solid rgba(245, 241, 234, 0.28) !important;
  color: rgba(245, 241, 234, 0.95) !important;
}

/* Kill any inherited hover-flip state on these cards */
.div-card.has-bg:hover {
  transform: translateY(-3px);
  /* original flip animations disabled via the ::after gradient change above */
}

/* ===== SHS CODE section ===== */
.code-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 56px;
}
@media (max-width: 1100px) { .code-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .code-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .code-grid { grid-template-columns: 1fr; } }
.code-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 241, 234, 0.12);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s;
}
.code-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(224, 123, 62, 0.4);
}
.code-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 2px;
  background: var(--ember);
}
.code-letter {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(64px, 6vw, 104px);
  line-height: 0.8;
  color: var(--ember);
  letter-spacing: -0.03em;
}
.code-card h4 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.code-card p {
  color: rgba(245, 241, 234, 0.74);
  font-size: 14px;
  line-height: 1.55;
}
.code-card p em {
  color: var(--ember);
  font-style: italic;
  font-weight: 500;
}
.code-card-plus .code-letter { color: var(--clay); }
.code-card-plus::before { background: var(--clay); }

/* ===== Partner card hover ===== */
.logo-grid a.logo-cell { display: flex; }

/* ===== Mission / Vision / Positioning grid ===== */
#mvp {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#mvp::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('https://res.cloudinary.com/da84ex4nl/image/upload/v1790776701/shs-assets/assets/aboutbg/noc.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  z-index: -1;
  transition: opacity 0.8s var(--ease);
}
#mvp::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,27,44,0.70) 0%, rgba(11,45,82,0.85) 100%);
  z-index: -1;
}
.mvp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 780px) { .mvp-grid { grid-template-columns: 1fr; } }
.mvp-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 241, 234, 0.12);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: border-color 0.3s, background 0.3s, transform 0.35s var(--ease);
}
.mvp-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(224, 123, 62, 0.4);
}
.mvp-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 500;
}
.mvp-card p {
  color: rgba(245, 241, 234, 0.88);
  font-size: 17px;
  line-height: 1.55;
  font-family: var(--f-display);
  font-weight: 400;
}
.mvp-card p em {
  color: var(--ember);
  font-style: italic;
}
.mvp-card-feature {
  background: rgba(198, 93, 47, 0.12);
  border-color: rgba(198, 93, 47, 0.35);
}
.mvp-card-feature p {
  font-size: 20px;
  color: var(--ivory);
  font-style: italic;
}
.mvp-card-feature:hover {
  background: rgba(198, 93, 47, 0.18);
  border-color: rgba(224, 123, 62, 0.6);
}

/* ===== Service introduction with media ===== */
.service-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 36px 0 48px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.service-intro-text p { margin: 0; font-size: 15px; line-height: 1.65; }
.service-intro-media img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.service-badge em {
  color: var(--ember);
  font-style: italic;
  font-weight: 500;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px rgba(224, 123, 62, 0.25);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(224, 123, 62, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(224, 123, 62, 0.1); }
}
@media (max-width: 820px) {
  .service-intro { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .service-intro-media { order: -1; }
}

/* ===== Service-media rows (image + text, alternating) ===== */
.service-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 24px 0 48px;
}
.service-media-row.reverse {
  direction: rtl;
}
.service-media-row.reverse > * { direction: ltr; }
.service-media {
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ivory);
}
.service-body { padding: 12px 0; }
@media (max-width: 820px) {
  .service-media-row { grid-template-columns: 1fr; gap: 24px; direction: ltr; }
  .service-media-row.reverse { direction: ltr; }
}

/* ===== Guest journey numbered list ===== */
.journey-list {
  list-style: none;
  padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.journey-list li {
  padding: 16px 18px;
  background: var(--paper);
  border-left: 3px solid var(--clay);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: baseline;
}
.journey-step {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
}
.journey-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 680px) {
  .journey-list li { grid-template-columns: 1fr; gap: 6px; }
}

/* ===== Generic feature list ===== */
.feature-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.feature-list li {
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  position: relative;
}
.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--clay);
  font-weight: 500;
}

/* ===== Case study visit-site mini-link ===== */
.cs-visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(245, 241, 234, 0.06);
  border: 1px solid rgba(245, 241, 234, 0.2);
  border-radius: 100px;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.cs-visit:hover {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ink);
}

/* Interactive logo cells (with href) */
a.logo-cell {
  color: inherit;
  cursor: pointer;
  position: relative;
}
a.logo-cell::after {
  content: '↗';
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--stone);
  opacity: 0;
  transition: opacity 0.2s;
}
a.logo-cell:hover::after { opacity: 0.7; }


/* === SHS 2026 corporate rebuild: dropdowns, realistic images, case pages === */
.nav-row{position:relative;}
.corporate-nav-links{display:flex;align-items:center;gap:8px;}
.corporate-nav-links > a,
.corporate-nav-links .nav-item > a{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:999px;text-decoration:none;}
.nav-item{position:relative;}
.nav-caret{font-size:12px;opacity:.75;margin-left:2px;}
.dropdown-menu{position:absolute;top:calc(100% + 16px);left:0;min-width:330px;max-width:390px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(7,30,54,.96);backdrop-filter:blur(20px);box-shadow:0 28px 80px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s var(--ease);z-index:90;display:grid;gap:6px;}
.nav-item:hover .dropdown-menu,.nav-item:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{display:grid;gap:3px;padding:12px 14px;border-radius:16px;border:1px solid transparent;color:#fff;text-decoration:none;}
.dropdown-menu a:hover{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.10);}
.dropdown-menu strong{font-family:var(--f-display);font-weight:700;font-size:15px;}
.dropdown-menu span{font-size:12px;line-height:1.45;color:rgba(255,255,255,.68);}
.dropdown-kicker{padding:4px 14px 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-bright);}
.portfolio-dropdown{right:0;left:auto;min-width:360px;}
.has-realistic-bg{position:relative;overflow:hidden;background-color:var(--midnight)!important;}
.has-realistic-bg > .realistic-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.44;z-index:0;}
.has-realistic-bg > .realistic-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,30,54,.96) 0%,rgba(7,30,54,.78) 42%,rgba(7,30,54,.42) 100%),radial-gradient(circle at 78% 28%,rgba(245,158,11,.25),transparent 48%);}
.has-realistic-bg > *:not(.realistic-hero-bg){position:relative;z-index:2;}
.hero.hero-v2.has-realistic-bg{min-height:760px;}
.hero.hero-v2.has-realistic-bg .realistic-hero-bg{opacity:.5;}
.hero.hero-v2.has-realistic-bg .realistic-hero-bg::after{background:linear-gradient(90deg,rgba(7,30,54,.98) 0%,rgba(7,30,54,.86) 40%,rgba(7,30,54,.35) 100%),linear-gradient(180deg,rgba(7,30,54,.12),rgba(7,30,54,.75));}
.realisation-section{padding:clamp(64px,8vw,112px) 0;background:linear-gradient(180deg,var(--ivory),var(--paper));}
.realisation-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);gap:clamp(28px,5vw,70px);align-items:center;}
.realisation-frame{position:relative;border-radius:34px;overflow:hidden;box-shadow:0 36px 90px rgba(7,30,54,.18);background:var(--midnight);min-height:330px;}
.realisation-frame img{display:block;width:100%;height:100%;min-height:330px;object-fit:cover;}
.realisation-frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.24);border-radius:34px;pointer-events:none;}
.realisation-copy .eyebrow{color:var(--orange);}
.realisation-copy h2{font-family:var(--f-display);font-size:clamp(34px,4vw,62px);line-height:.98;letter-spacing:-.035em;margin:18px 0;}
.realisation-copy p{font-size:18px;line-height:1.75;color:var(--stone);}
.realisation-list{display:grid;gap:12px;margin-top:26px;}
.realisation-list li{list-style:none;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink-soft);}
.solution-image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.solution-image-card{position:relative;overflow:hidden;border-radius:28px;min-height:280px;color:#fff;text-decoration:none;background:var(--midnight);box-shadow:0 24px 60px rgba(7,30,54,.14);}
.solution-image-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .45s var(--ease);}
.solution-image-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,30,54,.05),rgba(7,30,54,.86));}
.solution-image-card:hover img{transform:scale(1.05);}
.solution-image-card div{position:absolute;inset:auto 20px 20px 20px;z-index:2;}
.solution-image-card span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--orange-bright);}
.solution-image-card h3{margin:8px 0 0;font-family:var(--f-display);font-size:28px;line-height:1.05;color:#fff;}
.case-index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.case-index-card{display:flex;flex-direction:column;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;box-shadow:0 20px 55px rgba(7,30,54,.08);transition:transform .24s var(--ease), box-shadow .24s var(--ease);}
.case-index-card:hover{transform:translateY(-5px);box-shadow:0 34px 80px rgba(7,30,54,.15);}
.case-index-card .case-img{height:210px;background:var(--midnight);overflow:hidden;}
.case-index-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease);}
.case-index-card:hover img{transform:scale(1.04);}
.case-index-card .case-body{padding:22px;display:grid;gap:10px;}
.case-index-card .case-body span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);}
.case-index-card h3{font-family:var(--f-display);font-size:27px;line-height:1.05;margin:0;color:var(--ink);}
.case-index-card p{margin:0;color:var(--stone);line-height:1.6;}
.case-client-logo {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 22px 0 18px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: rgba(4,15,75,.82);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.leader-avatar-photo {
  object-fit: cover;
  object-position: 50% 22%;
  border: 2px solid rgba(245,158,11,.32);
  background: var(--midnight);
}
.solution-family-section { background: #f4f1eb; }
.solution-family-block + .solution-family-block { margin-top: 72px; }
.solution-family-head {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.solution-family-head > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  padding: 11px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(7,30,54,.08);
}
.solution-family-head h2 {
  margin-top: 8px;
  font-family: 'DM Serif Display',serif;
  font-size: clamp(28px,3.4vw,46px);
  font-weight: 400;
  line-height: 1.05;
}
.solution-family-head > a {
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--tech-blue);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.solution-family-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 24px;
}
.solution-family-grid > a {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--midnight);
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.solution-family-grid > a:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 55px rgba(7,30,54,.12);
}
.solution-family-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.solution-family-grid > a > div { padding: 22px; }
.solution-family-grid span {
  color: var(--orange);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
}
.solution-family-grid h3 {
  margin-top: 10px;
  font-family: 'DM Serif Display',serif;
  font-size: 24px;
  font-weight: 400;
}
.solution-family-grid p {
  margin-top: 10px;
  color: var(--stone);
  font-size: 13px;
  line-height: 1.65;
}
@media (max-width: 840px) {
  .solution-family-grid { grid-template-columns: 1fr; }
  .solution-family-head { grid-template-columns: 48px 1fr; }
  .solution-family-head > img { width: 48px; height: 48px; }
  .solution-family-head > a { grid-column: 1 / -1; width: max-content; }
}
.case-hero{min-height:680px;display:flex;align-items:flex-end;color:#fff;padding:150px 0 70px;background:var(--midnight);position:relative;overflow:hidden;}
.case-hero::before{content:"";position:absolute;inset:0;background-image:var(--case-bg);background-size:cover;background-position:center;opacity:.5;}
.case-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,30,54,.98),rgba(7,30,54,.76) 48%,rgba(7,30,54,.18));}
.case-hero .wrap{position:relative;z-index:2;}
.case-hero h1{font-family:var(--f-display);font-size:clamp(48px,7vw,94px);line-height:.95;letter-spacing:-.04em;margin:18px 0;max-width:11ch;}
.case-hero p{max-width:68ch;color:rgba(255,255,255,.82);font-size:20px;line-height:1.75;}
.case-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;max-width:900px;}
.case-meta-grid div{border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:18px;background:rgba(255,255,255,.07);backdrop-filter:blur(12px);}
.case-meta-grid span{display:block;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--orange-bright);margin-bottom:8px;}
.case-meta-grid strong{font-size:18px;}
.case-detail{padding:90px 0;background:var(--paper);}
.case-detail-grid{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:start;}
.case-detail-card{border-radius:30px;background:#fff;border:1px solid var(--line);padding:30px;box-shadow:0 24px 70px rgba(7,30,54,.09);}
.case-detail-card h2{font-family:var(--f-display);font-size:42px;line-height:1;margin:0 0 20px;}
.case-detail-card ul{display:grid;gap:12px;margin:0;padding:0;}
.case-detail-card li{list-style:none;padding:14px 16px;border-radius:16px;background:var(--paper);line-height:1.55;color:var(--ink-soft);}
.case-visual{border-radius:32px;overflow:hidden;box-shadow:0 30px 80px rgba(7,30,54,.18);background:#fff;}
.case-visual img{display:block;width:100%;height:420px;object-fit:cover;}
@media (max-width:1100px){.realisation-grid,.case-detail-grid{grid-template-columns:1fr}.solution-image-grid,.case-index-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;margin-top:8px}.nav-item.dropdown-open>.dropdown-menu{display:grid}.corporate-nav-links{align-items:flex-start}.nav-item{width:100%;}.nav-item>a{width:100%;}}
@media (max-width:720px){.solution-image-grid,.case-index-grid,.case-meta-grid{grid-template-columns:1fr}.realisation-grid{gap:26px}.case-hero{min-height:620px}.portfolio-dropdown,.dropdown-menu{min-width:100%;}.hero.hero-v2.has-realistic-bg{min-height:720px;}}


/* === Final SHS profile-driven corrections === */
.nav-links .nav-item.has-dropdown.active > a,
.nav-links > a.active { color: var(--orange-bright) !important; }
.industries-dropdown { min-width: 520px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.industries-dropdown .dropdown-kicker { grid-column: 1 / -1; }
.industries-dropdown a { min-height: 76px; }
@media (max-width: 920px){ .industries-dropdown { min-width: 100%; grid-template-columns: 1fr; } }

/* Home page gap correction: tighter relationship between hero image, headline and icon tiles */
.hero.hero-v2.has-realistic-bg { min-height: 720px; padding-bottom: clamp(24px, 4vw, 52px); }
.hero-inner-v2 { gap: clamp(22px, 3.4vw, 54px) !important; align-items: center; }
.hero-left { gap: 16px !important; }
.hero-v2 .hero-sub { margin-top: 0 !important; }
.hero-v2 .hero-arrows { margin-top: 4px !important; }
.hero-divisions-v2 { gap: 8px !important; }
.hd-tile { padding: 13px 18px; }
.hd-icon { display: grid; place-items: center; }
.realisation-section { padding-top: clamp(36px, 5vw, 66px) !important; }
.realisation-grid { gap: clamp(18px, 3vw, 44px) !important; }
.realisation-copy { margin-top: 0 !important; }
.realisation-copy .eyebrow { margin-bottom: 8px; }

.profile-proof-section { padding: clamp(54px, 7vw, 96px) 0; background: linear-gradient(180deg, var(--paper), #fff); }
.profile-proof-grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(360px,1fr); gap: clamp(24px,4vw,64px); align-items: center; }
.profile-proof-copy h2 { font-family: var(--f-display); font-size: clamp(34px, 4.8vw, 66px); line-height: .98; letter-spacing: -.04em; margin: 14px 0 18px; color: var(--midnight); }
.profile-proof-copy p { font-size: 18px; line-height: 1.75; color: var(--stone); max-width: 68ch; }
.proof-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 28px; }
.proof-metrics div { padding: 18px; border-radius: 22px; background: rgba(11,45,82,.06); border: 1px solid rgba(11,45,82,.10); }
.proof-metrics strong { display: block; font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--orange); }
.proof-metrics span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.profile-proof-visual { margin: 0; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 90px rgba(7,30,54,.16); background: #fff; }
.profile-proof-visual img { display:block; width:100%; height:auto; }
.profile-source-section .section-head { margin-bottom: clamp(28px,4vw,52px); }
.profile-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px,2vw,28px); }
.profile-source-grid-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-source-grid figure { margin: 0; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid rgba(7,30,54,.10); box-shadow: 0 18px 54px rgba(7,30,54,.08); }
.profile-source-grid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; }
.profile-source-grid figcaption { padding: 14px 16px 18px; font-size: 13px; line-height: 1.55; color: var(--stone); }
@media (max-width: 1080px){ .profile-proof-grid { grid-template-columns: 1fr; } .profile-source-grid, .profile-source-grid-wide { grid-template-columns: repeat(2, minmax(0,1fr)); } .proof-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .profile-source-grid, .profile-source-grid-wide { grid-template-columns: 1fr; } .proof-metrics { grid-template-columns: 1fr; } .profile-proof-copy h2 { font-size: 34px; } }

/* === V4 homepage hero cleanup requested from screenshot ===
   - Remove excess empty space above headline
   - Move Trusted by line upward
   - Make company name / Est. 2011 visible
   - Keep hero copy and solution tiles visually connected
*/
.hero.hero-v2.has-realistic-bg {
  min-height: clamp(600px, 72vh, 724px) !important;
  padding-top: calc(var(--nav-h) + clamp(18px, 2.4vh, 32px)) !important;
  padding-bottom: clamp(26px, 3.6vh, 50px) !important;
  justify-content: flex-start !important;
}
.hero-v2.has-realistic-bg .hero-meta-top {
  display: none !important;
}
.hero-v2.has-realistic-bg .hero-inner-v2 {
  align-items: start !important;
  gap: clamp(20px, 3vw, 46px) !important;
  padding-top: clamp(20px, 3.5vh, 42px) !important;
}
.hero-v2.has-realistic-bg .hero-left {
  gap: 13px !important;
  max-width: 860px;
}
.hero-company-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(90deg, rgba(7,30,54,.58), rgba(11,45,82,.18));
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.15;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.hero-company-line strong {
  color: var(--orange-bright);
  font-weight: 800;
  white-space: nowrap;
}
.hero-v2.has-realistic-bg .hero-eyebrow {
  margin-top: 0 !important;
  transform: translateY(0) !important;
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.48) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.hero-v2.has-realistic-bg .hero-title-serif,
.hero-v2.has-realistic-bg .hero-title {
  font-size: clamp(42px, 5.85vw, 88px) !important;
  line-height: .92 !important;
  max-width: 860px;
}
.hero-v2.has-realistic-bg .hero-sub {
  max-width: 62ch !important;
  margin-top: 2px !important;
}
.hero-v2.has-realistic-bg .hero-arrows {
  margin-top: 6px !important;
}
.hero-v2.has-realistic-bg .hero-divisions-v2 {
  padding-top: clamp(36px, 4.5vh, 70px) !important;
  max-height: none !important;
}
.hero-v2.has-realistic-bg .hd-tile {
  padding: 12px 16px !important;
}
.hero-v2.has-realistic-bg .hero-mesh,
.hero-v2.has-realistic-bg .hero-grain,
.hero-v2.has-realistic-bg .hero-noise,
.hero-v2.has-realistic-bg .hero-lines,
.hero-v2.has-realistic-bg .hero-constellation {
  position: absolute !important;
  inset: 0 !important;
}
.hero-v2.has-realistic-bg .hero-constellation {
  opacity: .32 !important;
}
.hero-v2.has-realistic-bg .realistic-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,30,54,.90) 0%, rgba(7,30,54,.72) 37%, rgba(7,30,54,.34) 68%, rgba(7,30,54,.58) 100%);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .hero.hero-v2.has-realistic-bg { min-height: auto !important; }
  .hero-v2.has-realistic-bg .hero-inner-v2 { grid-template-columns: 1fr !important; }
  .hero-v2.has-realistic-bg .hero-divisions-v2 { padding-top: 18px !important; }
}
@media (max-width: 720px) {
  .hero-company-line { display: flex; flex-wrap: wrap; font-size: 9px; letter-spacing: .12em; }
  .hero-v2.has-realistic-bg .hero-title-serif,
  .hero-v2.has-realistic-bg .hero-title { font-size: clamp(38px, 12vw, 58px) !important; }
}

/* =====================================================================
   V4 GO-LIVE — new component styles (marquee links, certifications,
   sector imagery, partner matrix). Appended last for precedence.
   ===================================================================== */

/* ---- Image 4: clickable client marquee logos ---- */
.marquee-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.marquee-link:hover { transform: translateY(-3px); }
.marquee-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }

/* ---- Image 5: premium certifications / accreditation grid ---- */
.trust-bar-pro {
  background: var(--white);
  padding: clamp(42px, 5vw, 66px) 0;
  border-bottom: 1px solid var(--line);
}
.trust-bar-pro .trust-bar-head {
  max-width: 72ch;
  margin-bottom: clamp(24px, 3vw, 34px);
}
.trust-bar-pro .trust-bar-head .eyebrow { display: block; margin-bottom: 12px; }
.trust-bar-pro .trust-bar-head p {
  font-size: 15px; line-height: 1.65; color: var(--stone); margin: 0;
}
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 14px;
}
.cred {
  display: flex; align-items: center; gap: 15px;
  padding: 17px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cred:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 45, 82, 0.22);
  box-shadow: 0 16px 38px rgba(7, 30, 54, 0.08);
}
.cred-mark {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
}
.cred-mark svg { width: 100%; height: 100%; display: block; }
.cred-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cred-text strong {
  font-family: var(--f-display); font-weight: 800; font-size: 14.5px;
  color: var(--midnight); letter-spacing: -0.01em; line-height: 1.1;
}
.cred-text small {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange); line-height: 1.2;
}
@media (max-width: 520px) {
  .cred-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cred { padding: 14px; gap: 11px; }
  .cred-mark { width: 34px; height: 34px; }
}

/* ---- Image 7: sector cards with hero imagery ---- */
.sector {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 18px;
  background: var(--white);
}
.sector:hover {
  background: var(--white);
  border-color: rgba(11, 45, 82, 0.18);
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(7, 30, 54, 0.13);
}
.sector-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--midnight);
}
.sector-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.sector:hover .sector-img { transform: scale(1.07); }
.sector-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,30,54,0.55) 0%, rgba(7,30,54,0.05) 38%, rgba(7,30,54,0.12) 100%);
  pointer-events: none;
}
.sector-media .sector-ico {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 44px; height: 44px; margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(7, 30, 54, 0.30);
  backdrop-filter: blur(6px);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.sector:hover .sector-media .sector-ico {
  background: var(--orange); border-color: var(--orange); color: #fff;
}
.sector-media .sector-num {
  position: absolute; top: 20px; right: 18px; z-index: 2;
  color: rgba(255, 255, 255, 0.92); opacity: 1;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.2em;
}
.sector-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 24px 26px 28px;
  background: var(--white);
  transition: background 0.45s var(--ease);
}
.sector:hover .sector-body { background: var(--tech-blue); }
.sector:hover .sector-body h3,
.sector:hover .sector-body h3 em { color: #fff; }
.sector:hover .sector-body p { color: rgba(245, 241, 234, 0.78); }
.sector:hover .sector-body .sector-tags span { color: rgba(255, 255, 255, 0.78); }
.sector-body h3 { margin-bottom: 12px; }
.sector-body p { margin-bottom: 18px; }
@media (max-width: 600px) {
  .sector-media { aspect-ratio: 16 / 9; }
  .sector-body { padding: 20px 20px 24px; }
}

/* ---- Image 8: refined technology-partner matrix ---- */
.partners-pro .partner {
  flex-direction: column;
  gap: 7px;
  padding: 26px 16px;
  min-height: 108px;
  text-align: center;
}
.partner-name {
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  color: var(--midnight); letter-spacing: -0.01em; line-height: 1.18;
}
.partner-cat {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone); opacity: 0.72;
  transition: color 0.3s, opacity 0.3s;
}
.partners-pro .partner:hover .partner-name { color: var(--orange); }
.partners-pro .partner:hover .partner-cat { color: var(--orange); opacity: 0.9; }

/* ---- Image 2: partner cards as links + monochrome SVG logos ---- */
.partners-pro .partner { text-decoration: none; }
.partners-pro .partner.has-logo { gap: 0; }
.partners-pro .partner .p-logo {
  height: 34px; width: auto; max-height: 34px;
  fill: var(--tech-blue);
  opacity: .82;
  transition: fill .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.partners-pro .partner.has-logo .partner-cat { margin-top: 12px; }
.partners-pro .partner:hover .p-logo { fill: var(--orange); opacity: 1; transform: translateY(-2px); }
.partners-pro .partner:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.partners-pro .partner.has-logo .partner-name-compact {
  margin-top: 8px;
  font-size: 13px;
}
.partners-pro .partner.has-logo .partner-name-compact + .partner-cat {
  margin-top: 5px;
  max-width: 18ch;
}

/* Use a verified headshot wherever a named leadership avatar is available. */
.leader-avatar-photo {
  display: block;
  object-fit: cover;
  object-position: 50% 30%;
  border: 2px solid rgba(11, 45, 82, 0.1);
  background: var(--paper);
}

/* ---- Image 2: convert partner wall to gapped rounded cards (no empty-cell gray block) ---- */
.partners.partners-pro {
  background: transparent !important;
  border: none !important;
  gap: 12px !important;
}
.partners.partners-pro .partner {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--white) !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease) !important;
}
.partners.partners-pro .partner:hover {
  border-color: rgba(11,45,82,.20) !important;
  box-shadow: 0 14px 32px rgba(7,30,54,.08) !important;
  transform: translateY(-3px) !important;
  background: var(--white) !important;
}
@media (max-width: 900px){ .partners.partners-pro { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 520px){ .partners.partners-pro { grid-template-columns: repeat(2,1fr) !important; } }

/* ---- Image 3: website link under each client marquee logo ---- */
.marquee-link {
  flex-direction: column !important;
  gap: 9px !important;
  justify-content: center;
}
.marquee-url {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--stone);
  opacity: .7;
  transition: color .3s var(--ease), opacity .3s var(--ease);
  white-space: nowrap;
}
.marquee-link:hover .marquee-url { color: var(--orange); opacity: 1; }
.marquee { padding: 38px 0 !important; }

/* ---- Brief: signature CTA message on the dark CTA strip ---- */
.cta-lead {
  position: relative; z-index: 1;
  max-width: 60ch;
  margin: 18px auto 6px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.80);
}
.cta-strip .cta-actions { flex-wrap: wrap; }
.cta-strip .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-strip .btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ---- Portfolio: full project delivery ledger ---- */
.ledger-block { margin-top: 44px; }
.ledger-block:first-of-type { margin-top: 8px; }
.ledger-cat {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--orange);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245,241,234,0.16);
}
.ledger-table { display: flex; flex-direction: column; }
.ledger-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 3fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245,241,234,0.08);
  align-items: baseline;
}
.ledger-row > span:first-child {
  font-weight: 700;
  color: var(--white, #f5f1ea);
  font-size: 15.5px;
}
.ledger-row > span:nth-child(2) {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--orange);
  letter-spacing: 0.02em;
}
.ledger-row > span:last-child {
  color: rgba(245,241,234,0.72);
  font-size: 14.5px;
  line-height: 1.6;
}
.ledger-row.ledger-head {
  padding: 8px 0 12px;
  border-bottom: 1px solid rgba(245,241,234,0.22);
}
.ledger-row.ledger-head > span {
  font-family: var(--f-mono, 'JetBrains Mono', monospace) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(245,241,234,0.45) !important;
}
@media (max-width: 720px) {
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .ledger-row.ledger-head { display: none; }
  .ledger-row > span:nth-child(2) { margin-bottom: 4px; }
}

/* ===== V7: connected guest journey ===== */
.connected-journey-hero { background: linear-gradient(135deg, #071e36 0%, #0d3154 100%); }
.connected-journey-hero .page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,30,54,.98) 0%, rgba(7,30,54,.88) 43%, rgba(7,30,54,.3) 76%, rgba(7,30,54,.58) 100%),
              linear-gradient(0deg, rgba(7,30,54,.72), transparent 55%);
}
.connected-hero-grid {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(270px,.62fr);
  gap: clamp(40px,6vw,96px); align-items: end; padding: 132px var(--gutter) 72px;
}
.connected-hero-grid h1 {
  margin-top: 18px; font-family: 'DM Serif Display',serif; font-weight: 400;
  max-width: 20ch; letter-spacing: -.035em; line-height: .98; font-size: clamp(46px,6.2vw,82px);
}
.connected-hero-grid h1 em,
.connected-intro h2 em,
.one-card-section h2 em,
.connected-feature h2 em,
.bathroom-tech-section h2 em,
.grms-section h2 em,
.infotainment-section h2 em { color: var(--orange); font-style: italic; }
.connected-hero-grid .lead { margin-top: 24px; max-width: 64ch; color: rgba(255,255,255,.83); }
.connected-hero-grid .hero-arrows { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.connected-hero-metrics { border-top: 1px solid rgba(255,255,255,.18); }
.connected-hero-metrics div {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.connected-hero-metrics span,
.connected-feature > div > span,
.bathroom-card > div > span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.connected-hero-metrics span { color: rgba(255,255,255,.56); }
.connected-hero-metrics strong {
  color: var(--white); font-family: 'DM Serif Display',serif; font-size: clamp(18px,2vw,25px);
  font-weight: 400; text-align: right;
}
.connected-intro h2,
.one-card-section h2,
.bathroom-tech-section h2,
.grms-section h2,
.infotainment-section h2,
.intelligent-service-link h2 {
  margin-top: 24px; font-family: 'DM Serif Display',serif; font-size: clamp(38px,5vw,66px);
  font-weight: 400; letter-spacing: -.025em; line-height: 1.04;
}
.connected-principles {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 48px;
  background: rgba(7,30,54,.13); border: 1px solid rgba(7,30,54,.13);
}
.connected-principles article { min-height: 260px; padding: 34px; background: var(--white); }
.connected-principles article > span,
.one-card-route li > span {
  font-family: var(--f-mono); color: var(--orange); font-size: 11px; letter-spacing: .18em;
}
.connected-principles h3 {
  margin-top: 42px; font-family: 'DM Serif Display',serif; font-size: 27px; font-weight: 400;
}
.connected-principles p { margin-top: 14px; color: var(--ink-soft); line-height: 1.75; }
.one-card-section {
  background: radial-gradient(circle at 88% 14%, rgba(245,158,11,.13), transparent 30%), var(--midnight);
}
.one-card-section .section-head h2,
.one-card-section .section-head .lead,
.grms-section .section-head h2,
.grms-section .section-head .lead { color: var(--white); }
.one-card-section .eyebrow,
.grms-section .eyebrow { color: var(--orange); }
.one-card-route {
  display: grid; grid-template-columns: repeat(9,minmax(118px,1fr)); gap: 0;
  margin: 48px 0; overflow-x: auto; list-style: none; border: 1px solid rgba(255,255,255,.16);
}
.one-card-route li {
  position: relative; min-height: 155px; padding: 22px 16px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.one-card-route li:last-child { border-right: 0; }
.one-card-route li::after {
  content: "→"; position: absolute; top: 20px; right: -8px; z-index: 2; color: var(--orange);
}
.one-card-route li:last-child::after { display: none; }
.one-card-route strong, .one-card-route small { display: block; }
.one-card-route strong {
  margin-top: 34px; color: var(--white); font-family: 'DM Serif Display',serif;
  font-size: 18px; font-weight: 400;
}
.one-card-route small { margin-top: 7px; color: rgba(255,255,255,.55); line-height: 1.45; }
.guest-journey-gallery { display: grid; gap: 20px; }
.guest-journey-gallery-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.guest-journey-gallery figure,
.bathroom-card {
  overflow: hidden; background: var(--white); border: 1px solid rgba(7,30,54,.11);
  box-shadow: 0 18px 50px rgba(7,30,54,.08);
}
.guest-journey-gallery figure img,
.bathroom-card > img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.guest-journey-gallery figcaption { display: grid; gap: 8px; padding: 22px; }
.guest-journey-gallery figcaption span {
  color: var(--orange); font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
}
.guest-journey-gallery figcaption strong {
  color: var(--midnight); font-family: 'DM Serif Display',serif; font-size: 22px; font-weight: 400;
}
.connected-note {
  display: grid; grid-template-columns: minmax(170px,.35fr) 1fr; gap: 28px;
  margin-top: 24px; padding: 24px 28px; background: rgba(245,158,11,.1);
  border-left: 3px solid var(--orange);
}
.connected-note strong {
  color: var(--orange); font-family: 'DM Serif Display',serif; font-size: 21px; font-weight: 400;
}
.connected-note p { color: inherit; line-height: 1.75; }
.one-card-section .connected-note p { color: rgba(255,255,255,.74); }
.connected-feature-pair { display: grid; gap: 30px; margin-top: 48px; }
.connected-feature {
  display: grid; grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr); align-items: stretch;
  overflow: hidden; background: var(--white); border: 1px solid rgba(7,30,54,.12);
  box-shadow: 0 24px 70px rgba(7,30,54,.09);
}
.connected-feature-reverse img { order: 2; }
.connected-feature > img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.connected-feature > div { align-self: center; padding: clamp(32px,5vw,64px); }
.connected-feature > div > span { color: var(--orange); }
.connected-feature h3 {
  margin-top: 18px; font-family: 'DM Serif Display',serif; font-size: clamp(29px,3vw,44px);
  font-weight: 400; line-height: 1.1;
}
.connected-feature p { margin-top: 18px; color: var(--ink-soft); line-height: 1.78; }
.connected-feature ul {
  display: grid; gap: 10px; margin-top: 22px; padding: 0; list-style: none;
}
.connected-feature li { position: relative; padding-left: 20px; color: var(--ink-soft); }
.connected-feature li::before { content: "—"; position: absolute; left: 0; color: var(--orange); }
.bathroom-tech-section { background: #e9f1f3; }
.bathroom-card > div { padding: 26px; }
.bathroom-card > div > span { color: var(--orange); }
.bathroom-card h3 {
  margin-top: 14px; font-family: 'DM Serif Display',serif; font-size: 27px; font-weight: 400;
}
.bathroom-card p { margin-top: 12px; color: var(--ink-soft); line-height: 1.72; }
.bathroom-tech-section .connected-note { background: rgba(255,255,255,.74); }
.grms-section {
  background: radial-gradient(circle at 12% 82%, rgba(0,152,180,.12), transparent 32%), var(--midnight);
}
.connected-feature-dark { margin-top: 48px; background: #0c2946; border-color: rgba(255,255,255,.13); box-shadow: none; }
.connected-feature-dark h3 { color: var(--white); }
.connected-feature-dark p,
.connected-feature-dark li { color: rgba(255,255,255,.72); }
.grms-signal-grid {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px;
  margin-top: 24px; background: rgba(255,255,255,.12);
}
.grms-signal-grid article { min-height: 125px; padding: 24px; background: #0c2946; }
.grms-signal-grid strong, .grms-signal-grid span { display: block; }
.grms-signal-grid strong {
  color: var(--white); font-family: 'DM Serif Display',serif; font-size: 20px; font-weight: 400;
}
.grms-signal-grid span { margin-top: 10px; color: rgba(255,255,255,.54); line-height: 1.5; }
.infotainment-section .service-story-card { background: var(--white); }
.intelligent-service-link .connected-feature { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.intelligent-service-link .hero-arrows { margin-top: 28px; }
.solution-family-grid.solution-family-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 980px) {
  .connected-hero-grid,
  .connected-feature,
  .connected-feature-reverse,
  .intelligent-service-link .connected-feature { grid-template-columns: 1fr; }
  .connected-hero-metrics { margin-top: 12px; }
  .connected-principles, .guest-journey-gallery-three,
  .solution-family-grid.solution-family-grid-four { grid-template-columns: 1fr; }
  .guest-journey-gallery figure,
  .bathroom-card { display: grid; grid-template-columns: minmax(260px,.9fr) 1fr; }
  .guest-journey-gallery figure img,
  .bathroom-card > img { height: 100%; aspect-ratio: auto; }
  .connected-feature-reverse img { order: 0; }
  .grms-signal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .connected-hero-grid { padding: 116px var(--gutter) 56px; }
  .connected-hero-metrics div { grid-template-columns: 1fr; gap: 6px; }
  .connected-hero-metrics strong { text-align: left; }
  .connected-principles article { min-height: auto; }
  .guest-journey-gallery figure, .bathroom-card { display: block; }
  .guest-journey-gallery figure img, .bathroom-card > img { aspect-ratio: 16/10; }
  .connected-note { grid-template-columns: 1fr; gap: 10px; }
  .connected-feature > img { min-height: 280px; aspect-ratio: 16/10; }
  .connected-feature > div { padding: 30px 22px; }
  .grms-signal-grid { grid-template-columns: 1fr; }
}

/* Oil, gas and offshore energy services */
.og-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}
.og-story-card {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid var(--line);
  background: var(--midnight);
  color: var(--white);
}
.og-story-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.og-story-card:hover img { transform: scale(1.035); }
.og-story-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,30,54,.04) 26%, rgba(7,30,54,.92) 100%);
}
.og-story-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px;
}
.og-story-copy span,
.og-service-card span,
.og-case-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
}
.og-story-copy h3 {
  margin-top: 10px;
  color: var(--white);
  font-family: "DM Serif Display", serif;
  font-size: 28px;
  font-weight: 400;
}
.og-story-copy p {
  margin-top: 9px;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.6;
}
.og-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 42px;
  background: var(--line);
  border: 1px solid var(--line);
}
.og-service-card {
  min-height: 255px;
  padding: 30px;
  background: var(--white);
}
.og-service-card h3 {
  margin-top: 18px;
  font-family: "DM Serif Display", serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--midnight);
}
.og-service-card p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.og-case {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}
.og-case-brand {
  display: flex;
  min-height: 460px;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: radial-gradient(circle at 30% 20%, rgba(76,134,181,.32), transparent 50%), #071e36;
}
.og-case-brand img {
  width: min(190px, 76%);
  height: auto;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.og-case-copy { padding: clamp(38px, 6vw, 76px); }
.og-case-copy h2 {
  margin-top: 20px;
  color: var(--white);
  font-family: "DM Serif Display", serif;
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.og-case-copy > p {
  max-width: 66ch;
  margin-top: 22px;
  color: rgba(255,255,255,.76);
  line-height: 1.75;
}
.og-deliverables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}
.og-deliverables div {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.45;
}
.og-reference {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.66);
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.og-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}
.og-process article {
  padding: 26px;
  border-top: 2px solid var(--orange);
  background: var(--white);
}
.og-process strong {
  display: block;
  color: var(--midnight);
  font-family: "DM Serif Display", serif;
  font-size: 23px;
  font-weight: 400;
}
.og-process p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 980px) {
  .og-story-grid { grid-template-columns: 1fr 1fr; }
  .og-story-card:first-child { grid-column: 1 / -1; }
  .og-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-case { grid-template-columns: 1fr; }
  .og-case-brand { min-height: 310px; }
  .og-process { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .og-story-grid,
  .og-service-grid,
  .og-deliverables,
  .og-process { grid-template-columns: 1fr; }
  .og-story-card:first-child { grid-column: auto; }
  .og-story-card { min-height: 380px; }
  .og-case-brand { min-height: 260px; padding: 36px; }
  .og-case-copy { padding: 32px 24px; }
}

/* ============================================================================
   V7.2 - BRAND RATIO THEME
   User-directed weighting built from the approved SHS Brand Guide palette:
   50% Midnight Navy · 20% Tech/Royal Blue · 20% Smart Energy Gold · 10% White
   ============================================================================ */
@media screen {
  body {
    background: var(--navy-blue);
  }

  /* Navigation stays firmly inside the dominant navy layer while scrolling. */
  .nav.scrolled,
  .nav.on-dark.scrolled,
  .nav.on-light.scrolled {
    background: rgba(7, 30, 54, .96);
    border-bottom-color: rgba(245, 158, 11, .34);
    color: var(--brand-white);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
  }
  .nav.scrolled .nav-links a,
  .nav.scrolled .nav-logo,
  .nav.scrolled .nlt-main,
  .nav.on-light.scrolled .nlt-main {
    color: var(--brand-white);
  }
  .nav.scrolled .nlt-eyebrow,
  .nav.on-light.scrolled .nlt-eyebrow {
    color: rgba(255, 255, 255, .58);
    opacity: 1;
  }
  .nav.scrolled .nav-links a.active { color: var(--brand-gold); }
  .nav.scrolled .nav-cta {
    background: var(--brand-gold);
    color: var(--navy-blue);
  }
  .nav.scrolled .nav-cta .dot { background: var(--navy-blue); }
  @media (max-width: 1024px) {
    .nav-links,
    .nav.on-light .nav-links {
      background: var(--navy-blue);
      border-bottom-color: rgba(245, 158, 11, .3);
      color: var(--brand-white);
    }
    .nav-links a { border-bottom-color: rgba(255, 255, 255, .1); }
  }

  /* Navy is the principal section surface. */
  .section-paper {
    background:
      radial-gradient(circle at 92% 10%, rgba(245, 158, 11, .12), transparent 30%),
      linear-gradient(145deg, var(--navy-blue) 0%, #092847 100%);
    color: var(--brand-white);
  }
  .section-paper .section-head :is(h1, h2, h3, h4),
  .section-paper > .wrap > :is(h1, h2, h3, h4),
  .section-paper .solution-family-head h2,
  .section-paper .service-story-head h2 {
    color: var(--brand-white);
  }
  .section-paper .section-head :is(p, .lead),
  .section-paper > .wrap > .lead,
  .section-paper .solution-family-head p,
  .section-paper .service-story-head .lead {
    color: rgba(255, 255, 255, .76);
  }
  .section-paper :is(.eyebrow, .label-ink),
  .section-paper .section-head em {
    color: var(--brand-gold);
  }
  .section-paper .eyebrow::before { background: var(--brand-gold); }

  /* Tech Blue acts as the royal-blue supporting layer. */
  .section-ivory {
    background:
      radial-gradient(circle at 8% 12%, rgba(245, 158, 11, .13), transparent 30%),
      linear-gradient(145deg, var(--royal-blue) 0%, #0D3A69 100%);
    color: var(--brand-white);
  }
  .section-ivory .section-head :is(h1, h2, h3, h4),
  .section-ivory > .wrap > :is(h1, h2, h3, h4),
  .section-ivory .solution-family-head h2,
  .section-ivory .service-story-head h2 {
    color: var(--brand-white);
  }
  .section-ivory .section-head :is(p, .lead),
  .section-ivory > .wrap > .lead,
  .section-ivory .solution-family-head p,
  .section-ivory .service-story-head .lead {
    color: rgba(255, 255, 255, .78);
  }
  .section-ivory :is(.eyebrow, .label-ink),
  .section-ivory .section-head em,
  .section-ivory .solution-family-head em {
    color: var(--brand-gold);
  }
  .section-ivory .eyebrow::before { background: var(--brand-gold); }
  .section-ivory .solution-family-head > a {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: var(--brand-white);
  }
  .section-ivory .solution-family-head > a:hover {
    border-color: var(--brand-gold);
    background: var(--brand-gold);
    color: var(--navy-blue);
  }

  /* Cards preserve the deliberate 10% white breathing room on dark sections. */
  .section-paper :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
    .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
    .connected-principles article, .connected-feature, .bathroom-card,
    .og-service-card, .og-process article),
  .section-ivory :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
    .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
    .connected-principles article, .connected-feature, .bathroom-card,
    .og-service-card, .og-process article) {
    border-color: rgba(245, 158, 11, .22);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
  }
  .section-paper :is(.sl-features, .logo-grid, .partners, .og-service-grid),
  .section-ivory :is(.sl-features, .logo-grid, .partners, .og-service-grid) {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .14);
  }

  /* Gold receives a true surface role instead of appearing only in tiny accents. */
  .trust-bar-pro,
  .trust-bar {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 48%),
      var(--brand-gold);
    border-color: rgba(7, 30, 54, .18);
    color: var(--navy-blue);
  }
  .trust-bar-pro :is(h2, h3, h4, p, span),
  .trust-bar :is(h2, h3, h4, p, span) {
    color: var(--navy-blue);
  }
  .trust-bar-pro .eyebrow,
  .trust-bar .eyebrow {
    color: var(--navy-blue);
  }
  .trust-bar-pro .eyebrow::before,
  .trust-bar .eyebrow::before {
    background: var(--navy-blue);
  }
  .cert-badge,
  .trust-bar-pro .partner,
  .trust-bar .partner {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(7, 30, 54, .18);
  }

  /* Separate adjoining gold panels with a royal-blue editorial beat. */
  .manifesto {
    background:
      radial-gradient(circle at 86% 18%, rgba(245, 158, 11, .2), transparent 34%),
      linear-gradient(145deg, var(--royal-blue) 0%, #0D3A69 100%);
    border-color: rgba(245, 158, 11, .28);
    color: var(--brand-white);
  }
  .manifesto :is(h1, h2, h3, h4, p, .lead, .label-ink) { color: var(--brand-white); }
  .manifesto :is(.eyebrow, .manifesto-decorator),
  .manifesto-quote em { color: var(--brand-gold) !important; }
  .manifesto .eyebrow::before { background: var(--brand-gold); }
  .manifesto-side { border-color: rgba(255, 255, 255, .24); }

  .realisation-section {
    background:
      radial-gradient(circle at 12% 15%, rgba(255, 255, 255, .2), transparent 34%),
      linear-gradient(135deg, #F59E0B 0%, #F7B12C 100%);
    color: var(--navy-blue);
  }
  .realisation-copy :is(h2, h3, p, .lead) { color: var(--navy-blue); }
  .realisation-copy .eyebrow { color: var(--navy-blue); }
  .realisation-copy .eyebrow::before { background: var(--navy-blue); }
  .realisation-list li {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(7, 30, 54, .18);
    color: var(--navy-blue);
  }
  .realisation-section .btn-hero {
    background: var(--navy-blue);
    color: var(--brand-white);
  }
  .realisation-section .btn-hero::before { background: var(--royal-blue); }

  /* Service stories use royal blue as their supporting environment. */
  .service-story-section {
    background:
      radial-gradient(circle at 92% 4%, rgba(245, 158, 11, .2), transparent 32%),
      linear-gradient(150deg, var(--royal-blue) 0%, #0D3A69 100%);
  }
  .service-story-section .service-story-head h2 { color: var(--brand-white); }
  .service-story-section .service-story-head .lead { color: rgba(255, 255, 255, .76); }
  .service-story-section .service-story-head .eyebrow { color: var(--brand-gold); }
  .service-story-section .service-story-head .eyebrow::before { background: var(--brand-gold); }
  .service-story-card { border-color: rgba(245, 158, 11, .24); }

  /* Gold highlights stay high-contrast and intentional. */
  .btn-hero,
  .nav-cta,
  .floating-cta {
    background: var(--brand-gold);
    color: var(--navy-blue);
  }
  .btn-hero:hover,
  .nav-cta:hover,
  .floating-cta:hover { background: var(--orange-bright); }
  .btn-hero::before { background: var(--orange-bright); }
  ::selection { background: var(--brand-gold); color: var(--navy-blue); }

  /* Finish the page in navy instead of returning to a large white footer. */
  .footer {
    background:
      radial-gradient(circle at 12% 10%, rgba(11, 45, 82, .8), transparent 38%),
      var(--navy-blue);
    border-top-color: rgba(245, 158, 11, .35);
    color: var(--brand-white);
  }
  .footer :is(.footer-brand-name, .footer-brand-name small, .footer-tag, .footer-col a) {
    color: var(--brand-white);
  }
  .footer :is(.footer-tag, .footer-col a, .footer-brand-name small) { opacity: .76; }
  .footer :is(.footer-head, .footer-sig) { color: var(--brand-gold); }
  .footer-bottom { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .58); }
}

/* ============================================================================
   V7.3 - ACTIVE FINAL CASCADE
   50% Midnight Navy · 30% White · 15% Smart Energy Gold · 5% Tech/Royal Blue
   ============================================================================ */
@media screen {
  .section-ivory {
    background:
      radial-gradient(circle at 90% 8%, rgba(245, 158, 11, .08), transparent 26%),
      var(--brand-white);
    color: var(--navy-blue);
    box-shadow: inset 0 4px 0 rgba(11, 45, 82, .9);
  }
  .section-ivory .section-head :is(h1, h2, h3, h4),
  .section-ivory > .wrap > :is(h1, h2, h3, h4),
  .section-ivory .solution-family-head h2,
  .section-ivory .service-story-head h2 { color: var(--navy-blue); }
  .section-ivory .section-head :is(p, .lead),
  .section-ivory > .wrap > .lead,
  .section-ivory .solution-family-head p,
  .section-ivory .service-story-head .lead { color: var(--ink-soft); }
  .section-ivory :is(.eyebrow, .label-ink),
  .section-ivory .section-head em,
  .section-ivory .solution-family-head em { color: var(--brand-gold); }
  .section-ivory .eyebrow::before { background: var(--brand-gold); }
  .section-ivory .solution-family-head > a {
    border-color: rgba(11, 45, 82, .28);
    background: var(--brand-white);
    color: var(--navy-blue);
  }
  .section-ivory .solution-family-head > a:hover {
    border-color: var(--royal-blue);
    background: var(--royal-blue);
    color: var(--brand-white);
  }

  .service-story-section {
    background:
      linear-gradient(90deg, var(--royal-blue) 0 5px, transparent 5px),
      radial-gradient(circle at 94% 6%, rgba(245, 158, 11, .09), transparent 28%),
      var(--brand-white);
  }
  .service-story-section .service-story-head h2 { color: var(--navy-blue); }
  .service-story-section .service-story-head .lead { color: var(--ink-soft); }
  .service-story-section .service-story-head .eyebrow { color: var(--brand-gold); }
  .service-story-section .service-story-head .eyebrow::before { background: var(--brand-gold); }
  .service-story-section .service-story-card {
    background: var(--brand-white);
    border-color: rgba(11, 45, 82, .16);
    box-shadow: 0 18px 50px rgba(7, 30, 54, .10);
  }

  .section-ivory :is(.sl-feature, .sl-spec-wrap, .resource-card, .service-story-card,
    .testimonial, .leader, .team-card, .case-index-card, .case-detail-card,
    .connected-principles article, .connected-feature, .bathroom-card,
    .og-service-card, .og-process article) {
    background: var(--brand-white);
    border-color: rgba(11, 45, 82, .14);
    box-shadow: 0 18px 50px rgba(7, 30, 54, .09);
  }
  .section-ivory :is(.sl-features, .logo-grid, .partners, .og-service-grid) {
    border-color: rgba(11, 45, 82, .12);
    background: rgba(11, 45, 82, .08);
  }

  .manifesto {
    background:
      radial-gradient(circle at 86% 18%, rgba(245, 158, 11, .18), transparent 34%),
      linear-gradient(145deg, var(--royal-blue) 0%, #0D3A69 100%);
  }
  .manifesto :is(h1, h2, h3, h4, p, .lead, .label-ink) { color: var(--brand-white); }
  .manifesto :is(.eyebrow, .manifesto-decorator),
  .manifesto-quote em { color: var(--brand-gold) !important; }
  .manifesto-side { border-color: rgba(255, 255, 255, .24); }

  .trust-bar-pro,
  .trust-bar,
  .realisation-section {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 48%),
      var(--brand-gold);
  }

  .section-paper {
    background:
      radial-gradient(circle at 92% 10%, rgba(245, 158, 11, .10), transparent 28%),
      linear-gradient(145deg, var(--navy-blue) 0%, #092847 100%);
  }
  .footer {
    background:
      radial-gradient(circle at 12% 10%, rgba(11, 45, 82, .58), transparent 34%),
      var(--navy-blue);
  }
}

/* ============================================================================
   V7.4 - ACTIVE FINAL OVERRIDE
   Gold remains a ribbon/highlight and no longer fills content sections.
   ============================================================================ */
@media screen {
  .trust-bar-pro,
  .trust-bar {
    background: linear-gradient(180deg, var(--brand-white), #F7F8FB);
    color: var(--navy-blue);
    border-top: 0;
    border-bottom: 1px solid rgba(7, 30, 54, .12);
    box-shadow: inset 0 6px 0 var(--brand-gold);
  }
  .trust-bar-pro :is(h2, h3, h4, p, span),
  .trust-bar :is(h2, h3, h4, p, span) { color: var(--navy-blue); }
  .trust-bar-pro :is(.eyebrow, .tb-meta, .cred-text small),
  .trust-bar :is(.eyebrow, .tb-meta, .cred-text small) { color: var(--brand-gold); }
  .trust-bar-pro .eyebrow::before,
  .trust-bar .eyebrow::before { background: var(--brand-gold); }
  .trust-bar-pro :is(.cred, .cert-badge, .partner),
  .trust-bar :is(.cred, .cert-badge, .partner) {
    background: var(--brand-white);
    border-color: rgba(7, 30, 54, .13);
  }

  .realisation-section {
    background:
      radial-gradient(circle at 92% 12%, rgba(11, 45, 82, .06), transparent 30%),
      var(--brand-white);
    color: var(--navy-blue);
    box-shadow: inset 0 6px 0 var(--brand-gold);
  }
  .realisation-copy :is(h2, h3, p, .lead) { color: var(--navy-blue); }
  .realisation-copy .eyebrow { color: var(--brand-gold); }
  .realisation-copy .eyebrow::before { background: var(--brand-gold); }
  .realisation-list li {
    background: var(--brand-white);
    border-color: rgba(7, 30, 54, .13);
    color: var(--ink-soft);
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, .9);
  }
  .realisation-section .btn-hero {
    background: var(--brand-gold);
    color: var(--navy-blue);
  }
  .realisation-section .btn-hero::before { background: var(--orange-bright); }
}

/* ============================================================================
   V7.5 - HOMEPAGE BRAND MASTHEAD
   The full company name is a first-screen identity statement, not a small tag.
   ============================================================================ */
.hero-v2.has-realistic-bg .hero-inner-v2 {
  grid-template-rows: auto auto;
}

.hero-v2.has-realistic-bg .hero-company-line {
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  min-height: clamp(70px, 7vw, 96px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(18px, 2.3vw, 28px) clamp(22px, 3.5vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, .96) 0 7px, transparent 7px),
    linear-gradient(110deg, rgba(7, 30, 54, .94), rgba(11, 45, 82, .78));
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
  color: #fff;
  font-family: var(--f-mono);
  font-size: clamp(15px, 1.55vw, 23px);
  font-weight: 700;
  letter-spacing: clamp(.08em, .13vw, .16em);
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-v2.has-realistic-bg .hero-company-line::after {
  content: '';
  position: absolute;
  left: clamp(22px, 3.5vw, 48px);
  right: clamp(22px, 3.5vw, 48px);
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-gold), rgba(245, 158, 11, 0));
}

.hero-v2.has-realistic-bg .hero-company-line > span {
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.hero-v2.has-realistic-bg .hero-company-line strong {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-left: 1px solid rgba(245, 158, 11, .6);
  color: var(--brand-gold);
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .hero-v2.has-realistic-bg .hero-inner-v2 {
    padding-top: 12px !important;
  }

  .hero-v2.has-realistic-bg .hero-company-line {
    min-height: 86px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 17px 18px 17px 24px;
    border-radius: 14px;
    font-size: clamp(13px, 4vw, 17px);
    letter-spacing: .08em;
  }

  .hero-v2.has-realistic-bg .hero-company-line strong {
    padding: 0;
    border-left: 0;
    font-size: 9px;
  }
}

/* ============================================================================
   V8 · SHS ENTERPRISE EXPERIENCE SYSTEM
   A single final presentation layer for the entire site. The visual language is
   intentionally calm and product-led: navy authority, white reading surfaces,
   precise gold signals, consistent imagery, and one typographic hierarchy.
   ============================================================================ */
@media screen {
  :root {
    --max: 1320px;
    --gutter: clamp(20px, 4vw, 64px);
    --nav-h: 82px;
    --surface: #FFFFFF;
    --surface-soft: #F5F7FA;
    --surface-blue: #EEF3F8;
    --text: #071E36;
    --text-muted: #4E6073;
    --gold-ink: #A85D00;
    --stroke: rgba(7, 30, 54, .12);
    --stroke-dark: rgba(255, 255, 255, .14);
    --shadow-sm: 0 10px 32px rgba(7, 30, 54, .08);
    --shadow-md: 0 24px 70px rgba(7, 30, 54, .12);
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
  }

  html { scroll-padding-top: calc(var(--nav-h) + 24px); }
  body {
    background: var(--surface);
    color: var(--text-muted);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
  }

  .display, h1, h2, h3, h4,
  .hero-title-serif,
  .page-hero h1,
  .page-hero-meta-val,
  .manifesto-quote,
  .testimonial-text {
    font-family: var(--f-display) !important;
    font-style: normal !important;
    color: var(--text);
    text-wrap: balance;
  }
  h1 { font-size: clamp(48px, 6vw, 84px); line-height: .98; letter-spacing: -.045em; }
  h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
  h3 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -.03em; }
  h4 { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.18; letter-spacing: -.02em; }
  :is(h1, h2, h3, h4) em {
    color: var(--brand-gold) !important;
    font-family: inherit !important;
    font-style: normal !important;
    font-weight: inherit !important;
  }
  p, p.lead { color: var(--text-muted); }
  p.lead { max-width: 66ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; }

  .eyebrow, .label-ink, .div-num, .case-kicker, .sector-num,
  .page-hero-meta-label, .hero-stat-label, .hs-label {
    font-family: var(--f-body) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .eyebrow { color: var(--brand-gold); gap: 12px; }
  .eyebrow::before { width: 32px; height: 2px; background: var(--brand-gold); }

  /* Navigation: one clear enterprise bar on every page. */
  .nav, .nav.on-dark, .nav.on-light {
    height: var(--nav-h);
    color: #fff;
    background: linear-gradient(180deg, rgba(7, 30, 54, .96), rgba(7, 30, 54, .88));
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
  .nav.scrolled, .nav.on-dark.scrolled, .nav.on-light.scrolled {
    background: rgba(7, 30, 54, .97);
    border-bottom-color: rgba(245, 158, 11, .30);
    box-shadow: 0 12px 34px rgba(3, 16, 29, .16);
  }
  .nav-row { gap: clamp(20px, 2.6vw, 44px); }
  .nav-logo { min-width: 242px; gap: 13px; }
  .nav-logo-img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; }
  .nlt-eyebrow { color: var(--brand-gold) !important; opacity: 1 !important; }
  .nlt-main { color: #fff !important; font-size: 13px; line-height: 1.12; letter-spacing: -.01em; }
  .nav-links { gap: 0; }
  .nav-links a {
    color: rgba(255, 255, 255, .78);
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
  }
  .nav-links a:hover, .nav-links a.active { color: #fff !important; }
  .nav-links > a.active::after,
  .nav-links > .nav-item > a:hover::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    background: var(--brand-gold);
  }
  .nav-cta {
    min-width: max-content;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--brand-gold) !important;
    color: var(--navy-blue) !important;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245, 158, 11, .26); }
  .dropdown-menu {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(7, 30, 54, .10);
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 28px 80px rgba(7, 30, 54, .18);
  }
  .dropdown-menu a { border-radius: 11px; color: var(--text) !important; }
  .dropdown-menu a:hover { background: var(--surface-soft); }
  .dropdown-menu a span { color: var(--text-muted); }
  .dropdown-kicker { color: var(--brand-gold); }

  /* Home hero: simplify the first screen and restore the content hierarchy. */
  .hero.hero-v2.has-realistic-bg {
    min-height: 880px;
    padding: calc(var(--nav-h) + 42px) 0 42px;
    background: var(--navy-blue);
  }
  .hero-v2.has-realistic-bg .realistic-hero-bg { opacity: .38; filter: saturate(.78) contrast(1.04); }
  .hero-v2.has-realistic-bg .realistic-hero-bg::after {
    background:
      linear-gradient(90deg, rgba(7, 30, 54, .98) 0%, rgba(7, 30, 54, .90) 52%, rgba(7, 30, 54, .68) 100%),
      linear-gradient(180deg, rgba(7, 30, 54, .08), rgba(7, 30, 54, .84));
  }
  .hero-v2.has-realistic-bg :is(.hero-mesh, .hero-grain, .hero-noise, .hero-lines, .hero-constellation, .hero-meta-top) { display: none; }
  .hero-v2.has-realistic-bg .hero-inner-v2 {
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .82fr);
    grid-template-rows: auto auto;
    column-gap: clamp(44px, 5vw, 76px) !important;
    row-gap: 34px !important;
    align-items: center;
    padding-top: 0 !important;
  }
  .hero-v2.has-realistic-bg .hero-company-line {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 15px 20px 15px 24px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-left: 5px solid var(--brand-gold);
    border-radius: 12px;
    background: rgba(7, 30, 54, .62);
    box-shadow: none;
    backdrop-filter: blur(14px);
    color: #fff;
    font-family: var(--f-display);
    font-size: clamp(17px, 1.55vw, 23px);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    text-transform: none;
  }
  .hero-v2.has-realistic-bg .hero-company-line::after { display: none; }
  .hero-v2.has-realistic-bg .hero-company-line strong {
    padding: 5px 0 5px 18px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    color: var(--brand-gold);
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
  }
  .hero-v2.has-realistic-bg .hero-left { gap: 20px !important; }
  .hero-v2.has-realistic-bg .hero-eyebrow {
    width: max-content;
    max-width: 100%;
    padding: 9px 13px;
    border: 1px solid rgba(245, 158, 11, .42);
    border-radius: 999px;
    background: rgba(7, 30, 54, .54);
    color: rgba(255, 255, 255, .84) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
  }
  .hero-v2.has-realistic-bg .hero-title,
  .hero-v2.has-realistic-bg .hero-title-serif {
    max-width: 13ch;
    margin: 0;
    color: #fff;
    font-family: var(--f-display) !important;
    font-size: clamp(50px, 5.25vw, 76px) !important;
    font-weight: 800 !important;
    line-height: .98;
    letter-spacing: -.048em;
  }
  .hero-v2.has-realistic-bg .hero-title em { color: var(--brand-gold) !important; }
  .hero-v2.has-realistic-bg .hero-title.hero-title-serif em {
    color: var(--brand-gold) !important;
    font-family: var(--f-display) !important;
    font-style: normal !important;
    font-weight: 800 !important;
  }
  .hero-v2.has-realistic-bg .hero-sub {
    max-width: 60ch;
    color: rgba(255, 255, 255, .74);
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.62;
  }
  .hero-v2.has-realistic-bg .hero-arrows { margin-top: 4px !important; }
  .btn-hero, .btn-ghost {
    min-height: 52px;
    justify-content: center;
    padding: 15px 22px;
    border-radius: 11px;
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
  }
  .btn-hero { background: var(--brand-gold); color: var(--navy-blue); box-shadow: 0 12px 30px rgba(245, 158, 11, .18); }
  .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .30); }
  .hero-v2.has-realistic-bg .hero-divisions-v2 { gap: 9px !important; padding: 0 !important; }
  .hero-v2.has-realistic-bg .hd-tile {
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: rgba(7, 30, 54, .62);
    box-shadow: none;
    backdrop-filter: blur(10px);
  }
  .hero-v2.has-realistic-bg .hd-tile::before { opacity: .18; }
  .hero-v2.has-realistic-bg .hd-tile:hover {
    transform: translateX(-4px);
    border-color: rgba(245, 158, 11, .70);
    background: rgba(11, 45, 82, .92);
  }
  .hd-icon { width: 38px; height: 38px; border-radius: 9px; }
  .hd-title { font-family: var(--f-display); font-size: 15px; font-weight: 800; }
  .hd-desc { font-family: var(--f-body); font-size: 10px; letter-spacing: .07em; }
  .hero-stats-strip {
    margin-top: 34px;
    padding-top: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    background: rgba(7, 30, 54, .48);
    overflow: hidden;
    backdrop-filter: blur(12px);
  }
  .hs-item { min-height: 102px; padding: 20px 24px; border-right-color: rgba(255, 255, 255, .12); }
  .hs-val { font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 42px); font-weight: 800; }
  .hs-val, .hs-val em, .hs-val sup,
  .metric-num, .metric-num em, .metric-num sup {
    font-family: var(--f-display) !important;
    font-style: normal !important;
    font-weight: 800 !important;
  }

  /* Trust and logo rails are compact, quiet evidence rather than decoration. */
  .marquee { padding: 22px 0 !important; background: #fff; border-color: var(--stroke); }
  .marquee-track { gap: 58px; animation-duration: 58s; }
  .marquee-link { min-width: 132px; gap: 8px; }
  .marquee-logo { max-height: 34px; max-width: 116px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: .25s ease; }
  .marquee-link:hover .marquee-logo { filter: grayscale(0); opacity: 1; transform: none; }
  .marquee-url { font-family: var(--f-body); font-size: 9px; letter-spacing: .08em; }
  .trust-bar, .trust-bar-pro {
    padding: 58px 0 62px;
    background: var(--surface-soft);
    box-shadow: inset 0 3px 0 var(--brand-gold);
  }
  .trust-bar-head { max-width: 820px; margin-bottom: 32px; }
  .trust-bar-head p { margin-top: 12px; max-width: 65ch; }
  .cred-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .cred {
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--stroke) !important;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: none;
  }
  .cred-mark { width: 34px; height: 34px; }
  .cred-text strong { color: var(--text); font-family: var(--f-display); font-size: 14px; }
  .cred-text small { color: var(--text-muted) !important; font-size: 10px; }

  /* Shared section rhythm and reading surfaces. */
  .section { padding: clamp(78px, 8vw, 118px) 0; }
  .section-paper, .section-ivory, .service-story-section {
    color: var(--text);
    background: var(--surface) !important;
    box-shadow: none;
  }
  .section-paper + .section-paper,
  .section-ivory + .section-ivory { border-top: 1px solid var(--stroke); }
  .section-paper :is(h1, h2, h3, h4, p, .lead),
  .section-ivory :is(h1, h2, h3, h4, p, .lead),
  .service-story-section :is(h1, h2, h3, h4, p, .lead) { color: revert; }
  .section-paper :is(h1, h2, h3, h4),
  .section-ivory :is(h1, h2, h3, h4),
  .service-story-section :is(h1, h2, h3, h4) { color: var(--text) !important; }
  .section-paper :is(p, .lead),
  .section-ivory :is(p, .lead),
  .service-story-section :is(p, .lead) { color: var(--text-muted) !important; }
  .section-paper :is(.eyebrow, .label-ink, h1 em, h2 em, h3 em, h4 em),
  .section-ivory :is(.eyebrow, .label-ink, h1 em, h2 em, h3 em, h4 em),
  .service-story-section :is(.eyebrow, .label-ink, h1 em, h2 em, h3 em, h4 em),
  .trust-bar :is(.eyebrow, .label-ink),
  .trust-bar-pro :is(.eyebrow, .label-ink),
  .realisation-section :is(.eyebrow, .label-ink) { color: var(--gold-ink) !important; }
  .section-deep {
    background: linear-gradient(145deg, var(--navy-blue), #0A294A);
    box-shadow: inset 0 3px 0 var(--brand-gold);
  }
  .section-deep :is(h1, h2, h3, h4) { color: #fff !important; }
  .section-deep :is(p, .lead) { color: rgba(255, 255, 255, .70) !important; }
  .section-head {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
    gap: clamp(36px, 6vw, 90px);
    margin-bottom: clamp(44px, 5vw, 68px);
    align-items: end;
  }
  .section-head .eyebrow { margin-bottom: 18px; }
  .section-head h2 { max-width: 14ch; }

  /* Product and industry cards share a deliberate image-and-copy system. */
  .divisions { gap: 18px; }
  .div-card, .div-card.has-bg {
    min-height: 330px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-md);
    background: var(--navy-blue);
    box-shadow: var(--shadow-sm);
    transform: none;
  }
  .div-card.span-8 { min-height: 370px; }
  .divisions > .div-card:last-child { grid-column: 1 / -1; min-height: 350px; }
  .div-card.has-bg::before {
    inset: 0;
    opacity: .34;
    transform: none;
    background-position: center;
  }
  .div-card.has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
    transform: none;
    background: linear-gradient(180deg, rgba(7, 30, 54, .32), rgba(7, 30, 54, .96));
  }
  .div-card.has-bg > * { position: relative; z-index: 1; }
  .div-card.has-bg:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, .58);
    box-shadow: var(--shadow-md);
  }
  .div-card.has-bg:hover::before { opacity: .42; transform: scale(1.025); }
  .div-card h3 { margin-top: 12px; font-size: clamp(27px, 2.5vw, 38px); font-weight: 800; }
  .div-card p { max-width: 62ch; margin-top: 14px; font-size: 15px; line-height: 1.62; }
  .div-tags { gap: 7px; }
  .div-tags span, .sector-tags span {
    padding: 6px 9px;
    border-radius: 999px;
    font-family: var(--f-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
  }

  .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .sector {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 14px 38px rgba(7, 30, 54, .07);
  }
  .sector:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, .46);
    background: #fff !important;
    box-shadow: var(--shadow-md);
  }
  .sector-media { height: 210px; }
  .sector-media::after { background: linear-gradient(180deg, transparent 40%, rgba(7, 30, 54, .72)); }
  .sector-img { width: 100%; height: 100%; object-fit: cover; }
  .sector-body { min-height: 250px; padding: 25px; background: #fff !important; }
  .sector-body h3, .sector:hover .sector-body h3 { color: var(--text) !important; font-size: 27px; }
  .sector-body p, .sector:hover .sector-body p { color: var(--text-muted) !important; font-size: 14px; }
  .sector-tags span, .sector:hover .sector-body .sector-tags span { color: var(--tech-blue) !important; background: var(--surface-blue); }
  .sector-media .sector-ico { background: var(--brand-gold); color: var(--navy-blue); border: 0; }

  .solution-family-head { gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--stroke); }
  .solution-family-head > img { width: 50px; height: 50px; }
  .solution-family-head h2 { margin-top: 10px; font-size: clamp(34px, 4vw, 56px); }
  .solution-family-head > a { border-radius: 10px; font-weight: 700; }
  .solution-family-grid, .solution-family-grid.solution-family-grid-four { gap: 20px; }
  .solution-family-grid > a {
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  .solution-family-grid > a:hover { transform: translateY(-5px); border-color: rgba(245, 158, 11, .48); box-shadow: var(--shadow-md); }
  .solution-family-grid img { height: 240px; object-fit: cover; }
  .solution-family-grid > a > div { padding: 24px; }
  .solution-family-grid h3 { font-size: 27px; }
  .solution-family-grid p { font-size: 14px; line-height: 1.62; }

  /* Editorial evidence sections. */
  .realisation-section {
    padding: clamp(72px, 7vw, 104px) 0 !important;
    background: var(--surface-soft) !important;
    box-shadow: inset 0 3px 0 var(--brand-gold);
  }
  .realisation-frame { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .realisation-frame::after { border-radius: var(--radius-lg); }
  .realisation-list li { border-radius: 11px; box-shadow: none; }
  .manifesto {
    padding: clamp(76px, 8vw, 112px) 0;
    background: linear-gradient(145deg, var(--tech-blue), var(--navy-blue));
    border-color: rgba(255, 255, 255, .10);
    box-shadow: inset 0 3px 0 var(--brand-gold);
  }
  .manifesto-quote { color: #fff !important; font-size: clamp(38px, 4.8vw, 68px); font-weight: 800 !important; }
  .manifesto-side p { color: rgba(255, 255, 255, .72) !important; }
  .manifesto-decorator { color: var(--brand-gold); }
  .code-grid { gap: 16px; }
  .code-card {
    min-height: 280px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .055);
    box-shadow: none;
  }
  .code-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); border-color: rgba(245, 158, 11, .48); }
  .code-card h4 { color: #fff !important; }
  .code-card p { color: rgba(255, 255, 255, .68) !important; }

  .metrics { border: 1px solid var(--stroke); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
  .metric { min-height: 170px; padding: 28px; border-right-color: var(--stroke); }
  .metric-num { font-size: clamp(42px, 4.5vw, 66px); }

  .cases { gap: 46px 24px; }
  .case-cover { overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
  .case.wide .case-cover { aspect-ratio: 16 / 6; }
  .case:not(.wide) .case-cover { aspect-ratio: 16 / 10; }
  .case-cover-inner { padding: 30px; }
  .case-body { padding: 20px 4px 0; }
  .case-body h4 { font-size: 24px; line-height: 1.18; }
  .case-big { font-size: clamp(38px, 4vw, 62px); }
  .case-name { font-size: clamp(20px, 2vw, 29px); }

  .principles { gap: 16px; border-top: 0; }
  .principle {
    min-height: 250px;
    padding: 28px;
    border: 1px solid var(--stroke) !important;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
  }
  .principle h3 { font-weight: 800; font-size: 26px; }
  .testimonial-grid { gap: 20px; }
  .testimonial {
    min-height: 380px;
    padding: 30px;
    border: 1px solid var(--stroke) !important;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm) !important;
  }
  .testimonial-mark { font-size: 42px; }
  .testimonial-text { font-family: var(--f-body) !important; font-size: 18px; line-height: 1.55; font-weight: 500 !important; }
  .leaders { gap: 20px; }
  .leader, .leader-featured {
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }
  .leader:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .leader-photo { aspect-ratio: 4 / 3; object-fit: cover; }

  .partners.partners-pro { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; background: transparent !important; }
  .partners.partners-pro .partner {
    min-height: 132px;
    padding: 18px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
  }
  .partners.partners-pro .partner:hover { transform: translateY(-3px); border-color: rgba(245, 158, 11, .48); box-shadow: var(--shadow-sm); }

  .cta-strip {
    padding: clamp(78px, 8vw, 112px) 0;
    background: linear-gradient(145deg, #071E36 0%, #0B2D52 100%);
    box-shadow: inset 0 4px 0 var(--brand-gold);
  }
  .cta-strip::before { opacity: .35; }
  .cta-inner h2 { max-width: 13ch; font-size: clamp(40px, 5.2vw, 70px); }
  .cta-lead { max-width: 64ch; margin-top: 24px; color: rgba(255, 255, 255, .72) !important; }
  .cta-actions { margin-top: 32px; }
  .cta-contacts { margin-top: 58px; }
  .cta-contact { min-height: 154px; padding: 24px; }

  .footer { padding: 68px 0 34px; background: var(--navy-blue); }
  .footer-top { gap: 34px; }
  .footer-brand-img { width: 56px; height: 56px; }
  .footer-col a { color: rgba(255, 255, 255, .72) !important; }
  .footer-col a:hover { color: var(--brand-gold) !important; }

  /* Internal-page heroes and cards now match the homepage system. */
  .page-hero, .page-hero.has-realistic-bg {
    min-height: min(720px, 78vh);
    padding: calc(var(--nav-h) + 70px) 0 72px;
    background: var(--navy-blue);
  }
  .page-hero .page-hero-bg { opacity: .34 !important; filter: saturate(.78); }
  .page-hero .page-hero-overlay {
    background: linear-gradient(90deg, rgba(7, 30, 54, .98), rgba(7, 30, 54, .82) 58%, rgba(7, 30, 54, .46));
  }
  .page-hero h1 {
    max-width: 14ch;
    color: #fff !important;
    font-size: clamp(48px, 6.3vw, 86px) !important;
    font-weight: 800 !important;
    line-height: .98;
    letter-spacing: -.046em;
  }
  .page-hero h1 em {
    color: var(--brand-gold) !important;
    font-family: var(--f-display) !important;
    font-style: normal !important;
    font-weight: 800 !important;
  }
  .page-hero p.lead { color: rgba(255, 255, 255, .76) !important; font-size: clamp(17px, 1.35vw, 20px); }
  .page-hero aside > div > span:first-child {
    font-family: var(--f-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
  }
  .page-hero aside > div > span:last-child {
    color: #fff !important;
    font-family: var(--f-display) !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
  }
  .page-hero-meta { margin-top: 38px; border-top-color: rgba(255, 255, 255, .18); }
  .page-hero-meta-row { padding: 18px 0; border-bottom-color: rgba(255, 255, 255, .13); }
  .page-hero-meta-val, .page-hero-meta-val em {
    color: #fff !important;
    font-family: var(--f-display) !important;
    font-size: clamp(28px, 3.2vw, 48px);
    font-style: normal !important;
    font-weight: 800 !important;
  }
  .case-hero { min-height: 650px; padding: calc(var(--nav-h) + 70px) 0 70px; }
  .case-hero h1 { color: #fff; font-size: clamp(48px, 6vw, 82px); font-weight: 800; }
  .case-meta-grid div { border-radius: 13px; }
  .case-detail-card, .resource-card, .service-story-card,
  .connected-principles article, .connected-feature, .bathroom-card,
  .og-service-card, .og-process article, .sl-feature, .sl-spec-wrap {
    border-radius: var(--radius-md) !important;
    border-color: var(--stroke) !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .service-story-media img, .case-visual img, .connected-visual img,
  .og-story-card img { object-fit: cover; }
  .floating-cta {
    right: 16px;
    bottom: 16px;
    min-width: 196px;
    max-width: none;
    min-height: 50px;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 12px;
    box-shadow: 0 14px 34px rgba(7, 30, 54, .20);
  }
  .floating-cta > span:last-child { white-space: nowrap; }
}

@media (max-width: 1180px) {
  .nav-logo { min-width: 210px; }
  .nav-links a { padding-inline: 9px; font-size: 12px; }
  .hero-v2.has-realistic-bg .hero-inner-v2 { grid-template-columns: minmax(0, 1fr) minmax(340px, .78fr); }
  .partners.partners-pro { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 1024px) {
  .nav-logo { min-width: 0; }
  .nav-links, .nav.on-light .nav-links {
    top: var(--nav-h);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    padding: 18px var(--gutter) 30px;
    background: rgba(7, 30, 54, .99);
  }
  .nav-links a { color: #fff !important; font-family: var(--f-display); font-size: 20px; }
  .dropdown-menu { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); box-shadow: none; }
  .dropdown-menu a { color: #fff !important; font-size: 15px; }
  .dropdown-menu a span { color: rgba(255, 255, 255, .62); }
  .hero.hero-v2.has-realistic-bg { min-height: 0; padding-bottom: 52px; }
  .hero-v2.has-realistic-bg .hero-inner-v2 { grid-template-columns: 1fr; }
  .hero-v2.has-realistic-bg .hero-title,
  .hero-v2.has-realistic-bg .hero-title-serif { max-width: 14ch; }
  .hero-v2.has-realistic-bg .hero-divisions-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .section-head h2 { max-width: 16ch; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .partners.partners-pro { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cta-contacts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --nav-h: 72px; --gutter: 20px; }
  .nav-logo-img { width: 42px; height: 42px; flex-basis: 42px; }
  .nlt-main { display: none; }
  .hero.hero-v2.has-realistic-bg { padding-top: calc(var(--nav-h) + 24px); }
  .hero-v2.has-realistic-bg .hero-company-line {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 15px 16px 15px 18px;
    border-radius: 10px;
    font-size: 16px;
  }
  .hero-v2.has-realistic-bg .hero-company-line strong { padding: 0; border: 0; }
  .hero-v2.has-realistic-bg .hero-title,
  .hero-v2.has-realistic-bg .hero-title-serif { font-size: clamp(42px, 13vw, 58px) !important; }
  .hero-v2.has-realistic-bg .hero-eyebrow { width: auto; }
  .hero-v2.has-realistic-bg .hero-divisions-v2 { grid-template-columns: 1fr; }
  .hero-v2.has-realistic-bg .hd-tile:nth-child(n+5) { display: none; }
  .hero-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-item { min-height: 88px; padding: 16px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 38px; }
  .divisions { display: grid; grid-template-columns: 1fr; }
  .div-card, .div-card.span-4, .div-card.span-8 { grid-column: auto; min-height: 330px; padding: 24px; }
  .sectors, .solution-family-grid, .solution-family-grid.solution-family-grid-four,
  .testimonial-grid { grid-template-columns: 1fr; }
  .sector-media { height: 210px; }
  .solution-family-head { grid-template-columns: auto 1fr; }
  .solution-family-head > a { grid-column: 1 / -1; width: 100%; text-align: center; }
  .cases { grid-template-columns: 1fr; }
  .case, .case.wide { grid-column: auto; }
  .case.wide .case-cover, .case:not(.wide) .case-cover { aspect-ratio: 4 / 3; }
  .principles { grid-template-columns: 1fr; }
  .metric { min-height: 138px; padding: 20px; }
  .partners.partners-pro { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cta-contacts { grid-template-columns: 1fr; }
  .cta-contact { min-height: 0; }
  .page-hero, .page-hero.has-realistic-bg { min-height: 620px; padding-top: calc(var(--nav-h) + 48px); }
  .page-hero h1 { font-size: clamp(42px, 13vw, 62px) !important; }
  .floating-cta { padding: 11px 14px; }
}

@media (max-width: 430px) {
  .hero-stats-strip { grid-template-columns: 1fr; }
  .hs-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .10); }
  .partners.partners-pro { grid-template-columns: 1fr !important; }
}

/* Official SHS contact directory */
.official-contact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.official-contact-card {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  color: var(--navy-blue);
  text-decoration: none;
  border-top: 3px solid var(--brand-gold);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.official-contact-card:hover,
.official-contact-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-md);
  outline: none;
}
.official-contact-card h4 { margin-top: 18px; }
.official-contact-card p {
  margin-top: auto;
  color: var(--navy-blue) !important;
  font-family: var(--f-display);
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -.02em;
}
.official-contact-card small {
  display: block;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}
.office a[href^="tel:"] {
  color: inherit;
  text-decoration-color: rgba(245, 158, 11, .65);
  text-underline-offset: 3px;
}
@media (max-width: 1100px) {
  .official-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .official-contact-grid { grid-template-columns: 1fr; }
  .official-contact-card { min-height: 180px; }
}

/* ============================================================================
   V9 · FINAL 65 / 15 / 20 COLOUR SYSTEM
   65% blue field (navy-led) · 15% royal-blue support · 20% white reading space.
   Gold is deliberately excluded from the area ratio: it is a premium signal
   used for ribbons, rules, icons, selected words and primary actions only.
   This final block is the sole colour authority after the legacy layout layers.
   ============================================================================ */
@media screen {
  :root {
    --navy-950: #04182C;
    --navy-900: #071E36;
    --navy-850: #082542;
    --royal-700: #0B2D52;
    --royal-650: #104273;
    --white-100: #FFFFFF;
    --white-95: #F5F7FA;
    --gold-500: #F59E0B;
    --gold-readable: #A85D00;
    --on-blue: #FFFFFF;
    --on-blue-muted: rgba(255, 255, 255, .76);
    --on-blue-soft: rgba(255, 255, 255, .62);
    --on-white: #071E36;
    --on-white-muted: #41566B;
    --blue-line: rgba(255, 255, 255, .15);
    --white-line: rgba(7, 30, 54, .13);
  }

  body {
    background: var(--navy-900);
    color: var(--on-white-muted);
  }

  /* The fixed frame is consistently navy so page transitions never flash or
     expose an unrelated colour. Royal blue is reserved for secondary layers. */
  .nav, .nav.on-dark, .nav.on-light,
  .nav.scrolled, .nav.on-dark.scrolled, .nav.on-light.scrolled {
    background: rgba(7, 30, 54, .98);
    color: var(--on-blue);
    border-bottom-color: rgba(245, 158, 11, .30);
  }
  .nav-links a { color: rgba(255, 255, 255, .78); }
  .nav-links a:hover, .nav-links a.active { color: var(--on-blue) !important; }
  .dropdown-menu {
    background: rgba(7, 30, 54, .99);
    border-color: var(--blue-line);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  }
  .dropdown-menu a { color: var(--on-blue) !important; }
  .dropdown-menu a span { color: var(--on-blue-soft); }
  .dropdown-menu a:hover { background: rgba(11, 45, 82, .92); }
  .dropdown-kicker { color: var(--gold-500); }

  /* Navy is the main 65% field. */
  .hero.hero-v2.has-realistic-bg,
  .page-hero, .page-hero.has-realistic-bg,
  .case-hero,
  .section-paper,
  .section-deep,
  .one-card-section,
  .grms-section,
  .hotel-robotics-band,
  .luggage-porter-section,
  .cta-strip,
  .footer {
    color: var(--on-blue);
    background-color: var(--navy-900) !important;
  }
  .section-paper,
  .section-deep,
  .luggage-porter-section {
    background-image:
      radial-gradient(circle at 92% 8%, rgba(16, 66, 115, .34), transparent 30%),
      linear-gradient(145deg, var(--navy-900), var(--navy-850)) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
  }
  .section-deep,
  .one-card-section,
  .grms-section,
  .hotel-robotics-band {
    background-image:
      radial-gradient(circle at 88% 10%, rgba(11, 45, 82, .44), transparent 32%),
      linear-gradient(145deg, var(--navy-950), var(--navy-900)) !important;
  }
  .cta-strip {
    background-image: linear-gradient(135deg, var(--navy-950), var(--navy-900) 68%, var(--royal-700)) !important;
  }
  .footer {
    background-image:
      radial-gradient(circle at 12% 10%, rgba(16, 66, 115, .40), transparent 34%),
      linear-gradient(180deg, var(--navy-900), var(--navy-950)) !important;
  }

  /* Every foreground placed directly on blue is explicitly white. */
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .hotel-robotics-band, .luggage-porter-section, .cta-strip, .footer)
    :is(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--on-blue) !important;
  }
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .hotel-robotics-band, .luggage-porter-section, .cta-strip, .footer)
    :is(p, .lead, li, small) {
    color: var(--on-blue-muted) !important;
  }
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .hotel-robotics-band, .luggage-porter-section, .cta-strip, .footer)
    :is(.eyebrow, .label-ink, em, .solution-item-num, .cta-contact-label,
        .page-hero-meta-val em, .luggage-porter-visual figcaption span) {
    color: var(--gold-500) !important;
  }
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .hotel-robotics-band, .luggage-porter-section) .eyebrow::before {
    background: var(--gold-500);
  }

  /* Royal blue carries the deliberate 15% secondary rhythm. */
  .service-story-section,
  .manifesto,
  .connected-intro,
  .infotainment-section {
    color: var(--on-blue);
    background-color: var(--royal-700) !important;
    background-image:
      radial-gradient(circle at 92% 6%, rgba(245, 158, 11, .10), transparent 26%),
      linear-gradient(145deg, var(--royal-700), var(--royal-650)) !important;
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: none;
  }
  :is(.service-story-section, .manifesto, .connected-intro, .infotainment-section)
    :is(h1, h2, h3, h4, h5, h6) {
    color: var(--on-blue) !important;
  }
  :is(.service-story-section, .manifesto, .connected-intro, .infotainment-section)
    :is(p, .lead, li, small) {
    color: var(--on-blue-muted) !important;
  }
  :is(.service-story-section, .manifesto, .connected-intro, .infotainment-section)
    :is(.eyebrow, .label-ink, em) {
    color: var(--gold-500) !important;
  }

  /* The 20% white allocation is retained for trust, dense reading and profile
     content. These surfaces always carry navy text, never white or pale gold. */
  .section-ivory,
  .trust-bar, .trust-bar-pro,
  .realisation-section,
  .profile-proof-section,
  .bathroom-tech-section,
  .marquee {
    color: var(--on-white);
    background-color: var(--white-100) !important;
    background-image: none !important;
    border-color: var(--white-line);
    box-shadow: none;
  }
  :is(.section-ivory, .trust-bar, .trust-bar-pro, .realisation-section,
      .profile-proof-section, .bathroom-tech-section)
    :is(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--on-white) !important;
  }
  :is(.section-ivory, .trust-bar, .trust-bar-pro, .realisation-section,
      .profile-proof-section, .bathroom-tech-section)
    :is(p, .lead, li, small) {
    color: var(--on-white-muted) !important;
  }
  :is(.section-ivory, .trust-bar, .trust-bar-pro, .realisation-section,
      .profile-proof-section, .bathroom-tech-section)
    :is(.eyebrow, .label-ink, em) {
    color: var(--gold-readable) !important;
  }

  /* Cards on navy and royal-blue fields stay inside the blue family. This is
     the main correction for the previous blue/white patchwork. */
  .section-paper :is(.sector, .principle, .metric, .cat-card, .mvp-card),
  .section-paper .solution-family-grid > a,
  .section-paper .service-story-card,
  .section-paper .team-card,
  .section-deep :is(.code-card, .project-proof-card),
  .service-story-section .service-story-card,
  .infotainment-section .service-story-card,
  .luggage-porter-section .luggage-porter-visual,
  .hotel-robotics-band .robotics-product {
    color: var(--on-blue);
    background: rgba(11, 45, 82, .82) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .16) !important;
  }
  .section-paper .sector-body,
  .section-paper .solution-family-grid > a > div,
  .section-paper .service-story-body,
  .service-story-section .service-story-body,
  .infotainment-section .service-story-body,
  .luggage-porter-section .luggage-porter-visual figcaption {
    background: var(--royal-700) !important;
  }
  :is(.section-paper, .section-deep, .service-story-section,
      .infotainment-section, .luggage-porter-section)
    :is(.sector, .principle, .metric, .cat-card, .mvp-card, .code-card,
        .project-proof-card, .service-story-card, .team-card,
        .solution-family-grid > a, .luggage-porter-visual)
    :is(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--on-blue) !important;
  }
  :is(.section-paper, .section-deep, .service-story-section,
      .infotainment-section, .luggage-porter-section)
    :is(.sector, .principle, .metric, .cat-card, .mvp-card, .code-card,
        .project-proof-card, .service-story-card, .team-card,
        .solution-family-grid > a, .luggage-porter-visual)
    :is(p, li, small) {
    color: var(--on-blue-muted) !important;
  }
  .section-paper .sector-tags span,
  .section-paper .div-tags span,
  .service-story-section .service-path-links a,
  .infotainment-section .service-path-links a {
    color: var(--on-blue) !important;
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .16) !important;
  }

  /* Logo, evidence and long-copy cards remain white by design. Their dark
     foreground is restored locally so inherited blue-section colours cannot
     create invisible or washed-out text. */
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .service-story-section, .infotainment-section)
    :is(.partner, .logo-cell, .cred, .leader, .leader-featured,
        .case-detail-card, .case-index-card, .resource-card,
        .connected-principles article, .connected-feature:not(.connected-feature-dark),
        .bathroom-card, .guest-journey-gallery figure, .og-service-card,
        .og-process article, .sl-feature, .sl-spec-wrap) {
    color: var(--on-white);
    background: var(--white-100) !important;
    border-color: var(--white-line) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .13) !important;
  }
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .service-story-section, .infotainment-section)
    :is(.partner, .logo-cell, .cred, .leader, .leader-featured,
        .case-detail-card, .case-index-card, .resource-card,
        .connected-principles article, .connected-feature:not(.connected-feature-dark),
        .bathroom-card, .guest-journey-gallery figure, .og-service-card,
        .og-process article, .sl-feature, .sl-spec-wrap)
    :is(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--on-white) !important;
  }
  :is(.section-paper, .section-deep, .one-card-section, .grms-section,
      .service-story-section, .infotainment-section)
    :is(.partner, .logo-cell, .cred, .leader, .leader-featured,
        .case-detail-card, .case-index-card, .resource-card,
        .connected-principles article, .connected-feature:not(.connected-feature-dark),
        .bathroom-card, .guest-journey-gallery figure, .og-service-card,
        .og-process article, .sl-feature, .sl-spec-wrap)
    :is(p, .lead, li, small) {
    color: var(--on-white-muted) !important;
  }

  /* Case-study copy and section dividers on navy need explicit foregrounds. */
  .section-paper :is(.case-body, .case-name, .case-big, .case-kicker) { color: var(--on-blue); }
  .section-paper .case-body :is(h3, h4, strong) { color: var(--on-blue) !important; }
  .section-paper .case-body :is(p, li, small) { color: var(--on-blue-muted) !important; }
  .section-paper .solution-family-head { border-bottom-color: var(--blue-line); }
  .section-paper .solution-family-head > a {
    color: var(--on-blue);
    background: var(--royal-700);
    border-color: rgba(255, 255, 255, .20);
  }
  .section-paper .solution-family-head > a:hover {
    color: var(--navy-900);
    background: var(--gold-500);
    border-color: var(--gold-500);
  }

  /* Gold remains a highlight colour, never a content canvas. */
  .trust-bar, .trust-bar-pro, .realisation-section,
  .section-paper, .section-deep, .service-story-section,
  .manifesto, .one-card-section, .grms-section,
  .luggage-porter-section, .cta-strip, .footer {
    position: relative;
    border-top: 0;
    box-shadow: inset 0 4px 0 var(--gold-500);
  }
  :is(.btn-hero, .nav-cta, .floating-cta) {
    background: var(--gold-500) !important;
    color: var(--navy-900) !important;
    border-color: transparent !important;
  }
  :is(.btn-hero, .nav-cta, .floating-cta):hover {
    background: #FBBF24 !important;
    color: var(--navy-900) !important;
  }
  .floating-cta {
    min-width: 0;
    width: 56px;
    max-width: 178px;
    height: 56px;
    padding: 7px;
    gap: 8px;
    overflow: hidden;
    border-radius: 50%;
    font-size: 11px;
    transition: width .3s var(--ease), border-radius .3s var(--ease), transform .3s var(--ease);
  }
  .floating-cta > span:last-child {
    width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: opacity .2s ease;
  }
  .floating-cta:hover,
  .floating-cta:focus-visible {
    width: 178px;
    border-radius: 12px;
  }
  .floating-cta:hover > span:last-child,
  .floating-cta:focus-visible > span:last-child {
    width: auto;
    opacity: 1;
  }
  .btn-ghost {
    color: var(--on-blue);
    border-color: rgba(255, 255, 255, .34);
    background: transparent;
  }
  .section-ivory .btn-ghost,
  .realisation-section .btn-ghost,
  .bathroom-tech-section .btn-ghost {
    color: var(--navy-900);
    border-color: rgba(7, 30, 54, .28);
  }

  /* Media overlays use navy so white captions remain readable regardless of
     the photograph underneath. */
  .hero-v2.has-realistic-bg .realistic-hero-bg::after,
  .page-hero .page-hero-overlay {
    background:
      linear-gradient(90deg, rgba(4, 24, 44, .98), rgba(7, 30, 54, .88) 58%, rgba(11, 45, 82, .58)),
      linear-gradient(180deg, rgba(7, 30, 54, .08), rgba(4, 24, 44, .88));
  }
  .hero-v2.has-realistic-bg .hero-company-line,
  .hero-v2.has-realistic-bg .hd-tile,
  .hero-stats-strip {
    background: rgba(7, 30, 54, .82);
    border-color: rgba(255, 255, 255, .18);
  }
  .hero-v2.has-realistic-bg .hd-tile:hover { background: rgba(11, 45, 82, .96); }

  /* Complete the enterprise type system on the later hotel/offshore modules.
     Their older component rules carried a serif family and lighter weights. */
  :is(.connected-hero-grid h1, .connected-hero-metrics strong,
      .connected-intro h2, .one-card-section h2, .bathroom-tech-section h2,
      .grms-section h2, .infotainment-section h2, .intelligent-service-link h2,
      .connected-principles h3, .guest-journey-gallery figcaption strong,
      .connected-note strong, .connected-feature h3, .bathroom-card h3,
      .grms-signal-grid strong, .service-story-head h2,
      .robotics-product h3, .og-process strong) {
    font-family: var(--f-display) !important;
    font-style: normal !important;
    font-weight: 800 !important;
  }
  .connected-hero-metrics strong,
  .guest-journey-gallery figcaption strong,
  .connected-principles h3,
  .connected-note strong,
  .bathroom-card h3,
  .grms-signal-grid strong,
  .robotics-product h3,
  .og-process strong {
    letter-spacing: -.025em;
  }

  @media (max-width: 1024px) {
    .nav-links, .nav.on-light .nav-links {
      background: var(--navy-900);
      border-bottom-color: rgba(245, 158, 11, .30);
    }
    .dropdown-menu { background: rgba(11, 45, 82, .48); }
  }
  @media (max-width: 720px) {
    .floating-cta {
      width: 54px;
      height: 54px;
      padding: 7px;
      border-radius: 50%;
    }
    .floating-cta:hover,
    .floating-cta:focus-visible { width: 54px; border-radius: 50%; }
    .floating-cta > span:last-child { display: none; }
    .floating-cta .fc-avatar { margin: auto; }
  }
}

/* ============================================================================
   V9.1 · SITE-WIDE VISIBILITY CONTRACT
   Final contrast safeguards added after the full 42-page audit. Component
   foregrounds now follow their own surface instead of inheriting from a dark
   parent section. Gold remains an accent, never the primary reading colour.
   ============================================================================ */
@media screen {
  /* Twenty-five standard content sections relied on the old white body. The
     navy site frame made those transparent sections inherit a dark canvas
     while their copy stayed dark. Give the unmodified section primitive an
     explicit reading surface so every service page remains visible. */
  section[class="section"] {
    color: var(--on-white);
    background: var(--white-100) !important;
  }
  section[class="section"] :is(h1, h2, h3, h4, h5, h6, strong) {
    color: var(--on-white) !important;
  }
  section[class="section"] :is(p, .lead, li, small) {
    color: var(--on-white-muted) !important;
  }
  section[class="section"] :is(.eyebrow, .label-ink, em) {
    color: var(--gold-readable) !important;
  }

  /* Dense profile and evidence cards are deliberate white reading surfaces. */
  :is(.team-card, .leader, .testimonial, .cred, .cert-badge, .partner,
      .logo-cell, .case-index-card, .case-detail-card, .resource-card,
      .connected-principles article, .connected-feature:not(.connected-feature-dark),
      .bathroom-card, .guest-journey-gallery figure, .og-service-card,
      .og-process article, .sl-feature, .sl-spec-wrap, .delivery-step,
      .luggage-flow-step, .porter-safety-list li, .realisation-list li) {
    color: var(--on-white) !important;
    background-color: var(--white-100) !important;
    border-color: var(--white-line) !important;
  }
  :is(.team-card, .leader, .testimonial, .cred, .cert-badge, .partner,
      .logo-cell, .case-index-card, .case-detail-card, .resource-card,
      .connected-principles article, .connected-feature:not(.connected-feature-dark),
      .bathroom-card, .guest-journey-gallery figure, .og-service-card,
      .og-process article, .sl-feature, .sl-spec-wrap, .delivery-step,
      .luggage-flow-step, .porter-safety-list li, .realisation-list li)
    :is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--on-white) !important;
  }
  :is(.team-card, .leader, .testimonial, .cred, .cert-badge, .partner,
      .logo-cell, .case-index-card, .case-detail-card, .resource-card,
      .connected-principles article, .connected-feature:not(.connected-feature-dark),
      .bathroom-card, .guest-journey-gallery figure, .og-service-card,
      .og-process article, .sl-feature, .sl-spec-wrap, .delivery-step,
      .luggage-flow-step, .porter-safety-list li, .realisation-list li)
    :is(p, .lead, li, small, .bio, .creds) {
    color: var(--on-white-muted) !important;
  }
  .team-card .role,
  .connected-principles article > span,
  .guest-journey-gallery figcaption > span {
    color: var(--gold-readable) !important;
  }

  /* The secure porter panel is white, while its three credential-method cards
     remain dark. Keep both levels legible without a broad inherited override. */
  .luggage-porter-section .porter-access-panel {
    color: var(--on-white) !important;
    background: var(--white-100) !important;
    border-color: var(--white-line) !important;
  }
  .luggage-porter-section .porter-access-copy :is(h1, h2, h3, h4, strong) {
    color: var(--on-white) !important;
  }
  .luggage-porter-section .porter-access-copy :is(p, .lead) {
    color: var(--on-white-muted) !important;
  }
  .luggage-porter-section .porter-access-methods article {
    color: var(--on-blue) !important;
    background: var(--navy-900) !important;
  }
  .luggage-porter-section .porter-access-methods article strong {
    color: var(--on-blue) !important;
  }
  .luggage-porter-section .porter-access-methods article p {
    color: var(--on-blue-muted) !important;
  }
  .luggage-porter-section .porter-access-methods article > span {
    color: var(--gold-500) !important;
  }

  /* Timeline titles are div elements, so heading-only dark-surface rules did
     not reach them. Explicit foregrounds keep every year and event readable. */
  .section-paper .timeline .tl-title {
    color: var(--on-blue) !important;
  }
  .section-paper .timeline .tl-entry p {
    color: var(--on-blue-muted) !important;
  }
  .section-paper .timeline .tl-entry p strong {
    color: var(--on-blue) !important;
  }
  .section-paper .timeline::before {
    background: rgba(255, 255, 255, .24);
  }

  /* Make incomplete final logo rows look intentionally open rather than like
     missing navy cells, while retaining fine separators between logos. */
  .section-paper .logo-grid,
  .section-deep .logo-grid {
    background: var(--white-100) !important;
    border-color: var(--white-line) !important;
  }
  .section-paper .logo-grid .logo-cell,
  .section-deep .logo-grid .logo-cell {
    background: var(--white-95) !important;
    box-shadow: inset 0 0 0 1px rgba(7, 30, 54, .06);
  }

  /* Remove the excessive white gap seen between the senior-team introduction
     and the impact section, without compressing either content block. */
  .realisation-section {
    padding: clamp(52px, 6vw, 88px) 0 !important;
  }
  .realisation-grid {
    align-items: center;
  }

  /* Contact-directory cards sit on a navy section but are deliberately white
     reading surfaces, so their foreground must follow the card—not the parent. */
  .section-paper .official-contact-card {
    color: var(--on-white) !important;
    background: var(--white-100) !important;
    border-color: var(--white-line) !important;
    border-top-color: var(--gold-500) !important;
  }
  .section-paper .official-contact-card :is(h3, h4, strong) {
    color: var(--on-white) !important;
  }
  .section-paper .official-contact-card :is(p, small) {
    color: var(--on-white-muted) !important;
  }
  .section-paper .official-contact-card .office-flag {
    color: var(--gold-readable) !important;
  }

  @media (max-width: 720px) {
    .team-card .team-body { padding: 18px 18px 22px; }
    .realisation-section { padding: 48px 0 !important; }
    .section-paper .timeline .tl-title { font-size: 21px; }
  }
}

/* ============================================================================
   V9.2 · HOMEPAGE SERVICE HERO
   Six service-specific hero scenes rotate every six seconds. The foreground
   remains stable, while each scene uses a distinct restrained camera motion.
   ============================================================================ */
@media screen {
  .hero-v2.has-realistic-bg > .hero-bg-rotator {
    opacity: .78 !important;
    overflow: hidden;
    background: var(--navy-900);
  }
  .hero-v2.has-realistic-bg > .hero-bg-rotator::after {
    z-index: 3;
    background:
      linear-gradient(90deg, rgba(4, 24, 44, .92) 0%, rgba(7, 30, 54, .76) 47%, rgba(7, 30, 54, .30) 100%),
      linear-gradient(180deg, rgba(7, 30, 54, .08), rgba(4, 24, 44, .70)) !important;
  }
  .hero-bg-slide {
    position: absolute;
    inset: -2.5%;
    z-index: 0;
    opacity: 0;
    background-position: center;
    background-size: cover;
    transform: scale(1.04);
    transition: opacity 1.15s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }
  .hero-bg-slide.is-active { z-index: 1; opacity: 1; }
  .hero-bg-slide.hero-bg-zoom.is-active { animation: shs-hero-zoom 7.1s ease-out both; }
  .hero-bg-slide.hero-bg-pan-left.is-active { animation: shs-hero-pan-left 7.1s ease-out both; }
  .hero-bg-slide.hero-bg-pan-right.is-active { animation: shs-hero-pan-right 7.1s ease-out both; }
  .hero-bg-slide.hero-bg-rise.is-active { animation: shs-hero-rise 7.1s ease-out both; }
  .hero-bg-slide.hero-bg-focus.is-active { animation: shs-hero-focus 7.1s ease-out both; }
  .hero-bg-slide.hero-bg-drift.is-active { animation: shs-hero-drift 7.1s ease-out both; }

  @keyframes shs-hero-zoom { from { transform: scale(1.035); } to { transform: scale(1.115); } }
  @keyframes shs-hero-pan-left { from { transform: scale(1.10) translateX(2.2%); } to { transform: scale(1.10) translateX(-2.2%); } }
  @keyframes shs-hero-pan-right { from { transform: scale(1.10) translateX(-2.2%); } to { transform: scale(1.10) translateX(2.2%); } }
  @keyframes shs-hero-rise { from { transform: scale(1.10) translateY(2.2%); } to { transform: scale(1.10) translateY(-2.2%); } }
  @keyframes shs-hero-focus { from { transform: scale(1.13); filter: saturate(.92); } to { transform: scale(1.055); filter: saturate(1.08); } }
  @keyframes shs-hero-drift { from { transform: scale(1.08) translate(-1.4%, 1.2%); } to { transform: scale(1.12) translate(1.4%, -1.2%); } }

  .hero-v2.has-realistic-bg .hero-divisions-v2 .hd-tile.is-active {
    border-color: rgba(245, 158, 11, .86) !important;
    background-color: rgba(7, 30, 54, .68) !important;
    box-shadow: inset 3px 0 0 #F59E0B, 0 16px 40px rgba(0, 0, 0, .16) !important;
    transform: translateX(-5px);
  }
  .hero-v2.has-realistic-bg .hero-divisions-v2 .hd-tile.is-active::before { opacity: .62; transform: scale(1.04); }
  .hero-v2.has-realistic-bg .hero-divisions-v2 .hd-tile.is-active .hd-icon {
    color: #071E36;
    border-color: #F59E0B;
    background: #F59E0B;
  }
  .hero-v2.has-realistic-bg .hero-divisions-v2 .hd-tile-flagship:not(.is-active) {
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
  }
  .hero-rotation-status {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    align-items: center;
    padding: 8px 2px 0;
    color: rgba(255, 255, 255, .78);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .hero-rotation-count { color: var(--gold-500); font-weight: 800; }
  .hero-rotation-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-rotation-meter {
    grid-column: 1 / -1;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .16);
  }
  .hero-rotation-meter i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hero-rotation-status.is-running .hero-rotation-meter i {
    animation: shs-hero-meter 6s linear both;
  }
  @keyframes shs-hero-meter { to { transform: scaleX(1); } }

  /* The service photography is deliberately brighter than the earlier cards;
     the bottom navy wash still protects all copy and tags. */
  .section-paper .div-card.has-bg::before {
    opacity: .58 !important;
    filter: saturate(1.08) contrast(1.04);
  }
  .section-paper .div-card.has-bg::after {
    background: linear-gradient(180deg, rgba(7, 30, 54, .10) 0%, rgba(7, 30, 54, .55) 48%, rgba(7, 30, 54, .90) 100%) !important;
  }
  .section-paper .div-card.has-bg:hover::before { opacity: .72 !important; }
  .section-paper .div-card.has-bg :is(h3, p, .div-num, .div-tags) {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .36);
  }

  @media (max-width: 1024px) {
    .hero-v2.has-realistic-bg .hero-divisions-v2 .hd-tile.is-active { transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-bg-slide,
    .hero-bg-slide.is-active,
    .hero-rotation-status.is-running .hero-rotation-meter i {
      animation: none !important;
      transition: none !important;
    }
    .hero-rotation-meter i { transform: scaleX(1); }
  }
}

/* --- LEADERS SECTION DEFINITIVE FIX --- */
.section-ivory {
  scroll-margin-top: 100px;
  position: relative;
  z-index: 2;
}

.leaders {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.leader {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 36px 32px 36px !important;
  background: #ffffff !important;
  border: 1px solid rgba(11, 45, 82, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
}

.leader::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 0 !important;
  background: #C65D2F !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.leader:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px -12px rgba(11, 45, 82, 0.14) !important;
  border-color: rgba(198, 93, 47, 0.35) !important;
}

.leader:hover::before {
  width: 100% !important;
}

.leader .leader-avatar,
.leader .leader-avatar-photo {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 20% !important;
  border: 2px solid rgba(198, 93, 47, 0.25) !important;
  background: #F4F1EB !important;
  margin-bottom: 22px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.leader h4 {
  font-family: var(--f-display, 'DM Serif Display', Georgia, serif) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px 0 !important;
  color: #071E36 !important;
}

.leader .leader-role {
  font-family: var(--f-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #C65D2F !important;
  margin: 0 0 16px 0 !important;
  display: block !important;
  line-height: 1.4 !important;
  min-height: 28px !important;
}

.leader p {
  font-family: var(--f-body, 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #4A5568 !important;
  margin: auto 0 0 0 !important;
  padding: 0 0 4px 0 !important;
  overflow: visible !important;
  word-break: normal !important;
}

@media (max-width: 960px) {
  .leaders {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .leaders {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .leader {
    padding: 28px 24px 28px !important;
  }
}