/* =========================================================================
   Northbridge Tech Ltd — Premium Design System v3 ("Light Corporate with Depth")
   Loaded after main.css on every page (src/data/design.json). All rules are
   scoped to body.ds2 (the class name is kept from v2 for continuity).

   Principles: straight edges; 1px hairlines; a predominantly light site with
   strategic navy sections; four surface levels (background, content,
   elevated, featured); soft diffuse shadows; selective glass (header, mega
   menu, overlays on imagery); orange only for meaningful emphasis; rich but
   restrained motion that always respects prefers-reduced-motion.

   Contents: tokens · transitions library · type · buttons and links ·
   header and mega menu · hero · logo strip · media · explorer · divisions ·
   feature band · Microsoft 365 benchmark · standard service pages ·
   portfolio · generic components · forms · footer · motion
   ========================================================================= */

.ds2 {
  /* Geometry: square corners throughout */
  --radius-sm: 0; --radius: 0; --radius-lg: 0;

  /* Hairlines */
  --ds-line: #d6dee9;
  --ds-line-strong: #9fb0c6;
  --ds-line-dark: rgba(255, 255, 255, .14);
  --ds-line-dark-strong: rgba(255, 255, 255, .32);

  /* Accent text in headings (5.4:1 on white; 8.6:1 on navy-950) */
  --ds-accent-light: #2c6fa3;
  --ds-accent-dark: #8ec3e8;

  /* Surfaces (four levels) */
  --s-bg: #f4f7fb;            /* background: soft off-white */
  --s-bg-cool: #eef2f8;       /* background: cool grey */
  --s-bg-tint: #eaf2fa;       /* background: subtle brand tint */
  --s-card: #ffffff;          /* content and elevated surfaces */
  --s-glass: rgba(255, 255, 255, .78);
  --s-glass-strong: rgba(255, 255, 255, .92);
  --s-glass-dark: rgba(7, 20, 38, .55);

  /* Borders and states */
  --b-elevated: #cbd6e4;      /* visible edge for white cards on light backgrounds */
  --b-brand: #58a0d2;         /* brand-blue highlight */
  --b-accent: #e84000;        /* orange accent line (decorative) */
  --b-hover: #19335d;         /* hovered borders */
  --b-selected: #0b1c36;      /* selected borders */
  --b-glass: rgba(255, 255, 255, .55);

  /* Elevation: soft, diffuse */
  --sh-1: 0 1px 2px rgba(11, 28, 54, .06);
  --sh-2: 0 1px 2px rgba(11, 28, 54, .05), 0 12px 28px -18px rgba(11, 28, 54, .28);
  --sh-3: 0 2px 6px rgba(11, 28, 54, .06), 0 24px 44px -24px rgba(11, 28, 54, .42);
  --sh-media: 0 34px 60px -38px rgba(7, 20, 38, .6);
  --sh-glass: 0 24px 60px -34px rgba(7, 20, 38, .5), inset 0 1px 0 rgba(255, 255, 255, .65);
  --ds-shadow: var(--sh-2);
  --lift: -3px;

  /* Spacing */
  --ds-space-1: .5rem; --ds-space-2: 1rem; --ds-space-3: 1.5rem; --ds-space-4: 2rem;
  --ds-space-5: 3rem; --ds-space-6: 4rem;
  --section-y: clamp(3.75rem, 6.5vw, 6.5rem);

  /* Motion */
  --ds-ease: cubic-bezier(.22, .61, .36, 1);
  --t-link: 180ms; --t-btn: 200ms; --t-card: 280ms; --t-menu: 360ms; --t-panel: 360ms; --t-reveal: 620ms; --t-media: 1100ms;
}

/* ---------- Straight edges ---------- */
.ds2 *:where(.btn, .card, .callout, .mini-scope li, .nav-toggle, .mega-toggle, .mega, .mega__link, .mega__icon, .mega__feature,
  .mega__group-toggle, .hero-priority, .hero-priority__icon, .hero__control, .explorer__tab, .explorer__tab-icon, .explorer__panel,
  .faq__item, .wa-float, .skip-link, .media-fallback, picture, img, video, input, select, textarea, .form-card, .notice, .distinction) {
  border-radius: 0;
}
.ds2 *:focus-visible { outline-width: 2px; outline-offset: 3px; border-radius: 0; }

/* ---------- Surface utilities ---------- */
.ds2 .section--tint { background: linear-gradient(180deg, var(--s-bg-tint) 0%, var(--s-bg) 100%); }
.ds2 .section--cool { background: var(--s-bg-cool); }
.ds2 .surface-elevated { background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); }
.ds2 .surface-glass { background: var(--s-glass); border: 1px solid var(--b-glass); box-shadow: var(--sh-glass); }
@supports (backdrop-filter: blur(10px)) { .ds2 .surface-glass { backdrop-filter: blur(14px) saturate(1.4); } }

/* ---------- Abstract section transitions (used selectively; markup: .tx .tx-arch|glow|net + span.tx-layer) ---------- */
.ds2 .tx { position: relative; isolation: isolate; --tx-line: rgba(25, 51, 93, .16); --tx-plane: rgba(88, 160, 210, .07); }
.ds2 .tx > .container, .ds2 .tx > .ds-cta-wrap { position: relative; z-index: 1; }
.ds2 .tx-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ds2 *:is(.section--navy, .cta-band, .divisions, .feature-band:not(.feature-band--light)).tx { --tx-line: rgba(142, 195, 232, .2); --tx-plane: rgba(142, 195, 232, .05); }
/* Architectural: an open frame hanging from the section edge, an offset plane and a diagonal hairline. */
/* v3.1: the open hairline frame (::before) was removed: on its own it read as an unexplained empty box. Only the diagonal hairline remains. */
.ds2 .tx-arch .tx-layer::after { content: ""; position: absolute; top: 0; right: 0; width: min(46vw, 40rem); height: clamp(9rem, 20vw, 16rem); background: linear-gradient(to bottom left, transparent calc(50% - .5px), var(--tx-line) 50%, transparent calc(50% + .5px)); }
/* Atmospheric: soft navy-to-blue light. */
.ds2 .site-footer__top.tx-arch .tx-layer::after, .ds2 .cta-band.tx-arch .tx-layer::after { display: none; }
.ds2 .tx-glow .tx-layer { background: radial-gradient(60rem 26rem at 88% 0%, rgba(88, 160, 210, .18), transparent 70%), radial-gradient(44rem 22rem at 0% 100%, rgba(25, 51, 93, .08), transparent 70%); }
/* Fine-line technical motif: square nodes joined by hairlines, faded at the edges. */
.ds2 .tx-net .tx-layer::before { content: ""; position: absolute; right: -2rem; top: 1.5rem; width: 35rem; height: 22.5rem; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='360' viewBox='0 0 560 360' fill='none'%3E%3Cg stroke='%2319335d' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M40 300 170 210 300 250 420 120 530 170M170 210 230 90 420 120M300 250 360 330M230 90 330 40 420 120M420 120 470 30M300 250 420 120'/%3E%3C/g%3E%3Cg fill='%2358a0d2'%3E%3Crect x='37' y='297' width='6' height='6'/%3E%3Crect x='167' y='207' width='6' height='6'/%3E%3Crect x='297' y='247' width='6' height='6'/%3E%3Crect x='417' y='117' width='6' height='6'/%3E%3Crect x='527' y='167' width='6' height='6'/%3E%3Crect x='227' y='87' width='6' height='6'/%3E%3Crect x='327' y='37' width='6' height='6'/%3E%3Crect x='357' y='327' width='6' height='6'/%3E%3Crect x='467' y='27' width='6' height='6'/%3E%3C/g%3E%3Crect x='414' y='114' width='12' height='12' stroke='%23e84000' stroke-opacity='.6' fill='none'/%3E%3C/svg%3E") no-repeat right top / contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.ds2 *:is(.section--navy, .cta-band, .divisions).tx-net .tx-layer::before { opacity: .8; filter: brightness(2.6); }
.ds2 .cta-band.tx-net .tx-layer::before { opacity: .38; top: auto; bottom: -3rem; }
@media (max-width: 47.99em) { .ds2 .tx-arch .tx-layer::after { display: none; } .ds2 .tx-net .tx-layer::before { width: 22rem; height: 14rem; opacity: .35; } }

/* ---------- Typography ---------- */
.ds2 h1, .ds2 h2, .ds2 h3 { font-weight: 650; }
.ds2 h1 { letter-spacing: -.035em; }
.ds2 h2 { font-size: clamp(1.85rem, 1.2rem + 1.9vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; }
.ds2 h3 { font-weight: 640; letter-spacing: -.012em; }
.ds2 .hx { font-weight: 380; color: var(--ds-accent-light); }
.ds2 *:is(.hero, .section--navy, .feature-band, .svc-hero, .cta-band) .hx { color: var(--ds-accent-dark); }
.ds2 .section__heading { max-width: 20em; }
.ds2 .lead-sm { color: var(--muted); }
.ds2 .eyebrow { font-size: .74rem; font-weight: 650; letter-spacing: .16em; gap: .75rem; }
.ds2 .eyebrow::before { width: 1.75rem; height: 1px; border-radius: 0; }

/* Section head: heading left, introduction right */
.ds2 .ds-head { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 56em) { .ds2 .ds-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } .ds2 .ds-head--single { grid-template-columns: 1fr; } }
.ds2 .ds-head__title { margin: 0; max-width: 18em; }
.ds2 .ds-head__intro { margin: 0; color: var(--muted); font-size: 1.08rem; font-weight: 400; max-width: 36em; }
.ds2 .ds-head--light .ds-head__title { color: var(--white); }
.ds2 .ds-head--light .ds-head__intro { color: var(--on-dark-muted); }

/* ---------- Buttons ---------- */
.ds2 .btn { border-radius: 0; border-width: 1px; font-weight: 600; letter-spacing: .005em; box-shadow: none;
  transition: background-color var(--t-btn) var(--ds-ease), border-color var(--t-btn) var(--ds-ease), color var(--t-btn) var(--ds-ease), box-shadow var(--t-btn) var(--ds-ease), transform var(--t-btn) var(--ds-ease); }
.ds2 .btn:active { transform: translateY(0); }
.ds2 .btn--lg { min-height: 3.25rem; padding: .9rem 1.6rem; font-size: 1rem; }
.ds2 .btn--accent { background: var(--orange-btn); border-color: var(--orange-btn); box-shadow: 0 10px 22px -14px rgba(196, 61, 11, .75); }
.ds2 .btn--accent:hover { background: var(--orange-btn-hover); border-color: var(--orange-btn-hover); box-shadow: 0 14px 26px -14px rgba(168, 52, 10, .8); }
.ds2 .btn--primary { background: var(--navy-900); border-color: var(--navy-900); }
.ds2 .btn--primary:hover { background: var(--navy); border-color: var(--navy); }
.ds2 .btn--secondary { background: var(--s-card); border-color: var(--navy-900); color: var(--navy-900); }
.ds2 .btn--secondary:hover { background: var(--navy-900); color: var(--white); }
.ds2 .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .6); backdrop-filter: none; }
.ds2 .btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); }
.ds2 .btn .icon { transition: transform var(--t-btn) var(--ds-ease); }
.ds2 .btn[disabled], .ds2 .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .ds2 .btn:hover { transform: translateY(-1px); } .ds2 .btn:hover .icon { transform: translateX(3px); } }

/* Text links with a directional indicator */
.ds2 .ds-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 600; color: var(--navy-900);
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 100% 1px no-repeat;
  transition: color var(--t-link) var(--ds-ease), background-size var(--t-link) var(--ds-ease); }
.ds2 .ds-link .icon { transition: transform var(--t-link) var(--ds-ease); }
.ds2 .ds-link:hover { color: var(--orange-btn); }
.ds2 .ds-link--light { color: var(--white); }
.ds2 .ds-link--light:hover { color: var(--orange-on-dark); }
.ds2 .ds-link--sm { font-size: .93rem; min-height: 2.5rem; background-position: 0 calc(100% - .5rem); }
@media (prefers-reduced-motion: no-preference) { .ds2 .ds-link:hover .icon { transform: translateX(4px); } }

.ds2 .ds-tag { display: inline-block; align-self: flex-start; margin: 0 0 1rem; padding: .2rem .6rem; border: 1px solid currentColor; font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.ds2 .ds-tag--light { color: var(--orange-on-dark); }

/* ---------- Header and navigation: frosted glass ----------
   The blur sits on a pseudo-element, not on the header itself: an element with backdrop-filter becomes the
   "backdrop root" for its descendants, which would stop the mega menu (inside the header) from blurring the page. */
.ds2 .site-header { background: var(--s-glass-strong); border-bottom: 1px solid rgba(25, 51, 93, .1);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6), 0 10px 30px -26px rgba(7, 20, 38, .45);
  transition: background-color var(--t-card) var(--ds-ease), box-shadow var(--t-card) var(--ds-ease); }
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .ds2 .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ds2 .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    transition: background-color var(--t-card) var(--ds-ease); }
  .ds2 .site-header.is-compact::before { background: rgba(255, 255, 255, .9); }
}
.ds2 .site-header.is-compact { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6), 0 16px 34px -24px rgba(7, 20, 38, .5); }
.ds2 .nav__link { font-weight: 500; color: var(--navy-900); }
.ds2 .nav__link::after { height: 1px; bottom: .55rem; background: var(--orange-btn); transition-duration: var(--t-link); }
.ds2 .nav-toggle { border-width: 1px; background: var(--s-card); }
.js .ds2 .mega-toggle:hover { background: var(--s-bg); }

