/* MEDRAL HEALTH CO — UNIFIED STOREFRONT BUNDLE (v4.0 Gen-Z Crimson) */


/* === Start: theme.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — DESIGN TOKENS (v4.0 Gen-Z Premium Wellness)
   Single source of truth for design decisions across Storefront and Admin.
   Logo palette: 70% blue foundation, 20% gold yellow accents, 10% white contrast.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM TOKENS (Primitives)
     ------------------------------------------------------------------------ */

  /* Primary Brand — Blue wordmark (logo) */
  --color-primary:         #1010B8;
  --color-primary-hover:   #08088A;
  --color-primary-light:   #E8E8FF;
  --color-primary-muted:   #7979D8;

  /* Blue links and headings */
  --color-brand-blue:       #1010B8;
  --color-brand-blue-hover: #08088A;

  /* Gold yellow strips, buttons, and badges with blue text */
  --color-highlight:        var(--color-accent);
  --color-highlight-hover:  var(--color-accent-hover);
  --color-on-highlight:     var(--color-primary);

  /* Secondary brand aliases stay in the blue family */
  --color-secondary:       #1010B8;
  --color-secondary-hover: #08088A;
  --color-secondary-light: #E8E8FF;

  /* Accent — Gold yellow logo mark */
  --color-accent:          #FFC526;
  --color-accent-hover:    #F0B400;
  --color-accent-light:    #FFF6D5;

  /* Neutral & Background Scale */
  --color-bg:              #E8E8FF; /* Light blue page background */
  --color-surface:         #FFFFFF; /* Pure White Card / Component Surface */
  --color-surface-warm:    #FFF6D5; /* Light yellow alternate surface */
  --color-border:          #C8C8F0; /* Primary Border */
  --color-border-subtle:   #DDDDF8; /* Secondary / Soft Border */

  /* Text & Typography Colors */
  --color-text-primary:    #1010B8; /* Blue headlines and primary copy */
  --color-text-secondary:  #393986; /* Subtitles, body copy */
  --color-text-muted:      #6161A0; /* Captions, hints, meta */
  --color-text-inverse:    var(--color-surface); /* Light text on dark surfaces */

  /* Feedback Colors */
  --color-success:         #2E8B57;
  --color-success-bg:      #EAF4ED;
  --color-success-border:  #B5D8C1;
  --color-success-text:    #1C5434;

  --color-warning:         #D48806;
  --color-warning-bg:      #FFFBE6;
  --color-warning-border:  #FFE58F;
  --color-warning-text:    #875604;

  --color-danger:          #D31145; /* Standalone error red — intentionally independent of --color-primary */
  --color-danger-bg:       #FDE7ED;
  --color-danger-border:   #FFA39E;
  --color-danger-text:     #A8071A;

  /* Overlay & Blur */
  --color-overlay:         rgba(7, 18, 61, 0.5);
  --overlay-blur:          4px;

  /* Gradients */
  --gradient-primary:      linear-gradient(135deg, #1010B8 0%, #08088A 100%);
  --gradient-warm:         linear-gradient(135deg, #FFF6D5 0%, #FFC526 100%);
  
  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     ------------------------------------------------------------------------ */

  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:      'Instrument Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Font Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;

  /* Complete Type Scale */
  --type-display: 3.5rem;    /* 56px */
  --type-h1:      2.5rem;    /* 40px */
  --type-h2:      2rem;      /* 32px */
  --type-h3:      1.5rem;    /* 24px */
  --type-h4:      1.25rem;   /* 20px */
  --type-body-lg: 1.125rem;  /* 18px */
  --type-body:    1rem;      /* 16px */
  --type-small:   0.875rem;  /* 14px */
  --type-caption: 0.75rem;   /* 12px */

  /* Legacy Font Size Tokens */
  --font-size-display: var(--type-display);
  --font-size-h1:      var(--type-h1);
  --font-size-h2:      var(--type-h2);
  --font-size-h3:      var(--type-h3);
  --font-size-h4:      var(--type-h4);
  --font-size-body-lg: var(--type-body-lg);
  --font-size-body:    var(--type-body);
  --font-size-small:   var(--type-small);
  --font-size-caption: var(--type-caption);

  /* Legacy Alias Scale */
  --text-xs:   var(--type-caption); 
  --text-sm:   var(--type-small);   
  --text-base: var(--type-small);   
  --text-md:   var(--type-body);    
  --text-lg:   var(--type-body-lg); 
  --text-xl:   var(--type-h4);      
  --text-2xl:  var(--type-h3);      
  --text-3xl:  var(--type-h2);      
  --text-4xl:  var(--type-h1);      
  --text-5xl:  3rem;                     
  --text-6xl:  var(--type-display); 

  /* ------------------------------------------------------------------------
     3. SPACING SCALE
     ------------------------------------------------------------------------ */

  --space-0:    0;
  --space-1:    0.25rem;  
  --space-2:    0.5rem;   
  --space-3:    0.75rem;  
  --space-4:    1rem;     
  --space-5:    1.5rem;   
  --space-6:    2rem;     
  --space-7:    2.5rem;   
  --space-8:    3rem;     
  --space-10:   4rem;     
  --space-12:   5rem;     
  --space-16:   6rem;     
  --space-20:   7.5rem;   
  --space-24:   9rem;     

  /* Semantic Layout Spacing */
  --space-card-padding:      var(--space-6);   
  --space-section-padding:   var(--space-12);  
  --space-container-padding: var(--space-8);   

  /* ------------------------------------------------------------------------
     4. BORDER RADIUS SCALE (Pill-shaped Gen-Z aesthetic where appropriate)
     ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   12px;   
  --radius-lg:   16px;   
  --radius-xl:   24px;   
  --radius-pill: 999px;  
  --radius-full: 999px;

  /* Component Specific Radii */
  --radius-card:   var(--radius-lg);   
  --radius-input:  var(--radius-md);   
  --radius-button: var(--radius-pill); 
  --radius-badge:  var(--radius-pill); 

  /* ------------------------------------------------------------------------
     5. ELEVATION & SHADOWS (Sharp & Clean)
     ------------------------------------------------------------------------ */

  --shadow-color:    rgba(11, 27, 87, 0.08);
  --shadow-color-md: rgba(11, 27, 87, 0.12);
  --shadow-color-lg: rgba(11, 27, 87, 0.18);

  --shadow-xs:     0 1px 2px var(--shadow-color);
  --shadow-sm:     0 2px 8px var(--shadow-color);
  --shadow-md:     0 4px 16px var(--shadow-color-md);
  --shadow-lg:     0 8px 24px var(--shadow-color-lg);
  --shadow-xl:     0 16px 40px var(--shadow-color-lg);
  --shadow-drawer: -6px 0 24px var(--shadow-color-lg);

  /* ------------------------------------------------------------------------
     6. MOTION & TRANSITIONS
     ------------------------------------------------------------------------ */

  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  200ms;
  --duration-motion:  250ms;
  --duration-drawer:  250ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------------
     7. Z-INDEX LAYERS
     ------------------------------------------------------------------------ */

  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-drawer:     1000;
  --z-overlay:    1100;
  --z-modal:      1200;
  --z-toast:      1300;
  --z-tooltip:    1400;

  /* ------------------------------------------------------------------------
     8. LAYOUT CONTAINERS & BREAKPOINTS
     ------------------------------------------------------------------------ */

  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1280px;
  --container-max: 1280px;

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ------------------------------------------------------------------------
     9. BACKWARD COMPATIBILITY ALIAS MAPPINGS
     Routes existing variable usages seamlessly into the v4 system.
     ------------------------------------------------------------------------ */

  /* Brand Aliases */
  --brand-primary:         var(--color-primary);
  --brand-primary-hover:   var(--color-primary-hover);
  --brand-secondary:       var(--color-secondary);
  --brand-secondary-hover: var(--color-secondary-hover);
  --brand-accent:          var(--color-accent);
  --brand-accent-hover:    var(--color-accent-hover);

  --primary-color:         var(--color-primary);
  --primary-dark-color:    var(--color-primary-hover);
  --secondary-color:       var(--color-secondary);

  /* Typography Color Aliases */
  --text-primary:    var(--color-text-primary);
  --text-secondary:  var(--color-text-secondary);
  --text-tertiary:   var(--color-text-muted);
  --text-muted:      var(--color-text-muted);
  --text-inverse:    var(--color-text-inverse);
  --text-link:       var(--color-primary);
  --text-link-hover: var(--color-primary-hover);

  /* Surface & Background Aliases */
  --surface-primary:   var(--color-bg);
  --surface-secondary: var(--color-surface);
  --surface-tertiary:  var(--color-surface-warm);
  --surface-card:      var(--color-surface);
  --surface-inverse:   var(--color-text-primary);

  /* Border Aliases */
  --border-primary:   var(--color-border);
  --border-secondary: var(--color-border-subtle);
  --border-focus:     var(--color-primary);

  /* Legacy Palette Hex Aliases */
  --black:     var(--color-text-primary);
  --white:     var(--color-surface);
  --offwhite:  var(--color-bg);
  --gray:      var(--color-text-secondary);
  --lightgray: var(--color-border);

  /* Legacy teal/blue mappings (to avoid breaking unrefactored components) */
  --teal-700: var(--color-primary);
  --teal-800: var(--color-primary-hover);
  --blue-600: var(--color-secondary);
  --neutral-0: var(--color-surface);
  --neutral-50: var(--color-bg);

  /* Feedback Aliases */
  --feedback-error:          var(--color-danger);
  --feedback-error-bg:       var(--color-danger-bg);
  --feedback-error-border:   var(--color-danger-border);
  --feedback-error-text:     var(--color-danger-text);

  --feedback-success:        var(--color-success);
  --feedback-success-bg:     var(--color-success-bg);
  --feedback-success-border:  var(--color-success-border);
  --feedback-success-text:   var(--color-success-text);

  --feedback-warning:        var(--color-warning);
  --feedback-warning-bg:     var(--color-warning-bg);
  --feedback-warning-border:  var(--color-warning-border);
  --feedback-warning-text:   var(--color-warning-text);

  /* Overlay Alias */
  --overlay-bg: var(--color-overlay);
}

/* ------------------------------------------------------------------------
   MOTION UTILITY CLASSES
   ------------------------------------------------------------------------ */
.motion-fade { transition: opacity var(--duration-normal, 200ms) var(--ease-out); }
.motion-slide-up { transition: transform var(--duration-motion, 250ms) var(--ease-spring), opacity var(--duration-normal, 200ms) var(--ease-out); }
.motion-zoom { transition: transform var(--duration-normal, 200ms) var(--ease-out); }
.motion-card-hover { transition: transform var(--duration-normal, 200ms) var(--ease-spring), box-shadow var(--duration-normal, 200ms) var(--ease-spring), border-color var(--duration-normal, 200ms) var(--ease-default); }
.motion-button-hover { transition: transform var(--duration-fast, 150ms) var(--ease-spring), background-color var(--duration-fast, 150ms) var(--ease-default), box-shadow var(--duration-fast, 150ms) var(--ease-default); }

/* ------------------------------------------------------------------------
   ADMIN THEME OVERRIDES ([data-theme="admin"])
   Light cool shell — keep text dark for readable tables/forms.
   ------------------------------------------------------------------------ */
[data-theme="admin"] {
  --brand-primary:       var(--color-primary);
  --brand-primary-hover: var(--color-primary-hover);
  --brand-secondary:     var(--color-secondary);

  --text-primary:   #1010B8;
  --text-secondary: #393986;
  --text-tertiary:  #6161A0;
  --text-inverse:   #FFFFFF;

  --surface-primary:   #E8E8FF;
  --surface-secondary: #FFFFFF;
  --surface-tertiary:  #FFC526;
  --surface-elevated:  #FFFFFF;
  --surface-card:      #FFFFFF;

  --border-primary:   #C8C8F0;
  --border-secondary: #DDDDF8;
}
/* === End: theme.css === */

/* === Start: reset.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BASE RESET & ACCESSIBILITY STYLES
   Extracts normalize & element resets from medral-base.css (L1-36).
   ========================================================================== */

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-primary, var(--color-text-primary));
  background: var(--surface-primary, var(--color-surface));
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  /* `clip` stops sideways scroll like `hidden` but, unlike it, doesn't turn
     html/body into scroll containers — which silently broke the sticky header.
     `hidden` stays as the fallback for browsers without `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.6;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  display: block;
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Accessibility Focus Ring & Skip Link Styles */
:focus-visible {
  outline: 3px solid var(--brand-primary, #0B1B57) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm, 2px);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--brand-primary, #0B1B57) !important;
  outline-offset: 2px !important;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* === End: reset.css === */

/* === Start: medral-base.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BASE STOREFRONT STYLESHEET (medral-base.css)
   Phase 4 Homepage Experience: Editorial, Minimal, Healthcare Premium,
   Generous Whitespace, Cool Off-White Surface (var(--color-bg)), Brand Navy (var(--color-primary)),
   Outfit Headings, Inter Body, and Photography-First Visual Cards.
   ========================================================================== */

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--black);
  background: var(--offwhite);
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

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

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

button {
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
}

/* Accessibility Focus Ring & Skip Link Styles */
:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px !important;
}

/* Skip link — visible on keyboard focus only */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--color-primary, #4e3686);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  outline-offset: 2px;
}

/* Keep hero CTA look when markup uses <button class="hs-cta"> */
button.hs-cta {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
}

/* Error state styling for invalid inputs */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15) !important;
}

/* --------------------------------------------------------------------------
   HOMEPAGE SECTION HEADINGS & EYEBROWS
   -------------------------------------------------------------------------- */
.section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-eyebrow:before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 999px;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 48px;
}

.section-title--white {
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   HOMEPAGE SERVICES / CATEGORIES SECTION
   -------------------------------------------------------------------------- */
.services {
  padding: 80px 48px;
  background: var(--offwhite);
}

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

.services__item {
  padding: 36px 30px;
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(31, 41, 55, 0.03));
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.services__item:hover {
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.services__num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 44px;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 18px;
  opacity: 0.9;
}

.services__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--black);
  margin-bottom: 12px;
}

.services__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  flex: 1;
}

.services__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-color);
  margin-top: 20px;
  transition: gap 200ms;
}

.services__item:hover .services__link {
  gap: 10px;
}

/* --------------------------------------------------------------------------
   HOMEPAGE FEATURED PRODUCTS / CATALOG SECTION
   -------------------------------------------------------------------------- */
.products {
  padding: 80px 48px;
  background: var(--white);
}

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

.product-card {
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

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

.product-card__img {
  width: 100%;
  aspect-ratio: 1.1;
  object-fit: cover;
  padding: 16px;
  display: block;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  transition: transform 300ms;
}

.product-card:hover .product-card__img {
  transform: scale(1.03);
}

.product-card__info {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--lightgray);
  background: var(--white);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__cat {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 6px;
}

.product-card__name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--black);
  transition: color 200ms;
  margin-bottom: 8px;
}

.product-card:hover .product-card__name {
  color: var(--primary-color);
}

.product-card__enq {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--primary-color);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card__enq {
  transform: translateY(0);
}

.products__more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
}

.btn--catalogue {
  background: var(--color-primary);
  border: none;
  color: var(--color-text-inverse);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 36px;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-sm);
  transition: all 200ms var(--ease-spring);
}

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

/* --------------------------------------------------------------------------
   HOMEPAGE TRUST & CERTIFICATIONS SECTION
   -------------------------------------------------------------------------- */
.certifications {
  padding: 80px 48px;
  background: var(--offwhite);
}

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

.cert-card {
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  padding: 36px 30px;
  box-shadow: var(--shadow-xs);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.cert-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.cert-card__badge {
  width: 52px;
  height: 52px;
  background: var(--offwhite);
  border-radius: var(--radius-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cert-card__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--black);
}

.cert-card__body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   HOMEPAGE STATS SECTION
   -------------------------------------------------------------------------- */
.stats {
  padding: 64px 48px;
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stats__item {
  background: var(--offwhite);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.stats__num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 8px;
}

.stats__label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
}

/* --------------------------------------------------------------------------
   HOMEPAGE CONTACT & NEWSLETTER CTA SECTION
   -------------------------------------------------------------------------- */
.cta-contact {
  background: var(--white);
  border-top: 1px solid var(--lightgray);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

/* Markup has a divider node between columns; hide it so it cannot break the 2-col grid */
.cta-contact__divider {
  display: none;
}

.cta-contact__left {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cta-contact__right {
  padding: 80px 64px;
  background: var(--offwhite);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-left: 1px solid var(--lightgray, var(--color-border, #e1e3e6));
}

.cta-contact__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 18px;
}

.cta-contact__title em {
  color: var(--primary-color);
  font-style: normal;
}

.cta-contact__body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 32px;
  max-width: 440px;
  line-height: 1.6;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--black);
  margin-bottom: 12px;
  font-weight: 500;
}

.contact-detail a {
  color: inherit;
  text-decoration: none;
}

.contact-detail a:hover {
  text-decoration: underline;
}

.contact-detail__arrow {
  color: var(--primary-color);
  font-size: 18px;
}

.form-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 6px;
  display: block;
  margin-top: 16px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1.5px solid var(--lightgray);
  border-radius: var(--radius-input);
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: all 200ms;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(15, 36, 91, 0.12);
}

.form-select {
  appearance: none;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-submit {
  width: 100%;
  background: var(--primary-color);
  color: var(--white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px;
  border: none;
  border-radius: var(--radius-button);
  margin-top: 28px;
  transition: all 200ms;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

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

.form-error {
  margin: 6px 0 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--color-danger-text, #a8071a);
}

.form-banner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.45;
}

.form-banner--error {
  background: var(--color-danger-bg, #fde7ed);
  color: var(--color-danger-text, #a8071a);
  border: 1px solid var(--color-danger-border, #ffa39e);
}

.form-success-panel {
  padding: 28px 8px;
  text-align: center;
}

.form-success-panel__title {
  margin: 0 0 8px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.25rem;
  color: var(--color-text-primary, #1f1f1f);
}

.form-success-panel__text {
  margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: var(--color-text-secondary, #5c5c5c);
}

.form-submit__spinner {
  margin-left: 6px;
}

.form-submit:disabled {
  opacity: 0.75;
  cursor: wait;
  transform: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVE LAYOUT ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .services__grid,
  .products__grid,
  .certifications__grid,
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-contact__left,
  .cta-contact__right {
    padding: 64px 40px;
  }
}

@media (max-width: 768px) {
  .cta-contact {
    grid-template-columns: 1fr;
  }

  .cta-contact__right {
    border-left: none;
    border-top: 1px solid var(--lightgray, var(--color-border, #e1e3e6));
  }

  .cta-contact__left,
  .cta-contact__right {
    padding: 56px 28px;
  }

  .cta-contact__title {
    font-size: clamp(26px, 7vw, 32px);
  }
}

@media (max-width: 640px) {
  .services,
  .products,
  .certifications,
  .stats {
    padding: 48px 20px;
  }

  .services__grid,
  .products__grid,
  .certifications__grid,
  .stats,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 32px;
  }
}


/* ==========================================================================
   HOMEPAGE WHY & PROCESS SECTION COMPONENT STYLES
   ========================================================================== */

/* ── WHY SECTION ── */
.why {
  padding: 80px 48px;
  background: var(--color-bg, #F9F9FB);
  border-top: 1px solid var(--color-border, #E1E3E6);
}

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

.why-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-card, 16px);
  padding: 32px 28px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(31, 41, 55, 0.03));
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(31, 31, 31, 0.06));
  border-color: var(--color-primary, #0B1B57);
}

.why-card__num {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 36px;
  color: var(--color-primary, #0B1B57);
  line-height: 1;
  margin-bottom: 16px;
}

.why-card__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-text-primary, #1F1F1F);
  margin-bottom: 10px;
}

.why-card__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--color-text-secondary, #5C5C5C);
  line-height: 1.6;
}

/* ── PROCESS SECTION ── */
.process {
  padding: 80px 48px;
  background: var(--color-secondary, #2D2D2D);
  color: var(--color-surface, #FFFFFF);
}

.process .section-title {
  color: var(--color-surface, #FFFFFF);
}

.process__row {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

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

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

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

.process__item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md, 12px);
  padding: 28px 20px;
  transition: all 250ms ease;
}

.process__item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-primary, #0B1B57);
  transform: translateY(-2px);
}

.process__num {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-primary, #0B1B57);
  line-height: 1;
  margin-bottom: 12px;
}

.process__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.process__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process__row--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why, .process {
    padding: 48px 20px;
  }
  .why__grid, .process__row--6, .process__row--4, .process__row--3 {
    grid-template-columns: 1fr;
  }
}
/* === End: medral-base.css === */

/* === Start: extracted-styles.css === */
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
/* RTE styles */
.rte h1,.rte h2,.rte h3,.rte h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.rte h1 { font-size: 32px; }
.rte h2 { font-size: 26px; }
.rte h3 { font-size: 20px; }
.rte h4 { font-size: 16px; }
.rte p { margin-bottom: 18px; }
.rte ul,.rte ol { padding-left: 20px; margin-bottom: 18px; }
.rte li { margin-bottom: 8px; line-height: 1.7; }
.rte ul li::marker { color: var(--color-primary); }
.rte ol li::marker { color: var(--color-primary); font-weight: 700; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte a:hover { color: #07123D; }
.rte strong { color: var(--color-text-primary); font-weight: 700; }
.rte blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 16px 24px;
  background: #f4f4f4;
  margin: 28px 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.rte img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border: 1px solid var(--color-border);
}
.rte hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 36px 0;
}
.rte table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: 13px; }
.rte th { background: var(--color-text-primary); color: var(--color-surface); font-family: var(--font-heading); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; padding: 10px 14px; text-align: left; }
.rte td { border-bottom: 1px solid var(--color-border); padding: 10px 14px; color: var(--color-text-secondary); }
.rte tr:hover td { background: #f4f4f4; }
    

/* Extracted from index.ejs */

          #section-template--20946532663474__hero_slider_JAVAdh {
            background: var(--color-bg);
          }

          /* ── SLIDER TRACK ── */
          .hs-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
          }

          /* ── SINGLE SLIDE ── */
          .hs-slide {
            flex-shrink: 0;
            width: 100%;
            min-height: 580px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            padding: 72px 72px;
            gap: 48px;
            box-sizing: border-box;
          }

          /* ── CONTROLS ── */
          .hs-dots {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
          }
          .hs-dot {
            width: 28px;
            height: 3px;
            background: var(--color-border);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: all 0.25s;
          }
          .hs-dot.is-active {
            background: var(--color-primary);
            width: 48px;
          }

          /* ── RESPONSIVE ── */
          @media (max-width: 960px) {
            .hs-slide {
              grid-template-columns: 1fr;
              padding: 48px 32px;
              min-height: auto;
              gap: 40px;
            }
          }
          @media (max-width: 600px) {
            .hs-slide {
              padding: 36px 20px;
            }
          }
          /* ensure content sits above canvas */
          .hs-track {
            position: relative;
            z-index: 1;
          }
        

/* Extracted from index.ejs */

                  div[id*="instafeed_app_block"] {
                    width: 100%;
                  }
                  div:has(> [id*="instafeed_app_block"]) {
                    width: 100%;
                  }
        

/* Extracted from index.ejs */

          #section-template--20946532663474__manufacturing_moq_VPMQKz {
            --moq-accent: var(--color-primary);
            --moq-accent-tint: rgba(200, 16, 46, 0.08);
            --moq-bg: var(--color-surface);
          }

          /* Mobile: 2 columns, no blank gap */
          @media (max-width: 768px) {
          }

          /* Keep 2-col grid on ALL screen sizes including mobile */
          .form-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
          }

          /* On very small screens (below 360px) drop to 1 col */
          @media (max-width: 360px) {
            .form-grid-2 {
              grid-template-columns: 1fr;
            }
          }
/* Badge with pulse dot */
@keyframes ab-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,0.5)}
  50%{box-shadow:0 0 0 8px rgba(200,16,46,0)}
}

/* ── RESPONSIVE ── */
@media(max-width:600px){
}

/* ── PANELS (right content) ── */
.faq-panels { max-width: 900px; margin: 0 auto; padding: 40px 56px 64px; }
.faq-panel { display: none; opacity: 0; }
.faq-panel--active {
  display: block;
  animation: faqPanelIn 0.28s ease forwards;
}
@keyframes faqPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── TOPIC NAV + GROUPS ── */
.faq-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.faq-topics__link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.faq-topics__link:hover,
.faq-topics__link:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.faq-group { scroll-margin-top: 120px; }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}

/* ── FAQ ITEM (accordion) ── */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.faq-item.is-open { border-color: var(--color-primary); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.faq-item__q:hover { background: var(--color-bg); }
.faq-item.is-open .faq-item__q { background: #fff8f8; }

/* Arrow icon */
.faq-item__arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #f4f4f4;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: all 0.2s;
}
.faq-item__arrow svg { transition: transform 0.25s ease; }
.faq-item.is-open .faq-item__arrow {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}
.faq-item.is-open .faq-item__arrow svg { transform: rotate(90deg); }

.faq-item__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  flex: 1;
  line-height: 1.3;
  transition: color 0.15s;
}
.faq-item.is-open .faq-item__text { color: var(--color-primary); }

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: all 0.2s;
  border-radius: 4px;
}
.faq-item.is-open .faq-item__icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
  transform: rotate(45deg);
}

/* Answer */
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.3s ease;
  display: block !important;
}
.faq-item__a[hidden] {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
.faq-item.is-open .faq-item__a {
  max-height: 2000px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.faq-item__a-inner {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  padding: 16px 24px 24px 66px;
  border-top: 1px solid #f5f5f5;
}
.faq-item__a-inner a { color: var(--color-primary); }
.faq-item__a-inner strong { color: var(--color-text-primary); }
.faq-item__a-inner ul { padding-left: 18px; margin: 8px 0; }
.faq-item__a-inner li { margin-bottom: 4px; }
.faq-item__a-inner li::marker { color: var(--color-primary); }

/* ── CTA ── */
.faq-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #07123D 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-cta::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -150px; right: -80px;
  pointer-events: none;
}
.faq-cta__inner { position: relative; z-index: 1; }
.faq-cta__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.faq-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.faq-eyebrow--white { color: rgba(255,255,255,0.5); }
.faq-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.faq-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: 'FAQ';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 240px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
}
.faq-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.faq-hero .faq-eyebrow { color: var(--color-accent); }
.faq-hero .faq-eyebrow::before { background: var(--color-accent); }
.faq-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 14px;
}
.faq-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 500px;
  margin: 0;
}

