/* DHS brand palette matched visually to the original DHS logo blue.
   Change these tokens to update every page and shared component. */
:root {
  --brand-navy: #285f98;
  --brand-deep: #24558a;
  --brand-blue: #2468ad;
  --brand-blue-hover: #1b528b;
  --brand-sky: #e1edf9;
  --brand-white: #ffffff;
  --brand-ink: #20354c;
  --brand-muted: #566a80;
  --brand-soft: #f3f7fb;
  --brand-line: #d7e3ef;
  --gold: var(--brand-sky); /* Compatibility with existing accent classes. */
  --accent: var(--brand-sky);
}

/* Existing gold buttons now use the DHS blue and white treatment. */
.btn-gold {
  background: var(--brand-blue);
  color: var(--brand-white);
  box-shadow: 0 10px 28px rgb(36 104 173 / 22%);
}
.btn-gold:hover {
  background: var(--brand-blue-hover);
  box-shadow: 0 15px 35px rgb(36 104 173 / 30%);
}
.footer-bottom {
  color: rgb(255 255 255 / 75%);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-sky);
  outline-offset: 4px;
}
::selection {
  background: var(--brand-blue);
  color: var(--brand-white);
}

/* Medium logo-blue shade, with the photo visible toward the right. */
:root {
  --hero-blue-overlay:
    linear-gradient(
      90deg,
      rgb(30 70 110 / 92%) 0%,
      rgb(36 91 146 / 80%) 32%,
      rgb(36 104 173 / 38%) 61%,
      rgb(36 104 173 / 8%) 100%
    ),
    linear-gradient(0deg, rgb(30 70 110 / 38%) 0%, transparent 38%);
}
.hero-overlay,
.hero-shade,
.industry-hero-overlay,
.project-hero-overlay {
  background: var(--hero-blue-overlay);
}
.hero,
.services-hero,
.industry-hero,
.project-hero,
.contact-hero,
.blog-hero,
.network-hero,
.clients-hero {
  background-color: var(--brand-navy);
  color: var(--brand-white);
}
.project-hero-image {
  opacity: 1;
}
.hero h1 em,
.hero h2 em,
.hero-inner h1 i,
.industry-hero-content h1 em,
.blog-hero h1 span,
.clients-hero h1 span,
.contact-hero h1 span,
.network-hero h1 span,
.project-hero h1 span {
  color: var(--brand-white);
}
.hero-content p,
.hero p,
.hero-inner p,
.industry-hero-content p,
.blog-hero-content p,
.clients-hero-copy > p,
.contact-hero p,
.network-hero-content > p,
.project-hero-content > p {
  color: var(--brand-sky);
}
.blog-eyebrow,
.blog-hero-index small,
.hero-side-label b,
.clients-hero-bottom strong,
.section-no.light,
.project-hero .eyebrow,
.feature-content h2 span,
.numbers-copy h2 span {
  color: var(--brand-sky);
}
/* Original logo needs a white surface; preserve its real colors. */
.footer-logo {
  background: var(--brand-white);
  padding: 12px 16px;
  border-radius: 4px;
}
.footer-logo img,
.brand img {
  filter: none;
  opacity: 1;
}

/* Blue text on white sections; pale highlights are reserved for dark sections. */
h2 em,
.story-points b,
.infra-card span,
.categories-title .section-no,
.industry-intro-left .section-no,
.industry-page-content > span,
.industry-capabilities .section-no,
.capabilities-title-row h2 span,
.ports-head h2 span,
.port-number,
.port-arrow,
.destination-card:hover a,
.cargo-copy h2 span,
.approach-top h2 span,
.approach-item strong,
.ocean-title > span,
.ocean-title h3 em,
.container-item:hover i,
.about-list i,
.process i,
.stars,
.contact-mini > span {
  color: var(--brand-blue);
}
.hero h2 em,
.cta h2 em {
  color: var(--brand-white);
}

