/* ============================================================
   Scientific Clinical Laboratories / Unilabs Middle East
   Design tokens + base + utilities
   Palette keyed to the Unilabs sunburst logo (amber + vermilion)
   ============================================================ */

:root{
  --bg:        #FFFFFF;
  --surface:   #FAF7F2;   /* warm off-white */
  --surface-2: #F4EEE4;   /* deeper warm panel */
  --text:      #1F2430;   /* deep charcoal-navy */
  --muted:     #5C6470;
  --muted-2:   #8A8F99;
  --primary:   #E43317;   /* vermilion */
  --primary-d: #C0260E;   /* darkened vermilion for small text / hover */
  --secondary: #F7A504;   /* amber/gold */
  --accent:    #B5560A;   /* burnt amber — links, AA on white */
  --border:    #EBE3D7;
  --border-2:  #E3DACB;
  --focus:     #B5560A;
  --navy-deep: #161B26;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(31,36,48,.05), 0 1px 3px rgba(31,36,48,.06);
  --shadow:    0 6px 20px -6px rgba(31,36,48,.12), 0 2px 6px rgba(31,36,48,.05);
  --shadow-lg: 0 24px 60px -16px rgba(31,36,48,.22), 0 8px 24px -8px rgba(31,36,48,.12);
  --shadow-amber: 0 18px 44px -16px rgba(228,51,23,.30);

  --ff-display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --header-h: 76px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--accent); text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--text);
  margin:0;
  text-wrap:balance;
}

p{ margin:0; text-wrap:pretty; }

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(56px, 8vw, 112px); }
.section--tight{ padding-block:clamp(40px, 6vw, 72px); }
.surface{ background:var(--surface); }
.surface-2{ background:var(--surface-2); }
.navy{ background:var(--navy-deep); color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--secondary); border-radius:2px;
}
.eyebrow--center{ justify-content:center; }

.h-display{ font-size:clamp(2.1rem, 5.4vw, 3.7rem); }
.h-section{ font-size:clamp(1.7rem, 3.8vw, 2.7rem); }
.h-sub{ font-size:clamp(1.15rem, 2vw, 1.45rem); }
.lead{ font-size:clamp(1.05rem, 1.6vw, 1.2rem); color:var(--muted); line-height:1.65; }

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-body); font-weight:700; font-size:16px;
  padding:14px 24px; border-radius:999px; border:1.5px solid transparent;
  min-height:48px; transition:transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-amber); }
.btn--primary:hover{ background:var(--primary-d); transform:translateY(-2px); }
.btn--amber{ background:var(--secondary); color:var(--navy-deep); }
.btn--amber:hover{ background:#e69803; transform:translateY(-2px); }
.btn--ghost{ background:#fff; color:var(--text); border-color:var(--border-2); }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary-d); transform:translateY(-2px); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--outline-light:hover{ background:#fff; color:var(--navy-deep); border-color:#fff; }
.btn--sm{ padding:11px 18px; min-height:42px; font-size:15px; }
.btn--block{ width:100%; }
.btn--link{
  background:none; border:none; padding:0; min-height:0;
  color:var(--accent); font-weight:700; gap:6px;
}
.btn--link:hover{ color:var(--primary-d); }
.btn--link svg{ transition:transform .2s ease; }
.btn--link:hover svg{ transform:translateX(3px); }

/* ---------- chips / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--muted);
  background:#fff; border:1px solid var(--border-2);
  padding:7px 14px; border-radius:999px;
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--secondary); flex:none; }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* ---------- decorative sunburst-tint motif (NOT the logo) ---------- */
.glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0; }
.glow--amber{ background:radial-gradient(circle, rgba(247,165,4,.55), transparent 70%); }
.glow--verm{ background:radial-gradient(circle, rgba(228,51,23,.40), transparent 70%); }

/* utility */
.center{ text-align:center; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:24px; } .mt-l{ margin-top:40px; }
.grid{ display:grid; gap:24px; }
.flex{ display:flex; }
.relative{ position:relative; }
.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 (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}