/* ============================================================
   HARMONIK ANDORRA — brand theme.
   This is the whole visual identity. Change a value here and it
   changes everywhere on the site. Nothing else needs touching.
   ============================================================ */
:root{
  /* backgrounds — warm off-white, light and trustworthy */
  --bg:#fbfaf8;--bg2:#ffffff;--surface:#ffffff;--surface2:#f3f1ed;

  /* hairlines and borders */
  --line:rgba(16,23,29,.10);--line2:rgba(16,23,29,.19);

  /* text */
  --text:#10171d;--dim:#5b6771;--faint:#8b969f;

  /* brand accent — deep pool teal */
  --accent:#0d7b8a;--accent-br:#12a0b3;--accent-deep:#08525d;
  --accent-soft:rgba(13,123,138,.11);
  --warm:#c8842f;--glow:rgba(13,123,138,.30);
  --ink-on-accent:#ffffff;
  --nav-shadow:rgba(16,23,29,.20);

  /* type + layout — shared with SINERGY so the brands feel related */
  --serif:'Poppins',system-ui,sans-serif;--sans:'Poppins',system-ui,sans-serif;
  --wrap:1200px;
  /* colour families used by the shared stylesheet */
  --accent-rgb:13,123,138;--tint-rgb:16,23,29;--shadow-rgb:16,23,29;
  --card-a:#ffffff;--card-b:#f6f4f0;--card2-a:#ffffff;--card2-b:#f6f4f0;
  --pill-bg:rgba(255,255,255,.92);--warr-text:#5b6771;--wcard-text:#5b6771;
}

/* ------------------------------------------------------------
   The nav and hero sit on top of a dark photograph, so inside
   those two areas only, the palette flips to light-on-dark.
   ------------------------------------------------------------ */
.nav{--nav-bg:rgba(255,255,255,.90)}
.hero,
.page-hero{
  --text:#ffffff;
  --dim:rgba(255,255,255,.84);
  --faint:rgba(255,255,255,.62);
  --tint-rgb:255,255,255;
  --line2:rgba(255,255,255,.30);
  --accent-br:#5ad3e2;
  --accent:#12a0b3;
}
.hero .hero-sub,
.page-hero p{color:rgba(255,255,255,.86)}
.hero h1{max-width:19ch}

/* re-resolve inherited colour inside the flipped hero */
.hero,.page-hero{color:var(--text)}
.hero .eyebrow,.page-hero .eyebrow{color:var(--accent-br)}