/* ── BODY LAYOUT ── */
.faq-body {
  display: block;
  min-height: 500px;
  background: #f4f4f4;
}

/* ── TABS (left sidebar) ── */
.faq-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 24px;
}
.faq-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  flex: 1;
  line-height: 1.3;
  transition: color 0.15s;
}
.faq-item.is-open .faq-item__text { color: var(--color-primary); }

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  transition: all 0.2s;
  border-radius: 4px;
}
.faq-item.is-open .faq-item__icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
  transform: rotate(45deg);
}

/* Answer */
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.3s ease;
  display: block !important;
}
.faq-item__a[hidden] {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
.faq-item.is-open .faq-item__a {
  max-height: 2000px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.faq-item__a-inner {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.8;
  padding: 16px 24px 24px 66px;
  border-top: 1px solid #f5f5f5;
}
.faq-item__a-inner a { color: var(--color-primary); }
.faq-item__a-inner strong { color: var(--color-text-primary); }
.faq-item__a-inner ul { padding-left: 18px; margin: 8px 0; }
.faq-item__a-inner li { margin-bottom: 4px; }
.faq-item__a-inner li::marker { color: var(--color-primary); }

/* ── CTA ── */
.faq-cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #07123D 100%);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-cta::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -150px; right: -80px;
  pointer-events: none;
}
.faq-cta__inner { position: relative; z-index: 1; }
.faq-cta__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 38px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color: var(--color-surface);
  line-height: 1.1;
  margin-bottom: 12px;
}
.faq-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.faq-eyebrow--white { color: rgba(255,255,255,0.5); }
.faq-eyebrow--white::before { background: rgba(255,255,255,0.3); }

/* ── HERO ── */
.faq-hero {
  background: var(--color-text-primary);
  padding: 72px 56px 64px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: 'FAQ';
  position: absolute;
  font-family: var(--font-heading);
  font-size: 240px;
  font-weight: 700;
  color: rgba(255,255,255,0.025);
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  letter-spacing: -8px;
  pointer-events: none;
}
.faq-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.faq-hero .faq-eyebrow { color: var(--color-accent); }
.faq-hero .faq-eyebrow::before { background: var(--color-accent); }
.faq-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  letter-spacing: -1.5px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 14px;
}
.faq-hero__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.8;
  max-width: 500px;
  margin: 0;
}

/* ── BODY LAYOUT ── */
.faq-body {
  display: block;
  min-height: 500px;
  background: #f4f4f4;
}

/* ── TABS (left sidebar) ── */
.faq-cta__sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 24px;
}
.faq-cta__btn {
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 32px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.faq-cta__btn:hover { background: var(--color-text-primary); color: var(--color-surface); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .faq-hero { padding: 56px 28px 48px; }
  .faq-hero__title { font-size: 40px; }
  .faq-body { grid-template-columns: 1fr; }
  .faq-panels { padding: 28px 28px 48px; }
}
@media (max-width: 600px) {
  .faq-hero { padding: 40px 20px 36px; }
  .faq-hero__title { font-size: 32px; }
  .faq-panels { padding: 20px 16px 40px; }
  .faq-item__q { padding: 16px 16px; gap: 12px; }
  .faq-item__text { font-size: 13px; }
  .faq-item__a-inner { padding: 0 16px 20px 16px; padding-top: 14px; }
  .faq-cta { padding: 56px 20px; }
  .faq-cta__heading { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__a,
  .faq-panel--active {
    transition: none !important;
    animation: none !important;
  }
}

/* ── HERO ── */
.pol-hero {
  background: var(--color-text-primary);
  padding: 64px 56px 56px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pol-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(200,16,46,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.pol-hero__inner { position: relative; z-index: 1; }
.pol-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pol-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-accent);
}
.pol-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 16px;
}
.pol-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pol-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.pol-hero__meta svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.pol-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.pol-hero__breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; }
.pol-hero__breadcrumb a:hover { color: var(--color-surface); }

/* ── LAYOUT ── */
.pol-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: start;
  background: var(--color-surface);
}

/* ── TOC SIDEBAR ── */
.pol-toc {
  padding: 48px 0 48px 0;
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 64px;
  background: var(--color-surface);
}
.pol-toc__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  padding: 0 24px;
  margin-bottom: 16px;
}
.pol-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  line-height: 1.4;
}
.pol-toc__link:hover { color: var(--color-text-primary); background: var(--color-bg); border-left-color: var(--color-border-subtle); }
.pol-toc__link.is-active { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--color-primary-light); }
.pol-toc__num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-primary);
  flex-shrink: 0;
  min-width: 16px;
}
.pol-toc__contact {
  margin-top: 32px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}
.pol-toc__contact-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.pol-toc__contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.pol-toc__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }

/* ── ARTICLE ── */
.pol-article {
  padding: 56px 64px 72px;
  max-width: 820px;
}

/* ── POLICY SECTION ── */
.pol-section {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #f0f0f0;
  scroll-margin-top: 80px;
}
.pol-section:last-of-type { border-bottom: none; }
.pol-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pol-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pol-section__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.85;
}
/* RTE content */
.pol-section__body p { margin-bottom: 14px; }
.pol-section__body ul,
.pol-section__body ol { padding-left: 20px; margin-bottom: 14px; }
.pol-section__body li { margin-bottom: 6px; line-height: 1.7; }
.pol-section__body ul li::marker { color: var(--color-primary); }
.pol-section__body ol li::marker { color: var(--color-primary); font-weight: 700; }
.pol-section__body strong { color: var(--color-text-primary); font-weight: 700; }
.pol-section__body a { color: var(--color-primary); text-decoration: underline; }
.pol-section__body a:hover { color: #07123D; }
.pol-section__body h3,.pol-section__body h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}

/* Contact box */
.pol-contact-box {
  background: #f4f4f4;
  border: 1px solid var(--color-border);
  padding: 32px;
  margin-top: 48px;
}
.pol-contact-box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.pol-contact-box__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.pol-contact-box__items { display: flex; flex-direction: column; gap: 10px; }
.pol-contact-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pol-contact-box__item svg { stroke: var(--color-primary); flex-shrink: 0; }
.pol-contact-box__item a { color: var(--color-primary); text-decoration: none; }
.pol-contact-box__item a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .pol-hero { padding: 48px 28px 40px; }
  .pol-hero__title { font-size: 36px; }
  .pol-layout { grid-template-columns: 1fr; }
  .pol-toc {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
  }
  .pol-toc__title { width: 100%; padding: 0 20px; margin-bottom: 8px; }
  .pol-toc__link { padding: 8px 16px; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
  .pol-toc__link:hover { border-bottom-color: var(--color-border-subtle); border-left-color: transparent; }
  .pol-toc__link.is-active { border-bottom-color: var(--color-primary); border-left-color: transparent; }
  .pol-toc__contact { display: none; }
  .pol-article { padding: 36px 28px 56px; }
}
@media (max-width: 600px) {
  .pol-hero { padding: 36px 20px 32px; }
  .pol-hero__title { font-size: 28px; }
  .pol-article { padding: 24px 16px 40px; }
  .pol-contact-box { padding: 20px; }
}

/* ── HERO ── */
.pol-hero {
  background: var(--color-text-primary);
  padding: 64px 56px 56px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pol-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(200,16,46,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.pol-hero__inner { position: relative; z-index: 1; }
.pol-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pol-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-accent);
}
.pol-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: var(--color-surface);
  line-height: 1.05;
  margin-bottom: 16px;
}
.pol-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pol-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.pol-hero__meta svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.pol-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.pol-hero__breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; }
.pol-hero__breadcrumb a:hover { color: var(--color-surface); }

/* ── LAYOUT ── */
.pol-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: start;
  background: var(--color-surface);
}

/* ── TOC SIDEBAR ── */
.pol-toc {
  padding: 48px 0 48px 0;
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 64px;
  background: var(--color-surface);
}
.pol-toc__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  padding: 0 24px;
  margin-bottom: 16px;
}
.pol-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 24px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s;
  line-height: 1.4;
}
.pol-toc__link:hover { color: var(--color-text-primary); background: var(--color-bg); border-left-color: var(--color-border-subtle); }
.pol-toc__link.is-active { color: var(--color-primary); border-left-color: var(--color-primary); background: var(--color-primary-light); }
.pol-toc__num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-primary);
  flex-shrink: 0;
  min-width: 16px;
}
.pol-toc__contact {
  margin-top: 32px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}
.pol-toc__contact-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.pol-toc__contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}
.pol-toc__contact-link svg { stroke: var(--color-primary); flex-shrink: 0; }

/* ── ARTICLE ── */
.pol-article {
  padding: 56px 64px 72px;
  max-width: 820px;
}

/* ── POLICY SECTION ── */
.pol-section {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #f0f0f0;
  scroll-margin-top: 80px;
}
.pol-section:last-of-type { border-bottom: none; }
.pol-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pol-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.pol-section__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.85;
}
/* RTE content */
.pol-section__body p { margin-bottom: 14px; }
.pol-section__body ul,
.pol-section__body ol { padding-left: 20px; margin-bottom: 14px; }
.pol-section__body li { margin-bottom: 6px; line-height: 1.7; }
.pol-section__body ul li::marker { color: var(--color-primary); }
.pol-section__body ol li::marker { color: var(--color-primary); font-weight: 700; }
.pol-section__body strong { color: var(--color-text-primary); font-weight: 700; }
.pol-section__body a { color: var(--color-primary); text-decoration: underline; }
.pol-section__body a:hover { color: #07123D; }
.pol-section__body h3,.pol-section__body h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}

/* Contact box */
.pol-contact-box {
  background: #f4f4f4;
  border: 1px solid var(--color-border);
  padding: 32px;
  margin-top: 48px;
}
.pol-contact-box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.pol-contact-box__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.pol-contact-box__items { display: flex; flex-direction: column; gap: 10px; }
.pol-contact-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pol-contact-box__item svg { stroke: var(--color-primary); flex-shrink: 0; }
.pol-contact-box__item a { color: var(--color-primary); text-decoration: none; }
.pol-contact-box__item a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .pol-hero { padding: 48px 28px 40px; }
  .pol-hero__title { font-size: 36px; }
  .pol-layout { grid-template-columns: 1fr; }
  .pol-toc {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 24px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
  }
  .pol-toc__title { width: 100%; padding: 0 20px; margin-bottom: 8px; }
  .pol-toc__link { padding: 8px 16px; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
  .pol-toc__link:hover { border-bottom-color: var(--color-border-subtle); border-left-color: transparent; }
  .pol-toc__link.is-active { border-bottom-color: var(--color-primary); border-left-color: transparent; }
  .pol-toc__contact { display: none; }
  .pol-article { padding: 36px 28px 56px; }
}
@media (max-width: 600px) {
  .pol-hero { padding: 36px 20px 32px; }
  .pol-hero__title { font-size: 28px; }
  .pol-article { padding: 24px 16px 40px; }
  .pol-contact-box { padding: 20px; }
}

/* OVERLAY */
.em-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s;
  backdrop-filter: blur(2px);
}
.em-overlay.is-open { display: block; opacity: 1; }

/* MODAL */
.em-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.em-modal.is-open {
  display: flex;
  pointer-events: all;
}
.em-modal__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  background: var(--color-surface);
  max-width: 840px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: em-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes em-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* CLOSE */
.em-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.em-close:hover { background: var(--color-primary); }

/* LEFT — Form */
.em-left {
  padding: 40px 36px 40px 40px;
  border-right: 1px solid var(--color-border);
}
.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.em-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.em-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.em-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.em-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-success-text);
  margin-bottom: 16px;
}
.em-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-primary-muted);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.em-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.em-field:last-child { margin-bottom: 0; }
.em-field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.em-field input,
.em-field select,
.em-field textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.em-field input:focus,
.em-field select:focus,
.em-field textarea:focus { border-color: var(--color-primary); }
.em-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.em-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
}
.em-submit:hover { background: var(--color-primary-hover); }
.em-submit:disabled { background: var(--color-border); cursor: not-allowed; }
@keyframes em-spin { to { transform: rotate(360deg); } }

/* RIGHT — Contact info */
.em-right {
  padding: 40px 24px 40px 28px;
  background: var(--color-text-primary);
  display: flex;
  flex-direction: column;
}
.em-right__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255);
  margin-bottom: 12px;
}
.em-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
.em-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.em-phone:hover { color: var(--color-surface); }
.em-phone svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.em-email {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.15s;
  word-break: break-all;
}
.em-email:hover { color: var(--color-surface); }
.em-email svg { stroke: rgba(255,255,255,0.7); flex-shrink: 0; }
.em-right__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}
.em-hours {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-surface);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.em-hours-note {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .em-modal__inner { grid-template-columns: 1fr; }
  .em-right { display: none; }
  .em-left { padding: 36px 24px; }
}
@media (max-width: 480px) {
  .em-grid { grid-template-columns: 1fr; }
  .em-left { padding: 28px 16px; }
  .em-heading { font-size: 22px; }
}

/* ── SHELL ── */
.nf-footer { background:var(--color-text-primary); color:rgba(255,255,255,0.35); font-family: var(--font-body); }

/* ── TOP BAND ── */
.nf-top { display:flex; align-items:center; justify-content:space-between; padding:40px 56px 32px; flex-wrap:wrap; gap:20px; }
.nf-brand { display:flex; flex-direction:column; gap:8px; }
.nf-logo { display:inline-block; }
.nf-tagline { font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.76); margin:0; }

/* ── SOCIAL ── */
.nf-social { display:flex; align-items:center; gap:8px; }
.nf-social__link { width:38px; height:38px; border:1px solid #2a2a2a; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); transition:all 0.2s; flex-shrink:0; }
.nf-social__link svg { width:16px; height:16px; }
.nf-social__link:hover { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-surface); }

/* ── DIVIDER ── */
.nf-divider { height:1px; background:var(--color-border); margin:0 56px; }

/* ── MAIN GRID ── */
.nf-grid { display:grid; grid-template-columns:1.6fr 1.2fr 1fr 1fr; gap:0; padding:40px 56px; }
.nf-col { padding-right:32px; border-right:1px solid var(--color-border); padding-left:24px; }
.nf-col:first-child { padding-left:0; }
.nf-col:last-child { border-right:none; }
.nf-col__label { font-family: var(--font-heading); font-weight:600; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,1); margin-bottom:20px; }

/* ── OFFICES ── */
.nf-office { margin-bottom:20px; }
.nf-office__name { font-family: var(--font-heading); font-weight:600; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:5px; }
.nf-office__addr { font-size:12px; color:rgba(255,255,255,0.61); line-height:1.75; }

/* ── CONTACT ── */
.nf-contact-group { margin-bottom:20px; }
.nf-contact-group__title { font-family: var(--font-heading); font-weight:600; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:7px; }
/* Phones — 2-col grid always */
.nf-phones-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
.nf-contact-group__item { display:block; font-size:12px; color:rgba(255,255,255,0.61); text-decoration:none; margin-bottom:4px; transition:color 0.15s; white-space:nowrap; }
.nf-contact-group__item:hover { color:var(--color-primary); }
/* Emails — always 1-col, truncate overflow */
.nf-email-item { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* ── NAV LINKS ── */
.nf-nav-link { display:block; font-size:12px; color:rgba(255,255,255,0.3); text-decoration:none; margin-bottom:10px; transition:color 0.15s; letter-spacing:0.02em; }
.nf-nav-link:hover { color:var(--color-surface); }

/* ── BOTTOM BAR ── */
.nf-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px 56px 32px; flex-wrap:wrap; gap:12px; }
.nf-copyright { font-size:11px; color:rgba(255,255,255,0.2); letter-spacing:0.04em; }
.nf-policy-links { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.nf-policy-link { font-size:11px; color:rgba(255,255,255,0.2); text-decoration:none; letter-spacing:0.04em; transition:color 0.15s; position:relative; }
.nf-policy-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--color-primary); transition:width 0.2s; }
.nf-policy-link:hover { color:var(--color-surface); }
.nf-policy-link:hover::after { width:100%; }

/* ── RESPONSIVE — tablet ── */
@media (max-width: 960px) {
  .nf-top     { padding:24px 20px 18px; }
  .nf-divider { margin:0 20px; }
  .nf-grid    { grid-template-columns:1fr 1fr; padding:24px 20px; gap:20px 16px; }
  .nf-col     { border-right:none; padding-left:0; padding-right:0; border-bottom:1px solid var(--color-border); padding-bottom:18px; }
  .nf-col:nth-child(odd)  { border-right:1px solid var(--color-border); padding-right:16px; }
  .nf-col:nth-last-child(-n+2) { border-bottom:none; }
  .nf-office  { margin-bottom:12px; }
  .nf-office__addr { font-size:11px; line-height:1.55; }
  .nf-office__name { font-size:11px; }
  .nf-contact-group { margin-bottom:14px; }
  .nf-contact-group__item { font-size:11px; }
  .nf-nav-link { font-size:11px; margin-bottom:7px; }
  .nf-col__label { margin-bottom:12px; }
  .nf-bottom  { padding:12px 20px 20px; flex-direction:column; align-items:flex-start; gap:8px; }
  .nf-policy-links { gap:14px; flex-wrap:wrap; }
  .nf-copyright, .nf-policy-link { font-size:10px; }
}

/* ── RESPONSIVE — mobile ── */
@media (max-width: 600px) {
  .nf-top { padding:20px 16px 16px; flex-direction:column; align-items:flex-start; gap:14px; }
  .nf-social { gap:6px; }
  .nf-social__link { width:32px; height:32px; }
  .nf-social__link svg { width:14px; height:14px; }
  .nf-divider { margin:0 16px; }
  /* Stay 2-col grid — prevents excessive height */
  .nf-grid { grid-template-columns:1fr 1fr; padding:18px 16px; gap:16px 12px; }
  .nf-col:nth-child(odd) { padding-right:12px; }
  /* Phones stay 2-col */
  .nf-phones-grid { grid-template-columns:1fr 1fr; }
  /* Emails: truncate tightly */
  .nf-email-item { max-width:140px; font-size:10px; }
  /* Row 2: catalogue full width */
  .nf-bottom { padding:10px 16px 18px; }
}

/* OVERLAY */
.em-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s;
  backdrop-filter: blur(2px);
}
.em-overlay.is-open { display: block; opacity: 1; }

/* MODAL */
.em-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.em-modal.is-open {
  display: flex;
  pointer-events: all;
}
.em-modal__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  background: var(--color-surface);
  max-width: 840px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  animation: em-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes em-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* CLOSE */
.em-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: var(--color-text-primary);
  border: none;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.em-close:hover { background: var(--color-primary); }

/* LEFT — Form */
.em-left {
  padding: 40px 36px 40px 40px;
  border-right: 1px solid var(--color-border);
}
.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.em-eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-primary);
}
.em-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.em-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 22px;
}
.em-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-success-text);
  margin-bottom: 16px;
}
.em-error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-primary-muted);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.em-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.em-field:last-child { margin-bottom: 0; }
.em-field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.em-field input,
.em-field select,
.em-field textarea {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.em-field input:focus,
.em-field select:focus,
.em-field textarea:focus { border-color: var(--color-primary); }
.em-field textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.em-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s;
}
.em-submit:hover { background: var(--color-primary-hover); }
.em-submit:disabled { background: var(--color-border); cursor: not-allowed; }
@keyframes em-spin { to { transform: rotate(360deg); } }

/* RIGHT — Contact info */
.em-right {
  padding: 40px 24px 40px 28px;
  background: var(--color-text-primary);
  display: flex;
  flex-direction: column;
}
.em-right__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255);
  margin-bottom: 12px;
}
.em-phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
.em-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.em-phone:hover { color: var(--color-surface); }
.em-phone svg { stroke: rgba(255,255,255,0.3); flex-shrink: 0; }
.em-email {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.15s;
  word-break: break-all;
}
.em-email:hover { color: var(--color-surface); }
.em-email svg { stroke: rgba(255,255,255,0.7); flex-shrink: 0; }
.em-right__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}
.em-hours {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-surface);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.em-hours-note {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .em-modal__inner { grid-template-columns: 1fr; }
  .em-right { display: none; } /* hide contact panel on mobile */
  .em-left { padding: 36px 24px; }
}
@media (max-width: 480px) {
  .em-grid { grid-template-columns: 1fr; }
  .em-left { padding: 28px 16px; }
  .em-heading { font-size: 22px; }
}
/* === End: extracted-styles.css === */

/* === Start: auth.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — STOREFRONT AUTHENTICATION STYLESHEET
   Shared layout, card container, form controls, and alerts for Customer
   Login (/account/login) and Account Registration (/account/register).
   ========================================================================== */

.auth-container {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--color-bg);
}

.auth-card {
  background: var(--color-surface, var(--color-surface));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  border: 1px solid var(--color-border);
}

/* Modifier for wider registration form */
.auth-card--wide {
  max-width: 520px;
}

@media (min-width: 769px) {
  .auth-container--login .auth-card {
    max-width: 600px;
  }
  .auth-container--register .auth-card {
    max-width: 720px;
  }
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--text-2xl, 24px);
  font-weight: 700;
  color: var(--purple-950, var(--color-text-primary));
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: var(--text-base, 14px);
  color: var(--text-secondary, #595D65);
}

.auth-alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-base, 14px);
  margin-bottom: 20px;
}

.auth-alert--danger {
  background: var(--feedback-error-bg, #fde8e8);
  color: var(--feedback-error-text, #991b1b);
  border: 1px solid var(--feedback-error-border, #fecaca);
}

.auth-alert--success {
  background: var(--feedback-success-bg, #ecfdf5);
  color: var(--feedback-success-text, #065f46);
  border: 1px solid var(--feedback-success-border, #a7f3d0);
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.auth-label-row .auth-label {
  margin-bottom: 0;
}

.auth-forgot-link {
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

.auth-hint {
  font-size: 12px;
  color: var(--text-secondary, #595D65);
  margin: -8px 0 20px;
  line-height: 1.4;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .auth-container--register {
    padding-inline: 6px;
  }
  .auth-container--register .auth-card {
    padding-inline: 12px;
  }

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

.auth-form-group {
  margin-bottom: 20px;
}

.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-950, var(--color-text-primary));
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--neutral-300, #d6d7da);
  border-radius: var(--radius-md, 8px);
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-input:focus,
.auth-input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
  outline: none !important;
}

.auth-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-primary);
  color: var(--text-inverse, var(--color-surface));
  border: none;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

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

.auth-footer-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-secondary, #595D65);
}

.auth-footer-link a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-footer-link a:hover {
  text-decoration: underline;
}
/* === End: auth.css === */

/* === Start: layout/announcement-bar.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ANNOUNCEMENT BAR MARQUEE (announcement-bar.css)
   Thin top announcement bar with smooth infinite marquee scrolling,
   pause on hover, and mobile responsiveness.
   ========================================================================== */

#section-topbar {
  background: #1a1a1a;
  color: var(--color-surface);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  height: 40px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  max-height: 40px;
  z-index: 201;
}

#section-topbar.is-hidden {
  max-height: 0;
  opacity: 0;
  border-bottom: none;
}

.topbar-marquee-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Three identical tracks scroll by exactly one track width, so the loop repeats
   without a visible gap or jump. Keep MARQUEE_LOOPS in _announcement.ejs in sync
   with the translate distance below. */
.topbar-marquee {
  display: flex;
  align-items: center;
  animation: marquee-scroll 20s linear infinite;
  will-change: transform;
}

.topbar-marquee__track {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
}

.topbar-marquee-container:focus-within .topbar-marquee {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.marquee-divider {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.3333%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-marquee {
    animation: none;
    justify-content: center;
    width: 100%;
  }
  .topbar-marquee__track:not(:first-child) {
    display: none;
  }
}

@media (max-width: 768px) {
  #section-topbar {
    height: 36px;
    max-height: 36px;
    font-size: 13px;
  }
  .marquee-item {
    font-size: 13px;
    gap: 8px;
  }
}
/* === End: layout/announcement-bar.css === */

/* === Start: layout/topbar.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — TOPBAR LAYOUT STYLESHEET (topbar.css)
   Replaces legacy topbar with top announcement marquee bar.
   ========================================================================== */

#section-topbar {
  background: #1a1a1a;
  color: var(--color-surface);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  height: 40px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  max-height: 40px;
  z-index: 201;
}

#section-topbar.is-hidden {
  max-height: 0;
  opacity: 0;
  border-bottom: none;
}
/* === End: layout/topbar.css === */

/* === Start: layout/nav.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — NAVIGATION LAYOUT STYLESHEET (nav.css)
   Left logo · mathematically centered menu · right utilities.
   Below 1100px the menu collapses to: hamburger · logo · search · cart.
   ========================================================================== */

.header-icon-sprite {
  display: none;
}

#section-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 200);
  background: var(--color-bg);
  transition: box-shadow var(--duration-motion, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

#section-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-border-subtle), 0 6px 24px -18px rgba(0, 0, 0, 0.35);
}

/* ── NAV CONTAINER ──
   A three-column grid keeps the logo mathematically centered regardless of
   how wide the menu (left) or CTA/utilities (right) content is. */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  height: 76px;
  padding: 0 48px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  /* Height stays fixed while scrolled — changing it caused sticky header jitter. */
  transition: none;
  /* Must stay above the mega menu scrim, otherwise the scrim covers the trigger and
     the resulting mouseleave closes the menu the instant it opens. */
  position: relative;
  z-index: 70;
}

#section-header.is-scrolled .site-nav {
  height: 72px;
}

.site-nav .unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── ZONE 1: HAMBURGER & LOGO (LEFT) ── */
.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  height: 100%;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  height: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-item__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  padding: 8px 0;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.nav-item__link:hover,
.nav-item__link:focus-visible {
  color: var(--color-primary);
}

.nav-item.is-active > .nav-item__link {
  color: var(--color-primary);
}

/* Underline reveal on hover, mirroring the reference micro-interaction. */
.nav-item__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.nav-item__link:hover::after,
.nav-item__link:focus-visible::after,
.nav-item.is-active > .nav-item__link::after,
.nav-item__link[aria-expanded='true']::after {
  transform: scaleX(1);
}

/* Caret drawn in CSS so it inherits colour and rotation without an extra request. */
.nav-item__caret {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.24s ease;
}

.nav-item__link[aria-expanded='true'] .nav-item__caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* ── ZONE 2: MENU (mathematically centered) ── */
.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  flex-shrink: 0;
  -ms-flex-negative: 0;
}