@media (min-width: 64em) {
  /* Mega menu: frosted glass panel that fades and settles in (≈360ms); hidden panels stay out of the tab order.
     Solid layered fallback where backdrop blur is unsupported. */
  .js .ds2 .mega { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    background: linear-gradient(180deg, #fff 0%, #f5f8fc 100%);
    border-top: 1px solid rgba(88, 160, 210, .45); border-bottom: 1px solid rgba(88, 160, 210, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 44px 80px -42px rgba(7, 20, 38, .6);
    max-height: calc(100vh - var(--header-h) - 1rem); overflow-y: auto; animation: none;
    visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity var(--t-menu) var(--ds-ease), transform var(--t-menu) var(--ds-ease), visibility 0s linear var(--t-menu); }
  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .js .ds2 .mega { background: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(243, 247, 252, .82) 100%);
      backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); }
  }
  .js .ds2 .mega::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 18rem; background: linear-gradient(90deg, var(--orange), rgba(232, 64, 0, 0)); }
  .js .ds2 .mega.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .ds2 .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2.75rem; padding-block: 2.25rem 2.5rem; }
  .ds2 .mega__groups { gap: 0; }
  .ds2 .mega__group { padding-inline: 1.75rem; }
  .ds2 .mega__group:first-child { padding-left: 0; }
  .ds2 .mega__group + .mega__group { border-left: 1px solid rgba(25, 51, 93, .1); padding-left: 1.75rem; }
}
.ds2 .mega__group-heading { font-size: .7rem; letter-spacing: .2em; font-weight: 650; padding-bottom: .65rem; margin-bottom: .75rem; border-bottom: 1px solid rgba(25, 51, 93, .12); }
.ds2 .mega__group-intro { font-size: .86rem; font-weight: 400; }
.ds2 .mega__link { border-radius: 0; padding: .55rem .75rem; margin-inline: -.75rem; transition: background-color var(--t-link) var(--ds-ease), box-shadow var(--t-link) var(--ds-ease), color var(--t-link) var(--ds-ease); }
.ds2 .mega__link:hover, .ds2 .mega__link:focus-visible { background: rgba(255, 255, 255, .72); box-shadow: inset 2px 0 0 var(--orange-btn), 0 6px 18px -14px rgba(7, 20, 38, .45); }
.ds2 .mega__link:hover .mega__link-label { color: var(--navy-900); }
.ds2 .mega__link[aria-current="page"] { background: rgba(234, 242, 250, .7); box-shadow: inset 2px 0 0 var(--orange-btn); }
.ds2 .mega__link[aria-current="page"] .mega__link-label { font-weight: 600; }
.ds2 .mega__link-label { font-weight: 550; }
.ds2 .mega__link-summary { font-weight: 400; }
.ds2 .mega__icon { background: var(--s-card); border: 1px solid var(--b-elevated); color: var(--navy); box-shadow: var(--sh-1); transition: background-color var(--t-link), color var(--t-link), border-color var(--t-link); }
.ds2 .mega__link--rich:hover .mega__icon { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.ds2 .mega__hub { gap: .5rem; margin-top: 1rem; font-weight: 550; text-decoration: underline; text-underline-offset: .3em; }
/* Feature panel: one photograph that crossfades to the service group in use. */
.ds2 .mega__feature { position: relative; background: var(--navy-950); border: 1px solid var(--navy-900); box-shadow: var(--sh-3); }
.ds2 .mega__feature-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--navy-900), var(--navy-950)); }
.ds2 .mega__feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 20, 38, .05) 30%, rgba(7, 20, 38, .92) 100%); }
.ds2 .mega__feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); filter: saturate(.86) contrast(1.04);
  transition: opacity 480ms var(--ds-ease), transform 1200ms var(--ds-ease); }
.ds2 .mega__feature-img.is-active { opacity: 1; transform: none; }
.ds2 .mega__feature-captions { position: relative; display: grid; margin: -4.25rem 0 0; padding: 0 1.35rem; min-height: 4.25rem; z-index: 1; }
.ds2 .mega__feature-caption { grid-area: 1 / 1; align-self: end; margin: 0 0 .75rem; color: var(--on-dark-muted); font-size: .82rem; line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity 400ms var(--ds-ease), transform 400ms var(--ds-ease); }
.ds2 .mega__feature-caption span { display: block; margin-bottom: .15rem; color: var(--orange-on-dark); font-size: .68rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.ds2 .mega__feature-caption.is-active { opacity: 1; transform: none; }
.ds2 .mega__feature-heading { font-weight: 600; }
.ds2 .mega__feature-links a { justify-content: flex-start; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ds2 .mega__feature-img, .ds2 .mega__feature-caption { transition: none; transform: none; } }
@media (max-width: 63.99em) {
  .js .ds2 .mega__group-toggle { font-weight: 600; border-top-color: var(--ds-line); }
  .js .ds2 .mega-toggle { border-width: 1px; }
  .ds2 .mega__feature-captions { display: none; }
}

/* ---------- Home hero ---------- */
.ds2 .hero { min-height: clamp(34rem, calc(100svh - var(--topbar-h) - var(--header-h) - 1rem), 52rem); }
.ds2 .hero__scrim { background:
    linear-gradient(90deg, rgba(7, 20, 38, .94) 0%, rgba(7, 20, 38, .84) 32%, rgba(7, 20, 38, .48) 62%, rgba(7, 20, 38, .22) 100%),
    linear-gradient(0deg, rgba(7, 20, 38, .9) 0%, rgba(7, 20, 38, 0) 38%),
    linear-gradient(180deg, rgba(7, 20, 38, .35) 0%, rgba(7, 20, 38, 0) 22%); }
.ds2 .hero__poster img, .ds2 .hero__video { filter: saturate(.82) contrast(1.05); }
.ds2 .hero__eyebrow { padding: 0; border: 0; background: none; backdrop-filter: none; gap: .75rem; align-items: center;
  font-size: .76rem; letter-spacing: .16em; color: var(--orange-on-dark); margin-bottom: 1.5rem; }
.ds2 .hero__eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.ds2 .hero__title { font-weight: 650; font-size: clamp(2.7rem, 1.5rem + 4.2vw, 4.85rem); line-height: 1; letter-spacing: -.045em; margin-bottom: 1.5rem; }
.ds2 .hero__title::after { display: none; }
.ds2 .hero__title .hx { display: block; font-weight: 340; }
.ds2 .hero__lead { color: rgba(255, 255, 255, .86); max-width: 33em; }
.ds2 .hero__actions { margin-top: 2.25rem; gap: .9rem; }
.ds2 .hero__control { border-width: 1px; border-color: rgba(255, 255, 255, .45); background: rgba(7, 20, 38, .45); }
.ds2 .hero__priorities { padding-bottom: 0; background: rgba(7, 20, 38, .58); border-top: 1px solid var(--ds-line-dark); }
@supports (backdrop-filter: blur(8px)) { .ds2 .hero__priorities { backdrop-filter: blur(10px) saturate(1.2); } }
.ds2 .hero__priority-list { gap: 0; }
.ds2 .hero-priority { position: relative; background: transparent; border: 0; padding: 1.15rem 1.25rem; backdrop-filter: none;
  transition: background-color var(--t-card) var(--ds-ease); }
.ds2 .hero-priority::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .hero-priority:hover { background: rgba(255, 255, 255, .08); transform: none; }
.ds2 .hero-priority:hover::before, .ds2 .hero-priority:focus-visible::before { transform: scaleX(1); }
.ds2 .hero-priority__icon { width: 2.6rem; height: 2.6rem; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: var(--orange-on-dark); }
.ds2 .hero-priority__title { font-weight: 600; }
.ds2 .hero-priority__body { font-weight: 400; }
@media (min-width: 48em) { .ds2 .hero__priority-list > li + li .hero-priority { border-left: 1px solid var(--ds-line-dark); } }
@media (max-width: 47.99em) {
  .ds2 .hero__priority-list > li + li .hero-priority { border-top: 1px solid var(--ds-line-dark); }
  .ds2 .hero-priority { padding: .9rem 0; }
  .ds2 .hero__priorities { background: transparent; border-top: 0; }
  .ds2 .hero__priorities .container { border-top: 1px solid var(--ds-line-dark); }
}

/* ---------- Technology logo strip (reusable) ---------- */
.ds2 .logo-strip { background: var(--white); border-bottom: 1px solid var(--ds-line); }
.ds2 .logo-strip__inner { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 2rem; padding-block: 1.4rem; }
.ds2 .logo-strip__head { border-right: 1px solid var(--ds-line); padding-right: 1.5rem; }
.ds2 .logo-strip__title { margin: 0 0 .3rem; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-900); line-height: 1.4; }
.ds2 .logo-strip__note { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }
.ds2 .logo-strip__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.ds2 .logo-strip__track { display: flex; width: max-content; }
.ds2 .logo-strip__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ds2 .logo-strip__item { display: grid; align-content: center; gap: .1rem; padding-inline: 2.1rem; border-left: 1px solid var(--ds-line); min-height: 3.25rem; white-space: nowrap; }
.ds2 .logo-strip__name { font-size: 1.16rem; font-weight: 650; letter-spacing: -.015em; color: var(--navy-900); line-height: 1.2; }
.ds2 .logo-strip__item { justify-items: center; text-align: center; min-width: 13rem; }
.ds2 .logo-strip__logo { display: block; max-width: none; align-self: center; filter: brightness(0); opacity: .74; transition: opacity var(--t-card) var(--ds-ease), filter var(--t-card) var(--ds-ease); }
.ds2 .logo-strip__logo--h22 { height: 22px; } .ds2 .logo-strip__logo--h26 { height: 26px; } .ds2 .logo-strip__logo--h30 { height: 30px; }
.ds2 .logo-strip__logo--h36 { height: 36px; } .ds2 .logo-strip__logo--h40 { height: 40px; }
.ds2 .logo-strip__logo { width: auto; }
.ds2 .logo-strip__item:hover .logo-strip__logo { opacity: 1; filter: none; }
.ds2 .logo-strip__item:has(.logo-strip__logo) { grid-template-rows: 2.6rem auto; align-content: center; min-height: 4.4rem; gap: .35rem; }
.ds2 .logo-strip__cat { font-size: .68rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ds2 .logo-strip__control { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--ds-line); background: var(--white); color: var(--navy-900); cursor: pointer; transition: border-color var(--t-link), background-color var(--t-link); }
.ds2 .logo-strip__control:hover { border-color: var(--navy-900); }
.ds2 .logo-strip__control .icon--play { display: none; }
.ds2 .logo-strip__control[aria-pressed="true"] .icon--play { display: block; }
.ds2 .logo-strip__control[aria-pressed="true"] .icon--pause { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .ds2 .logo-strip__track { animation: ds-marquee 70s linear infinite; }
  .ds2 .logo-strip:hover .logo-strip__track, .ds2 .logo-strip:focus-within .logo-strip__track, .ds2 .logo-strip.is-paused .logo-strip__track { animation-play-state: paused; }
}
@keyframes ds-marquee { to { transform: translateX(-50%); } }
/* Without motion (or JavaScript) the strip becomes a static, wrapping list. */
@media (prefers-reduced-motion: reduce) {
  .ds2 .logo-strip__viewport { -webkit-mask-image: none; mask-image: none; }
  .ds2 .logo-strip__track, .ds2 .logo-strip__list:first-child { width: auto; flex-wrap: wrap; row-gap: .5rem; }
  .ds2 .logo-strip__list[aria-hidden] { display: none; }
}
.no-js .ds2 .logo-strip__viewport { -webkit-mask-image: none; mask-image: none; }
.no-js .ds2 .logo-strip__track, .no-js .ds2 .logo-strip__list:first-child { width: auto; flex-wrap: wrap; row-gap: .5rem; }
.no-js .ds2 .logo-strip__list[aria-hidden] { display: none; }
@media (max-width: 63.99em) {
  .ds2 .logo-strip__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .ds2 .logo-strip__head { border-right: 0; padding-right: 0; }
  .ds2 .logo-strip__viewport { grid-column: 1 / -1; grid-row: 2; }
  .ds2 .logo-strip__control { grid-column: 2; grid-row: 1; }
  .ds2 .logo-strip__item { padding-inline: 1.5rem; }
}

/* ---------- Media + text split ---------- */
.ds2 .media-split__img { box-shadow: var(--sh-media); overflow: hidden; }
.ds2 .media-split__img img { transition: transform var(--t-media) var(--ds-ease); }
@media (prefers-reduced-motion: no-preference) { .ds2 .media-split__media:hover .media-split__img img { transform: scale(1.03); } }
.ds2 .media-split__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--ds-line-strong); z-index: -1; pointer-events: none; }
.ds2 .media-split__media { isolation: isolate; }
.ds2 .media-split__media::after { border-width: 2px; border-radius: 0; left: -1rem; bottom: -1rem; width: 30%; height: 30%; }
.ds2 .media-split__img img, .ds2 .explorer__img img, .ds2 .division__img img, .ds2 .feature-band__img img,
.ds2 .svc-hero__img img, .ds2 .ds-challenges__img img, .ds2 .cta-band__img img, .ds2 .ds-pathways__img img { filter: saturate(.84) contrast(1.04); }
.ds2 .callout { background: var(--s-card); border: 1px solid var(--b-elevated); border-left: 2px solid var(--orange); padding: 1.35rem 1.5rem; box-shadow: var(--sh-2); }
.ds2 .callout__title { font-weight: 650; }
.ds2 .mini-scope li { background: var(--s-card); border-color: var(--b-elevated); font-weight: 550; box-shadow: var(--sh-1); }
@media (max-width: 55.99em) { .ds2 .media-split__media::before { inset: .75rem -.75rem -.75rem .75rem; } }

