/* ============================================================================
   Medi Rent Africa - production stylesheet

   Built from Websites/Prototype/Medi Rent CI Option 1 (CI Option 1, approved) by
   the conversion script recorded in the developer handoff. Source order is
   preserved exactly: the four inline <style> blocks and the eight prototype
   stylesheets are concatenated in the order the browser applied them, so the
   rendering is unchanged.

   The prototype declared :root six times at the top level. Those are resolved
   here into one token block using last-declaration-wins - the same result the
   cascade produced. @media :root blocks are left where they were.

   One deliberate visual change: --font-heading now leads with Minigap, the
   heading face named in CI/Brand Guides/Final Style Guide.png. The prototype's
   assets/styles.css:1406 had overridden it to Century Gothic, so the brand face
   never actually rendered. See Evidence/Briefs for the CI conflict record.
   ============================================================================ */

:root {
  --teal-900: #0B3B64;
  --teal-800: #0B3B64;
  --teal-700: #078B8B;
  --teal-600: #078B8B;
  --teal-500: #078B8B;
  --teal-400: #078B8B;
  --teal-300: #9fbcbb;
  --teal-200: #bfd8d6;
  --teal-100: #dce9e7;
  --teal-50: #f0f5f5;
  --brand-primary: #0B3B64;
  --brand-dark: #0B3B64;
  --brand-light: #078B8B;
  --brand-accent: #E9731D;
  --brand-xlight: #dce9e7;
  --brand-xxlight: #f0f5f5;
  --bg: #f5f4ef;
  --bg-white: #fffefa;
  --bg-subtle: #e4e3dc;
  --text-dark: #161512;
  --text-body: #454541;
  --text-muted: #686a65;
  --text-light: #8a8d87;
  --border: #cbd7d4;
  --border-light: rgba(54, 102, 104, 0.14);
  --shadow-sm: 0 1px 2px rgba(22, 21, 18, 0.05);
  --shadow-md: 0 10px 30px rgba(11, 59, 100, 0.09);
  --shadow-lg: 0 22px 55px rgba(11, 59, 100, 0.12);
  --shadow-xl: 0 28px 70px rgba(11, 59, 100, 0.16);
  --font-heading: 'Minigap', 'Century Gothic', 'Avenir Next', Avenir, Montserrat, sans-serif;
  --font-body: "Open Sans", Arial, sans-serif;
  --container-max: 1240px;
  --container-padding: clamp(20px, 4vw, 48px);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --navbar-height: 88px;
  --text-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --text-sm: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --text-md: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --text-lg: clamp(1.35rem, 1.2rem + 0.58vw, 1.75rem);
  --text-xl: clamp(1.75rem, 1.48rem + 1vw, 2.4rem);
  --text-2xl: clamp(2.1rem, 1.7rem + 1.55vw, 3.2rem);
  --text-hero: clamp(2.5rem, 1.95rem + 2.15vw, 4rem);
  --leading-tight: 1.12;
  --leading-heading: 1.2;
  --leading-body: 1.68;
  --leading-small: 1.72;
  --type-body: clamp(1rem, 0.96rem + 0.12vw, 1.0625rem);
  --type-support: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
  --type-ui: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);
  --type-card-title: clamp(1.25rem, 1.16rem + 0.3vw, 1.5rem);
  --type-section-title: clamp(2rem, 1.62rem + 1.25vw, 2.75rem);
  --type-hero-title: clamp(2.5rem, 1.7rem + 2.55vw, 3.75rem);
  --type-leading: 1.62;
  --copy-body: #535B5E;
  --copy-secondary: #5E6669;
  --space-section: clamp(5rem, 4.25rem + 1.6vw, 6.5rem);
  --space-section-compact: clamp(4rem, 3.4rem + 1.25vw, 5.5rem);
  --space-section-mobile: clamp(3rem, 2.55rem + 2vw, 4rem);
  --space-heading-content: clamp(2.5rem, 2rem + 1.25vw, 3.5rem);
  --space-layout-gap: clamp(2rem, 1.35rem + 2.2vw, 4rem);
  --space-grid-gap: clamp(1.25rem, 1rem + .7vw, 2rem);
}

/* ==== from inline block 1 (index.html:10-204) ==== */
    @font-face {
      font-family: 'Minigap';
      src: url('../assets/fonts/minigap.woff2') format('woff2'),
           url('../assets/fonts/minigap.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    /* How It Works: focused editorial process explorer, intentionally card-free. */
    .process {
      position: relative;
      padding-block: clamp(84px, 9vw, 128px);
      background: var(--bg);
    }

    .process .section-header {
      max-width: 860px;
      margin-inline: auto;
    }

    .process-explorer {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(320px, .72fr);
      grid-template-rows: repeat(4, minmax(96px, auto));
      column-gap: clamp(56px, 7vw, 112px);
      min-height: clamp(390px, 34vw, 470px);
      margin-top: clamp(44px, 6vw, 76px);
      border-block: 1px solid rgba(11, 59, 100, .2);
    }

    .process-explorer-item { display: contents; }

    .process-explorer-trigger {
      position: relative;
      display: grid;
      grid-template-columns: 3rem minmax(0, 1fr);
      align-items: center;
      gap: clamp(14px, 2vw, 28px);
      width: 100%;
      padding: 24px 4px;
      border: 0;
      border-bottom: 1px solid rgba(11, 59, 100, .2);
      background: transparent;
      color: rgba(11, 59, 100, .62);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: color 380ms cubic-bezier(.22, 1, .36, 1);
    }

    .process-explorer-item:last-child .process-explorer-trigger { border-bottom: 0; }
    .process-explorer-item:nth-child(1) .process-explorer-trigger { grid-column: 2; grid-row: 1; }
    .process-explorer-item:nth-child(2) .process-explorer-trigger { grid-column: 2; grid-row: 2; }
    .process-explorer-item:nth-child(3) .process-explorer-trigger { grid-column: 2; grid-row: 3; }
    .process-explorer-item:nth-child(4) .process-explorer-trigger { grid-column: 2; grid-row: 4; }

    .process-explorer-trigger-number {
      color: var(--orange, #E9731D);
      font-size: clamp(.9rem, 1.2vw, 1.05rem);
      letter-spacing: .08em;
      transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
    }

    .process-explorer-trigger-title {
      font-size: clamp(1.12rem, 1.55vw, 1.45rem);
      line-height: 1.22;
      transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
    }

    .process-explorer-trigger-line {
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      background: var(--orange, #E9731D);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
    }

    .process-explorer-item.is-active .process-explorer-trigger { color: var(--primary, #0B3B64); }
    .process-explorer-item.is-active .process-explorer-trigger-number,
    .process-explorer-item.is-active .process-explorer-trigger-title { transform: translateX(8px); }
    .process-explorer-item.is-active .process-explorer-trigger-line { transform: scaleX(1); }

    .process-explorer-trigger:focus-visible {
      outline: 2px solid var(--orange, #E9731D);
      outline-offset: 5px;
    }

    .process-explorer-panel {
      grid-column: 1;
      grid-row: 1 / 5;
      align-self: stretch;
      display: grid;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      transition: opacity 330ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 420ms;
    }

    .process-explorer-item.is-active .process-explorer-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 70ms, 70ms, 0s;
    }

    .process-explorer-panel-inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: clamp(26px, 4vw, 56px);
      max-width: 760px;
      overflow: hidden;
    }

    .process-explorer-stage-number {
      color: rgba(11, 59, 100, .16);
      font-family: inherit;
      font-size: clamp(5rem, 9vw, 9rem);
      line-height: .82;
      letter-spacing: -.05em;
    }

    .process-explorer-stage-copy h3 {
      max-width: 14ch;
      margin: 0 0 20px;
      color: var(--primary, #0B3B64);
      font-size: clamp(2.35rem, 4vw, 4.25rem);
      font-weight: 400;
      line-height: 1.04;
    }

    .process-explorer-stage-copy p {
      max-width: 52ch;
      margin: 0;
      color: #565E62;
      font-size: var(--type-body, 1.05rem);
      line-height: 1.68;
    }

    @media (max-width: 820px) {
      .process { padding-block: 64px; }
      .process-explorer {
        display: block;
        min-height: 0;
        margin-top: 40px;
      }
      .process-explorer-item { display: block; border-bottom: 1px solid rgba(11, 59, 100, .2); }
      .process-explorer-item:last-child { border-bottom: 0; }
      .process-explorer-trigger {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        min-height: 78px;
        padding: 20px 2px;
        border-bottom: 0;
      }
      .process-explorer-panel {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: grid-template-rows 400ms cubic-bezier(.22, 1, .36, 1);
      }
      .process-explorer-item.is-active .process-explorer-panel { grid-template-rows: 1fr; transform: none; }
      .process-explorer-panel-inner {
        display: block;
        min-height: 0;
        padding: 0 2px;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 240ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), padding 360ms ease;
      }
      .process-explorer-item.is-active .process-explorer-panel-inner {
        padding: 2px 2px 28px 42px;
        opacity: 1;
        transform: translateY(0);
      }
      .process-explorer-stage-number,
      .process-explorer-stage-copy h3 { display: none; }
      .process-explorer-stage-copy p { font-size: 1rem; line-height: 1.62; }
    }

    @media (prefers-reduced-motion: reduce) {
      .process-explorer-trigger,
      .process-explorer-trigger-number,
      .process-explorer-trigger-title,
      .process-explorer-trigger-line,
      .process-explorer-panel,
      .process-explorer-panel-inner { transition-duration: .01ms !important; transform: none !important; }
    }

/* ==== from assets/styles.css ==== */
/* ========================================
   Medi Rent Africa — Homepage Concept 1
   CI Option 1 Stylesheet
   ======================================== */

/* ---------- CSS Reset & Custom Properties ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  background-color: var(--bg);
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

p {
  color: var(--text-body);
  line-height: 1.7;
}

/* ---------- Utility ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-xlight);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}

.section-header {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-header h2 {
  font-size: 1.85rem;
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

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

.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline-outline {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

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

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

.btn-white:hover {
  background: var(--brand-xlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-lg {
  padding: 16px 36px;
  font-size: 0.95rem;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.8rem;
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(247, 250, 250, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all var(--transition);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}

.navbar.scrolled {
  border-bottom-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.logo-mark {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--brand-primary);
  letter-spacing: 0.02em;
}

.logo-mark strong {
  font-weight: 700;
}

.logo-sub {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

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

.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-body);
  transition: color var(--transition-fast);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 1px;
  transition: width var(--transition);
}

.nav-links a:hover {
  color: var(--brand-primary);
}

.nav-links a:hover::after {
  width: 100%;
}

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

.nav-cta .btn {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 0.875rem;
}

/* Mobile Toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all var(--transition);
}

.mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--navbar-height) + 60px);
  padding-bottom: 80px;
  position: relative;
  background: linear-gradient(135deg, var(--brand-xxlight) 0%, var(--bg) 50%, var(--bg-subtle) 100%);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  overflow: hidden;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-xxlight) 0%, transparent 40%);
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-xlight);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.hero h1 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.08;
  color: var(--text-dark);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.hero-text p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--brand-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.hero-image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: brightness(0.95) saturation(0.9);
}

/* ---------- Benefits ---------- */
.benefits {
  padding: 100px 0;
  background: var(--bg-white);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.benefit-card {
  padding: 40px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 1px solid var(--border-light);
  transition: all var(--transition);
  text-align: center;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-200);
}

.benefit-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--brand-xlight);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

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

.benefit-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Categories ---------- */
.categories {
  padding: 100px 0;
  background: var(--bg);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 24px;
}

.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  min-height: 280px;
}

.category-card.large {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height: 100%;
}

.category-card:last-child {
  grid-column: 1 / -1;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.category-card-bg {
  position: absolute;
  inset: 0;
}

.category-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0.7);
}

.category-card:hover .category-card-bg img {
  transform: scale(1.05);
}

.category-card-content {
  position: relative;
  z-index: 2;
  padding: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(0deg, rgba(22, 21, 18, 0.7) 0%, rgba(22, 21, 18, 0.2) 60%, transparent 100%);
}

.category-card h3 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.015em;
}

.category-card.large h3 {
  font-size: 1.4rem;
}

.category-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
  line-height: 1.6;
}

.category-card.large p {
  font-size: 0.95rem;
  max-width: 380px;
}

.category-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 400;
  color: #fff;
  transition: gap var(--transition);
}

.category-link:hover {
  gap: 12px;
}

/* ---------- Why Section ---------- */
.why-section {
  padding: 100px 0;
  background: var(--bg-white);
}

.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 64px;
  align-items: center;
}

.why-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.why-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: brightness(0.95) saturate(0.9);
}

.why-accent-card {
  position: absolute;
  bottom: 28px;
  right: 28px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 16px 24px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
}

.why-accent-card svg {
  color: var(--brand-primary);
  flex-shrink: 0;
}

.why-accent-card span {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-dark);
}

.why-content .section-tag {
  margin-bottom: 16px;
}

.why-content h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.why-content > p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  line-height: 1.7;
}

.why-points {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.why-point {
  display: flex;
  gap: 16px;
}

.why-point-mark {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-xlight);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.why-point h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.why-point p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Featured ---------- */
.featured {
  padding: 100px 0;
  background: var(--bg);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.featured-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all var(--transition);
}

.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-200);
}

.featured-card-image {
  height: 200px;
  overflow: hidden;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.featured-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition);
}

.featured-card:hover .featured-card-image img {
  transform: scale(1.05);
}

.featured-card-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-xlight);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin: 16px 20px 0;
}

.featured-card-content {
  padding: 12px 20px 20px;
}

.featured-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.featured-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.featured-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.availability {
  font-size: 0.75rem;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.availability::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: inline-block;
}

.featured-card-footer .btn-sm {
  padding: 6px 16px;
  font-size: 0.78rem;
}

/* ---------- Process ---------- */
.process {
  padding: 100px 0;
  background: var(--bg-white);
}

/* ---------- Industries ---------- */
.industries {
  padding: 100px 0;
  background: var(--brand-primary);
  color: #fff;
}

.industries .section-tag {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.industries .section-header h2 {
  color: #fff;
}

.industries .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.industry-card {
  padding: 36px 28px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.industry-card:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-3px);
}

.industry-card svg {
  color: var(--teal-300);
  margin-bottom: 16px;
}

.industry-card h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 8px;
}

.industry-card p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

/* ---------- Testimonials ---------- */
.testimonials {
  padding: 100px 0;
  background: var(--bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border-light);
  transition: all var(--transition);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.testimonial-quote {
  color: var(--teal-200);
  margin-bottom: 16px;
}

.testimonial-card > p {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-xlight);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--text-dark);
}

