/* =====================================================================
   Clinical Property — Brand Stylesheet
   Specialists in Healthcare Property · Founder: Nick Alexander
   ---------------------------------------------------------------------
   Implements the DESIGN.md brand system: predominantly white, navy-led
   text, restrained teal accents, the teal→navy gradient used only as a
   small signature element. DM Sans (headings) + Inter (body) — per Brand
   Identity Brief §03.
   ===================================================================== */

:root {
  /* Primary palette */
  --cp-navy:    #0A1F44;   /* Primary text, headings, primary button   */
  --cp-navy-2:  #0E2A57;   /* Slightly lifted navy for depth           */
  --cp-teal:    #0096A8;   /* Secondary highlight, links, accents       */
  --cp-teal-d:  #007A89;   /* Teal hover / pressed                      */
  --cp-aqua:    #7ED6E3;   /* Light aqua — subtle highlights            */
  --cp-softgrey:#F2F4F7;   /* Secondary background / panels             */

  /* Neutrals */
  --cp-charcoal:#333333;
  --cp-mid:     #6B7280;   /* Muted / secondary text                    */
  --cp-line:    #E5E7EB;   /* Hairline borders                          */
  --cp-offwhite:#FAFAFB;
  --cp-white:   #FFFFFF;

  /* Typography — per Brand Identity Brief §03.
     Headings/display/wordmark: DM Sans. Body: Inter. (Montserrat/Poppins/Lato
     are explicitly ruled out by the brief.) */
  --cp-head: "DM Sans", Arial, "Helvetica Neue", sans-serif;
  --cp-body: "Inter", Arial, "Helvetica Neue", sans-serif;

  /* Shape (restrained — no heavy shadows/glows per brand) */
  --cp-radius: 12px;
  --cp-radius-sm: 6px;
  --cp-shadow: 0 10px 30px rgba(10, 31, 68, 0.08);
  --cp-shadow-sm: 0 4px 14px rgba(10, 31, 68, 0.06);

  /* Layout */
  --cp-maxw: 1180px;

  /* Signature brand gradient (the hallmark teal→navy sweep) */
  --cp-gradient: linear-gradient(115deg, var(--cp-teal) 0%, var(--cp-navy) 55%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--cp-body);
  color: var(--cp-charcoal);
  background: var(--cp-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--cp-head);
  color: var(--cp-navy);
  line-height: 1.18;
  margin: 0 0 0.5em;
  font-weight: 600; /* DM Sans SemiBold — Title/Heading levels */
  letter-spacing: -0.01em;
}
h1 { font-weight: 700; } /* DM Sans Bold — Display/page-title level */

p { margin: 0 0 1em; }

a { color: var(--cp-teal-d); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--cp-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Signature gradient — used ONLY as a small accent (the 5–20% rule) */
.cp-gradient-bar {
  height: 4px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--cp-teal) 0%, var(--cp-navy) 100%);
}

/* ---------- Brand mark (placeholder SVG — replace with official files) */
.cp-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.cp-logo:hover { text-decoration: none; }
.cp-logo__mark { width: 46px; height: 46px; flex-shrink: 0; display: block; }
/* Official logo lockup (PNG artwork) */
.cp-logo__img { height: 62px; width: auto; display: block; }
.cp-logo__word {
  font-family: var(--cp-head); font-weight: 700; line-height: 1.04;
  letter-spacing: 0.02em; font-size: 19px; text-transform: uppercase;
}
.cp-logo__word .l1 { color: var(--cp-navy); display: block; }
.cp-logo__word .l2 { color: var(--cp-teal); display: block; }
/* Reverse lockup for navy backgrounds */
.cp-logo--reverse .cp-logo__word .l1,
.cp-logo--reverse .cp-logo__word .l2 { color: var(--cp-white); }

/* ---------- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cp-head); font-weight: 600;
  font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 24px; border-radius: var(--cp-radius-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn::after { content: "→"; font-weight: 700; transition: transform 0.18s ease; }
.btn:hover::after { transform: translateX(3px); }

.btn--primary { background: var(--cp-navy); color: #fff; }
.btn--primary:hover { background: var(--cp-navy-2); color: #fff; }

.btn--secondary { background: var(--cp-teal); color: #fff; }
.btn--secondary:hover { background: var(--cp-teal-d); color: #fff; }

.btn--tertiary { background: transparent; color: var(--cp-teal-d); border-color: var(--cp-teal); }
.btn--tertiary:hover { background: rgba(0,150,168,0.06); color: var(--cp-teal-d); }

.btn--on-navy { background: #fff; color: var(--cp-navy); }
.btn--on-navy:hover { background: var(--cp-softgrey); color: var(--cp-navy); }

.btn--sm { padding: 10px 18px; font-size: 12.5px; }

/* ---------- Shared section helpers ---------------------------------- */
.eyebrow {
  font-family: var(--cp-head);
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12px; color: var(--cp-teal); font-weight: 700;
  margin-bottom: 14px;
}
.muted { color: var(--cp-mid); }

/* Minimal line-icon defaults (clean, consistent stroke, rounded) */
.cp-icon { width: 24px; height: 24px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }