/* base.css */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-800-normal.woff2) format('woff2'); }

:root {
  /* brand tokens, named as in the Figma variables */
  --red: #da0a2d;          /* brand/color-1 */
  --navy: #1e2e69;         /* brand/color-2 */
  --blue: #5d80b8;         /* brand/color-3 */
  --ice: #c5d7f4;          /* brand/color-4 */
  --mist: #dadbdf;         /* brand/color-5 */
  --ink: #080c28;          /* brand/color-6 */
  --paper: #f0f2f7;        /* brand/color-8 */
  --card: #202a45;         /* brand/color-9 */
  --gray: #6a6a6a;         /* brand/color-10 */
  --gray-2: #888;          /* brand/color-11 */
  --black: #1f1d1b;
  --white: #fff;
  --mist-75: rgba(218, 219, 223, 0.75);
  --font-head: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --container: 1320px;
  --wide: 1375px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--black); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container-wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.eyebrow { font: 500 18px/1.25 var(--font-body); text-transform: uppercase; color: var(--gray); }
.h1 { font: 800 64px/1.2 var(--font-head); text-transform: uppercase; color: var(--black); }
.h2 { font: 800 52px/1.2 var(--font-head); text-transform: uppercase; color: var(--black); }
.h5 { font: 700 24px/1.2 var(--font-head); text-transform: uppercase; }
.body-18 { font: 400 18px/1.5 var(--font-body); }
.text-link { display: inline-flex; align-items: center; gap: 8px; height: 24px; font: 700 18px/1.2 var(--font-body); text-transform: uppercase; color: var(--navy); }
.text-link img { width: 20px; height: 20px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 55px; padding: 16px 34px; border-radius: 10px;
  font: 700 18px/normal var(--font-body); text-transform: uppercase; color: var(--white); background: var(--red); white-space: nowrap; transition: filter .15s; }
.btn:hover { filter: brightness(1.08); }
.btn--navy { background: var(--navy); }
.btn--sm { height: auto; min-width: 220px; font-size: 16px; }

