/* ==========================================================================
   HighTech IT — global stylesheet
   ========================================================================== */

:root {
  /* Approved HighTech IT brand palette (HTIT Logo Guidelines, Aug 2026) */
  --color-deep-navy: #021135;
  --color-wordmark-blue: #2257a8;
  --color-electric-blue: #073cfa;
  --color-cyan: #00d9e8;

  --color-primary: var(--color-electric-blue);
  --color-primary-dark: var(--color-deep-navy);
  --color-primary-light: #e8edfb;
  --color-accent: var(--color-cyan);
  --color-gold: #b45309;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f6fb;
  --color-text: var(--color-deep-navy);
  --color-text-light: #55606b;
  --color-border: #e1e8ef;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 37, 69, 0.12);
  --max-width: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
  color: var(--color-text);
}

p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 88px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-head {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.section-head p {
  color: var(--color-text-light);
  font-size: 1.05rem;
}

/* Certifications heading only: "Certified for Quality. Committed to
   Security." doesn't fit the shared .section-head's 680px max-width on one
   line at any desktop size without shrinking the font. Widening just this
   section-head (rather than the shared default, which many shorter
   sub-headings also rely on for a readable line length) keeps it on one
   centered line from ~1024px up while still narrow enough that mobile
   viewports wrap it cleanly onto two lines on their own. */
.section-head-wide {
  max-width: 960px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn-outline {
  border-color: var(--color-border);
  background: #fff;
  color: var(--color-text);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-white {
  background: #fff;
  color: var(--color-primary);
}

.btn-white:hover {
  background: var(--color-primary-light);
}

.btn-ghost-light {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

.btn-ghost-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-primary-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Guaranteed minimum spacing between logo / nav-links / nav-cta — without
     this, space-between could push nav-links flush against the logo when
     the row is otherwise full (that's what left them touching before). */
  gap: 40px;
  padding: 16px 32px;
  /* Wider than the body's --max-width (1180px) on purpose: at 1440px this
     used to leave logo+links+CTAs almost no slack inside 1180px, which is
     why several two-word labels wrapped onto a second line while others
     stayed on one — inconsistent heights, cramped feel. The header is
     already visually its own full-width dark band, so it doesn't need to
     line up edge-for-edge with body .container content below it. */
  max-width: 1360px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  /* Without this, the flex row (logo + CTA + hamburger) shrinks the logo
     itself when there isn't enough width for everything at its natural
     size — at narrow mobile widths that squeezed the wordmark down to a
     fraction of its size instead of shrinking the CTA button. The logo
     must never be the thing that gives. */
  flex-shrink: 0;
}

.logo-img {
  height: 44px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Desktop/tablet already surface Need Support via .nav-cta — this
   in-menu duplicate is mobile-only (see @media max-width:720px). */
.nav-mobile-support {
  display: none;
}

/* ---- Services mega-menu ----
   .mega-menu is absolutely positioned against .nav (the full header bar,
   set to position:relative above), not against the individual nav-item-mega
   trigger — otherwise centering under a link near the left edge of a wide
   nav pushes the menu past the left edge of the viewport. */
.mega-menu {
  display: none;
  position: absolute;
  /* No margin-top: a gap here between the trigger and the dropdown was a
     dead zone the mouse could cross while moving from "Services" down
     into the menu, dropping :hover and closing it before a link could be
     clicked. Flush against the header bar instead, shadow gives the
     visual separation the margin used to. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  gap: 40px;
  width: max-content;
  /* Wide enough that the longest label ("Philips PACS/RIS & Radiology
     Informatics") never crowds the column next to it — that's what was
     causing the two columns' text to visually run together. */
  max-width: min(640px, calc(100vw - 48px));
  z-index: 50;
}

.nav-item-mega:hover .mega-menu,
.nav-item-mega:focus-within .mega-menu {
  display: flex;
}

.mega-menu-col {
  flex: 1;
  min-width: 260px;
}

.mega-menu-col-heading {
  color: var(--color-text-light);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0;
  margin-bottom: 14px;
}

.mega-menu-col ul li {
  padding: 6px 0;
}

.mega-menu-col ul li a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: none;
  padding: 0;
}

.mega-menu-col ul li a:hover {
  color: var(--color-primary);
}

/* Mobile-only accordion trigger for the Services mega-menu — hidden at
   desktop/tablet, where the categories still open on hover/focus. */
.nav-item-mega-row {
  display: flex;
  align-items: center;
}

.mega-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.mega-menu-toggle svg {
  display: block;
  transition: transform 0.2s ease;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Header CTA buttons sit at the site's default .btn size (13px/26px
   padding, 0.95rem) — comfortable in isolation, but that plus a larger,
   more readable logo left no slack in the header row. A slightly more
   compact size here keeps both buttons neat without shrinking their
   tap targets unreasonably. */
.nav-cta .btn {
  padding: 12px 20px;
  font-size: 0.88rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: 0.25s;
}

/* ---- Hero ---- */
.hero {
  background: linear-gradient(160deg, #f4f8fc 0%, #eaf3fc 55%, #ffffff 100%);
  padding: 96px 0 80px;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

/* Homepage hero with the approved HTIT_01_Home_Hero photo full-bleed
   behind the copy, per the image placement guide. */
.hero-photo {
  position: relative;
  background: var(--color-primary-dark);
  padding: 130px 0 100px;
}

.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 11, 30, 0.9) 0%, rgba(2, 11, 30, 0.75) 42%, rgba(2, 11, 30, 0.3) 100%);
  z-index: 1;
}

.hero-photo .hero-photo-container.container {
  display: block;
  position: relative;
  z-index: 2;
}

.hero-photo .hero-photo-container > div {
  max-width: 620px;
}

.hero-photo .eyebrow {
  color: var(--color-accent);
}

.hero-photo h1,
.hero-photo .lead {
  color: #fff;
}

/* Specificity bumped to (0,2,2) via the double class: .hero h1 span below
   is (0,1,2), identical to a plain ".hero-photo h1 span" — since the hero
   section always carries BOTH classes together, the later, lower-priority
   rule (electric-blue, ~2.67:1 against the dark navy background) was
   winning on source order alone, the same specificity-collision pattern
   already fixed once for .page-hero-photo p vs .page-hero p. Cyan
   (--color-accent) is the one actually designed for a dark background and
   clears the 3:1 large-text contrast requirement; electric-blue is not. */
.hero.hero-photo h1 span {
  color: var(--color-accent);
}

@media (max-width: 720px) {
  /* Mobile: text/buttons on a solid navy block first (no photo behind the
     copy — that's what was causing the "overcrowded" look reviewers
     flagged), then the full, uncropped image below as its own block.
     .hero-photo becomes a flex column so DOM order (img, overlay,
     container) can be visually reordered without moving markup. */
  .hero-photo {
    display: flex;
    flex-direction: column;
    padding: 96px 0 0;
  }
  /* The hero <img> is now wrapped in <picture> (for the mobile srcset
     source) — order only reorders DIRECT flex children, so it has to move
     to the wrapper; .hero-photo-img keeps its own sizing rules below,
     which apply to the <img> itself regardless of the wrapping element. */
  .hero-photo picture {
    display: block;
    width: 100%;
    order: 2;
  }
  .hero-photo-img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* Dedicated mobile crop, not just the desktop frame shrunk down: a
       taller ratio + rightward object-position zooms into one specialist,
       their headset and both healthcare/IT screens, instead of showing
       the full wide frame at a size where none of that reads clearly. */
  }
  .hero-photo .crop-home-hero {
    object-position: 80% 35%;
  }
  .hero-photo-overlay {
    display: none;
  }
  .hero-photo-container.container {
    order: 1;
  }
  .hero-photo .hero-photo-container > div {
    max-width: none;
    padding: 0 24px 40px;
  }
  /* No image behind the copy at mobile, so size against .hero-photo's own
     solid navy background instead of the desktop's lighter clamp() — and
     pull back the oversized weight/spacing reviewers called "overcrowded". */
  .hero-photo h1 {
    font-size: clamp(1.7rem, 8vw, 2.1rem);
    line-height: 1.2;
  }
  .hero-photo .lead {
    font-size: 1rem;
    margin-top: 12px;
  }
  .hero-photo .hero-actions {
    margin-top: 24px;
    gap: 12px;
  }
  .hero-photo .hero-actions .btn {
    padding: 12px 22px;
    font-size: 0.9rem;
  }
}

.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  letter-spacing: -0.01em;
}

.hero h1 span {
  color: var(--color-primary);
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--color-text-light);
  max-width: 540px;
}

