/* ============================================================
   SECURITY CHAMPIONS PROGRAMME HEALTH CHECK - PAGE STYLES
   Built on the site's design tokens (--navy, --behaviour, --culture,
   --resilience and so on) and shared classes (cb-section, section-h2,
   btn-primary, btn-outline, cb-cta-band). Everything here is scoped
   to .hc. The second value in each var() is only a safety net.
   ============================================================ */
.hc {
  --hc-navy: var(--navy, #071a33);
  --hc-mid: var(--navy-mid, #0c2445);
  --hc-white: var(--white, #fff);
  --hc-muted: var(--text-muted, #a9b8cf);
  --hc-faint: var(--text-faint, #7386a3);
  --hc-border: var(--border, rgba(255,255,255,0.10));
  --hc-border-hover: var(--border-hover, rgba(255,255,255,0.28));
  --hc-b: var(--behaviour, #4CAF50);
  --hc-c: var(--culture, #2D7FF9);
  --hc-r: var(--resilience, #FF8C2B);
  --hc-low: #FF6B5E;
  --hc-display: var(--font-display, inherit);
  --hc-radius: var(--radius, 10px);
  --hc-radius-lg: var(--radius-lg, 16px);
  --hc-pill: var(--radius-pill, 999px);
  --hc-pad-x: var(--pad-x, 2rem);
  --hc-max-w: var(--max-w, 1180px);
}
.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc [hidden] { display: none !important; }
.hc button.btn-primary, .hc button.btn-outline { font-family: inherit; cursor: pointer; }
.hc button.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.hc .hc-b { color: var(--hc-b); font-style: normal; }

/* Hero */
.hc-hero { position: relative; overflow: hidden; background: var(--hc-navy); padding: 9rem var(--hc-pad-x) 5rem; }
.hc-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.hc-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.hc-hero-inner { max-width: var(--hc-max-w); margin: auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem 4rem; align-items: center; }
.hc-hero-single { grid-template-columns: 1fr; }
.hc-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hc-r); margin-bottom: 1.2rem; }
.hc-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--hc-r); border-radius: 2px; display: inline-block; flex-shrink: 0; }
.hc-h1 { font-family: var(--hc-display); font-weight: 800; font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--hc-white); margin: 0 0 1.3rem; max-width: 620px; text-wrap: balance; }
.hc-lead { font-size: 1.08rem; color: var(--hc-muted); line-height: 1.8; margin: 0 0 1.8rem; max-width: 580px; }
.hc-small { font-size: 0.82rem; color: var(--hc-faint); line-height: 1.65; margin: 1.6rem 0 0; max-width: 620px; }
.hc-small a { color: var(--hc-muted); border-bottom: 1px dotted var(--hc-muted); text-decoration: none; }
.hc-small a:hover { color: var(--hc-white); }
.hc-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; padding: 0; margin: 0 0 2rem; font-size: 0.85rem; color: var(--hc-muted); }
.hc-facts strong { display: block; font-family: var(--hc-display); font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--hc-white); }
.hc-btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Hero panel with radar */
.hc-panel { border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); background: linear-gradient(165deg, #04234e 0%, #001837 45%, #000d21 100%); box-shadow: 0 4px 14px rgba(0,0,0,0.25); padding: 1.6rem 1.6rem 1.4rem; }
.hc-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.hc-panel-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hc-r); }
.hc-panel-score { font-size: 0.85rem; color: var(--hc-muted); }
.hc-panel-score strong { font-family: var(--hc-display); font-size: 1.25rem; color: var(--hc-white); }
.hc-panel-note { font-size: 0.8rem; color: var(--hc-muted); line-height: 1.55; margin: 0.6rem 0 0; text-align: center; }
.hc-radar { width: 100%; max-width: 420px; display: block; margin: 0 auto; overflow: visible; }
.hc-radar-grid { fill: none; stroke: rgba(255,255,255,0.13); stroke-width: 1; }
.hc-radar-you { fill: rgba(76,175,80,0.20); stroke: var(--hc-b); stroke-width: 2.5; stroke-linejoin: round; }
.hc-radar-bench { fill: none; stroke: var(--hc-c); stroke-width: 1.8; stroke-dasharray: 5 4; }
.hc-radar-dot { fill: var(--hc-b); }
.hc-radar-label { font-size: 12.5px; font-weight: 600; fill: var(--hc-white); font-family: inherit; }
.hc-key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--hc-b); vertical-align: middle; margin: 0 5px 0 10px; }
.hc-key-bench { border-top: 2px dashed var(--hc-c); }