.nav-logo picture {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 64px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  -ms-flex-negative: 0;
  transition: height var(--duration-motion, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

#section-header.is-scrolled .nav-logo img {
  height: 58px;
}

@media (min-width: 1101px) {
  .nav-logo img {
    height: 74px;
  }
  #section-header.is-scrolled .nav-logo img {
    height: 68px;
  }
}

/* ── ZONE 3: UTILITIES ── */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-utilities {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── COMPACT DROPDOWN ── */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 210px;
  padding: 8px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

/* Invisible bridge so the cursor can travel from trigger to panel. */
.nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 14px;
}

.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__link {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary, #4c4c4c);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding-left: 25px;
}

/* Submenu rows with an icon (megamenu image or line icon) before the label */
.nav-dropdown__link--icon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.nav-dropdown__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
  color: var(--color-text-primary, #0F1733);
}

/* ── HAMBURGER (mobile only) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.nav-hamburger:hover {
  background: var(--color-surface-warm);
}

.nav-hamburger__bar {
  display: block;
  width: 21px;
  height: 1.5px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--color-text-primary);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── MINIMAL VARIANT (checkout) ── */
.site-nav--minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── RESPONSIVE ── */
@media (max-width: 1400px) {
  .nav-menu {
    gap: 32px;
  }
}

@media (max-width: 1280px) {
  .site-nav {
    padding: 0 20px;
  }
  .nav-menu {
    gap: 24px;
  }
  .nav-item__link {
    font-size: 15px;
  }
  .nav-logo img,
  #section-header.is-scrolled .nav-logo img {
    height: 62px;
  }
}

@media (max-width: 1100px) {
  /* hamburger · logo · CTA. .nav-left is flattened (display: contents) so the
     hamburger and logo land in separate columns; equal 1fr side columns keep
     the logo truly centred whatever the CTA width. */
  .site-nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    height: 76px;
    padding: 0 12px;
    gap: 8px;
  }
  .nav-center {
    display: none;
  }
  .nav-left {
    display: contents;
  }
  .nav-hamburger {
    grid-column: 1;
    justify-self: start;
    align-self: center;
  }
  .nav-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    height: auto;
    transform: translateY(-8px);
  }
  .nav-logo picture {
    height: auto;
  }
  .nav-right {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }
  #section-header.is-scrolled .site-nav {
    height: 76px;
  }
  .nav-menu {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .nav-hamburger__bar {
    background: #000000;
  }
  /* .utility-icon--desktop is hidden in utility-icons.css, which loads after this
     file and would otherwise win the display declaration at equal specificity. */
  /* Keep the logo larger on mobile while retaining room for the hamburger and utilities. */
  .nav-logo img,
  #section-header.is-scrolled .nav-logo img {
    height: clamp(50px, 13vw, 72px);
  }
}

@media (max-width: 380px) {
  .site-nav {
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .nav-logo img,
  .nav-item__link,
  .nav-item__link::after,
  .nav-item__caret,
  .nav-dropdown,
  .nav-hamburger__bar {
    transition-duration: 0.01ms;
  }
}

/* Corporate header changes only the account utility area. */
.corp-nav-actions { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.corp-nav-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin: 0; padding: 7px 16px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.corp-nav-phone { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--color-brand-blue, #160fbe); font-size: 13px; line-height: 1.2; font-weight: 650; white-space: nowrap; text-decoration: none; }
.corp-nav-phone svg { display: block; flex: 0 0 16px; width: 16px; height: 16px; }
.corp-nav-phone span { display: inline; white-space: nowrap; }
@media (max-width: 1100px) {
 .site-header--corporate .site-nav { grid-template-columns: 28px minmax(0, 1fr) auto; }
 .site-header--corporate .nav-logo { max-width: 100%; }
 .corp-nav-actions .btn { min-height: 30px; padding: 6px 12px; font-size: 12px; }
 .corp-nav-phone { font-size: 12px; gap: 4px; }
}

.home-assessment-link { white-space: nowrap; }
@media (max-width: 1100px) {
 .site-header:not(.site-header--minimal) .site-nav { grid-template-columns: 28px minmax(0, 1fr) auto; }
 .site-header:not(.site-header--minimal) .nav-logo { max-width: 100%; }
 .site-header .home-assessment-link { padding: 10px 12px; font-size: 12px; }
}

.corp-nav-buttons { display: flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) { .corp-nav-buttons .corp-enquiry-link { display: none; } }

/* Programs disclosure shares the standard menu typography. */
.program-menu { position: relative; }
.program-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.program-menu > summary::-webkit-details-marker, .program-drawer > summary::-webkit-details-marker { display: none; }
.program-menu__caret { font-size: 16px; line-height: 1; }
.program-menu[open] .program-menu__caret { transform: rotate(180deg); }
.program-menu__panel { position: absolute; top: 100%; left: 0; min-width: 210px; padding: 12px 0; border: 1px solid #e1e5ef; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #142c4b18; z-index: 1000; }
.program-menu > summary:focus-visible, .program-drawer > summary:focus-visible { outline: 2px solid #160fbe; outline-offset: 4px; }
.program-drawer > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.program-drawer__links { padding: 0 16px 12px; }
.program-drawer__links a { display: block; padding: 12px 0; color: inherit; font-size: 15px; text-decoration: none; }
/* === End: layout/nav.css === */

/* === Start: layout/utility-icons.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ECOMMERCE UTILITY ICONS (utility-icons.css)
   Outline utility icons (Search, Account, Cart) with tooltips,
   hover micro-interactions, badge counters, and accessibility targets.
   ========================================================================== */

.nav-utilities {
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.utility-icon:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  transform: translateY(-1px);
}

/* Account moves into the navigation drawer on mobile, keeping the bar to
   hamburger / logo / search / cart. */
@media (max-width: 1100px) {
  .utility-icon--desktop {
    display: none;
  }
  .nav-utilities {
    gap: 2px;
  }
  .utility-icon {
    width: 36px;
    height: 36px;
  }
}

.utility-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.18s ease;
}

/* Badge count for Cart / Wishlist */
.utility-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--color-surface);
  transform-origin: center center;
}

.utility-badge.is-bump {
  animation: utility-badge-bump 0.42s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes utility-badge-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .utility-badge.is-bump {
    animation: none;
  }
}

/* Tooltip on hover */
.utility-icon::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 1010;
}

.utility-icon:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Slide-down Search Bar Overlay */
.search-bar-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: 16px 48px;
  display: none;
  z-index: 1005;
}

.search-bar-overlay.is-active {
  display: block;
  animation: slide-down-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.search-bar-inner {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar-input {
  width: 100%;
  padding: 12px 44px 12px 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-bar-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 36, 91, 0.12);
}

.search-bar-close {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666666;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.search-bar-close:hover {
  color: var(--color-text-primary);
}

@keyframes slide-down-fade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* === End: layout/utility-icons.css === */

/* === Start: layout/nav-drawer.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — MOBILE NAV DRAWER (nav-drawer.css)
   Redesigned to match happycultures style: warm cream background (#F4F5F8 / #F9F9FB),
   top circular close button, vertical menu list with Shop By Range accordion chevron,
   clean typography, and bottom login CTA + social icons.
   ========================================================================== */

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(5, 12, 40, 0.45);
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-drawer-overlay.is-open {
  opacity: 1;
}

.nav-drawer-overlay[hidden],
.nav-drawer[hidden] {
  display: none !important;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: min(360px, 86vw);
  background: #F4F5F8 !important; /* Warm Light Cream */
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(-100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-ui, 'Instrument Sans', -apple-system, sans-serif);
  box-sizing: border-box;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer .unstyled-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 1. HEADER (CIRCULAR CLOSE BUTTON ON TOP LEFT) ── */
.nav-drawer__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0;
  padding: 18px 20px 12px 20px !important;
  background: #F4F5F8 !important;
}

.nav-drawer__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #2D2D2D !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.nav-drawer__close:hover,
.nav-drawer__close:focus-visible {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #0B1B57 !important;
  transform: scale(1.05);
}

/* ── 2. DRAWER BODY MENU LIST ── */
.nav-drawer__body {
  flex: 1 !important;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 24px 0 !important;
}

.nav-drawer__list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.nav-drawer__item {
  width: 100% !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.nav-drawer__link,
.nav-drawer__accordion-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 18px 24px !important;
  background: transparent !important;
  border: none !important;
  color: #2B2B2B !important;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.nav-drawer__link:hover,
.nav-drawer__accordion-toggle:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
  color: #111111 !important;
}

.nav-drawer__link-text {
  color: #2B2B2B !important;
}

.nav-drawer__accordion-chevron {
  color: #666666 !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease !important;
}

.nav-drawer__accordion-toggle.is-open .nav-drawer__accordion-chevron {
  transform: rotate(180deg) !important;
  color: #0B1B57 !important;
}

.nav-drawer__accordion-toggle.is-open {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* ── 3. ACCORDION SUBMENU PANEL ── */
.nav-drawer__accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: rgba(0, 0, 0, 0.015) !important;
}

.nav-drawer__accordion-panel[hidden] {
  display: none !important;
}

.nav-drawer__sublist {
  display: flex !important;
  flex-direction: column !important;
  padding: 6px 0 12px 0 !important;
}

.nav-drawer__subitem {
  width: 100% !important;
}

.nav-drawer__sublink {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 24px 12px 36px !important;
  color: #444444 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.18s ease, background-color 0.18s ease !important;
}

.nav-drawer__sublink:hover {
  color: #0B1B57 !important;
  background-color: rgba(196, 13, 46, 0.04) !important;
}

.nav-drawer__subicon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666666 !important;
  width: 24px !important;
  height: 24px !important;
}

.nav-drawer__subicon svg,
.nav-drawer__subicon img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
}

/* icon applied straight to the <img>/<svg> (collection submenu) */
img.nav-drawer__subicon,
svg.nav-drawer__subicon {
  flex: 0 0 auto;
  object-fit: contain;
}

/* ── 4. FOOTER (LOGIN CTA + SOCIAL ICONS) ── */
.nav-drawer__foot {
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0px)) 24px !important;
  border-top: 1px solid #E1E3E8 !important;
  background-color: #F4F5F8 !important;
}

.nav-drawer__login-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--color-accent, #ffc526);
  gap: 10px !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

.nav-drawer__login-btn:hover {
  color: #0B1B57 !important;
}

.nav-drawer__user-ico {
  color: #333333 !important;
}

.nav-drawer__socials {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.nav-drawer__social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #2D2D2D !important;
  text-decoration: none !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
}

.nav-drawer__social-link:hover {
  color: #0B1B57 !important;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer-overlay,
  .nav-drawer__accordion-panel,
  .nav-drawer__accordion-chevron {
    transition-duration: 0.01ms !important;
  }
}
/* === End: layout/nav-drawer.css === */

/* === Start: layout/footer.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — FOOTER LAYOUT STYLESHEET (footer.css)
   Phase 9 Header & Footer Refinement: Dark Gray Surface (var(--color-text-primary)),
   Cool Mist Accents (var(--color-accent)), Outfit Section Headings, Inter Links,
   16px Office Card Containers, and 999px Pill Certificate Tags.
   ========================================================================== */

/* ── SHELL ── */
.nf-footer {
  background: var(--surface-inverse, var(--color-text-primary));
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body, 'Inter', sans-serif);
  border-top: 1px solid var(--border-primary, var(--color-border));
}

/* ── TOP BAND ── */
.nf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--space-8, 56px) 20px;
  flex-wrap: wrap;
  gap: 24px;
}

.nf-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nf-logo {
  display: inline-block;
}

@media (min-width: 1024px) {
  .nf-logo img {
    height: 85px !important;
    max-height: 85px !important;
  }
}

.nf-tagline {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ── SOCIAL ── */
.nf-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nf-social__link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button, 999px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
  flex-shrink: 0;
  text-decoration: none;
}

.nf-social__link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nf-social__link:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-1px);
}

/* ── DIVIDER ── */
.nf-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 var(--space-8, 56px);
}

/* ── MAIN GRID ── */
.nf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
  gap: 32px;
  padding: 24px var(--space-8, 56px);
}

.nf-col {
  padding-right: 24px;
}

.nf-col__label {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* ── OFFICES ── */
.nf-office {
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card, 16px);
  padding: 12px;
}

.nf-office__name {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-surface);
  margin-bottom: 6px;
}

.nf-office__addr {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* ── CONTACT ── */
.nf-contact-group {
  margin-bottom: 20px;
}

.nf-contact-group__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.nf-phones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.nf-contact-group__item {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 6px;
  transition: color var(--duration-fast, 150ms);
  white-space: normal;
  overflow-wrap: anywhere;
}

.nf-contact-group__item:hover {
  color: var(--color-accent);
}

.nf-email-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── NAV LINKS ── */
.nf-nav-link {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color var(--duration-fast, 150ms);
}

.nf-nav-link:hover {
  color: var(--color-surface);
}

/* ── CERT ROW ── */
.nf-certs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px var(--space-8, 56px);
}

.nf-certs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nf-cert-tag {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-button, 999px);
  padding: 6px 16px;
  transition: all var(--duration-fast, 150ms);
}

.nf-cert-tag:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-primary);
}

/* ── BOTTOM BAR ── */
.nf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--space-8, 56px) 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.nf-copyright {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.nf-policy-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nf-policy-link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms);
}

.nf-policy-link:hover {
  color: var(--color-surface);
}

/* ── RESPONSIVE TABLET BREAKPOINT (<= 960px) ── */
@media (max-width: 960px) {
  .nf-top,
  .nf-grid,
  .nf-certs-row,
  .nf-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nf-divider {
    margin: 0 20px;
  }
  .nf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .nf-phones-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .nf-grid {
    grid-template-columns: 1fr;
  }
}
/* === End: layout/footer.css === */

/* === Start: layout/account-layout.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ACCOUNT & ORDERS STYLESHEET (account-layout.css)
   Phase 6 Checkout UX: Refined Customer Profile, Orders History, Stat Cards,
   Outfit/Inter Typography, Healthcare Teal Gradients, and Pill Actions.
   ========================================================================== */

.account-container,
.profile-container {
  max-width: 1200px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-6, 32px);
}

.profile-container {
  max-width: 920px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-5, 24px);
  color: var(--brand-primary, var(--color-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: var(--font-size-small, 14px);
  text-decoration: none;
  transition: all var(--duration-fast, 150ms);
}

.back-link:hover {
  color: var(--brand-primary-hover, var(--color-primary-hover));
  transform: translateX(-2px);
}

.account-banner,
.account-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-surface);
  padding: 40px var(--space-8, 40px);
  border-radius: var(--radius-card, 16px);
  margin-bottom: var(--space-8, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.account-welcome {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h2, 30px);
  font-weight: 700;
  margin-bottom: 4px;
}

.account-sub,
.account-email {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  color: rgba(255, 255, 255, 0.85);
}

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

.account-banner-form {
  display: inline;
  margin: 0;
}

.account-banner-actions .btn--inverse {
  text-decoration: none;
}

.account-banner-logout,
.account-banner-actions .btn--ghost {
  background: transparent;
  color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.account-banner-logout:hover,
.account-banner-actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Stats Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5, 24px);
  margin-bottom: var(--space-8, 36px);
}

.stat-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 28px);
  display: flex;
  align-items: center;
  gap: var(--space-4, 18px);
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast, 150ms);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary, var(--color-primary));
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-input, 14px);
  background: var(--color-primary-light, #E6EDFB);
  color: var(--brand-primary, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
}

.stat-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}

.stat-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  color: var(--text-secondary, var(--color-text-secondary));
  font-weight: 500;
}

/* Orders Cards & Tables */
.orders-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.orders-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-h3, 20px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  padding: var(--space-5, 24px) var(--space-6, 28px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.orders-table th {
  background: var(--surface-primary, var(--color-bg));
  padding: 16px var(--space-5, 24px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary, var(--color-text-secondary));
  border-bottom: 1px solid var(--border-primary, var(--color-border));
}

.orders-table td {
  padding: var(--space-4, 18px) var(--space-5, 24px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  vertical-align: middle;
}

.orders-table tr:last-child td {
  border-bottom: none;
}

.badge-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
}

.status-pending {
  background: var(--feedback-warning-bg, #FEF3C7);
  color: var(--feedback-warning, #D97706);
  border: 1px solid var(--feedback-warning-border, #FCD34D);
}

.status-processing {
  background: var(--blue-50, #EFF6FF);
  color: var(--brand-secondary, var(--color-secondary));
  border: 1px solid var(--blue-200, #BFDBFE);
}

.status-delivered {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success, var(--color-success));
  border: 1px solid var(--feedback-success-border, #86EFAC);
}

.status-cancelled {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error, var(--color-danger));
  border: 1px solid var(--feedback-error-border, #FCA5A5);
}

.btn-view-receipt {
  padding: 8px 18px;
  background: var(--color-primary-light, #E6EDFB);
  color: var(--brand-primary, var(--color-primary));
  border: 1px solid var(--color-primary-muted, #7F91C4);
  border-radius: var(--radius-button, 999px);
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration-fast, 150ms);
}

.btn-view-receipt:hover {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

/* 2-Column Dashboard Grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8, 36px);
}

@media (max-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .account-container,
  .profile-container {
    padding: 0 var(--space-4, 16px);
    margin: var(--space-5, 24px) auto;
  }

  .account-banner,
  .account-header {
    padding: 28px 20px;
  }

  .account-welcome {
    font-size: 22px;
  }

  .account-banner-actions {
    width: 100%;
  }

  .account-banner-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .thank-you-page__actions,
  .ty-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .thank-you-page__actions .btn,
  .ty-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Thank-you / confirmation page ─────────────────────────────────────────── */
.ty-page {
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px 72px;
  background: var(--color-bg, #f9f9fb);
}

.ty-card {
  width: 100%;
  max-width: 520px;
  text-align: center;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1e3e6);
  border-radius: 20px;
  padding: 44px 36px 40px;
  box-shadow: 0 24px 60px -34px rgba(31, 31, 31, 0.22);
}

.ty-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e7f7ee;
  color: #1e9e5a;
  margin-bottom: 20px;
}

.ty-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--color-text-primary, #1f1f1f);
  margin: 0 0 10px;
}

.ty-copy {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary, #5c5c5c);
  margin: 0 auto;
  max-width: 38ch;
}

.ty-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ty-note {
  margin: 22px 0 0;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 13px;
  color: var(--color-text-muted, #8f8f8f);
}

.ty-note a {
  color: var(--color-text-secondary, #5c5c5c);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ty-note a:hover {
  color: var(--color-primary, #0B1B57);
}

.action-link {
  display: block;
  padding: 14px 20px;
  border-radius: var(--radius-card, 16px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  text-decoration: none;
  margin-bottom: 12px;
  transition: all var(--duration-fast, 150ms);
}

.action-link:hover {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

.thank-you-page {
  max-width: 720px;
  margin: var(--space-8, 48px) auto;
  padding: 0 var(--space-5, 20px);
  text-align: center;
}

.thank-you-page__title {
  margin-bottom: 12px;
}

.thank-you-page__copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary, #444);
}

.thank-you-page__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.orders-filter-form {
  margin-bottom: 20px;
}

.orders-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.orders-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #555);
}

.orders-filter-input,
.orders-filter-select {
  width: 100%;
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: var(--color-surface, #fff);
}

.orders-filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.orders-alert {
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.orders-alert--error {
  background: #fdecea;
  color: #b42318;
  border: 1px solid #f5c2c0;
}

.orders-empty {
  padding: 24px 8px;
  color: var(--text-secondary, #555);
}

.orders-table-wrap {
  overflow-x: auto;
}

.orders-payment-status {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #666);
  font-weight: 500;
}

.orders-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.orders-pagination-meta {
  font-size: 13px;
  color: var(--text-secondary, #666);
}

@media (max-width: 900px) {
  .orders-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .orders-filter-grid {
    grid-template-columns: 1fr;
  }

  .orders-table thead {
    display: none;
  }

  .orders-table tr {
    display: block;
    border: 1px solid var(--border-primary, var(--color-border));
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
  }

  .orders-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: right !important;
    border: 0;
    padding: 8px 0;
  }

  .orders-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary, #666);
  }
}
/* === End: layout/account-layout.css === */

/* === Start: layout/contact-layout.css === */
/* Contact page — refined professional layout */

.ct-page {
  background: var(--color-bg, #f9f9fb);
  color: var(--color-text-primary);
}

.ct-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .ct-page {
    /* Keep the enquiry panel's bottom margin inside the white page surface. */
    display: flow-root;
    background: #FFFFFF;
  }
}

.ct-shell {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

/* ── Eyebrows / section labels ── */
.ct-eyebrow,
.ct-col-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ct-eyebrow::before,
.ct-col-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-primary);
}

.ct-col-title {
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: clamp(1.35rem, 2vw, 1.55rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 0 0 10px;
  text-transform: none;
}

.ct-col-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 38rem;
}

/* ── Hero ── */
.ct-hero {
  border-bottom: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}

.ct-hero__inner {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
  padding: 40px 0 36px;
}

.ct-hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  line-height: 1.12;
  margin: 0 0 14px;
  max-width: 16ch;
  text-transform: none;
}

.ct-hero__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 36rem;
}

.ct-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ct-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease;
}

.ct-hero__cta:hover {
  background: var(--color-primary-hover, #07123D);
  border-color: var(--color-primary-hover, #07123D);
}

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

.ct-hero__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 450;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* ── Contact strip ── */
.ct-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.ct-strip__inner {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.ct-strip__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 8px;
  margin: 0;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--color-border);
  transition: opacity var(--duration-fast, 150ms) ease;
}

.ct-strip__link:first-child {
  padding-left: 0;
}

.ct-strip__link:last-child {
  border-right: none;
  padding-right: 0;
}

.ct-strip__link:hover {
  opacity: 0.82;
}

.ct-strip__link:hover .ct-strip__value {
  color: var(--color-primary);
}

.ct-strip__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ct-strip__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted, #f2b3c4);
  border-radius: 50%;
}

.ct-strip__icon--wa {
  background: transparent;
  color: #128c7e;
  border-color: rgba(18, 140, 126, 0.35);
}

.ct-strip__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ct-strip__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text-muted);
}

.ct-strip__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast, 150ms) ease;
}

/* ── Main grid ── */
.ct-main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: start;
  padding: 48px 0 64px;
  scroll-margin-top: 96px;
  background: transparent;
  border-bottom: none;
}

.ct-form-col {
  padding: 0;
  border-right: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px 32px 36px;
}

.ct-form-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ct-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.ct-label {
  font-family: var(--font-body);
  font-weight: 550;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-bottom: 7px;
}

.ct-label span {
  color: var(--color-primary);
}

.ct-input,
.ct-select,
.ct-textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-bg, #f9f9fb);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 11px 13px;
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.ct-input:hover,
.ct-select:hover,
.ct-textarea:hover {
  border-color: #caccd0;
}

.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus,
.ct-input:focus-visible,
.ct-select:focus-visible,
.ct-textarea:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
}

.ct-input--err {
  border-color: var(--color-primary);
  background: #fff8f9;
}

.ct-textarea {
  resize: vertical;
  min-height: 128px;
  line-height: 1.6;
}

.ct-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.ct-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}

.ct-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.ct-checkbox {
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  cursor: pointer;
}

.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 22px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
  margin-top: 8px;
}

.ct-submit:hover:not(:disabled) {
  background: var(--color-primary-hover, #07123D);
  border-color: var(--color-primary-hover, #07123D);
}

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

.ct-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.ct-form .form-banner {
  margin-bottom: 16px;
}

.ct-form .form-success-panel {
  margin-bottom: 16px;
}

.ct-form .form-error {
  margin-top: 6px;
}

/* ── Offices ── */
.ct-offices-col {
  padding: 8px 0 0;
  background: transparent;
}

.ct-office-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 22px 18px;
  margin-bottom: 14px;
}

.ct-office-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ct-office-card__icon {
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted, #f2b3c4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.ct-office-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}

.ct-office-card__addr {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}

.ct-office-card__contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms) ease;
}

.ct-office-card__contact:hover {
  color: var(--color-primary);
}

.ct-hours {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 22px 16px;
  margin-bottom: 14px;
}

.ct-hours__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-hours__title svg {
  stroke: var(--color-primary);
}

.ct-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.ct-hours__row:last-of-type {
  border-bottom: none;
}

.ct-hours__time {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  letter-spacing: 0;
}

.ct-hours__time--closed {
  color: var(--color-primary);
}

.ct-hours__note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 12px;
  line-height: 1.55;
}

.ct-all-phones {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px 22px;
}

.ct-all-phones__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.ct-all-phones__item {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--duration-fast, 150ms) ease;
}

.ct-all-phones__item:last-child {
  border-bottom: none;
}

.ct-all-phones__item:hover {
  color: var(--color-primary);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ct-main {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0 48px;
  }

  .ct-form-col {
    padding: 24px 20px 28px;
  }

  .ct-strip__inner {
    grid-template-columns: 1fr;
  }

  .ct-strip__link,
  .ct-strip__link:first-child,
  .ct-strip__link:last-child {
    padding: 16px 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .ct-strip__link:last-child {
    border-bottom: none;
  }

  .ct-strip__value {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 768px) {
  .ct-hero__inner,
  .ct-strip__inner,
  .ct-main,
  .ct-shell {
    width: min(1120px, calc(100% - 32px));
  }

  .ct-hero__inner {
    padding: 28px 0 24px;
  }

  .ct-form-grid2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* === End: layout/contact-layout.css === */

/* === Start: layout/consultation-layout.css === */
/* ==========================================================================
   Free Consultation page — one card: promo image (left) + intake form (right)
   Reuses .ct-* field tokens from contact-layout.css.
   ========================================================================== */

.cs-split {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 44px 0 56px;
  scroll-margin-top: 96px;
}

/* Hero was removed on this page — give the contact strip a clean top edge */
.cs-page .ct-strip {
  border-top: 1px solid var(--color-border, #e1e3e6);
}

/* ── The single container card ────────────────────────────────────────────── */
.cs-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 32px;
  padding: 22px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1e3e6);
  border-radius: 22px;
  box-shadow: 0 24px 60px -32px rgba(31, 31, 31, 0.22);
}

/* ── Left: promo media panel (inset, own rounded corners) ────────────────── */
.cs-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 380px;
  border-radius: 16px;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--color-primary-light, #fde7ed) 0%, var(--color-bg, #f9f9fb) 58%);
}

.cs-promo__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 24px 24px 0;
}