.hero-photo p.lead {
  color: rgba(255, 255, 255, 0.85);
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.hero-stats div strong {
  display: block;
  font-size: 1.6rem;
  color: var(--color-primary-dark);
}

.hero-stats div span {
  color: var(--color-text-light);
  font-size: 0.85rem;
}

.hero-visual {
  position: relative;
}

.hero-illustration {
  width: 100%;
  height: auto;
  max-height: 200px;
  margin-bottom: 20px;
}

.page-hero-illustration {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 32px auto 0;
  display: block;
}

.feature-illustration {
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}

.hero-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  border: 1px solid var(--color-border);
}

.hero-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.hero-card ul li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.hero-card ul li:first-child {
  border-top: none;
}

.hero-card ul li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-accent);
}

/* ---- Logo strip ---- */
.logo-strip {
  padding: 40px 0;
  border-bottom: 1px solid var(--color-border);
}

.logo-strip p {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}

.logo-strip-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  opacity: 0.75;
  font-weight: 700;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}

/* ---- Card grids ---- */
.grid {
  display: grid;
  gap: 28px;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--color-primary);
}

.card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.card-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
}

.card-cta svg {
  transition: transform 0.2s ease;
}

.card:hover .card-cta svg,
.card:focus-visible .card-cta svg {
  transform: translateX(3px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.card p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---- Blog listing card photo (bleeds to the card's rounded top edge) ---- */
.blog-card {
  padding-top: 0;
  overflow: hidden;
}

.blog-card-photo-frame {
  margin: 0 -32px 24px -32px;
  aspect-ratio: 16 / 9;
}

.blog-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Same <picture>-wrapping fix as .feature-photo-frame picture — see the
   comment there. */
.blog-card-photo-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.card a.card-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}

/* ---- Sector pills ---- */
.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.pill {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
}

/* ---- Partnership / PACS banner ---- */
.partner-banner {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-accent));
  color: #fff;
  border-radius: 20px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

/* Grid items default to min-width:auto, so a child that won't shrink below
   its own content size (here, .partner-badge's inline-flex box once its
   label wraps to two lines) can force the whole column wider than its
   track — overflowing past the card's own padding at narrow viewports.
   min-width:0 lets the track (and its content) shrink and wrap normally. */
.partner-banner > div {
  min-width: 0;
}

.partner-banner h2,
.partner-banner p {
  color: #fff;
}

.partner-banner p {
  color: rgba(255,255,255,0.88);
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
  /* Nested in a CSS grid item, this inline-flex box's shrink-to-fit width
     was computing against the banner's full track width rather than its
     own padded content width, overflowing the card by ~24px at narrow
     viewports once the label wrapped to two lines. Cap it explicitly. */
  max-width: 100%;
  box-sizing: border-box;
}

.partner-banner-actions {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.partner-stat-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  padding: 24px;
}

.partner-stat-card ul li {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.95rem;
}

.partner-stat-card ul li:first-child {
  border-top: none;
}

/* ---- Process steps ---- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.step {
  position: relative;
  padding-top: 8px;
}

.step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 18px;
}

.step h3 {
  font-size: 1.05rem;
}

.step p {
  color: var(--color-text-light);
  font-size: 0.92rem;
}

/* ---- Testimonial ---- */
.testimonial {
  background: var(--color-bg-alt);
  border-radius: 20px;
  padding: 56px;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.testimonial blockquote {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--color-text);
}

.testimonial cite {
  font-style: normal;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* ---- CTA band ---- */
.cta-band {
  background: var(--color-primary-dark);
  color: #fff;
  text-align: center;
  border-radius: 20px;
  padding: 64px 32px;
}

.cta-band h2, .cta-band p {
  color: #fff;
}

.cta-band .eyebrow {
  color: var(--color-accent);
}

.cta-band .btn-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.support-channel-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.support-channel-list li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 9px 20px;
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
}

.support-channel-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Cookie banner ---- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--color-primary-dark);
  color: #fff;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  padding: 20px 24px;
}

