/* Concept C: full-bleed split. Navy text field on the left, the photo running edge to edge on the right. */
.hx-c{background:var(--navy);color:#fff}
.hx-c-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,40vw,540px);min-height:620px}
/* the photo column never gets wider than the portrait, so the crop only ever trims a little top or bottom */
@media (min-width:1600px){.hx-c-grid{min-height:660px}}
.hx-c-text{display:flex;align-items:center;justify-content:flex-end}
.hx-c-in{width:100%;max-width:660px;padding:64px 56px 64px max(56px,calc((100vw - 1200px)/2 + 56px));box-sizing:content-box}
.hx-eyebrow{margin:0 0 18px;font:600 12px Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hx-c h1{margin:0;font:700 clamp(40px,5vw,68px)/1 Archivo,sans-serif;letter-spacing:-.03em;color:#fff}
.hx-c .lede{margin:24px 0 0;font-size:18px;line-height:1.6;color:#DEE0E4;max-width:560px}
.hx-c .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hx-c .btn.n{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.hx-c .btn.o{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.hx-c .btn.o:hover{background:#fff;color:var(--navy)}
.hx-c .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.hx-c .fine{margin-top:12px;color:var(--mist)}
.hx-c-photo{position:relative;margin:0;min-height:100%;background:var(--tint)}
.hx-c-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 0%}
.hx-c-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;background:rgba(13,27,42,.86);font-size:13.5px;color:#DEE0E4}
.hx-c-photo b{color:#fff;margin-right:6px}
.hx-c-photo a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
@media (max-width:900px){
  .hx-c-grid{grid-template-columns:1fr;min-height:0}
  .hx-c-photo{order:-1;height:340px}
  .hx-c-in{padding:32px 20px 40px;box-sizing:border-box;max-width:none}
}
/* tablets: keep the side-by-side split so the portrait isn't cropped into a short, wide strip */
@media (min-width:600px) and (max-width:900px){
  .hx-c-grid{grid-template-columns:minmax(0,1fr) 300px;min-height:520px}
  .hx-c-photo{order:0;height:auto}
  .hx-c-in{padding:40px 28px 40px 20px}
  .hx-c h1{font-size:40px}
  .hx-c .acts .btn{flex:1 1 100%}
}