/* ---------- Service explorer ---------- */
.ds2 .explorer { background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-bg-cool) 100%); border-block: 1px solid var(--ds-line); }
.ds2 .explorer.is-enhanced .explorer__tabs { gap: 0; border: 1px solid var(--b-elevated); background: var(--s-card); align-self: start; box-shadow: var(--sh-2); }
.ds2 .explorer__tab { border: 0; border-radius: 0; padding: 1.1rem 1.25rem; gap: 1rem; position: relative; transition: background-color var(--t-panel) var(--ds-ease), color var(--t-panel) var(--ds-ease); }
.ds2 .explorer__tabs li + li .explorer__tab { border-top: 1px solid var(--ds-line); }
.ds2 .explorer__tab:hover { background: var(--surface); box-shadow: inset 2px 0 0 var(--orange); }
.ds2 .explorer__tab[aria-selected="true"] { background: var(--navy-900); color: var(--white); box-shadow: inset 3px 0 0 var(--orange); border-color: var(--navy-900); }
.ds2 .explorer__tab[aria-selected="true"] + * , .ds2 .explorer__tabs li:has(> [aria-selected="true"]) + li .explorer__tab { border-top-color: var(--navy-900); }
.ds2 .explorer__tab-icon { width: 2.6rem; height: 2.6rem; background: var(--white); border: 1px solid var(--ds-line); color: var(--navy); transition: inherit; }
.ds2 .explorer__tab[aria-selected="true"] .explorer__tab-icon { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--orange-on-dark); }
.ds2 .explorer__tab-title { font-weight: 600; }
.ds2 .explorer__tab-sum { font-weight: 400; }
.ds2 .explorer__tab[aria-selected="true"] .explorer__tab-sum { color: var(--on-dark-muted); }
.ds2 .explorer__panel { border: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-3); }
.ds2 .explorer__img img { transition: transform 1400ms var(--ds-ease); transform: scale(1.04); }
.ds2 .explorer__panel:not([data-inactive]) .explorer__img img { transform: none; }
.ds2 .explorer__media { position: relative; aspect-ratio: 16 / 8; }
@media (min-width: 64em) { .ds2 .explorer__media { aspect-ratio: 16 / 7; } }
.ds2 .explorer__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 20, 38, 0) 50%, rgba(7, 20, 38, .72) 100%); pointer-events: none; }
.ds2 .explorer__index { position: absolute; z-index: 1; left: clamp(1.5rem, 3vw, 2.25rem); bottom: 1rem; padding: .35rem .65rem; color: var(--white); font-size: .78rem; font-weight: 650; letter-spacing: .14em;
  background: rgba(7, 20, 38, .45); border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
@supports (backdrop-filter: blur(6px)) { .ds2 .explorer__index { backdrop-filter: blur(8px); } }
.ds2 .explorer__index span { color: rgba(255, 255, 255, .65); font-weight: 500; }
.ds2 .explorer__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.ds2 .explorer__title { font-weight: 650; }
/* Panels share one grid cell: switching never changes the section height. */
.ds2 .explorer.is-enhanced .explorer__panels { display: grid; grid-template-columns: minmax(0, 1fr); }
.ds2 .explorer__body .btn { white-space: normal; text-align: left; }
.ds2 .explorer.is-enhanced .explorer__panel { grid-area: 1 / 1; display: grid; align-content: start; animation: none;
  transition: opacity var(--t-panel) var(--ds-ease), transform var(--t-panel) var(--ds-ease), visibility 0s; }
.ds2 .explorer.is-enhanced .explorer__panel[data-inactive] { display: grid; visibility: hidden; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 180ms var(--ds-ease), transform 180ms var(--ds-ease), visibility 0s linear 180ms; }
@media (prefers-reduced-motion: reduce) { .ds2 .explorer.is-enhanced .explorer__panel { transition: none; transform: none; } }
@media (max-width: 63.99em) {
  .ds2 .explorer.is-enhanced .explorer__tabs { border: 0; background: transparent; gap: 0; }
  .ds2 .explorer.is-enhanced .explorer__tab { border: 1px solid var(--ds-line); background: var(--white); }
  .ds2 .explorer.is-enhanced .explorer__tabs li + li .explorer__tab { border-left: 0; border-top: 1px solid var(--ds-line); }
  .ds2 .explorer.is-enhanced .explorer__tab[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); box-shadow: inset 0 -3px 0 var(--orange); }
}

/* ---------- Divisions (homepage, navy) ---------- */
.ds2 .divisions { background:
    radial-gradient(70rem 40rem at 100% 0%, rgba(88, 160, 210, .12), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%); }
.ds2 .divisions__grid { display: grid; gap: 1.25rem; }
@media (min-width: 64em) { .ds2 .divisions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40em) and (max-width: 63.99em) { .ds2 .divisions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds2 .division { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ds-line-dark); background: rgba(255, 255, 255, .025);
  transition: border-color var(--t-card) var(--ds-ease), background-color var(--t-card) var(--ds-ease); }
.ds2 .division::before { content: ""; position: absolute; z-index: 2; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .division { box-shadow: 0 30px 50px -40px rgba(0, 0, 0, .7); }
.ds2 .division:hover { border-color: var(--ds-line-dark-strong); background: rgba(255, 255, 255, .05); box-shadow: 0 40px 60px -40px rgba(0, 0, 0, .85); }
@media (prefers-reduced-motion: no-preference) { .ds2 .division { transition: border-color var(--t-card) var(--ds-ease), background-color var(--t-card) var(--ds-ease), transform var(--t-card) var(--ds-ease), box-shadow var(--t-card) var(--ds-ease); } .ds2 .division:hover { transform: translateY(var(--lift)); } }
.ds2 .division:hover::before, .ds2 .division:focus-within::before { transform: scaleX(1); }
.ds2 .division__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.ds2 .division__img { width: 100%; height: 100%; }
.ds2 .division__img img { transition: transform 1.1s var(--ds-ease); }
.ds2 .division__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 20, 38, .35) 0%, rgba(7, 20, 38, 0) 35%, rgba(7, 20, 38, .2) 55%, rgba(7, 20, 38, .92) 100%); }
.ds2 .division__num { position: absolute; z-index: 1; left: 1.5rem; top: 1rem; font-size: 2.4rem; font-weight: 300; letter-spacing: -.04em; color: var(--white); line-height: 1; }
.ds2 .division__label { position: absolute; z-index: 1; left: 1.5rem; bottom: .9rem; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-on-dark); }
@media (prefers-reduced-motion: no-preference) { .ds2 .division:hover .division__img img { transform: scale(1.04); } }
.ds2 .division__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
.ds2 .division__title { color: var(--white); font-size: 1.4rem; margin-bottom: .5rem; }
.ds2 .division__body > p { color: var(--on-dark-muted); font-size: .98rem; }
.ds2 .division__links { list-style: none; margin: 1rem 0 1.25rem; padding: 0; border-top: 1px solid var(--ds-line-dark); }
.ds2 .division__links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.6rem; color: var(--white); font-size: .95rem; font-weight: 450; text-decoration: none; border-bottom: 1px solid var(--ds-line-dark); transition: color var(--t-link); }
.ds2 .division__links .icon { opacity: .45; transition: transform var(--t-link) var(--ds-ease), opacity var(--t-link); }
.ds2 .division__links a:hover { color: var(--orange-on-dark); }
.ds2 .division__links a:hover .icon { opacity: 1; transform: translateX(3px); }
.ds2 .division__cta { margin-top: auto; align-self: flex-start; }

/* ---------- Feature band: image blended into navy (reusable) ---------- */
.ds2 .feature-band { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-950); color: var(--on-dark); }
.ds2 .feature-band__media { position: absolute; inset: 0 auto 0 0; width: 54%; z-index: -1; }
.ds2 .feature-band__img { width: 100%; height: 100%; }
.ds2 .feature-band__img img { filter: saturate(.9) contrast(1.06) brightness(1.08); }
.ds2 .feature-band__media::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(7, 20, 38, .05) 0%, rgba(7, 20, 38, .3) 45%, rgba(7, 20, 38, .85) 82%, var(--navy-950) 100%),
    linear-gradient(0deg, rgba(7, 20, 38, .45) 0%, rgba(7, 20, 38, 0) 40%); }
.ds2 .feature-band--reverse .feature-band__media { inset: 0 0 0 auto; }
.ds2 .feature-band--reverse .feature-band__media::after { transform: scaleX(-1); }
.ds2 .feature-band__inner { display: grid; min-height: 34rem; }
.ds2 .feature-band__content { padding-block: var(--section-y); }
@media (min-width: 64em) {
  .ds2 .feature-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds2 .feature-band__content { grid-column: 2; padding-left: clamp(1rem, 3vw, 3rem); }
  .ds2 .feature-band--reverse .feature-band__content { grid-column: 1; padding-left: 0; padding-right: clamp(1rem, 3vw, 3rem); }
}
.ds2 .feature-band__title { color: var(--white); margin-bottom: 1rem; max-width: 16em; }
.ds2 .feature-band__body { color: var(--on-dark-muted); font-size: 1.08rem; max-width: 34em; margin-bottom: 2rem; }
.ds2 .feature-band__cta { margin: 1.75rem 0 0; }
.ds2 .ds-steps { list-style: none; margin: 0; padding: 0; }
.ds2 .ds-steps__num { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--orange-on-dark); margin-bottom: .55rem; }
.ds2 .ds-steps__title { color: var(--white); font-size: 1.12rem; margin-bottom: .3rem; }
.ds2 .ds-steps p { color: var(--on-dark-muted); font-size: .95rem; margin: 0; }
.ds2 .ds-steps--grid { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 36em) { .ds2 .ds-steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds2 .ds-steps--grid .ds-steps__item { border-top: 1px solid var(--ds-line-dark-strong); padding-top: 1.1rem; }
.ds2 .ds-steps--timeline .ds-steps__item { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.1rem; padding-bottom: 1.35rem; }
.ds2 .ds-steps--timeline .ds-steps__item:last-child { padding-bottom: 0; }
.ds2 .ds-steps--timeline .ds-steps__item::before { content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: 0; width: 1px; background: var(--ds-line-dark-strong); }
.ds2 .ds-steps--timeline .ds-steps__item:last-child::before { display: none; }
.ds2 .ds-steps--timeline .ds-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; border: 1px solid var(--ds-line-dark-strong); background: var(--navy-950); letter-spacing: .06em; }
.ds2 .ds-steps--timeline .ds-steps__title { margin-top: .55rem; }
@media (max-width: 63.99em) {
  .ds2 .feature-band__media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; z-index: 0; }
  .ds2 .feature-band__media::after { background: linear-gradient(180deg, rgba(7, 20, 38, 0) 40%, var(--navy-950) 100%); }
  .ds2 .feature-band--reverse .feature-band__media::after { transform: none; }
  .ds2 .feature-band__inner { min-height: 0; }
  .ds2 .feature-band__content { padding-block: 0 var(--section-y); margin-top: -2.5rem; position: relative; }
}

/* ---------- Supporting home sections ---------- */
.ds2 .faq__list { border-top-color: var(--ds-line); }
.ds2 .faq__item { border-bottom-color: var(--ds-line); }
.ds2 .faq__item summary { font-weight: 620; transition: color var(--t-link); }
.ds2 .cta-band { border-top: 1px solid var(--navy-900); }
.ds2 .cta-band::before { background: linear-gradient(100deg, rgba(7, 20, 38, .96) 0%, rgba(11, 28, 54, .88) 48%, rgba(25, 51, 93, .55) 100%); }
.ds2 .cta-band__heading { font-weight: 650; }
.ds2 .wa-float { border-radius: 0; }

/* ---------- Scroll reveal timing ---------- */
.ds2 [data-reveal] { transition-duration: var(--t-reveal) !important; transition-timing-function: var(--ds-ease) !important; }

/* =========================================================================
   Microsoft 365 benchmark service page
   ========================================================================= */
.ds2 .svc-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-950); color: var(--white); }
.ds2 .svc-hero__media { position: absolute; inset: 0 0 0 auto; width: 60%; z-index: -1; }
.ds2 .svc-hero__img { width: 100%; height: 100%; }
.ds2 .svc-hero__img img { object-position: 50% 22%; }
.ds2 .svc-hero__media::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, var(--navy-950) 0%, rgba(7, 20, 38, .86) 20%, rgba(7, 20, 38, .42) 58%, rgba(7, 20, 38, .2) 100%),
    linear-gradient(0deg, rgba(7, 20, 38, .7) 0%, rgba(7, 20, 38, 0) 35%); }
.ds2 .svc-hero__inner { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.ds2 .svc-hero__content { max-width: 41rem; }
.ds2 .svc-hero .breadcrumb ol { color: var(--on-dark-muted); }
.ds2 .svc-hero .breadcrumb a { color: var(--on-dark-muted); }
.ds2 .svc-hero .breadcrumb a:hover { color: var(--white); }
.ds2 .svc-hero .breadcrumb [aria-current] { color: var(--white); }
.ds2 .svc-hero .breadcrumb li + li::before { color: rgba(255, 255, 255, .4); }
.ds2 .svc-hero *:focus-visible { outline-color: var(--sky-300); }
.ds2 .svc-hero__title { color: var(--white); font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.5rem); line-height: 1.06; margin-bottom: 1.25rem; }
.ds2 .svc-hero__lead { color: rgba(255, 255, 255, .86); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.65; max-width: 36em; }
.ds2 .svc-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.ds2 .svc-hero__points { background: rgba(7, 20, 38, .62); border-top: 1px solid var(--ds-line-dark); }
@supports (backdrop-filter: blur(8px)) { .ds2 .svc-hero__points { backdrop-filter: blur(10px); } }
.ds2 .svc-hero__point-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds2 .svc-hero__point-list a { position: relative; display: flex; align-items: center; gap: .75rem; height: 100%; min-height: 3.75rem; padding: .9rem 1.1rem; color: var(--white); font-weight: 600; font-size: .93rem; line-height: 1.3; text-decoration: none; transition: background-color var(--t-card) var(--ds-ease); }
.ds2 .svc-hero__point-list li + li a { border-left: 1px solid var(--ds-line-dark); }
.ds2 .svc-hero__point-list a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .svc-hero__point-list a:hover { background: rgba(255, 255, 255, .06); }
.ds2 .svc-hero__point-list a:hover::before, .ds2 .svc-hero__point-list a:focus-visible::before { transform: scaleX(1); }
.ds2 .svc-hero__point-num { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--orange-on-dark); }
@media (max-width: 63.99em) {
  .ds2 .svc-hero__media { width: 100%; }
  .ds2 .svc-hero__media::after { background: linear-gradient(180deg, rgba(7, 20, 38, .7) 0%, rgba(7, 20, 38, .86) 45%, rgba(7, 20, 38, .96) 100%); }
  .ds2 .svc-hero__point-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds2 .svc-hero__point-list li { border-top: 1px solid var(--ds-line-dark); }
  .ds2 .svc-hero__point-list li + li a { border-left: 0; }
  .ds2 .svc-hero__point-list li:nth-child(even) a { border-left: 1px solid var(--ds-line-dark); }
  .ds2 .svc-hero__point-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 29.99em) {
  .ds2 .svc-hero__point-list { grid-template-columns: 1fr; }
  .ds2 .svc-hero__point-list li:nth-child(even) a { border-left: 0; }
  .ds2 .svc-hero__actions .btn { width: 100%; }
}