/* Score */
.hc-score { font-size: 1rem; color: var(--hc-muted); margin: 0 0 0.3rem; }
.hc-score strong { font-family: var(--hc-display); font-size: clamp(4rem, 8vw, 5.8rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--hc-white); margin-right: 0.4rem; }

/* Dimension cards */
.hc-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.hc-dim { position: relative; background: var(--hc-navy); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); padding: 1.5rem 1.4rem; transition: border-color 0.2s, transform 0.2s; }
.hc-dim:hover { border-color: var(--hc-border-hover); transform: translateY(-3px); }
.hc-dim-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; font-family: var(--hc-display); font-size: 0.82rem; font-weight: 700; margin-bottom: 0.9rem; }
.hc-dim-b .hc-dim-num { color: var(--hc-b); } .hc-dim-c .hc-dim-num { color: var(--hc-c); } .hc-dim-r .hc-dim-num { color: var(--hc-r); }
.hc-dim h3 { font-family: var(--hc-display); font-size: 1rem; font-weight: 700; color: var(--hc-white); margin: 0 0 0.45rem; line-height: 1.25; }
.hc-dim p { font-size: 0.82rem; color: var(--hc-muted); line-height: 1.6; margin: 0; }

/* Messages */
.hc-msg { font-size: 0.9rem; line-height: 1.55; padding: 0.8rem 1rem; border-radius: var(--hc-radius); margin: 0 0 1.4rem; color: var(--hc-white); }
.hc-msg-error { background: rgba(255,107,94,0.12); border: 1px solid rgba(255,107,94,0.45); }
.hc-msg-ok { background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.45); }
.hc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Questionnaire */
.hc-narrow { max-width: 820px; }
/* Top padding clears the fixed nav. No minimum height, and only a small gap below, so the footer follows straight on. */
.hc-js .hc-form-section { padding-top: 8.5rem; padding-bottom: 2.5rem; }
.hc-form fieldset { border: 0; padding: 0; margin: 0 0 3.5rem; min-width: 0; }
.hc-form legend { padding: 0; margin-bottom: 0.6rem; width: 100%; }
.hc-form legend .hc-eyebrow { display: flex; margin-bottom: 0.8rem; }
.hc-qtext { display: block; font-family: var(--hc-display); font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--hc-white); }
.hc-hint { color: var(--hc-muted); font-size: 0.9rem; margin: 0 0 1.4rem; }
.hc-option { display: block; position: relative; margin-bottom: 0.7rem; cursor: pointer; }
.hc-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hc-option-body { display: block; background: var(--hc-mid); border: 1px solid var(--hc-border); border-radius: var(--hc-radius); padding: 0.95rem 1.2rem 1rem; font-size: 0.95rem; line-height: 1.5; color: var(--hc-white); transition: border-color 0.15s, background 0.15s; }
.hc-option-scale { display: block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hc-faint); margin-bottom: 0.2rem; }
.hc-option:hover .hc-option-body { border-color: var(--hc-border-hover); }
.hc-option input:checked + .hc-option-body { border-color: var(--hc-b); background: rgba(76,175,80,0.12); }
.hc-option input:checked + .hc-option-body .hc-option-scale { color: var(--hc-b); }
.hc-option input:focus-visible + .hc-option-body { outline: 2px solid var(--hc-c); outline-offset: 2px; }
/* Five fields: three across the first row, two across the second, both rows
   flush with the left and right edges. Labels sit at the top of each cell and
   the inputs at the bottom, so inputs line up even if a label wraps. */