.cs-promo__eyebrow {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 500;
  color: var(--color-text-primary, #1f1f1f);
  line-height: 1.1;
}

.cs-promo__badge {
  display: inline-block;
  margin: 2px 0;
  padding: 5px 20px;
  background: var(--color-secondary, #2d2d2d);
  color: #fff;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 8px;
  line-height: 1;
}

.cs-promo__title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(22px, 3.4vw, 31px);
  font-weight: 600;
  color: var(--color-primary, #0B1B57);
  line-height: 1.15;
}

.cs-promo__sub {
  margin-top: 6px;
  max-width: 34ch;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 13px;
  color: var(--color-text-secondary, #5c5c5c);
  line-height: 1.5;
}

.cs-promo__photo {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 240px;
  height: 0; /* let flex-grow set the height so the photo never dictates card height */
  margin-top: 16px;
  width: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
}

/* ── Right: form column (card padding + grid gap do the outer spacing) ──── */
.cs-card__form {
  padding: 14px 12px 14px 4px;
  background: var(--color-surface, #fff);
}

/* Tighten the vertical rhythm so the card stays compact */
.cs-card__form .ct-col-label {
  margin-top: 0;
}

.cs-card__form .ct-col-title {
  margin-bottom: 4px;
}

.cs-card__form .ct-col-sub {
  margin-bottom: 16px;
}

.cs-card__form .ct-field {
  margin-bottom: 11px;
}

.cs-card__form .ct-label {
  margin-bottom: 4px;
}

.cs-card__form .ct-input,
.cs-card__form .ct-select,
.cs-card__form .ct-textarea {
  padding: 9px 12px;
}

.cs-card__form .ct-form-grid2 {
  gap: 12px;
}

.cs-card__form .ct-submit {
  margin-top: 2px;
}

.cs-terms {
  margin: 4px 0 12px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted, #8f8f8f);
}

.cs-terms a {
  color: var(--color-text-secondary, #5c5c5c);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cs-terms a:hover {
  color: var(--color-primary, #0B1B57);
}

/* ── "What to expect" row under the card ─────────────────────────────────── */
.cs-expect {
  width: min(1120px, calc(100% - 40px));
  margin: 24px auto 0;
  padding: 0 0 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cs-expect .ct-office-card {
  margin: 0;
}

/* ── Stacked layout: image on top, form below ───────────────────────────── */
@media (max-width: 1000px) {
  .cs-split {
    padding: 28px 0 44px;
  }

  .cs-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }

  .cs-card__media {
    min-height: 0;
  }

  /* Portrait photo -> portrait-ish frame so the whole doctor shows, top-aligned */
  .cs-promo__photo {
    flex: none;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 520px;
    min-height: 0;
    object-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
  }

  .cs-card__form {
    padding: 4px 2px 8px;
  }

  .cs-card__form .ct-form-grid2 {
    gap: 0 12px;
  }

  .cs-expect {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .cs-split,
  .cs-expect {
    width: min(1120px, calc(100% - 32px));
  }

  .cs-promo__photo {
    aspect-ratio: 4 / 5;
    max-height: 440px;
  }

  .cs-promo__copy {
    padding: 20px 18px 0;
  }

  /* 2-col field rows already collapse to 1-col here (contact-layout) */
  .cs-card__form .ct-form-grid2 {
    gap: 0;
  }

  .cs-expect {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 44px;
  }
}
/* === End: layout/consultation-layout.css === */

/* === Start: layout/book-a-test-wizard.css === */
/* ==========================================================================
   BOOK A TEST — two-step wizard (goal picker -> contact form)
   Reuses .ct-* field/column tokens from contact-layout.css.
   ========================================================================== */

.bt-wizard {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 44px 0 64px;
}

/* ── Progress bar ── */
.bt-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.bt-progress__track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.bt-progress__fill {
  height: 100%;
  width: 50%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 300ms ease;
}

.bt-progress__label {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Step 1: goal picker ── */
.bt-step--goals {
  text-align: center;
}

.bt-step__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 10px;
}

.bt-step__title {
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.15;
  margin: 0 0 12px;
}

.bt-step__title:focus-visible {
  outline: none;
}

.bt-step__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 46rem;
  margin: 0 auto 36px;
}

.bt-goal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
  text-align: left;
}

.bt-goal-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) ease,
    opacity var(--duration-fast, 150ms) ease;
}

.bt-goal-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

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

.bt-goal-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
}

.bt-goal-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.bt-goal-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
  overflow: hidden;
}

.bt-goal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.bt-goal-card:hover .bt-goal-card__media img {
  transform: scale(1.04);
}

.bt-goal-card__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: transparent;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
}

.bt-goal-card[aria-pressed="true"] .bt-goal-card__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.bt-goal-card__label {
  padding: 12px 14px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.bt-step__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bt-goal-hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
}

.bt-goal-hint.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.bt-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bt-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Step 2: contact form ── */
.bt-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast, 150ms) ease;
}

.bt-back:hover {
  color: var(--color-primary);
}

.bt-goals-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  min-height: 26px;
}

.bt-goal-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
}

.bt-intro-card .ct-col-title {
  font-size: 1.05rem;
}

.bt-mini-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bt-mini-steps__item {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  padding-left: 22px;
  position: relative;
}

.bt-mini-steps__item strong {
  color: var(--color-text-primary);
}

.bt-mini-steps__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.bt-intro-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .bt-goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bt-wizard {
    padding: 32px 0 48px;
  }

  .bt-step__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .bt-next {
    justify-content: center;
  }
}

/* ── Step 2: test plan picker ── */
.bt-step--plans {
  text-align: center;
}

.bt-step--plans .bt-back {
  display: flex;
}

.bt-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  text-align: left;
  margin-bottom: 24px;
}

.bt-plan {
  border-radius: 20px;
}

.bt-plan--popular {
  background: var(--color-primary-light);
  padding: 0 8px 8px;
}

.bt-plan__band {
  margin: 0;
  padding: 12px 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.bt-plan__card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  transition: border-color var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
}

.bt-plan--popular .bt-plan__card {
  border-color: transparent;
}

.bt-plan.is-selected .bt-plan__card {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
}

.bt-plan__name {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.bt-plan__title {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--color-text-primary);
}

.bt-plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
}

.bt-plan__amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.bt-plan__old {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-muted);
}

.bt-plan__note {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
}

.bt-plan__select {
  justify-content: center;
  width: 100%;
  margin-bottom: 24px;
}

.bt-plan__select.btn--ghost {
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
}

.bt-plan__select.btn--ghost:hover {
  background: var(--color-primary);
  color: #fff;
}

.bt-plan__includes {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-weight: 650;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.bt-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bt-plan__list li {
  display: flex;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-primary);
}

.bt-plan__tick {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.bt-plan__tick svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.5;
}

.bt-plan__params-link {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  vertical-align: 2px;
  white-space: nowrap;
}

.bt-plan__params-link:hover,
.bt-plan__params-link:focus-visible {
  color: var(--color-primary);
}

/* "View all parameters" pop-up */
.bt-params {
  width: min(1320px, calc(100% - 48px));
  max-height: calc(100vh - 96px);
  margin: auto;
  padding: 56px 56px 48px;
  border: none;
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  overflow-y: auto;
  text-align: left;
}

.bt-params::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.bt-params__close {
  position: absolute;
  top: 28px;
  right: 28px;
  display: inline-flex;
  padding: 6px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.bt-params__close:hover,
.bt-params__close:focus-visible {
  color: var(--color-text-primary);
}

.bt-params__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 44px 32px;
  align-items: start;
}

.bt-params__title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.bt-params__panel,
.bt-params__group-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bt-params__panel {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.bt-params__group-title {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-primary);
}

.bt-params__tests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .bt-params {
    width: calc(100% - 24px);
    max-height: calc(100vh - 48px);
    padding: 48px 22px 28px;
  }

  .bt-params__close {
    top: 14px;
    right: 14px;
  }

  .bt-params__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
  }

  .bt-params__head {
    grid-column: 1 / -1;
  }

  .bt-params__title br {
    display: none;
  }
}

.bt-plan-footnote {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
}

.bt-goal-chip--plan {
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 900px) {
  .bt-plan-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* === End: layout/book-a-test-wizard.css === */

/* === Start: layout/check-your-health.css === */
/* ==========================================================================
   "Know Your Body" — marketing/education page for the check-in concept.
   Uses the shared --color-* / --font-* tokens. Scoped under .kyb-page.
   ========================================================================== */

.kyb-page {
  background: var(--color-bg, #f9f9fb);
  color: var(--color-text-primary, #1f1f1f);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.kyb-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #171319;
  background-image:
    radial-gradient(85% 120% at 90% 6%, rgba(11, 27, 87, 0.18) 0%, rgba(11, 27, 87, 0) 65%),
    linear-gradient(90deg, rgba(19, 15, 21, 0.84) 0%, rgba(19, 15, 21, 0.66) 35%, rgba(19, 15, 21, 0.32) 65%, rgba(19, 15, 21, 0.1) 100%),
    url('/assets/images/check-your-health/test.webp');
  background-repeat: no-repeat;
  background-position: center, center, center right;
  background-size: cover, cover, cover;
}

.kyb-hero__inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: 440px;
  padding: 72px 0 76px;
}

.kyb-hero__copy {
  max-width: 36rem;
}

.kyb-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-muted, #f0a9bd);
  margin-bottom: 16px;
}

.kyb-hero__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 0 0 16px;
}

.kyb-hero__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.95rem, 1.6vw, 1.075rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 28px;
  max-width: 32rem;
}

.kyb-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.kyb-hero__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}

.kyb-hero__chips {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.kyb-hero__chips li {
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}


/* ── "Why check in" — problem/stat cards below the hero ───────────────── */
.kyb-why {
  background: var(--color-bg, #f9f9fb);
  padding: 68px 0 8px;
}

.kyb-why__inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.kyb-why__eyebrow {
  display: inline-block;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary, #0B1B57);
  margin-bottom: 14px;
}

.kyb-why__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.kyb-why__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary, #5c5c5c);
  max-width: 52ch;
  margin: 0 auto;
}

.kyb-why__cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.kyb-why__card {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(180deg, #2b2533 0%, #16121a 100%);
  background-size: cover;
  background-position: center;
}

.kyb-why__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 8, 12, 0.05) 0%, rgba(10, 8, 12, 0.62) 68%, rgba(10, 8, 12, 0.82) 100%);
}