/* Logo-blue surfaces balanced by white and pale blue-grey sections. */
:root {
  --surface-depth:
    radial-gradient(ellipse at 92% 0%, rgb(88 149 209 / 24%), transparent 48%),
    radial-gradient(ellipse at 5% 100%, rgb(36 104 173 / 18%), transparent 48%),
    linear-gradient(125deg, #24558a 0%, #2a639e 55%, #286097 100%);
  --surface-cta:
    radial-gradient(
      ellipse at 85% 10%,
      rgb(207 229 249 / 24%),
      transparent 44%
    ),
    linear-gradient(115deg, #285f98 0%, #2468ad 62%, #3276b6 100%);
  --surface-white: linear-gradient(
    135deg,
    #ffffff 0%,
    #ffffff 55%,
    #edf3f9 100%
  );
  --surface-shadow:
    0 24px 52px rgb(36 104 173 / 8%), 0 5px 12px rgb(36 104 173 / 4%);
}
.dark,
.dark-feature,
.process-section,
.network,
.numbers,
.quote-section,
.story,
.leadership,
.infrastructure,
.industry-capabilities,
.ports-section,
.cargo-section,
.approach-section,
.testimonials-section,
.blog-categories,
.contact-services,
.site-footer {
  background: var(--surface-depth);
}
/* CTA bands receive a brighter highlight without filling every section blue. */
.services-hero ~ .cta,
.industry-cta,
.network-cta,
.project-cta,
.clients-cta,
.blog-cta,
.profile-download {
  background: var(--surface-cta);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%);
}
.ocean-main,
.capabilities-intro,
.network-map-panel,
.industry-intro-left,
.case-side {
  background: var(--surface-depth);
  border: 1px solid rgb(209 231 255 / 18%);
  border-radius: 16px;
  box-shadow:
    var(--surface-shadow),
    inset 0 1px 0 rgb(255 255 255 / 16%);
}
/* White sections separate the deeper panels and keep the page airy. */
.services,
.industries,
.featured-blog,
.contact-cta {
  background: linear-gradient(155deg, #ffffff 0%, #f5f8fc 65%, #edf3fb 100%);
}
.service-card:not(.special),
.featured-article,
.article-card,
.why-industry-card,
.destination-card,
.help-item {
  background: var(--surface-white);
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgb(16 43 80 / 5%),
    inset 0 1px 0 #ffffff;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.special,
.infra-card,
.number-card,
.numbers-copy {
  background: linear-gradient(
    140deg,
    rgb(255 255 255 / 9%),
    rgb(255 255 255 / 2%)
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 12px 30px rgb(0 12 32 / 12%);
}
.ocean-image,
.about-photo,
.feature-image,
.featured-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgb(0 19 48 / 18%);
}
.floating-card,
.about-card,
.about-overlay-card {
  border-radius: 12px;
  box-shadow: 0 22px 48px rgb(0 19 48 / 20%);
}
/* Small bevel and shadow give solid buttons a raised appearance. */
.btn-dark,
.btn-gold,
.nav-cta,
.form-submit,
.clients-btn,
.services-hero .hero-link,
.services-hero ~ .cta .cta-inner > a {
  background: linear-gradient(145deg, #3a7fc5, #2468ad 65%, #1b528b);
  color: #ffffff;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 25%),
    0 6px 0 rgb(18 55 94 / 14%),
    0 12px 24px rgb(36 104 173 / 16%);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:not(.special):hover,
  .equip:hover,
  .featured-article:hover,
  .article-card:hover,
  .destination-card:hover,
  .team-card:hover {
    background: var(--surface-white);
    color: var(--brand-ink);
    transform: translateY(-5px);
    box-shadow:
      var(--surface-shadow),
      inset 0 1px 0 #ffffff;
    border-color: #b5cee7;
  }
  .btn-dark:hover,
  .btn-gold:hover,
  .nav-cta:hover,
  .form-submit:hover,
  .clients-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 25%),
      0 8px 0 rgb(18 55 94 / 10%),
      0 18px 28px rgb(36 104 173 / 20%);
  }
}
@media (max-width: 640px) {
  .ocean-main,
  .mission-card,
  .network-map-panel,
  .industry-intro-left,
  .case-side {
    border-radius: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .equip,
  .featured-article,
  .article-card,
  .destination-card,
  .team-card,
  .btn-dark,
  .btn-gold,
  .nav-cta,
  .form-submit,
  .clients-btn {
    transition: none;
  }
}

/* Keep raised white cards readable inside deeper section backgrounds. */
.help-item h3,
.team-card h3 {
  color: var(--brand-ink);
}
.help-item p {
  color: var(--brand-muted);
}
.help-item:hover {
  background: var(--surface-white);
}
.ocean-title > span,
.ocean-title h3 em,
.industry-capabilities .section-no,
.capabilities-title-row h2 span {
  color: var(--brand-sky);
}

/* Photo-led heroes with DHS blue reserved for brand accents. */
:is(
  .hero,
  .services-hero,
  .industry-hero,
  .project-hero,
  .contact-hero,
  .blog-hero,
  .network-hero,
  .clients-hero
) {
  background-color: #285f98;
  color: #ffffff;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
}
:is(
    .hero,
    .services-hero,
    .industry-hero,
    .project-hero,
    .contact-hero,
    .blog-hero,
    .network-hero,
    .clients-hero
  )
  h1 {
  color: #ffffff;
  text-shadow: 0 3px 16px rgb(12 44 77 / 22%);
}

:is(
    .hero,
    .services-hero,
    .industry-hero,
    .project-hero,
    .contact-hero,
    .blog-hero,
    .network-hero,
    .clients-hero
  )
  p {
  color: #edf4fc;
}
:is(
    .hero,
    .services-hero,
    .industry-hero,
    .project-hero,
    .contact-hero,
    .blog-hero,
    .network-hero,
    .clients-hero
  )
  :is(
    .eyebrow,
    .section-no.light,
    .hero-meta,
    .hero-side,
    .blog-eyebrow,
    .contact-eyebrow,
    .hero-bottom,
    .hero-side-label,
    .hero-side-label b,
    .blog-hero-index small,
    .blog-hero-index > span,
    .hero-stats span,
    .hero-network-stats span,
    .clients-hero-bottom span,
    .index-top span,
    .index-bottom span,
    .contact-hero-mark span
  ) {
  color: #e1edf9;
}
:is(.hero, .industry-hero) .hero-stats strong,
.clients-hero-bottom strong,
.hero-network-stats strong,
.blog-hero-index strong,
.index-top strong,
.contact-hero-mark strong {
  color: #ffffff;
}
:is(.hero, .industry-hero) .btn-primary,
.network-hero .btn-primary,
.services-hero .hero-link,
.clients-hero .clients-btn {
  background: linear-gradient(145deg, #ffffff, #e1edf9);
  color: var(--brand-blue);
  border-color: #ffffff;
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 12px 26px rgb(12 44 77 / 18%);
}
:is(.hero, .industry-hero) .btn-ghost,
.network-hero .hero-link,
.clients-text-link,
.clients-text-link span,
.hero-scroll,
.hero-scroll span,
.network-hero .hero-link span {
  color: #ffffff;
  border-color: rgb(255 255 255 / 60%);
}
:is(.hero, .industry-hero) .btn-ghost:hover {
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
}
.clients-hero-glow,
.network-hero-glow {
  opacity: 0.35;
}
.contact-hero-bg::after {
  opacity: 0.3;
}
.project-index,
.contact-hero-mark {
  background: linear-gradient(
    145deg,
    rgb(255 255 255 / 12%),
    rgb(18 55 94 / 18%)
  );
  border: 1px solid rgb(255 255 255 / 28%);
  box-shadow:
    0 18px 44px rgb(12 44 77 / 15%),
    inset 0 1px 0 rgb(255 255 255 / 20%);
}
.network-center,
.mark-center {
  background: linear-gradient(145deg, #3477ba, #1b528b);
  border-color: rgb(255 255 255 / 40%);
  color: #ffffff;
  box-shadow:
    0 12px 34px rgb(12 44 77 / 24%),
    inset 0 2px 0 rgb(255 255 255 / 22%);
}
.network-center small,
.mark-center small,
.network-point {
  color: #edf4fc;
}
.network-point i,
.hero-meta span,
:is(.hero, .industry-hero) .eyebrow span {
  background: #e1edf9;
}
.mark-point {
  color: #edf4fc;
  background: rgb(27 82 139 / 78%);
  border-color: rgb(255 255 255 / 25%);
}

/* Reduce visual noise so the photography and headline lead the hero. */
.hero-grid,
.industry-hero-grid,
.clients-hero-grid,
.network-hero-grid {
  opacity: 0.12;
}
.clients-hero-glow,
.network-hero-glow,
.contact-hero-bg::after {
  opacity: 0.12;
}

.home-hero .hero-content {
  padding-top: clamp(160px, 21vh, 220px);
  padding-bottom: 150px;
}
.home-hero h1 {
  font-size: clamp(46px, 5.6vw, 82px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin: 24px 0;
}
.home-hero .hero-content p {
  max-width: 570px;
}
.home-hero .hero-bottom > div:first-child {
  display: none;
}
.home-hero .hero-bottom {
  justify-content: flex-end;
  bottom: 30px;
}
.home-hero .floating-card {
  background: rgb(255 255 255 / 94%);
  border: 1px solid rgb(255 255 255 / 70%);
  box-shadow: 0 16px 36px rgb(0 16 34 / 18%);
}
@media (min-width: 901px) {
  .home-hero {
    height: auto;
    min-height: max(780px, 100svh);
  }
}
@media (max-width: 900px) {
  .home-hero {
    height: auto;
    min-height: 740px;
  }
  .home-hero .hero-content {
    padding-top: 150px;
    padding-bottom: 140px;
  }
  .home-hero h1 {
    font-size: clamp(44px, 7vw, 66px);
  }
}
@media (max-width: 600px) {
  .home-hero {
    min-height: 720px;
  }
  .home-hero .hero-content {
    padding-top: 135px;
    padding-bottom: 100px;
  }
  .home-hero h1 {
    font-size: clamp(42px, 10.5vw, 60px);
  }
  .home-hero .hero-actions {
    flex-wrap: wrap;
  }
}

/* Emphasized headline words keep a readable blue fallback. */
:is(
    .hero,
    .services-hero,
    .industry-hero,
    .project-hero,
    .contact-hero,
    .blog-hero,
    .network-hero,
    .clients-hero
  )
  :is(h1, h2)
  :is(em, i, span) {
  color: #a8d6ff;
  font-style: normal;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  :is(
      .hero,
      .services-hero,
      .industry-hero,
      .project-hero,
      .contact-hero,
      .blog-hero,
      .network-hero,
      .clients-hero
    )
    :is(h1, h2)
    :is(em, i, span) {
    background-image: linear-gradient(
      135deg,
      #c0e3ff 0%,
      #8fc5f7 45%,
      #6ca9e7 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
}
@media (forced-colors: active) {
  :is(
      .hero,
      .services-hero,
      .industry-hero,
      .project-hero,
      .contact-hero,
      .blog-hero,
      .network-hero,
      .clients-hero
    )
    :is(h1, h2)
    :is(em, i, span) {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

/* Readable copy over the lighter brand-blue section backgrounds. */
:is(
    .dark,
    .dark-feature,
    .process-section,
    .network,
    .numbers,
    .quote-section,
    .story,
    .leadership,
    .infrastructure,
    .industry-capabilities,
    .ports-section,
    .cargo-section,
    .approach-section,
    .testimonials-section,
    .blog-categories,
    .ocean-main,
    .mission-card,
    .industry-intro-left,
    .case-side
  )
  :is(p, .sub) {
  color: #edf4fc;
}
:is(
    .dark,
    .dark-feature,
    .process-section,
    .network,
    .numbers,
    .quote-section,
    .story,
    .leadership,
    .infrastructure,
    .industry-capabilities,
    .ports-section,
    .cargo-section,
    .approach-section,
    .testimonials-section,
    .blog-categories
  )
  h2
  :is(em, span) {
  color: #e1edf9;
}
/* Footer returns to a light surface so the page ends with the original logo. */
.site-footer {
  background: linear-gradient(135deg, #f8fbfe 0%, #edf4fb 100%);
  color: var(--brand-ink);
  border-top: 1px solid var(--brand-line);
}
.site-footer .footer-brand p,
.site-footer .footer-column a,
.site-footer .footer-bottom,
.site-footer .footer-bottom a {
  color: var(--brand-muted);
}
.site-footer .footer-column b {
  color: var(--brand-blue);
}
.site-footer .footer-column a:hover,
.site-footer .footer-bottom a:hover {
  color: var(--brand-blue);
}
.site-footer .footer-column b::after {
  background: var(--brand-blue);
}
.site-footer .footer-bottom {
  border-color: var(--brand-line);
}
.site-footer .footer-logo {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
/* White cards retain dark copy even when placed inside a blue section. */
:is(
    .dark,
    .dark-feature,
    .process-section,
    .network,
    .numbers,
    .quote-section,
    .story,
    .leadership,
    .infrastructure,
    .industry-capabilities,
    .ports-section,
    .cargo-section,
    .approach-section,
    .testimonials-section,
    .blog-categories
  )
  :is(.team-card, .help-item, .service-card:not(.special), .destination-card)
  p {
  color: var(--brand-muted);
}

/* Editorial white surfaces replace large uninterrupted blue blocks. */
.premium-light.premium-light {
  background:
    radial-gradient(ellipse at 100% 0%, rgb(36 104 173 / 7%), transparent 48%),
    linear-gradient(145deg, #f8fbfe, #edf4fb);
  color: var(--brand-ink);
  border-color: var(--brand-line);
}
.premium-light.premium-light :is(h2, h3, h4, strong, .title, .lead) {
  color: var(--brand-ink);
}
.premium-light.premium-light :is(p, small, .sub, .section-no, .kicker) {
  color: var(--brand-muted);
}
.premium-light.premium-light h2 :is(em, span),
.premium-light.premium-light
  :is(
    .section-no,
    .kicker,
    .blue-label,
    .story-points b,
    .infra-card span,
    .process i,
    .approach-item strong,
    .port-number,
    .port-arrow,
    .case-small-number,
    .quote-symbol,
    .ocean-title > span,
    .ocean-title h3 em,
    .section-no.light
  ) {
  color: var(--brand-blue);
}
.premium-light.premium-light
  :is(
    .infra-card,
    .number-card,
    .numbers-copy,
    .process,
    .approach-item,
    .capability-item,
    .testimonial-main,
    .case-small
  ) {
  background: var(--surface-white);
  border: 1px solid var(--brand-line);
  border-radius: 0px;
  box-shadow:
    0 10px 28px rgb(36 104 173 / 6%),
    inset 0 1px 0 #ffffff;
}
.premium-light.premium-light
  :is(
    .story-points,
    .story-points > div,
    .ports-list,
    .port-row,
    .testimonial-controls,
    .testimonial-mini,
    .testimonial-mini-grid,
    .process-line,
    .approach-line
  ) {
  border-color: var(--brand-line);
}
.premium-light.premium-light :is(.case-small a, .text-link, .port-arrow) {
  color: var(--brand-blue);
}
.premium-light.premium-light .case-small:hover {
  background: #edf4fb;
}
.premium-light.premium-light .category-btn {
  color: var(--brand-blue);
  border-color: #b9d0e8;
  background: #ffffff;
}
.premium-light.premium-light .category-btn.active,
.premium-light.premium-light .category-btn:hover {
  background: var(--brand-blue);
  color: #ffffff;
}
.premium-light.premium-light .testimonial-text {
  color: var(--brand-ink);
}
.premium-light.premium-light .testimonial-controls button {
  color: var(--brand-blue);
  border-color: #b9d0e8;
  background: #ffffff;
}
.premium-light.premium-light .testimonial-controls button:hover {
  color: #ffffff;
  background: var(--brand-blue);
}
.premium-light.premium-light .testimonial-mini.active :is(span, strong) {
  color: var(--brand-blue);
}
.premium-light.premium-light .help-item h3 {
  color: var(--brand-ink);
}
.premium-light.premium-light .help-item p {
  color: var(--brand-muted);
}
.premium-light.premium-light :is(.btn-white, .btn-ghost) {
  color: var(--brand-blue);
  background: #ffffff;
  border: 1px solid #b9d0e8;
}
/* Process becomes a row of individual raised cards instead of a blue table. */
.approach-section.premium-light {
  padding: 88px 0;
}
.approach-section.premium-light .approach-top {
  max-width: 950px;
  margin-bottom: 38px;
}
.approach-section.premium-light .approach-top h2 {
  font-size: clamp(36px, 4.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.approach-section.premium-light .approach-line,
.process-section.premium-light .process-line {
  border: 0;
  gap: 20px;
}
.approach-section.premium-light .approach-item {
  min-height: 235px;
  padding: 26px;
  border-top: 3px solid var(--brand-blue);
}
.approach-section.premium-light .approach-item strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e9f2fc;
  font-size: 12px;
}
.approach-section.premium-light .approach-item h3 {
  margin-top: 30px;
}
.process-section.premium-light .process {
  padding: 24px;
}
.numbers.premium-light .numbers-grid {
  background: transparent;
  gap: 18px;
}
.case-side.premium-light {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 16px;
}
.case-side.premium-light .case-small {
  border-left: 3px solid var(--brand-blue);
}
/* Services gets more compact typography, spacing and separated service cards. */
.intro {
  padding: 80px 0;
}
.intro-content h2 {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.services {
  padding-top: 72px;
}
.services-heading {
  margin-bottom: 44px;
  padding-bottom: 30px;
}
.services-heading h2 {
  font-size: clamp(40px, 4.7vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.ocean-main.premium-light {
  border: 1px solid var(--brand-line);
}
.ocean-options {
  margin-top: 18px;
  gap: 16px;
  border: 0;
}
.ocean-options div,
.ocean-options div + div {
  padding: 22px;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgb(36 104 173 / 5%);
}
.service-row {
  margin-bottom: 12px;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  background: #ffffff;
}
.service-row:last-child {
  border: 1px solid var(--brand-line);
}
.service-row:hover {
  background: #edf4fb;
}
@media (hover: hover) and (pointer: fine) {
  .approach-section.premium-light .approach-item,
  .process-section.premium-light .process {
    transition:
      transform 0.25s,
      box-shadow 0.25s;
  }
  .approach-section.premium-light .approach-item:hover,
  .process-section.premium-light .process:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgb(36 104 173 / 11%);
  }
}
@media (max-width: 760px) {
  .intro {
    padding: 56px 0;
  }
  .intro-content,
  .services-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .services-heading > p {
    justify-self: start;
  }
  .approach-section.premium-light {
    padding: 60px 0;
  }
  .approach-section.premium-light .approach-line {
    grid-template-columns: 1fr;
  }
  .approach-section.premium-light .approach-item {
    min-height: 205px;
  }
  .service-row {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .approach-section.premium-light .approach-item,
  .process-section.premium-light .process {
    transition: none;
  }
}

/* Shared branded loading screen: original logo and a moving route marker. */
.loader.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 28px;
  background: radial-gradient(
    ellipse at 50% 40%,
    #ffffff 0%,
    #edf5fd 60%,
    #dcebf9 100%
  );
  color: var(--brand-ink);
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
  animation: loaderSafetyExit 0s 6s forwards;
}
.loader .loader-brand-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: 310px;
  height: 220px;
}
.loader .loader-brand-scene img {
  position: relative;
  z-index: 1;
  display: block;
  width: 220px;
  height: auto;
}
.loader .loader-orbit {
  position: absolute;
  width: 290px;
  height: 290px;
  border: 1px solid #d5e5f4;
  border-top: 2px solid #88b4df;
  border-radius: 50%;
  animation: loaderOrbit 6s linear infinite;
}
.loader .loader-orbit-inner {
  width: 260px;
  height: 260px;
  border: 1px dashed #e0eaf5;
  animation-direction: reverse;
  animation-duration: 12s;
}
.loader .loader-caption {
  position: relative;
  margin-top: 12px;
  text-align: center;
}
.loader .loader-caption strong {
  display: block;
  color: #345a7e;
  font:
    600 14px/1.6 Manrope,
    sans-serif;
}
.loader .loader-caption > span {
  display: block;
  margin-top: 14px;
  color: var(--brand-blue);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.loader .loader-route {
  position: relative;
  width: 220px;
  height: 1px;
  margin: 0 0 12px;
  background: #bfd6ec;
}
.loader .loader-route-start,
.loader .loader-route-end {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #87aed4;
}
.loader .loader-route-start {
  left: 0;
}
.loader .loader-route-end {
  right: 0;
}
.loader .loader-route-traveller {
  position: absolute;
  top: -5px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 5px rgb(36 104 173 / 10%);
  animation: loaderTravel 1.6s ease-in-out infinite;
}
.loader.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes loaderOrbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loaderTravel {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(209px);
    opacity: 0.5;
  }
}
@keyframes loaderSafetyExit {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (max-width: 450px) {
  .loader .loader-brand-scene {
    width: 270px;
  }
  .loader .loader-orbit {
    width: 260px;
    height: 260px;
  }
  .loader .loader-orbit-inner {
    width: 230px;
    height: 230px;
  }
  .loader .loader-brand-scene img {
    width: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader .loader-orbit,
  .loader .loader-route-traveller {
    animation: none;
  }
  .loader.loader {
    transition: none;
  }
}