/* ==========================================================================
   KEDO HEALTH - subsite additions on top of the KEDO Labs design system.
   Loaded after style.css, which stays an untouched copy of the main site so
   it can be re-synced from kedolabs.com without merge conflicts.
   ========================================================================== */

/* --- sub-brand lockup: KEDO wordmark + HEALTH track + acid spark --------- */
.brand.brand-health{flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.bh-word{font:900 clamp(20px,2.2vw,25px)/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.bh-sub{display:inline-flex;align-items:center;gap:7px;font:700 10px/1 var(--display);letter-spacing:.46em;text-transform:uppercase;color:var(--accent)}
.bh-spark{width:9px;height:9px;flex:none;color:var(--acid)}
.brand-health--footer{margin-bottom:16px}

/* --- "also built for" chip row (expansion verticals) --------------------- */
.also-label{font:600 11.5px/1 var(--utility);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:34px 0 0}
.also-list{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.also-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;background:var(--white);border:var(--hairline);border-radius:999px;font:600 12px/1 var(--utility);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted)}
.also-chip:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acid);flex:none}

/* --- photo band used inside content sections ----------------------------- */
.photo-band{position:relative;margin:0;border:var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--paper-tint)}
.photo-band>img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:var(--photo-print)}
.photo-band figcaption{padding:13px 18px;border-top:var(--hairline);background:var(--paper);font:500 12px/1.5 var(--utility);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}

/* --- two-column copy + photo block (beyond the phone) --------------------- */
.beyond-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.beyond-grid .also-list{margin-top:0}

/* --- vertical hero photo on offer-hero pages ------------------------------ */
.offer-hero-art>img{object-position:center 45%}

@media(max-width:960px){
  .beyond-grid{grid-template-columns:1fr}
}