/* ============================================================
   brand.css — single source of truth for the color system.
   primary = derive from client logo.
   Neutral graphite / slate placeholders — the template ships NO
   brand color. 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.
   ============================================================ */
:root {
  /* — Core palette (hex) — Twisted Air: crimson red + true black + white.
     PROVISIONAL — keyed to the redrawn logo; re-derive from the final
     corrected logo file when it lands (one-token swap). — */
  --color-primary:      #171314;  /* warm near-black from the logo's black (= dark) */
  --color-primary-mid:  #3E2F2D;  /* mid-tone — hover, borders/dividers on dark */
  --color-accent:       #B6141B;  /* brand crimson (provisional) — buttons, eyebrows, 24/7 CTAs */
  --color-accent-deep:  #911015;  /* on-LIGHT accent fallback — small red text / dividers on white */
  --color-accent-bright:#F0464E;  /* on-DARK accent — every accent use on --color-dark; 5.0:1 vs dark */
  --color-dark:         #171314;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #2B2325;  /* deepest dark-elevation surface */
  --color-ink:          #1A1614;  /* warm near-black body + heading text */
  --color-muted:        #6E6461;  /* warm-gray muted text — 5.2:1 vs bg-2, 5.7:1 vs bg */
  --color-muted-light:  #A89F9B;  /* lighter muted text on dark — 7.1:1 vs dark */
  --color-line:         #E2DCD9;  /* warm hairlines / borders */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F6F4F2;  /* warm light section tint */
  --color-rating:       #F59E0B;  /* star-rating gold — functional, not brand */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:     23, 19, 20;
  --color-primary-mid-rgb: 62, 47, 45;
  --color-accent-rgb:      182, 20, 27;
  --color-accent-deep-rgb: 145, 16, 21;
  --color-accent-bright-rgb: 240, 70, 78;
  --color-dark-rgb:        23, 19, 20;
  --color-dark-3-rgb:      43, 35, 37;
  --color-ink-rgb:         26, 22, 20;

  /* size the nav off the client logo — see CLAUDE.md logo rules */
  --nav-height:         96px;   /* nav bar height — starting point, not fixed */
  --nav-logo-height:    72px;   /* client logo <img> height in the nav */
  --footer-logo-height: 116px;  /* 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; }