.hc-fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.3rem 1.1rem; margin: 1.4rem 0 2rem; }
.hc-fields .hc-field { grid-column: span 2; }
.hc-fields .hc-field:nth-child(n+4) { grid-column: span 3; }
.hc-field { display: flex; flex-direction: column; }
.hc-field select, .hc-field input { margin-top: auto; }
.hc-field > span { display: block; font-weight: 600; font-size: 0.82rem; margin-bottom: 0.4rem; color: var(--hc-white); }
.hc-field select, .hc-field input { width: 100%; font: inherit; font-size: 0.95rem; padding: 0.75rem 0.9rem; border: 1px solid var(--hc-border-hover); border-radius: var(--hc-radius); background: var(--hc-mid); color: var(--hc-white); color-scheme: dark; }
.hc-field select:focus-visible, .hc-field input:focus-visible { outline: 2px solid var(--hc-c); outline-offset: 2px; }
.hc-check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.82rem; color: var(--hc-muted); margin: 0.9rem 0 1.2rem; line-height: 1.5; }
.hc-check input { margin-top: 0.2rem; width: 17px; height: 17px; flex: none; accent-color: var(--hc-b); }

/* One question per screen (JavaScript on) */
.hc-js .hc-step { display: none; }
.hc-js .hc-step.hc-active { display: block; }
.hc-js .hc-form fieldset { margin-bottom: 1.6rem; }
.hc-progress { margin-bottom: 2.2rem; }
.hc-progress-bar { height: 5px; background: var(--hc-border); border-radius: 3px; overflow: hidden; }
.hc-progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hc-b), var(--hc-c)); transition: width 0.25s; }
.hc-progress-text { font-size: 0.78rem; color: var(--hc-faint); margin: 0.6rem 0 0; }
.hc-nav { display: flex; justify-content: space-between; gap: 0.8rem; }
.hc-submit-row { margin: 0; }

/* ============================================================
   RESULT DASHBOARD
   ============================================================ */
.hc-hero-dash { padding-bottom: 4rem; }
.hc-dash { max-width: var(--hc-max-w); margin: auto; position: relative; z-index: 1; background: linear-gradient(165deg, rgba(4,35,78,0.85) 0%, rgba(0,24,55,0.9) 45%, rgba(0,13,33,0.92) 100%); border: 1px solid var(--hc-border); border-radius: calc(var(--hc-radius-lg) + 6px); box-shadow: 0 10px 40px rgba(0,0,0,0.35); padding: 2rem; }
.hc-dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hc-dash-head .hc-eyebrow { margin-bottom: 0.5rem; }
.hc-dash-title { font-family: var(--hc-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--hc-white); margin: 0; }
.hc-dash-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.hc-dash-row1 { grid-template-columns: minmax(240px, 0.8fr) 1.6fr; }
.hc-dash-dims { grid-template-columns: repeat(6, 1fr); }
.hc-dash-row3 { grid-template-columns: 1.25fr 1fr; }
.hc-dash > .hc-small { margin-top: 1.2rem; }
.hc-tile { background: var(--hc-mid); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); padding: 1.4rem 1.5rem; min-width: 0; }
.hc-tile-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-faint); margin-bottom: 0.5rem; }
.hc-tile-h { font-family: var(--hc-display); font-size: 1.05rem; font-weight: 700; color: var(--hc-white); margin: 0 0 1rem; }

/* Gauge */
.hc-gauge-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 1.2rem; }
.hc-gauge { width: 100%; max-width: 230px; display: block; }
.hc-gauge-track, .hc-gauge-fill { fill: none; stroke-width: 15; stroke-linecap: round; }
.hc-gauge-track { stroke: rgba(255,255,255,0.10); }
.hc-gauge-low .hc-gauge-fill { stroke: var(--hc-low); }
.hc-gauge-mid .hc-gauge-fill { stroke: var(--hc-r); }
.hc-gauge-high .hc-gauge-fill { stroke: var(--hc-b); }
.hc-gauge-num { font-family: var(--hc-display); font-size: 54px; font-weight: 800; letter-spacing: -1.5px; fill: var(--hc-white); }
.hc-gauge-of { font-size: 11.5px; fill: var(--hc-muted); }
.hc-gauge-label { font-family: var(--hc-display); font-size: 0.95rem; font-weight: 700; color: var(--hc-white); margin: 0.1rem 0 0; }