.cookie-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1 1 380px;
  margin: 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cookie-btn-reject,
.cookie-btn-accept {
  padding: 12px 24px;
  font-weight: 700;
}

.cookie-btn-reject {
  background: #fff;
  color: var(--color-primary-dark);
  border: 2px solid #fff;
}

.cookie-btn-reject:hover {
  background: transparent;
  color: #fff;
}

.cookie-btn-manage {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

.cookie-btn-manage:hover {
  color: #fff;
}

/* ---- Cookie Settings panel ---- */
.cookie-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 11, 30, 0.6);
  z-index: 300;
}

.cookie-settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 301;
  background: #fff;
  border-radius: var(--radius);
  width: min(680px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.cookie-settings-panel[hidden] {
  display: none;
}

.cookie-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.cookie-settings-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.cookie-settings-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-light);
  cursor: pointer;
  padding: 4px 8px;
}

.cookie-settings-close:hover {
  color: var(--color-text);
}

.cookie-settings-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.cookie-settings-body > p {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.cookie-category {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

.cookie-category-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cookie-category-header h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
}

.cookie-category-header p {
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.86rem;
}

.cookie-always-on {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cookie-toggle input {
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  cursor: pointer;
  z-index: 1;
}

.cookie-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 100px;
  transition: background 0.15s;
}

.cookie-toggle-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cookie-toggle input:checked + .cookie-toggle-track {
  background: var(--color-primary);
}

.cookie-toggle input:checked + .cookie-toggle-track::before {
  transform: translateX(20px);
}

.cookie-toggle input:disabled + .cookie-toggle-track {
  background: var(--color-primary);
  opacity: 0.6;
  cursor: not-allowed;
}

.cookie-tech-details {
  margin-top: 12px;
}

.cookie-tech-details summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
}