.testimonial-author span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- CTA Banner ---------- */
.cta-banner {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 50%, var(--brand-light) 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.cta-inner {
  text-align: center;
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-size: 2.6rem;
  color: #fff;
  margin-bottom: 16px;
}

.cta-content p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

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

/* ---------- Footer ---------- */
.footer {
  background: var(--text-dark);
  color: rgba(255, 255, 255, 0.6);
  padding: 80px 0 0;
}

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

.footer-brand .footer-logo {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-brand .footer-logo .logo-img {
  width: 190px;
  height: auto;
}

.footer-brand .logo-wordmark {
  color: #fff;
}

.footer-brand .logo-sub {
  color: rgba(255, 255, 255, 0.5);
}

.footer-brand p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
  line-height: 1.6;
}

.footer-brand .tagline {
  color: var(--teal-400);
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  margin-top: 16px;
}

.footer-nav h4 {
  font-size: 0.85rem;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-nav a {
  display: block;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--teal-400);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.contact-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--teal-400);
}

.contact-item a {
  color: rgba(255, 255, 255, 0.6);
}

.contact-item a:hover {
  color: var(--teal-400);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: 0.82rem;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.35);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.35);
}

.footer-legal a:hover {
  color: var(--teal-400);
}

/* ---------- Animations ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px) {
  .hero h1 {
    font-size: 2.6rem;
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-image {
    display: none;
  }

  .hero-bg {
    width: 100%;
    opacity: 0.15;
  }

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

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .category-card.large {
    grid-column: auto;
    grid-row: auto;
    min-height: 320px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .why-image img {
    height: 380px;
  }

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

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

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .section-header h2 {
    font-size: 2rem;
  }

  .cta-content h2 {
    font-size: 2rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --navbar-height: 68px;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-white);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: 1.1rem;
  }

  .nav-cta {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .hero {
    padding-top: calc(var(--navbar-height) + 40px);
    padding-bottom: 60px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .stat-divider {
    width: 60px;
    height: 1px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .section-header h2 {
    font-size: 1.7rem;
  }

  .featured-grid {
    grid-template-columns: 1fr;
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .cta-content h2 {
    font-size: 1.6rem;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }

  .why-content h2 {
    font-size: 1.6rem;
  }

  .benefits,
  .categories,
  .why-section,
  .featured,
  .process,
  .industries,
  .testimonials,
  .cta-banner {
    padding: 64px 0;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .hero h1 {
    font-size: 1.7rem;
  }

  .section-header h2 {
    font-size: 1.45rem;
  }

  .benefit-card {
    padding: 28px 20px;
  }

  .testimonial-card {
    padding: 28px 24px;
  }
}

/* ==========================================================
   CI refinement — Option 1
   Palette and visual language taken directly from the supplied
   Medi Rent Brand Identity Guidelines.
   ========================================================== */


html { scroll-padding-top: calc(var(--navbar-height) + 20px); }
body { background: var(--bg); color: var(--text-body); line-height: 1.65; }
::selection { background: var(--teal-200); color: var(--text-dark); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--teal-300);
  outline-offset: 4px;
  border-radius: 6px;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.01em;
}
p { line-height: 1.72; }

.navbar {
  background: rgba(245, 244, 239, 0.88);
  border-bottom: 1px solid rgba(11, 59, 100, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
}
.navbar.scrolled {
  background: rgba(255, 254, 250, 0.94);
  border-bottom-color: var(--border-light);
  box-shadow: 0 8px 28px rgba(22, 21, 18, 0.05);
}
.nav-inner { gap: 28px; }
.logo { width: auto; flex: 0 0 auto; }
.nav-links { gap: clamp(18px, 2vw, 32px); }
.nav-links a {
  position: relative;
  padding: 12px 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-body);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 6px;
  height: 1px;
  background: var(--brand-primary);
  transition: right var(--transition);
}
.nav-links a:hover { color: var(--brand-primary); }
.nav-links a:hover::after { right: 0; }

.btn {
  min-height: 46px;
  padding: 12px 24px;
  border-width: 1px;
  border-radius: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.015em;
  box-shadow: none;
}
.btn-lg { min-height: 54px; padding: 15px 30px; font-size: 0.88rem; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 59, 100, 0.2); }
.btn-outline-outline { background: rgba(255,255,255,.42); }
.btn-outline-outline:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.section-tag {
  padding: 0 0 9px;
  border-radius: 0;
  border-bottom: 1px solid var(--brand-primary);
  background: transparent;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.section-header { max-width: 730px; margin-bottom: clamp(44px, 5vw, 68px); }
.section-header h2 { font-size: clamp(1.45rem, 2vw, 1.95rem); letter-spacing: 0.01em; margin-bottom: 20px; }
.section-header p { max-width: 630px; margin-inline: auto; font-size: 1rem; }

.hero {
  min-height: 780px;
  padding-top: calc(var(--navbar-height) + 76px);
  padding-bottom: 92px;
  background: linear-gradient(120deg, #f0f5f5 0%, #f7f6f1 58%, #e4e3dc 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -35% 42%;
  height: 70%;
  background: radial-gradient(circle, rgba(7,139,139,.44), transparent 68%);
  pointer-events: none;
}
.hero-bg { opacity: 0.06; filter: grayscale(1) sepia(.15); }
.hero-overlay { background: linear-gradient(90deg, rgba(240,245,245,.96), rgba(240,245,245,.68) 56%, rgba(228,227,220,.35)); }
.hero-content { grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr); gap: clamp(54px, 7vw, 96px); align-items: center; }
.hero-text { max-width: 650px; }
.hero-badge {
  margin-bottom: 26px;
  padding: 8px 13px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(11,59,100,.24);
  color: var(--brand-primary);
  font-size: .7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero-text > p { max-width: 590px; font-size: 1.08rem; color: var(--text-body); }
.hero-actions { margin-top: 34px; gap: 12px; }
.hero-stats {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(11,59,100,.22);
}
.stat-number { font-weight: 400; letter-spacing: 0.02em; color: var(--brand-primary); }
.stat-label { color: var(--text-muted); }
.hero-image {
  position: relative;
  border-radius: 160px 20px 160px 20px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 8px solid rgba(255,255,255,.65);
  aspect-ratio: 4 / 5;
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,59,100,.17));
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.benefits, .why-section, .process, .testimonials { background: var(--bg); }
.categories, .featured { background: var(--bg-white); }
.benefits, .categories, .why-section, .featured, .process, .testimonials { padding: clamp(84px, 9vw, 128px) 0; }
.benefits-grid, .featured-grid, .testimonials-grid { gap: 22px; }
.benefit-card, .featured-card, .testimonial-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: rgba(255,254,250,.78);
  box-shadow: var(--shadow-sm);
}
.benefit-card { padding: 34px 30px 36px; }
.benefit-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--teal-200), var(--teal-50));
  color: var(--brand-primary);
}
.benefit-icon svg, .industry-card svg { stroke-width: 1.5; }
.benefit-card h3, .featured-card h3, .industry-card h3 { font-weight: 400; letter-spacing: 0.02em; }
.benefit-card:hover, .featured-card:hover, .testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11,59,100,.28);
  box-shadow: var(--shadow-lg);
}

.categories-grid { gap: 18px; }
.category-card {
  min-height: 340px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(11,59,100,.1);
}
.category-card.large { min-height: 698px; }
.category-card-bg img { transition-duration: .7s; }
.category-card::after { background: linear-gradient(180deg, transparent 22%, rgba(22,21,18,.88) 100%); }
.category-card-content { padding: 30px; }
.category-card-content h3 { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.015em; }
.category-card-content p { color: rgba(255,255,255,.78); }
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-link { letter-spacing: .04em; }