/* Summary */
.hc-summary-tile { display: flex; align-items: center; gap: 2rem; padding: 1.6rem 1.8rem; }
.hc-summary-text { flex: 1; min-width: 0; }
.hc-summary-band { font-family: var(--hc-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--hc-white); margin: 0 0 0.7rem; }
.hc-summary-text p { font-size: 1rem; color: var(--hc-muted); line-height: 1.7; margin: 0; }
.hc-steps { display: flex; align-items: flex-end; gap: 7px; height: 92px; flex-shrink: 0; }
.hc-steps span { display: block; width: 15px; border-radius: 3px; background: rgba(255,255,255,0.10); }
.hc-steps .hc-step-on { background: var(--hc-b); }

/* Dimension tiles */
.hc-dim-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.2rem 0.8rem 1rem; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s; }
.hc-dim-tile:hover { border-color: var(--hc-border-hover); transform: translateY(-3px); }
.hc-dim-tile-constraint { border-color: rgba(255,140,43,0.6); }
.hc-dim-icon { width: 30px; height: 30px; margin-bottom: 0.6rem; }
.hc-tone-b .hc-dim-icon { color: var(--hc-b); } .hc-tone-c .hc-dim-icon { color: var(--hc-c); } .hc-tone-r .hc-dim-icon { color: var(--hc-r); }
.hc-dim-name { font-size: 0.82rem; font-weight: 600; color: var(--hc-white); }
.hc-dim-score { font-family: var(--hc-display); font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: var(--hc-white); font-variant-numeric: tabular-nums; }
.hc-dim-bar { display: block; width: 78%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.10); margin: 0.45rem 0 0.55rem; overflow: hidden; }
.hc-dim-bar span { display: block; height: 100%; border-radius: 3px; }
.hc-dim-foot { font-size: 0.66rem; font-weight: 600; color: var(--hc-faint); }
.hc-dim-tile-constraint .hc-dim-foot { color: var(--hc-r); }

/* Opportunities and next step */
.hc-opps { list-style: none; margin: 0; padding: 0; }
.hc-opps li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.88rem; color: var(--hc-muted); line-height: 1.55; }
.hc-opps li + li { margin-top: 0.9rem; }
.hc-opps strong { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-white); margin-bottom: 0.1rem; }
.hc-opp-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--hc-navy); border: 1px solid var(--hc-border-hover); color: var(--hc-white); font-size: 0.74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
.hc-next { display: flex; gap: 0.9rem; align-items: flex-start; text-decoration: none; font-size: 0.9rem; line-height: 1.55; color: var(--hc-white); }
.hc-next + .hc-next { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hc-border); }
.hc-next-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--hc-b); color: #04150a; font-size: 1.05rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.hc-next:hover .hc-next-arrow { transform: scale(1.1); }
.hc-next-alt { color: var(--hc-muted); }
.hc-next-alt .hc-next-arrow { background: transparent; border: 1.5px solid var(--hc-border-hover); color: var(--hc-white); }

/* Detail section: constraint beside the profile chart */
.hc-detail-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.5rem; align-items: stretch; }
.hc-detail-top .hc-panel { display: flex; flex-direction: column; justify-content: center; }
.hc-bar-row { scroll-margin-top: 6rem; }

@media (max-width: 1024px) {
  .hc-dash-dims { grid-template-columns: repeat(3, 1fr); }
  .hc-detail-top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hc-dash { padding: 1.2rem; }
  .hc-dash-row1, .hc-dash-row3 { grid-template-columns: 1fr; }
  .hc-summary-tile { gap: 1.2rem; padding: 1.3rem; }
  .hc-steps { height: 70px; gap: 5px; } .hc-steps span { width: 11px; }
}
@media (max-width: 480px) {
  .hc-dash-dims { grid-template-columns: repeat(2, 1fr); }
  .hc-steps { display: none; }
}