.cookie-tech-empty {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin: 10px 0 0;
}

.cookie-tech-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}

.cookie-tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.cookie-tech-table th,
.cookie-tech-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}

.cookie-settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* ---- Footer legal links ---- */
.footer-legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0;
  font-size: 0.85rem;
}

.footer-legal-links a,
.footer-cookie-settings-btn {
  color: #c7d3e0;
}

.footer-legal-links a:hover,
.footer-cookie-settings-btn:hover {
  color: #fff;
}

.footer-cookie-settings-btn {
  background: none;
  border: none;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
}

/* ---- Legal page content ---- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content h2 {
  margin-top: 2.2em;
  font-size: 1.3rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.9rem;
}

.legal-content th,
.legal-content td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.legal-content th {
  background: var(--color-bg-alt);
}

.legal-content .table-wrap {
  overflow-x: auto;
}

.legal-content table {
  min-width: 640px;
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.4em;
  margin-bottom: 1em;
}

.legal-content ul li {
  margin-bottom: 0.5em;
}

.legal-updated {
  color: var(--color-text-light);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---- Certifications strip (kept separate from partner logos) ---- */
.cert-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.cert-item {
  display: flex;
  align-items: center;
  gap: 20px;
  /* A tinted background + accent border (rather than white-on-white-
     section, or changing the section's own background) is what makes
     these stand out — reviewers flagged the badges as easy to miss. */
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 22px 32px;
  box-shadow: var(--shadow);
}

.cert-item img {
  height: 64px;
  width: auto;
}

.cert-item strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-text);
}

.cert-item span {
  display: block;
  color: var(--color-text-light);
  font-size: 0.88rem;
  margin-top: 2px;
}

/* ---- Media slot (placeholder for pending approved imagery) ---- */
.media-slot {
  width: 100%;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: #c7d3e0;
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-grid-5 {
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
}

.footer-partners {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-partner-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.footer-partner-logo-primary {
  height: 34px;
  filter: none;
  opacity: 1;
}

/* Solid icon-badge marks (e.g. HP) lose all internal contrast under the
   white-silhouette filter above — show these in native colour on a small
   light chip instead. */
.footer-partner-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
}

.footer-partner-logo-chip img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.footer-grid h3 {
  color: #fff;
  font-size: 0.95rem;
  margin-top: 0;
  margin-bottom: 18px;
}

.footer-grid ul li {
  padding: 6px 0;
}

.footer-grid ul li a:hover {
  color: #fff;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.footer-logo-img {
  height: 30px;
  width: auto;
  display: block;
}

.footer-slogan {
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  font-weight: 600;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-socials {
  display: flex;
  gap: 14px;
}

.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.footer-socials a:hover {
  background: var(--color-primary);
}

/* ---- Page hero (inner pages) ---- */
.page-hero {
  background: var(--color-bg-alt);
  padding: 64px 0;
  text-align: center;
}

/* ---- Page hero with approved photography behind the copy ----
   Per the Website Image Pack placement guide: each photo has a clean/dark
   area intended for text, with the subjects on the other side — so the
   photo sits full-bleed behind the hero text rather than beside it. */
.page-hero-photo {
  position: relative;
  overflow: hidden;
  padding: 120px 0 90px;
  color: #fff;
}

.page-hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 11, 30, 0.88) 0%, rgba(2, 11, 30, 0.72) 38%, rgba(2, 11, 30, 0.35) 100%);
  z-index: 1;
}