/* Challenges: editorial ruled list beside a sticky introduction */
.ds2 .ds-challenges__grid { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 64em) {
  .ds2 .ds-challenges__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .ds2 .ds-challenges__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.ds2 .ds-challenges__aside .ds-head__title { margin-bottom: 1rem; }
.ds2 .ds-challenges__media { margin-top: 2rem; position: relative; }
.ds2 .ds-challenges__media::after { content: ""; position: absolute; left: 0; bottom: 0; width: 5rem; height: 2px; background: var(--orange); }
.ds2 .ds-challenges__img { aspect-ratio: 16 / 10; }
.ds2 .ruled-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--navy-900); }
.ds2 .ruled-list__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.6rem 0 1.35rem; border-bottom: 1px solid var(--ds-line); }
.ds2 .ruled-list__num { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; color: var(--ds-accent-light); line-height: 1.1; transition: color var(--t-card); }
.ds2 .ruled-list__item:hover .ruled-list__num { color: var(--orange-btn); }
.ds2 .ruled-list__title { font-size: 1.22rem; margin-bottom: .35rem; }
.ds2 .ruled-list__body p { color: var(--muted); margin-bottom: .35rem; }

/* Managed service vs project comparison */
.ds2 .compare { display: grid; border: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-2); }
@media (min-width: 56em) { .ds2 .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds2 .compare__col + .compare__col { border-left: 1px solid var(--ds-line); } }
@media (max-width: 55.99em) { .ds2 .compare__col + .compare__col { border-top: 1px solid var(--ds-line); } }
.ds2 .compare__col { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); }
.ds2 .compare__col::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--navy-900); }
.ds2 .compare__col--project::before { background: var(--orange-btn); }
.ds2 .compare__col--project .ds-tag { color: var(--orange-btn); }
.ds2 .compare__title { font-size: 1.45rem; margin-bottom: .4rem; }
.ds2 .compare__sub { color: var(--muted); margin-bottom: 1.25rem; }
.ds2 .compare__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ds-line); }
.ds2 .compare__list li { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--ds-line); }
.ds2 .compare__list .icon { color: var(--orange-btn); margin-top: .25rem; }
.ds2 .compare__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: 1rem; }

/* Platform capability grid */
.ds2 .platform-grid { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--b-elevated); border-left: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-3); }
@media (min-width: 36em) { .ds2 .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ds2 .platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds2 .platform { position: relative; padding: 1.6rem 1.5rem 1.7rem; border-right: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); transition: background-color var(--t-card) var(--ds-ease); }
.ds2 .platform::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .platform:hover { background: linear-gradient(180deg, var(--s-bg-tint), var(--s-card)); }
.ds2 .platform:hover::before { transform: scaleX(1); }
.ds2 .platform__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border: 1px solid var(--ds-line); color: var(--navy); background: var(--white); }
.ds2 .platform__name { font-size: 1.08rem; margin-bottom: .35rem; }
.ds2 .platform p { color: var(--muted); font-size: .94rem; margin: 0; }

/* Engagement: numbered editorial rows */
.ds2 .ds-engagement__grid { display: grid; gap: 1.5rem 5rem; }
@media (min-width: 56em) { .ds2 .ds-engagement__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .ds2 .ds-engagement__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.ds2 .engage-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--navy-900); }
.ds2 .engage-list__item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding: 1.75rem 0; border-bottom: 1px solid var(--ds-line); }
.ds2 .engage-list__num { font-size: clamp(2.2rem, 1.6rem + 1.5vw, 3rem); font-weight: 250; letter-spacing: -.05em; line-height: .95; color: var(--ds-accent-light); }
.ds2 .engage-list__title { font-size: 1.3rem; margin-bottom: .35rem; }
.ds2 .engage-list p { color: var(--muted); margin: 0; max-width: 40em; }
@media (max-width: 35.99em) { .ds2 .engage-list__item { grid-template-columns: 3.5rem minmax(0, 1fr); } }

/* Boundaries */
.ds2 .ds-boundaries { padding-bottom: 0; }
.ds2 .boundary-panel { display: grid; border: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-2); }
@media (min-width: 56em) { .ds2 .boundary-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ds2 .boundary-panel__model { border-left: 1px solid var(--ds-line); } }
@media (max-width: 55.99em) { .ds2 .boundary-panel__model { border-top: 1px solid var(--ds-line); } }
.ds2 .boundary-panel__main { background: var(--surface); padding: clamp(1.5rem, 3vw, 2.5rem); }
.ds2 .boundary-panel__main .ds-head__title { margin-bottom: 1rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.ds2 .boundary-panel__main p:not(.eyebrow) { color: var(--ink); font-size: 1.05rem; }
.ds2 .boundary-panel__model { padding: clamp(1.5rem, 3vw, 2.5rem); }
.ds2 .boundary-panel__model-heading { font-size: 1.05rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ds-line); }

/* Related services */
.ds2 .related-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .ds2 .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds2 .related-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.6rem 1.6rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); }
.ds2 .related-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .related-card:hover { border-color: var(--b-hover); box-shadow: var(--sh-3); }
.ds2 .related-card:hover::before, .ds2 .related-card:focus-within::before { transform: scaleX(1); }
.ds2 .related-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; border: 1px solid var(--ds-line); color: var(--navy); }
.ds2 .related-card__family { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-btn); }
.ds2 .related-card__title { font-size: 1.2rem; margin-bottom: .4rem; }
.ds2 .related-card > p:not(.related-card__family) { color: var(--muted); font-size: .96rem; }
.ds2 .related-card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1rem; font-weight: 650; font-size: .93rem; color: var(--navy-900); }
.ds2 .related-card:hover .related-card__more { color: var(--orange-btn); }

/* Conversion pathways */
.ds2 .ds-pathways { isolation: isolate; }
.ds2 .ds-pathways__media { position: absolute; inset: 0; z-index: -2; }
.ds2 .ds-pathways__img { width: 100%; height: 100%; }
.ds2 .ds-pathways::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(7, 20, 38, .97) 0%, rgba(11, 28, 54, .9) 55%, rgba(25, 51, 93, .72) 100%); }
.ds2 .pathways { display: grid; gap: 1.25rem; }
@media (min-width: 56em) { .ds2 .pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds2 .pathway { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--ds-line-dark-strong); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(7, 20, 38, .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 50px -36px rgba(0, 0, 0, .8); transition: border-color var(--t-card) var(--ds-ease); }
@supports (backdrop-filter: blur(8px)) { .ds2 .pathway { backdrop-filter: blur(8px); } }
.ds2 .pathway:hover { border-color: rgba(255, 255, 255, .55); }
.ds2 .pathway__title { color: var(--white); font-size: 1.45rem; margin-bottom: .5rem; }
.ds2 .pathway p { color: var(--on-dark-muted); }
.ds2 .pathway__actions { margin-top: auto; padding-top: 1.25rem; }
.ds2 .ds-pathways__alt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; margin: 2rem 0 0; color: var(--on-dark-muted); }
.ds2 .ds-pathways__alt a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: var(--white); font-weight: 650; }
.ds2 .ds-pathways__alt a:hover { color: var(--orange-on-dark); }

@media print {
  .ds2 .logo-strip__track { animation: none; }
  .ds2 .svc-hero, .ds2 .feature-band, .ds2 .divisions, .ds2 .ds-pathways { background: none; color: #000; }
}

/* ---------- Footer and contact details (shared markup, square treatment on DS2 pages) ---------- */
.ds2 .contact-lines a .icon { border-radius: 0; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-1); }
.ds2 .site-footer__brand-band { border-top-color: var(--ds-line); }
.ds2 .site-footer__legal { border-top-color: var(--ds-line-dark); }
.js .ds2 .mega-toggle, .js .ds2 .nav-toggle { border-radius: 0; }

/* =========================================================================
   Site-wide rollout (v2.1): every page
   ========================================================================= */
/* Straight edges everywhere, including form controls, notices and status markers. */
.ds2 *, .ds2 *::before, .ds2 *::after { border-radius: 0 !important; }
.ds2 .field__error::before { width: 1.1rem; height: 1.1rem; }

/* ---------- Light feature band (timelines and process content) ---------- */
.ds2 .feature-band--light { background: var(--surface); color: var(--ink); border-block: 1px solid var(--ds-line); }
.ds2 .feature-band--light .feature-band__media::after { background:
    linear-gradient(90deg, rgba(244, 247, 251, 0) 0%, rgba(244, 247, 251, .15) 50%, rgba(244, 247, 251, .85) 84%, var(--surface) 100%); }
.ds2 .feature-band--light.feature-band--reverse .feature-band__media::after { transform: scaleX(-1); }
.ds2 .feature-band--light .feature-band__img img { filter: saturate(.9) contrast(1.02); }
.ds2 .feature-band--light .feature-band__title { color: var(--navy-900); }
.ds2 .feature-band--light .feature-band__body { color: var(--muted); }
.ds2 .feature-band--light .ds-steps__num { color: var(--orange-btn); }
.ds2 .feature-band--light .ds-steps__title { color: var(--navy-900); }
.ds2 .feature-band--light .ds-steps p { color: var(--muted); }
.ds2 .feature-band--light .ds-steps--grid .ds-steps__item { border-top-color: var(--ds-line-strong); }
.ds2 .feature-band--light .ds-steps--timeline .ds-steps__item::before { background: var(--ds-line-strong); }
.ds2 .feature-band--light .ds-steps--timeline .ds-steps__num { background: var(--white); border-color: var(--ds-line-strong); }
.ds2 .feature-band--light .hx { color: var(--ds-accent-light); }
.ds2 .feature-band--light { background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-bg-cool) 100%); }
.ds2 .feature-band--light .feature-band__media { box-shadow: inset -1px 0 0 var(--b-elevated); }
.ds2 .feature-band--light .ds-steps--grid { gap: 1rem; }
.ds2 .feature-band--light .ds-steps--grid .ds-steps__item { position: relative; padding: 1.15rem 1.25rem 1.25rem; border: 1px solid var(--b-elevated); background: rgba(255, 255, 255, .82); box-shadow: var(--sh-2); }
@supports (backdrop-filter: blur(8px)) { .ds2 .feature-band--light .ds-steps--grid .ds-steps__item { background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); } }
.ds2 .feature-band--light .ds-steps--timeline .ds-steps__num { box-shadow: var(--sh-1); }
@media (max-width: 63.99em) {
  .ds2 .feature-band--light .feature-band__media::after,
  .ds2 .feature-band--light.feature-band--reverse .feature-band__media::after { transform: none; background: linear-gradient(180deg, rgba(244, 247, 251, 0) 45%, var(--surface) 100%); }
}

/* ---------- Standard service pages ---------- */
.ds2 .svc-hero--standard .svc-hero__inner { padding-block: clamp(2.5rem, 6vw, 5rem); }
.ds2 .ds-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; margin-top: .5rem; padding: 1.5rem 1.75rem; background: var(--s-card); border: 1px solid var(--b-elevated); border-left: 2px solid var(--orange); box-shadow: var(--sh-2); }
.ds2 .ds-note--glass { background: linear-gradient(120deg, rgba(234, 242, 250, .9), rgba(255, 255, 255, .95)); }
.ds2 .ds-note__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--ds-line); color: var(--navy); }
.ds2 .ds-note__title { font-size: 1.15rem; margin-bottom: .35rem; }
.ds2 .ds-note p { color: var(--muted); margin: 0; max-width: 56em; }
.ds2 .ds-intro + .ds-engagement, .ds2 .ds-intro + .ds-scope { border-top: 1px solid var(--ds-line); }
/* Contextual call to action after the customer challenge */
.ds2 .ds-cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: 1.15rem 1.15rem 1.15rem 1.5rem;
  border: 1px solid var(--b-elevated); border-left: 2px solid var(--b-brand); background: linear-gradient(90deg, var(--s-bg-tint), var(--s-card) 70%); box-shadow: var(--sh-1); }