.why-grid { gap: clamp(54px, 8vw, 112px); align-items: center; }
.why-image { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.why-image img { height: 620px; object-fit: cover; }
.why-accent-card { border-radius: 16px; background: var(--brand-primary); }
.why-content h2 { font-size: clamp(1.4rem, 2vw, 1.95rem); font-weight: 400; letter-spacing: 0.01em; margin-bottom: 24px; }
.why-points { gap: 22px; margin-top: 34px; }
.why-point-mark { color: var(--brand-primary); background: var(--teal-100); }
.why-point h4 { font-weight: 400; letter-spacing: 0.02em; }

.featured-card { overflow: hidden; }
.featured-card-image { background: linear-gradient(145deg, #f0f5f5, #e4e3dc); }
.featured-card-image img { mix-blend-mode: multiply; }
.featured-card-tag { background: var(--teal-100); color: var(--brand-primary); }
.featured-card-content { padding: 24px 26px 26px; }
.featured-card-footer { padding-top: 16px; border-top: 1px solid var(--border-light); }

.industries {
  padding: clamp(90px, 9vw, 126px) 0;
  background: linear-gradient(145deg, #0B3B64, #0B3B64 58%, #078B8B);
}
.industries-grid { gap: 18px; }
.industry-card { padding: 32px; border-radius: var(--radius-lg); backdrop-filter: blur(8px); }
.industry-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.13); }
.industry-card svg { color: var(--teal-200); }
.testimonial-card { padding: 36px; }
.testimonial-card > p { font-style: normal; font-size: .95rem; }

.cta-banner {
  padding: clamp(92px, 10vw, 140px) 0;
  background: linear-gradient(125deg, #bfd8d6 0%, #f0f5f5 53%, #e4e3dc 100%);
}
.cta-banner::before { background: rgba(11,59,100,.06); }
.cta-content h2 { color: var(--text-dark); font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 400; letter-spacing: 0.01em; }
.cta-content p { color: var(--text-body); }
.cta-banner .btn-outline-white { color: var(--brand-primary); border-color: var(--brand-primary); }
.cta-banner .btn-outline-white:hover { color: #fff; background: var(--brand-primary); }

.footer { background: #161512; }
.footer-grid { gap: 54px; }
.footer-brand .tagline, .footer-nav a:hover, .contact-item svg, .contact-item a:hover, .footer-legal a:hover { color: var(--teal-200); }
.footer-logo {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 22px;
  font-family: var(--font-heading);
  text-decoration: none;
}
.footer-logo .logo-mark {
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.02em;
}
.footer-logo .logo-mark strong {
  font-weight: 700;
}
.footer-logo .logo-sub {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fade-in { transform: translateY(16px); transition-duration: .6s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fade-in { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .mobile-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    position: fixed;
    top: var(--navbar-height);
    inset-inline: 0;
    height: calc(100dvh - var(--navbar-height));
    padding: 48px 24px;
    background: rgba(245,244,239,.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
  .hero-content { grid-template-columns: 1fr 390px; gap: 48px; }
  .hero h1 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
}

@media (max-width: 820px) {
  :root { --navbar-height: 76px; }
  .nav-cta { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--navbar-height) + 56px); }
  .hero-content { grid-template-columns: 1fr; }
  .hero-image { display: block; width: min(100%, 560px); aspect-ratio: 16 / 11; border-radius: 72px 16px; margin-top: 6px; }
  .hero-bg { display: none; }
  .benefits-grid, .featured-grid, .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .category-card.large { grid-column: 1 / -1; min-height: 430px; }
  .why-image img { height: 500px; }
  .testimonials-grid { max-width: none; }
}

@media (max-width: 600px) {
  :root { --container-padding: 20px; }
  .hero { padding-top: calc(var(--navbar-height) + 42px); padding-bottom: 72px; }
  .hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hero-text > p { font-size: .98rem; }
  .hero-actions { align-items: stretch; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat-divider { display: none; }
  .stat { min-width: 0; }
  .stat-number { font-size: 1.25rem; }
  .stat-label { font-size: .68rem; line-height: 1.35; }
  .hero-image { border-width: 5px; border-radius: 52px 12px; }
  .benefits-grid, .featured-grid, .industries-grid, .categories-grid { grid-template-columns: 1fr; }
  .category-card, .category-card.large { grid-column: auto; min-height: 390px; }
  .benefit-card, .testimonial-card { padding: 28px 24px; }
  .why-image img { height: 410px; }
  .why-accent-card { left: 12px; right: 12px; bottom: 12px; }
  .footer-grid { gap: 38px; }
}

/* ==========================================================
   Responsive typography audit
   Typography-only overrides: CI, components and layout remain unchanged.
   ========================================================== */


body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-heading);
}

.nav-links a,
.btn,
.nav-cta .btn {
  font-size: var(--text-sm);
  line-height: 1.35;
}

.nav-cta .btn {
  font-size: 0.875rem;
}

.mobile-toggle {
  font-size: var(--text-base);
}

.section-tag,
.hero-badge,
.featured-card-tag {
  font-size: var(--text-xs);
  line-height: 1.55;
}

.section-header {
  max-width: 46rem;
}

.section-header h2,
.why-content h2,
.cta-content h2 {
  font-size: var(--text-xl);
  line-height: 1.18;
}

.section-header p,
.why-content > p,
.cta-content p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  max-width: 70ch;
}

.hero-text {
  max-width: 46rem;
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  max-width: 15ch;
}

.hero-text > p {
  font-size: var(--text-md);
  line-height: 1.62;
  max-width: 68ch;
}

.hero-actions .btn {
  font-size: var(--text-sm);
}

.stat-number {
  font-size: var(--text-lg);
  line-height: 1.15;
}

.stat-label {
  font-size: var(--text-xs);
  line-height: 1.55;
}

.benefit-card h3,
.featured-card-content h3,
.step-content h3,
.industry-card h3,
.testimonial-author strong,
.why-point h4 {
  font-size: var(--text-md);
  line-height: 1.3;
}

.benefit-card p,
.featured-card-content p,
.step-content p,
.industry-card p,
.why-point p,
.testimonial-card > p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.category-card-content h3 {
  font-size: var(--text-lg);
  line-height: 1.22;
}

.category-card-content p {
  font-size: var(--text-sm);
  line-height: var(--leading-small);
  max-width: 52ch;
}

.category-link,
.availability,
.featured-card-footer .btn-sm {
  font-size: var(--text-sm);
  line-height: 1.45;
}

.step-number {
  font-size: var(--text-xl);
  line-height: 1;
}

.testimonial-author span {
  font-size: var(--text-sm);
  line-height: 1.55;
}

.footer-brand p,
.footer-nav a,
.contact-item,
.contact-item a {
  font-size: var(--text-sm);
  line-height: var(--leading-small);
}

.footer-nav h4 {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.footer-bottom,
.footer-bottom p,
.footer-legal a {
  font-size: var(--text-xs);
  line-height: 1.6;
}

@media (min-width: 1440px) {
  .section-header {
    max-width: 49rem;
  }

  .hero-text {
    max-width: 48rem;
  }
}

@media (max-width: 1100px) {
  .hero h1 {
    font-size: clamp(2.5rem, 5.8vw, 3.65rem);
    max-width: 16ch;
  }

  .section-header h2,
  .why-content h2,
  .cta-content h2 {
    font-size: clamp(1.9rem, 3.8vw, 2.5rem);
  }
}

@media (max-width: 820px) {
  .nav-links a {
    font-size: var(--text-md);
  }

  .hero h1 {
    font-size: clamp(2.4rem, 8vw, 3.35rem);
    max-width: 15ch;
  }

  .hero-text > p {
    font-size: var(--text-base);
  }
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    line-height: 1.08;
    max-width: 14ch;
  }

  .section-header h2,
  .why-content h2,
  .cta-content h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
  }

  .hero-text > p,
  .section-header p,
  .why-content > p,
  .cta-content p,
  .benefit-card p,
  .featured-card-content p,
  .step-content p,
  .industry-card p,
  .why-point p,
  .testimonial-card > p {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .category-card-content p,
  .footer-brand p,
  .footer-nav a,
  .contact-item,
  .contact-item a {
    font-size: 0.9375rem;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: clamp(2rem, 10vw, 2.4rem);
  }

  .hero-actions .btn {
    white-space: normal;
  }

  .footer-bottom {
    align-items: stretch;
  }
}

/* ==========================================================
   Text wrapping and container correction
   No copy or visual styling changes.
   ========================================================== */
.hero h1,
.section-header h2,
.why-content h2,
.cta-content h2,
.benefit-card h3,
.category-card-content h3,
.featured-card-content h3,
.step-content h3,
.industry-card h3 {
  text-wrap: balance;
}

.hero-text > p,
.section-header p,
.why-content > p,
.cta-content p,
.benefit-card p,
.category-card-content p,
.featured-card-content p,
.step-content p,
.industry-card p,
.testimonial-card > p,
.footer-brand p {
  text-wrap: pretty;
}

.hero-content {
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, 0.82fr);
  gap: clamp(36px, 5vw, 72px);
}

.hero-text {
  width: 100%;
  max-width: none;
}

.hero h1 {
  width: min(100%, 23ch);
  max-width: none;
}

.hero-text > p {
  width: min(100%, 64ch);
  max-width: none;
}

.section-header {
  width: min(100%, 54rem);
  max-width: none;
}

.section-header h2 {
  width: min(100%, 28ch);
  max-width: none;
  margin-inline: auto;
}

.section-header p {
  width: min(100%, 68ch);
  max-width: none;
}

.why-grid {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(44px, 6vw, 88px);
}

.why-content {
  min-width: 0;
}

.why-content h2 {
  width: min(100%, 36ch);
  max-width: none;
}

.why-content > p {
  width: min(100%, 67ch);
  max-width: none;
}

.cta-content h2 {
  width: min(100%, 24ch);
  margin-inline: auto;
}

.cta-content p {
  width: min(100%, 62ch);
  max-width: none;
}

.benefit-card,
.category-card-content,
.featured-card-content,
.step-content,
.industry-card,
.testimonial-card,
.footer-grid > * {
  min-width: 0;
}

.benefit-card h3,
.category-card-content h3,
.featured-card-content h3,
.industry-card h3 {
  max-width: 100%;
}

.btn {
  max-width: 100%;
}

@media (min-width: 1280px) {
  .hero h1 {
    width: min(100%, 22ch);
  }

  .why-content h2 {
    width: min(100%, 36ch);
  }
}

@media (max-width: 1100px) {
  .hero-content {
    grid-template-columns: minmax(0, 1.12fr) minmax(350px, 0.88fr);
    gap: clamp(32px, 4vw, 48px);
  }

  .hero h1 {
    width: min(100%, 19ch);
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-content h2 {
    width: min(100%, 34ch);
  }
}

@media (max-width: 820px) {
  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    width: min(100%, 18ch);
  }

  .section-header {
    width: min(100%, 46rem);
  }

  .section-header h2 {
    width: min(100%, 25ch);
  }
}

@media (max-width: 600px) {
  .hero h1 {
    width: min(100%, 16ch);
  }

  .hero-text > p,
  .section-header p,
  .why-content > p,
  .cta-content p {
    width: 100%;
  }

  .section-header h2,
  .why-content h2,
  .cta-content h2 {
    width: min(100%, 22ch);
  }

  .category-card-content,
  .benefit-card,
  .featured-card-content,
  .testimonial-card {
    overflow-wrap: anywhere;
  }
}


/* ==== from inline block 2 (index.html:206-501) ==== */
    /* Focused typography and text-alignment correction. */
    

    body,
    p {
      font-size: var(--type-body);
      line-height: var(--type-leading);
    }

    h1, h2, h3, h4, h5, h6 {
      line-height: 1.16;
      text-wrap: balance;
    }

    p,
    li,
    .value-row-description,
    .contact-directory-detail,
    .stat-label,
    .availability {
      text-wrap: pretty;
    }

    .nav-links a,
    .nav-cta .btn,
    .btn,
    .hero-actions .btn {
      font-size: var(--type-ui);
      line-height: 1.35;
    }

    .nav-cta .btn {
      font-size: 0.875rem;
    }

    .section-tag,
    .hero-badge,
    .featured-card-tag {
      font-size: 0.875rem;
      line-height: 1.4;
    }

    .section-header {
      width: min(100%, 46rem);
      margin-bottom: clamp(2.75rem, 4vw, 3.75rem);
    }

    .section-header h2,
    .why-content h2,
    .cta-content h2 {
      width: auto;
      font-size: var(--type-section-title);
      line-height: 1.16;
      margin-bottom: 1rem;
    }

    .section-header h2 {
      max-width: 26ch;
      margin-inline: auto;
    }

    .section-header p {
      width: auto;
      max-width: 66ch;
      margin-inline: auto;
      font-size: var(--type-body);
      line-height: var(--type-leading);
    }

    .hero-text {
      max-width: 42rem;
    }

    .hero h1 {
      width: auto;
      max-width: 18ch;
      margin-bottom: 1.25rem;
      font-size: var(--type-hero-title);
      line-height: 1.08;
    }

    .hero-text > p {
      width: auto;
      max-width: 62ch;
      margin-bottom: 1.75rem;
      font-size: clamp(1rem, 0.93rem + 0.25vw, 1.125rem);
      line-height: 1.62;
    }

    .hero-actions {
      margin-top: 0;
      margin-bottom: 2.25rem;
    }

    .hero-stats {
      margin-top: 0;
    }

    .stat-number {
      font-size: clamp(1.25rem, 1.12rem + 0.35vw, 1.5rem);
    }

    .stat-label {
      font-size: var(--type-support);
      line-height: 1.45;
    }

    .benefit-card {
      text-align: left;
    }

    .benefit-icon {
      margin-inline: 0;
    }

    .benefit-card h3,
    .featured-card-content h3,
    .step-content h3,
    .industry-card h3,
    .category-card-content h3 {
      font-size: var(--type-card-title);
      line-height: 1.25;
      margin-bottom: 0.625rem;
    }

    .why-point h4,
    .testimonial-author strong {
      font-size: 1rem;
      line-height: 1.35;
    }

    .benefit-card p,
    .featured-card-content p,
    .step-content p,
    .industry-card p,
    .why-point p,
    .testimonial-card > p {
      font-size: var(--type-support);
      line-height: 1.62;
    }

    .category-card-content p {
      max-width: 56ch;
      font-size: var(--type-support);
      line-height: 1.58;
    }

    .category-link,
    .availability,
    .featured-card-footer .btn-sm,
    .testimonial-author span {
      font-size: var(--type-support);
      line-height: 1.4;
    }

    .why-content h2 {
      max-width: 28ch;
    }

    .why-content > p {
      width: auto;
      max-width: 64ch;
      margin-bottom: 2rem;
      font-size: var(--type-body);
      line-height: var(--type-leading);
    }

    .why-points {
      margin-top: 0;
    }

    .industry-card,
    .featured-card-content,
    .testimonial-card {
      text-align: left;
    }

    .cta-content h2 {
      max-width: 24ch;
      margin-inline: auto;
    }

    .cta-content p {
      width: auto;
      max-width: 62ch;
      margin-inline: auto;
      font-size: var(--type-body);
      line-height: var(--type-leading);
    }

    .footer-brand p {
      max-width: 38ch;
      font-size: var(--type-support);
      line-height: 1.65;
    }

    .footer-nav h4 {
      font-size: 1rem;
      line-height: 1.35;
    }

    .footer-nav a,
    .contact-item,
    .contact-item a {
      font-size: var(--type-support);
      line-height: 1.55;
    }

    .footer-bottom,
    .footer-bottom p,
    .footer-legal a {
      font-size: 0.875rem;
      line-height: 1.5;
    }

    @media (max-width: 1100px) {
      .hero h1 {
        width: auto;
        max-width: 17ch;
        font-size: clamp(2.375rem, 4.7vw, 3.25rem);
      }
    }

    @media (max-width: 820px) {
      .nav-links a {
        font-size: 1rem;
      }

      .hero h1 {
        max-width: 18ch;
        font-size: clamp(2.375rem, 7vw, 3rem);
      }

      .hero-text > p {
        max-width: 60ch;
      }
    }

    @media (max-width: 600px) {
      :root {
        --type-body: 1rem;
        --type-support: 0.9375rem;
        --type-ui: 0.9375rem;
        --type-card-title: clamp(1.25rem, 5.4vw, 1.375rem);
        --type-section-title: clamp(1.875rem, 8vw, 2.25rem);
      }

      .section-header {
        text-align: left;
        margin-inline: 0;
        margin-bottom: 2.5rem;
      }

      .section-header h2,
      .section-header p {
        max-width: 100%;
        margin-inline: 0;
      }

      .hero h1 {
        width: auto;
        max-width: 17ch;
        font-size: clamp(2.125rem, 9.6vw, 2.625rem);
      }

      .hero-text > p,
      .why-content > p,
      .cta-content p {
        font-size: 1rem;
      }

      .stat-label {
        font-size: 0.8125rem;
      }

      .footer-bottom p,
      .footer-legal a {
        font-size: 0.875rem;
      }
    }

    @media (max-width: 380px) {
      .hero h1 {
        font-size: clamp(2rem, 9.5vw, 2.25rem);
      }
    }

/* ==== from inline block 3 (index.html:502-596) ==== */
    /* Text colour and weight hierarchy refinement only. */
    

    body,
    p {
      color: var(--copy-body);
      font-weight: 400;
    }

    h1, h2, h3, h4, h5, h6 {
      color: #0B3B64;
    }

    .nav-links a {
      color: var(--copy-body);
      font-weight: 400;
    }

    .hero-text > p,
    .why-content > p,
    .testimonial-card > p {
      color: var(--copy-body);
      font-weight: 400;
    }

    .section-header p,
    .cta-content p,
    .benefit-card p,
    .featured-card-content p,
    .step-content p,
    .why-point p,
    .testimonial-author span,
    .stat-label,
    .availability {
      color: var(--copy-secondary);
      font-weight: 400;
    }

    .benefit-card h3,
    .featured-card-content h3,
    .step-content h3,
    .why-point h4,
    .testimonial-author strong {
      color: #0B3B64;
    }

    /* Image-overlay copy retains accessible light-on-dark contrast. */
    .category-card-content h3 {
      color: #fff;
    }

    .category-card-content p {
      color: rgba(255, 255, 255, 0.82);
      font-weight: 400;
    }

    /* The blue section requires a separate light hierarchy. */
    .industries .section-header h2,
    .industry-card h3 {
      color: #fff;
    }

    .industries .section-header p {
      color: rgba(255, 255, 255, 0.78);
      font-weight: 400;
    }

    .industry-card p {
      color: rgba(255, 255, 255, 0.72);
      font-weight: 400;
    }

    /* Footer hierarchy is softened while remaining legible on black. */
    .footer-brand p,
    .footer-nav a,
    .contact-item,
    .contact-item a {
      color: rgba(255, 255, 255, 0.68);
      font-weight: 400;
    }

    .footer-nav h4 {
      color: #fff;
    }

    .footer-bottom p,
    .footer-legal a {
      color: rgba(255, 255, 255, 0.58);
      font-weight: 400;
    }

/* ==== from inline block 4 (index.html:597-2538) ==== */
    /* Small CI visual refinements requested after typography approval. */
    *,
    *::before,
    *::after {
      background-image: none !important;
    }

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

    .hero h1 {
      color: #0B3B64;
    }

    .hero-title-highlight {
      display: inline-block;
      margin-top: 10px;
      padding: 0.04em 0.16em 0.06em;
      border-radius: 8px;
      background-color: #0B3B64;
      color: #fff;
      white-space: nowrap;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    /* Site-wide CI grain: visible on light surfaces, beneath all content. */
    .medi-grain-layer {
      position: fixed;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      contain: strict;
    }

    .medi-grain-base,
    .medi-grain-corners,
    .medi-grain-pointer,
    .medi-grain-pointer::after {
      position: absolute;
      pointer-events: none;
    }

    .medi-grain-base {
      inset: 0;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 140px 140px !important;
      mix-blend-mode: multiply;
    }

    .medi-grain-corners {
      inset: -10%;
      background-image:
        radial-gradient(ellipse 48% 44% at 4% 3%, rgba(11, 59, 100, 0.16) 0%, rgba(11, 59, 100, 0.085) 34%, transparent 72%),
        radial-gradient(ellipse 38% 34% at 98% 96%, rgba(11, 59, 100, 0.075) 0%, transparent 72%) !important;
      filter: blur(24px);
      mix-blend-mode: multiply;
    }

    .medi-grain-pointer {
      left: 0;
      top: 0;
      width: clamp(440px, 34vw, 520px);
      aspect-ratio: 1;
      border-radius: 50%;
      opacity: 0;
      transform: translate3d(-50%, -50%, 0);
      will-change: transform;
      transition: opacity 500ms ease;
      background-image: radial-gradient(circle, rgba(11, 59, 100, 0.13) 0%, rgba(11, 59, 100, 0.065) 34%, transparent 72%) !important;
      filter: blur(34px);
      mix-blend-mode: multiply;
    }

    .medi-grain-pointer::after {
      content: "";
      inset: 8%;
      border-radius: inherit;
      opacity: 0.34;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='29' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
      background-repeat: repeat !important;
      background-size: 110px 110px !important;
      -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.72) 42%, transparent 73%);
      mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.72) 42%, transparent 73%);
      filter: contrast(1.1);
      mix-blend-mode: multiply;
    }

    .site-page > section > .container {
      position: relative;
      z-index: 2;
    }

    @media (hover: none), (pointer: coarse) {
      .medi-grain-pointer { display: none; }
      .medi-grain-corners { filter: blur(30px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .medi-grain-pointer { display: none; }
    }

    .sunlight-shadow-layer {
      position: fixed;
      inset: 0;
      z-index: 10;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      background-color: transparent;
    }

    .sunlight-shadow-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      transform: scale(1.52);
      transform-origin: center top;
      filter: grayscale(1) contrast(0.82) brightness(1.14);
      mix-blend-mode: multiply;
      opacity: 0.075;
    }

    body > section > .container,
    body > footer > .container {
      position: relative;
      z-index: 2;
    }

    .hero,
    .benefits,
    .categories,
    .why-section,
    .featured,
    .process,
    .testimonials,
    .cta-banner {
      background-color: transparent !important;
    }

    .industries,
    .footer {
      position: relative;
      z-index: 11;
    }

    .hero::after {
      display: none;
    }

    .hero-overlay {
      background-color: rgba(228, 227, 220, 0.58);
    }

    .hero-image::after {
      display: none;
    }

    .benefit-icon {
      background-color: var(--teal-100);
    }

    .category-card-content {
      background-color: rgba(22, 21, 18, 0.5);
    }

    .category-card::after {
      display: none;
    }

    .featured-card-image {
      background-color: #F0F5F5;
    }

    .industries {
      background-color: #0B3B64;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .industries-video,
    .industries-video-mask {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .industries-video {
      z-index: 0;
      object-fit: cover;
    }

    .industries-video-mask {
      z-index: 1;
      background-color: rgba(11, 59, 100, 0.86);
    }

    .industries-content {
      position: relative;
      z-index: 2;
    }

    .industries .section-tag {
      color: #fff;
      border-bottom-color: rgba(255, 255, 255, 0.55);
    }

    .industries .section-header h2,
    .industry-card h3 {
      color: #fff;
    }

    .industries .section-header p {
      color: rgba(255, 255, 255, 0.78);
    }

    .industry-card p {
      color: rgba(255, 255, 255, 0.72);
    }

    .industry-card {
      background-color: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.14);
    }

    .industry-card:hover {
      background-color: rgba(255, 255, 255, 0.13);
    }

    .industry-card svg {
      color: #BFD8D6;
    }

    .why-accent-card {
      background: rgba(240, 245, 245, 0.94);
      border: 1px solid rgba(11, 59, 100, 0.14);
      box-shadow: 0 10px 28px rgba(11, 59, 100, 0.12);
    }

    .why-accent-card svg,
    .why-accent-card span {
      color: #0B3B64;
    }

    .featured-card {
      display: flex;
      flex-direction: column;
    }

    .featured-card > .featured-card-tag {
      align-self: flex-start;
      width: max-content;
      max-width: calc(100% - 2.5rem);
    }

    .featured-card-content {
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    .featured-card-content > p {
      margin-bottom: 1.25rem;
    }

    .featured-card-footer {
      align-items: center;
      gap: 1rem;
      justify-content: space-between;
      margin-top: auto;
      width: 100%;
    }

    .availability {
      flex: 0 0 auto;
      font-size: 0.875rem;
      white-space: nowrap;
    }

    .featured-card-footer .btn-sm {
      flex: 0 0 auto;
      min-height: auto;
      padding: 0;
      border: 0;
      font-size: 0.875rem;
      white-space: nowrap;
    }

    .industries .section-tag {
      background: transparent;
      border-bottom-color: rgba(255, 255, 255, 0.55);
    }

    .cta-banner {
      background: var(--bg);
    }

    .cta-banner::before {
      display: none;
    }

    .cta-banner .btn-white {
      background: var(--brand-accent);
      color: #fff;
      border-color: var(--brand-accent);
    }

    .cta-banner .btn-white:hover {
      background: var(--brand-primary);
      color: #fff;
      border-color: var(--brand-primary);
    }

    .cta-banner .btn-outline-white {
      background: transparent;
      color: var(--brand-primary);
      border-color: var(--brand-primary);
    }

    .footer {
      background: #0B3B64;
      color: rgba(255, 255, 255, 0.76);
      border-top: 0;
    }

    .footer-grid {
      border-bottom-color: rgba(255, 255, 255, 0.14);
    }

    .footer-logo .logo-img {
      filter: brightness(0) invert(1);
    }

    .footer-nav h4 {
      color: #fff;
    }

    .footer-brand p,
    .footer-nav a,
    .contact-item,
    .contact-item a {
      color: rgba(255, 255, 255, 0.76);
    }

    .footer-nav a:hover,
    .contact-item a:hover,
    .footer-legal a:hover {
      color: #fff;
    }

    .footer-brand .tagline,
    .contact-item svg {
      color: #BFD8D6;
    }

    .footer-bottom p,
    .footer-legal a {
      color: rgba(255, 255, 255, 0.62);
    }

    .hero,
    .benefits,
    .categories,
    .why-section,
    .featured,
    .process,
    .testimonials,
    .cta-banner {
      background-color: var(--bg);
    }

    .benefit-card:hover,
    .category-card:hover,
    .featured-card:hover,
    .industry-card:hover,
    .testimonial-card:hover {
      box-shadow: none !important;
    }

    /* Final responsive continuity layer. */
    html {
      overflow-x: clip;
    }

    .container {
      width: min(100%, var(--container-max));
      padding-inline: clamp(18px, 3vw, 32px);
    }

    @media (max-width: 1180px) {
      .hero {
        padding-block: clamp(86px, 9vw, 118px) clamp(68px, 8vw, 96px);
      }

      .benefits,
      .categories,
      .why-section,
      .featured,
      .process,
      .industries,
      .testimonials,
      .cta-banner {
        padding-block: clamp(68px, 7.5vw, 96px);
      }

      .hero-content {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
        gap: clamp(30px, 4vw, 46px);
      }

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

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

    @media (max-width: 960px) {
      .hero {
        padding-block: 92px 72px;
      }

      .hero-content,
      .why-grid {
        grid-template-columns: 1fr;
      }

      .hero-text {
        max-width: 46rem;
      }

      .hero-image {
        width: min(100%, 580px);
        margin-inline: auto;
        aspect-ratio: 16 / 11;
      }

      .hero-image img {
        height: 100%;
      }

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

      .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 46rem;
        margin-inline: auto;
      }

      .why-content {
        max-width: 46rem;
      }
    }

    @media (max-width: 720px) {
      .hero {
        padding-block: 82px 60px;
      }

      .benefits,
      .categories,
      .why-section,
      .featured,
      .process,
      .industries,
      .testimonials,
      .cta-banner {
        padding-block: 58px;
      }

      .section-header {
        margin-bottom: 34px;
      }

      .benefits-grid,
      .categories-grid,
      .featured-grid,
      .industries-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .category-card,
      .category-card.large {
        grid-column: auto;
        grid-row: auto;
      }

      .why-image img {
        height: clamp(360px, 72vw, 460px);
      }

      .benefit-card,
      .industry-card,
      .testimonial-card {
        padding: 26px 22px;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
      }
    }

    @media (max-width: 520px) {
      .navbar .container {
        padding-inline: 16px;
      }

      .navbar .logo-img {
        width: min(52vw, 188px);
      }

      .hero {
        padding-block: 76px 52px;
      }

      .hero h1 {
        font-size: clamp(2rem, 9.4vw, 2.55rem);
      }

      .section-header h2,
      .why-content h2,
      .cta-content h2 {
        font-size: clamp(1.875rem, 8vw, 2.25rem);
      }

      .hero-image {
        width: min(100%, 460px);
      }

      .hero-actions,
      .cta-actions {
        width: 100%;
      }

      .hero-actions .btn,
      .cta-actions .btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 18px;
        white-space: normal;
      }

      .hero-stats {
        align-items: start;
      }

      .footer-legal {
        flex-wrap: wrap;
        gap: 12px 20px;
      }
    }

    /* Compact laptop viewports, including scaled 13–15 inch displays. */
    @media (min-width: 961px) and (max-height: 820px) {
      .hero {
        min-height: auto;
        padding-block: calc(var(--navbar-height) + 34px) 48px;
      }

      .hero h1 {
        font-size: clamp(2.5rem, 3.25vw, 3.25rem);
      }

      .hero-content {
        gap: clamp(30px, 3.5vw, 52px);
      }

      .hero-image {
        width: min(38vw, 456px);
        max-height: min(64vh, 570px);
      }

      .hero-text > p {
        margin-bottom: 22px;
      }

      .hero-stats {
        margin-top: 26px;
        padding-top: 20px;
      }
    }

    @media (max-width: 380px) {
      .container {
        padding-inline: 16px;
      }

      .featured-card-content,
      .category-card-content,
      .industry-card,
      .testimonial-card {
        padding-inline: 20px;
      }
    }

    @media (max-width: 340px) {
      .hero h1 {
        font-size: 1.875rem;
      }
    }

    @media (max-width: 600px) {
      .featured-card-footer {
        align-items: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .sunlight-shadow-layer {
        display: none;
      }

      .industries-video {
        display: none;
      }

      .industries-video-mask {
        display: none;
      }
    }

    /* Page navigation placeholders for the new Medi Rent website build. */
    .nav-links .nav-page,
    .nav-dropdown-toggle {
      position: relative;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--copy-body);
      font-family: var(--font-heading);
      font-size: var(--type-ui);
      font-weight: 400;
      line-height: 1.35;
      white-space: nowrap;
      cursor: pointer;
    }

    .nav-links .nav-page::after,
    .nav-dropdown-toggle::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 1px;
      background: #0B3B64;
      transition: width .25s ease;
    }

    .nav-links .nav-page:hover::after,
    .nav-links .nav-page:focus-visible::after,
    .nav-dropdown:focus-within .nav-dropdown-toggle::after,
    .nav-dropdown:hover .nav-dropdown-toggle::after {
      width: 100%;
    }

    .nav-dropdown {
      position: relative;
      display: flex;
      align-items: center;
    }

    .nav-dropdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
    }

    .nav-dropdown-toggle svg {
      width: 14px;
      height: 14px;
      transition: transform .25s ease;
    }

    .nav-dropdown-menu {
      position: absolute;
      top: calc(100% + 20px);
      left: 50%;
      z-index: 20;
      width: max-content;
      min-width: 220px;
      padding: 12px;
      border: 1px solid rgba(11, 59, 100, .14);
      border-radius: 14px;
      background: rgba(228, 227, 220, .98);
      box-shadow: 0 16px 38px rgba(11, 59, 100, .14);
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 8px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
    }

    .nav-dropdown:hover .nav-dropdown-toggle svg,
    .nav-dropdown:focus-within .nav-dropdown-toggle svg {
      transform: rotate(180deg);
    }

    .nav-dropdown-menu .nav-subpage {
      display: block;
      width: 100%;
      padding: 10px 12px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #4E5558;
      font-family: var(--font-body);
      font-size: .875rem;
      line-height: 1.4;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
    }

    .nav-dropdown-menu .nav-subpage:hover,
    .nav-dropdown-menu .nav-subpage:focus-visible {
      background: rgba(11, 59, 100, .08);
      color: #0B3B64;
      outline: none;
    }

    .footer-nav .footer-page,
    .footer-legal .footer-page {
      display: block;
      color: rgba(255, 255, 255, .74);
      font-size: var(--type-support);
      line-height: 1.55;
    }

    .footer-nav .footer-page {
      margin-bottom: 12px;
    }

    .footer-legal .footer-page {
      display: inline-block;
      color: rgba(255, 255, 255, .45);
      font-size: .875rem;
    }

    @media (max-width: 1100px) {
      .nav-links.open .nav-page,
      .nav-links.open .nav-dropdown-toggle {
        font-size: 1rem;
      }

      .nav-links.open .nav-dropdown {
        flex-direction: column;
      }

      .nav-links.open .nav-dropdown-menu {
        position: static;
        width: min(280px, calc(100vw - 48px));
        max-height: 0;
        min-width: 0;
        margin-top: 0;
        padding-block: 0;
        overflow: hidden;
        border-width: 0;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: none;
      }

      .nav-links.open .nav-dropdown:focus-within .nav-dropdown-menu {
        max-height: 360px;
        margin-top: 14px;
        padding-block: 10px;
        border-width: 1px;
        opacity: 1;
        visibility: visible;
      }

      .nav-links.open .nav-dropdown.open .nav-dropdown-menu {
        max-height: 360px;
        margin-top: 14px;
        padding-block: 10px;
        border-width: 1px;
        opacity: 1;
        visibility: visible;
      }
    }

    /* ==========================================================
       Secondary page system - one HTML file, dedicated page views
       ========================================================== */
    [hidden] { display: none !important; }

    .site-page {
      position: relative;
      z-index: auto;
      min-height: calc(100vh - var(--navbar-height));
      background: transparent;
    }

    .page-hero {
      padding: calc(var(--navbar-height) + clamp(4.5rem, 8vw, 7rem)) 0 clamp(4.5rem, 8vw, 7rem);
      overflow: hidden;
    }

    .page-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(360px, .82fr);
      gap: clamp(3rem, 7vw, 6rem);
      align-items: center;
    }

    .page-hero-grid > *,
    .editorial-grid > *,
    .contact-layout > * {
      min-width: 0;
    }

    .page-hero-copy {
      max-width: 44rem;
    }

    .page-hero h1 {
      max-width: 14ch;
      margin: 0 0 1.5rem;
      color: #0B3B64;
      font-size: clamp(2.5rem, 1.85rem + 2.4vw, 4rem);
      line-height: 1.08;
      text-wrap: balance;
    }

    .page-hero-copy > p {
      max-width: 66ch;
      color: #535B5E;
      font-size: clamp(1rem, .97rem + .12vw, 1.0625rem);
      line-height: 1.65;
    }

    .page-hero-media {
      width: 100%;
      aspect-ratio: 4 / 4.5;
      overflow: hidden;
      border: 7px solid rgba(255,255,255,.6);
      border-radius: 140px 20px 140px 20px;
    }

    .page-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .page-hero-media--team img { object-position: 52% center; }

    .page-hero-media--product {
      background: #E4E3DC;
    }

    .page-hero-media--product img {
      object-fit: contain;
      padding: clamp(1rem, 2.5vw, 2.25rem);
      mix-blend-mode: multiply;
    }

    .page-hero.page-hero--text-only {
      min-height: min(680px, 100vh);
      min-height: min(680px, 100svh);
      align-items: center;
    }

    .page-hero--text-only .page-hero-grid {
      grid-template-columns: minmax(0, 1fr);
      place-items: center;
      gap: 0;
    }

    .page-hero--text-only .page-hero-copy {
      width: min(100%, 64rem);
      max-width: 64rem;
      margin-inline: auto;
      text-align: center;
    }

    .page-hero--text-only .section-tag {
      display: table;
      margin-inline: auto;
    }

    .page-hero--text-only h1 {
      width: min(100%, 15ch);
      max-width: 15ch;
      margin-inline: auto;
    }

    .page-hero--text-only .page-hero-copy > p {
      width: min(100%, 62ch);
      max-width: 62ch;
      margin-inline: auto;
    }

    @media (min-width: 821px) and (max-height: 700px) {
      .page-hero.page-hero--text-only {
        min-height: 100vh;
        min-height: 100svh;
      }
    }

    @media (max-width: 820px) {
      .page-hero.page-hero--text-only {
        min-height: min(560px, 78vh);
        min-height: min(560px, 78svh);
        align-items: center;
      }
    }

    @media (max-width: 600px) {
      .page-hero.page-hero--text-only {
        min-height: min(500px, 72vh);
        min-height: min(500px, 72svh);
      }

      .page-hero--text-only h1 {
        max-width: 12ch;
      }
    }

    .page-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
    }

    .page-section--blue {
      position: relative;
      z-index: 2;
      background: #0B3B64;
    }

    .page-section--blue h2,
    .page-section--blue h3,
    .page-section--blue .section-tag {
      color: #fff;
      border-color: rgba(255,255,255,.72);
    }

    .page-section--blue p { color: rgba(255,255,255,.76); }

    .page-heading {
      width: min(100%, 48rem);
      margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
    }

    .page-heading--center {
      margin-inline: auto;
      text-align: center;
    }

    .page-heading--center h2,
    .page-heading--center p {
      margin-inline: auto;
    }

    .page-heading h2,
    .editorial-copy h2,
    .contact-copy h2 {
      margin: 0 0 1rem;
      color: #0B3B64;
      font-size: clamp(2rem, 1.65rem + 1.2vw, 2.75rem);
      line-height: 1.16;
      text-wrap: balance;
    }

    .page-heading p,
    .editorial-copy p,
    .contact-copy p {
      max-width: 68ch;
      color: #535B5E;
      line-height: 1.65;
    }

    /* Dark section contrast must win over the generic page-heading colours above. */
    .page-section--blue .page-heading h2,
    .page-section--blue .page-heading h3 {
      color: #fff;
    }

    .page-section--blue .page-heading p {
      color: rgba(255,255,255,.84);
    }

    .page-section--blue .page-heading .section-tag {
      color: #fff;
      border-color: rgba(255,255,255,.72);
    }

    .editorial-grid {
      display: grid;
      grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
      gap: clamp(3rem, 7vw, 6rem);
      align-items: center;
    }

    .editorial-grid--reverse {
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    }

    .editorial-media {
      overflow: hidden;
      aspect-ratio: 4 / 4.4;
      border-radius: 24px;
    }

    .editorial-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .editorial-media--product {
      background: #E4E3DC;
    }

    .editorial-media--product img {
      object-fit: contain;
      padding: clamp(1rem, 2.5vw, 2rem);
    }

    .editorial-media--product img[src$=".jpg"],
    .editorial-media--product img[src$=".jpeg"] {
      mix-blend-mode: multiply;
    }

    .editorial-copy p + p { margin-top: 1.15rem; }

    .info-grid,
    .product-category-grid,
    .value-grid,
    .equipment-list-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }

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

    .info-card,
    .value-card,
    .equipment-list-card {
      padding: clamp(1.75rem, 3vw, 2.5rem);
      border: 1px solid rgba(11,59,100,.16);
      border-radius: 16px;
      background: rgba(255,255,255,.38);
    }

    .info-card h3,
    .value-card h3,
    .equipment-list-card h3 {
      margin-bottom: .75rem;
      color: #0B3B64;
      font-size: clamp(1.35rem, 1.18rem + .45vw, 1.65rem);
      line-height: 1.22;
    }

    .info-card p,
    .value-card p {
      color: #535B5E;
      font-size: .9375rem;
      line-height: 1.62;
    }

    .value-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .value-card { grid-column: span 2; min-height: 15rem; }
    .value-card:nth-child(4) { grid-column: 2 / span 2; }

    .value-number {
      display: block;
      margin-bottom: 3rem;
      color: #078B8B;
      font-family: var(--font-heading);
    }

    .model-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1rem;
    }

    .model-step {
      position: relative;
      min-height: 12rem;
      padding: 1.75rem;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 16px;
      background: rgba(255,255,255,.08);
    }

    .model-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 100%;
      width: 1rem;
      height: 1px;
      background: rgba(255,255,255,.5);
    }

    .model-step span {
      display: block;
      margin-bottom: 2.75rem;
      color: #E9731D;
      font-family: var(--font-heading);
    }

    .model-step h3 { color: #fff; font-size: 1.4rem; }

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

    .product-category-card {
      overflow: hidden;
      border: 1px solid rgba(11,59,100,.14);
      border-radius: 16px;
      background: rgba(255,255,255,.45);
    }

    .product-category-image {
      height: 220px;
      overflow: hidden;
      background: rgba(255,255,255,.44);
    }

    .product-category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease;
    }

    .product-category-image img[data-fit="contain"] {
      object-fit: contain;
      padding: 1.15rem;
      background: #E4E3DC;
      mix-blend-mode: multiply;
    }

    .product-category-card:hover .product-category-image img { transform: scale(1.03); }

    .product-category-content { padding: 1.75rem; }
    .product-category-content h3 { color: #0B3B64; font-size: 1.45rem; margin-bottom: .65rem; }
    .product-category-content p { color: #535B5E; font-size: .9375rem; line-height: 1.62; }

    .page-link-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 1.25rem;
      padding: 0;
      border: 0;
      background: transparent;
      color: #0B3B64;
      font-family: var(--font-heading);
      font-size: .9rem;
      cursor: pointer;
    }

    .page-link-button:hover { color: #E9731D; }

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

    .equipment-list-card {
      overflow: hidden;
      padding: 0;
    }

    .equipment-list-media {
      display: grid;
      place-items: center;
      height: clamp(11rem, 18vw, 14rem);
      padding: 1rem;
      overflow: hidden;
      border-bottom: 1px solid rgba(11,59,100,.12);
      background: #E4E3DC;
    }

    .equipment-list-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .equipment-list-content {
      padding: clamp(1.5rem, 2.5vw, 2.25rem);
    }

    .equipment-list-card:nth-child(5):last-child {
      grid-column: 1 / -1;
      width: min(100%, calc(50% - .625rem));
      justify-self: center;
    }

    .equipment-list-card ul,
    .plain-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .equipment-list-card li,
    .plain-list li {
      position: relative;
      padding: .62rem 0 .62rem 1.25rem;
      border-bottom: 1px solid rgba(11,59,100,.1);
      color: #535B5E;
      font-size: .9375rem;
      line-height: 1.5;
    }

    .equipment-list-card li:last-child,
    .plain-list li:last-child { border-bottom: 0; }

    .equipment-list-card li::before,
    .plain-list li::before {
      content: '';
      position: absolute;
      top: 1.18rem;
      left: 0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #078B8B;
    }

    .generator-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
    }

    .generator-card {
      display: grid;
      grid-template-columns: 180px 1fr;
      overflow: hidden;
      border: 1px solid rgba(11,59,100,.14);
      border-radius: 16px;
      background: rgba(255,255,255,.42);
    }

    .generator-card-media {
      min-height: 12rem;
      overflow: hidden;
      background: #E4E3DC;
    }

    .generator-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 1rem;
      mix-blend-mode: multiply;
    }
    .generator-card img.has-alpha { mix-blend-mode: normal; }

    .generator-card--150 .generator-card-media img {
      width: 112%;
      height: 112%;
      max-width: none;
      padding: 0;
      object-fit: cover;
      object-position: center 18%;
      transform: translate(-5.5%, -2%);
    }
    .generator-card-content { padding: 1.75rem 1.75rem 1.75rem 0; }
    .generator-card h3 { color: #0B3B64; font-size: 1.35rem; margin-bottom: .65rem; }
    .generator-card p { color: #535B5E; font-size: .9rem; line-height: 1.6; }

    /* Pathology discipline explorer */
    .pathology-explorer {
      display: grid;
      grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.42fr);
      border-block: 1px solid rgba(11,59,100,.16);
      container-type: inline-size;
    }

    .pathology-discipline { display: contents; }

    .pathology-trigger {
      grid-column: 1;
      grid-row: var(--discipline-row);
      display: grid;
      grid-template-columns: 2.4rem minmax(0, 1fr) 1rem;
      align-items: center;
      gap: .8rem;
      width: 100%;
      min-height: 5rem;
      padding: 1rem 1.25rem;
      border: 0;
      border-bottom: 1px solid rgba(11,59,100,.13);
      background: transparent;
      color: #0B3B64;
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: color .38s cubic-bezier(.22,.61,.36,1), background-color .38s cubic-bezier(.22,.61,.36,1);
    }

    .pathology-discipline:last-child .pathology-trigger { border-bottom: 0; }
    .pathology-trigger:hover,
    .pathology-trigger:focus-visible,
    .pathology-trigger[aria-selected="true"] { background: rgba(255,255,255,.32); }
    .pathology-trigger:focus-visible { outline: 2px solid #E9731D; outline-offset: -3px; }

    .pathology-trigger-number {
      color: #E9731D;
      font-size: .84rem;
      letter-spacing: .08em;
    }

    .pathology-trigger-title {
      font-family: 'Minigap', sans-serif;
      font-size: clamp(1.04rem, 1.7cqi, 1.3rem);
      line-height: 1.25;
    }

    .pathology-trigger-indicator {
      position: relative;
      width: 1rem;
      height: 1rem;
    }

    .pathology-trigger-indicator::before,
    .pathology-trigger-indicator::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: currentColor;
      transition: transform .35s ease;
    }

    .pathology-trigger-indicator::after { transform: rotate(90deg); }
    .pathology-trigger[aria-expanded="true"] .pathology-trigger-indicator::after { transform: rotate(0); }

    .pathology-panel {
      grid-column: 2;
      grid-row: 1 / 6;
      min-width: 0;
      padding: clamp(1.5rem, 3vw, 2.75rem);
      border-left: 1px solid rgba(11,59,100,.16);
      background: rgba(255,255,255,.2);
    }

    .pathology-panel[hidden] { display: none; }
    .pathology-panel.is-active { animation: pathologyPanelIn .42s cubic-bezier(.22,.61,.36,1) both; }

    .pathology-panel-inner {
      display: grid;
      grid-template-columns: minmax(14rem, .72fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(1.5rem, 3vw, 3rem);
      min-height: 23rem;
    }

    .pathology-panel-media {
      display: grid;
      place-items: center;
      min-height: 19rem;
      overflow: hidden;
      border-radius: 14px;
      background: #E4E3DC;
    }

    .pathology-panel-media img {
      width: 100%;
      height: 100%;
      max-height: 22rem;
      object-fit: contain;
      padding: clamp(.75rem, 2vw, 1.4rem);
      mix-blend-mode: multiply;
      transition: transform .6s cubic-bezier(.22,.61,.36,1);
    }

    .pathology-panel-media img.has-alpha { mix-blend-mode: normal; }
    .pathology-panel:hover .pathology-panel-media img { transform: scale(1.035); }

    .pathology-panel-content h3 {
      max-width: 22ch;
      margin-bottom: 1rem;
      color: #0B3B64;
      font-size: clamp(1.6rem, 2.8cqi, 2.35rem);
      line-height: 1.15;
    }

    .pathology-product-list { list-style: none; margin: 0; padding: 0; }
    .pathology-product-list li {
      position: relative;
      padding: .62rem 0 .62rem 1.1rem;
      border-bottom: 1px solid rgba(11,59,100,.12);
      color: #555D60;
      font-size: clamp(.88rem, 1.35cqi, 1rem);
      line-height: 1.45;
    }

    .pathology-product-list li:last-child { border-bottom: 0; }
    .pathology-product-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1.05rem;
      width: .34rem;
      height: .34rem;
      border-radius: 50%;
      background: #E9731D;
    }

    .editorial-media--product,
    .page-hero-media--product { background: #E4E3DC; }
    .editorial-media--product img,
    .page-hero-media--product img { object-fit: contain; padding: clamp(1rem, 3vw, 2rem); }
    .product-render-blend { mix-blend-mode: multiply; }

    .generator-card-media img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
    .generator-card:hover .generator-card-media img { transform: scale(1.04); }
    .generator-card--150 .generator-card-media img {
      width: 100%;
      height: 100%;
      padding: 1rem;
      object-fit: contain;
      object-position: center;
      transform: none;
      mix-blend-mode: normal;
    }

    @keyframes pathologyPanelIn {
      from { opacity: 0; transform: translateX(10px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .faq-list {
      display: grid;
      width: min(100%, 76rem);
      min-height: 34rem;
      margin: auto;
      grid-template-columns: minmax(18rem, .88fr) minmax(0, 1.12fr);
      grid-template-rows: repeat(7, minmax(4.75rem, auto));
      border-block: 1px solid rgba(11, 59, 100, .16);
    }

    .faq-item,
    .faq-heading {
      display: contents;
    }

    .faq-item:nth-child(1) .faq-question { grid-row: 1; }
    .faq-item:nth-child(2) .faq-question { grid-row: 2; }
    .faq-item:nth-child(3) .faq-question { grid-row: 3; }
    .faq-item:nth-child(4) .faq-question { grid-row: 4; }
    .faq-item:nth-child(5) .faq-question { grid-row: 5; }
    .faq-item:nth-child(6) .faq-question { grid-row: 6; }
    .faq-item:nth-child(7) .faq-question { grid-row: 7; }

    .faq-question {
      position: relative;
      display: grid;
      width: 100%;
      min-width: 0;
      grid-column: 1;
      grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
      align-items: center;
      gap: clamp(.7rem, 1.2vw, 1.1rem);
      padding: 1.15rem clamp(1rem, 2vw, 1.75rem) 1.15rem .25rem;
      border: 0;
      border-bottom: 1px solid rgba(11, 59, 100, .13);
      background: transparent;
      color: #0B3B64;
      font-family: var(--font-heading);
      text-align: left;
      cursor: pointer;
      transition: color .36s ease, padding-left .36s cubic-bezier(.22, .61, .36, 1), background-color .36s ease;
    }

    .faq-item:last-child .faq-question { border-bottom: 0; }

    .faq-question::after {
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      background: #E9731D;
      content: "";
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    }

    .faq-question:hover { background: rgba(11, 59, 100, .035); }
    .faq-question:focus-visible { outline: 2px solid #E9731D; outline-offset: -2px; }
    .faq-item.is-active .faq-question {
      padding-left: .75rem;
      background: rgba(11, 59, 100, .055);
    }
    .faq-item.is-active .faq-question::after { transform: scaleX(1); }

    .faq-question-number {
      color: #E9731D;
      font-family: var(--font-body);
      font-size: .875rem;
      font-weight: 400;
      letter-spacing: .08em;
    }

    .faq-question-text {
      min-width: 0;
      font-size: clamp(1.05rem, .98rem + .2vw, 1.22rem);
      line-height: 1.3;
      text-wrap: pretty;
    }

    .faq-question-arrow {
      color: rgba(11, 59, 100, .46);
      font-family: var(--font-body);
      font-size: 1.1rem;
      text-align: right;
      transition: color .32s ease, transform .32s ease;
    }

    .faq-item.is-active .faq-question-arrow {
      color: #E9731D;
      transform: translateX(4px);
    }

    .faq-answer {
      position: relative;
      display: flex;
      overflow: hidden;
      grid-column: 2;
      grid-row: 1 / span 7;
      align-items: center;
      min-width: 0;
      padding: clamp(2.75rem, 5vw, 5.5rem);
      border-left: 1px solid rgba(11, 59, 100, .16);
      background: rgba(255, 255, 255, .12);
    }

    .faq-answer[hidden] { display: none; }

    .faq-answer.is-entering .faq-answer-inner {
      animation: faqAnswerIn .4s cubic-bezier(.22, .61, .36, 1) both;
    }

    .faq-answer.is-leaving .faq-answer-inner {
      animation: faqAnswerOut .16s ease both;
    }

    .faq-answer-inner {
      position: relative;
      z-index: 1;
      width: min(100%, 38rem);
    }

    .faq-answer-number {
      position: absolute;
      top: 50%;
      right: clamp(1rem, 3vw, 3rem);
      color: rgba(11, 59, 100, .055);
      font-family: var(--font-heading);
      font-size: clamp(9rem, 16vw, 17rem);
      line-height: .8;
      pointer-events: none;
      transform: translateY(-50%);
      user-select: none;
    }

    .faq-answer-kicker {
      display: inline-block;
      margin-bottom: 1.15rem;
      color: #E9731D;
      font-size: .82rem;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .faq-answer-title {
      max-width: 18ch;
      margin: 0 0 1.5rem;
      color: #0B3B64;
      font-size: clamp(2rem, 3.4vw, 3.35rem);
      line-height: 1.08;
      text-wrap: balance;
    }

    .faq-answer p {
      max-width: 56ch;
      margin: 0;
      color: #535B5E;
      font-size: clamp(1rem, .96rem + .16vw, 1.12rem);
      line-height: 1.68;
      text-wrap: pretty;
    }

    @keyframes faqAnswerIn {
      from { opacity: 0; transform: translateX(14px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes faqAnswerOut {
      from { opacity: 1; transform: translateX(0); }
      to { opacity: 0; transform: translateX(-8px); }
    }

    @media (max-width: 820px) {
      .faq-list {
        display: block;
        min-height: 0;
        border-bottom: 0;
      }

      .faq-item,
      .faq-heading { display: block; }

      .faq-question {
        display: grid;
        min-height: 4.75rem;
        grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
        padding: 1.15rem .35rem;
      }

      .faq-item.is-active .faq-question { padding-left: .35rem; }

      .faq-question-arrow {
        position: relative;
        width: 1rem;
        height: 1rem;
        color: #0B3B64;
        font-size: 0;
        transform: none;
      }

      .faq-question-arrow::before,
      .faq-question-arrow::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: .9rem;
        height: 1px;
        background: currentColor;
        content: "";
        transform: translate(-50%, -50%);
        transition: transform .32s ease;
      }

      .faq-question-arrow::after { transform: translate(-50%, -50%) rotate(90deg); }
      .faq-item.is-active .faq-question-arrow { color: #E9731D; transform: none; }
      .faq-item.is-active .faq-question-arrow::after { transform: translate(-50%, -50%) rotate(0); }

      .faq-answer {
        display: block;
        overflow: hidden;
        padding: 0;
        border-left: 0;
        background: rgba(11, 59, 100, .035);
      }

      .faq-answer[hidden] { display: none; }

      .faq-answer-inner {
        width: 100%;
        padding: 1.3rem 1rem 1.65rem 2.35rem;
      }

      .faq-answer-number,
      .faq-answer-kicker,
      .faq-answer-title { display: none; }

      .faq-answer p {
        max-width: 62ch;
        font-size: 1rem;
        line-height: 1.62;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-question,
      .faq-question::after,
      .faq-question-arrow,
      .faq-question-arrow::after,
      .faq-answer-inner {
        animation: none !important;
        transition-duration: .01ms !important;
        transform: none !important;
      }
    }

    .contact-layout {
      display: grid;
      grid-template-columns: minmax(18rem, 2fr) minmax(31rem, 3fr);
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: start;
    }

    .contact-copy > h2 { margin-top: 1.25rem; }
    .contact-copy > p {
      max-width: 38rem;
      margin-top: 1rem;
    }

    .contact-directory {
      margin-top: clamp(1.5rem, 3vw, 2.25rem);
      border-top: 1px solid rgba(11,59,100,.18);
    }

    .contact-directory-row {
      display: grid;
      grid-template-columns: 2.25rem minmax(0, 1fr);
      gap: 1rem;
      padding: clamp(1rem, 1.7vw, 1.35rem) 0;
      border-bottom: 1px solid rgba(11,59,100,.18);
      align-items: start;
    }

    .contact-directory-index {
      padding-top: .2rem;
      color: #E9731D;
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: .08em;
    }

    .contact-directory-content { min-width: 0; }
    .contact-directory-content h3 {
      margin: 0 0 .35rem;
      color: #0B3B64;
      font-size: clamp(1.05rem, 1rem + .25vw, 1.25rem);
      line-height: 1.25;
    }

    .contact-directory-content p,
    .contact-directory-content a {
      color: #535B5E;
      font-size: .9375rem;
      line-height: 1.6;
      overflow-wrap: anywhere;
    }

    .contact-directory-content a {
      position: relative;
      display: inline-block;
      transition: color .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
    }

    .contact-directory-content a::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: -.18rem;
      left: 0;
      height: 1px;
      background: #E9731D;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .32s cubic-bezier(.22,.61,.36,1);
    }

    .contact-directory-content a:hover,
    .contact-directory-content a:focus-visible {
      color: #0B3B64;
      transform: translateX(4px);
    }

    .contact-directory-content a:hover::after,
    .contact-directory-content a:focus-visible::after { transform: scaleX(1); }

    .contact-directory-content a:focus-visible {
      outline: 2px solid #E9731D;
      outline-offset: 4px;
    }

    .contact-form {
      padding: clamp(1.75rem, 3.2vw, 2.75rem);
      border: 1px solid rgba(11,59,100,.16);
      border-radius: 16px;
      background: rgba(255,255,255,.42);
    }

    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
    .form-field { display: flex; flex-direction: column; gap: .5rem; }
    .form-field--full { grid-column: 1 / -1; }
    .form-field label { color: #0B3B64; font-size: .875rem; font-weight: 600; }
    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      min-height: 50px;
      padding: .85rem 1rem;
      border: 1px solid rgba(11,59,100,.24);
      border-radius: 10px;
      background: rgba(255,255,255,.7);
      color: #161512;
      font: inherit;
    }
    .form-field textarea { min-height: 140px; resize: vertical; }
    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus { outline: 2px solid #0B3B64; outline-offset: 2px; }
    .form-notice { margin: 1rem 0 1.4rem; color: #5E6669; font-size: .8125rem; line-height: 1.55; }
    .form-status { margin-top: 1rem; color: #0B3B64; font-size: .875rem; }

    .secondary-cta {
      position: relative;
      z-index: 11;
      padding: clamp(5rem, 9vw, 8rem) 0;
      background: #0B3B64;
      text-align: center;
    }
    .secondary-cta h2 { color: #fff; font-size: clamp(2rem, 1.65rem + 1.2vw, 2.75rem); margin-bottom: 1rem; }
    .secondary-cta p { max-width: 60ch; margin: 0 auto 2rem; color: rgba(255,255,255,.76); }

    .nav-page.active,
    .nav-dropdown-toggle.active { color: #0B3B64; }
    .nav-page.active::after,
    .nav-dropdown-toggle.active::after { width: 100%; }

    .footer-nav .footer-page {
      width: fit-content;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }
    .footer-nav .footer-page:hover { color: #fff; }

    @media (max-width: 1024px) {
      .page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: 2.5rem; }
      .product-category-grid, .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .value-card, .value-card:nth-child(4) { grid-column: auto; }
      .value-card:last-child { grid-column: 1 / -1; min-height: auto; }
      .generator-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 820px) {
      .page-hero-grid,
      .editorial-grid,
      .editorial-grid--reverse,
      .contact-layout { grid-template-columns: 1fr; }
      .page-hero-media { width: min(100%, 36rem); aspect-ratio: 16 / 11; border-radius: 72px 16px; }
      .editorial-media { width: min(100%, 38rem); aspect-ratio: 16 / 10; }
      .model-grid { grid-template-columns: 1fr; }
      .model-step { min-height: auto; }
      .model-step span { margin-bottom: 1.5rem; }
      .model-step:not(:last-child)::after { top: 100%; left: 2.25rem; width: 1px; height: 1rem; }
      .equipment-list-grid { grid-template-columns: 1fr; }
      .equipment-list-card:nth-child(5):last-child {
        grid-column: auto;
        width: 100%;
      }
      .contact-copy { order: 1; }
      .contact-form { order: 2; }
    }

    @media (max-width: 600px) {
      .page-hero { padding-top: calc(var(--navbar-height) + 3rem); }
      .page-hero h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); }
      .product-category-grid, .info-grid, .value-grid { grid-template-columns: 1fr; }
      .value-card, .value-card:last-child { grid-column: auto; min-height: auto; }
      .generator-card { grid-template-columns: 1fr; }
      .generator-card img { height: 180px; }
      .generator-card-content { padding: 1.5rem; }
      .form-grid { grid-template-columns: 1fr; }
      .form-field--full { grid-column: auto; }
      .contact-layout { gap: 2rem; }
      .contact-directory { margin-top: 1.5rem; }
      .contact-directory-row {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: .75rem;
        padding: 1rem 0;
      }
      .contact-form { padding: 1.5rem; }
    }

    @media (max-width: 900px) {
      .pathology-explorer { display: block; border-bottom: 0; }
      .pathology-discipline { display: block; }
      .pathology-trigger {
        display: grid;
        min-height: 4.5rem;
        border-bottom: 1px solid rgba(11,59,100,.14);
      }
      .pathology-panel {
        display: block;
        padding: 1.25rem 1rem 1.75rem;
        border: 0;
        border-bottom: 1px solid rgba(11,59,100,.16);
      }
      .pathology-panel[hidden] { display: none; }
      .pathology-panel-inner { grid-template-columns: 1fr; min-height: 0; gap: 1.25rem; }
      .pathology-panel-media { min-height: clamp(13rem, 56vw, 18rem); }
      .pathology-panel-media img { max-height: 18rem; }
      .pathology-panel-content h3 { font-size: clamp(1.5rem, 6vw, 2rem); }
    }

    @media (prefers-reduced-motion: reduce) {
      .contact-directory-content a { transition: none; }
      .contact-directory-content a:hover,
      .contact-directory-content a:focus-visible { transform: none; }
      .pathology-panel.is-active { animation: none; }
      .pathology-panel-media img,
      .generator-card-media img { transition: none; }
      .pathology-panel:hover .pathology-panel-media img,
      .generator-card:hover .generator-card-media img { transform: none; }
    }

/* ==== from assets/responsive-secondary-heroes.css ==== */
/* Responsive secondary-page heroes: content-led sizing for every viewport. */
.page-hero {
  min-height: min(780px, 100vh);
  min-height: min(780px, 100svh);
  padding-top: calc(var(--navbar-height) + clamp(2rem, 6vh, 4.25rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.75rem);
  display: flex;
  align-items: center;
}

.page-hero-grid {
  width: 100%;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}

.page-hero h1 {
  width: 100%;
  max-width: 13ch;
  margin-bottom: clamp(1.15rem, 2.4vh, 1.5rem);
  font-size: clamp(4.5rem, 3.4rem + 1.45vw, 5.25rem);
  font-weight: 400;
  line-height: 1.035;
  text-wrap: balance;
}

.page-hero-media {
  width: min(100%, 34rem);
  width: min(100%, 34rem, calc((100vh - var(--navbar-height) - 7rem) * .8889));
  width: min(100%, 34rem, calc((100svh - var(--navbar-height) - 7rem) * .8889));
  min-width: 0;
  justify-self: end;
}

@media (min-width: 821px) and (max-height: 820px) {
  .page-hero {
    min-height: calc(100vh - 1px);
    min-height: calc(100svh - 1px);
    padding-top: calc(var(--navbar-height) + clamp(1.5rem, 4vh, 2.5rem));
    padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
  }

  .page-hero-grid { gap: clamp(2rem, 4vw, 4rem); }

  .page-hero h1 {
    margin-bottom: clamp(.95rem, 2vh, 1.2rem);
    font-size: clamp(3.625rem, 3rem + 1.4vw, 4.375rem);
    line-height: 1.04;
  }

  .page-hero-media {
    width: min(100%, 30rem);
    width: min(100%, 30rem, calc((100vh - var(--navbar-height) - 5rem) * .8889));
    width: min(100%, 30rem, calc((100svh - var(--navbar-height) - 5rem) * .8889));
  }
}

@media (min-width: 821px) and (max-height: 700px) {
  .page-hero {
    padding-top: calc(var(--navbar-height) + 1.25rem);
    padding-bottom: 1.5rem;
  }

  .page-hero h1 {
    margin-bottom: .8rem;
    font-size: clamp(3.5rem, 3rem + 1.2vw, 4rem);
    line-height: 1.04;
  }

  .page-hero-copy > p { line-height: 1.55; }

  .page-hero-media {
    width: min(100%, 26rem);
    width: min(100%, 26rem, calc((100vh - var(--navbar-height) - 3.5rem) * .8889));
    width: min(100%, 26rem, calc((100svh - var(--navbar-height) - 3.5rem) * .8889));
  }
}

@media (max-width: 820px) {
  .page-hero {
    min-height: 0;
    padding-top: calc(var(--navbar-height) + clamp(2.25rem, 7vh, 3.75rem));
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
    align-items: flex-start;
  }

  .page-hero-grid { gap: clamp(2rem, 6vw, 3rem); }

  .page-hero h1 {
    max-width: 14ch;
    font-size: clamp(3.25rem, 7.5vw, 4rem);
    line-height: 1.045;
  }

  .page-hero-media {
    width: min(100%, 36rem);
    aspect-ratio: 16 / 10;
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .page-hero {
    padding-top: calc(var(--navbar-height) + clamp(1.75rem, 6vh, 2.75rem));
    padding-bottom: clamp(2.5rem, 6vh, 3.5rem);
  }

  .page-hero-grid { gap: clamp(1.5rem, 5.5vw, 2.25rem); }

  .page-hero h1 {
    margin-bottom: 1rem;
    font-size: clamp(2.625rem, 10.5vw, 3.25rem);
    line-height: 1.05;
  }

  .page-hero-copy > p { line-height: 1.58; }

  .page-hero-media {
    aspect-ratio: 16 / 9;
    border-width: 5px;
    border-radius: 52px 14px;
  }
}

@media (max-width: 380px) {
  .page-hero {
    padding-top: calc(var(--navbar-height) + 1.5rem);
    padding-bottom: 2.25rem;
  }

  .page-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.375rem, 11.5vw, 2.875rem);
    line-height: 1.055;
  }

  .page-hero-media {
    aspect-ratio: 16 / 8.75;
    border-radius: 44px 12px;
  }
}


/* ==== from assets/about-core-values.css ==== */
/* About page: interactive editorial Core Values rows. */
.core-values-section .page-heading {
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}

.value-list {
  border-top: 1px solid rgba(11, 59, 100, .2);
}

.value-row {
  border-bottom: 1px solid rgba(11, 59, 100, .2);
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.value-row-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  align-items: center;
  width: 100%;
  min-height: clamp(9.25rem, 12vw, 11.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3.75rem);
  border: 0;
  background: transparent;
  color: #0B3B64;
  text-align: left;
  cursor: pointer;
  container-type: inline-size;
  transition: grid-template-columns 500ms cubic-bezier(.22, 1, .36, 1);
}

.value-row-trigger:focus-visible {
  outline: 2px solid #E9731D;
  outline-offset: -4px;
}

.value-row-summary {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(1.1rem, 2.4vw, 2.5rem);
  min-width: 0;
  max-width: 100%;
  transform: translate3d(50%, 0, 0);
  transition: transform 500ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.value-row-number,
.value-row-title {
  color: #0B3B64;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  font-size: clamp(2rem, 3.2cqi, 3.25rem);
  font-weight: 400;
  line-height: 1.04;
  white-space: nowrap;
}

.value-row-description {
  width: 100%;
  min-width: 0;
  max-width: min(48ch, 100%);
  margin: 0;
  padding-left: clamp(1.5rem, 3cqi, 3rem);
  box-sizing: border-box;
  color: #535B5E;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05cqi, 1.125rem);
  line-height: 1.62;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-2rem, 0, 0);
  transition:
    opacity 220ms cubic-bezier(.22, 1, .36, 1),
    transform 500ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 500ms;
  will-change: transform, opacity;
}

.value-row.is-active .value-row-summary {
  transform: translate3d(0, 0, 0);
}

.value-row.is-active .value-row-trigger {
  grid-template-columns: minmax(0, 1.16fr) minmax(18rem, .84fr);
}

.value-row.is-active .value-row-description {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 160ms, 0ms, 0s;
}

@media (max-width: 820px) {
  .value-row-trigger {
    display: block;
    min-height: 7.5rem;
    padding: 1.75rem clamp(1.25rem, 5vw, 2rem);
  }

  .value-row-summary {
    width: 100%;
    transform: none;
  }

  .value-row.is-active .value-row-trigger {
    grid-template-columns: none;
  }

  .value-row-number,
  .value-row-title {
    font-size: clamp(2rem, 6.6vw, 3rem);
  }

  .value-row-description {
    max-width: 58ch;
    max-height: 0;
    margin-top: 0;
    padding-left: 0;
    overflow: hidden;
    transform: translate3d(0, .75rem, 0);
    transition:
      max-height 500ms cubic-bezier(.22, 1, .36, 1),
      margin-top 500ms cubic-bezier(.22, 1, .36, 1),
      opacity 300ms ease,
      transform 450ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 500ms;
  }

  .value-row.is-active .value-row-summary {
    justify-content: flex-start;
  }

  .value-row.is-active .value-row-description {
    max-height: 12rem;
    margin-top: 1.25rem;
    transform: none;
    transition-delay: 0s;
  }
}

@media (max-width: 430px) {
  .value-row-summary {
    gap: 1rem;
  }

  .value-row-number,
  .value-row-title {
    font-size: clamp(1.8rem, 8.5vw, 2.35rem);
  }

  .value-row-title {
    white-space: normal;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-row-summary,
  .value-row-description {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}


/* ==== from assets/model-journey.css ==== */
/* About page: video-backed Medi Rent Model journey. */
.model-journey-section {
  position: relative;
  z-index: 11;
  overflow: hidden;
  background: #0B3B64;
  isolation: isolate;
}

.model-journey-video,
.model-journey-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.model-journey-video {
  z-index: 0;
  object-fit: cover;
  object-position: center;
  opacity: .7;
  filter: saturate(.38) brightness(.72) contrast(.84);
}

.model-journey-mask {
  z-index: 1;
  background: rgba(11, 59, 100, .915);
}

.model-journey-content {
  position: relative;
  z-index: 2;
}

.model-journey-section .page-heading h2,
.model-journey-section .section-tag {
  color: #fff;
}

.model-journey-section .section-tag {
  border-color: rgba(255, 255, 255, .62);
}

.model-journey-section .model-grid {
  position: relative;
  z-index: 0;
}

.model-step {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: clamp(12rem, 18vw, 17rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-align: left;
  cursor: pointer;
  opacity: .82;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 480ms cubic-bezier(.22, 1, .36, 1),
    background-color 480ms cubic-bezier(.22, 1, .36, 1),
    border-color 480ms cubic-bezier(.22, 1, .36, 1),
    transform 480ms cubic-bezier(.22, 1, .36, 1);
}

.model-step::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: -1;
  width: 1rem;
  height: 1px;
  background: rgba(255, 255, 255, .56);
  pointer-events: none;
}

.model-step:last-child::after {
  display: none;
}

.model-step span {
  display: block;
  margin: 0;
  color: #E9731D;
  font-family: var(--font-heading);
  font-size: clamp(1rem, .9rem + .3vw, 1.25rem);
  line-height: 1;
}

.model-step h3 {
  margin: clamp(2.75rem, 6vw, 5rem) 0 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
}

.model-journey-section .model-step h3 {
  color: #fff;
}

.model-step.is-active {
  z-index: 1;
  opacity: 1;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(7, 43, 75, .76);
  transform: translate3d(0, -4px, 0) scale(1.012);
}

.model-step:focus-visible {
  outline: 2px solid #E9731D;
  outline-offset: 4px;
}

@media (max-width: 1024px) {
  .model-step {
    min-height: 13rem;
    padding: 1.5rem;
  }

  .model-step h3 {
    font-size: clamp(1.35rem, 2.35vw, 1.8rem);
  }
}

@media (max-width: 820px) {
  .model-journey-section .model-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .model-step {
    min-height: 8.5rem;
  }

  .model-step::after {
    top: 100%;
    left: 2.25rem;
    width: 1px;
    height: 1rem;
  }

  .model-step h3 {
    margin-top: 2.25rem;
    font-size: clamp(1.6rem, 5vw, 2rem);
  }

  .model-step.is-active {
    transform: translate3d(4px, 0, 0) scale(1.006);
  }
}

@media (prefers-reduced-motion: reduce) {
  .model-journey-video {
    display: none;
  }

  .model-step {
    transition-duration: 1ms !important;
  }
}


/* ==== from assets/mega-menu.css ==== */
/* Compact full-width numbered Products mega-menu */
.navbar { --nav-menu-surface: rgba(245, 244, 239, .96); }
.navbar.scrolled { --nav-menu-surface: rgba(255, 254, 250, .96); }

@media (min-width: 1101px) {
  .nav-dropdown-menu {
    position: fixed;
    top: var(--navbar-height, 100px);
    right: 0;
    left: 0;
    z-index: 990;
    width: 100vw;
    min-width: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid rgba(11, 59, 100, .12);
    border-bottom: 1px solid rgba(11, 59, 100, .18);
    border-radius: 0;
    background: var(--nav-menu-surface);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    box-shadow: 0 14px 34px rgba(11, 59, 100, .07);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-dropdown.is-dismissed .nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
  }

  .nav-dropdown.is-dismissed .nav-dropdown-toggle svg { transform: rotate(0); }

  .mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .nav-dropdown-menu .mega-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 63px;
    padding: 10px clamp(18px, 2.2vw, 32px);
    border: 0;
    border-right: 1px solid rgba(11, 59, 100, .14);
    border-bottom: 1px solid rgba(11, 59, 100, .14);
    border-radius: 0;
    background: transparent;
    color: #0B3B64;
    text-align: left;
    white-space: normal;
    cursor: pointer;
  }

  .nav-dropdown-menu .mega-menu-item:nth-child(3n) { border-right: 0; }
  .nav-dropdown-menu .mega-menu-item:nth-child(n + 4) { border-bottom: 0; }
  .nav-dropdown-menu .mega-menu-item:hover,
  .nav-dropdown-menu .mega-menu-item:focus-visible {
    background: rgba(255, 255, 255, .22);
    color: #0B3B64;
    outline: 2px solid transparent;
  }

  .mega-menu-number {
    color: #E9731D;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .08em;
  }

  .mega-menu-title {
    position: relative;
    justify-self: start;
    color: #0B3B64;
    font-family: inherit;
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.2;
  }

  .mega-menu-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1);
  }

  .mega-menu-item:hover .mega-menu-title::after,
  .mega-menu-item:focus-visible .mega-menu-title::after { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .nav-links.open .nav-dropdown-menu {
    overflow: hidden;
    background: var(--nav-menu-surface);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
  }

  .nav-links.open .mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 4px 8px;
  }

  .nav-links.open .nav-dropdown-menu .mega-menu-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(11, 59, 100, .1);
    border-radius: 0;
    background: transparent;
    color: #0B3B64;
    text-align: left;
    white-space: normal;
    cursor: pointer;
  }

  .nav-links.open .nav-dropdown-menu .mega-menu-item:last-child { border-bottom: 0; }
  .mega-menu-number {
    color: #E9731D;
    font-size: 13px;
    letter-spacing: .06em;
  }
  .mega-menu-title {
    color: #0B3B64;
    font-size: 15px;
    line-height: 1.25;
  }
  .mega-menu-item:hover .mega-menu-title,
  .mega-menu-item:focus-visible .mega-menu-title { text-decoration: underline; text-underline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu,
  .mega-menu-title::after { transition: none !important; }
}


/* ==== from assets/unified-interactions.css ==== */
/* Shared image, heading and informational-card interaction language. */
.secondary-heading-light {
  color: #E9731D;
  font-weight: 300;
  white-space: nowrap;
}

@media (min-width: 821px) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  .page-hero-copy { max-width: 52rem; }

  .page-hero h1 {
    max-width: 17ch;
    text-wrap: balance;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .page-hero h1 {
    max-width: 16ch;
    font-size: clamp(3.5rem, 2.8rem + 1.7vw, 4.35rem);
  }
}

@media (max-width: 820px) {
  .page-hero h1 {
    max-width: 18ch;
    font-size: clamp(3rem, 7vw, 3.75rem);
    text-wrap: balance;
  }
}

@media (max-width: 600px) {
  .page-hero-copy {
    min-width: 0;
    max-width: 100%;
  }

  .page-hero h1 {
    max-width: 100%;
    font-size: clamp(2.45rem, 9.6vw, 3.05rem);
    overflow-wrap: normal;
  }

  .secondary-heading-light {
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .page-hero h1 { font-size: clamp(2.25rem, 10.5vw, 2.7rem); }
}

.hero-image,
.why-image,
.page-hero-media,
.editorial-media,
.category-card-bg,
.featured-card-image,
.product-category-image,
.generator-card-media {
  overflow: hidden;
}

.hero-image img,
.why-image img,
.page-hero-media img,
.editorial-media img,
.category-card-bg img,
.featured-card-image img,
.product-category-image img,
.generator-card-media img {
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
  transform-origin: center;
  will-change: transform;
}

.generator-card-media {
  height: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, .34);
}

.generator-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1rem;
  object-fit: contain;
}

.benefit-card,
.category-card,
.featured-card,
.testimonial-card,
.process-step,
.industry-card,
.info-card,
.product-category-card,
.equipment-list-card,
.generator-card {
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1),
              border-color 420ms ease,
              background-color 420ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .hero-image:hover img,
  .why-image:hover img,
  .page-hero-media:hover img,
  .editorial-media:hover img,
  .category-card:hover .category-card-bg img,
  .featured-card:hover .featured-card-image img,
  .product-category-card:hover .product-category-image img,
  .generator-card:hover .generator-card-media img {
    transform: scale(1.05);
  }

  .benefit-card:hover,
  .category-card:hover,
  .featured-card:hover,
  .testimonial-card:hover,
  .process-step:hover,
  .industry-card:hover,
  .info-card:hover,
  .product-category-card:hover,
  .equipment-list-card:hover,
  .generator-card:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 59, 100, .3);
    box-shadow: none !important;
  }

  .benefit-card:hover,
  .featured-card:hover,
  .testimonial-card:hover,
  .process-step:hover,
  .info-card:hover,
  .product-category-card:hover,
  .equipment-list-card:hover,
  .generator-card:hover {
    background-color: rgba(255, 255, 255, .52);
  }

  .industry-card:hover {
    border-color: rgba(255, 255, 255, .26);
    background-color: rgba(255, 255, 255, .13);
  }
}

.category-card:focus-within,
.featured-card:focus-within,
.product-category-card:focus-within,
.generator-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(11, 59, 100, .3);
  box-shadow: none !important;
}

@media (max-width: 600px) {
  .generator-card-media { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image img,
  .why-image img,
  .page-hero-media img,
  .editorial-media img,
  .category-card-bg img,
  .featured-card-image img,
  .product-category-image img,
  .generator-card-media img,
  .benefit-card,
  .category-card,
  .featured-card,
  .testimonial-card,
  .process-step,
  .industry-card,
  .info-card,
  .product-category-card,
  .equipment-list-card,
  .generator-card {
    transition: none !important;
  }

  .hero-image:hover img,
  .why-image:hover img,
  .page-hero-media:hover img,
  .editorial-media:hover img,
  .category-card:hover .category-card-bg img,
  .featured-card:hover .featured-card-image img,
  .product-category-card:hover .product-category-image img,
  .generator-card:hover .generator-card-media img,
  .benefit-card:hover,
  .category-card:hover,
  .featured-card:hover,
  .testimonial-card:hover,
  .process-step:hover,
  .industry-card:hover,
  .info-card:hover,
  .product-category-card:hover,
  .equipment-list-card:hover,
  .generator-card:hover {
    transform: none !important;
  }
}


/* ==== from assets/spacing-rhythm.css ==== */
/* Medi Rent responsive spacing rhythm and footer separation. */


/* Large editorial sections share one predictable vertical rhythm. */
.benefits,
.categories,
.why-section,
.featured,
.process,
.industries,
.page-section {
  padding-block: var(--space-section);
}

/* CTAs remain prominent without producing an oversized empty blue field. */
.cta-banner,
.secondary-cta {
  padding-block: var(--space-section-compact);
}

.section-header,
.page-heading {
  margin-bottom: var(--space-heading-content);
}

.benefits-grid,
.categories-grid,
.featured-grid,
.industries-grid,
.product-category-grid,
.equipment-list-grid,
.generator-grid {
  gap: var(--space-grid-gap);
}

.editorial-grid,
.contact-layout {
  gap: var(--space-layout-gap);
}

/* The explorer keeps its internal interaction geometry; only its outer lead-in tightens. */
.process-explorer {
  margin-top: var(--space-heading-content);
}

/* Calm section-ending actions for the homepage equipment ranges. */
.section-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 2.6vw, 3rem);
  text-align: center;
}

.section-action p {
  max-width: 58ch;
  margin: 0;
  color: #565E62;
  font-size: var(--type-body, 1rem);
  line-height: 1.62;
}

/* Short, text-only heroes are content-led instead of reserving a tall empty viewport. */
.page-hero.page-hero--text-only {
  min-height: clamp(30rem, 64svh, 37.5rem);
  padding-top: calc(var(--navbar-height) + clamp(2.5rem, 5vh, 4rem));
  padding-bottom: clamp(3rem, 5vh, 4rem);
}

/* A restrained full-width hairline distinguishes adjacent Primary Blue regions. */
.footer {
  border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (min-width: 821px) and (max-height: 820px) {
  :root {
    --space-section: clamp(3.75rem, 8vh, 4.5rem);
    --space-section-compact: clamp(3rem, 7vh, 4rem);
    --space-heading-content: clamp(2rem, 4.5vh, 2.75rem);
  }

  .page-hero.page-hero--text-only {
    min-height: clamp(27rem, 72svh, 33rem);
    padding-top: calc(var(--navbar-height) + clamp(1.75rem, 4vh, 2.75rem));
    padding-bottom: clamp(2rem, 4vh, 3rem);
  }
}

@media (max-width: 820px) {
  .benefits,
  .categories,
  .why-section,
  .featured,
  .process,
  .industries,
  .page-section,
  .cta-banner,
  .secondary-cta {
    padding-block: var(--space-section-mobile);
  }

  .section-header,
  .page-heading {
    margin-bottom: clamp(2rem, 7vw, 2.75rem);
  }

  .editorial-grid,
  .contact-layout {
    gap: clamp(2rem, 7vw, 3rem);
  }

  .process-explorer {
    margin-top: clamp(2rem, 7vw, 2.75rem);
  }

  .section-action {
    margin-top: clamp(1.5rem, 7vw, 2rem);
  }

  .page-hero.page-hero--text-only {
    min-height: clamp(26rem, 62svh, 32rem);
    padding-top: calc(var(--navbar-height) + clamp(2rem, 6vh, 3rem));
    padding-bottom: clamp(2.5rem, 6vh, 3.5rem);
  }
}

@media (max-width: 600px) {
  :root {
    --space-section-mobile: clamp(3rem, 12vw, 3.5rem);
    --space-grid-gap: clamp(1rem, 4vw, 1.5rem);
  }

  .page-hero.page-hero--text-only {
    min-height: clamp(24rem, 58svh, 29rem);
    padding-top: calc(var(--navbar-height) + clamp(1.5rem, 5vh, 2.25rem));
    padding-bottom: clamp(2rem, 5vh, 2.75rem);
  }
}


/* ==== from assets/secondary-reveals.css ==== */
/* Secondary-page progressive reveal system. Homepage motion remains unchanged. */
.secondary-motion-ready [data-page-view] .secondary-reveal {
  --secondary-reveal-x: 0px;
  --secondary-reveal-y: 16px;
  --secondary-reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(var(--secondary-reveal-x), var(--secondary-reveal-y), 0);
  transition:
    opacity 520ms cubic-bezier(.22, 1, .36, 1) var(--secondary-reveal-delay),
    transform 620ms cubic-bezier(.22, 1, .36, 1) var(--secondary-reveal-delay);
}

.secondary-motion-ready [data-page-view] .secondary-reveal--quick {
  transition-duration: 440ms, 540ms;
}

.secondary-motion-ready [data-page-view] .secondary-reveal--left {
  --secondary-reveal-x: -20px;
  --secondary-reveal-y: 0px;
}

.secondary-motion-ready [data-page-view] .secondary-reveal--right {
  --secondary-reveal-x: 20px;
  --secondary-reveal-y: 0px;
}

.secondary-motion-ready [data-page-view] .secondary-reveal--cta {
  --secondary-reveal-y: 12px;
}

.secondary-motion-ready [data-page-view] .secondary-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 600px) {
  .secondary-motion-ready [data-page-view] .secondary-reveal--left,
  .secondary-motion-ready [data-page-view] .secondary-reveal--right {
    --secondary-reveal-x: 0px;
    --secondary-reveal-y: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-motion-ready [data-page-view] .secondary-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ============================================================================
   Added for the production build - nothing below existed in the prototype.
   ============================================================================ */

/* Keyboard users need a way past the fixed header and mega-menu on every page. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  transition: top 180ms cubic-bezier(.22, 1, .36, 1);
}

.skip-link:focus { top: 16px; }

/* Images are wrapped in <picture> to serve WebP with a JPEG/PNG fallback. The wrapper
   must stay out of the box tree so the prototype's grid and flex rules still apply. */
picture { display: contents; }

/* The honeypot must be reachable by a bot and invisible to everyone else, so it is
   taken out of the layout rather than display:none - some bots skip hidden fields. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status.is-busy { color: var(--text-muted); }
.form-status.is-success { color: var(--brand-light); }
.form-status.is-error { color: var(--brand-accent); }

.contact-form button[disabled] { opacity: .6; cursor: progress; }

/* The privacy notice is long-form prose, which the prototype had no pattern for. */
.legal-prose {
  max-width: 74ch;
  margin-inline: auto;
}

.legal-prose h2 {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: .85rem;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 400;
  color: var(--brand-primary);
}

.legal-prose p,
.legal-prose li { margin-bottom: 1rem; }

.legal-prose ul {
  margin: 0 0 1rem 1.25rem;
  padding-left: .75rem;
}

.legal-prose li::marker { color: var(--brand-light); }

.legal-prose a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-meta {
  color: var(--text-muted);
  font-size: var(--type-support);
}

/* Deliberately loud: this notice must not go live with the placeholder still in it. */
.legal-todo {
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--brand-accent);
  background: rgba(233, 115, 29, .08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* The 404 page reuses the product-category card as a navigation tile. */
.product-category-card[href] { text-decoration: none; }


/* ============================================================================
   Responsive correction layer
   Measured, not guessed. Each fix names the defect it closes.
   Desktop between 1280px and 1599px is deliberately untouched - that is the
   rendering the client approved.
   ============================================================================ */

/* --- D1: one continuous type scale ------------------------------------------
   .hero h1 had its font-size set in 17 places and .section-header h2 in 10,
   across breakpoints at 1100/820/600/520/480/380/340. The result was not
   monotonic: h1 measured 40px at 850px wide but jumped UP to 48px across
   820-700px, and the section h2 jumped up again below 600px. Text got BIGGER
   as the screen got smaller.

   Rather than unpick 27 rules, the three heading tokens are restated here as
   single fluid curves and the selectors re-bound to them, later than every
   override.

   These deliberately keep the prototype's OWN slope and intercept, so the value
   at any width where the old base curve applied is unchanged to the pixel - the
   approved desktop rendering is arithmetically identical, not merely similar.
   What changes is only the two things that caused the jumps: the floors are
   lowered so they stop biting on small phones, and the piecewise overrides at
   1100/820/600/520/380/340 no longer get a say.

   (Verified by pixel-diffing the home page at 1440px against the previous
   build: an earlier attempt that re-fitted these curves moved the card titles
   by ~1px, which the diff caught.) */
:root {
  --type-hero-title: clamp(1.75rem, 1.42rem + 2.9vw, 3.75rem);
  --type-section-title: clamp(1.875rem, 1.62rem + 1.25vw, 2.75rem);
  --type-card-title: clamp(1.15rem, 1.16rem + 0.3vw, 1.5rem);
}

.hero h1 { font-size: var(--type-hero-title); }

.section-header h2,
.why-content h2,
.cta-content h2 { font-size: var(--type-section-title); }

/* The prototype shrinks the hero on short viewports - a real laptop at 1440x900
   has roughly 800px of viewport height and hits this. Restated after the rules
   above so that accommodation survives. */
@media (min-width: 961px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(2.5rem, 3.25vw, 3.25rem); }
}

/* --- D3 + D2: the 821-1024px band -------------------------------------------
   .hero-image is display:none from 1024px down, and only comes back at 820px.
   In between, .hero still carried min-height:780px, leaving ~310px of empty
   hero below the stats on any tablet taller than 820px. The prototype already
   sets min-height:auto both below 820px and on short viewports; this extends
   the same treatment to the one band that was missed.

   .categories-grid was 2 columns everywhere except 961-1024px, where a stale
   rule dropped it to 1 - so it went 2 -> 1 -> 2 as the screen narrowed. */
@media (min-width: 821px) and (max-width: 1024px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--navbar-height) + 56px);
    padding-bottom: 64px;
  }

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

/* --- D5: .contact-layout was clipped on tablets -----------------------------
   grid-template-columns: minmax(18rem,2fr) minmax(31rem,3fr) has a hard 49rem
   (784px) floor plus a gap, but only collapsed at 820px. Measured overflow of
   its container: 5px at 860px, 24px at 840px, 39px at 825px - invisible only
   because html carries overflow-x:clip, so the form was genuinely cut off.
   The floors are relaxed for that band alone; desktop is untouched because the
   fr ratios, not the minimums, decide the split there. */
@media (min-width: 821px) and (max-width: 1024px) {
  .contact-layout { grid-template-columns: minmax(15rem, 2fr) minmax(23rem, 3fr); }
}

/* --- D6: .model-grid held 5 columns down to 821px ---------------------------
   Five cards at ~176px each on a tablet, with no intermediate step. */
@media (min-width: 901px) and (max-width: 1180px) {
  .model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 821px) and (max-width: 900px) {
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Mobile hero order -------------------------------------------------------
   Requested 2026-09-03: on a phone the hero photograph sat at the very bottom,
   below the stats, and belongs between the intro copy and the buttons.

   .hero-image is a sibling of .hero-text, not of the paragraph, so `order` on
   its own can only move it above or below the whole text block - it cannot drop
   it into the middle. Dissolving .hero-text promotes h1, p, .hero-actions and
   .hero-stats to grid items of .hero-content alongside .hero-image, and then
   order can interleave them.

   Safe to dissolve: six rules in this file have .hero-text as their subject and
   between them they set only width and max-width - no display, background,
   border, padding, margin or position. It is a plain block whose children space
   themselves with their own margins, and those margins survive. Descendant
   selectors such as `.hero-text > p` keep matching, because selectors match the
   DOM, not the box tree.

   Scope is exactly the band where the image is stacked below the text: at
   821-1024px it is display:none, and at 1025px and up it sits beside the text in
   the two-column hero. Neither is touched. */
@media (max-width: 820px) {
  /* Five grid items instead of two, so .hero-content's gap - clamp(30px, 4vw,
     46px) here - would land at every seam on top of the children's own margins.
     The margins already carry the rhythm, so the row gap stands down and the
     image brings its own spacing. */
  .hero-content { row-gap: 0; }

  .hero-text { display: contents; }

  .hero-text h1 { order: 1; }
  .hero-text > p { order: 2; }
  .hero-image { order: 3; margin-block: 6px 32px; }
  .hero-actions { order: 4; }
  .hero-stats { order: 5; }

  /* .hero-text capped these at 46rem. h1 and p have their own tighter caps
     (18ch, 60ch) and are unaffected; these two had none, so without this they
     would widen to the full container between ~772px and 820px, which is the
     only band where that cap was still doing anything. */
  .hero-actions,
  .hero-stats { max-width: 46rem; }
}

/* margin-block above, not margin: .hero-image carries margin-inline: auto at
   these widths and must stay centred. */

/* --- D10: the desktop mega-menu overshot the viewport by a scrollbar ---------
   .nav-dropdown-menu is position:fixed with left:0 and right:0, which already
   spans the viewport exactly - but it also carried width:100vw, and 100vw
   includes the scrollbar. The panel therefore sat ~15px wider than the visible
   area at every desktop width, pushing its inner .container off-centre. The
   insets already do the job, so the width is simply released. */
@media (min-width: 1101px) {
  .nav-dropdown-menu { width: auto; }
}

/* --- D4: widescreen ---------------------------------------------------------
   The container stopped at 1240px and every heading token stopped growing by
   ~1530px, so a 2560px monitor showed a 1240px column with 653px of dead gutter
   each side. 1600/1920/2560 appeared nowhere in the stylesheet.

   These curves are fitted to be CONTINUOUS at 1600px - each one evaluates to
   exactly its pre-1600 value there - so there is no jump at the breakpoint,
   only growth beyond it. Body copy keeps a ch-based measure so line length
   stays readable as the container widens. */
@media (min-width: 1600px) {
  :root {
    --container-max: clamp(1240px, 493px + 46.67vw, 1520px);
    --type-hero-title: clamp(3.75rem, 3.75vw, 4.125rem);
    --type-section-title: clamp(2.75rem, 0.25rem + 2.5vw, 3rem);
  }

  .hero-text > p,
  .section-header p,
  .cta-content p { max-width: 68ch; }

  /* The ceilings above are held to 66px/48px rather than 72px/52px on purpose.
     .hero-text is bounded by its grid column (~672px), not by its own
     max-width, so type beyond ~66px pushes the hero heading onto a third line
     and breaks it as "Specialised / Medical / Equipment,". Widening the column
     instead would shrink the hero image and re-balance a composition the client
     already approved. 60px -> 66px is a visible uplift that keeps the shape. */
}