.page-hero-photo .container {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 640px;
  margin: 0;
}

.page-hero-photo .breadcrumb {
  color: rgba(255, 255, 255, 0.75);
}

.page-hero-photo .breadcrumb a {
  color: #fff;
}

.page-hero-photo .eyebrow {
  color: var(--color-accent);
}

/* Specificity bumped to (0,2,1) via the double class — .page-hero p below
   is also (0,1,1) with identical selector shape, so without this the
   later, lower-priority rule (a mid-grey meant for light backgrounds) was
   winning on source order alone and left the intro paragraph nearly
   invisible against the dark photo overlay on every service page. */
.page-hero.page-hero-photo h1,
.page-hero.page-hero-photo p {
  color: #fff;
}

.page-hero-photo .hero-actions {
  justify-content: flex-start !important;
}

/* ---- Approved photography — feature/section placement ---- */
.feature-photo-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.feature-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The responsiveImage shortcode (.eleventy.js) wraps its <img> in a
   <picture> — <picture> is inline by default and doesn't inherit the
   frame's sizing on its own, unlike a bare <img>. Same fix already applied
   to .hero-photo picture earlier: make it a transparent, fully-filling
   wrapper so it behaves exactly like the plain <img> it replaces. */
.feature-photo-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Editor-controlled focal point. The /admin/ portal writes a focal position
   per photo (--photo-focus, optionally --photo-focus-mobile) instead of a
   per-image class, so a replaced photograph can be re-framed from the portal
   without a code change. object-position can only ever move the visible crop
   within the frame — it cannot change the frame, the aspect ratio or the
   layout — which is what makes this safe to hand to an editor.
   Falls back to centre, then to the desktop value on mobile. */
.crop-focus { object-position: var(--photo-focus, 50% 50%); }

/* Per-image crop positions from the placement guide (desktop default,
   mobile override where the guide specifies a different focal point). */
.crop-home-hero { object-position: 66% 38%; }
.crop-healthcare-tech { object-position: 70% center; }
.crop-diagnostic-centre { object-position: 30% center; }
.crop-pacs-ris-implementation { object-position: 65% center; }
.crop-managed-it { object-position: 68% center; }
.crop-cybersecurity { object-position: 72% center; }
.crop-cloud-data-centre { object-position: 70% center; }
.crop-infrastructure-networking { object-position: 55% center; }
.crop-microsoft-365 { object-position: 50% center; }
.crop-backup-recovery { object-position: 68% center; }
.crop-business-phone-voip { object-position: 40% 30%; }
.crop-hardware-lifecycle { object-position: 55% center; }
.crop-consultancy { object-position: 78% center; }

@media (max-width: 720px) {
  .page-hero-photo {
    padding: 90px 0 56px;
  }
  .page-hero-photo .container {
    max-width: none;
  }
  .crop-focus { object-position: var(--photo-focus-mobile, var(--photo-focus, 50% 50%)); }
  .crop-diagnostic-centre { object-position: 45% center; }
  .crop-cloud-data-centre { object-position: 80% center; }
}