.ds2 .ds-cta-inline > .btn { max-width: 100%; white-space: normal; text-align: center; }
.ds2 .ds-cta-inline__text { margin: 0; min-width: 0; color: var(--muted); max-width: 46em; }
.ds2 .ds-cta-inline__text strong { color: var(--navy-900); font-weight: 600; }
/* Scope as elevated numbered cards (Consult & Transform, Web & Digital) */
.ds2 .scope-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: none; }
@media (min-width: 48em) { .ds2 .scope-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.ds2 .scope-card { position: relative; padding: 1.75rem 1.6rem 1.6rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); }
.ds2 .scope-card::after { content: ""; position: absolute; left: 1.6rem; top: 0; width: 2.5rem; height: 2px; background: var(--b-brand); }
.ds2 .scope-card__num { display: block; margin-bottom: 1rem; font-size: 2.1rem; font-weight: 250; letter-spacing: -.05em; line-height: 1; color: var(--ds-accent-light); }
.ds2 .scope-card__title { font-size: 1.2rem; margin-bottom: .4rem; }
.ds2 .scope-card p { color: var(--muted); margin: 0; }
@media (min-width: 48em) { .ds2 .related-grid--n2, .ds2 .related-grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ds2 .related-grid--n4, .ds2 .related-grid--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds2 .related-grid--n5, .ds2 .related-grid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds2 .ds-next__grid { display: grid; gap: 2rem 4rem; align-items: end; }
@media (min-width: 56em) { .ds2 .ds-next__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ds2 .ds-next .ds-head__title { color: var(--white); margin-bottom: 1rem; }
.ds2 .ds-next__body { color: var(--on-dark-muted); font-size: 1.08rem; max-width: 36em; margin: 0; }
.ds2 .ds-next__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
@media (min-width: 56em) { .ds2 .ds-next__actions { justify-content: flex-end; } .ds2 .ds-next__actions .ds-pathways__alt { justify-content: flex-end; width: 100%; margin-top: .5rem; } }
.ds2 .ds-next .ds-pathways__alt { margin-top: .25rem; }

/* ---------- Portfolio ---------- */
.ds2 .work-group + .work-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ds2 .work-group__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; padding-bottom: .9rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--navy-900); }
.ds2 .work-group__title { font-size: 1.35rem; margin: 0; }
.ds2 .work-group__note { min-width: 0; overflow-wrap: anywhere; margin: 0; color: var(--muted); font-size: .95rem; max-width: 40em; }
.ds2 .work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 40em) { .ds2 .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ds2 .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds2 .ds-work { background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-bg-cool) 100%); }
.ds2 .work-card { position: relative; display: flex; flex-direction: column; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); }
.ds2 .work-card::before { content: ""; position: absolute; z-index: 2; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .work-card:hover { border-color: var(--b-hover); box-shadow: var(--sh-3); }
.ds2 .work-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ds2 .work-card__link:focus-visible { outline: none; }
.ds2 .work-card__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.ds2 .work-card__overlay { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: .5rem; padding: 2.5rem 1.1rem .9rem; color: var(--white); font-size: .88rem; font-weight: 600;
  background: linear-gradient(180deg, rgba(7, 20, 38, 0), rgba(7, 20, 38, .85)); opacity: 0; transform: translateY(6px); transition: opacity var(--t-card) var(--ds-ease), transform var(--t-card) var(--ds-ease); }
.ds2 .work-card:hover .work-card__overlay, .ds2 .work-card:focus-within .work-card__overlay { opacity: 1; transform: none; }
.ds2 .work-card:hover::before, .ds2 .work-card:focus-within::before { transform: scaleX(1); }
.ds2 .work-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--ds-line); background: var(--surface); }
.ds2 .work-card__img, .ds2 .work-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ds2 .work-card__img img { transition: transform 1.2s var(--ds-ease); }
@media (prefers-reduced-motion: no-preference) { .ds2 .work-card:hover .work-card__img img { transform: scale(1.03); } }
.ds2 .work-card__status { position: absolute; z-index: 1; left: 1rem; top: 1rem; margin: 0; background: rgba(255, 255, 255, .9); color: var(--navy-900); border-color: var(--navy-900); box-shadow: var(--sh-1); }
.ds2 .work-group--concepts .work-card__status { color: var(--orange-btn); border-color: var(--orange-btn); }
.ds2 .work-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.4rem 1.2rem; }
.ds2 .work-card__sector { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-btn); }
.ds2 .work-card__title { font-size: 1.2rem; margin-bottom: .4rem; }
.ds2 .work-card__body > p:not(.work-card__sector) { color: var(--muted); font-size: .95rem; }
.ds2 .work-card__link { margin-top: auto; align-self: flex-start; }
.ds2 .ds-work__cta { margin: 2rem 0 0; }

/* ---------- Generic page components ---------- */
.ds2 .page-hero { position: relative; isolation: isolate; background: radial-gradient(50rem 24rem at 85% 0%, rgba(88, 160, 210, .16), transparent 70%), linear-gradient(180deg, var(--s-bg-tint) 0%, var(--s-card) 100%); border-bottom: 1px solid var(--ds-line); }
.ds2 .page-hero::before { display: none; }
.ds2 .page-hero h1 { font-weight: 650; font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.5rem); line-height: 1.06; }
.ds2 .page-hero__img { box-shadow: var(--sh-media); position: relative; overflow: hidden; }
.ds2 .page-hero__media { position: relative; isolation: isolate; }
.ds2 .page-hero__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--ds-line-strong); background: linear-gradient(135deg, rgba(88, 160, 210, .12), rgba(88, 160, 210, 0) 60%); z-index: -1; }
.ds2 .page-hero__media::after { content: ""; position: absolute; left: 0; bottom: 0; width: 5rem; height: 2px; background: var(--orange); }
.ds2 .page-hero__img img { filter: saturate(.84) contrast(1.04); }
@media (max-width: 55.99em) { .ds2 .page-hero__media::before { inset: .75rem -.75rem -.75rem .75rem; } }
.ds2 .breadcrumb ol { font-size: .86rem; }
.ds2 .section__heading { font-weight: 650; }
.ds2 .split__grid { gap: 1.25rem 5rem; }
.ds2 .split + .split { border-top: 1px solid var(--ds-line); }
.ds2 .card { background: var(--s-card); border-color: var(--b-elevated); box-shadow: var(--sh-2); transition: border-color var(--t-card) var(--ds-ease), box-shadow var(--t-card) var(--ds-ease), transform var(--t-card) var(--ds-ease); }
.ds2 section:not(.section--navy):has(> .container > .cards) { background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-bg-cool) 100%); }
.ds2 .card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .card:hover::before, .ds2 .card:focus-within::before { transform: scaleX(1); }
.ds2 .card:has(.card__link):hover { box-shadow: var(--sh-3); border-color: var(--b-hover); }
.ds2 .card__icon, .ds2 .svc-tile__icon { width: 2.6rem; height: 2.6rem; background: var(--white); border: 1px solid var(--ds-line); color: var(--navy); }
.ds2 .card__title { font-weight: 600; }
.ds2 .svc-tile { background: var(--s-card); border-color: var(--b-elevated); box-shadow: var(--sh-2); }
.ds2 .svc-tile::before { content: ""; position: absolute; z-index: 2; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .svc-tile:hover { box-shadow: var(--sh-3); border-color: var(--b-hover); }
.ds2 .svc-tile:hover::before, .ds2 .svc-tile:focus-within::before { transform: scaleX(1); }
.ds2 .svc-tile__media { border-bottom: 1px solid var(--ds-line); }
.ds2 .svc-tile__img img { filter: saturate(.84) contrast(1.04); }
.ds2 .service-group { background: var(--s-bg); }
.ds2 .service-group + .service-group { padding-top: var(--section-y); border-top: 1px solid var(--ds-line); }
.ds2 .service-group:nth-of-type(even) { background: linear-gradient(180deg, var(--s-bg-tint) 0%, var(--s-bg) 100%); }
.ds2 .section--surface:has(.scope-model), .ds2 .scope-model { position: relative; }
.ds2 .scope-model__item { border-color: var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-2); }
.ds2 .timeline__num { background: var(--s-card); color: var(--navy-900); border: 1px solid var(--navy-900); font-weight: 600; box-shadow: var(--sh-1); }
.ds2 .timeline__item::before { width: 1px; background: var(--ds-line-strong); }
.ds2 .timeline__title { font-size: 1.25rem; }
.ds2 .timeline { border-top: 1px solid var(--navy-900); padding-top: 2rem; }
/* Forms */
.ds2 .section--form { background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-bg-cool) 100%); }
.ds2 .form-card { background: var(--s-card); box-shadow: var(--sh-3); border: 1px solid var(--b-elevated); border-top: 2px solid var(--navy-900); }
.ds2 .field input, .ds2 .field select, .ds2 .field textarea { border-width: 1px; border-color: var(--ds-line-strong); transition: border-color var(--t-link), box-shadow var(--t-link); }
.ds2 .field input:hover, .ds2 .field select:hover, .ds2 .field textarea:hover { border-color: var(--navy); }
.ds2 .field input:focus-visible, .ds2 .field select:focus-visible, .ds2 .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--navy); }
.ds2 .field input:disabled, .ds2 .field select:disabled, .ds2 .field textarea:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.ds2 .field.has-error input, .ds2 .field.has-error select, .ds2 .field.has-error textarea { border-width: 1px; box-shadow: inset 0 0 0 1px var(--error); }
.ds2 .form-summary, .ds2 .form-status { border-width: 1px; }
.ds2 .notice--preview { border-width: 1px; }
.ds2 .aside-block { border-top-color: var(--ds-line); }
/* Legal prose and status pages */
.ds2 .prose h2 { font-weight: 650; padding-top: 2rem; border-top: 1px solid var(--ds-line); }
.ds2 .prose h2:first-child { border-top: 0; padding-top: 0; }
.ds2 .legal-pending { border-left: 2px solid var(--orange); }
.ds2 .status-page { background: linear-gradient(180deg, var(--surface), var(--white)); border-bottom: 1px solid var(--ds-line); }
.ds2 .status-page__code { color: var(--ds-line); font-weight: 300; }
/* Header utility */
.ds2 .nav__contact { font-weight: 600; }

/* ---------- Footer v2 ---------- */
.ds2 .site-footer--v2 { font-size: .95rem; }
.ds2 .site-footer__top { background: linear-gradient(180deg, var(--s-bg) 0%, var(--s-bg-cool) 100%); border-top: 1px solid var(--ds-line); }
.ds2 .site-footer__grid { display: grid; gap: 2.5rem 3rem; padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 56em) { .ds2 .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ds2 .site-footer__nav { grid-column: 1 / -1; } }
@media (min-width: 80em) { .ds2 .site-footer__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.5fr) minmax(0, 1.25fr); gap: 2.5rem; } .ds2 .site-footer__nav { grid-column: auto; } }
.ds2 .site-footer__brand .brand-logo--footer img { width: min(100%, 17rem); }
.ds2 .site-footer__position { margin: 1.25rem 0 .2rem; font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; color: var(--navy-900); line-height: 1.25; }
.ds2 .site-footer__promise { margin: 0 0 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-btn); }
.ds2 .site-footer__statement { margin: 0; color: var(--muted); font-size: .95rem; max-width: 30em; }
.ds2 .site-footer__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.5rem; }
.ds2 .site-footer__cta-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-weight: 650; color: var(--navy-900); text-decoration: none; }
.ds2 .site-footer__cta-link:hover { color: var(--orange-btn); }
.ds2 .site-footer__nav { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
@media (min-width: 40em) { .ds2 .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80em) { .ds2 .site-footer__nav { gap: 1.75rem; padding-inline: 2rem; border-inline: 1px solid var(--ds-line); } }
.ds2 .site-footer__title { margin: 0 0 .75rem; padding-bottom: .65rem; border-bottom: 1px solid var(--ds-line); color: var(--navy-900); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ds2 .site-footer__col ul, .ds2 .site-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.ds2 .site-footer__col a { display: inline-flex; align-items: center; min-height: 2.35rem; line-height: 1.35; color: var(--ink); font-weight: 400; text-decoration: none; transition: color var(--t-link); }
.ds2 .site-footer__col a:hover { color: var(--orange-btn); text-decoration: underline; text-underline-offset: .25em; }
.ds2 .contact-lines--footer { gap: .35rem; }
.ds2 .contact-lines--footer a { font-size: .92rem; overflow-wrap: anywhere; }
.ds2 .contact-lines--footer a > span { min-width: 0; }
.ds2 .contact-lines--footer a .icon { width: 2.25rem; height: 2.25rem; padding: .55rem; }
.ds2 .site-footer__office { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ds-line); color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ds2 .site-footer__office-label { display: block; margin-bottom: .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-900); }
.ds2 .site-footer__bottom { background: var(--navy-950); color: var(--on-dark-muted); font-size: .85rem; }
.ds2 .site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem; }
@media (max-width: 63.99em) { .ds2 .site-footer__bottom-inner { padding-bottom: 5.5rem; } }
.ds2 .site-footer__bottom p { margin: 0; color: var(--on-dark-muted); }
.ds2 .site-footer__bottom strong { color: var(--on-dark); }
.ds2 .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.ds2 .site-footer__legal-links a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--on-dark); text-decoration: none; }
.ds2 .site-footer__legal-links a:hover { color: var(--white); text-decoration: underline; }
.ds2 .site-footer__bottom *:focus-visible { outline-color: var(--sky-300); }
@media (min-width: 64em) { .ds2 .site-footer__bottom-inner { padding-right: 10rem; } }
html.wa-footer .ds2 .wa-float { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; }

/* =========================================================================
   Motion (v3): elevation, reveals and process lines. All motion is skipped
   when the visitor prefers reduced motion; content never depends on it.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Interactive cards lift slightly; static information panels stay put. */
  .ds2 *:is(.related-card, .work-card, .svc-tile, .card:has(.card__link)) { transition: border-color var(--t-card) var(--ds-ease), box-shadow var(--t-card) var(--ds-ease), transform var(--t-card) var(--ds-ease); }
  .ds2 *:is(.related-card, .work-card, .svc-tile, .card:has(.card__link)):hover { transform: translateY(var(--lift)); }
  /* Photographs settle as their section is revealed. */
  .reveal-ready .ds2 [data-reveal] *:is(.media-split__img, .page-hero__img, .ds-challenges__img) img { transform: scale(1.06); transition: transform 1400ms var(--ds-ease); }
  .reveal-ready .ds2 [data-reveal].is-visible *:is(.media-split__img, .page-hero__img, .ds-challenges__img) img { transform: none; }
  /* Process steps: connecting lines draw in as each step appears. */
  .reveal-ready .ds2 .ds-steps--timeline .ds-steps__item::before { transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--ds-ease) 200ms; }
  .reveal-ready .ds2 .ds-steps--timeline .ds-steps__item.is-visible::before { transform: none; }
  .reveal-ready .ds2 .timeline__item::before { transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--ds-ease) 200ms; }
  .reveal-ready .ds2 .timeline__item.is-visible::before { transform: none; }
  .ds2 .scope-card::after, .ds2 .ds-steps--grid .ds-steps__item::after { transition: width 700ms var(--ds-ease) 250ms; }
  .reveal-ready .ds2 .scope-card:not(.is-visible)::after { width: 0; }
}
.ds2 .ds-steps--grid .ds-steps__item { position: relative; }
.ds2 .ds-steps--grid .ds-steps__item::after { content: ""; position: absolute; left: -1px; top: -1px; width: 2.5rem; height: 2px; background: var(--orange); }
.reveal-ready .ds2 .ds-steps--grid .ds-steps__item:not(.is-visible)::after { width: 0; }

/* =========================================================================
   v3.1 finishing touches: page transitions, hero entrance, social links,
   Our Approach process, card hover consistency.
   ========================================================================= */

/* ---------- Page-to-page transitions ----------
   Native cross-document View Transitions: no script, no added delay, Back/Forward and refresh unaffected.
   Browsers without support simply navigate as before. The header and top bar stay steady while the page cross-fades. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* Named only while a transition runs: a view-transition-name would otherwise make the header a backdrop root and stop the mega menu's glass from blurring the page. */