.kyb-why__card--a { background-image: linear-gradient(180deg, #21324a 0%, #121a27 100%); }
.kyb-why__card--b { background-image: linear-gradient(180deg, #1c2440 0%, #0e1322 100%); }
.kyb-why__card--c { background-image: linear-gradient(180deg, #33223f 0%, #191122 100%); }
.kyb-why__card--d { background-image: linear-gradient(180deg, #2f2733 0%, #17131b 100%); }
.kyb-why__card--e { background-image: linear-gradient(180deg, #2c313e 0%, #16191f 100%); }

/* Photo layer, replacing the flat gradient when a card supplies --kyb-card-img */
.kyb-why__card--photo {
  background-image:
    linear-gradient(180deg, rgba(10, 8, 12, 0.1) 0%, rgba(10, 8, 12, 0.42) 55%, rgba(10, 8, 12, 0.86) 100%),
    var(--kyb-card-img);
  background-size: cover;
  background-position: center;
}

.kyb-why__tag {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.94);
  color: #1a1a1a;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}

.kyb-why__num {
  display: block;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(20px, 1.8vw, 30px);
  font-size: clamp(20px, 12cqi, 30px);
  white-space: nowrap;
  letter-spacing: -.025em;
  font-weight: 650;
  line-height: 1.05;
}

.kyb-why__cap {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.84);
}

.kyb-why__note {
  margin: 22px auto 0;
  max-width: 58ch;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--color-text-muted, #8f8f8f);
}

/* ── "What a focused plan does" — payoff cards ────────────────────────── */
.kyb-do {
  background: var(--color-bg, #f9f9fb);
  padding: 60px 0 4px;
}

.kyb-do__inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.kyb-do__eyebrow {
  display: inline-block;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary, #0B1B57);
  margin-bottom: 14px;
}

.kyb-do__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.kyb-do__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary, #5c5c5c);
  max-width: 52ch;
  margin: 0 auto 22px;
}

.kyb-do__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--color-text-primary, #1f1f1f);
  background: transparent;
  color: var(--color-text-primary, #1f1f1f);
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.kyb-do__cta:hover {
  background: var(--color-text-primary, #1f1f1f);
  color: #fff;
}

.kyb-do__bento {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 194px;
  grid-auto-flow: row dense;
  gap: 16px;
  text-align: left;
}

.kyb-do__card {
  position: relative;
  isolation: isolate;
  grid-column: span 2;
  border-radius: 22px;
  overflow: hidden;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  color: #fff;
  background-color: #16121a;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kyb-do__card--wide { grid-column: span 4; }
.kyb-do__card--tall { grid-column: span 2; grid-row: span 2; }
.kyb-do__card--half { grid-column: span 3; }
.kyb-do__card--narrow { grid-column: span 1; }

/* Base fill: theme gradient, sits furthest back */
.kyb-do__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(155deg, #2b2533 0%, #16121a 100%);
}

.kyb-do__card--crimson::before { background: linear-gradient(150deg, #0B1B57 0%, #07123D 100%); }
.kyb-do__card--navy::before    { background: linear-gradient(150deg, #2b3f63 0%, #141d31 100%); }
.kyb-do__card--teal::before    { background: linear-gradient(150deg, #1b274e 0%, #0E1429 100%); }
.kyb-do__card--plum::before    { background: linear-gradient(150deg, #4a2b4f 0%, #24132a 100%); }
.kyb-do__card--ink::before     { background: linear-gradient(150deg, #2c2733 0%, #15121a 100%); }

/* Photo layer + dark scrim so white text always reads, above the fill */
.kyb-do__card--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(10, 8, 12, 0.04) 0%, rgba(10, 8, 12, 0.32) 44%, rgba(10, 8, 12, 0.86) 100%),
    var(--kyb-card-img);
  background-size: cover;
  background-position: center 18%;
}

/* Soft glow bleeding from a corner (photo cards) */
.kyb-do__cardglow {
  position: absolute;
  z-index: -1;
  width: 62%;
  aspect-ratio: 1;
  right: -14%;
  top: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* Ghost motif on the gradient cards */
.kyb-do__cardicon {
  position: absolute;
  z-index: -1;
  right: -22px;
  top: -22px;
  color: #fff;
  opacity: 0.14;
  pointer-events: none;
}

.kyb-do__cardicon svg {
  width: clamp(110px, 14vw, 168px);
  height: auto;
}

.kyb-do__card--wide .kyb-do__cardicon {
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.kyb-do__card--wide .kyb-do__cardicon svg {
  width: clamp(150px, 20vw, 220px);
}

@media (hover: hover) {
  .kyb-do__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -26px rgba(15, 10, 20, 0.55);
  }
}

.kyb-do__cardhead {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.16;
  margin: 0;
  max-width: 20ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.kyb-do__card--wide .kyb-do__cardhead { max-width: 24ch; }

.kyb-do__cardsub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 34ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ── "Why check in here" — comparison table ───────────────────────────── */
.kyb-compare {
  background: var(--color-bg, #f9f9fb);
  padding: 8px 0 76px;
}

.kyb-compare__inner {
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}

.kyb-compare__eyebrow {
  display: inline-block;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary, #0B1B57);
  margin-bottom: 14px;
}

.kyb-compare__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.kyb-compare__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary, #5c5c5c);
  max-width: 52ch;
  margin: 0 auto;
}

.kyb-compare__scroll {
  margin-top: 40px;
  overflow-x: auto;
}

.kyb-compare__table {
  position: relative;
  min-width: 640px;
  padding: 14px;
  border-radius: 26px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-subtle, #ecedf0);
}

.kyb-compare__highlight {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 66.666%;
  right: 6px;
  z-index: 0;
  background: var(--color-primary-light, #fde7ed);
  border: 1.5px solid var(--color-primary, #0B1B57);
  border-radius: 20px;
}

.kyb-compare__row {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.kyb-compare__row:not(:last-child) .kyb-compare__cell {
  border-bottom: 1px solid var(--color-border-subtle, #ecedf0);
}

.kyb-compare__row--head .kyb-compare__cell {
  border-bottom: 1px solid var(--color-border, #e1e3e6);
}

.kyb-compare__cell {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
}

.kyb-compare__cell--headlabel,
.kyb-compare__cell--head {
  align-items: center;
  padding-bottom: 14px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
}

.kyb-compare__cell--headlabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8f8f8f);
}

.kyb-compare__cell--head {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 16px;
  font-weight: 650;
  color: var(--color-text-secondary, #5c5c5c);
}

.kyb-compare__cell--head.kyb-compare__cell--own {
  color: var(--color-text-primary, #1f1f1f);
}

.kyb-compare__cell--label {
  font-weight: 600;
  color: var(--color-text-primary, #1f1f1f);
}

.kyb-compare__cell--muted {
  color: var(--color-text-muted, #8f8f8f);
}

.kyb-compare__cell--own {
  font-weight: 600;
  color: var(--color-text-primary, #1f1f1f);
}

.kyb-compare__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
}

.kyb-compare__icon--no {
  background: var(--color-border-subtle, #ecedf0);
  color: var(--color-text-muted, #8f8f8f);
}

.kyb-compare__icon--yes {
  background: var(--color-primary, #0B1B57);
  color: #fff;
}

.kyb-compare__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 36px;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--color-primary, #0B1B57);
  color: #fff;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
}

.kyb-compare__cta:hover {
  background: var(--color-primary-hover, #07123D);
  transform: translateY(-1px);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kyb-hero {
    background-image:
      radial-gradient(90% 90% at 50% 0%, rgba(11, 27, 87, 0.16) 0%, rgba(11, 27, 87, 0) 65%),
      linear-gradient(180deg, rgba(19, 15, 21, 0.62) 0%, rgba(19, 15, 21, 0.76) 100%),
      url('/assets/images/check-your-health/test.webp');
    background-position: center;
  }

  .kyb-hero__inner {
    min-height: 0;
    padding: 52px 0 84px;
    text-align: center;
    justify-content: center;
  }

  .kyb-hero__copy {
    max-width: 100%;
    margin: 0 auto;
  }

  .kyb-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .kyb-hero__chips {
    justify-content: center;
  }

  .kyb-why {
    padding-top: 52px;
  }

  .kyb-why__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }

  .kyb-do {
    padding-top: 48px;
  }

  .kyb-do__bento {
    margin-top: 30px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .kyb-do__card,
  .kyb-do__card--wide,
  .kyb-do__card--tall,
  .kyb-do__card--half,
  .kyb-do__card--narrow {
    grid-column: span 1;
    grid-row: span 1;
  }

  .kyb-compare {
    padding-top: 48px;
  }
}

@media (max-width: 720px) {
  /* Comparison table: drop the side-scrolling 3-column grid for stacked
     rows — the highlighted column is the whole point, so it must never
     hide behind a scroll a thumb might not find. */
  .kyb-compare__scroll {
    overflow-x: visible;
  }

  .kyb-compare__table {
    min-width: 0;
  }

  .kyb-compare__highlight {
    display: none;
  }

  .kyb-compare__row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px 2px;
  }

  .kyb-compare__row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-subtle, #ecedf0);
  }

  .kyb-compare__row .kyb-compare__cell {
    border-bottom: none !important;
    padding: 0;
  }

  .kyb-compare__row--head {
    flex-direction: row;
    padding: 0 2px 12px;
  }

  .kyb-compare__cell--headlabel {
    display: none;
  }

  .kyb-compare__cell--head {
    justify-content: flex-start;
  }

  .kyb-compare__cell--label {
    font-family: var(--font-ui, 'Instrument Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, #8f8f8f);
  }

  .kyb-compare__cell--own {
    background: var(--color-primary-light, #fde7ed);
    border-radius: 10px;
    padding: 8px 10px !important;
  }
}

@media (max-width: 560px) {
  .kyb-do {
    display: none;
  }

  .kyb-why__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-bottom: 12px;
  }

  .kyb-hero__inner {
    width: calc(100% - 32px);
    padding: 40px 0 60px;
  }

  .kyb-why__inner,
  .kyb-do__inner,
  .kyb-compare__inner {
    width: calc(100% - 32px);
  }

  .kyb-compare {
    padding-bottom: 56px;
  }

  .kyb-compare__scroll {
    margin-top: 28px;
  }

  .kyb-why__card {
    aspect-ratio: 4 / 3;
    min-height: 220px;
    scroll-snap-align: start;
  }

  .kyb-do__bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(168px, auto);
    gap: 12px;
  }

  .kyb-do__card {
    padding: 22px 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kyb-do__card {
    transition: none;
  }
}
/* === End: layout/check-your-health.css === */

/* === Start: layout/mira-page.css === */
/* ==========================================================================
   Mira — dedicated AI assistant chat page (/mira)
   ========================================================================== */

.mp-page {
  background: var(--color-bg, #f9f9fb);
  color: var(--color-text-primary);
}

.mp-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8, 3rem) var(--space-4, 1rem) var(--space-5, 1.5rem);
  text-align: center;
}

.mp-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light, #E6EDFB);
  color: var(--color-primary, #0B1B57);
  margin-bottom: var(--space-3, 0.75rem);
}

.mp-hero__avatar svg {
  width: 30px;
  height: 30px;
}

.mp-hero__title {
  font-family: var(--font-heading);
  font-size: var(--type-h2, 2rem);
  font-weight: 700;
  margin: 0 0 var(--space-2, 0.5rem);
  color: var(--color-text-primary);
}

.mp-hero__title span {
  color: var(--color-primary, #0B1B57);
}

.mp-hero__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body, 1rem);
  line-height: var(--leading-relaxed, 1.6);
}

/* ── Chat card ── */
.mp-card {
  max-width: 760px;
  margin: 0 auto var(--space-10, 4rem);
  padding: 0 var(--space-4, 1rem);
}

.mp-card__inner {
  display: flex;
  flex-direction: column;
  height: min(74vh, 760px);
  min-height: 460px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1e3e6);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
  overflow: hidden;
}

.mp-card__body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-5, 1.5rem);
  gap: 12px;
}

.mp-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
}

.mp-intro__title {
  font-family: var(--font-heading);
  font-size: var(--type-h4, 1.25rem);
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

.mp-intro__sub {
  margin: 0;
  font-size: var(--type-small, 0.875rem);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.mp-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.mp-chip {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #e1e3e6);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-warm, #eeeff2);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--duration-fast, 150ms), background var(--duration-fast, 150ms);
}

.mp-chip:hover,
.mp-chip:focus-visible {
  border-color: var(--color-primary, #0B1B57);
  background: var(--color-primary-light, #E6EDFB);
  outline: none;
}

/* ── Messages ── */
.mp-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-msg {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: var(--radius-md, 12px);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.mp-msg--user {
  align-self: flex-end;
  background: var(--gradient-primary, linear-gradient(135deg, #0B1B57 0%, #07123D 100%));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mp-msg--assistant {
  align-self: flex-start;
  background: var(--color-surface-warm, #eeeff2);
  color: var(--color-text-primary);
  border-bottom-left-radius: 4px;
}

.mp-msg--error {
  border: 1px solid var(--color-danger-border, #ffa39e);
  background: var(--color-danger-bg, #fde7ed);
  color: var(--color-danger-text, #a8071a);
}

.mp-msg a.mp-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.mp-msg--user a.mp-link {
  color: #fff;
}

.mp-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 15px;
  border-radius: var(--radius-md, 12px);
  border-bottom-left-radius: 4px;
  background: var(--color-surface-warm, #eeeff2);
}

.mp-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted, #8f8f8f);
  animation: mp-bounce 1.2s infinite ease-in-out;
}

.mp-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.mp-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes mp-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ── Footer / input ── */
.mp-card__footer {
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--color-border, #e1e3e6);
  background: var(--color-surface, #fff);
}

.mp-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-warm, #eeeff2);
  border: 1px solid var(--color-border, #e1e3e6);
  border-radius: var(--radius-pill, 999px);
  padding: 4px 4px 4px 18px;
}

.mp-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 10px 0;
  min-width: 0;
}

.mp-input:focus {
  outline: none;
}

.mp-input::placeholder {
  color: var(--color-text-muted, #8f8f8f);
}

.mp-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary, #0B1B57);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--duration-fast, 150ms), transform var(--duration-fast, 150ms);
}

.mp-send:hover:not(:disabled),
.mp-send:focus-visible:not(:disabled) {
  background: var(--color-primary-hover, #07123D);
  transform: scale(1.05);
  outline: none;
}

.mp-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mp-disclaimer {
  margin: 10px 4px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-muted, #8f8f8f);
  text-align: center;
}

.mp-disclaimer a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.mp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .mp-hero {
    padding: var(--space-6, 2rem) var(--space-4, 1rem) var(--space-4, 1rem);
  }

  .mp-card {
    padding: 0 var(--space-3, 0.75rem);
  }

  .mp-card__inner {
    height: min(78vh, 720px);
    min-height: 420px;
  }

  .mp-msg {
    max-width: 90%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-typing span {
    animation: none;
  }
}
/* === End: layout/mira-page.css === */

/* === Start: components/buttons.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BUTTON COMPONENT LIBRARY (buttons.css)
   Consolidated Button System: Pill Shape, Outfit Font, Soft Elevation,
   Smooth Spring Transitions, and Premium Clinical Wellness Token Integration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE BUTTON (.btn)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 44px;
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--color-primary-light) !important;
}

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. BUTTON VARIANTS
   -------------------------------------------------------------------------- */

/* Primary Button (Crimson) */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

/* Secondary Button */
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-secondary);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary-hover);
}

/* Accent Button */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.btn--accent:hover {
  background: var(--color-accent-hover);
  color: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* Ghost Button */
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
  box-shadow: none;
}

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

/* Danger / Destructive Button */
.btn--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.btn--danger:hover {
  background: var(--color-danger);
  color: var(--color-surface);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Inverse Button (On Dark Backgrounds) */
.btn--inverse {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: transparent;
}

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

/* Modifier: Pill Shape */
.btn--pill {
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   3. BUTTON SIZES
   -------------------------------------------------------------------------- */

/* Small Button (34px height) */
.btn--sm {
  height: 34px;
  padding: 0 var(--space-4);
  font-size: var(--type-caption);
  border-radius: var(--radius-pill);
}

/* Large Button (52px height) */
.btn--lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: var(--type-body);
  border-radius: var(--radius-pill);
}

/* Full Width Button */
.btn--full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   Ensures legacy button classes inherit canonical system styles.
   -------------------------------------------------------------------------- */

/* Legacy Primary CTAs */
.btn-primary,
.btn--solid,
.auth-btn,
.btn-submit,
.form-submit,
.btn-place-order,
.btn-drawer-cart,
.btn-checkout,
.btn--catalogue,
.btn-price-filter,
.btn-detail-add-cart,
.admin-btn,
.btn-update {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn-primary:hover,
.btn--solid:hover,
.auth-btn:hover,
.btn-submit:hover,
.form-submit:hover,
.btn-place-order:hover,
.btn-drawer-cart:hover,
.btn-checkout:hover,
.btn--catalogue:hover,
.btn-price-filter:hover,
.btn-detail-add-cart:hover,
.admin-btn:hover,
.btn-update:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Legacy Outline / Secondary CTAs */
.btn--outline,
.btn-secondary,
.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring);
}

.btn--outline:hover,
.btn-secondary:hover,
.btn-cancel:hover {
  background: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary-hover);
  transform: translateY(-1px);
}

/* Legacy Header / Nav CTA */
.nav-cta {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-fast) var(--ease-spring);
  box-shadow: var(--shadow-xs);
}

.nav-cta:hover {
  background: var(--color-primary-hover);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Legacy Small Product Action Buttons — keep in sync with shop-layout card footer */
.btn-add-cart-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading);
  font-size: var(--type-caption);
  font-weight: 600;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--duration-fast);
  box-sizing: border-box;
}

.btn-add-cart-sm:hover {
  background: var(--color-primary-hover);
}

.btn-out-of-stock-sm,
.btn-add-cart-sm:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: #94a3b8;
  pointer-events: none;
}

.btn-view-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-heading);
  font-size: var(--type-caption);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: all var(--duration-fast);
}

.btn-view-product:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

/* Table Action Buttons */
.btn-edit {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: var(--color-secondary-light);
  color: var(--color-secondary-hover);
  border: 1px solid var(--color-border);
  transition: all var(--duration-fast);
}

.btn-edit:hover {
  background: var(--color-secondary);
  color: var(--color-surface);
}

.btn-delete {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid var(--color-danger-border);
  transition: all var(--duration-fast);
}

.btn-delete:hover {
  background: var(--color-danger);
  color: var(--color-surface);
}

.btn-view {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-muted);
  transition: all var(--duration-fast);
}

.btn-view:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
  padding: 7px 14px;
  font-size: 12px;
  text-decoration: none;
  box-sizing: border-box;
}
/* === End: components/buttons.css === */

/* === Start: components/cards.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — CARD COMPONENT LIBRARY (cards.css)
   Consolidated Card Architecture: 16px Radius, Crisp Surface (var(--color-surface)),
   Generous Breathing Room (32px Padding), Soft Elevation, and Smooth Spring Hover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE CARD (.card)
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-card, 16px);
  padding: var(--space-card-padding, var(--space-6, 32px));
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-normal, 200ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   2. CARD VARIANTS
   -------------------------------------------------------------------------- */

/* Elevated Card (Soft Elevation Shadow) */
.card--elevated {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border-subtle, #E9EBEE);
  box-shadow: var(--shadow-md);
}

.card--elevated:hover {
  box-shadow: var(--shadow-lg);
}

/* Interactive Card (Hover lift & shadow expansion) */
.card--interactive {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, #E1E3E6);
  cursor: pointer;
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-muted, #7F91C4);
}

.card--interactive:focus-visible {
  outline: 2px solid var(--color-primary, #0F245B);
  outline-offset: 2px;
}

/* Dark Theme Card (optional utility — not default admin shell) */
.card--dark {
  background: #1F1F1F;
  border: 1px solid #333;
  color: #f5f5f5;
}

.card--dark .card__header {
  border-bottom-color: #333;
}

.card--dark .card__footer {
  border-top-color: #333;
}

.card--dark .card__title {
  color: #fff;
}

.card--dark .card__subtitle {
  color: #b0b0b0;
}

/* --------------------------------------------------------------------------
   3. CARD SUB-COMPONENTS
   -------------------------------------------------------------------------- */
.card__header {
  padding-bottom: var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border, #E1E3E6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

.card__body {
  flex: 1;
}

.card__footer {
  padding-top: var(--space-4, 16px);
  margin-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border, #E1E3E6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

.card__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-h3, 24px);
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  margin: 0;
  line-height: var(--leading-h3, 1.25);
}

.card__subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-secondary, #61646A);
  margin-top: var(--space-1, 4px);
}

/* --------------------------------------------------------------------------
   4. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   -------------------------------------------------------------------------- */

/* Storefront Auth Card */
.auth-card {
  background: var(--color-surface, #FFFFFF);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  border: 1px solid var(--color-border, #E1E3E6);
}

.auth-card--wide {
  max-width: 520px;
}

/* Admin Dashboard Stat Card */
.stat-card {
  background: var(--admin-card-bg, #FFFFFF);
  border: 1px solid var(--admin-border, #E1E3E6);
  border-radius: var(--radius-card, 16px);
  padding: var(--space-6, 32px);
  display: flex;
  align-items: center;
  gap: var(--space-5, 24px);
  box-shadow: var(--shadow-sm);
}

/* Admin Welcome Banner Card */
.admin-welcome-card {
  background: linear-gradient(135deg, #0B1B57 0%, #07123D 100%);
  border: none;
  border-radius: var(--radius-card, 16px);
  padding: var(--space-8, 48px);
  margin-bottom: var(--space-8, 48px);
  box-shadow: var(--shadow-md);
  color: #fff;
}

/* Admin Form Card — scoped; light surface aligned with brand */
[data-theme="admin"] .form-card {
  background: var(--admin-card-bg, #FFFFFF);
  border: 1px solid var(--admin-border, #E1E3E6);
  border-radius: var(--radius-card, 16px);
  padding: 32px;
}

[data-theme="admin"] .form-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-h2, 32px);
  font-weight: 700;
  color: var(--admin-text-main, #1F1F1F);
  margin-bottom: var(--space-6, 32px);
}

/* Admin Login Viewport & Card */
.admin-login-body {
  font-family: var(--font-body, 'Inter', sans-serif);
  background: var(--admin-bg, #F9F9FB) !important;
  color: var(--admin-text-main, #1F1F1F) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 24px);
}

.admin-login-card {
  background: #FFFFFF;
  border: 1px solid var(--admin-border, #E1E3E6);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 44px 36px;
}

.admin-login-card .admin-btn {
  width: 100%;
  margin-top: 8px;
}

.admin-brand {
  text-align: center;
  margin-bottom: 32px;
}

.admin-brand img {
  display: block;
  height: auto;
  max-height: 72px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 16px;
}

.admin-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--admin-text-main, #1F1F1F);
  margin-bottom: 6px;
}

.admin-subtitle {
  font-size: 13px;
  color: var(--admin-text-muted, #5C5C5C);
  letter-spacing: 0.02em;
}

/* Admin Data Table Card Container */
.table-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* === End: components/cards.css === */

/* === Start: components/forms.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — FORM COMPONENT LIBRARY (forms.css)
   Consolidated Form System: 12px Input Radius, Subtle Focus Ring (Brand Navy),
   Inter Font Family, Soft Borders, and Smooth Transitions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FORM GROUP WRAPPER
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: var(--space-5, 24px);
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   2. FORM LABELS
   -------------------------------------------------------------------------- */
.form-label {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.02em);
  color: var(--color-text-primary, #1A1A1A);
  margin-bottom: var(--space-2, 8px);
}

[data-theme="admin"] .form-label {
  color: var(--admin-text-muted, #5C5C5C);
}

/* --------------------------------------------------------------------------
   3. FORM INPUTS & CONTROL ELEMENTS
   -------------------------------------------------------------------------- */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 18px;
  background-color: var(--color-surface, var(--color-surface));
  border: 1.5px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  appearance: none;
  transition: all var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted, #91949A);
  opacity: 0.8;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary, #0F245B);
  box-shadow: 0 0 0 4px rgba(15, 36, 91, 0.12);
  outline: none;
  background: var(--color-surface);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--color-surface-warm, #F0F1F3);
  color: var(--color-text-muted, #91949A);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Admin Input Theme Overrides — light admin shell */
[data-theme="admin"] .form-input,
[data-theme="admin"] .form-select,
[data-theme="admin"] .form-textarea {
  background-color: #FFFFFF;
  border-color: var(--admin-border, #E1E3E6);
  color: var(--admin-text-main, #1F1F1F);
}

[data-theme="admin"] .form-input:focus,
[data-theme="admin"] .form-select:focus,
[data-theme="admin"] .form-textarea:focus {
  border-color: var(--admin-accent, #0B1B57);
  box-shadow: 0 0 0 4px rgba(11, 27, 87, 0.12);
}

/* --------------------------------------------------------------------------
   4. SPECIALIZED CONTROL TYPES
   -------------------------------------------------------------------------- */

/* Select Dropdown with Custom Caret */
.form-select {
  background-color: var(--color-surface, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  padding-right: 44px;
  cursor: pointer;
}

[data-theme="admin"] .form-select {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5C5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
}

/* Textarea Field */
.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: var(--leading-normal, 1.5);
}

/* Checkbox & Radio Labels */
.form-checkbox-label,
.form-radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 10px);
  font-size: var(--type-small, 14px);
  font-weight: 500;
  color: var(--color-text-primary, #1A1A1A);
  cursor: pointer;
  user-select: none;
}

[data-theme="admin"] .form-checkbox-label,
[data-theme="admin"] .form-radio-label {
  color: var(--admin-text-main, #1F1F1F);
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE FORM GRID
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5, 24px);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   6. HINTS & VALIDATION ERROR STATES
   -------------------------------------------------------------------------- */
.form-hint {
  font-size: var(--type-caption, 12px);
  color: var(--color-text-secondary, #61646A);
  margin-top: var(--space-1, 6px);
}

[data-theme="admin"] .form-hint {
  color: var(--admin-text-muted, #5C5C5C);
}

.form-error {
  font-size: var(--type-caption, 12px);
  color: var(--color-danger, #C44B3D);
  margin-top: var(--space-1, 6px);
  font-weight: 600;
}

/* Input Error State Modifier */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger, #C44B3D) !important;
  box-shadow: 0 0 0 4px rgba(196, 75, 61, 0.15) !important;
}

/* --------------------------------------------------------------------------
   7. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   -------------------------------------------------------------------------- */

/* Storefront Auth Forms */
.auth-form-group {
  margin-bottom: var(--space-5, 24px);
}

.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.auth-input {
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  transition: all var(--duration-fast, 150ms);
}

.auth-input:focus {
  border-color: var(--color-primary, #0F245B);
  box-shadow: 0 0 0 4px rgba(15, 36, 91, 0.12);
  outline: none;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

/* Filter Bar & Search Inputs */
.filter-form,
.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 220px;
  padding: 10px 18px;
  background: var(--color-surface, var(--color-surface));
  border: 1.5px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  transition: all var(--duration-fast, 150ms);
}

.search-input:focus {
  border-color: var(--color-primary, #0F245B);
  box-shadow: 0 0 0 4px rgba(15, 36, 91, 0.12);
  outline: none;
}

.select-input {
  min-width: 140px;
  padding: 10px 38px 10px 18px;
  background-color: var(--color-surface, var(--color-surface));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  border: 1.5px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-small, 14px);
  color: var(--color-text-primary, #1A1A1A);
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
  transition: all var(--duration-fast, 150ms);
}

.select-input:focus {
  border-color: var(--color-primary, #0F245B);
  box-shadow: 0 0 0 4px rgba(15, 36, 91, 0.12);
  outline: none;
}

.search-btn {
  padding: 10px 22px;
  height: 42px;
  border-radius: var(--radius-button, 999px);
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-small, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

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

/* Form Actions Bar & Layout Helpers */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  margin-top: var(--space-7, 32px);
  padding-top: var(--space-5, 24px);
  border-top: 1px solid var(--color-border, #E1E3E6);
}

.form-align-end {
  display: flex;
  align-items: flex-end;
  padding-bottom: 12px;
}

.form-group-spaced {
  margin-top: var(--space-3, 12px);
}

.form-textarea-lg {
  min-height: 140px;
}

/* File Upload Controls */
input[type="file"].form-input {
  padding: 10px 14px;
  cursor: pointer;
}

input[type="file"].form-input::file-selector-button {
  background: var(--color-primary, #0F245B);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-button, 999px);
  padding: 6px 16px;
  margin-right: 12px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--type-caption, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

input[type="file"].form-input::file-selector-button:hover {
  background: var(--color-primary-hover, #0B1B57);
}

/* Gallery Grid Preview Manager */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
}

.gallery-item {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-input, 12px);
  overflow: hidden;
  border: 1px solid var(--color-border, #E1E3E6);
  background: var(--color-surface, var(--color-surface));
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-del-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(196, 75, 61, 0.9);
  color: var(--color-surface);
  border: none;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast, 150ms);
}

.gallery-del-btn:hover {
  background: var(--color-danger, #C44B3D);
  transform: scale(1.1);
}

/* Admin Login Form Controls */
.admin-group {
  margin-bottom: 20px;
}

.admin-label {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-input {
  width: 100%;
  padding: 13px 18px;
  background: var(--color-surface, var(--color-surface));
  border: 1.5px solid var(--color-border, #E1E3E6);
  border-radius: var(--radius-input, 12px);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  color: var(--color-text-primary, #1A1A1A);
  box-sizing: border-box;
  transition: all var(--duration-fast, 150ms);
}

.admin-input:focus {
  border-color: var(--color-primary, #0F245B);
  box-shadow: 0 0 0 4px rgba(15, 36, 91, 0.12);
  outline: none;
}
/* === End: components/forms.css === */

/* === Start: components/alerts.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — ALERT COMPONENT LIBRARY (alerts.css)
   Phase 3 Component Polish: 14px Radius, Inter Font Family, Soft Tones,
   and Clean Icon Alignment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE ALERT (.alert)
   -------------------------------------------------------------------------- */
.alert {
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-radius: var(--radius-input, var(--radius-md, 14px));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  font-weight: 500;
  line-height: var(--leading-normal, 1.5);
  margin-bottom: var(--space-6, 24px);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  border: 1px solid transparent;
  position: relative;
  box-shadow: var(--shadow-xs);
}

/* Alert Sub-elements */
.alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--font-size-body, 16px);
  font-weight: 600;
  margin-bottom: var(--space-1, 4px);
}

.alert__text {
  font-size: var(--font-size-small, 14px);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   2. ALERT VARIANTS
   -------------------------------------------------------------------------- */

/* Success Variant */
.alert--success,
.alert-success {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success-text, var(--color-success));
  border-color: var(--feedback-success-border, #86EFAC);
}

/* Danger / Error Variant */
.alert--danger,
.alert-danger,
.auth-alert--danger {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error-text, var(--color-danger));
  border-color: var(--feedback-error-border, #FCA5A5);
}

/* Warning Variant */
.alert--warning,
.alert-warning {
  background: var(--feedback-warning-bg, #FFFBEB);
  color: var(--feedback-warning-text, #D97706);
  border-color: var(--feedback-warning-border, #FDE68A);
}

/* Info Variant */
.alert--info,
.alert-info {
  background: var(--blue-50, #EFF6FF);
  color: var(--brand-secondary, var(--color-secondary));
  border-color: var(--blue-200, #BFDBFE);
}

/* --------------------------------------------------------------------------
   3. BACKWARD COMPATIBILITY ALIAS MAPPINGS
   -------------------------------------------------------------------------- */

/* Storefront Auth Alert Wrapper */
.auth-alert {
  padding: 14px 20px;
  border-radius: var(--radius-input, 14px);
  font-size: var(--font-size-small, 14px);
  margin-bottom: var(--space-5, 24px);
  border: 1px solid transparent;
}

/* Admin Login Alert */
.admin-alert {
  padding: 14px 20px;
  border-radius: var(--radius-input, 14px);
  font-size: 14px;
  margin-bottom: 24px;
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error-text, var(--color-danger));
  border: 1px solid var(--feedback-error-border, #FCA5A5);
}
/* === End: components/alerts.css === */

/* === Start: components/badges.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — BADGE COMPONENT LIBRARY (badges.css)
   Phase 3 Component Polish: 999px Pill Radius, Inter Typography, Vibrant
   Soft Tones, and Clean Accessibility Contrast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE BADGE (.badge)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: 5px 12px;
  border-radius: var(--radius-badge, var(--radius-pill, 999px));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  letter-spacing: var(--tracking-wide, 0.02em);
  text-transform: capitalize;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   2. BADGE VARIANTS
   -------------------------------------------------------------------------- */

/* Success / Published / Delivered / Paid */
.badge--success,
.badge-success,
.badge-published,
.status-delivered,
.pay-paid {
  background: var(--feedback-success-bg, #F0FDF4);
  color: var(--feedback-success, var(--color-success));
  border-color: var(--feedback-success-border, #86EFAC);
}

/* Warning / Draft / Pending */
.badge--warning,
.badge-draft,
.status-pending,
.pay-pending {
  background: var(--feedback-warning-bg, #FFFBEB);
  color: var(--feedback-warning, #D97706);
  border-color: var(--feedback-warning-border, #FDE68A);
}

/* Info / Processing */
.badge--info,
.status-processing {
  background: var(--blue-50, #EFF6FF);
  color: var(--brand-secondary, var(--color-secondary));
  border-color: var(--blue-200, #BFDBFE);
}

/* Shipped / Primary */
.badge--purple,
.status-shipped {
  background: var(--color-primary-light, #E6EDFB);
  color: var(--brand-primary, var(--color-primary));
  border-color: var(--color-primary-muted, #7F91C4);
}

/* Danger / Cancelled / Failed */
.badge--danger,
.status-cancelled,
.pay-failed {
  background: var(--feedback-error-bg, #FEF2F2);
  color: var(--feedback-error, var(--color-danger));
  border-color: var(--feedback-error-border, #FCA5A5);
}

/* Accent / Category / Parent Tag / Featured */
.badge--accent,
.badge-category,
.badge-parent {
  background: var(--color-primary-light, #E6EDFB);
  color: var(--brand-primary, var(--color-primary));
  border-color: var(--color-primary-muted, #7F91C4);
}

.badge-featured {
  background: #FFFBEB;
  color: #D97706;
  border-color: #FDE68A;
}

.badge-secondary {
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* --------------------------------------------------------------------------
   3. STOCK QUANTITY INDICATORS
   -------------------------------------------------------------------------- */
.stock-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-badge, 999px);
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
}

.stock-qty.in-stock {
  background: #F0FDF4;
  color: var(--color-success);
  border: 1px solid #86EFAC;
}

.stock-qty.out-of-stock {
  background: #FEF2F2;
  color: var(--color-danger);
  border: 1px solid #FCA5A5;
}
/* === End: components/badges.css === */

/* === Start: components/tables.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — DATA TABLE COMPONENT LIBRARY (tables.css)
   Phase 3 Component Polish: 16px Radius Containers, Inter Typography,
   Soft Borders (var(--color-border)), Generous Cell Padding, and Smooth Hover Rows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESPONSIVE TABLE CONTAINER & WRAPPER
   -------------------------------------------------------------------------- */
.table-wrapper,
.admin-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Table Card Container */
.table-card {
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.table-card-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   2. DATA TABLE BASE STYLES (.table / .admin-table)
   -------------------------------------------------------------------------- */
.table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
}

.table th,
.admin-table th {
  background: var(--surface-primary, var(--color-bg));
  padding: 16px 24px;
  font-size: var(--font-size-caption, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.02em);
  color: var(--text-secondary, var(--color-text-secondary));
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  white-space: nowrap;
}

.table td,
.admin-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  vertical-align: middle;
  color: var(--text-primary, var(--color-text-primary));
  transition: background-color var(--duration-fast, 150ms);
}

.table tr:last-child td,
.admin-table tr:last-child td {
  border-bottom: none;
}

.table tr:hover,
.admin-table tr:hover {
  background: rgba(0, 98, 254, 0.03);
}

/* --------------------------------------------------------------------------
   3. TABLE THUMBNAIL / MEDIA ASSETS
   -------------------------------------------------------------------------- */
.table__thumb,
.prod-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-input, 14px);
  object-fit: cover;
  background: var(--surface-primary, var(--color-bg));
  border: 1px solid var(--border-primary, var(--color-border));
  display: block;
}

/* --------------------------------------------------------------------------
   4. PAGINATION CONTROLS
   -------------------------------------------------------------------------- */
.pagination-container {
  padding: 18px 28px;
  border-top: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
  flex-wrap: wrap;
  gap: 12px;
}

.pagination-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-link {
  padding: 8px 16px;
  border-radius: var(--radius-button, 999px);
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  color: var(--text-primary, var(--color-text-primary));
  font-weight: 500;
  text-decoration: none;
  font-size: var(--font-size-caption, 12px);
  transition: all var(--duration-fast, 150ms) var(--ease-spring);
}

.page-link:hover {
  background: var(--color-primary-light, #E6EDFB);
  border-color: var(--brand-primary, var(--color-primary));
  color: var(--brand-primary, var(--color-primary));
}

.page-link.active {
  background: var(--brand-primary, var(--color-primary));
  color: var(--color-surface);
  border-color: var(--brand-primary, var(--color-primary));
}

.page-link--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.page-link--ellipsis {
  border: none;
  background: transparent;
  padding-left: 4px;
  padding-right: 4px;
  cursor: default;
}

/* --------------------------------------------------------------------------
   5. TABLE UTILITIES
   -------------------------------------------------------------------------- */
.text-right { text-align: right; }
.text-center { text-align: center; }
.inline-form { display: inline; }

.action-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btns.text-right,
.action-btns--end {
  justify-content: flex-end;
}

.table-empty {
  text-align: center;
  padding: 48px !important;
  color: var(--text-secondary, var(--color-text-secondary));
}

.table-summary-count {
  font-size: var(--font-size-small, 14px);
  color: var(--text-secondary, var(--color-text-secondary));
}

.product-title {
  color: var(--text-primary, var(--color-text-primary));
  font-size: 15px;
  font-weight: 600;
}

.product-sku-info {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

.product-sku-code {
  color: var(--brand-primary, var(--color-primary));
}

.product-subcat-info {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 3px;
}

.product-price {
  color: var(--brand-primary, var(--color-primary));
  font-size: 15px;
  font-weight: 700;
}

.product-sale-price {
  font-size: 12px;
  color: var(--feedback-error, var(--color-danger));
  text-decoration: line-through;
}

.category-description {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

/* Order Table Helpers */
.order-number {
  color: var(--text-primary, var(--color-text-primary));
  font-size: 14px;
  font-weight: 600;
}

.order-item-count {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

.customer-name {
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
}

.customer-contact,
.order-date {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
}

.payment-method {
  font-size: 12px;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 2px;
}

/* Admin table readability — explicit charcoal text on light rows */
[data-theme="admin"] .admin-table th {
  background: #1F1F1F;
  color: #FFFFFF;
  border-bottom-color: #1F1F1F;
}

[data-theme="admin"] .admin-table td {
  color: #1F1F1F;
  background: #FFFFFF;
}

[data-theme="admin"] .admin-table tr:hover td {
  background: #F9F9FB;
}

[data-theme="admin"] .product-title,
[data-theme="admin"] .customer-name,
[data-theme="admin"] .order-number {
  color: #1F1F1F;
}

[data-theme="admin"] .category-description,
[data-theme="admin"] .customer-contact,
[data-theme="admin"] .order-date,
[data-theme="admin"] .order-item-count,
[data-theme="admin"] .product-sku-info,
[data-theme="admin"] .product-subcat-info,
[data-theme="admin"] .table-summary-count,
[data-theme="admin"] .table-empty,
[data-theme="admin"] .payment-method {
  color: #5C5C5C;
}

[data-theme="admin"] .table-card-header {
  background: #FFFFFF;
  color: #1F1F1F;
}

/* Table Column Width Utilities */
.col-w-50 { width: 50px; }
.col-w-60 { width: 60px; }
.col-w-80 { width: 80px; }
.col-w-90 { width: 90px; }
.col-w-100 { width: 100px; }
.col-w-160 { width: 160px; }

/* Mobile card-stacking for admin/data tables */
@media (max-width: 768px) {
  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table tr {
    border: 1px solid var(--border-primary, var(--color-border));
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fff;
  }

  .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 0;
    text-align: right;
  }

  .admin-table td:last-child {
    border-bottom: none;
  }

  .admin-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: var(--text-secondary, #5c5c5c);
    flex: 0 0 42%;
  }

  .admin-table td.text-right,
  .admin-table .action-btns {
    justify-content: flex-end;
  }

  .admin-table .table-empty {
    text-align: center;
  }

  .admin-table .table-empty::before {
    display: none;
  }
}
/* === End: components/tables.css === */

/* === Start: components/modals.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — MODAL & DRAWER COMPONENT LIBRARY (modals.css)
   Consolidates storefront modals, slide-over cart drawers, overlays,
   dialog headers, body content, and action footers.
   Supports BEM syntax (.modal, .drawer, .overlay, etc.) with alias mapping
   for 100% backward compatibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BACKDROP OVERLAY (.overlay)
   -------------------------------------------------------------------------- */
.overlay,
.modal-overlay,
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 6, 26, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal, 1000);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              visibility var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.overlay.is-open,
.overlay.active,
.modal-overlay.is-open,
.modal-overlay.active,
.drawer-overlay.is-open,
.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   2. CENTERING MODAL DIALOG (.modal)
   -------------------------------------------------------------------------- */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-modal, 1000) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  pointer-events: none;
}

.modal,
.modal-content {
  background: var(--surface-primary, var(--color-surface));
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.2));
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.modal.is-open,
.modal.active,
.modal-content.is-open,
.modal-content.active {
  transform: scale(1);
  opacity: 1;
}

/* Dark Theme Scoped Modal */
[data-theme="admin"] .modal,
[data-theme="admin"] .modal-content {
  background: var(--admin-card-bg, #180d2e);
  border: 1px solid var(--admin-border, #2c1a4d);
  color: var(--admin-text-main, #f3f0ff);
}

/* --------------------------------------------------------------------------
   3. SLIDE-OVER DRAWER (.drawer / .cart-drawer)
   -------------------------------------------------------------------------- */
.drawer,
.drawer-cart,
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--surface-primary, var(--color-surface));
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.2));
  z-index: calc(var(--z-modal, 1000) + 10);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-normal, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.drawer.is-open,
.drawer.active,
.drawer-cart.is-open,
.drawer-cart.active,
.cart-drawer.is-open,
.cart-drawer.active {
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   4. MODAL & DRAWER SUB-COMPONENTS
   -------------------------------------------------------------------------- */
.modal__header,
.drawer__header {
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-bottom: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
}

[data-theme="admin"] .modal__header,
[data-theme="admin"] .drawer__header {
  border-bottom-color: var(--admin-border, #2c1a4d);
}

.modal__title,
.drawer__title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: var(--text-xl, 20px);
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  margin: 0;
}

[data-theme="admin"] .modal__title,
[data-theme="admin"] .drawer__title {
  color: var(--text-inverse, var(--color-surface));
}

.modal__close,
.drawer__close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #595D65);
  font-size: var(--text-xl, 20px);
  cursor: pointer;
  padding: var(--space-1, 4px);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast, 150ms), background-color var(--duration-fast, 150ms);
}

.modal__close:hover,
.drawer__close:hover {
  color: var(--text-primary, var(--color-text-primary));
  background: var(--neutral-100, #f5f6f7);
}

[data-theme="admin"] .modal__close:hover,
[data-theme="admin"] .drawer__close:hover {
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.1);
}

.modal__body,
.drawer__body {
  padding: var(--space-6, 24px);
  overflow-y: auto;
  flex: 1;
}

.modal__footer,
.drawer__footer {
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-top: 1px solid var(--border-primary, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3, 12px);
  background: var(--surface-secondary, var(--color-bg));
}

[data-theme="admin"] .modal__footer,
[data-theme="admin"] .drawer__footer {
  border-top-color: var(--admin-border, #2c1a4d);
  background: #140829;
}

/* --------------------------------------------------------------------------
   Admin confirmation dialog
   -------------------------------------------------------------------------- */
.admin-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 1000) + 50);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-confirm-modal.is-open,
.admin-confirm-modal:not([hidden]) {
  display: flex;
}

.admin-confirm-modal[hidden] {
  display: none !important;
}

.admin-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 6, 26, 0.65);
  backdrop-filter: blur(3px);
}

.admin-confirm-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #fff;
  color: #1f1f1f;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  padding: 24px;
}

.admin-confirm-modal__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-confirm-modal__message {
  margin: 0 0 20px;
  color: #5c5c5c;
  line-height: 1.5;
}

.admin-confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.admin-confirm-open {
  overflow: hidden;
}
/* === End: components/modals.css === */

/* === Start: components/toasts.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — TOAST COMPONENT LIBRARY (toasts.css)
   Phase 3 Component Polish: 14px Radius, Soft Elevation Shadows, Inter Fonts,
   Teal Primary Accents, and Smooth Spring Animations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOAST VIEWPORT CONTAINER (.toast-container)
   -------------------------------------------------------------------------- */
.toast-container,
.toast-viewport {
  position: fixed;
  bottom: var(--space-6, 32px);
  right: var(--space-6, 32px);
  z-index: var(--z-toast, 1300);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  max-width: 100%;
  pointer-events: none;
}

@media (max-width: 480px) {
  .toast-container,
  .toast-viewport {
    bottom: var(--space-4, 16px);
    right: var(--space-4, 16px);
    left: var(--space-4, 16px);
  }
}

.toast-container--drawer-open {
  right: auto;
  left: var(--space-6, 32px);
}

@media (max-width: 480px) {
  .toast-container--drawer-open {
    left: var(--space-4, 16px);
    right: auto;
    max-width: min(420px, calc(100vw - 32px));
  }
}

/* --------------------------------------------------------------------------
   2. TOAST CARD BASE STYLES (.toast)
   -------------------------------------------------------------------------- */
.toast,
.notification-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 14px 20px;
  min-width: 280px;
  max-width: 420px;
  background: var(--surface-card, var(--color-surface));
  border: 1px solid var(--border-primary, var(--color-border));
  border-left: 4px solid var(--brand-primary, var(--color-primary));
  border-radius: var(--radius-input, var(--radius-md, 14px));
  box-shadow: var(--shadow-lg, 0 8px 20px rgba(31, 41, 55, 0.06));
  color: var(--text-primary, var(--color-text-primary));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-small, 14px);
  line-height: var(--leading-normal, 1.5);
  animation: toastSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 150ms var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Admin Scoped Dark Theme Toast */
[data-theme="admin"] .toast,
[data-theme="admin"] .notification-toast {
  background: var(--admin-card-bg, #180d2e);
  border: 1px solid var(--admin-border, #2c1a4d);
  color: var(--admin-text-main, #f3f0ff);
}

/* --------------------------------------------------------------------------
   3. TOAST VARIANTS
   -------------------------------------------------------------------------- */

/* Success Variant */
.toast--success,
.toast-success {
  border-left-color: var(--feedback-success, var(--color-success));
}

.toast--success .toast__icon {
  color: var(--feedback-success, var(--color-success));
}

/* Error / Danger Variant */
.toast--error,
.toast--danger,
.toast-error,
.toast-danger {
  border-left-color: var(--feedback-error, var(--color-danger));
}

.toast--error .toast__icon,
.toast--danger .toast__icon {
  color: var(--feedback-error, var(--color-danger));
}

/* Warning Variant */
.toast--warning,
.toast-warning {
  border-left-color: var(--feedback-warning, #D97706);
}

.toast--warning .toast__icon {
  color: var(--feedback-warning, #D97706);
}

/* Info Variant */
.toast--info,
.toast-info {
  border-left-color: var(--brand-secondary, var(--color-secondary));
}

.toast--info .toast__icon {
  color: var(--brand-secondary, var(--color-secondary));
}

/* --------------------------------------------------------------------------
   4. TOAST SUB-COMPONENTS
   -------------------------------------------------------------------------- */
.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.toast__message {
  flex: 1;
  font-weight: 500;
}

.toast__close {
  background: transparent;
  border: none;
  color: var(--text-secondary, var(--color-text-secondary));
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-button, 999px);
  transition: all var(--duration-fast, 150ms);
}

.toast__close:hover {
  color: var(--text-primary, var(--color-text-primary));
  background: var(--surface-primary, var(--color-bg));
}

[data-theme="admin"] .toast__close {
  color: var(--admin-text-muted, #a497c6);
}

[data-theme="admin"] .toast__close:hover {
  color: var(--color-surface);
}
/* === End: components/toasts.css === */

/* === Start: components/hero.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — PAGE HERO COMPONENT LIBRARY (hero.css)
   Consolidates storefront page banners, hero sections, breadcrumb bars,
   headings, subtitles, and CTA action groups.
   Supports BEM syntax (.page-hero, .page-hero__title, etc.) with alias mapping
   for 100% backward compatibility.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE PAGE HERO (.page-hero)
   -------------------------------------------------------------------------- */
.page-hero,
.hero-section,
.page-banner,
.hero-banner {
  background: var(--gradient-primary);
  color: var(--color-text-inverse, var(--color-surface));
  padding: var(--space-9, 60px) var(--space-6, 24px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Modifiers */
.page-hero--compact {
  padding: var(--space-7, 40px) var(--space-6, 24px);
}

.page-hero--large {
  padding: var(--space-10, 80px) var(--space-6, 24px);
}

.page-hero--dark {
  background: var(--neutral-900, var(--color-text-primary));
}

/* --------------------------------------------------------------------------
   2. HERO SUB-COMPONENTS
   -------------------------------------------------------------------------- */

/* Hero Heading Title */
.page-hero__title,
.hero-title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(28px, 4vw, var(--text-4xl, 44px));
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.05em);
  text-transform: uppercase;
  color: var(--text-inverse, var(--color-surface));
  line-height: var(--leading-tight, 1.15);
  margin: 0 0 var(--space-3, 12px) 0;
}

/* Hero Subtitle / Description */
.page-hero__subtitle,
.hero-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--type-body-lg, 18px);
  color: var(--color-secondary-light, #ECEEF3);
  max-width: 680px;
  margin: 0 auto;
  line-height: var(--leading-relaxed, 1.6);
  font-weight: 400;
}

.page-hero--dark .page-hero__subtitle,
.page-hero--dark .hero-subtitle {
  color: var(--neutral-300, #d6d7da);
}

/* Hero CTA Action Buttons Container */
.page-hero__actions,
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  margin-top: var(--space-7, 28px);
  flex-wrap: wrap;
}

/* Hero Breadcrumb Wrapper */
.page-hero__breadcrumb,
.breadcrumb-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  font-size: var(--text-sm, 13px);
  color: var(--admin-text-muted, #a497c6);
  margin-bottom: var(--space-4, 16px);
}

.page-hero__breadcrumb a,
.breadcrumb-wrapper a {
  color: var(--color-secondary-light, #ECEEF3);
  text-decoration: none;
  transition: color var(--duration-fast, 150ms);
}

.page-hero__breadcrumb a:hover,
.breadcrumb-wrapper a:hover {
  color: var(--text-inverse, var(--color-surface));
  text-decoration: underline;
}
/* === End: components/hero.css === */

/* === Start: components/faq-accordion.css === */
/* ==========================================================================
   Page FAQ accordion (pfq-*) — centred heading over rounded question cards
   ========================================================================== */

.pfq {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
  background: var(--white, #fff);
}

.pfq__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.pfq__header {
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}

/* Matches the "Shop by Collections" / "Our Best Sellers" headings */
.pfq__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.pfq__title-accent {
  color: var(--color-brand-blue, #0062FE);
}

.pfq__subtitle {
  margin: 1rem auto 0;
  max-width: 44rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* One rounded card per question */
.pfq__panel {
  display: grid;
  gap: 16px;
}

.pfq__item {
  border: 1px solid var(--color-border-subtle, #ececf0);
  border-radius: 22px;
  background: #f9f9fb;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.pfq__item:hover,
.pfq__item.is-open {
  border-color: rgba(0, 98, 254, 0.25);
}

.pfq__item.is-open {
  background: #fff;
  box-shadow: 0 0 22px 3px rgba(255, 197, 38, 0.35);
}

.pfq__q-wrap {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.pfq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.5rem 1.75rem;
  border: 0;
  border-radius: 22px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: #000;
  transition: color 0.2s ease;
}

.pfq__q:focus-visible {
  outline: 2px solid var(--color-brand-blue, #0062FE);
  outline-offset: 2px;
}

.pfq__num,
.pfq__q-text {
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 1.6vw, 1.3rem);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.pfq__num {
  align-self: start;
}

.pfq__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  color: var(--color-text-primary);
  transition: transform 0.28s ease;
}

.pfq__item.is-open .pfq__chevron {
  transform: rotate(180deg);
}

.pfq__a {
  overflow: hidden;
}

.pfq__a[hidden] {
  display: none;
}

.pfq__item.is-open .pfq__a {
  animation: pfqReveal 0.32s ease;
}

.pfq__a-inner {
  padding: 0 4rem 1.6rem 1.75rem;
}

.pfq__a-inner p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
@keyframes pfqReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pfq__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.pfq__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--color-highlight, #FFC72C);
  color: #000;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.pfq__more-btn:hover,
.pfq__more-btn:focus-visible {
  background: var(--color-highlight-hover, #F5B400);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(11, 27, 87, 0.55);
}

@media (max-width: 640px) {
  .pfq__panel {
    gap: 12px;
  }

  .pfq__item,
  .pfq__q {
    border-radius: 16px;
  }

  .pfq__q {
    padding: 1.1rem 1.1rem;
  }

  .pfq__a-inner {
    padding: 0 1.1rem 1.2rem;
  }

  .pfq__more-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfq__chevron,
  .pfq__q,
  .pfq__item.is-open .pfq__a {
    transition: none;
    animation: none;
  }
}
/* === End: components/faq-accordion.css === */

/* === Start: components/motion-reveal.css === */
/* ==========================================================================
   Scroll reveal — homepage / storefront sections ([data-reveal])
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.6s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: opacity, transform;
}

[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

[data-reveal-child] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.5s var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-inview [data-reveal-child] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-child] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* === End: components/motion-reveal.css === */

/* === Start: components/enquiry-modal.css === */
/* ==========================================================================
   Enquiry modal — motion + modern visual system
   Loaded after extracted-styles so these rules win the cascade.
   ========================================================================== */

.em-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 19, 0.55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    opacity var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.em-overlay.is-open {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.em-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
    visibility var(--duration-drawer, 250ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.em-modal.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.em-modal__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  background: var(--color-surface);
  max-width: 900px;
  width: 100%;
  max-height: min(92vh, 760px);
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow:
    0 4px 16px rgba(15, 16, 19, 0.06),
    0 28px 64px -20px rgba(15, 16, 19, 0.28);
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  animation: none;
  transition:
    transform var(--duration-drawer, 250ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--duration-drawer, 250ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.em-modal.is-open .em-modal__inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* CLOSE */
.em-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
}

.em-close:hover {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-text-primary);
}

.em-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* LEFT — Form */
.em-left {
  padding: 36px 36px 32px;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  background: var(--color-surface);
}

.em-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.em-eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-primary);
}

.em-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-text-primary);
  margin: 0 0 8px;
  line-height: 1.2;
}

.em-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 36rem;
}

.em-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-success-text);
  margin-bottom: 16px;
}

.em-error {
  background: #fff8f9;
  border: 1px solid var(--color-primary-muted, #f2b3c4);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0;
}

.em-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.em-field:last-of-type {
  margin-bottom: 0;
}

.em-field label {
  font-family: var(--font-body);
  font-weight: 550;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text-secondary);
}

.em-field label span {
  color: var(--color-primary);
}

.em-field input,
.em-field select,
.em-field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-bg, #f9f9fb);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.em-field input:hover,
.em-field select:hover,
.em-field textarea:hover {
  border-color: #caccd0;
}

.em-field input:focus,
.em-field select:focus,
.em-field textarea:focus,
.em-field input:focus-visible,
.em-field select:focus-visible,
.em-field textarea:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
}

.em-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.em-field textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.55;
}

.em-field small {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.em-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 20px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  margin-top: 18px;
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) ease;
}

.em-submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.em-submit:active:not(:disabled) {
  transform: scale(0.99);
}

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

.em-submit:disabled {
  background: #bec0c4;
  border-color: #bec0c4;
  cursor: not-allowed;
}

@keyframes em-spin {
  to {
    transform: rotate(360deg);
  }
}

/* RIGHT — Contact info */
.em-right {
  padding: 36px 28px 32px;
  background:
    linear-gradient(165deg, #1a1b1e 0%, #2a2421 55%, #151619 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.88);
}

.em-right__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-surface);
  margin: 0 0 14px;
}

.em-phones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.em-phone,
.em-email {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background var(--duration-fast, 150ms) ease,
    border-color var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease;
  word-break: break-word;
}

.em-phone:hover,
.em-email:hover {
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.em-phone svg,
.em-email svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
}

.em-right__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 18px 0;
}

.em-hours {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-surface);
  letter-spacing: 0;
  margin-bottom: 6px;
}

.em-hours-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

.em-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.em-cert {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 5px 10px;
}

.em-cert-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.45;
}

.em-mobile-contacts {
  display: none;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.em-mobile-contacts a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
}

.em-mobile-contacts a:hover {
  border-color: var(--color-primary-muted, #f2b3c4);
  color: var(--color-primary);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .em-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .em-modal__inner {
    grid-template-columns: 1fr;
    max-height: min(94vh, 900px);
    border-radius: 16px 16px 12px 12px;
  }

  .em-right {
    display: none;
  }

  .em-left {
    padding: 28px 20px 24px;
    border-right: none;
  }

  .em-close {
    top: 12px;
    right: 12px;
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

  .em-close:hover {
    background: var(--color-surface);
    color: var(--color-primary);
  }

  .em-mobile-contacts {
    display: flex;
  }
}

@media (max-width: 480px) {
  .em-grid {
    grid-template-columns: 1fr;
  }

  .em-heading {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .em-overlay,
  .em-modal,
  .em-modal__inner {
    transition-duration: 0.01ms;
  }
}
/* === End: components/enquiry-modal.css === */

/* === Start: components/brand-select.css === */
/* ==========================================================================
   MEDRAL HEALTH CO — Brand custom select (enhances native <select>)
   ========================================================================== */

.brand-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  vertical-align: middle;
}

.brand-select--block {
  display: flex;
  width: 100%;
}

.brand-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  appearance: none !important;
  pointer-events: none !important;
}

.brand-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 8px 14px 8px 16px;
  border: 1px solid var(--border-primary, var(--color-border, rgba(31, 31, 31, 0.12)));
  border-radius: var(--radius-input, 14px);
  background: var(--surface-card, var(--color-surface, #fff));
  color: var(--text-primary, var(--color-text-primary, #1f1f1f));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease,
    background var(--duration-fast, 150ms) ease;
}

.brand-select--block .brand-select__trigger {
  border-radius: 8px;
  min-height: 44px;
  padding: 11px 13px;
  background: var(--color-bg, #f9f9fb);
}

.brand-select__trigger:hover {
  border-color: #caccd0;
}

.brand-select__trigger:focus {
  outline: none;
}

.brand-select__trigger:focus-visible {
  border-color: var(--color-primary, #0B1B57);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
  outline: none !important;
}

.brand-select.is-open .brand-select__trigger {
  border-color: var(--color-primary, #0B1B57);
  box-shadow: 0 0 0 3px rgba(11, 27, 87, 0.12);
}

.brand-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-select__value.is-placeholder {
  color: var(--text-secondary, var(--color-text-secondary, #6b6b6b));
  font-weight: 450;
}

.brand-select__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-secondary, #6b6b6b);
  transition: transform var(--duration-fast, 150ms) ease;
}

.brand-select.is-open .brand-select__chevron {
  transform: rotate(180deg);
  color: var(--color-primary, #0B1B57);
}

.brand-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: calc(var(--z-modal, 1200) + 5);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  background: var(--surface-card, var(--color-surface, #fff));
  border: 1px solid var(--border-primary, var(--color-border, rgba(31, 31, 31, 0.12)));
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(15, 16, 19, 0.06),
    0 18px 36px -16px rgba(15, 16, 19, 0.22);
}

.brand-select__list[hidden] {
  display: none !important;
}

.brand-select.is-drop-up .brand-select__list {
  top: auto;
  bottom: calc(100% + 6px);
}

.brand-select__option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary, var(--color-text-primary, #1f1f1f));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

.brand-select__option:hover,
.brand-select__option.is-active {
  background: rgba(11, 27, 87, 0.08);
  color: var(--color-primary, #0B1B57);
}

.brand-select__option.is-selected {
  background: var(--color-primary, #0B1B57);
  color: #fff;
}

.brand-select__option.is-selected:hover,
.brand-select__option.is-selected.is-active {
  background: var(--color-primary-hover, #07123D);
  color: #fff;
}

.brand-select__option:disabled,
.brand-select__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.brand-select--compact {
  min-width: 180px;
}

.brand-select--compact .brand-select__trigger {
  min-height: 40px;
  padding: 8px 36px 8px 16px;
  border-radius: var(--radius-input, 14px);
}

@media (max-width: 640px) {
  .brand-select--compact {
    min-width: 0;
    width: 100%;
  }

  .brand-select__option {
    min-height: 44px;
    padding: 12px 14px;
  }

  .brand-select__trigger {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-select__trigger,
  .brand-select__chevron,
  .brand-select__option {
    transition: none;
  }
}
/* === End: components/brand-select.css === */

/* === Start: components/mira-widget.css === */
/* ==========================================================================
   Mira — floating launcher button. Links to the dedicated /mira chat page
   (see layout/mira-page.css).
   ========================================================================== */

.mira-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px 0 16px;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: var(--gradient-primary, linear-gradient(135deg, #0B1B57 0%, #07123D 100%));
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px var(--shadow-color-lg, rgba(11, 27, 87, 0.35)), 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--duration-fast, 150ms) var(--ease-out, ease),
    box-shadow var(--duration-fast, 150ms) var(--ease-out, ease);
}

.mira-fab:hover,
.mira-fab:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -6px var(--shadow-color-lg, rgba(11, 27, 87, 0.4)), 0 4px 12px rgba(0, 0, 0, 0.2);
  outline: none;
}

.mira-fab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.mira-fab__icon svg {
  width: 20px;
  height: 20px;
}

.mira-fab__label {
  color: #000000;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .mira-fab {
    right: 16px;
    bottom: 16px;
    height: 48px;
    padding: 0 16px 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mira-fab {
    transition: none;
  }
}
/* === End: components/mira-widget.css === */

/* === Start: sections/trust-marquee.css === */
/* ═══════════════════════════════════════════════════════════════════
   TRUST MARQUEE — scrolling strip under the home-page hero
   Three identical tracks scroll by exactly one track width, so the loop
   repeats without a gap. Keep TRUST_LOOPS in home-trust-marquee.ejs in
   sync with the translate distance below.
   ═══════════════════════════════════════════════════════════════════ */
.tm-section {
  overflow: hidden;
  padding: 8px 0;
  background: var(--color-highlight, #0062FE);
  color: var(--color-on-highlight, #fff);
}

.tm-marquee {
  display: flex;
  width: max-content;
  animation: tm-scroll 45s linear infinite;
  will-change: transform;
}

.tm-track {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-shrink: 0;
  margin: 0;
  padding: 0 36px 0 0;
  list-style: none;
}

.tm-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui, 'Instrument Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tm-item__icon {
  font-size: 18px;
  line-height: 1;
}

.tm-divider {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

@keyframes tm-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

@media (max-width: 640px) {
  .tm-section {
    padding: 6px 0;
  }
  .tm-track {
    gap: 24px;
    padding-right: 24px;
  }
  .tm-item {
    font-size: 14px;
    gap: 8px;
  }
  .tm-item__icon {
    font-size: 16px;
  }
  .tm-marquee {
    animation-duration: 35s;
  }
}

/* Reduced motion: no scrolling — show one copy that wraps, centred */
@media (prefers-reduced-motion: reduce) {
  .tm-marquee {
    width: auto;
    animation: none;
    justify-content: center;
  }
  .tm-track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    padding: 0 16px;
  }
  .tm-track[aria-hidden="true"] {
    display: none;
  }
}
/* === End: sections/trust-marquee.css === */

/* === Start: sections/corporate-testing.css === */
/* Corporate campaign: quote hero, alternating services and workplace programmes. */
.corp-page { color: var(--color-text-primary, #0b1b57); font-family: var(--font-body, 'Inter', sans-serif); }
.corp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.corp-header { position: sticky; top: 0; z-index: 200; background: #fff; box-shadow: 0 2px 16px rgba(20, 62, 74, .06); }
.corp-header__inner { max-width: 1320px; min-height: 88px; padding: 12px 32px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.corp-header__logo img { display: block; width: 210px; height: 60px; object-fit: contain; }
.corp-header__actions { display: flex; align-items: center; gap: 28px; }
.corp-header__phone { display: inline-flex; align-items: center; gap: 9px; color: var(--color-brand-blue, #0062fe); font-weight: 650; font-size: 17px; text-decoration: none; }
.corp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 12px 24px; border-radius: 9px; background: var(--color-brand-blue, #0062fe); color: #fff; font-family: var(--font-ui, 'Instrument Sans', sans-serif); font-weight: 650; font-size: 14px; text-decoration: none; transition: background-color .2s; }
.corp-btn:hover { background: #004ed0; color: #fff; }
.corp-btn:focus-visible, .corp-header a:focus-visible, .corp-hero__how:focus-visible { outline: 3px solid #0062fe; outline-offset: 4px; }
.corp-title { margin: 0; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: clamp(27px, 3vw, 40px); font-weight: 650; line-height: 1.2; text-align: center; letter-spacing: -.025em; }
.corp-title span { color: var(--color-brand-blue, #0062fe); }
.corp-sub { max-width: 770px; margin: 18px auto 0; font-size: 16px; line-height: 1.65; text-align: center; color: var(--color-text-secondary, #536074); }
.corp-hero--enquiry { min-height: calc(100svh - 88px); padding: 28px 32px 30px; background: #eafafa; }
.corp-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); gap: clamp(28px, 4vw, 58px); align-items: start; max-width: 1120px; margin: auto; }
.corp-eyebrow { display: inline-flex; margin: 0 0 12px; padding: 5px 12px; border: 1px solid #bdd9ff; border-radius: 30px; background: #ffffffa8; font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #0062fe; }
.corp-hero__title { margin: 0; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.corp-hero__title span { color: #0062fe; }
.corp-hero__sub { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary, #536074); }
.corp-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; gap: 8px 18px; margin: 16px 0 8px; padding: 16px 20px; border-radius: 20px; background: #ffffffdc; }
.corp-services li { position: relative; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.corp-services li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #0062fe; }
.corp-hero__photo { margin: 0; position: relative; }
.corp-hero__photo img { display: block; width: auto; max-width: 100%; height: clamp(320px, 46vh, 460px); object-fit: contain; margin: 0 auto; }
.corp-hero__photo figcaption { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 10px; background: #fffffff0; font-size: 11px; text-align: center; }
.corp-hero__how { display: inline-flex; gap: 12px; margin-top: 10px; color: #0062fe; font-size: 12px; font-weight: 650; text-decoration: none; }
.corp-lead-card { margin-top: 18px; overflow: hidden; border: 1px solid #dae6e9; border-radius: 24px; background: #e8eef1; box-shadow: 0 12px 40px rgba(20, 62, 74, .04); scroll-margin-top: 108px; }
.corp-lead-card__title { margin: 0; padding: 20px 22px; background: #fff; color: #0062fe; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 22px; line-height: 1.2; }
.corp-lead-card .ct-form { padding: 18px 22px; }
.corp-lead-card .ct-form-grid2 { gap: 12px; }
.corp-lead-card .ct-field { margin-bottom: 10px; }
.corp-lead-card .ct-label { margin-bottom: 4px; font-size: 11px; }
.corp-lead-card .ct-input, .corp-lead-card .ct-select { min-height: 40px; height: 40px; padding: 8px 10px; border: 1px solid #dce1e5; border-radius: 10px; background-color: #fff; font-size: 12px; }
.corp-lead-card .ct-select { padding-right: 30px; }
.corp-lead-card .ct-textarea { min-height: 62px; height: 62px; padding: 8px 10px; border: 1px solid #dce1e5; border-radius: 10px; background: #fff; font-size: 12px; resize: vertical; }
.corp-lead-card .corp-submit { width: 100%; min-height: 42px; margin-top: 2px; border-radius: 9px; border-color: #0062fe; background: #0062fe; font-size: 13px; }
.corp-lead-card .corp-submit:hover { background: #004ed0; border-color: #004ed0; }
.corp-lead-card__note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; text-align: center; color: var(--color-text-secondary, #536074); }
.corp-lead-card > .form-banner { margin: 16px 22px; }
.corp-modules { padding: 70px 0; background: #fff; }
.corp-modules__list { display: grid; gap: 28px; margin-top: 44px; }
.corp-module { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 36px; padding: 36px; border-radius: 26px; background: #fff7ea; }
.corp-module:nth-child(even) { background: #eafafa; }
.corp-module__copy h3 { margin: 0 0 14px; color: #0062fe; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: clamp(23px, 2.1vw, 30px); line-height: 1.2; }
.corp-module__copy p { margin: 0; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.75; color: var(--color-text-secondary, #536074); }
.corp-module__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.corp-module__image--cutout { object-fit: contain; }
.corp-module--reverse .corp-module__image { grid-column: 1; grid-row: 1; }
.corp-module--reverse .corp-module__copy { grid-column: 2; grid-row: 1; }
.corp-panel { padding: 0 0 60px; }
.corp-panel__card { padding: 28px; background: #eef6ff; border-radius: 22px; }
.corp-panel__label { margin: 0 0 20px; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 24px; font-weight: 600; }
.corp-panel__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.corp-panel__list li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.corp-panel__list svg { flex-shrink: 0; color: #0062fe; }
.corp-panel__note { margin: 22px 0 0; font-size: 12px; color: var(--color-text-secondary, #536074); }
.corp-how { padding: 64px 0; background: #f6f8fb; scroll-margin-top: 110px; }
.corp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.corp-step__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; color: #fff; background: #0062fe; font-weight: 650; }
.corp-step__title { margin: 0 0 10px; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 21px; }
.corp-step__desc { margin: 0; color: var(--color-text-secondary, #536074); font-size: 14px; line-height: 1.6; }
.corp-questions { padding: 70px 0; }
.corp-questions__list { max-width: 900px; margin: 32px auto 0; }
.corp-questions details { border-bottom: 1px solid #e3e8ef; padding: 20px 0; }
.corp-questions summary { cursor: pointer; font-size: 17px; font-weight: 600; }
.corp-questions details p { margin: 14px 0 0; max-width: 780px; font-size: 14px; line-height: 1.7; color: var(--color-text-secondary, #536074); }
.corp-closing { padding: 46px 0; background: #eafafa; }
.corp-closing__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.corp-closing h2 { margin: 0 0 12px; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: clamp(25px, 3vw, 36px); }
.corp-closing p { margin: 0; color: var(--color-text-secondary, #536074); font-size: 15px; }
@media (min-width: 901px) and (min-height: 701px) and (max-height: 800px) {
  .corp-hero__photo img { height: 280px; }
  .corp-hero--enquiry { padding-top: 20px; padding-bottom: 20px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .corp-hero--enquiry { padding: 18px 32px; }
  .corp-hero__title { font-size: 26px; }
  .corp-hero__photo img { height: clamp(220px, 38vh, 280px); }
  .corp-services { margin-top: 10px; padding: 12px 16px; gap: 6px 16px; }
  .corp-lead-card { margin-top: 0; }
  .corp-lead-card__title { padding: 14px 20px; font-size: 20px; }
  .corp-lead-card .ct-form { padding: 12px 20px; }
  .corp-lead-card .ct-field { margin-bottom: 6px; }
}
@media (max-width: 900px) {
  .corp-header__inner { padding: 12px 20px; }
  .corp-header__logo img { width: 180px; }
  .corp-header__actions { gap: 16px; }
  .corp-header__phone { font-size: 14px; }
  .corp-hero--enquiry { min-height: 0; padding: 36px 24px; }
  .corp-hero__inner { max-width: 640px; grid-template-columns: 1fr; gap: 28px; }
  .corp-hero__photo img { height: 360px; }
  .corp-lead-card { margin-top: 0; }
  .corp-lead-card .ct-input, .corp-lead-card .ct-select { height: 46px; font-size: 14px; }
  .corp-lead-card .ct-label { font-size: 12px; }
  .corp-lead-card .ct-textarea { font-size: 14px; height: 80px; }
  .corp-steps, .corp-panel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .corp-module { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .corp-module--reverse .corp-module__image, .corp-module--reverse .corp-module__copy { grid-column: auto; grid-row: auto; }
  .corp-closing__inner { flex-direction: column; align-items: flex-start; }
  .corp-modules, .corp-questions { padding: 48px 0; }
  .corp-modules__list { margin-top: 28px; gap: 20px; }
}
@media (max-width: 600px) {
  .corp-header__inner { min-height: 74px; padding: 8px 16px; gap: 10px; }
  .corp-header__logo img { width: 140px; height: 50px; }
  .corp-header__actions { gap: 12px; }
  .corp-header .corp-btn { padding: 10px 12px; min-height: 40px; font-size: 12px; }
  .corp-header__phone span { display: none; }
  .corp-hero--enquiry { padding: 28px 16px 36px; }
  .corp-hero__title { font-size: 29px; }
  .corp-services { padding: 16px; gap: 10px 14px; }
  .corp-hero__photo img { height: auto; width: 100%; max-height: 420px; }
  .corp-lead-card .ct-form-grid2 { grid-template-columns: 1fr; gap: 0; }
  .corp-lead-card .ct-form { padding: 20px; }
  .corp-lead-card .ct-field { margin-bottom: 14px; }
  .corp-container { padding: 0 16px; }
  .corp-module { padding: 22px; border-radius: 20px; }
  .corp-module__image { border-radius: 14px; }
  .corp-steps { grid-template-columns: 1fr; }
  .corp-panel__card { padding: 22px; }
  .corp-panel__list { gap: 16px 12px; }
  .corp-panel__list li { font-size: 12px; }
}
@media (max-width: 360px) {
  .corp-header__logo img { width: 120px; }
  .corp-services, .corp-panel__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .corp-btn { transition: none; } }
/* === End: sections/corporate-testing.css === */

/* === Start: sections/how-it-works.css === */
/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — homepage 3-step process.

   Desktop: a real scroll lock. The page cannot scroll at all while
   steps are revealing — only after all three are shown. This is
   enforced with `overflow: hidden` on <html> (see the inline script
   in views/index.ejs), set the instant the section reaches the header
   line. That's a browser-level freeze, not JS preventDefault()-ing
   individual wheel/touch events — an earlier version tried that and
   it's a race: a fast flick or trackpad fling can advance the real
   scroll position past the section in one native update, before JS
   ever gets a chance to attach blocking listeners, leaving the
   section stuck showing only step 1 with dead space where 2 and 3
   should be. The current approach instead corrects AFTER any scroll
   event, however large: snap back exactly to the trigger line, then
   freeze — so it can't be outrun by how fast the scroll happened.
   .hiw-stage stays position: sticky as a secondary safety net, but the
   freeze itself is what actually holds it in place.

   Steps ACCUMULATE left to right and stay visible once shown. Layout
   matches the reference: an image row on top, the progress line/dots
   below the images, then plain step text (no card container) below
   the line. Segments grow individually and dots light up cumulatively
   as the frozen section is scrolled through via wheel/touch/keys.

   Mobile / prefers-reduced-motion: the lock is skipped entirely in
   favour of plain stacked cards that are all visible immediately —
   scroll-jacking reads as janky on touch and is an accessibility
   concern under reduced motion.
   ═══════════════════════════════════════════════════════════════════ */
.hiw-section {
  /* This is the last section before the footer, so it carries its own
     bottom padding (previously provided by the CTA block that used to
     sit below the cards, before the "Book a test" button moved up next
     to the heading). */
  padding: 96px 0 64px;
  background: var(--offwhite, #f4f5f8);
}

.hiw-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.hiw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  margin-bottom: 24px;
}

.hiw-head__text {
  min-width: 0;
}

.hiw-head .section-eyebrow {
  margin-bottom: 12px;
}

.hiw-head .section-title {
  margin-bottom: 0;
}

.hiw-head .hiw-cta__btn {
  flex-shrink: 0;
}

/* ── Desktop pinned stage ── */
.hiw-pinwrap {
  /* No scroll runway needed — the freeze engages the instant this is
     reached, rather than tracking progress across a scroll distance.
     Sized to hold exactly one stage's worth of space. */
  position: relative;
  height: min(660px, calc(100vh - var(--hiw-header-h, 92px) - 24px));
}

.hiw-stage {
  position: sticky;
  top: var(--hiw-header-h, 92px);
  height: 100%;
  display: flex;
  align-items: center;
}

.hiw-pin-inner {
  width: 100%;
}

.hiw-stage-row {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.hiw-stage-col {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #ecedf0;
  box-shadow: 0 20px 40px -26px rgba(31, 31, 31, 0.3);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hiw-stage-col.is-active {
  opacity: 1;
  transform: translateY(0);
}

.hiw-stage-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Connecting progress row — segments grow individually as each
   transition happens, dots accumulate (current + all passed). Sits
   below the image row, above the step text, like the reference. */
.hiw-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 32px;
}

.hiw-progress__seg {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--lightgray, #e1e3e6);
  overflow: hidden;
}

.hiw-progress__seg-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--primary-color, #0B1B57);
  transform-origin: left center;
  transform: scaleX(0);
  /* JS sets transform on every scroll tick — without a transition it
     snaps instantly; this makes the fill glide instead. */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiw-progress__dot {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white, #fff);
  border: 2px solid var(--lightgray, #e1e3e6);
  color: var(--gray, #8f8f8f);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  transform: scale(1);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hiw-progress__dot.is-active {
  background: var(--primary-color, #0B1B57);
  border-color: var(--primary-color, #0B1B57);
  color: #fff;
  transform: scale(1.12);
}

/* Text row — plain step text below the progress line (no card
   container), matching the reference. */
.hiw-details-row {
  display: flex;
  gap: 24px;
  text-align: left;
}

.hiw-details-col {
  flex: 1 1 0;
  min-width: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.hiw-details-col.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile / reduced-motion fallback (stacked cards) ── */
.hiw-fallback {
  display: none;
  padding-top: 48px;
}

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

.hiw-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  border: 1px solid var(--lightgray, #e1e3e6);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 36px -26px rgba(31, 31, 31, 0.28);
}

.hiw-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ecedf0;
}

.hiw-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hiw-card__body {
  padding: 22px 22px 26px;
}

.hiw-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-light, #fde7ed);
  color: var(--primary-color, #0B1B57);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}

.hiw-card__title {
  margin: 0 0 8px;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--black, #1f1f1f);
}

.hiw-card__desc {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray, #5c5c5c);
}

.hiw-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--primary-color, #0B1B57);
  color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hiw-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(11, 27, 87, 0.55);
}

/* ── Switch to the static fallback on mobile or reduced motion ── */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .hiw-pinwrap {
    display: none;
  }

  .hiw-fallback {
    display: block;
  }
}

@media (max-width: 860px) {
  .hiw-section {
    padding-top: 72px;
  }

  .hiw-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .hiw-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .hiw-card__body {
    padding: 18px 18px 22px;
  }
}
/* === End: sections/how-it-works.css === */

/* === Start: sections/home-photo-hero.css === */
.home-photo-hero {
 position: relative; isolation: isolate; min-height: calc(100svh - 76px); display: flex; align-items: center; background-color: #f7f4ed;
 background-image: linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 24%, rgba(255,255,255,.12) 43%, rgba(255,255,255,0) 58%), url('/assets/images/hero/family-background.webp');
 background-size: cover; background-position: center, right center; background-repeat: no-repeat;
}
.home-photo-hero__inner { width: 100%; max-width: 1600px; margin-inline: auto; padding: 54px clamp(24px, 4vw, 80px); }
.home-photo-hero__content { width: 46%; max-width: 640px; }
.home-photo-hero__eyebrow { margin: 0 0 22px; color: #173251; font-family: var(--font-ui, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-photo-hero h1 { margin: 0; color: #102b50; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(36px, 3.7vw, 62px); line-height: 1.1; letter-spacing: -.035em; }
.home-photo-hero h1 span { color: #006ee8; }
.home-photo-hero__description { max-width: 540px; margin: 24px 0 30px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; color: #173251; }
.home-photo-hero__cta { display: inline-flex; align-items: center; gap: 16px; }
.home-photo-hero__mobile { display: none; }
@media (min-width: 1700px) { .home-photo-hero__content { width: 45%; } }
@media (max-width: 900px) {
 .home-photo-hero { align-items: flex-start; background-image: linear-gradient(180deg, #faf8f2 0%, rgba(250,248,242,.95) 47%, rgba(250,248,242,0) 70%), url('/assets/images/hero/family-background.webp'); background-size: cover, auto 58%; background-position: center, right bottom; }
 .home-photo-hero__inner { padding-top: 38px; padding-bottom: max(300px, 46svh); }
 .home-photo-hero__content { width: 100%; max-width: 570px; }
 .home-photo-hero h1 { font-size: clamp(32px, 5.5vw, 46px); }
}
@media (max-width: 560px) {
 .home-photo-hero { display: block; min-height: 0; background: #faf8f2; }
 .home-photo-hero__mobile { display: block; width: 100%; }
 .home-photo-hero__mobile img { display: block; width: 100%; height: auto; }
 .home-photo-hero__inner { display: none; }
 .home-photo-hero__eyebrow { margin-bottom: 12px; font-size: 10px; }
 .home-photo-hero h1 { font-size: clamp(28px, 7.7vw, 36px); line-height: 1.08; }
 .home-photo-hero__description { margin: 14px 0 18px; font-size: 14px; line-height: 1.55; }
 .home-photo-hero__cta { min-height: 44px; padding: 12px 22px; font-size: 14px; }
 .site-header--home .site-nav, #section-header.site-header--home.is-scrolled .site-nav { height: 68px; }
 .site-header--home .nav-logo { transform: none; }
 .site-header--home .nav-logo img, #section-header.site-header--home.is-scrolled .nav-logo img { height: auto; max-height: 48px; width: 100%; object-fit: contain; }
}
/* === End: sections/home-photo-hero.css === */

/* === Start: sections/home-consult-banner.css === */
/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE — FREE CONSULTATION BANNER (sits above the footer)
   ═══════════════════════════════════════════════════════════════════ */

.hcb-section {
  padding: 0 24px 72px;
}

.hcb-card {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-height: 420px;
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-light, #E6EDFB) 0%, var(--color-bg, #f9f9fb) 70%);
  box-shadow: var(--shadow-lg);
}

.hcb-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 48px;
}

.hcb-avatars {
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.hcb-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-bg, #f9f9fb);
  color: #000000;
  margin-right: -12px;
}

.hcb-avatar svg {
  width: 20px;
  height: 20px;
}

.hcb-avatar--1 { background: var(--color-accent); z-index: 3; }
.hcb-avatar--2 { background: var(--color-accent); z-index: 2; }
.hcb-avatar--3 { background: var(--color-accent); z-index: 1; }

.hcb-trust {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 46ch;
}

.hcb-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0;
}

.hcb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 28px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-md);
  transition:
    background var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) ease;
}

.hcb-btn:hover,
.hcb-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

.hcb-media {
  position: relative;
  min-height: 320px;
}

.hcb-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

@media (max-width: 900px) {
  .hcb-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hcb-content {
    padding: 40px 28px;
  }

  .hcb-media {
    min-height: 320px;
    order: -1;
  }
}

@media (max-width: 640px) {
  .hcb-section {
    padding: 0 16px 48px;
  }

  .hcb-content {
    padding: 32px 22px;
  }

  .hcb-media {
    min-height: 260px;
  }
}
/* === End: sections/home-consult-banner.css === */

/* === Start: sections/about-us.css === */
/* ═══════════════════════════════════════════════════════════════════
   REDESIGNED ABOUT US PAGE STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO BANNER ── */
.about-hero {
  position: relative;
  height: 440px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 48px;
  color: #ffffff;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(15, 23, 42, 0.4) 60%,
    rgba(15, 23, 42, 0.15) 100%
  );
  z-index: 1;
}

.about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.about-hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ── 2. SPLIT ROW SECTIONS (OUR STORY & OUR PEOPLE) ── */
.about-split-row {
  display: flex;
  min-height: 520px;
  width: 100%;
}

.about-split-card--red {
  flex: 1;
  background-color: var(--primary-color, #0B1B57);
  color: #ffffff;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-split-card--white {
  flex: 1;
  background-color: #ffffff;
  color: #0F1733;
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-split-media {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.about-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dual Media Grid for Our People */
.about-dual-media {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background-color: #f1f5f9;
}

.about-dual-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Eyebrows & Typography */
.about-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.about-eyebrow--light {
  color: rgba(255, 255, 255, 0.85);
}

.about-eyebrow--red {
  color: var(--primary-color, #0B1B57);
}

.about-heading {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.about-heading--light {
  color: #ffffff;
}

.about-heading--dark {
  color: #0F1733;
}

.about-paragraph {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 20px;
}

.about-paragraph--light {
  color: rgba(255, 255, 255, 0.9);
}

.about-paragraph--dark {
  color: #475569;
}

/* ── 3. OUR VALUES SECTION ── */
.about-values-section {
  padding: 100px 24px;
  background-color: #ffffff;
  text-align: center;
}

.about-values-container {
  max-width: 1280px;
  margin: 0 auto;
}

.about-values-header {
  margin-bottom: 60px;
  text-align: center;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.about-value-card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.about-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-value-img-wrap {
  height: 240px;
  width: 100%;
  overflow: hidden;
}

.about-value-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.about-value-card:hover .about-value-img-wrap img {
  transform: scale(1.05);
}

.about-value-body {
  padding: 24px 20px;
  flex: 1;
}

.about-value-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F1733;
  margin-bottom: 10px;
}

.about-value-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #64748b;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .about-hero {
    height: 320px;
    padding: 0 24px;
  }

  .about-hero-title {
    font-size: 2.5rem;
  }

  .about-split-row {
    flex-direction: column;
    min-height: auto;
  }

  .about-split-row--reverse {
    flex-direction: column-reverse;
  }

  .about-split-card--red,
  .about-split-card--white {
    padding: 48px 24px;
  }

  .about-split-media {
    height: 350px;
  }

  .about-heading {
    font-size: 2rem;
  }

  .about-values-section {
    padding: 60px 20px;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-dual-media {
    grid-template-columns: 1fr;
    height: auto;
  }

  .about-dual-media img {
    height: 250px;
  }
}
/* === End: sections/about-us.css === */

/* === Start: sections/b2b-white-labelling.css === */
/* ═══════════════════════════════════════════════════════════════════
   MEDRAL HEALTH CO — B2B WHITE LABELLING PAGE STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. HERO BANNER ── */
.b2b-hero {
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 80px 48px;
  color: #ffffff;
  overflow: hidden;
}

.b2b-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(11, 27, 87, 0.75) 50%,
    rgba(15, 23, 42, 0.95) 100%
  );
  z-index: 1;
}

.b2b-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.b2b-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 20px;
}

.b2b-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
}

.b2b-hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 850px;
  margin-bottom: 32px;
}

.b2b-hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.b2b-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background-color: #ffffff;
  color: #0B1B57;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.b2b-btn-primary:hover {
  background-color: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  color: #07123D;
}

.b2b-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}

.b2b-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  color: #ffffff;
}

/* ── 2. SECTION CONTAINER & TYPOGRAPHY ── */
.b2b-section {
  padding: 90px 24px;
  background-color: #ffffff;
}

.b2b-section--alt {
  background-color: #f8fafc;
}

.b2b-section--dark {
  background-color: #0F1733;
  color: #ffffff;
}

.b2b-container {
  max-width: 1240px;
  margin: 0 auto;
}

.b2b-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.b2b-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #0B1B57;
  margin-bottom: 12px;
}

.b2b-eyebrow--light {
  color: #FB923C;
}

.b2b-section-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #0F1733;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.b2b-section-title--light {
  color: #ffffff;
}

.b2b-section-desc {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.7;
}

.b2b-section-desc--light {
  color: #94a3b8;
}

/* ── 3. WHY PARTNER GRID ── */
.b2b-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.b2b-why-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 36px 30px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.b2b-why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(11, 27, 87, 0.08);
  border-color: rgba(11, 27, 87, 0.3);
}

.b2b-why-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(11, 27, 87, 0.08);
  color: #0B1B57;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 24px;
}

.b2b-why-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0F1733;
  margin-bottom: 14px;
  line-height: 1.3;
}

.b2b-why-text {
  font-size: 0.98rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 16px;
}

.b2b-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.b2b-why-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.5;
}

.b2b-why-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #0B1B57;
  font-weight: 700;
}

/* ── 4. WHITE LABELLING SERVICES BANNER ── */
.b2b-services-box {
  background: linear-gradient(135deg, #ffffff 0%, #E6EDFB 100%);
  border: 1px solid rgba(11, 27, 87, 0.2);
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 10px 30px rgba(11, 27, 87, 0.06);
  margin-top: 40px;
}

.b2b-services-header {
  max-width: 800px;
  margin-bottom: 32px;
}

.b2b-services-header h3 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0F1733;
  margin-bottom: 12px;
}

.b2b-services-header p {
  font-size: 1.05rem;
  color: #475569;
}

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

.b2b-service-pill {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.b2b-service-pill-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #0B1B57;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.b2b-service-pill-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F1733;
  margin-bottom: 4px;
}

.b2b-service-pill-desc {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

/* ── 5. PRODUCT CATEGORIES GRID ── */
.b2b-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.b2b-category-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.b2b-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  border-color: #0B1B57;
}

.b2b-category-img {
  height: 180px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.b2b-category-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.b2b-category-card:hover .b2b-category-img img {
  transform: scale(1.06);
}

.b2b-category-body {
  padding: 22px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.b2b-category-icon-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0B1B57;
  flex-shrink: 0;
}

.b2b-category-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F1733;
  margin: 0;
}

/* ── 6. COLLABORATION PROCESS TIMELINE ── */
.b2b-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
}

.b2b-process-step {
  background: #ffffff;
  border-radius: 14px;
  padding: 32px 28px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.3s ease;
}

.b2b-process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(11, 27, 87, 0.1);
  border-color: #0B1B57;
}

.b2b-process-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: rgba(11, 27, 87, 0.18);
  position: absolute;
  top: 20px;
  right: 24px;
  line-height: 1;
}

.b2b-process-step:hover .b2b-process-number {
  color: #0B1B57;
}

.b2b-process-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F1733;
  margin-bottom: 12px;
  padding-right: 40px;
}

.b2b-process-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ── 7. WHO WE COLLABORATE WITH ── */
.b2b-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.b2b-partner-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.25s ease;
}

.b2b-partner-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #0B1B57;
  transform: translateY(-3px);
}

.b2b-partner-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #0B1B57;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.b2b-partner-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.b2b-partner-footer-note {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  padding: 18px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* ── 8. COMMITMENT CHECKLIST ── */
.b2b-commitment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.b2b-commitment-item {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 24px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.b2b-commitment-item:hover {
  border-color: #0B1B57;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(11, 27, 87, 0.08);
}

.b2b-commitment-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(11, 27, 87, 0.1);
  color: #0B1B57;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.b2b-commitment-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0F1733;
  margin: 0;
}

/* ── 9. CTA & CONTACT SECTION ── */
.b2b-cta-card {
  background: linear-gradient(135deg, #0F1733 0%, #1e293b 100%);
  border-radius: 20px;
  padding: 60px 48px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.b2b-cta-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(11, 27, 87, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.b2b-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.b2b-cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.b2b-cta-desc {
  font-size: 1.15rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 36px;
}

.b2b-contact-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.b2b-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

.b2b-contact-pill:hover {
  background: #0B1B57;
  border-color: #0B1B57;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 27, 87, 0.4);
}

.b2b-contact-pill--whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

/* ── RESPONSIVE STYLES ── */
@media (max-width: 1024px) {
  .b2b-why-grid,
  .b2b-categories-grid,
  .b2b-process-grid,
  .b2b-partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .b2b-services-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .b2b-hero {
    padding: 60px 24px;
    min-height: 400px;
  }
  .b2b-why-grid,
  .b2b-categories-grid,
  .b2b-process-grid,
  .b2b-partners-grid,
  .b2b-services-features,
  .b2b-commitment-grid {
    grid-template-columns: 1fr;
  }
  .b2b-services-box {
    padding: 28px 20px;
  }
  .b2b-cta-card {
    padding: 40px 24px;
  }
  .b2b-contact-buttons {
    flex-direction: column;
    width: 100%;
  }
  .b2b-contact-pill {
    width: 100%;
    justify-content: center;
  }
}
/* === End: sections/b2b-white-labelling.css === */

/* === Start: brand-palette.css === */
/* Logo palette: dominant blue, supporting gold yellow, white contrast.
   Photography and product packaging retain their original colors. */

/* White navigation keeps both colors of the original logo readable. */
.info-page {
  --color-bg: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-muted: #606060;
  background: #FFFFFF;
  color: #000000;
}

.info-page .pol-hero,
.info-page .faq-hero,
.info-page .faq-cta,
.info-page .about-split-card--red,
.info-page .pol-contact-box {
  background: #EEF4FF;
}

.info-page .faq-body {
  background: #FFFFFF;
}

.info-page .pol-hero__title,
.info-page .pol-hero__meta,
.info-page .pol-hero__meta span,
.info-page .pol-hero__breadcrumb,
.info-page .pol-hero__breadcrumb a,
.info-page .pol-eyebrow,
.info-page .faq-hero__title,
.info-page .faq-hero__sub,
.info-page .faq-eyebrow,
.info-page .faq-cta__heading,
.info-page .faq-cta__sub,
.info-page .about-hero-title,
.info-page .about-eyebrow,
.info-page .about-heading,
.info-page .about-paragraph,
.info-page .about-value-title,
.info-page .about-value-desc {
  color: #000000;
}

.info-page .pol-hero__meta svg {
  stroke: #000000;
}

.info-page .about-hero::before {
  background: linear-gradient(90deg, rgba(238, 244, 255, .96), rgba(238, 244, 255, .7) 60%, rgba(238, 244, 255, .2));
}

.info-page .pol-section__num,
.info-page .pol-toc__link.is-active,
.info-page .faq-topics__link,
.info-page .faq-item.is-open .faq-item__icon,
.info-page .faq-cta__btn {
  background: var(--color-accent);
  color: #000000;
  border-color: var(--color-accent);
}

.info-page .faq-cta__btn:hover,
.info-page .faq-topics__link:hover {
  background: var(--color-accent-hover);
  color: #000000;
}

.info-page .faq-item.is-open .faq-item__text {
  color: #000000;
}

.info-page .pol-eyebrow::before,
.info-page .faq-eyebrow::before {
  background: var(--color-accent);
}

.corp-page {
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  background: #FFFFFF;
  color: #000000;
}

.corp-hero--enquiry,
.corp-closing,
.corp-module:nth-child(even),
.corp-panel__card {
  background: #EEF4FF;
}

.corp-module {
  background: var(--color-accent-light);
}

.corp-how {
  background: #FFFFFF;
}

.corp-hero__title span,
.corp-module__copy h3,
.corp-hero__how,
.corp-header__phone,
.corp-panel__list svg,
.corp-title span {
  color: var(--color-primary);
}

.corp-eyebrow {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: #000000;
}

.corp-services li::before {
  background: var(--color-accent);
}

.corp-lead-card {
  background: #FFFFFF;
  border-color: #DCE5F2;
}

.corp-lead-card__title {
  background: var(--color-primary);
  color: #FFFFFF;
}

.corp-btn,
.corp-lead-card .corp-submit,
.corp-step__num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000000;
}

.corp-btn:hover,
.corp-lead-card .corp-submit:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #000000;
}

.kyb-page .hiw-section {
  background: #EEF4FF;
}

.kyb-page .hiw-section .section-eyebrow,
.kyb-page .hiw-section .section-title,
.kyb-page .hiw-section .hiw-card__title,
.kyb-page .hiw-section .hiw-card__desc {
  color: #000000;
}

.kyb-page .hiw-cta__btn {
  background: var(--color-accent);
  color: #000000;
}

.kyb-page .hiw-cta__btn:hover,
.kyb-page .hiw-cta__btn:focus-visible {
  background: var(--color-accent-hover);
  color: #000000;
}

.kyb-page .hiw-progress__dot,
.kyb-page .hiw-progress__dot.is-active,
.kyb-page .hiw-card__num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000000;
}

.kyb-page {
  --color-bg: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-muted: #606060;
  background: #FFFFFF;
  color: #000000;
}

.kyb-hero {
  color: #000000;
  background-color: #FFFFFF;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 32%, rgba(255, 255, 255, 0.35) 52%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0) 100%),
    url('/assets/images/check-your-health/test.webp');
  background-position: center, center right;
  background-size: cover, cover;
}

@media (max-width: 900px) {
  .kyb-hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 60%, rgba(255, 255, 255, 0.35) 100%),
      url('/assets/images/check-your-health/test.webp');
  }
}

.kyb-hero__title,
.kyb-hero__sub,
.kyb-hero__eyebrow,
.kyb-why__eyebrow,
.kyb-do__eyebrow,
.kyb-compare__eyebrow,
.kyb-hero__chips li {
  color: #000000;
}

.kyb-hero__chips li {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
}

.kyb-hero__cta,
.kyb-do__cta,
.kyb-compare__cta {
  background: var(--color-accent);
  color: #000000;
  border-color: var(--color-accent);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.kyb-hero__cta:hover,
.kyb-hero__cta:focus-visible,
.kyb-do__cta:hover,
.kyb-do__cta:focus-visible,
.kyb-compare__cta:hover,
.kyb-compare__cta:focus-visible {
  background: var(--color-accent-hover);
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.3);
}

.kyb-hero__cta svg,
.kyb-do__cta svg,
.kyb-compare__cta svg {
  transition: transform 0.2s ease;
}

:is(.kyb-hero__cta, .kyb-do__cta, .kyb-compare__cta):is(:hover, :focus-visible) svg {
  transform: translateX(4px);
}

:is(.kyb-hero__cta, .kyb-do__cta, .kyb-compare__cta):active {
  transform: translateY(0);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.kyb-hero__cta, .kyb-do__cta, .kyb-compare__cta),
  :is(.kyb-hero__cta, .kyb-do__cta, .kyb-compare__cta) svg {
    transition: none;
    transform: none;
  }
}

.kyb-compare {
  background: #EEF4FF;
}

.kyb-compare__highlight {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
}

.kyb-compare__icon--yes {
  background: var(--color-accent);
  color: #000000;
}

.kyb-do__card::before {
  background: linear-gradient(150deg, #b9b3aa 0%, #77716b 100%);
}

.kyb-why__card:not(.kyb-why__card--photo) {
  background: var(--gradient-primary);
}

.shop-page {
  --color-bg: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-muted: #606060;
  background: #FFFFFF;
  color: #000000;
}

.shop-page .page-hero {
  background: #EEF4FF;
}

.shop-page .page-hero__title,
.shop-page .page-hero__subtitle,
.shop-page .product-cat,
.shop-page .product-price,
.shop-page .product-title a:hover {
  color: #000000;
}

.shop-page .shop-search-btn,
.shop-page .btn-price-filter,
.shop-page .btn-add-cart-sm:not(:disabled),
.shop-page .product-badge,
.shop-page .filter-link.active,
.shop-page .subcat-pill.active,
.shop-page .page-btn.active {
  background: var(--color-accent);
  color: #000000;
  border-color: var(--color-accent);
}

.shop-page .shop-search-btn:hover,
.shop-page .btn-price-filter:hover,
.shop-page .btn-add-cart-sm:not(:disabled):hover,
.shop-page .subcat-pill:hover,
.shop-page .page-btn:hover,
.shop-page .btn-view-product:hover {
  background: var(--color-accent-hover);
  color: #000000;
  border-color: var(--color-accent-hover);
}

.shop-page .btn-view-product,
.shop-page .filter-link:hover {
  background: var(--color-accent-light);
  color: #000000;
}

#section-header,
.site-nav {
  background: var(--color-surface);
  border-bottom: none;
}

.nav-item__link,
.nav-item.is-active > .nav-item__link {
  color: #000000;
}

.site-nav .nav-item__link:hover,
.site-nav .nav-item__link:focus-visible {
  color: var(--color-accent);
}

.site-nav .nav-item__link:hover::after,
.site-nav .nav-item__link:focus-visible::after {
  background-color: var(--color-accent);
  transform: scaleX(1);
}

.site-nav .utility-icon {
  color: #000000;
}

.site-nav .utility-icon:hover,
.site-nav .utility-icon:focus-visible {
  color: var(--color-accent);
  background-color: var(--color-accent-light);
}

.nav-logo:focus-visible {
  outline-color: var(--color-primary);
}

.nav-dropdown__link,
.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible,
.nav-dropdown__icon {
  color: #000000;
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  background: var(--color-accent);
}

.nav-dropdown img.nav-dropdown__icon {
  filter: brightness(0);
}

/* Large homepage surfaces establish the dominant brand blue. */
.bs-section {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.bs-title,
.bs-tagline,
.bs-tagline strong,
.bs-point__text,
.bs-point__text strong,
.bs-point__desc {
  color: var(--color-text-inverse);
}

.fp-title__accent,
.bs-title span,
.bs-eyebrow {
  color: var(--color-accent);
}

.sc-section,
.fp-section {
  background: var(--color-surface);
  color: var(--color-primary);
}

.fp-card,
.fp-card__title,
.fp-card__rating,
.fp-card__price {
  color: var(--color-primary);
}

.sc-title__accent {
  color: var(--color-accent);
}

.sc-title,
.fp-title {
  color: #000000;
}

.sc-card,
.sc-card__label,
.sc-card:hover .sc-card__label,
.sc-card:focus-visible .sc-card__label {
  color: #000000;
}

.fp-card__star,
.fp-card:hover .fp-card__title {
  color: var(--color-accent);
}

.bs-title span {
  background: none;
  -webkit-text-fill-color: var(--color-accent);
}

.bs-point__icon {
  background: var(--color-accent);
  color: var(--color-primary);
}

.bs-btn--solid,
.btn--accent,
.mira-fab {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.bs-btn--solid:hover,
.btn--accent:hover,
.mira-fab:hover,
.mira-fab:focus-visible {
  background: var(--color-accent-hover);
  color: var(--color-primary);
}

.mira-fab,
.mira-fab:hover,
.mira-fab:focus-visible,
.mira-fab:active {
  color: #000000;
}

.bs-btn--ghost {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.bs-btn--ghost:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

.shc-section {
  --shc-accent: var(--color-primary);
  --shc-accent-hover: var(--color-primary-hover);
  background: #EEF4FF;
}

.shc-title,
.shc-text {
  color: #000000;
}

.shc-btn {
  background: var(--color-accent);
  color: #000000;
}

.shc-btn:hover,
.shc-btn:focus-visible {
  background: var(--color-accent-hover);
  color: #000000;
}

.pfq__title,
.pfq__title-accent,
.pfq__subtitle,
.pfq__q,
.pfq__chevron,
.pfq__a-inner p {
  color: #000000;
}

.nf-footer {
  background: #EEF4FF;
  color: #000000;
  border-top: 4px solid var(--color-accent);
}

.nf-footer .nf-col__label,
.nf-footer .nf-office__name,
.nf-footer .nf-office__addr,
.nf-footer .nf-contact-group__title,
.nf-footer .nf-contact-group__item,
.nf-footer .nf-nav-link,
.nf-footer .nf-copyright,
.nf-footer .nf-policy-link,
.nf-footer .nf-tagline,
.nf-footer .nf-social__link,
.nf-footer .nf-cert-tag {
  color: #000000;
}

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

.nf-footer .nf-office,
.nf-footer .nf-social__link,
.nf-footer .nf-cert-tag {
  border-color: rgba(0, 0, 0, 0.18);
}

.nf-footer .nf-divider {
  background: rgba(0, 0, 0, 0.18);
}

/* White is reserved for small content surfaces, inputs, and logo contrast. */
.nf-logo {
  background: transparent;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.tm-section {
  background: var(--color-accent);
  color: var(--color-primary);
}

:focus-visible {
  outline-color: var(--color-accent-hover) !important;
}

.site-nav :focus-visible,
.shc-section :focus-visible {
  outline-color: var(--color-primary) !important;
}

/* Keep catalog filters, controls, product copy and empty states black. */
.shop-page .shop-layout,
.shop-page .shop-layout * {
  color: #000000;
}

.shop-page .shop-layout input::placeholder {
  color: #000000;
  opacity: 1;
}

/* Plain links use gold text; controls with a surface use gold and black. */
body:not(.admin-page) a:not(.mira-fab):hover,
body:not(.admin-page) a:not(.mira-fab):hover :is(span, strong, em, h2, h3, h4) {
  color: var(--color-accent) !important;
}
body:not(.admin-page) :is(button:not(:disabled), .btn, a[class*=btn], a[class*=cta], .nav-dropdown__link, .utility-icon, .filter-link, .subcat-pill, .page-btn, .nf-social__link, .faq-topics__link, .pol-toc__link, .action-link):hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #000000 !important;
}
body:not(.admin-page) :is(button:not(:disabled), .btn, a[class*=btn], a[class*=cta], .nav-dropdown__link, .utility-icon, .filter-link, .subcat-pill, .page-btn, .nf-social__link, .faq-topics__link, .pol-toc__link, .action-link):hover * {
  color: #000000 !important;
}
.sc-card:hover .sc-card__label,
.fp-card:hover .fp-card__title {
  color: var(--color-accent) !important;
}

/* Collection labels and icons remain readable on gold hover surfaces. */
#section-header .nav-dropdown__link,
#section-header .nav-dropdown__link *,
#section-header .nav-dropdown__link:is(:hover, :focus-visible, :active),
#section-header .nav-dropdown__link:is(:hover, :focus-visible, :active) * {
  color: #000000 !important;
}

/* Form fields show the brand gold border and glow on hover. */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not(:disabled):hover,
textarea:not(:disabled):hover,
select:not(:disabled):hover {
  border-color: var(--color-accent, #FFC526) !important;
  box-shadow: 0 0 0 3px rgba(255, 197, 38, 0.18), 0 0 14px rgba(255, 197, 38, 0.2) !important;
}

/* Current navigation item retains the gold hover appearance. */
.site-nav .nav-item.is-active > .nav-item__link {
  color: var(--color-accent);
}
.site-nav .nav-item.is-active > .nav-item__link::after {
  background-color: var(--color-accent);
  transform: scaleX(1);
}

/* Corporate enquiry fields keep neutral surfaces and a gold interaction glow. */
.corp-lead-card :is(.ct-input, .ct-select, .ct-textarea) {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.corp-lead-card :is(.ct-input, .ct-select, .ct-textarea):is(:hover, :focus, :focus-visible) {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 197, 38, 0.18), 0 0 14px rgba(255, 197, 38, 0.2) !important;
  outline: none;
}
.corp-lead-card .ct-select option {
  background: #FFFFFF;
  color: #000000;
}

.corp-lead-card .brand-select__trigger {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dce1e5;
  border-radius: 10px;
  background: #FFFFFF;
  color: #000000;
  font-size: 12px;
}
.corp-lead-card .brand-select__value.is-placeholder {
  color: #666666;
}
.corp-lead-card .brand-select__chevron,
.corp-lead-card .brand-select.is-open .brand-select__chevron {
  color: var(--color-primary);
}
.corp-lead-card .brand-select__trigger:is(:hover, :focus-visible),
.corp-lead-card .brand-select.is-open .brand-select__trigger {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 197, 38, 0.18);
}
.corp-lead-card .brand-select__list {
  background: #FFFFFF;
  border-color: #dce1e5;
}
.corp-lead-card .brand-select__option {
  color: #000000;
}
.corp-lead-card .brand-select__option:is(:hover, .is-active) {
  background: var(--color-accent-light);
  color: #000000;
}
.corp-lead-card .brand-select__option.is-selected {
  background: var(--color-accent);
  color: #000000;
}
.corp-lead-card .brand-select__option.is-selected:is(:hover, .is-active) {
  background: var(--color-accent-hover);
}
@media (max-width: 1100px) {
  .corp-lead-card .brand-select__trigger {
    min-height: 46px;
    font-size: 14px;
  }
}

/* Login and registration follow the storefront's white, black and gold palette. */
.auth-container--neutral {
  background: #FFFFFF;
  color: #000000;
}
.auth-container--neutral .auth-card {
  background: #FFFFFF;
  border-color: #E5E5E5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}
.auth-container--neutral :is(.auth-title, .auth-label, .auth-forgot-link, .auth-footer-link a) {
  color: #000000;
}
.auth-container--neutral :is(.auth-subtitle, .auth-footer-link, .auth-hint) {
  color: #555555;
}
.auth-container--neutral .auth-input {
  background: #FFFFFF;
  border-color: #D6D6D6;
  color: #000000;
  caret-color: #000000;
}
.auth-container--neutral .auth-input::placeholder {
  color: #737373;
}
.auth-container--neutral .auth-input:is(:focus, :focus-visible) {
  border-color: var(--color-accent, #FFC526);
  box-shadow: 0 0 0 3px rgba(255, 197, 38, 0.2);
}
.auth-container--neutral .auth-btn {
  background: var(--color-accent, #FFC526);
  color: #000000;
}
.auth-container--neutral .auth-btn:hover {
  background: var(--color-accent-hover, #EDB515);
}
.auth-container--neutral :is(.auth-btn, .auth-forgot-link, .auth-footer-link a):focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

/* Contact page follows the white, black and gold enquiry palette. */
.ct-page {
  --color-bg: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-muted: #666666;
  --color-border: #DCE5F2;
  --text-primary: #000000;
  --text-secondary: #666666;
  background: #FFFFFF;
  color: #000000;
}
.ct-page .ct-hero {
  background: #EEF4FF;
}
.ct-page :is(.ct-hero__cta, .ct-submit) {
  border-color: var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: #000000;
}
.ct-page :is(.ct-hero__cta, .ct-submit):is(:hover, :focus-visible, :active) {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  color: #000000 !important;
}
.ct-page :is(.ct-input, .ct-select, .ct-textarea, .brand-select__trigger) {
  background-color: #FFFFFF;
  border-color: #DCE5F2;
  border-radius: 10px;
  color: #000000;
}
.ct-page :is(.ct-input, .ct-select, .ct-textarea, .brand-select__trigger):is(:focus, :focus-visible),
.ct-page .brand-select.is-open .brand-select__trigger {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 197, 38, 0.18);
  outline-color: var(--color-accent) !important;
}
.ct-page .brand-select__list {
  background: #FFFFFF;
  border-color: #DCE5F2;
}
.ct-page .brand-select__option {
  color: #000000;
}
.ct-page .brand-select__option:is(:hover, .is-active) {
  background: var(--color-accent-light);
  color: #000000;
}
.ct-page .brand-select__option.is-selected {
  background: var(--color-accent);
  color: #000000;
}
.ct-page .brand-select__option.is-selected:is(:hover, .is-active) {
  background: var(--color-accent-hover);
}
.ct-page .ct-input--err {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.ct-page :is(.ct-strip__value, .ct-office-card__addr) {
  overflow-wrap: anywhere;
}

/* Contact reference layout: centred title and a single rounded enquiry panel. */
.ct-page .ct-hero {
  background: #EEF4FF;
  border-bottom: 1px solid #DCE5F2;
}
.ct-page .ct-hero__inner {
  padding: clamp(40px, 5vw, 64px) 0;
  text-align: center;
}
.ct-page .ct-hero__heading {
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(36px, 4vw, 52px);
}
.ct-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 16px;
}
.ct-page .ct-main {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  margin-top: 40px;
  margin-bottom: 64px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background: #FAF7F2;
}
.ct-page :is(.ct-form-col, .ct-office-card, .ct-hours, .ct-all-phones) {
  padding: 0;
  border: 0;
  background: transparent;
}
.ct-page .ct-col-label { display: none; }
.ct-page .ct-col-title { font-size: clamp(22px, 2.5vw, 30px); }
.ct-page .ct-col-sub { max-width: none; font-size: 16px; }
.ct-page .ct-office-card { margin-bottom: 28px; }
.ct-page .ct-contact-info { margin-bottom: 32px; }
.ct-contact-info > a {
  display: block;
  width: fit-content;
  margin: 12px 0;
  overflow-wrap: anywhere;
}
.ct-contact-info h3 { margin-top: 28px; }
.ct-contact-info .nf-social__link {
  background: #FFFFFF;
  color: #000000;
  border-color: #DCE5F2;
}
.ct-contact-info .nf-social__link:hover {
  background: var(--color-accent);
  color: #000000 !important;
}
@media (max-width: 900px) {
  .ct-page .ct-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ct-page .ct-main {
    width: calc(100% - 16px);
    padding: 24px 12px;
    border-radius: 16px;
  }
  .ct-page .ct-form-col {
    min-width: 0;
    padding: 0;
  }
  .ct-page .ct-form-grid2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ct-page .ct-submit {
    width: 100%;
  }
}

/* Cart uses neutral surfaces, readable text and gold actions. */
.cart-page {
  --color-bg: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #404040;
  --color-text-muted: #666666;
  --text-primary: #000000;
  --text-secondary: #404040;
  --text-muted: #666666;
  --surface-primary: #F8FAFC;
  --surface-card: #FFFFFF;
  --border-primary: #DCE5F2;
  --color-border: #DCE5F2;
  background: #FFFFFF;
  color: #000000;
}
.cart-page .page-hero {
  background: #EEF4FF;
}
.cart-page .page-hero__title {
  color: #000000;
}
.cart-page .cart-table th {
  background: #EEF4FF;
  color: #000000;
}
.cart-page .summary-title {
  border-bottom-color: var(--color-accent);
}
.cart-page .cart-qty-box button {
  background: #FFF6D5;
  color: #000000;
}
.cart-page .cart-qty-box button:hover {
  background: var(--color-accent);
  color: #000000;
}
.cart-page :is(.btn-checkout, .cart-empty-wrapper .btn) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000000;
}
.cart-page :is(.btn-checkout, .cart-empty-wrapper .btn):is(:hover, :focus-visible, :active) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #000000 !important;
}
.cart-page .cart-empty-wrapper > svg {
  color: var(--color-primary);
}

/* The shared slide-out cart follows the full cart's palette on every page. */
.mini-cart-overlay {
  background: rgba(0, 0, 0, 0.4);
}
.mini-cart-drawer {
  --text-primary: #000000;
  --text-secondary: #404040;
  --surface-primary: #F8FAFC;
  --surface-card: #FFFFFF;
  --border-primary: #DCE5F2;
  background: #FFFFFF;
  color: #000000;
}
.mini-cart-header {
  background: #EEF4FF;
  border-bottom: 2px solid var(--color-accent);
  color: #000000;
}
.mini-cart-close-btn { color: #000000; }
.mini-cart-footer {
  background: #F8FAFC;
}
.mini-cart-drawer :is(.btn-drawer-cart, .btn-shop-now) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #000000;
}
.mini-cart-drawer .btn-shop-now { margin-top: 16px; }
.mini-cart-drawer :is(.btn-drawer-cart, .btn-shop-now):is(:hover, :focus-visible, :active) {
  background: var(--color-accent-hover);
  color: #000000 !important;
}
.mini-cart-drawer .btn-drawer-secondary {
  background: #FFFFFF;
  color: #000000;
}
.mini-cart-drawer .btn-drawer-secondary:is(:hover, :focus-visible, :active) {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: #000000 !important;
}
.mini-cart-qty-ctrl button {
  background: #FFF6D5;
  color: #000000;
}
.mini-cart-qty-ctrl button:hover {
  background: var(--color-accent);
  color: #000000;
}

/* All cart copy, including amounts and hovered links, stays black. */
#miniCartDrawer,
#miniCartDrawer *,
body.cart-page :is(.page-hero, .cart-layout, .cart-empty-wrapper),
body.cart-page :is(.page-hero, .cart-layout, .cart-empty-wrapper) * {
  color: #000000 !important;
}

/* Mira uses a white canvas and black copy in every interaction state. */
.mp-page {
  --color-bg: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #000000;
  --color-text-muted: #000000;
  --color-border: #DCE5F2;
  background: #FFFFFF;
}
#MainContent.mp-page,
#MainContent.mp-page * {
  color: #000000 !important;
}
.mp-page :is(.mp-hero__avatar, .mp-chip, .mp-msg, .mp-typing, .mp-form, .mp-send) {
  background: #FFFFFF;
  border: 1px solid #DCE5F2;
}
.mp-page .mp-msg--user {
  border-color: var(--color-accent);
}
.mp-page .mp-input::placeholder {
  color: #000000;
  opacity: 1;
}
.mp-page .mp-form {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mp-page .mp-form:is(:hover, :focus-within) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 197, 38, 0.18), 0 0 16px rgba(255, 197, 38, 0.25);
}
#mpInput,
#mpInput:is(:hover, :focus, :focus-visible) {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}
.mp-page :is(.mp-chip, .mp-send):is(:hover, :focus-visible, :active) {
  background: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}

/* Corporate FAQs match the rounded homepage accordion cards. */
.corp-questions__list {
  max-width: 1100px;
  display: grid;
  gap: 16px;
}
.corp-questions details {
  padding: 0;
  border: 1px solid var(--color-border-subtle, #ececf0);
  border-radius: 22px;
  background: #F9F9FB;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.corp-questions details[open] {
  background: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: 0 0 22px 3px rgba(255, 197, 38, 0.35);
}
.corp-questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  list-style: none;
  color: #000000;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
}
.corp-questions summary::-webkit-details-marker { display: none; }
.corp-questions summary::after {
  content: '';
  flex: 0 0 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.corp-questions details[open] summary::after { transform: rotate(225deg); }
.corp-questions details p {
  max-width: none;
  margin: 0;
  padding: 0 28px 26px;
  font-size: 17px;
  line-height: 1.7;
  color: #000000;
}
@media (max-width: 600px) {
  .corp-questions summary { padding: 20px; font-size: 17px; }
  .corp-questions details p { padding: 0 20px 20px; font-size: 15px; }
}

/* Expanded FAQs keep a white question surface, including while hovered. */
body .pfq__item.is-open .pfq__q:hover,
body .faq-item.is-open .faq-item__q:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #000000 !important;
}

/* Corporate questions follow the homepage closed/open hover behavior. */
.corp-questions summary {
  border-radius: 22px;
  transition: background-color 0.18s ease;
}
.corp-questions details:not([open]) summary:hover {
  background: var(--color-accent);
  color: #000000;
}
.corp-questions details[open] summary:hover {
  background: transparent;
  color: #000000;
}
/* === End: brand-palette.css === */

/* === Start: components/button-motion.css === */
/* Shared button motion. Overrides older page-specific lift and scale rules. */
body :is(button, input[type="submit"], input[type="button"], input[type="reset"],
  a[role="button"], a[class*="btn"], a[class*="cta"], .utility-icon,
  .mira-fab, .subcat-pill, .catalog-empty-reset, .mm-viewall,
  .faq-topics__link, .nf-social__link, .nav-drawer__social-link) {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
body :is(button, input[type="submit"], input[type="button"], input[type="reset"],
  a[role="button"], a[class*="btn"], a[class*="cta"], .utility-icon,
  .mira-fab, .subcat-pill, .catalog-empty-reset, .mm-viewall,
  .faq-topics__link, .nf-social__link, .nav-drawer__social-link):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.disabled):not(.page-btn--ellipsis):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.3) !important;
}
}

body :is(button, input[type="submit"], input[type="button"], input[type="reset"],
  a[role="button"], a[class*="btn"], a[class*="cta"], .utility-icon,
  .mira-fab, .subcat-pill, .catalog-empty-reset, .mm-viewall,
  .faq-topics__link, .nf-social__link, .nav-drawer__social-link):not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.disabled):not(.page-btn--ellipsis):active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Arrows share the button's lift instead of an additional slide. */
body :is(a[class*="btn"], a[class*="cta"], button:not(.brand-select__trigger)):is(:hover, :focus-visible) > svg {
  transform: none !important;
}

body :is(button, input[type="submit"], input[type="button"], input[type="reset"],
  a[role="button"], a[class*="btn"], a[class*="cta"], .utility-icon,
  .mira-fab, .subcat-pill, .catalog-empty-reset, .mm-viewall,
  .faq-topics__link, .nf-social__link, .nav-drawer__social-link):is(:disabled, [aria-disabled="true"], .is-disabled, .disabled, .page-btn--ellipsis) {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
body :is(button, input[type="submit"], input[type="button"], input[type="reset"],
  a[role="button"], a[class*="btn"], a[class*="cta"], .utility-icon,
  .mira-fab, .subcat-pill, .catalog-empty-reset, .mm-viewall,
  .faq-topics__link, .nf-social__link, .nav-drawer__social-link),
body :is(button, input[type="submit"], input[type="button"], input[type="reset"],
  a[role="button"], a[class*="btn"], a[class*="cta"], .utility-icon,
  .mira-fab, .subcat-pill, .catalog-empty-reset, .mm-viewall,
  .faq-topics__link, .nf-social__link, .nav-drawer__social-link):is(:hover, :focus-visible, :active) {
  transition: none !important;
  transform: none !important;
}
}
/* === End: components/button-motion.css === */