.breadcrumb {
  color: var(--color-text-light);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.breadcrumb a {
  color: var(--color-primary);
  font-weight: 600;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
}

.page-hero p {
  color: var(--color-text-light);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ---- Two-column feature ---- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.feature-row + .feature-row {
  margin-top: 88px;
}

.feature-row.reverse .feature-media {
  order: 2;
}

.feature-media {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
}

.feature-media ul li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.feature-media ul li:first-child {
  border-top: none;
}

.feature-media svg {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
}

.check-list svg {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ---- Compliance badges ---- */
.badge-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.badge-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
}

/* ---- Team ---- */
.team-card {
  text-align: center;
}

.team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 auto 16px;
}

/* ---- Contact page ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}

.contact-info-card {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--color-border);
}

.contact-info-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}

.contact-info-item:first-child {
  border-top: none;
}

.contact-info-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-info-item h4 {
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.contact-info-item p {
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin: 0;
}

form.contact-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

/* Excludes checkbox/radio — this rule stretching a checkbox to 100% width
   is exactly what pushed the consent row's text into a near-0-width
   column (the checkbox's own flex-basis ate the whole row; see
   .field-checkbox below, which relies on the checkbox staying at its
   native intrinsic size). */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  background: #fbfcfe;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}

.form-note {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-top: 10px;
}

.form-success {
  display: none;
  background: #e7f7ee;
  border: 1px solid #b7e6c9;
  color: #1c6b3c;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---- Booking widget ---- */
.booking-intro {
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: 20px;
  padding: 40px 44px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.booking-intro-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.booking-intro h2,
.booking-intro p {
  color: #fff;
  margin: 0;
}

.booking-intro p {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
}

.booking-tagline {
  color: var(--color-accent) !important;
  font-style: italic;
  font-weight: 700;
  margin-top: 12px !important;
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
  margin-top: 40px;
}

.calendar-card,
.booking-info-card,
.booking-steps-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.calendar-card {
  padding: 28px;
}

.booking-staging-notice {
  background: #fff8e6;
  border: 1px solid #f2dfa6;
  color: #7a5c00;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.booking-info-card {
  padding: 28px;
}

.booking-info-card h3 {
  margin-bottom: 8px;
}

.booking-info-card p {
  color: var(--color-text-light);
  font-size: 0.92rem;
}

.booking-timezone {
  font-weight: 600;
  color: var(--color-text) !important;
}

.field-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--color-text-light);
}

.field-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

.field-checkbox label span {
  flex: 1 1 auto;
  min-width: 0;
}

.booking-form-error {
  background: #fdeeee;
  border: 1px solid #f3c8c8;
  color: #9b2c2c;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin: 16px 0;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-weight: 700;
}

.calendar-nav {
  display: flex;
  gap: 8px;
}

.calendar-nav button {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text);
}

.calendar-nav button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-weight: 700;
  margin-bottom: 8px;
}

.calendar-days {
  gap: 6px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--color-text-light);
  border: none;
  background: none;
  font-family: var(--font);
}

.calendar-day.empty {
  visibility: hidden;
}

.calendar-day.past {
  color: #d3dae2;
}

.calendar-day.weekend {
  color: #c7cfd8;
}

.calendar-day.available {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-primary-light);
  transition: background 0.15s, color 0.15s;
}

.calendar-day.available:hover {
  background: var(--color-primary);
  color: #fff;
}

.calendar-day.selected {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
}


.booking-steps-panel {
  padding: 28px;
  margin-top: 24px;
}

.booking-steps-panel h3 {
  margin-bottom: 4px;
}

.booking-steps-panel .step-subtext {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.time-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
}

.time-slot {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font);
  color: var(--color-text);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.time-slot:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.time-slot.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.booking-email-step {
  max-width: 420px;
  margin-top: 24px;
}