html:active-view-transition .ds2 .topbar { view-transition-name: nb-topbar; }
html:active-view-transition .ds2 .site-header { view-transition-name: nb-header; }
::view-transition-old(root) { animation: nb-page-out 170ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: nb-page-in 250ms cubic-bezier(.2, .7, .2, 1) 30ms both; }
::view-transition-group(nb-header), ::view-transition-group(nb-topbar) { animation-duration: 200ms; }
@keyframes nb-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes nb-page-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Hero entrance (every page) ----------
   Order: eyebrow → heading (word by word) → description → buttons → visual. Plays once on load.
   Pure CSS animations that always finish visible; the word split is added by site.js. */
.ds2 .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.ds2 .hw__i { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ds2 main > :is(.hero, .svc-hero, .page-hero, .status-page):first-child :is(.breadcrumb) { animation: nb-fade 520ms var(--ds-ease) both; }
  .ds2 :is(.hero, .svc-hero, .page-hero, .status-page) :is(.hero__eyebrow, .eyebrow) { animation: nb-rise 620ms var(--ds-ease) 60ms both; }
  .ds2 :is(.hero, .svc-hero, .page-hero, .status-page) h1:not(.is-split) { animation: nb-rise 760ms var(--ds-ease) 320ms both; }
  .ds2 :is(.hero, .svc-hero, .page-hero, .status-page) h1.is-split .hw__i { animation: nb-word 880ms cubic-bezier(.2, .75, .15, 1) calc(140ms + var(--w, 0) * 55ms) both; }
  .ds2 :is(.hero, .svc-hero, .page-hero, .status-page) :is(.hero__lead, .svc-hero__lead, .lead) { animation: nb-rise 720ms var(--ds-ease) 560ms both; }
  .ds2 :is(.hero__actions, .svc-hero__actions, .page-hero__actions, .status-page__state > p:last-child) > * { animation: nb-rise 640ms var(--ds-ease) 720ms both; }
  .ds2 :is(.hero__actions, .svc-hero__actions, .page-hero__actions) > :nth-child(2) { animation-delay: 810ms; }
  .ds2 .svc-hero__point-list > li { animation: nb-rise 600ms var(--ds-ease) both; animation-delay: 880ms; }
  .ds2 .svc-hero__point-list > li:nth-child(2) { animation-delay: 940ms; }
  .ds2 .svc-hero__point-list > li:nth-child(3) { animation-delay: 1000ms; }
  .ds2 .svc-hero__point-list > li:nth-child(4) { animation-delay: 1060ms; }
  .ds2 .svc-hero__point-list > li:nth-child(n+5) { animation-delay: 1120ms; }
  .ds2 .hero__priorities { animation: nb-rise 760ms var(--ds-ease) 900ms both; }
  /* Visuals: the home video/poster settles; service photographs are unveiled from the right; page photographs open from their frame. */
  .ds2 .hero__media { animation: nb-settle 1800ms var(--ds-ease) both; }
  .ds2 .svc-hero__media { animation: nb-unveil 1150ms cubic-bezier(.65, 0, .2, 1) 80ms both, nb-settle 1700ms var(--ds-ease) 80ms both; }
  .ds2 .page-hero__media > picture { animation: nb-unveil 1000ms cubic-bezier(.65, 0, .2, 1) 260ms both; }
  .ds2 .page-hero__media::before { animation: nb-fade 800ms var(--ds-ease) 760ms both; }
  .ds2 .page-hero__media::after { transform-origin: left; animation: nb-line 700ms var(--ds-ease) 1050ms both; }
  /* Depth on scroll (set by site.js; small and capped). */
  .ds2 .hero__media > *, .ds2 .svc-hero__media > picture { transform: translate3d(0, var(--hero-shift, 0px), 0); will-change: transform; }
}
@keyframes nb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nb-word { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes nb-settle { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes nb-unveil { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes nb-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Hero buttons and links: refined hover (colour, fine border, soft shadow, slight lift — motion only when allowed). */
.ds2 :is(.hero, .svc-hero, .page-hero) .btn { transition: background-color var(--t-btn) var(--ds-ease), border-color var(--t-btn) var(--ds-ease), color var(--t-btn) var(--ds-ease), box-shadow var(--t-btn) var(--ds-ease), transform var(--t-btn) var(--ds-ease); }
.ds2 :is(.hero, .svc-hero) .btn--accent:hover { box-shadow: 0 14px 28px -14px rgba(232, 64, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.ds2 :is(.hero, .svc-hero) .btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .7); }
.ds2 .hero-priority .icon { transition: transform var(--t-card) var(--ds-ease), color var(--t-card) var(--ds-ease); }
.ds2 .hero-priority:hover, .ds2 .hero-priority:focus-visible { background: rgba(88, 160, 210, .1); }
@media (prefers-reduced-motion: no-preference) { .ds2 .hero-priority:hover .icon:last-child { transform: translateX(4px); } }

/* ---------- Social links (top bar and footer) ---------- */
.ds2 .topbar__end { display: flex; align-items: center; gap: 1.25rem; }
.ds2 .social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .35rem; }
.ds2 .social__link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: inherit; border: 1px solid transparent;
  transition: color var(--t-link) var(--ds-ease), border-color var(--t-link) var(--ds-ease), background-color var(--t-link) var(--ds-ease); }
.ds2 .social--topbar .social__link { color: var(--on-dark-muted); }
.ds2 .social--topbar .social__link:hover, .ds2 .social--topbar .social__link:focus-visible { color: var(--white); border-color: rgba(142, 195, 232, .45); background: rgba(142, 195, 232, .1); }
.ds2 .social--topbar + .topbar__tagline { padding-left: 1.25rem; border-left: 1px solid rgba(142, 195, 232, .25); }
.ds2 .site-footer__social { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--ds-line); }
.ds2 .social--footer { margin-top: .6rem; gap: .5rem; }
.ds2 .social--footer .social__link { width: 2.5rem; height: 2.5rem; color: var(--navy); background: var(--s-card); border-color: var(--b-elevated); box-shadow: var(--sh-1); }
.ds2 .social--footer .social__link:hover, .ds2 .social--footer .social__link:focus-visible { color: var(--white); background: var(--navy-900); border-color: var(--navy-900); }
@media (max-width: 47.99em) { .ds2 .topbar .social--topbar { display: none; } }

/* ---------- Our Approach: "How an engagement progresses" ----------
   Steps become framed cards on a numbered rail; the connecting line draws in and each number lights up as its step arrives. */
.ds2 .timeline { position: relative; border-top: 0; padding-top: 0; margin-top: 2.25rem; counter-reset: none; }
.ds2 .timeline__item { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem; padding-bottom: 1.25rem; }
.ds2 .timeline__item > div { position: relative; padding: 1.35rem 1.6rem 1.4rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2);
  transition: border-color 600ms var(--ds-ease), box-shadow 600ms var(--ds-ease); }
.ds2 .timeline__item > div::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--orange); transform-origin: top; transition: transform 700ms var(--ds-ease) 250ms; }
.ds2 .timeline__item > div::after { content: ""; position: absolute; left: -1.5rem; top: 1.75rem; width: 1.5rem; height: 1px; background: var(--b-brand); }
.ds2 .timeline__num { width: 3.5rem; height: 3.5rem; border-radius: 0; background: var(--navy-900); color: var(--white); border: 1px solid var(--navy-900);
  font-size: 1.05rem; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--s-bg-tint), var(--sh-2);
  transition: background-color 500ms var(--ds-ease) 150ms, color 500ms var(--ds-ease) 150ms, border-color 500ms var(--ds-ease) 150ms; position: relative; z-index: 1; }