/* Constraint */
.hc-constraint { background: var(--hc-navy); border: 1px solid var(--hc-border); border-left: 4px solid var(--hc-r); border-radius: var(--hc-radius-lg); padding: 2rem 2.2rem 1.8rem; }
.hc-constraint .section-h2 { margin-bottom: 0.8rem; }
.hc-constraint-lead { font-size: 1.02rem; color: var(--hc-muted); line-height: 1.75; margin: 0 0 1.4rem; max-width: 780px; }
.hc-constraint h3 { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--hc-faint); margin: 0 0 0.7rem; }
.hc-constraint ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.hc-constraint li { position: relative; padding-left: 1.3rem; margin-bottom: 0.55rem; font-size: 0.95rem; color: var(--hc-white); line-height: 1.55; }
.hc-constraint li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-r); }
.hc-pill { display: inline-block; font-family: var(--font-body, inherit); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; border: 1px solid var(--hc-border-hover); border-radius: var(--hc-pill); padding: 0.2rem 0.8rem; vertical-align: middle; margin-left: 0.5rem; color: var(--hc-white); white-space: nowrap; }
.hc-heroes { font-size: 0.86rem; color: var(--hc-muted); line-height: 1.65; border-top: 1px solid var(--hc-border); padding-top: 1.1rem; margin: 0; }
.hc-heroes strong { color: var(--hc-white); }
.hc-heroes a { color: var(--hc-b); font-weight: 600; white-space: nowrap; text-decoration: none; }

/* Dimension bars */
.hc-bars { margin-top: 1.5rem; }
.hc-bar-row { padding: 1.3rem 0; border-top: 1px solid var(--hc-border); }
.hc-bar-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.65rem; }
.hc-bar-name { font-family: var(--hc-display); font-weight: 700; color: var(--hc-white); flex: 1; }
.hc-bar-constraint .hc-bar-name::after { content: 'Constraint'; font-family: var(--font-body, inherit); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hc-r); background: rgba(255,140,43,0.14); border-radius: var(--hc-pill); padding: 0.2rem 0.6rem; margin-left: 0.7rem; vertical-align: middle; }
.hc-bar-level { font-size: 0.76rem; font-weight: 600; }
.hc-level-low { color: var(--hc-low); } .hc-level-mid { color: var(--hc-r); } .hc-level-high { color: var(--hc-b); }
.hc-bar-score { font-family: var(--hc-display); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right; color: var(--hc-white); }
.hc-bar-track { position: relative; height: 8px; background: rgba(255,255,255,0.09); border-radius: 4px; }
.hc-bar-fill { display: block; height: 100%; border-radius: 4px; }
.hc-fill-low { background: var(--hc-low); } .hc-fill-mid { background: var(--hc-r); } .hc-fill-high { background: var(--hc-b); }
.hc-bar-mark { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--hc-white); border-radius: 2px; transform: translateX(-50%); }
.hc-bar-note { font-size: 0.85rem; color: var(--hc-muted); line-height: 1.6; margin: 0.7rem 0 0; max-width: 780px; }

/* Report and follow-up cards */
.hc-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hc-card { background: var(--hc-mid); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); padding: 1.8rem; }
.hc-card h2 { font-family: var(--hc-display); font-size: 1.3rem; font-weight: 800; color: var(--hc-white); margin: 0 0 0.7rem; }
.hc-card p { font-size: 0.9rem; color: var(--hc-muted); line-height: 1.65; margin: 0 0 1.3rem; }
.hc-card .hc-msg { color: var(--hc-white); }

@media (max-width: 1024px) {
  .hc-hero-inner { grid-template-columns: 1fr; }
  .hc-dims { grid-template-columns: repeat(2, 1fr); }
  .hc-lead { max-width: none; }
}
@media (max-width: 768px) {
  .hc-hero { padding: 7rem var(--hc-pad-x) 3.5rem; }
  .hc-js .hc-form-section { padding-top: 7rem; padding-bottom: 2rem; }
  .hc-cards2 { grid-template-columns: 1fr; }
  .hc-fields { grid-template-columns: 1fr; }
  .hc-fields .hc-field, .hc-fields .hc-field:nth-child(n+4) { grid-column: auto; }
  .hc-constraint { padding: 1.5rem 1.3rem; }
  .hc-bar-head { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .hc-dims { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hc * { transition: none !important; } }