.booking-summary {
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.booking-summary strong {
  color: var(--color-primary-dark);
}

/* ---- Blog / case studies ---- */
.post-card img,
.post-card .post-thumb {
  border-radius: var(--radius) var(--radius) 0 0;
  height: 180px;
  object-fit: cover;
}

.post-thumb {
  background: linear-gradient(135deg, var(--color-primary-light), #dcecfb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.post-card {
  padding: 0;
  overflow: hidden;
}

.post-card .post-body {
  padding: 26px;
}

.post-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.post-meta .tag {
  color: var(--color-primary);
}

.case-stats {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.case-stats div strong {
  display: block;
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}

.case-stats div span {
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.placeholder-note {
  background: #fff8e6;
  border: 1px solid #f2dfa6;
  color: #7a5c00;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 32px;
}

/* ---- Utility ---- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .hero .container,
  .feature-row,
  .feature-row.reverse .feature-media,
  .contact-layout,
  .partner-banner,
  .booking-grid {
    grid-template-columns: 1fr;
  }
  .booking-intro {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .feature-row.reverse .feature-media {
    order: 0;
  }
  .grid-3, .grid-4, .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet: keep full nav links + hover mega-menu (no hamburger), but there
   isn't room for logo + 8 links + Need Support + Get a Free Consultation
   in one row without the CTA overflowing — wrap onto a second row instead:
   logo + both CTAs on row 1, nav links (and the mega-menu they trigger)
   centred on row 2. */
@media (min-width: 721px) and (max-width: 1024px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .nav-links {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    gap: 18px;
    font-size: 0.88rem;
  }
  .nav-cta {
    order: 2;
    gap: 10px;
  }
  .nav-cta .btn {
    padding: 10px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .logo-img {
    height: 36px;
  }
}

@media (max-width: 720px) {
  .nav-links, .nav-cta .btn-outline {
    display: none;
  }
  /* .nav's desktop gap/padding (added for spacing at 1440px) is too wide
     once the row is down to just logo + CTA + hamburger on a narrow phone
     — restore the tighter fit this breakpoint depends on. */
  .nav {
    gap: 8px;
    padding: 16px 24px;
  }
  /* Logo + "Get a Free Consultation" + hamburger in one row: the button's
     desktop size doesn't fit next to a full-size logo below ~420px wide —
     shrink the button here rather than letting the logo get squeezed (see
     .logo's flex-shrink:0). The logo itself only steps down modestly (not
     all the way to its old 28px) so it stays clearly readable on mobile. */
  .logo-img {
    height: 32px;
  }
  /* .nav-toggle sits before .nav-links in the markup (not after .nav-cta)
     so that tabbing forward from it moves into the now-open menu instead
     of jumping past it to .nav-cta — order puts it back on the right
     visually without changing that tab sequence. */
  .nav-toggle {
    display: block;
    order: 3;
    padding: 8px 4px;
  }
  .nav-cta {
    order: 2;
    gap: 10px;
  }
  .nav-cta .btn-primary {
    padding: 9px 14px;
    font-size: 0.78rem;
  }
  /* Collapsed by default — see .mega-menu-toggle below. With ~15 sub-links
     always expanded, the menu was tall enough that later top-level items
     (Who We Help, Blog, Contact Us) were only reachable by scrolling
     *inside* the menu, with no visible cue that more existed below. */
  .mega-menu {
    display: none;
    flex-direction: column;
    position: static;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 12px;
    padding: 16px;
    width: auto;
    max-width: none;
    gap: 20px;
  }
  .nav-item-mega.is-open .mega-menu {
    display: flex;
  }
  .mega-menu-toggle {
    display: flex;
    /* .mega-menu-toggle{color:inherit} otherwise picks up dark navy from
       an ancestor meant for light backgrounds — invisible against the
       dark mobile menu. Match .nav-links a's colour instead. */
    color: rgba(255, 255, 255, 0.85);
  }
  .nav-item-mega.is-open .mega-menu-toggle svg {
    transform: rotate(180deg);
  }
  .mega-menu-col-heading {
    color: rgba(255, 255, 255, 0.6);
  }
  .mega-menu-col ul li a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
  }
  /* Slightly larger than the desktop 0.92rem — this is a full-width,
     touch-driven list, not a compact inline nav bar, so it can afford
     (and reads better with) a bit more size. */
  .nav-links a {
    font-size: 1rem;
  }
  .nav-mobile-support {
    display: block;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .nav-mobile-support a {
    font-weight: 700;
    color: var(--color-accent);
  }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary-dark);
    flex-direction: column;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 18px;
    max-height: calc(100vh - 67px);
    overflow-y: auto;
    /* Safety net for short viewports/zoomed text where the (now-collapsed-
       by-default) list can still exceed the available height — fades the
       last ~28px so a partially-cut-off item reads as "more below", not
       as a hard, unexplained clip. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
  }
}

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .grid-3, .grid-4, .grid-2 {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .partner-banner {
    padding: 36px 24px;
  }
}

/* ---- Accessibility utility ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Client logo marquee (kept separate from technology partner logos) ---- */
.client-marquee {
  overflow: hidden;
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.client-marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: client-marquee-scroll 32s linear infinite;
}

.client-marquee:hover .client-marquee-track,
.client-marquee:focus-within .client-marquee-track {
  animation-play-state: paused;
}

.client-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  min-width: 148px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.client-marquee-item:hover,
.client-marquee-item:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.client-marquee-item img {
  /* Full original brand colour — no grayscale/invert/monochrome filter. A
     white card behind every logo (above) keeps the row reading as one
     consistent, readable strip even though several of these logos ship
     with their own opaque colour blocks baked into the asset. */
  max-height: 42px;
  width: auto;
  max-width: 130px;
}

.client-marquee-item img:focus {
  outline-offset: 4px;
}

@keyframes client-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee-track {
    animation: none;
  }
  .client-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .client-marquee-track > [aria-hidden="true"] {
    display: none;
  }
  .google-reviews-track {
    animation: none;
  }
  .google-reviews-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .google-reviews-track > [aria-hidden="true"] {
    display: none;
  }
  /* Nothing to pause/play once autoplay is off. */
  .google-reviews-controls {
    display: none;
  }
}

@media (max-width: 1024px) {
  .client-marquee-track {
    gap: 20px;
    animation-duration: 26s;
  }
}

@media (max-width: 720px) {
  .client-marquee-item {
    height: 56px;
    min-width: 110px;
    padding: 10px 16px;
  }
  .client-marquee-item img {
    max-height: 32px;
    max-width: 100px;
  }
  .client-marquee-track {
    gap: 20px;
    animation-duration: 20s;
  }

  /* Several service pages set a long custom ctaLabel (the Philips PACS/RIS
     page's is 44 characters) for the .btn-white in .cta-band — .btn's base
     white-space:nowrap is fine at desktop widths but forces page-level
     horizontal overflow once the button itself is wider than a narrow
     phone viewport. Let it wrap instead below 720px. */
  .cta-band .btn {
    white-space: normal;
    text-align: center;
  }
  .google-review-item {
    width: 250px;
    padding: 14px 16px;
  }
  .google-reviews-track {
    gap: 14px;
  }
}

/* ---- Google Reviews ---- */
.google-reviews-panel {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  transition: max-width 0.2s ease;
}

/* Widened by js/google-reviews.js once real review cards are rendering —
   720px suits the short pending message but reads as cramped once it's a
   full card carousel. */
.google-reviews-panel.is-live {
  max-width: 1180px;
}

.google-reviews-pending {
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.google-reviews-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.google-reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.google-rating-stars {
  display: flex;
  gap: 2px;
}

.google-rating-star {
  width: 22px;
  height: 22px;
  color: var(--color-gold);
}

.google-rating-star-bg {
  fill: var(--color-border);
}

.google-rating-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

.google-reviews-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.google-reviews-pause-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text);
  cursor: pointer;
}

.google-reviews-pause-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Icon swap between "pause" (‖) and "play" (▶) glyphs, driven by aria-pressed
   so the button's accessible state and its visible icon always agree. */
.google-reviews-pause-btn::before {
  content: "\23F8";
}

.google-reviews-pause-btn[aria-pressed="true"]::before {
  content: "\25B6";
}

.google-reviews-marquee {
  overflow: hidden;
  padding: 8px 0;
  margin-bottom: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}

.google-reviews-track {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: max-content;
  text-align: left;
  animation: client-marquee-scroll 45s linear infinite;
}

.google-reviews-marquee:hover .google-reviews-track,
.google-reviews-marquee:focus-within .google-reviews-track,
.google-reviews-track.is-paused,
.google-reviews-track.has-expanded-review {
  animation-play-state: paused;
}

.google-review-item {
  flex: 0 0 auto;
  width: 300px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.google-review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.google-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.google-review-author {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}

.google-review-meta {
  display: block;
  color: var(--color-text-light);
  font-size: 0.82rem;
}

.google-review-text {
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.google-review-item.is-expanded .google-review-text {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.google-review-toggle {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.google-review-toggle:hover,
.google-review-toggle:focus-visible {
  text-decoration: underline;
}

.google-review-source-link {
  font-size: 0.85rem;
  font-weight: 600;
}

.google-reviews-notice {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-bottom: 8px;
}

.google-reviews-attribution {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.google-maps-attribution-text {
  /* Google's attribution policy allows any sans-serif already used in the
     product as a fallback without loading Roboto specially — this site's
     base font stack (--font) already satisfies that. */
  font-family: var(--font);
  font-weight: 500;
  white-space: nowrap;
}