.ds2 .timeline__num::before { content: "0"; }
.ds2 .timeline__item::before { left: 1.75rem; top: 3.5rem; bottom: 0; width: 2px; transform: translateX(-1px); background: linear-gradient(180deg, var(--b-brand), rgba(88, 160, 210, .35)); }
.ds2 .timeline__title { font-size: 1.2rem; font-weight: 600; margin-top: 0; }
.ds2 .timeline__item p { margin: .5rem 0 0; }
.ds2 section:has(> .container > .timeline) { background: linear-gradient(180deg, var(--s-bg-tint) 0%, var(--s-bg) 55%, #fff 100%); }
/* Before a step scrolls into view: outlined number, muted card (only when reveal animations are active). */
.reveal-ready .ds2 .timeline__item:not(.is-visible) .timeline__num { background: var(--s-card); color: var(--navy-900); border-color: var(--b-brand); }
.reveal-ready .ds2 .timeline__item:not(.is-visible) > div::before { transform: scaleY(0); }
.reveal-ready .ds2 .timeline__item:not(.is-visible) > div { box-shadow: var(--sh-1); }
@media (max-width: 47.99em) {
  .ds2 .timeline__item { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; }
  .ds2 .timeline__num { width: 2.75rem; height: 2.75rem; font-size: .95rem; }
  .ds2 .timeline__item::before { left: 1.375rem; top: 2.75rem; }
  .ds2 .timeline__item > div { padding: 1.1rem 1.15rem 1.2rem; }
  .ds2 .timeline__item > div::after { left: -1rem; width: 1rem; top: 1.375rem; }
}

/* ---------- Hover consistency for interactive cards (static panels unchanged) ---------- */
.ds2 *:is(.related-card, .svc-tile, .card:has(.card__link), .work-card):is(:hover, :focus-within) { border-color: var(--b-hover);
  background-image: linear-gradient(180deg, rgba(234, 242, 250, .55), rgba(255, 255, 255, 0) 60%); box-shadow: var(--sh-3); }
.ds2 *:is(.card__link, .related-card__more, .svc-tile__more) .icon { transition: transform var(--t-card) var(--ds-ease); }
@media (prefers-reduced-motion: no-preference) {
  .ds2 *:is(.related-card, .svc-tile, .card:has(.card__link), .work-card):focus-within { transform: translateY(var(--lift)); }
  .ds2 *:is(.related-card, .svc-tile, .card:has(.card__link)):is(:hover, :focus-within) *:is(.card__link, .related-card__more, .svc-tile__more) .icon { transform: translateX(4px); }
  .ds2 .division:focus-within { transform: translateY(var(--lift)); }
}
.ds2 .division:is(:hover, :focus-within) { border-color: rgba(142, 195, 232, .45); }
.ds2 .explorer__tab:focus-visible { box-shadow: inset 2px 0 0 var(--orange); }
/* Keep the settling hero visuals inside their section. */
.ds2 .hero, .ds2 .svc-hero { overflow: hidden; }
@media (max-width: 79.99em) { .ds2 .social--topbar + .topbar__tagline { display: none; } }

/* =========================================================================
   v3.2: hosting packages and Business Email Solutions
   ========================================================================= */
/* Highlights row */
.ds2 .pkg-highlights { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ds2 .pkg-highlights li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; background: var(--s-glass-strong, #fff); border: 1px solid var(--b-elevated); font-size: .9rem; font-weight: 550; color: var(--navy-900); box-shadow: var(--sh-1); }
.ds2 .pkg-highlights .icon { color: var(--orange-btn); }
/* Package cards */
.ds2 .pkg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; align-items: stretch; }
@media (min-width: 40em) { .ds2 .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .ds2 .pkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds2 .pkg { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2);
  transition: border-color var(--t-card) var(--ds-ease), box-shadow var(--t-card) var(--ds-ease), transform var(--t-card) var(--ds-ease); }
.ds2 .pkg::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--b-brand); }
.ds2 .pkg--featured { border-color: var(--navy-900); box-shadow: var(--sh-3); }
.ds2 .pkg--featured::before { background: var(--orange); }
.ds2 .pkg:is(:hover, :focus-within) { border-color: var(--b-hover); box-shadow: var(--sh-3); background-image: linear-gradient(180deg, rgba(234, 242, 250, .5), rgba(255, 255, 255, 0) 55%); }
@media (prefers-reduced-motion: no-preference) { .ds2 .pkg:is(:hover, :focus-within) { transform: translateY(var(--lift)); } }
.ds2 .pkg__flag { position: absolute; top: -.8rem; left: 1.5rem; margin: 0; padding: .2rem .6rem; background: var(--orange-btn); color: var(--white); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ds2 .pkg__name { margin: 0; font-size: 1.35rem; font-weight: 650; color: var(--navy-900); }
.ds2 .pkg__ideal { margin: .35rem 0 0; min-height: 2.8em; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.ds2 .pkg__price { display: flex; align-items: baseline; gap: .15rem; margin: 1.1rem 0 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ds-line); color: var(--navy-900); }
.ds2 .pkg__currency { font-size: 1.4rem; font-weight: 600; align-self: flex-start; margin-top: .35rem; }
.ds2 .pkg__amount { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ds2 .pkg__period { margin-left: .45rem; color: var(--muted); font-size: .9rem; }
.ds2 .pkg__mail { display: flex; gap: .8rem; align-items: center; padding: .85rem 1rem; margin-bottom: 1.1rem; background: var(--sky-50); border: 1px solid var(--sky-100); }
.ds2 .pkg__mail .icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--navy); }
.ds2 .pkg__mail p { margin: 0; display: grid; line-height: 1.3; }
.ds2 .pkg__mail strong { font-size: 1.05rem; color: var(--navy-900); }
.ds2 .pkg__mail span { font-size: .85rem; color: var(--muted); }
.ds2 .pkg--featured .pkg__mail { background: var(--navy-900); border-color: var(--navy-900); }
.ds2 .pkg--featured .pkg__mail :is(strong, .icon) { color: var(--white); }
.ds2 .pkg--featured .pkg__mail span { color: var(--on-dark-muted); }
.ds2 .pkg__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.ds2 .pkg__list li { display: flex; gap: .55rem; align-items: flex-start; }
.ds2 .pkg__list .icon { flex: none; margin-top: .2rem; color: var(--orange-btn); }
.ds2 .pkg__tech { margin: auto 0 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--ds-line); color: var(--muted); font-size: .82rem; }
.ds2 .pkg__cta { width: 100%; justify-content: center; text-align: center; white-space: normal; }
/* Expandable comparison */
.ds2 .pkg-compare { margin-top: 1.75rem; border: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-1); }
.ds2 .pkg-compare__summary { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; color: var(--navy-900); list-style: none; }
.ds2 .pkg-compare__summary::-webkit-details-marker { display: none; }
.ds2 .pkg-compare__summary:hover { background: var(--sky-50); }
.ds2 .pkg-compare__chev { margin-left: auto; transition: transform var(--t-card) var(--ds-ease); }
.ds2 .pkg-compare[open] .pkg-compare__chev { transform: rotate(180deg); }
.ds2 .pkg-compare__scroll { overflow-x: auto; border-top: 1px solid var(--ds-line); }
.ds2 .pkg-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .92rem; }
.ds2 .pkg-table :is(th, td) { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--ds-line); vertical-align: top; }
.ds2 .pkg-table thead th { background: var(--navy-900); color: var(--white); font-weight: 600; }
.ds2 .pkg-table tbody th { font-weight: 550; color: var(--navy-900); background: var(--surface); width: 22%; }
.ds2 .pkg-table tbody tr:hover td { background: var(--sky-50); }
.ds2 .pkg-footnote { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }
.ds2 .pkg-custom { display: grid; gap: 1rem 2rem; margin-top: 2rem; padding: 1.5rem 1.75rem; border: 1px solid var(--b-elevated); border-left: 3px solid var(--navy-900); background: var(--s-glass-strong, #fff); box-shadow: var(--sh-1); }
@media (min-width: 56em) { .ds2 .pkg-custom { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.ds2 .pkg-custom__title { margin: 0 0 .35rem; font-size: 1.2rem; }
.ds2 .pkg-custom p { margin: 0; color: var(--muted); }
.ds2 .pkg-custom__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: center; }
.ds2 .pkg-custom__actions .btn { white-space: normal; text-align: center; }
/* Benefits */
.ds2 .benefit-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .ds2 .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ds2 .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds2 .benefit { padding: 1.4rem 1.35rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-1); }
.ds2 .benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: .9rem; border: 1px solid var(--b-elevated); color: var(--navy); background: var(--sky-50); }
.ds2 .benefit__title { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; }
.ds2 .benefit p { margin: 0; color: var(--muted); font-size: .93rem; }
.ds2 .benefit-note { display: flex; gap: .6rem; align-items: flex-start; margin: 1.5rem 0 0; color: var(--muted); font-size: .92rem; }
.ds2 .benefit-note .icon { flex: none; margin-top: .2rem; color: var(--navy); }

/* Business email: options */
.ds2 .email-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 64em) { .ds2 .email-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds2 .email-option { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); transition: border-color var(--t-card) var(--ds-ease), box-shadow var(--t-card) var(--ds-ease); }
.ds2 .email-option::before { content: ""; position: absolute; left: -1px; top: -1px; width: 3rem; height: 3px; background: var(--orange); transition: width 600ms var(--ds-ease); }
.ds2 .email-option:is(:hover, :focus-within) { border-color: var(--b-hover); box-shadow: var(--sh-3); }
.ds2 .email-option:is(:hover, :focus-within)::before { width: calc(100% + 2px); }
.ds2 .email-option__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--navy-900); color: var(--white); margin-bottom: 1rem; }
.ds2 .email-option__eyebrow { margin: 0; font-size: .7rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-btn); }
.ds2 .email-option__title { margin: .4rem 0 .5rem; font-size: 1.25rem; font-weight: 600; }
.ds2 .email-option__body { margin: 0 0 1rem; color: var(--muted); }
.ds2 .email-option__points { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; font-size: .93rem; }
.ds2 .email-option__points li { display: flex; gap: .5rem; align-items: flex-start; }
.ds2 .email-option__points .icon { flex: none; margin-top: .2rem; color: var(--orange-btn); }
.ds2 .email-option__note { margin: 0 0 1rem; padding: .7rem .85rem; background: var(--sky-50); border-left: 2px solid var(--b-brand); font-size: .85rem; color: var(--muted); }
.ds2 .email-option__actions { margin-top: auto; display: grid; gap: .8rem; justify-items: start; }
.ds2 .email-option__actions .btn { white-space: normal; text-align: center; }
/* Business email: security review (navy) */
.ds2 .email-sec__head { display: grid; gap: 2rem 4rem; margin-bottom: 2.5rem; }
@media (min-width: 56em) { .ds2 .email-sec__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.ds2 .email-sec__intro { color: var(--on-dark); margin: 1rem 0 0; }
.ds2 .email-sec__label { margin: 0 0 .85rem; font-size: .72rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-on-dark); }
.ds2 .email-sec__concerns { padding: 1.4rem 1.5rem; border: 1px solid rgba(142, 195, 232, .25); background: rgba(255, 255, 255, .05); }
@supports (backdrop-filter: blur(8px)) { .ds2 .email-sec__concerns { background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.ds2 .email-sec__concerns ul, .ds2 .email-sec__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; color: var(--on-dark); font-size: .95rem; }
.ds2 .email-sec__concerns li, .ds2 .email-sec__list li { display: flex; gap: .55rem; align-items: flex-start; }
.ds2 .email-sec__concerns .icon { flex: none; margin-top: .2rem; color: var(--sky-300); }
.ds2 .email-sec__list .icon { flex: none; margin-top: .2rem; color: var(--orange-on-dark); }
.ds2 .email-sec__checks { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .ds2 .email-sec__checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds2 .email-check { position: relative; padding: 1.5rem 1.4rem; border: 1px solid rgba(142, 195, 232, .3); background: rgba(255, 255, 255, .07); color: var(--on-dark); transition: border-color var(--t-card) var(--ds-ease), background-color var(--t-card) var(--ds-ease); }
.ds2 .email-check:hover { border-color: rgba(142, 195, 232, .6); background: rgba(255, 255, 255, .1); }
.ds2 .email-check::before { content: ""; position: absolute; left: -1px; top: -1px; width: 2.5rem; height: 2px; background: var(--orange); }
.ds2 .email-check__num { font-size: .8rem; letter-spacing: .1em; color: var(--sky-300); }
.ds2 .email-check__title { margin: .4rem 0 .4rem; font-size: 1.6rem; font-weight: 650; color: var(--white); letter-spacing: .02em; }
.ds2 .email-check p { margin: 0; color: var(--on-dark-muted); }
.ds2 .email-sec__grid { display: grid; gap: 1.5rem 3rem; padding: 1.75rem 0; border-top: 1px solid rgba(142, 195, 232, .2); border-bottom: 1px solid rgba(142, 195, 232, .2); }
@media (min-width: 48em) { .ds2 .email-sec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds2 .email-sec__cta { display: grid; gap: 1.25rem 3rem; margin-top: 2rem; align-items: center; }
@media (min-width: 56em) { .ds2 .email-sec__cta { grid-template-columns: minmax(0, 1.4fr) auto; } }
.ds2 .email-sec__cta p { margin: 0; color: var(--on-dark-muted); font-size: .88rem; }
.ds2 .email-sec__cta .btn { white-space: normal; text-align: center; }
/* Business email: migration */
.ds2 .email-mig__grid { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 64em) { .ds2 .email-mig__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.ds2 .email-mig__intro > p { color: var(--muted); }
.ds2 .email-mig__media { position: relative; margin-top: 2rem; isolation: isolate; }
.ds2 .email-mig__media::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--ds-line-strong, var(--line)); background: linear-gradient(135deg, rgba(88, 160, 210, .12), rgba(88, 160, 210, 0) 60%); z-index: -1; }
.ds2 .email-mig__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--sh-media, var(--sh-3)); }
.ds2 .email-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 40em) { .ds2 .email-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds2 .email-step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; padding: 1.15rem 1.2rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-1); }
.ds2 .email-step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--navy-900); color: var(--white); font-size: .9rem; letter-spacing: .06em; }
.ds2 .email-step__title { margin: .2rem 0 .3rem; font-size: 1.05rem; font-weight: 600; }
.ds2 .email-step p { margin: 0; color: var(--muted); font-size: .92rem; }
.ds2 .email-mig__note { display: flex; gap: .6rem; align-items: flex-start; margin: 1.25rem 0 0; color: var(--muted); font-size: .9rem; }
.ds2 .email-mig__note .icon { flex: none; margin-top: .2rem; color: var(--navy); }
.reveal-ready .ds2 .email-step:not(.is-visible) .email-step__num { background: var(--s-card); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--b-brand); }
.ds2 .email-step__num { transition: background-color 500ms var(--ds-ease) 150ms, color 500ms var(--ds-ease) 150ms; }
/* Enquiry pathways: 5 cards */
@media (min-width: 72em) { .ds2 .related-grid--n5.email-paths { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* =========================================================================
   v3.3: service explorer as a vertical accordion below 64em (desktop tabs unchanged)
   ========================================================================= */
.ds2 .explorer.is-accordion .explorer__grid { display: block; }
.ds2 .explorer.is-accordion .explorer__panels { display: none; }
.ds2 .explorer.is-accordion .explorer__tabs { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none;
  padding: 0; gap: 0; border: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-2); }
.ds2 .explorer.is-accordion .explorer__tabs > li { min-width: 0; }
.ds2 .explorer.is-accordion .explorer__tabs > li + li { border-top: 1px solid var(--ds-line); }
.ds2 .explorer.is-accordion .explorer__tab { position: relative; height: auto; min-height: 4.5rem; padding: 1rem 3.25rem 1rem 1rem; border: 0; border-radius: 0; background: var(--white);
  box-shadow: none; scroll-snap-align: none; gap: .9rem; }
.ds2 .explorer.is-accordion .explorer__tabs li + li .explorer__tab { border-top: 0; }
.ds2 .explorer.is-accordion .explorer__tab::after { content: ""; position: absolute; right: 1.25rem; top: 50%; width: .55rem; height: .55rem; margin-top: -.4rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-panel) var(--ds-ease); opacity: .7; }
.ds2 .explorer.is-accordion .explorer__tab:hover { background: var(--surface); box-shadow: inset 2px 0 0 var(--orange); }
.ds2 .explorer.is-accordion .explorer__tab[aria-expanded="true"] { background: var(--navy-900); color: var(--white); box-shadow: inset 3px 0 0 var(--orange); }
.ds2 .explorer.is-accordion .explorer__tab[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -.1rem; }
.ds2 .explorer.is-accordion .explorer__tab[aria-expanded="true"] .explorer__tab-icon { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--orange-on-dark); }
.ds2 .explorer.is-accordion .explorer__tab[aria-expanded="true"] .explorer__tab-sum { color: var(--on-dark-muted); }
.ds2 .explorer.is-accordion .explorer__tab-text { min-width: 0; }
.ds2 .explorer.is-accordion .explorer__tab-title, .ds2 .explorer.is-accordion .explorer__tab-sum { overflow-wrap: anywhere; }
/* Panel sits directly under its own button */
.ds2 .explorer.is-accordion .explorer__panel { display: block; grid-area: auto; visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  border: 0; border-top: 1px solid var(--b-elevated); box-shadow: none; border-radius: 0; transition: none; }
.ds2 .explorer.is-accordion .explorer__panel[data-inactive] { display: none; }
.ds2 .explorer.is-accordion .explorer__media { aspect-ratio: 16 / 9; }
.ds2 .explorer.is-accordion .explorer__body { padding: 1.25rem 1.1rem 1.4rem; }
.ds2 .explorer.is-accordion .explorer__body .btn { width: 100%; justify-content: center; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .ds2 .explorer.is-accordion .explorer__panel:not([data-inactive]) { animation: nb-acc-open 360ms var(--ds-ease) both; }
}
@keyframes nb-acc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 40em) and (max-width: 63.99em) {
  .ds2 .explorer.is-accordion .explorer__media { aspect-ratio: 16 / 7; }
  .ds2 .explorer.is-accordion .explorer__body { padding: 1.5rem 1.75rem 1.75rem; }
  .ds2 .explorer.is-accordion .explorer__body .btn { width: auto; }
}

