/* ==========================================================================
   AZHA design tokens — the single source of colour, type, radius, spacing.
   Derived from the approved service pages (AZHA Brand Identity Guidelines v1.0,
   fonts kept as approved: Quicksand for headings, DM Sans for text).
   Change a value here and it updates everywhere.
   ========================================================================== */
:root{
  /* Brand colour */
  --navy:#101F50;        /* Deep Navy: primary, headings, primary buttons, navy sections */
  --navy-700:#1F4B82;    /* Mid Navy: hover, links and focus on light grounds */
  --navy-950:#0A1E3F;    /* Dark Navy: footer, raised panels on navy */
  --baby:#8BB9E8;        /* Baby Blue: the accent on navy only */
  --accent:#4A6DA7;      /* Accent blue for light grounds (eyebrows, highlighted words) */
  --light:#D6E8FB;       /* Light Blue: tinted bands, secondary buttons */
  --on-navy:#B8CCE6;     /* Body text on navy */

  /* Neutrals */
  --white:#FFFFFF;
  --soft:#FAFAF7;        /* Soft White: default page ground */
  --line:#E4E7EC;        /* Hairlines, card borders */
  --line-strong:#B8CCE6;
  --control:#7C8597;     /* Form-control borders (3:1+) */
  --body:#5D6675;        /* Body text on light grounds */
  --ink:#172033;         /* Strong text, labels */

  /* Supporting (small doses only) */
  --teal:#1D7A75;        /* Process steps, ticks, tags on light grounds */
  --amber:#E9A23B;       /* Small badges only (about 5% of a page) */
  --danger:#B42318;
  --success:#067647;

  /* Type */
  --f-display:"Quicksand","Nunito","Segoe UI",system-ui,sans-serif;
  --f-body:"DM Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-display:clamp(38px,4.9vw,62px);
  --fs-h1:clamp(36px,5.2vw,58px);
  --fs-h2:clamp(30px,3.7vw,44px);
  --fs-h3:21px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-small:14px;

  /* Shape and depth */
  --r-ctl:4px;           /* buttons, fields, tags */
  --r-card:8px;          /* cards, panels, banners */
  --r-img:16px;          /* framed images */
  --sh-1:0 1px 2px rgba(16,31,80,.06),0 4px 14px rgba(16,31,80,.06);
  --sh-2:0 6px 16px rgba(16,31,80,.10),0 18px 40px rgba(16,31,80,.12);

  /* Layout */
  --maxw:1180px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --sec:88px;            /* section padding, 64px on mobile */
  --head-h:80px;

  color-scheme:light;
}
@media (max-width:900px){:root{--sec:64px;--head-h:68px}}