/* ============================================================
   brand.css — single source of truth for the color system.
   SUREPOINTE LAB — palette derived from brand_assets/logo.png
   (deep crimson ring + blood drop; royal-blue EKG line + swoosh).
   Recolor a client by editing ONLY the tokens in the first :root
   block below; everything else references these.
   Recolor check (every build): accent-deep vs bg >=4.5:1 ·
   accent-bright vs dark >=4.5:1 · muted vs bg-2 >=4.5:1.

   NOTE: --color-dark == --color-primary == crimson for this brand,
   so "dark sections" are RED, not navy. Anything placed on a dark
   section must be checked against #C0121A, not a neutral dark.

   Measured on #C0121A (sRGB relative luminance, WCAG 2.x):
     white          6.28:1   headings + body on dark
     --color-silver 4.90:1   secondary text on dark
     accent-bright  4.71:1   eyebrows, icons, rules on dark — clears 4.5:1
     muted-light    2.49:1   light backgrounds only — never on dark

   The FOOTER is the one section on --color-ink (#111214), not --color-dark.
   Measured there:
     white          18.74:1  headings
     --color-silver 14.62:1  links + body
     accent-bright  14.07:1  eyebrow
     primary-bright  4.52:1  the "Surepointe Lab" wordmark
     --color-primary 2.98:1  FAILS — do not put the base brand red on ink
   ============================================================ */
:root {
  /* — Core palette (hex) — */
  --color-primary:      #C0121A;  /* brand primary slot (= dark) — logo ring + blood drop */
  --color-primary-mid:  #9E0F16;  /* first dark-elevation step + primary hover */
  --color-primary-bright:#ED2F39; /* on-DARK red — same brand hue, raised for legibility on
                                     --color-ink. #C0121A reads only 2.98:1 there, below even
                                     the 3:1 large-text bar. Mirrors the accent/accent-bright
                                     split: NEVER use this on a light background. */
  --color-accent:       #1852D4;  /* royal blue — EKG line + swoosh. ON LIGHT BACKGROUNDS ONLY */
  --color-accent-deep:  #1240A8;  /* accent hover / pressed — the on-LIGHT accent fallback (9.03:1 vs bg) */
  --color-accent-bright:#CFE0FF;  /* on-DARK accent — icons, eyebrow, highlights on --color-dark (4.71:1) */
  --color-dark:         #C0121A;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #8A0D12;  /* deepest dark-elevation surface */
  --color-silver:       #E2E3E8;  /* cool neutral — chrome, secondary text on dark (4.90:1 vs dark) */
  --color-ink:          #111214;  /* body + heading text */
  --color-muted:        #6B6E7A;  /* muted / secondary text — clears 4.5:1 vs bg-2 (4.66) & bg (5.12) */
  --color-muted-light:  #A0A3AD;  /* captions, helper text, placeholders — LIGHT backgrounds */
  --color-line:         #E2E3E8;  /* hairlines / borders */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F5F5F7;  /* light section tint */
  --color-rating:       #F5A623;  /* star-rating gold — functional, not brand */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:     192, 18, 26;
  --color-primary-mid-rgb: 158, 15, 22;
  --color-primary-bright-rgb: 237, 47, 57;
  --color-accent-rgb:      24, 82, 212;
  --color-accent-deep-rgb: 18, 64, 168;
  --color-accent-bright-rgb: 207, 224, 255;
  --color-dark-rgb:        192, 18, 26;
  --color-dark-3-rgb:      138, 13, 18;
  --color-silver-rgb:      226, 227, 232;
  --color-ink-rgb:         17, 18, 20;

  /* size the nav off the client logo — see CLAUDE.md logo rules */
  --nav-height:         136px;  /* nav bar height — clears the 112px logo with 24px breathing room */
  --nav-logo-height:    112px;  /* client logo <img> height in the nav — matches the footer */
  --footer-logo-height: 112px;  /* client logo <img> height in the footer */
}

/* ============================================================
   Uniform content-photo container — used for EVERY content photo
   site-wide. One ratio (4:3) so no photo differs in size from
   another. Never use a fixed h-[Npx]. The ONLY exception is
   people/owner portraits: add --portrait (3:4, top-anchored).
   ============================================================ */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-bg-2);
  box-shadow: 0 20px 45px -24px rgba(var(--color-dark-rgb), 0.60),
              0 0 0 1px rgba(var(--color-dark-rgb), 0.06) inset;
}
.photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photo-frame--portrait { aspect-ratio: 3 / 4; }
.photo-frame--portrait > img { object-position: center top; }
/* Wide variant for the homepage gallery, which runs two large single-column
   tiles rather than a grid of small ones. This is a deliberate exception to the
   one-ratio-site-wide rule — every other content photo stays 4:3. */
.photo-frame--wide { aspect-ratio: 16 / 9; }

/* ============================================================
   Final call-to-action section.
   At py-24 alone the section rendered 443px — the shortest on the page, against
   609–935px everywhere else. 70vh overshot at 630px, so this sits halfway:
   ~540px at 1440x900. Enough presence to close the page and to show more of the
   16:9 cta-background slot, without dominating. Flex-centred because the
   min-height exceeds the natural content height.
   ============================================================ */
.final-cta {
  min-height: clamp(480px, 60vh, 660px);
  display: flex;
  align-items: center;
}