/* ---------- v3.3: WhatsApp presentation ---------- */
.ds2 .contact-lines a .icon--whatsapp { color: #128c4a; }
.ds2 .contact-lines a:hover .icon--whatsapp { color: #0d6e3a; }
.ds2 .icon--whatsapp { flex: none; }

/* ---------- v3.3: hosting page, business email link (clean wrapping, per-line underline) ---------- */
.ds2 .pkg-custom__actions .pkg-custom__email { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.ds2 .pkg-custom__email a { color: var(--navy-900); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: rgba(11, 28, 54, .35); transition: color var(--t-link) var(--ds-ease), text-decoration-color var(--t-link) var(--ds-ease); }
.ds2 .pkg-custom__email a:hover { color: var(--orange-btn); text-decoration-color: currentColor; }
.ds2 .pkg-custom__arrow { white-space: nowrap; }
.ds2 .pkg-custom__arrow .icon { display: inline-block; vertical-align: -.2em; transition: transform var(--t-link) var(--ds-ease); }
@media (prefers-reduced-motion: no-preference) { .ds2 .pkg-custom__email a:hover .pkg-custom__arrow .icon { transform: translateX(3px); } }

/* =========================================================================
   v3.3: Business Email page (Microsoft 365 first)
   ========================================================================= */
.ds2 .email-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ds2 .email-ticks li { display: flex; gap: .6rem; align-items: flex-start; }
.ds2 .email-ticks .icon { flex: none; margin-top: .22rem; color: var(--orange-btn); }
.ds2 .email-ticks--light { color: var(--on-dark); }
.ds2 .email-ticks--light .icon { color: var(--orange-on-dark); }
.ds2 .email-fine { display: flex; gap: .55rem; align-items: flex-start; margin: 1.25rem 0 0; color: var(--muted); font-size: .9rem; }
.ds2 .email-fine .icon { flex: none; margin-top: .2rem; color: var(--navy); }
/* Pain points */
.ds2 .pain-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 40em) { .ds2 .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .ds2 .pain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds2 .pain { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem 1.15rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-1); font-weight: 500; color: var(--navy-900); line-height: 1.45; }
.ds2 .pain__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; background: var(--sky-50); border: 1px solid var(--sky-100); color: var(--navy); }
/* Microsoft 365 flagship */
.ds2 .m365-feature { display: grid; gap: 2rem 3.5rem; align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 64em) { .ds2 .m365-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.ds2 .m365-feature__media { position: relative; isolation: isolate; }
.ds2 .m365-feature__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--ds-line-strong, var(--line)); background: linear-gradient(135deg, rgba(88, 160, 210, .14), rgba(88, 160, 210, 0) 60%); z-index: -1; }
.ds2 .m365-feature__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--sh-media, var(--sh-3)); }
.ds2 .m365-feature__badge { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; background: rgba(11, 28, 54, .82); color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
@supports (backdrop-filter: blur(6px)) { .ds2 .m365-feature__badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.ds2 .m365-feature__text > p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.ds2 .m365-feature__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; align-items: center; margin-top: 1.5rem; }
.ds2 .m365-feature__actions .btn { white-space: normal; text-align: center; }
@media (max-width: 47.99em) { .ds2 .m365-feature__media::before { inset: .75rem -.75rem -.75rem .75rem; } }
.ds2 .m365-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .ds2 .m365-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ds2 .m365-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds2 .m365-benefit { position: relative; padding: 1.35rem 1.3rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); }
.ds2 .m365-benefit::before { content: ""; position: absolute; left: -1px; top: -1px; width: 2.5rem; height: 2px; background: var(--b-brand); }
.ds2 .m365-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: .85rem; background: var(--navy-900); color: var(--white); }
.ds2 .m365-benefit__title { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 600; }
.ds2 .m365-benefit p { margin: 0; color: var(--muted); font-size: .93rem; }
/* Google Workspace */
.ds2 .google-panel { display: grid; gap: 1.75rem 3.5rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--s-card); border: 1px solid var(--b-elevated); border-top: 3px solid var(--b-brand); box-shadow: var(--sh-2); }
@media (min-width: 56em) { .ds2 .google-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.ds2 .google-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border: 1px solid var(--b-elevated); color: var(--navy); background: var(--sky-50); }
.ds2 .google-panel__head > p:not(.eyebrow):not(.email-fine) { color: var(--muted); }
.ds2 .google-panel__list { display: grid; gap: 1.5rem; justify-items: start; }
.ds2 .google-panel__list .btn { white-space: normal; text-align: center; }
/* Migration (navy, lead generation) */
.ds2 .ds-email-migrate .ds-head__title { color: var(--white); }
.ds2 .migrate-head { display: grid; gap: 2rem 4rem; margin-bottom: 2.5rem; }
@media (min-width: 64em) { .ds2 .migrate-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.ds2 .migrate-head__intro { color: var(--on-dark); font-size: 1.08rem; margin: 1rem 0 0; }
.ds2 .migrate-head__example { margin: 1.25rem 0 0; padding: 1rem 1.15rem; border-left: 2px solid var(--orange); background: rgba(255, 255, 255, .05); color: var(--on-dark-muted); font-size: .95rem; }
.ds2 .migrate-help { padding: 1.4rem 1.5rem; border: 1px solid rgba(142, 195, 232, .25); background: rgba(255, 255, 255, .05); }
@supports (backdrop-filter: blur(8px)) { .ds2 .migrate-help { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.ds2 .migrate-label { margin: 0 0 .9rem; font-size: .72rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-on-dark); }
.ds2 .journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 48em) { .ds2 .journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } }
.ds2 .journey__step { position: relative; padding: 1.25rem 1.15rem; border: 1px solid rgba(142, 195, 232, .28); background: rgba(255, 255, 255, .06); color: var(--on-dark); }
@media (min-width: 48em) { .ds2 .journey__step + .journey__step { border-left: 0; } .ds2 .journey__step::after { content: ""; position: absolute; top: 2.1rem; right: -.4rem; width: .8rem; height: .8rem; border-top: 1px solid var(--orange-on-dark); border-right: 1px solid var(--orange-on-dark); transform: rotate(45deg); background: transparent; z-index: 1; } .ds2 .journey__step:last-child::after { display: none; } }
.ds2 .journey__num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: var(--orange-btn); color: var(--white); font-size: .85rem; letter-spacing: .06em; }
.ds2 .journey__title { margin: .85rem 0 .35rem; font-size: 1.15rem; color: var(--white); }
.ds2 .journey__step p { margin: 0; color: var(--on-dark-muted); font-size: .92rem; }
.reveal-ready .ds2 .journey__step:not(.is-visible) .journey__num { background: transparent; box-shadow: inset 0 0 0 1px var(--orange-on-dark); }
.ds2 .journey__num { transition: background-color 500ms var(--ds-ease) 150ms; }
.ds2 .migrate-cta { display: grid; gap: 1.25rem 3rem; align-items: center; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgba(142, 195, 232, .2); }
@media (min-width: 56em) { .ds2 .migrate-cta { grid-template-columns: minmax(0, 1.3fr) auto; } }
.ds2 .migrate-cta p { margin: 0; color: var(--on-dark-muted); font-size: .9rem; }
.ds2 .migrate-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; align-items: center; }
.ds2 .migrate-cta__actions .btn { white-space: normal; text-align: center; }
/* Security and deliverability (benefit-led) */
.ds2 .sec-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .ds2 .sec-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ds2 .sec-benefits { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ds2 .sec-benefit { padding: 1.35rem 1.2rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-1); }
.ds2 .sec-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-bottom: .8rem; border: 1px solid var(--b-elevated); background: var(--sky-50); color: var(--navy); }
.ds2 .sec-benefit__title { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 600; }
.ds2 .sec-benefit p { margin: 0; color: var(--muted); font-size: .92rem; }
.ds2 .sec-cta { display: grid; gap: 1.25rem 3rem; align-items: center; margin-top: 1.75rem; padding: 1.4rem 1.6rem; border: 1px solid var(--b-elevated); border-left: 3px solid var(--navy-900); background: var(--surface); }
@media (min-width: 56em) { .ds2 .sec-cta { grid-template-columns: minmax(0, 1.4fr) auto; } }
.ds2 .sec-cta p { margin: 0; color: var(--muted); font-size: .9rem; }
.ds2 .sec-cta .btn { white-space: normal; text-align: center; }
/* Hosted email (concise) */
.ds2 .hosted-panel { display: grid; gap: 1.5rem 3rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--b-elevated); background: var(--s-card); box-shadow: var(--sh-1); }
@media (min-width: 56em) { .ds2 .hosted-panel { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; } }
.ds2 .hosted-panel__title { margin: 0 0 .6rem; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); }
.ds2 .hosted-panel p:not(.eyebrow) { color: var(--muted); margin: 0; }
.ds2 .hosted-panel__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 1.25rem; }
.ds2 .hosted-panel__actions .btn { white-space: normal; text-align: center; }
.ds2 .email-ticks--compact { font-size: .93rem; gap: .45rem; }
/* Decision support */
.ds2 .choose-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 56em) { .ds2 .choose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds2 .choose { position: relative; padding: 1.5rem 1.4rem; background: var(--s-card); border: 1px solid var(--b-elevated); box-shadow: var(--sh-1); }
.ds2 .choose--lead { border-color: var(--navy-900); box-shadow: var(--sh-2); }
.ds2 .choose--lead::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--orange); }
.ds2 .choose__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: .85rem; background: var(--navy-900); color: var(--white); }
.ds2 .choose__title { margin: 0 0 .4rem; font-size: 1.15rem; }
.ds2 .choose p { margin: 0; color: var(--muted); }
.ds2 .choose-cta { display: grid; gap: 1.25rem 3rem; align-items: center; margin-top: 1.75rem; }
@media (min-width: 56em) { .ds2 .choose-cta { grid-template-columns: minmax(0, 1.4fr) auto; } }
.ds2 .choose-cta p { margin: 0; color: var(--muted); }

/* ---------- v3.3: About page ---------- */
.ds2 .vm-grid { display: grid; gap: 1.25rem; }
@media (min-width: 56em) { .ds2 .vm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds2 .vm { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--s-glass-strong, #fff); border: 1px solid var(--b-elevated); box-shadow: var(--sh-2); }
@supports (backdrop-filter: blur(8px)) { .ds2 .vm { background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.ds2 .vm::before { content: ""; position: absolute; left: -1px; top: -1px; width: 3rem; height: 3px; background: var(--orange); }
.ds2 .vm__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; background: var(--navy-900); color: var(--white); }
.ds2 .vm__title { margin: 0 0 .6rem; font-size: 1.3rem; }
.ds2 .vm__text { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--navy-900); }
.ds2 .about-why__grid { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 56em) { .ds2 .about-why__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.ds2 .about-why__quote { margin: 0 0 1.25rem; padding: .25rem 0 .25rem 1.5rem; border-left: 3px solid var(--orange); }
.ds2 .about-why__quote p { margin: 0; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.45; font-weight: 500; color: var(--navy-900); }
.ds2 .about-why__body > p { color: var(--muted); }
.ds2 .about-why__brand { display: grid; gap: .2rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ds-line); }
.ds2 .about-why__brand strong { color: var(--navy-900); font-size: 1.1rem; }
.ds2 .about-why__brand span { color: var(--orange-btn); font-size: .75rem; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- v3.3: legal pages (tables and lists) ---------- */
.ds2 .prose .legal-table { margin: 1.25rem 0 1.5rem; overflow-x: auto; border: 1px solid var(--b-elevated); }
.ds2 .prose .legal-table table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .93rem; }
.ds2 .prose .legal-table caption { text-align: left; padding: .75rem 1rem; font-weight: 600; color: var(--navy-900); background: var(--surface); border-bottom: 1px solid var(--b-elevated); }
.ds2 .prose .legal-table :is(th, td) { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ds-line); }
.ds2 .prose .legal-table thead th { background: var(--navy-900); color: var(--white); font-weight: 600; }
.ds2 .prose .legal-table tbody th { font-weight: 600; color: var(--navy-900); }
.ds2 .prose .legal-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ds2 .prose ul li + li { margin-top: .35rem; }

/* =========================================================================
   v3.4: cookie consent banner and preferences
   ========================================================================= */
.no-js .js-only { display: none !important; }
.cookie-banner[hidden] { display: none; }
html.consent-pending .cookie-banner[hidden] { display: block; } /* first paint, before site.js runs */
.cookie-banner { position: fixed; z-index: 55; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  max-height: calc(100vh - 2rem); overflow-y: auto; font-size: .94rem; }
@media (min-width: 48em) { .cookie-banner { right: auto; width: min(36rem, calc(100vw - 2rem)); } }
.ds2 .cookie-banner__inner, .cookie-banner__inner { padding: 1.35rem 1.4rem 1.25rem; background: #fff; color: var(--navy-900); border: 1px solid var(--b-elevated, #cbd6e4); border-top: 3px solid var(--navy-900);
  box-shadow: 0 24px 60px -24px rgba(7, 20, 38, .55); }
@supports (backdrop-filter: blur(12px)) { .cookie-banner__inner { background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } }
.cookie-banner__title { margin: 0 0 .45rem; font-size: 1.1rem; font-weight: 650; }
.cookie-banner__title:focus { outline: none; }
.cookie-banner__title:focus-visible { outline: 3px solid var(--orange-btn); outline-offset: 3px; }
.cookie-banner__text { margin: 0; color: var(--muted); line-height: 1.55; }
.cookie-banner__text a { color: var(--navy-900); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.cookie-banner__btn { flex: 1 1 10rem; justify-content: center; text-align: center; white-space: normal; border-radius: 0; min-height: 2.75rem; }
.cookie-banner__manage { flex: 1 1 100%; min-height: 2.75rem; padding: .4rem 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--navy-900); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; text-align: center; }
.cookie-banner__manage:hover { color: var(--orange-btn); }
.cookie-prefs { margin-top: 1rem; border-top: 1px solid var(--ds-line, #dce3ec); }
.cookie-pref { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--ds-line, #dce3ec); }
.cookie-pref__text { min-width: 0; }
.cookie-pref__text p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.cookie-pref__name { display: block; margin: 0; font-weight: 650; color: var(--navy-900); font-size: .95rem; }
.cookie-pref__always { flex: none; margin: .1rem 0 0; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #12693b; }
/* Accessible switch: a real checkbox, styled */
.cookie-switch { position: relative; flex: none; width: 3rem; height: 1.6rem; margin-top: .1rem; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cookie-switch__track { position: absolute; inset: 0; background: #8a97a8; transition: background-color .2s; }
.cookie-switch__track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; background: #fff; transition: transform .2s; }
.cookie-switch input:checked + .cookie-switch__track { background: var(--navy-900); }
.cookie-switch input:checked + .cookie-switch__track::after { transform: translateX(1.4rem); }
.cookie-switch input:focus-visible + .cookie-switch__track { outline: 3px solid var(--orange-btn); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cookie-switch__track, .cookie-switch__track::after { transition: none; } }
/* Keep the floating WhatsApp button clear of the banner on small screens */
@media (max-width: 47.99em) { html.cookie-open .wa-float { bottom: calc(var(--cookie-h, 0px) + 1.75rem); } }
/* Footer "Cookie settings" control, styled like the neighbouring legal links */
.site-footer__cookie-btn { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: inherit; min-height: 1.5rem; }
.site-footer__cookie-btn:hover { text-decoration: underline; }
@media print { .cookie-banner { display: none !important; } }
.ds2 .site-footer__legal-links .site-footer__cookie-btn { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--on-dark); text-decoration: none; }
.ds2 .site-footer__legal-links .site-footer__cookie-btn:hover { color: var(--white); text-decoration: underline; }
.ds2 .site-footer__legal-links .site-footer__cookie-btn:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 2px; }
/* Banner typography and button sizing (higher specificity than the global heading and button styles) */
.ds2 .cookie-banner .cookie-banner__title { margin: 0 0 .4rem; font-size: 1.08rem; line-height: 1.3; letter-spacing: 0; font-weight: 650; }
.ds2 .cookie-banner .cookie-banner__btn { padding: .6rem .9rem; font-size: .92rem; line-height: 1.25; min-height: 2.75rem; }
.ds2 .cookie-banner .cookie-banner__btn:hover { transform: none; }
@media (max-width: 47.99em) {
  .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; font-size: .88rem; }
  .ds2 .cookie-banner__inner, .cookie-banner__inner { padding: 1rem 1rem .85rem; }
  .cookie-banner__text { line-height: 1.5; }
  .cookie-banner__actions { gap: .5rem; margin-top: .8rem; }
  .cookie-banner__btn { flex: 1 1 calc(50% - .25rem); }
  .cookie-banner__manage { min-height: 2.5rem; padding: .2rem 0; }
}