/* ============================================================
   Unite New Zealand — Community Health R&D (shared styles)
   Used by: index.html (three baskets + R&D hub), earn.html,
   expand.html. Every class is prefixed chrd- so nothing here
   can touch the existing site styles.
   ============================================================ */

:root{
  --chrd-navy:#050F24; --chrd-ink:#07142E; --chrd-raise:#0E2046; --chrd-line:#1A2E5C;
  --chrd-azure:#0A6BFE; --chrd-azure2:#1356D8; --chrd-cobalt:#1B40B2; --chrd-deep:#112A78;
  --chrd-cyan:#43D0F5; --chrd-cyan2:#7CE2FF; --chrd-gold:#FFD84D; --chrd-paper:#F2F6FF;
  --chrd-display:'Anton','Arial Narrow',sans-serif;
  --chrd-sans:'Archivo',system-ui,-apple-system,sans-serif;
}
.chrd, .chrd *{ box-sizing:border-box; }
.chrd{ font-family:var(--chrd-sans); color:#fff; }
.chrd h1, .chrd h2, .chrd h3{ color:#fff; }
.chrd .chrd-card h2, .chrd .chrd-card h3{ color:var(--chrd-ink); }
.chrd .chrd-card .chrd-card-hd h2{ color:#fff; }
.chrd a{ text-decoration:none; }
.chrd-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.chrd-ico{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.chrd-kick{ font-family:var(--chrd-sans); font-style:italic; font-weight:900; text-transform:uppercase; letter-spacing:.01em; }
.chrd-hl{ color:var(--chrd-cyan); font-style:italic; font-weight:800; }
.chrd-gold{ color:var(--chrd-gold); }

/* ---------- Unified desktop nav links (added into the existing .nav) ---------- */
.nav .links .unzl{ display:none; }
@media(min-width:1100px){
  .nav .links .unzl{ display:inline-flex; align-items:center; position:relative; color:rgba(255,255,255,.86); font-weight:700; font-size:14px; padding:6px 2px; background:none; border:0; cursor:pointer; font-family:inherit; }
  .nav .links .unzl:hover{ color:#fff; }
  .nav .links .unzl.on{ color:#fff; }
  .nav .links .unzl.on::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:3px; background:var(--chrd-cyan); box-shadow:0 0 12px rgba(67,208,245,.8); }
  .nav .links{ gap:24px; }
}

/* ---------- LEARN · EARN · EXPAND connector strip ---------- */
.chrd-steps{ background:linear-gradient(90deg,#07142E,#0E2046 50%,#07142E); border-bottom:1px solid rgba(67,208,245,.25); }
.chrd-steps .chrd-wrap{ display:flex; align-items:stretch; gap:0; padding-top:0; padding-bottom:0; }
.chrd-steps .lbl{ display:flex; align-items:center; gap:8px; padding:0 16px 0 0; margin-right:6px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--chrd-cyan2); white-space:nowrap; border-right:1px solid rgba(255,255,255,.12); }
.chrd-steps .lbl:hover{ color:#fff; }
.chrd-steps .st{ flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:11px 10px; color:rgba(255,255,255,.72); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; position:relative; white-space:nowrap; }
.chrd-steps .st .n{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor; font-size:11px; letter-spacing:0; }
.chrd-steps .st small{ font-weight:600; letter-spacing:.02em; text-transform:none; font-size:12px; opacity:.85; }
.chrd-steps .st + .st::before{ content:"›"; position:absolute; left:-4px; top:50%; transform:translateY(-52%); font-size:22px; color:rgba(67,208,245,.55); font-weight:400; }
.chrd-steps .st:hover{ color:#fff; }
.chrd-steps .st.on{ color:#fff; background:linear-gradient(180deg,rgba(10,107,254,.0),rgba(10,107,254,.28)); box-shadow:inset 0 -3px 0 var(--chrd-cyan); }
.chrd-steps .st.on .n{ background:var(--chrd-cyan); border-color:var(--chrd-cyan); color:var(--chrd-ink); }
@media(max-width:760px){
  .chrd-steps .chrd-wrap{ padding:0; }
  .chrd-steps .lbl{ display:none; }
  .chrd-steps .st{ flex-direction:column; gap:3px; padding:9px 4px; font-size:12px; }
  .chrd-steps .st small{ font-size:10.5px; white-space:normal; text-align:center; line-height:1.2; }
}

/* ---------- 1. Three baskets — new title block ---------- */
.chrd-top{ position:relative; overflow:hidden; background:
   radial-gradient(1200px 420px at 50% -10%, rgba(67,208,245,.35), transparent 60%),
   linear-gradient(180deg,#0A6BFE 0%,#1356D8 46%,#0E2046 100%);
   padding:clamp(34px,5vw,58px) 0 clamp(30px,4vw,48px); text-align:center; }
.chrd-top::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(-56deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px); pointer-events:none; }
.chrd-top .chrd-wrap{ position:relative; }
.chrd-title{ margin:0; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(46px,8.6vw,108px); line-height:.92; letter-spacing:.015em; color:#fff; text-shadow:0 6px 30px rgba(5,15,36,.45); }
.chrd-tag{ margin:10px 0 0; font-style:italic; font-weight:700; font-size:clamp(17px,2.4vw,28px); color:#fff; }
.chrd-pillars{ margin:14px auto 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 16px; font-weight:900; font-size:clamp(12px,1.5vw,17px); letter-spacing:.06em; text-transform:uppercase; }
.chrd-pillars i{ width:2px; height:18px; background:rgba(255,255,255,.55); }
.chrd-rule{ margin:clamp(20px,3vw,30px) auto 0; display:flex; align-items:center; gap:16px; max-width:900px; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(20px,3vw,36px); letter-spacing:.03em; line-height:1.05; color:#fff; }
.chrd-rule::before, .chrd-rule::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8)); }
.chrd-rule::after{ background:linear-gradient(90deg,rgba(255,255,255,.8),transparent); }
.chrd-baskets{ margin:clamp(20px,3vw,30px) auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); max-width:1040px; }
.chrd-basket{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 20px 22px; border-radius:18px; color:#fff;
  background:linear-gradient(160deg,rgba(10,107,254,.85),rgba(17,42,120,.92)); border:1.5px solid rgba(124,226,255,.55);
  box-shadow:0 18px 44px -18px rgba(5,15,36,.8), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s, box-shadow .2s, border-color .2s; }
.chrd-basket:hover{ transform:translateY(-4px); border-color:#fff; box-shadow:0 24px 50px -16px rgba(5,15,36,.9), 0 0 26px rgba(67,208,245,.5); }
.chrd-basket .chrd-ico{ font-size:44px; stroke-width:1.7; }
.chrd-basket h3{ margin:4px 0 0; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(22px,2.4vw,30px); line-height:1; letter-spacing:.02em; }
.chrd-basket p{ margin:0 0 12px; font-size:15px; line-height:1.4; color:rgba(255,255,255,.92); max-width:28ch; }
.chrd-go{ margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 30px; border-radius:999px; border:2px solid #fff; color:#fff; font-weight:900; font-size:14px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.chrd-go .chrd-ico{ font-size:16px; stroke-width:3; }
.chrd-basket:hover .chrd-go{ background:rgba(255,255,255,.14); }
.chrd-basket.hot .chrd-go{ background:var(--chrd-azure); border-color:var(--chrd-cyan); }
.chrd-basket.hot{ background:linear-gradient(160deg,#0E2046,#07142E); border:2px solid var(--chrd-cyan); box-shadow:0 0 0 1px rgba(67,208,245,.35), 0 0 38px rgba(67,208,245,.55), 0 18px 44px -18px rgba(5,15,36,.8); }
.chrd-basket.hot .chrd-btn span{ background:var(--chrd-azure); border-color:var(--chrd-cyan); }
.chrd-basket.hot::after{ content:""; position:absolute; left:50%; bottom:-15px; width:26px; height:26px; transform:translateX(-50%) rotate(45deg); border-right:2px solid var(--chrd-cyan); border-bottom:2px solid var(--chrd-cyan); background:#0B1B3E; }
@media(max-width:820px){
  .chrd-baskets{ grid-template-columns:1fr; max-width:460px; }
  .chrd-basket{ padding:18px 18px 20px; }
  .chrd-basket .chrd-ico{ font-size:36px; }
}

/* ---------- 2. Community Health R&D hub ---------- */
.chrd-rd{ background:linear-gradient(180deg,#0E2046 0%,#07142E 18%,#050F24 100%); padding:clamp(28px,4vw,44px) 0 clamp(40px,5vw,64px); scroll-margin-top:66px; }
.chrd-panel{ border:2px solid rgba(67,208,245,.7); border-radius:22px; padding:clamp(18px,3vw,30px) clamp(14px,2.6vw,30px) clamp(16px,2.4vw,26px);
  background:linear-gradient(180deg,rgba(14,32,70,.85),rgba(7,20,46,.95)); box-shadow:0 0 0 1px rgba(67,208,245,.15), 0 0 46px rgba(10,107,254,.35); text-align:center; }
.chrd-rd-title{ margin:0; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(36px,6vw,72px); line-height:.95; letter-spacing:.02em; color:#fff; }
.chrd-rd-sub{ margin:8px auto 0; display:flex; align-items:center; gap:14px; max-width:760px; font-style:italic; font-weight:700; font-size:clamp(14px,1.8vw,19px); color:rgba(255,255,255,.92); }
.chrd-rd-sub::before, .chrd-rd-sub::after{ content:""; flex:1; height:1.5px; background:rgba(255,255,255,.55); }
.chrd-rd-pill{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px 26px; margin:14px auto 0; padding:10px 26px; border:1.5px solid rgba(67,208,245,.75); border-radius:10px; background:rgba(5,15,36,.6);
  font-weight:900; font-size:clamp(12px,1.5vw,16px); letter-spacing:.05em; text-transform:uppercase; }
.chrd-banner{ display:block; margin:18px auto 0; border-radius:14px; overflow:hidden; border:1.5px solid rgba(124,226,255,.6); box-shadow:0 20px 50px -20px rgba(0,0,0,.8); background:#07142E; }
.chrd-banner img{ display:block; width:100%; height:auto; }
.chrd-banner .m{ display:none; }
@media(max-width:700px){
  .chrd-banner .d{ display:none; }
  .chrd-banner .m{ display:block; }
  .chrd-banner .m + .m{ border-top:1.5px solid rgba(124,226,255,.6); }
}

/* ---------- Community Health NZ site: Unite NZ bar, top band, member card ---------- */
.chrd-unz{ background:#07142E; border-bottom:1px solid rgba(67,208,245,.3); font-family:var(--chrd-sans); }
.chrd-unz .chrd-wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; }
.chrd-unz .br{ display:flex; align-items:center; gap:10px; color:#fff; }
.chrd-unz .br img{ width:32px; height:32px; filter:drop-shadow(0 4px 10px rgba(20,184,232,.45)); }
.chrd-unz .br span{ font-family:var(--chrd-display); text-transform:uppercase; font-size:18px; line-height:1; letter-spacing:.02em; color:#fff; white-space:nowrap; }
.chrd-unz .lk{ display:none; align-items:center; gap:22px; }
.chrd-unz .lk a, .chrd-unz .lk button{ position:relative; color:rgba(255,255,255,.86); font:inherit; font-weight:700; font-size:14px; background:none; border:0; padding:6px 0; cursor:pointer; white-space:nowrap; }
.chrd-unz .lk a:hover, .chrd-unz .lk button:hover{ color:#fff; }
.chrd-unz .lk .on{ color:#fff; }
.chrd-unz .lk .on::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:3px; border-radius:3px; background:var(--chrd-cyan); box-shadow:0 0 12px rgba(67,208,245,.8); }
.chrd-unz .cta{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border-radius:6px; background:linear-gradient(180deg,#2C8BFF,#0A6BFE); color:#fff; font-weight:800; font-size:14px; white-space:nowrap; box-shadow:0 0 16px rgba(10,107,254,.5); }
.chrd-unz .cta:hover{ color:#fff; filter:brightness(1.1); }
@media(min-width:1040px){ .chrd-unz .lk{ display:flex; } }
@media(max-width:420px){ .chrd-unz .br span{ font-size:15px; } .chrd-unz .cta{ padding:0 11px; font-size:12.5px; } }

.chrd-chnz{ background:linear-gradient(180deg,#07142E,#0E2046); padding:16px 0 0; }
.chrd-chnz .chrd-banner{ margin:0; }
.chrd-chnz .cap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.chrd-chnz .cap b{ font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(24px,3.4vw,38px); line-height:1; letter-spacing:.02em; color:#fff; }
.chrd-chnz .cap b em{ font-style:normal; color:var(--chrd-cyan); }
.chrd-chnz .cap a{ color:var(--chrd-cyan2); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.chrd-chnz .cap a:hover{ color:#fff; }
.chrd-chnz .chrd-steps{ margin-top:16px; }

.chrd-hubcard{ margin-top:8px; border-radius:22px; padding:20px 22px; color:#fff; background:linear-gradient(135deg,#0A6BFE,#1B40B2 55%,#0E2046); box-shadow:0 18px 40px -22px rgba(10,22,51,.6); }
.chrd-hubcard .t{ font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:30px; line-height:1; letter-spacing:.02em; }
.chrd-hubcard p{ margin:6px 0 0; font-size:16px; line-height:1.4; color:rgba(255,255,255,.92); }
.chrd-hubcard .row{ margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.chrd-hubcard .row a{ display:block; padding:14px 16px; border-radius:16px; background:rgba(5,15,36,.45); border:1.5px solid rgba(124,226,255,.55); color:#fff; transition:background .15s; }
.chrd-hubcard .row a:hover{ background:rgba(5,15,36,.7); color:#fff; }
.chrd-hubcard .row b{ display:block; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:26px; line-height:1; letter-spacing:.02em; }
.chrd-hubcard .row span{ display:block; margin-top:4px; font-size:15px; line-height:1.35; color:rgba(255,255,255,.9); }
.chrd-hubcard .back{ display:inline-block; margin-top:12px; color:var(--chrd-cyan2); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.chrd-hubcard .back:hover{ color:#fff; }
.chrd-vision{ margin-top:16px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:12px 14px; border-radius:12px; background:linear-gradient(90deg,#07142E,#0E2046); border:1px solid var(--chrd-line); }
.chrd-vision-l{ font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; text-align:left; padding-right:16px; border-right:1px solid rgba(255,255,255,.18); max-width:210px; }
.chrd-vision ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.chrd-vision li{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; font-weight:600; line-height:1.2; color:rgba(255,255,255,.9); }
.chrd-vision li .chrd-ico{ font-size:28px; stroke-width:1.6; color:#fff; }
.chrd-motto{ margin:16px 0 0; font-style:italic; font-weight:800; font-size:clamp(15px,2vw,22px); color:#fff; }
@media(max-width:900px){
  .chrd-vision{ grid-template-columns:1fr; text-align:center; }
  .chrd-vision-l{ max-width:none; border-right:0; padding:0; text-align:center; }
  .chrd-vision ul{ grid-template-columns:repeat(3,1fr); row-gap:14px; }
}

/* Ask Lee tile (opens the floating Ask Lee chat) */
.chrd-asklee{ display:inline-flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; background:linear-gradient(120deg,#0E2046,#112A78); border:1.5px solid var(--chrd-cyan); color:#fff; cursor:pointer; font-family:inherit; box-shadow:0 0 22px rgba(67,208,245,.35); transition:transform .15s, box-shadow .15s; }
.chrd-asklee:hover{ transform:translateY(-2px); box-shadow:0 0 30px rgba(67,208,245,.6); }
.chrd-asklee img{ width:52px; height:52px; object-fit:cover; object-position:center top; border:1px solid var(--chrd-line); background:#0E2046; }
.chrd-asklee span{ font-family:var(--chrd-display); text-transform:uppercase; font-size:28px; line-height:1; letter-spacing:.02em; }
.chrd-asklee.lg img{ width:76px; height:76px; }
.chrd-asklee.lg span{ font-size:40px; }

/* ---------- 3. LEARN · EARN · EXPAND panels ---------- */
.chrd-trio{ margin-top:clamp(22px,3vw,34px); display:grid; grid-template-columns:repeat(3,1fr); gap:0; filter:drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.chrd-way{ position:relative; display:flex; flex-direction:column; color:#fff; padding:26px 44px 26px 34px; min-height:100%;
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); transition:filter .2s, transform .2s; }
.chrd-way:first-child{ clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); border-radius:18px 0 0 18px; padding-left:28px; }
.chrd-way + .chrd-way{ margin-left:-14px; padding-left:46px; }
.chrd-way:hover{ filter:brightness(1.12); }
.chrd-way.learn{ background:linear-gradient(150deg,#1E8BFF,#0A6BFE 55%,#1356D8); z-index:3; }
.chrd-way.earn{ background:linear-gradient(150deg,#1A63E6,#1B40B2 60%,#16348F); z-index:2; }
.chrd-way.expand{ background:linear-gradient(150deg,#16348F,#112A78 55%,#0E2046); z-index:1; }
.chrd-way::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(-56deg,rgba(255,255,255,.05) 0 2px,transparent 2px 24px); pointer-events:none; }
.chrd-way .hd{ position:relative; display:flex; align-items:flex-start; gap:14px; }
.chrd-way .hd .chrd-ico{ font-size:52px; stroke-width:1.6; margin-top:2px; }
.chrd-way h3{ margin:0; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(40px,4.4vw,58px); line-height:.95; letter-spacing:.02em; }
.chrd-way .k{ display:block; margin-top:6px; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(14px,1.4vw,17px); line-height:1.15; color:#fff; }
.chrd-way ul{ position:relative; list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left; }
.chrd-way li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.38; color:rgba(255,255,255,.95); }
.chrd-way li .chrd-ico{ font-size:20px; margin-top:1px; color:#fff; }
.chrd-way .go{ position:relative; align-self:center; margin-top:auto; padding-top:20px; }
.chrd-way .go span{ display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 30px; border-radius:999px; background:#fff; color:var(--chrd-ink); font-weight:900; font-size:16px; letter-spacing:.07em; text-transform:uppercase; box-shadow:0 10px 24px -10px rgba(0,0,0,.6); }
.chrd-way:hover .go span{ background:var(--chrd-cyan2); }
@media(max-width:960px){
  .chrd-trio{ grid-template-columns:1fr; gap:14px; filter:none; }
  .chrd-way, .chrd-way:first-child{ clip-path:none; border-radius:18px; padding:22px 22px 24px; margin:0; box-shadow:0 16px 36px -18px rgba(0,0,0,.7); border:1px solid rgba(124,226,255,.35); }
  .chrd-way + .chrd-way{ margin:0; padding-left:22px; }
  .chrd-way .hd .chrd-ico{ font-size:42px; }
}

/* ---------- Shared closing band (By the People...) ---------- */
.chrd-close{ position:relative; overflow:hidden; background:linear-gradient(180deg,#0E2046,#050F24); border-top:1px solid rgba(67,208,245,.35); padding:clamp(26px,4vw,40px) 0; }
.chrd-close .chrd-wrap{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,34px); flex-wrap:wrap; }
.chrd-close .lockup{ display:flex; align-items:center; gap:12px; padding-right:clamp(16px,3vw,34px); border-right:2px solid rgba(255,255,255,.35); }
.chrd-close .lockup img{ width:58px; height:58px; }
.chrd-close .lockup b{ font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(26px,3.4vw,40px); line-height:.95; letter-spacing:.02em; }
.chrd-close p{ margin:0; font-style:italic; font-weight:800; font-size:clamp(17px,2.2vw,26px); line-height:1.3; }
@media(max-width:640px){ .chrd-close .lockup{ border-right:0; padding-right:0; } .chrd-close p{ text-align:center; } }

/* ============================================================
   EARN + EXPAND pages
   ============================================================ */
.chrd-page{ background:linear-gradient(180deg,#0A6BFE 0%,#1356D8 34%,#1B40B2 62%,#0E2046 100%); }
.chrd-hero{ position:relative; overflow:hidden; }
.chrd-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 500px at 75% 10%, rgba(124,226,255,.28), transparent 60%); pointer-events:none; }
.chrd-hero .chrd-wrap{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(16px,3vw,40px); align-items:end; padding-top:clamp(18px,3vw,34px); }
.chrd-copy{ padding-bottom:clamp(18px,3vw,36px); }
.chrd-h1{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); margin:0; }
.chrd-h1 .badge{ flex:none; width:clamp(64px,8vw,110px); height:clamp(64px,8vw,110px); display:grid; place-items:center; }
.chrd-h1 .badge img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 18px rgba(124,226,255,.7)); }
.chrd-h1 .badge .chrd-ico{ width:100%; height:100%; stroke-width:1.8; filter:drop-shadow(0 0 14px rgba(124,226,255,.6)); }
.chrd-h1 .t{ display:block; }
.chrd-h1 .big{ display:block; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(54px,8vw,112px); line-height:.86; letter-spacing:.01em; color:#fff; text-shadow:0 6px 26px rgba(5,15,36,.4); }
.chrd-h1 .sub{ display:block; margin-top:6px; font-family:var(--chrd-display); font-weight:400; text-transform:uppercase; font-size:clamp(24px,3.4vw,46px); line-height:1; letter-spacing:.02em; color:#fff; }
.chrd-strap{ margin:12px 0 0; font-style:italic; font-weight:800; font-size:clamp(16px,2vw,24px); color:#fff; }
.chrd-dots{ margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(15px,1.9vw,22px); letter-spacing:.04em; }
.chrd-dots i{ width:7px; height:7px; border-radius:50%; background:#fff; }
.chrd-checks{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.chrd-checks li{ display:flex; gap:12px; align-items:flex-start; font-size:clamp(16px,1.7vw,20px); line-height:1.32; font-weight:700; color:#fff; }
.chrd-checks .tick{ flex:none; width:32px; height:32px; border-radius:7px; display:grid; place-items:center; background:var(--chrd-azure); border:2px solid #fff; box-shadow:0 0 12px rgba(124,226,255,.6); }
.chrd-checks .tick .chrd-ico{ font-size:20px; stroke-width:3; }
.chrd-checks.plain .tick{ background:none; border:0; box-shadow:none; color:var(--chrd-cyan); width:30px; }
.chrd-checks.plain .tick .chrd-ico{ font-size:30px; stroke-width:3.2; }
.chrd-hero-side{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:end; }
.chrd-machine{ max-width:240px; justify-self:center; filter:drop-shadow(0 18px 30px rgba(5,15,36,.55)); }
.chrd-machine svg{ display:block; width:100%; height:auto; }
@media(max-width:900px){
  .chrd-hero .chrd-wrap{ grid-template-columns:1fr; align-items:start; }
  .chrd-portrait{ order:2; max-width:460px; margin:0 auto; width:100%; }
  .chrd-copy{ order:1; padding-bottom:0; }
  .chrd-hero-side{ grid-template-columns:1fr; }
  .chrd-machine{ max-width:200px; }
}

/* service bar (EARN) */
.chrd-svcs{ position:relative; z-index:2; margin-top:-2px; display:grid; grid-template-columns:repeat(4,1fr); border:2px solid rgba(124,226,255,.7); border-radius:18px; background:linear-gradient(90deg,#07142E,#0E2046); box-shadow:0 0 30px rgba(67,208,245,.35); overflow:hidden; }
.chrd-svcs > div{ display:flex; align-items:center; gap:12px; padding:16px 18px; font-weight:800; font-size:15px; line-height:1.15; text-transform:uppercase; letter-spacing:.02em; }
.chrd-svcs > div + div{ border-left:1px solid rgba(255,255,255,.18); }
.chrd-svcs .chrd-ico{ font-size:40px; stroke-width:1.6; }
@media(max-width:760px){ .chrd-svcs{ grid-template-columns:1fr 1fr; } .chrd-svcs > div:nth-child(3){ border-left:0; } .chrd-svcs > div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.18); } .chrd-svcs > div{ font-size:13px; padding:14px 12px; } .chrd-svcs .chrd-ico{ font-size:32px; } }

/* two cards: info + form */
.chrd-duo{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(14px,2vw,22px); padding:clamp(22px,3vw,34px) 0; }
.chrd-card{ background:#fff; color:var(--chrd-ink); border-radius:20px; overflow:hidden; box-shadow:0 22px 50px -24px rgba(5,15,36,.9); border:2px solid rgba(255,255,255,.7); }
.chrd-card-hd{ display:flex; align-items:center; gap:16px; padding:18px 22px; background:linear-gradient(120deg,#0E2046,#112A78); color:#fff; }
.chrd-card-hd .chrd-ico{ font-size:62px; stroke-width:1.6; }
.chrd-card-hd h2{ margin:0; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(24px,2.8vw,36px); line-height:1.02; letter-spacing:.01em; }
.chrd-card-bd{ padding:20px 24px 24px; }
.chrd-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.chrd-list li{ display:flex; gap:12px; align-items:flex-start; font-size:clamp(16px,1.7vw,19px); font-weight:600; line-height:1.35; color:var(--chrd-ink); }
.chrd-list li .chrd-ico{ font-size:24px; stroke-width:3.2; color:#1356D8; margin-top:1px; }
.chrd-list.sm li{ font-size:16px; gap:10px; }
.chrd-list.sm li .chrd-ico{ font-size:20px; color:#14B8E8; }
.chrd-list .chrd-hl{ color:#0F7FA6; }

.chrd-form-hd{ display:flex; align-items:center; gap:16px; padding:20px 24px 4px; }
.chrd-form-hd .chrd-ico{ font-size:60px; color:#16348F; stroke-width:1.8; }
.chrd-form-hd h2{ margin:0; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(24px,3vw,36px); line-height:1; color:var(--chrd-ink); }
.chrd-form-hd p{ margin:6px 0 0; font-size:16px; font-weight:600; line-height:1.35; color:#16348F; }
.chrd-form{ padding:12px 24px 24px; }
.chrd-form-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.chrd-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.chrd-field label{ font-size:14.5px; font-weight:800; color:var(--chrd-ink); }
.chrd-field input, .chrd-field textarea{ width:100%; font:inherit; font-size:16px; color:var(--chrd-ink); padding:10px 14px; border-radius:10px; border:1.5px solid #A9C6F2; background:#EEF5FF; outline:none; transition:border-color .15s, box-shadow .15s; }
.chrd-field textarea{ min-height:168px; resize:vertical; line-height:1.45; }
.chrd-field input:focus, .chrd-field textarea:focus{ border-color:#1356D8; box-shadow:0 0 0 3px rgba(19,86,216,.2); background:#fff; }
.chrd-side-box{ border:1.5px solid #A9C6F2; border-radius:14px; background:#F2F7FF; padding:14px 16px; }
.chrd-submit{ display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:56px; margin-top:8px; border:0; border-radius:999px; cursor:pointer; font-family:inherit; font-style:italic; font-weight:900; font-size:clamp(18px,2.2vw,24px); letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,#2C8BFF,#0A6BFE 50%,#1356D8); box-shadow:0 12px 26px -10px rgba(10,107,254,.8), inset 0 1px 0 rgba(255,255,255,.35); transition:filter .15s, transform .15s; }
.chrd-submit:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.chrd-submit[disabled]{ opacity:.7; cursor:wait; }
.chrd-submit .chrd-ico{ font-size:28px; stroke-width:2.6; }
.chrd-err{ display:none; margin:6px 0 0; padding:10px 14px; border-radius:10px; background:#FFF1F1; color:#9B1C1C; font-weight:700; font-size:14.5px; }
.chrd-err.on{ display:block; }
.chrd-thanks{ padding:28px 24px 30px; text-align:center; }
.chrd-thanks .chrd-ico{ font-size:62px; color:#15A66B; stroke-width:2.4; }
.chrd-thanks h3{ margin:10px 0 0; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(24px,3vw,34px); color:var(--chrd-ink); }
.chrd-thanks p{ margin:10px auto 0; max-width:46ch; font-size:17px; line-height:1.5; color:#16348F; font-weight:600; }
.chrd-thanks .row{ margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.chrd-thanks .row a, .chrd-thanks .row button{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; font:inherit; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.chrd-thanks .row .p{ background:#0A6BFE; color:#fff; border:0; }
.chrd-thanks .row .g{ background:#fff; color:#0A6BFE; border:2px solid #0A6BFE; }
@media(max-width:900px){ .chrd-duo{ grid-template-columns:1fr; } }
@media(max-width:600px){ .chrd-form-grid{ grid-template-columns:1fr; } .chrd-card-hd .chrd-ico, .chrd-form-hd .chrd-ico{ font-size:44px; } }

/* NOW > CONSTITUTION DAY ONE band (EXPAND) */
.chrd-now{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:stretch; padding-bottom:clamp(26px,3vw,36px); }
.chrd-now-track{ display:flex; align-items:center; gap:clamp(12px,2vw,22px); padding:16px clamp(16px,2.4vw,28px); border-radius:20px; border:2.5px solid var(--chrd-gold); background:linear-gradient(90deg,#07142E,#0E2046 60%,#112A78); box-shadow:0 0 26px rgba(255,216,77,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.chrd-now-track .ph{ display:flex; align-items:center; gap:14px; }
.chrd-now-track .ph .chrd-ico{ font-size:54px; stroke-width:1.6; }
.chrd-now-track .ph b{ display:block; font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(22px,2.6vw,30px); line-height:1; }
.chrd-now-track .ph span{ display:block; margin-top:4px; font-style:italic; font-weight:600; font-size:15.5px; line-height:1.3; color:rgba(255,255,255,.92); }
.chrd-now-track .ph em{ display:block; font-style:italic; font-weight:900; font-size:clamp(16px,1.9vw,20px); line-height:1.15; color:var(--chrd-gold); }
.chrd-now-track .arr{ font-size:46px; line-height:1; color:#fff; opacity:.9; }
.chrd-now .chrd-asklee{ align-self:stretch; border-width:2px; padding:10px 22px 10px 10px; }
@media(max-width:860px){
  .chrd-now{ grid-template-columns:1fr; }
  .chrd-now-track{ flex-direction:column; align-items:flex-start; }
  .chrd-now-track .arr{ transform:rotate(90deg); align-self:center; }
  .chrd-now .chrd-asklee{ justify-self:center; }
}

/* small screen breathing room above the fixed bottom tab bar */
@media(max-width:760px){ .chrd-page-end{ height:20px; } }

/* ============================================================
   Portraits (real photos only)
   ============================================================ */
.chrd-portrait{ position:relative; margin:0; align-self:end; }
.chrd-portrait.photo img{ display:block; width:100%; max-width:440px; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 20%; border-radius:20px; border:2px solid rgba(124,226,255,.75); box-shadow:0 0 0 6px rgba(67,208,245,.12), 0 30px 60px -24px rgba(5,15,36,.85); }
.chrd-portrait.photo{ margin-bottom:clamp(18px,3vw,36px); }
.chrd-portrait.cut img{ display:block; width:100%; max-width:560px; height:auto; filter:drop-shadow(0 24px 40px rgba(5,15,36,.55)); }
.chrd-cap{ position:absolute; left:clamp(12px,2vw,22px); bottom:clamp(14px,2.4vw,26px); display:flex; flex-direction:column; padding:10px 16px 10px 14px; border-left:4px solid var(--chrd-cyan); background:linear-gradient(90deg,rgba(5,15,36,.88),rgba(5,15,36,.55)); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border-radius:0 10px 10px 0; }
.chrd-cap b{ font-style:italic; font-weight:900; font-size:clamp(20px,2.4vw,28px); line-height:1.05; color:#fff; }
.chrd-cap span{ font-style:italic; font-weight:600; font-size:clamp(13px,1.4vw,16px); color:rgba(255,255,255,.92); }
.chrd-portrait.cut .chrd-cap{ bottom:clamp(10px,2vw,20px); }
.chrd-hero.econ{ background:none; }
.chrd-hero.econ .chrd-econ{ position:absolute; inset:0; width:100%; height:100%; }
.chrd-hero.econ::before{ z-index:1; background:linear-gradient(90deg,rgba(5,15,36,0) 30%,rgba(5,15,36,.55) 62%,rgba(5,15,36,.7)); }
.chrd-hero.econ .chrd-wrap{ z-index:2; }
@media(max-width:900px){ .chrd-hero.econ::before{ background:linear-gradient(180deg,rgba(5,15,36,.65),rgba(5,15,36,.25) 60%,rgba(5,15,36,0)); } .chrd-portrait.photo{ margin-bottom:0; } }

/* ridgeline under the title block + closing band */
.chrd-ridge{ position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(110px,16vw,220px); pointer-events:none; }
.chrd-top{ padding-bottom:clamp(70px,10vw,140px); }
.chrd-top .chrd-wrap{ z-index:2; }
.chrd-close .chrd-ridge{ height:100%; opacity:.5; }
.chrd-close .chrd-wrap{ position:relative; z-index:1; }

/* ============================================================
   "Healthcare begins at home" showcase (rebuilt from Dad's scene)
   ============================================================ */
.chrd-show{ margin-top:18px; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.05fr) minmax(0,1.13fr); gap:14px; text-align:left; border-radius:16px; padding:14px; background:linear-gradient(120deg,#050F24,#0E2046 60%,#112A78); border:1.5px solid rgba(124,226,255,.55); box-shadow:inset 0 0 40px rgba(10,107,254,.25); }
.chrd-show figure{ margin:0; position:relative; overflow:hidden; border-radius:12px; }
.chrd-show .lee img{ display:block; width:100%; height:100%; min-height:300px; object-fit:cover; object-position:center 22%; }
.chrd-show .lee figcaption{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:40px 12px 12px; background:linear-gradient(180deg,transparent,rgba(5,15,36,.92)); font-size:12.5px; line-height:1.3; color:rgba(255,255,255,.92); }
.chrd-show .lee figcaption b{ display:block; font-style:italic; font-weight:900; font-size:19px; color:#fff; }
.chrd-show .lee figcaption i{ font-style:italic; font-weight:900; font-size:22px; padding:4px 14px; border-radius:999px; border:2px solid var(--chrd-cyan); background:rgba(5,15,36,.7); box-shadow:0 0 16px rgba(67,208,245,.55); color:#fff; white-space:nowrap; }
.chrd-show .mid{ display:flex; flex-direction:column; gap:10px; padding:4px 2px; }
.chrd-show .site{ display:flex; align-items:center; gap:10px; color:#fff; }
.chrd-show .site img{ width:44px; height:44px; filter:drop-shadow(0 0 10px rgba(124,226,255,.7)); }
.chrd-show .site span{ min-width:0; overflow-wrap:anywhere; font-style:italic; font-weight:900; font-size:clamp(17px,1.65vw,23px); letter-spacing:0; }
.chrd-show .site em{ color:var(--chrd-cyan); }
.chrd-show .hbah{ margin:0; padding:6px 12px; border-radius:8px; background:linear-gradient(90deg,rgba(10,107,254,.55),rgba(10,107,254,0)); border-left:3px solid var(--chrd-cyan); font-style:italic; font-weight:900; text-transform:uppercase; font-size:clamp(14px,1.5vw,18px); letter-spacing:.04em; }
.chrd-show .ticks{ list-style:none; margin:0; padding:0 0 0 4px; display:grid; gap:5px; }
.chrd-show .ticks li{ display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:700; color:#fff; opacity:0; animation:chrdIn .5s ease forwards; animation-delay:calc(.15s * var(--i) + .3s); }
.chrd-show .ticks .chrd-ico{ font-size:18px; stroke-width:3.4; color:var(--chrd-cyan); }
.chrd-show .right{ display:grid; grid-template-rows:auto 1fr; gap:10px; }
.chrd-show .home > svg{ display:block; width:100%; height:auto; }
.chrd-show .home figcaption{ position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:6px; padding:5px 10px 5px 7px; border-radius:8px; background:rgba(5,15,36,.82); border:1px solid rgba(124,226,255,.5); font-style:italic; font-weight:900; font-size:11.5px; line-height:1.15; text-transform:uppercase; letter-spacing:.03em; }
.chrd-show .home figcaption .chrd-ico{ font-size:20px; color:var(--chrd-cyan); }
.chrd-show .pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; min-height:0; }
.chrd-show .ph img{ display:block; width:100%; height:100%; min-height:160px; object-fit:cover; object-position:center 35%; }
.chrd-show .sc{ display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, rgba(124,226,255,.35), transparent 70%), linear-gradient(180deg,#0E2046,#07142E); border:1px solid var(--chrd-line); }
.chrd-show .sc svg{ width:82%; height:auto; max-height:220px; }
.chrd-meal{ margin-top:auto; border-radius:12px; overflow:hidden; background:#fff; color:var(--chrd-ink); box-shadow:0 14px 30px -14px rgba(0,0,0,.7); border:3px solid #0E2046; }
.chrd-meal .url{ display:flex; align-items:center; gap:7px; padding:5px 10px; background:#0E2046; color:#fff; font-size:11.5px; font-weight:700; }
.chrd-meal .url span{ width:9px; height:9px; border-radius:50%; background:var(--chrd-cyan); box-shadow:0 0 8px var(--chrd-cyan); }
.chrd-meal .bd{ display:flex; align-items:center; gap:10px; padding:10px 12px; }
.chrd-meal .bd > div{ flex:1; min-width:0; }
.chrd-meal b{ display:block; font-style:italic; font-weight:900; text-transform:uppercase; font-size:17px; line-height:1; color:#16348F; }
.chrd-meal b.c{ color:#0A6BFE; margin-bottom:6px; }
.chrd-meal ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.chrd-meal li{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; }
.chrd-meal li .chrd-ico{ font-size:13px; stroke-width:3.4; color:#14B8E8; }
.chrd-meal .bowl{ width:92px; flex:none; }
@media(max-width:1000px){
  .chrd-show{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .chrd-show .right{ grid-column:1 / -1; grid-template-columns:1.3fr 1fr; grid-template-rows:auto; }
}
@media(max-width:640px){
  .chrd-show{ grid-template-columns:1fr; padding:10px; }
  .chrd-show .lee img{ min-height:0; aspect-ratio:4/4; }
  .chrd-show .right{ grid-template-columns:1fr; }
  .chrd-show .pair{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   EXPAND: six animated sector tiles
   ============================================================ */
.chrd-sectors-wrap{ background:linear-gradient(180deg,#07142E,#0E2046); border-top:2px solid rgba(124,226,255,.6); border-bottom:2px solid rgba(124,226,255,.6); padding:16px 0; }
.chrd-sectors{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.chrd-sector{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#1356D8,#112A78); border:1.5px solid rgba(124,226,255,.45); transition:transform .2s, box-shadow .2s; }
.chrd-sector:hover{ transform:translateY(-3px); box-shadow:0 0 22px rgba(67,208,245,.45); }
.chrd-tile-art{ display:block; width:100%; height:auto; }
.chrd-sector .nm{ display:block; padding:8px 10px 10px; background:rgba(5,15,36,.7); border-top:1px solid rgba(124,226,255,.35); font-style:italic; font-weight:900; text-transform:uppercase; font-size:14px; line-height:1.05; letter-spacing:.02em; color:#fff; min-height:52px; }
.chrd-sector .nm small{ display:block; margin-top:3px; font-weight:600; text-transform:none; font-size:11.5px; letter-spacing:0; color:rgba(255,255,255,.85); }
@media(max-width:1000px){ .chrd-sectors{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .chrd-sectors{ grid-template-columns:repeat(2,1fr); gap:8px; } .chrd-sector .nm{ font-size:13px; } }

/* ============================================================
   ANIMATION — vector icons and scenes (all paused for reduced motion)
   ============================================================ */
.chrd svg .a-bob, .chrd .a-bob, .chrd .a-tilt, .chrd .a-pulse, .chrd .a-shine, .chrd .a-beat, .chrd .a-lift,
.chrd-scene *, .chrd-tile-art *, .chrd-econ *, .chrd-ridge *, .chrd-meal *{ transform-box:fill-box; }
.chrd .a-bob{ animation:chrdBob 3.2s ease-in-out infinite; transform-origin:50% 50%; }
.chrd .a-tilt{ animation:chrdTilt 4s ease-in-out infinite; transform-origin:50% 60%; }
.chrd .a-pulse{ animation:chrdPulse 2.6s ease-in-out infinite; transform-origin:50% 50%; }
.chrd .a-beat{ animation:chrdBeat 1.6s ease-in-out infinite; transform-origin:50% 50%; }
.chrd .a-lift{ animation:chrdLift 2.4s ease-in-out infinite; transform-origin:50% 50%; }
.chrd .a-shine{ animation:chrdShine 3.6s ease-in-out infinite; }
.chrd .d2{ animation-delay:.45s !important; } .chrd .d3{ animation-delay:.9s !important; }
.chrd .ecgp{ stroke-dasharray:100; stroke-dashoffset:100; animation:chrdDraw 2.8s ease-in-out infinite; }
.a-ecg{ stroke-dasharray:420; stroke-dashoffset:420; animation:chrdEcg 4s ease-in-out infinite; }
.a-spin-slow{ animation:chrdSpin 24s linear infinite; transform-origin:50% 50%; }
.a-drift{ animation:chrdDrift 26s ease-in-out infinite alternate; }
.a-glow{ animation:chrdGlow 3.4s ease-in-out infinite; } .a-glow.d2{ animation-delay:1.3s; }
.a-scan{ animation:chrdScan 2.8s ease-in-out infinite; }
.a-bar{ animation:chrdBar 2.8s ease-in-out infinite; transform-origin:0 50%; } .a-bar.d2{ animation-delay:.4s; } .a-bar.d3{ animation-delay:.8s; }
.a-bar-v{ animation:chrdBarV 3s ease-in-out infinite; transform-origin:50% 100%; } .a-bar-v.d2{ animation-delay:.35s; } .a-bar-v.d3{ animation-delay:.7s; }
.a-hop{ animation:chrdHop 2.2s ease-in-out infinite; } .a-hop.d2{ animation-delay:.3s; } .a-hop.d3{ animation-delay:.6s; }
.a-sway{ animation:chrdSway 4s ease-in-out infinite; }
.a-sway-g{ animation:chrdSwayG 3s ease-in-out infinite; transform-origin:50% 100%; }
.a-grow{ animation:chrdGrow 4.5s ease-in-out infinite; } .a-grow.d2{ animation-delay:.5s; } .a-grow.d3{ animation-delay:1s; }
.a-tail{ animation:chrdTail 1.8s ease-in-out infinite; transform-origin:100% 0 !important; }
.a-nod{ animation:chrdNod 3.6s ease-in-out infinite; }
.a-flip{ animation:chrdFlip 4s ease-in-out infinite; transform-origin:0% 50% !important; }
.a-write{ animation:chrdWrite 1.8s ease-in-out infinite; }
.a-twinkle{ animation:chrdTwinkle 2.4s ease-in-out infinite; transform-origin:50% 50%; } .a-twinkle.d2{ animation-delay:1.2s; }
.a-wave{ animation:chrdWave 3s linear infinite; }
.a-drop{ animation:chrdDrop 1.8s ease-in infinite; }
.a-hoist{ animation:chrdHoist 4s ease-in-out infinite; }
.a-hammer{ animation:chrdHammer 1.2s ease-in-out infinite; transform-origin:100% 50% !important; }

@keyframes chrdBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes chrdTilt{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-7deg); } 75%{ transform:rotate(5deg); } }
@keyframes chrdPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
@keyframes chrdBeat{ 0%,40%,100%{ transform:scale(1); } 20%{ transform:scale(1.18); } 30%{ transform:scale(.96); } }
@keyframes chrdLift{ 0%,100%{ transform:translateY(2px) rotate(0); } 50%{ transform:translateY(-5px) rotate(-6deg); } }
@keyframes chrdShine{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(124,226,255,0)); } 50%{ filter:drop-shadow(0 0 10px rgba(124,226,255,.95)); } }
@keyframes chrdDraw{ 0%{ stroke-dashoffset:100; } 45%,70%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-100; } }
@keyframes chrdEcg{ 0%{ stroke-dashoffset:420; } 55%,75%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-420; } }
@keyframes chrdSpin{ to{ transform:rotate(360deg); } }
@keyframes chrdDrift{ from{ transform:translateX(-40px); } to{ transform:translateX(60px); } }
@keyframes chrdGlow{ 0%,100%{ opacity:.75; } 50%{ opacity:1; filter:drop-shadow(0 0 6px #7CE2FF); } }
@keyframes chrdScan{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(76px); } }
@keyframes chrdBar{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.55); } }
@keyframes chrdBarV{ 0%,100%{ transform:scaleY(.55); } 50%{ transform:scaleY(1); } }
@keyframes chrdHop{ 0%,60%,100%{ transform:translateY(0); } 30%{ transform:translateY(-6px); } }
@keyframes chrdSway{ 0%,100%{ transform:rotate(-1.5deg); } 50%{ transform:rotate(1.5deg); } }
@keyframes chrdSwayG{ 0%,100%{ transform:skewX(-4deg); } 50%{ transform:skewX(4deg); } }
@keyframes chrdGrow{ 0%{ transform:scale(.2); opacity:.2; } 35%,80%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1); opacity:0; } }
@keyframes chrdTail{ 0%,100%{ transform:rotate(-14deg); } 50%{ transform:rotate(16deg); } }
@keyframes chrdNod{ 0%,70%,100%{ transform:rotate(0); } 80%{ transform:rotate(8deg); } 90%{ transform:rotate(-3deg); } }
@keyframes chrdFlip{ 0%,30%{ transform:scaleX(1); } 55%,100%{ transform:scaleX(-1); } }
@keyframes chrdWrite{ 0%,100%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-5px,2px) rotate(-4deg); } 50%{ transform:translate(-9px,-1px) rotate(2deg); } 75%{ transform:translate(-4px,3px); } }
@keyframes chrdTwinkle{ 0%,100%{ transform:scale(.6); opacity:.4; } 50%{ transform:scale(1.15); opacity:1; } }
@keyframes chrdWave{ from{ transform:translateX(0); } to{ transform:translateX(40px); } }
@keyframes chrdDrop{ 0%{ transform:translateY(-6px); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(14px); opacity:0; } }
@keyframes chrdHoist{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(18px); } }
@keyframes chrdHammer{ 0%,100%{ transform:rotate(0); } 40%{ transform:rotate(-26deg); } 55%{ transform:rotate(4deg); } }
@keyframes chrdIn{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .chrd *, .chrd-scene *, .chrd-tile-art *, .chrd-econ *, .chrd-ridge *{ animation:none !important; }
  .chrd .ecgp, .a-ecg{ stroke-dashoffset:0 !important; }
  .chrd-show .ticks li{ opacity:1; }
}

/* left-card fillers */
.chrd-out{ margin:20px 0 0; border-radius:14px; overflow:hidden; position:relative; }
.chrd-out img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.chrd-out figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; background:linear-gradient(180deg,transparent,rgba(5,15,36,.85)); color:#fff; font-style:italic; font-weight:800; font-size:14px; }
.chrd-loop{ margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.chrd-loop div{ position:relative; padding:12px 12px 12px 50px; border-radius:12px; background:linear-gradient(135deg,#EEF5FF,#DCE8FF); border:1.5px solid #A9C6F2; }
.chrd-loop b{ position:absolute; left:12px; top:12px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#0A6BFE; color:#fff; font-weight:900; font-size:14px; animation:chrdPulse 3s ease-in-out infinite; }
.chrd-loop div:nth-child(2) b{ animation-delay:.6s; } .chrd-loop div:nth-child(3) b{ animation-delay:1.2s; } .chrd-loop div:nth-child(4) b{ animation-delay:1.8s; }
.chrd-loop span{ display:block; font-style:italic; font-weight:900; text-transform:uppercase; font-size:17px; color:#16348F; }
.chrd-loop small{ display:block; margin-top:2px; font-size:13.5px; font-weight:600; line-height:1.3; color:#44567E; }
@media (prefers-reduced-motion: reduce){ .chrd-loop b{ animation:none; } }
.chrd-rd-title{ text-align:center; }
@media(max-width:560px){ .chrd-pillars i{ display:none; } .chrd-pillars{ gap:4px 14px; } }

/* centred section titles */
.chrd .chrd-rd-title, .chrd .chrd-title, .chrd .chrd-rule{ text-align:center; max-width:none; margin-left:auto; margin-right:auto; width:100%; }
.chrd-chnz .cap{ flex-direction:column; justify-content:center; text-align:center; gap:6px; }