/* logo: four vector pieces placed exactly as in Figma */
.logo { position: relative; display: block; overflow: hidden; }
.logo img { position: absolute; display: block; max-width: none; width: auto; height: auto; }
.logo .l1 { inset: 0 16.54% 51.19% 16.2%; width: 67.26%; height: 48.81%; }
.logo .l2 { inset: 83.11% 10.16% 0 6.56%; width: 83.28%; height: 16.89%; }
.logo .l3 { inset: 55.48% 0 22.14% 0; width: 100%; height: 22.38%; }
.logo .l4 { inset: 45.63% 13.64% 51.05% 81.98%; width: 4.38%; height: 3.32%; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; height: 110px; background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.site-header .logo { width: 138px; height: 90px; flex: none; }
.site-header__right { display: flex; align-items: center; gap: 32px; height: 64px; }
.site-header__meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.site-header__phone { font: 700 24px/1.2 var(--font-head); color: var(--navy); text-transform: uppercase; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 48px; }
.site-nav a { font: 700 17px/1.25 var(--font-body); color: var(--black); white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }
.site-header__toggle { display: none; }

/* footer */
.site-footer { background: var(--ink); padding: 50px 0; color: var(--mist); }
.site-footer__cols { display: flex; align-items: flex-start; }
.site-footer__brand { width: 448px; height: 180px; flex: none; }
.site-footer .logo { width: 122px; height: 80px; }
.site-footer__tagline { width: 300px; padding-top: 24px; font: 400 16px/1.5 var(--font-body); }
.site-footer__contact { width: 448px; flex: none; }
.site-footer__links { width: 440px; flex: none; }
.site-footer__title { font: 500 18px/1.25 var(--font-body); color: var(--white); text-transform: uppercase; white-space: nowrap; }
.site-footer__contact-body { width: 394px; padding-top: 16px; display: flex; flex-direction: column; gap: 24px; }
.site-footer address { font: 400 14px/20px var(--font-body); font-style: normal; white-space: nowrap; }
.site-footer__reach { display: flex; flex-direction: column; gap: 32px; }
.site-footer__phone { font: 700 24px/1.2 var(--font-head); color: var(--white); white-space: nowrap; }
.site-footer__social { display: flex; align-items: center; gap: 24px; }
.site-footer__social a, .site-footer__social img { width: 24px; height: 24px; }
.site-footer__linkcols { display: flex; padding-top: 16px; }
.site-footer__linkcols ul { flex: 1 0 0; display: flex; flex-direction: column; gap: 16px; }
.site-footer__linkcols a { font: 400 14px/20px var(--font-body); color: var(--mist); white-space: nowrap; }
.site-footer__linkcols a:hover { color: var(--white); }
.site-footer__bottom { margin-top: 32px; padding-top: 33px; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: space-between; }
.site-footer__bottom p, .site-footer__bottom a { font: 500 12px/1.5 var(--font-body); color: var(--mist-75); }
.site-footer__legal { display: flex; gap: 24px; }

/* the apply/contact form (shared by home and contact) */
.apply-form { background: var(--white); border-radius: 24px; padding: 49px 33px; }
.apply-form__title { font: 700 24px/1.2 var(--font-head); color: #111318; text-transform: uppercase; }
.apply-form__note { padding-top: 8px; font: 400 14px/20px var(--font-body); color: var(--black); }
.apply-form__fields { padding-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.apply-form__row { display: flex; gap: 16px; }
.apply-form__field { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.apply-form label { padding-bottom: 12px; font: 500 15px/1.2 var(--font-body); color: #6b7180; text-transform: uppercase; }
.apply-form input, .apply-form textarea { width: 100%; height: 46px; padding: 13px 16px; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 12px;
  background: var(--paper); font: 500 14px/1.2 var(--font-body); color: var(--black); outline: none; }
.apply-form textarea { display: block; height: 100px; border-radius: 14px; resize: vertical; }
.apply-form input::placeholder, .apply-form textarea::placeholder { color: #6b7180; opacity: 1; }
.apply-form input:focus, .apply-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(93, 128, 184, 0.2); }
.apply-form__submit { display: flex; justify-content: center; padding-top: 40px; }

/* ---------- responsive: header, footer, form ---------- */
.site-header__mobile { display: none; }
@media (max-width: 1360px) {
  .site-nav { gap: 28px; }
  .site-header__right { gap: 24px; }
  .site-footer__brand { width: 34%; height: auto; }
  .site-footer__contact, .site-footer__links { width: 33%; flex: 1 1 0; }
  .site-footer__contact-body { width: auto; }
}
@media (max-width: 1180px) {
  .site-header__mobile { display: flex; align-items: center; gap: 16px; }
  .site-header__call, .site-header__toggle { width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; }
  .site-header__call img, .site-header__toggle img { width: 41px; height: 41px; }
  .site-header__right { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 20px; height: auto;
    padding: 20px var(--gutter) 28px; background: var(--white); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15); }
  .site-header.is-open .site-header__right { display: flex; }
  .site-header__meta { align-items: stretch; gap: 16px; }
  .site-header__phone { order: 2; }
  .site-nav { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid #e6e8ee; font-size: 18px; }
}
@media (max-width: 760px) {
  :root { --gutter: 12px; }
  .site-header { height: 56px; background: var(--white); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__inner { padding-block: 4px; }
  .site-header .logo { width: 73px; height: 48px; }
  .site-footer { padding: 40px 0 24px; text-align: center; }
  .site-footer__cols { flex-direction: column; align-items: center; gap: 32px; }
  .site-footer__brand, .site-footer__contact, .site-footer__links { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; }
  .site-footer__brand .logo { width: 107px; height: 70px; }
  .site-footer__tagline { display: none; }
  .site-footer__contact-body { align-items: center; padding-top: 16px; }
  .site-footer address { white-space: normal; font-size: 14px; }
  .site-footer__reach { align-items: center; gap: 24px; }
  .site-footer__social { gap: 24px; }
  .site-footer__social a, .site-footer__social img { width: 28px; height: 28px; }
  .site-footer__linkcols { flex-direction: column; align-items: center; padding-top: 16px; gap: 16px; }
  .site-footer__linkcols ul { align-items: center; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; margin-top: 32px; padding-top: 20px; }
  .apply-form { padding: 32px 20px; }
}
@media (max-width: 560px) {
  .apply-form__row { flex-direction: column; gap: 20px; }
}

/* benefits.css */
/* member benefits page */
.eyebrow--ice { color: var(--ice); }
.h2--white { color: var(--white); }

/* check lists: Figma's 16x11 tick sits 8px down the first 27px line */
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li { position: relative; padding-left: 28px; font: 400 18px/1.5 var(--font-body); }
.checklist li::before { content: ''; position: absolute; left: -1px; top: 7px; width: 18px; height: 13px; background: url(../img/ben-sales-vector.svg) no-repeat 0 0 / 18px 13px; }
.checklist--navy li { color: var(--navy); }
.checklist--navy li::before { background-image: url(../img/ben-core-vector.svg); }

.cta-row { margin-top: 40px; display: flex; justify-content: center; }

/* hero */
.bhero { position: relative; padding: 100px 0; overflow: hidden; color: var(--white); }
.bhero__bg { position: absolute; inset: 0; }
.bhero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bhero__shade { position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(17, 19, 24, 0.6) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%),
  linear-gradient(90deg, rgba(17, 19, 24, 0.7) 0%, rgba(17, 19, 24, 0.5) 50%, rgba(17, 19, 24, 0.1) 100%); }
.bhero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bhero__title { width: 656px; max-width: 100%; color: var(--white); }
.bhero__content { max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.bhero__lede { width: 656px; max-width: 100%; color: var(--white); }

/* membership programs */
.tiers { background: var(--ink); padding: 110px 0; }
.tiers__title { color: var(--white); text-align: center; }
.tiers__grid { margin-top: 48px; display: flex; align-items: stretch; justify-content: space-between; }
.tier { width: 430px; padding: 32px 24px; border-radius: 24px; background: var(--navy); display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.tier--featured { padding: 30px 22px; border: 2px solid var(--ice); }
.tier__head { display: flex; flex-direction: column; gap: 8px; text-transform: uppercase; white-space: nowrap; }
.tier__eyebrow { font: 500 18px/1.25 var(--font-body); color: var(--mist-75); }
.tier--featured .tier__eyebrow { color: var(--ice); }
.tier__name { font: 800 40px/1.2 var(--font-head); color: var(--white); }
.tier__price { font: 800 40px/1.2 var(--font-head); color: var(--ice); text-transform: uppercase; white-space: nowrap; }
.tier__list { width: 100%; }
.tier__list li { color: var(--white); }

/* HSF Core detail */
.core { position: relative; padding: 110px 0; overflow: hidden; }
.core__bg, .more-info__bg { position: absolute; inset: 0; }
.core__bg img, .more-info__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.core__bg::after, .more-info__bg::after { content: ''; position: absolute; inset: 0; background: rgba(240, 242, 247, 0.3); }
.core__inner { position: relative; display: flex; align-items: center; gap: 56px; }
.core__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.core__head { display: flex; flex-direction: column; gap: 12px; }
.core__cols { display: flex; align-items: flex-start; gap: 24px; }
.core__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.core__col-title { color: var(--black); }
.core__col-body { height: 378px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.core__col-body .checklist { width: 100%; }
.core__img { position: relative; width: 495px; flex: none; align-self: stretch; border-radius: 24px; overflow: hidden; }
.core__img img { position: absolute; left: -31.55%; top: 0; width: 163.1%; height: 100%; max-width: none; }

/* sales system */
.system { background: var(--ink); padding: 110px 0 80px; }
.system__head { display: flex; flex-direction: column; gap: 12px; text-transform: uppercase; }
.system__cards { margin-top: 24px; display: flex; align-items: stretch; justify-content: space-between; }
.step { width: 430px; padding: 32px 24px; border: 1px solid var(--gray); border-radius: 24px; background: var(--card); display: flex; flex-direction: column; align-items: flex-start; }
.step__num { font: 800 52px/1.2 var(--font-head); color: var(--blue); text-transform: uppercase; }
.step__title { height: 44px; padding-top: 16px; font: 700 24px/1.2 var(--font-head); color: var(--white); text-transform: uppercase; white-space: nowrap; }
.step__meta { padding-top: 12px; font: 400 18px/1.5 var(--font-body); color: var(--ice); }
.step__list { width: 100%; padding-top: 12px; }
.step__list li { color: var(--mist); }
.step__value { margin-top: 16px; font: 700 18px/1.5 var(--font-body); color: var(--mist); }

/* full-width photo strip */
/* the box keeps the 1920x280 design ratio so Figma's percentage crop never distorts the photo */
.strip { position: relative; aspect-ratio: 1920 / 280; overflow: hidden; }
.strip img { position: absolute; left: -8.51%; top: -217.5%; width: 108.51%; height: 496.1%; max-width: none; }

/* Built to Scale detail */
.scale { background: linear-gradient(180deg, var(--navy), #15214e); padding: 110px 0; }
.scale__head { display: flex; flex-direction: column; gap: 12px; text-transform: uppercase; }
.scale__eyebrow { color: var(--mist); }
.scale__row { margin-top: 24px; display: flex; align-items: flex-start; gap: 56px; }
.scale__media { width: 634px; flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; }
.scale__img { position: relative; height: 913px; border-radius: 24px; overflow: hidden; }
.scale__img img { position: absolute; left: -36.85%; top: 0; width: 192.64%; height: 100%; max-width: none; }
.scale__note { font: 400 20px/1.5 var(--font-body); color: var(--white); }
.scale__note strong { font-weight: 700; }
.scale__note b { font-size: 18px; }
.scale__list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pillar { position: relative; min-height: 343px; display: flex; background: var(--white); }
.pillar__num { flex: none; width: 72px; margin-left: .5px; border-right: 1px solid rgba(218, 219, 223, 0.75); display: flex; align-items: center; justify-content: center;
  font: 700 32px/19.5px var(--font-head); letter-spacing: 1.56px; color: var(--navy); white-space: nowrap; }
.pillar__body { flex: 1 0 0; min-width: 0; padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; }
.pillar__title { color: var(--black); }
.pillar__checks { padding-top: 12px; }

/* need more information */
.more-info { position: relative; padding: 110px 0; overflow: hidden; }
.more-info__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.more-info__copy { max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.more-info__copy .h2 { white-space: nowrap; }
.more-info__copy .body-18 { width: 800px; max-width: 100%; color: var(--navy); }
.more-info__btn { min-width: 220px; }

/* Figma rounds every text box to whole pixels (22.5 -> 23, 62.4 -> 62, 2 x 76.8 -> 154);
   matching line-heights keep each block on the same pixel rows as the design */
.bhero__title { line-height: 77px; }
.h2, .step__num { line-height: 62px; }
.eyebrow, .tier__eyebrow { line-height: 23px; }
.h5 { line-height: 29px; }

/* ---------- responsive: member benefits ---------- */
@media (max-width: 1360px) {
  .tiers__grid, .system__cards { gap: 24px; }
  .tier, .step { width: auto; flex: 1 1 0; min-width: 0; }
  .tier__head { white-space: normal; }
  .step__title { height: auto; white-space: normal; }
  .core__img { width: 38%; }
  .core__img img, .scale__img img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .core__col-body { height: auto; gap: 40px; }
  .scale__media { width: 46%; }
  .scale__img { flex: 1 1 auto; height: auto; min-height: 420px; }
  .pillar__body { padding: 40px 32px; }
}
@media (max-width: 1024px) {
  .tiers__grid { flex-direction: column; align-items: center; }
  .tier { flex: none; width: 100%; max-width: 640px; }
  .system__cards { flex-direction: column; }
  .step { flex: none; width: 100%; }
  .core__inner { flex-direction: column; align-items: stretch; }
  .core__img { width: 100%; height: 420px; align-self: auto; }
  .core__img img { object-position: 50% 30%; }
  .strip { aspect-ratio: auto; height: 240px; }
  .strip img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
  .scale__row { flex-direction: column; align-items: stretch; }
  .scale__media { width: 100%; gap: 24px; }
  .scale__img { flex: none; height: 520px; min-height: 0; }
  .scale__img img { object-position: 50% 25%; }
  .scale__list { flex: none; width: 100%; }
  .scale__note br { display: none; }
}
@media (max-width: 760px) {
  .eyebrow, .tier__eyebrow { font-size: 14px; line-height: 1.25; }
  .h2 { font-size: 36px; line-height: 1.15; }
  .h5 { font-size: 20px; line-height: 1.2; }
  .body-18 { font-size: 16px; }
  .checklist { gap: 10px; }
  .checklist li { padding-left: 26px; font-size: 16px; }
  .checklist li::before { top: 5.5px; }

  .bhero { padding: 48px 0; }
  .bhero__title { font-size: 40px; line-height: 44px; }
  .bhero__content { gap: 28px; }

  .tiers { padding: 56px 0; }
  .tiers__grid { margin-top: 32px; gap: 16px; }
  .tier { padding: 24px 20px; gap: 20px; }
  .tier--featured { padding: 22px 18px; }
  .tier__name, .tier__price { font-size: 32px; }

  .core { padding: 56px 0; }
  .core__inner { gap: 32px; }
  .core__cols { flex-direction: column; gap: 32px; }
  .core__col { flex: none; width: 100%; }
  .core__col-body { gap: 32px; }
  .core__img { height: 280px; }

  .system { padding: 56px 0 48px; }
  .system__cards { gap: 16px; }
  .step { padding: 24px 20px; }
  .step__num { font-size: 40px; line-height: 1.2; }
  .step__title { padding-top: 8px; }
  .step__meta { padding-top: 8px; font-size: 16px; }
  .step__value { font-size: 16px; }
  .cta-row { margin-top: 32px; }

  .strip { height: 180px; }

  .scale { padding: 56px 0; }
  .scale__img { height: 320px; }
  .scale__note { font-size: 16px; }
  .scale__note b { font-size: 16px; }
  .pillar { min-height: 0; }
  .pillar__num { width: 48px; margin-left: 0; font-size: 24px; letter-spacing: 1px; }
  .pillar__body { padding: 24px 20px; }

  .more-info { padding: 56px 0; }
  .more-info__inner { gap: 32px; }
  .more-info__copy { gap: 16px; }
  .more-info__copy .h2 { white-space: normal; }
}