/* ==========================================================================
   CRNAs page — implemented from crnas.dc.html
   Loaded after base.css and page.css.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.crna-hero {
  padding: clamp(56px, 9vw, 130px) var(--pad-x) clamp(40px, 5vw, 72px);
}
.crna-hero .band__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 80% 8%, rgba(201, 162, 77, .14), rgba(7, 20, 17, 0) 58%);
}
.crna-hero__mark {
  right: -170px;
  top: 46%;
  width: 580px;
  transform: translateY(-50%);
  opacity: .07;
}
.crna-hero__title {
  max-width: 19ch;   /* the line is longer than the old one */
  margin-top: clamp(24px, 3vw, 40px);
}

/* --- Path selector ------------------------------------------------------ */
.crna-paths { padding-block: clamp(50px, 7vw, 96px); }
.crna-paths__kicker {
  display: block;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  letter-spacing: .26em;
}
.crna-paths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.track {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(26px, 3vw, 42px);
  border: 1px solid rgba(232, 236, 231, .16);
  border-radius: 6px;
  padding: clamp(26px, 3vw, 40px);
  color: var(--bone);
  transition: border-color .35s ease, background .35s ease, transform .35s var(--ease-out);
}
.track:hover {
  border-color: rgba(201, 162, 77, .6);
  background: rgba(201, 162, 77, .07);
  color: var(--bone);
  transform: translateY(-3px);
}
.track__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 18px;
}
.track__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -.038em;
  color: var(--cream);
  margin-bottom: 14px;
  text-wrap: pretty;
}
.track__blurb {
  display: block;
  font-size: 16.5px;
  line-height: 1.56;
  color: rgba(244, 241, 234, .74);
  max-width: 42ch;
  text-wrap: pretty;
}
.track__go {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold);
}

/* --- Tracks A and B ----------------------------------------------------- */
.crna-track__label { margin-bottom: clamp(26px, 3.2vw, 44px); }

.crna-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
.crna-track__p { margin: clamp(20px, 2.4vw, 30px) 0 0; }
.crna-track__cta { margin-top: clamp(34px, 4vw, 54px); }

.crna-items {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.item {
  border-top: 1px solid rgba(232, 236, 231, .14);
  padding-top: clamp(20px, 2.4vw, 28px);
}
.item--featured {
  border: 1px solid rgba(201, 162, 77, .4);
  border-radius: 6px;
  background: rgba(201, 162, 77, .06);
  padding: clamp(24px, 2.8vw, 34px);
}
.item h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.12;
  letter-spacing: -.032em;
  color: var(--cream);
  text-wrap: pretty;
}
.item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.58;
  color: rgba(244, 241, 234, .78);
  max-width: 52ch;
  text-wrap: pretty;
}
.item p + p { margin-top: 14px; }
.item__stamp {
  margin-top: 18px !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--gold-light) !important;
}

/* --- How it works ------------------------------------------------------- */
.crna-how .band__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 22% 26%, rgba(201, 162, 77, .1), rgba(7, 20, 17, 0) 55%);
}
.crna-how__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
  align-items: end;
  margin: clamp(24px, 3vw, 38px) 0 clamp(34px, 4.4vw, 60px);
}

.crna-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.step {
  position: relative;
  border: 1px solid rgba(232, 236, 231, .14);
  border-radius: 6px;
  padding: clamp(26px, 3vw, 40px);
}
.step--pivot {
  border-color: rgba(201, 162, 77, .55);
  background: linear-gradient(180deg, rgba(201, 162, 77, .12), rgba(201, 162, 77, .03));
}
.step__flag {
  position: absolute;
  top: -10px;
  left: clamp(20px, 2.4vw, 30px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 4px 11px;
}
.step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(22px, 2.6vw, 32px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: rgba(244, 241, 234, .5);
}
.step--pivot .step__head { color: rgba(230, 201, 138, .85); }
.step__head span:last-child { font-size: 14px; color: var(--gold); }
.step h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.2vw, 32px);
  letter-spacing: -.035em;
  color: var(--cream);
}
.step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.56;
  color: rgba(244, 241, 234, .78);
  text-wrap: pretty;
}

/* --- Mid-page booking --------------------------------------------------- */
.crna-bookmid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.crna-bookmid__title { margin: 18px 0 20px; max-width: 18ch; }

/* --- All 50 states ------------------------------------------------------ */
.crna-states { padding-block: clamp(64px, 9vw, 140px); }
.crna-states__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 3.6vw, 66px);
  align-items: start;
}
.crna-states__kicker {
  display: block;
  margin-bottom: 20px;
  letter-spacing: .26em;
  color: rgba(12, 28, 24, .55);
}
.crna-states__title { max-width: 18ch; color: var(--ink-card); }
.crna-states__p { margin: 0 0 20px; }
.crna-states__p--accent {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.34;
  letter-spacing: -.03em;
  color: #9a7526;
}

/* --- Resource library --------------------------------------------------- */
.crna-library__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(30px, 4vw, 50px);
}
.crna-library__title { margin-top: clamp(18px, 2.4vw, 30px); max-width: 22ch; }
.crna-library__note { max-width: 36ch; text-align: right; }

.res {
  border: 1px solid rgba(232, 236, 231, .14);
  border-radius: 6px;
  padding: clamp(24px, 2.8vw, 36px);
}
.res--featured {
  border-color: rgba(201, 162, 77, .5);
  background: rgba(201, 162, 77, .08);
}
.res h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.12;
  letter-spacing: -.032em;
  color: var(--cream);
  text-wrap: pretty;
}
.res p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .72);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Guide request — HubSpot developer embed, branded to the site

   The embed renders unstyled HubSpot markup straight into the page (not an
   iframe), and HubSpot's own rules read their values from `--hsf-*` custom
   properties. So the brand is applied by setting those variables rather than
   by overriding declarations — no specificity fight, and it survives HubSpot
   changing its internal markup.

   HubSpot's rules are scoped `[data-hsfc-id="Renderer"] .hsfc-*`, which ties
   with a two-class selector and wins on order (their <style> is injected after
   our stylesheet). The few things with no variable — layout, the dropdown
   panel, focus rings — therefore need a three-class prefix to land.
   -------------------------------------------------------------------------- */
.guide {
  margin-top: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgba(201, 162, 77, .35);
  border-radius: 6px;
  background: rgba(201, 162, 77, .05);
  padding: clamp(24px, 3vw, 40px);

  /* ---- HubSpot theme tokens ---- */

  /* Global */
  --hsf-global__font-family: var(--font-body);
  --hsf-global__font-size: 15px;
  --hsf-global__color: rgba(244, 241, 234, .8);
  --hsf-global__error-color: #f0a6a6;

  /* The form's own panel — ours is .guide, so switch HubSpot's off */
  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__padding: 0;
  --hsf-background__border-width: 0;
  --hsf-background__border-style: none;
  --hsf-background__border-radius: 0;

  /* Rhythm */
  --hsf-row__vertical-spacing: 16px;
  --hsf-row__horizontal-spacing: 16px;
  --hsf-module__vertical-spacing: 10px;

  /* Labels */
  --hsf-field-label__font-family: var(--font-mono);
  --hsf-field-label__font-size: 10px;
  --hsf-field-label__color: rgba(244, 241, 234, .55);
  --hsf-field-label-requiredindicator__color: var(--gold);

  /* Text and email inputs */
  --hsf-field-input__font-family: var(--font-body);
  --hsf-field-input__font-size: 15px;
  --hsf-field-input__color: var(--cream);
  --hsf-field-input__background-color: rgba(7, 20, 17, .6);
  --hsf-field-input__placeholder-color: rgba(244, 241, 234, .38);
  --hsf-field-input__border-color: rgba(232, 236, 231, .22);
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-radius: 999px;
  --hsf-field-input__padding: 14px 20px;

  /* Textarea — set now so a message field added later inherits it */
  --hsf-field-textarea__font-family: var(--font-body);
  --hsf-field-textarea__font-size: 15px;
  --hsf-field-textarea__color: var(--cream);
  --hsf-field-textarea__background-color: rgba(7, 20, 17, .6);
  --hsf-field-textarea__placeholder-color: rgba(244, 241, 234, .38);
  --hsf-field-textarea__border-color: rgba(232, 236, 231, .22);
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-radius: 12px;
  --hsf-field-textarea__padding: 14px 20px;

  --hsf-field-dropdown-options__border-radius: 8px;

  /* Checkbox and radio — likewise, for a future consent field */
  --hsf-field-checkbox__background-color: rgba(7, 20, 17, .6);
  --hsf-field-checkbox__border-color: rgba(232, 236, 231, .3);
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__color: var(--gold);
  --hsf-field-radio__background-color: rgba(7, 20, 17, .6);
  --hsf-field-radio__border-color: rgba(232, 236, 231, .3);
  --hsf-field-radio__border-style: solid;
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__color: var(--gold);

  /* Helper and error text */
  --hsf-field-description__font-family: var(--font-body);
  --hsf-field-description__font-size: 14px;
  --hsf-field-description__color: rgba(244, 241, 234, .6);
  --hsf-field-footer__font-family: var(--font-mono);
  --hsf-field-footer__font-size: 10.5px;
  --hsf-field-footer__color: rgba(244, 241, 234, .5);
  --hsf-erroralert__font-family: var(--font-mono);
  --hsf-erroralert__font-size: 11px;
  --hsf-erroralert__color: #f0a6a6;
  --hsf-infoalert__font-family: var(--font-mono);
  --hsf-infoalert__font-size: 11px;
  --hsf-infoalert__color: var(--gold-light);

  /* Headings and the post-submit thank-you copy */
  --hsf-heading__font-family: var(--font-display);
  --hsf-heading__color: var(--cream);
  --hsf-heading__text-shadow: none;
  --hsf-richtext__font-family: var(--font-body);
  --hsf-richtext__font-size: 16px;
  --hsf-richtext__color: var(--gold-light);

  /* Submit button */
  --hsf-button__background-color: var(--gold);
  --hsf-button__background-image: none;
  --hsf-button__color: var(--ink);
  --hsf-button__font-family: var(--font-mono);
  --hsf-button__font-size: 11px;
  --hsf-button__font-weight: 500;
  --hsf-button__padding: 15px 30px;
  --hsf-button__border-radius: 999px;
  --hsf-button__border-width: 0;
  --hsf-button__border-style: none;
  --hsf-button__box-shadow: none;
  --hsf-button--hover__background-color: var(--gold-light);
  --hsf-button--hover__color: var(--ink);
  --hsf-button--focus__background-color: var(--gold-light);
  --hsf-button--focus__color: var(--ink);
  --hsf-navigationrow-buttons-single__justify-content: start;
  --hsf-navigationrow-buttons__justify-content: start;
}

.guide__copy { margin-bottom: clamp(22px, 2.6vw, 32px); }
.guide__copy h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: -.032em;
  color: var(--cream);
}
.guide__copy p {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .7);
  text-wrap: pretty;
}

.guide__noscript {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .78);
}

/* Hold the space while the embed boots, so the section doesn't jump. */
.guide__form .hs-form-html:empty { min-height: 300px; }

/* --- Layout ------------------------------------------------------------- */
.guide .hsfc-Step__Banner { display: none; }   /* empty on this embed */

.guide .hsfc-Renderer .hsfc-Step__Content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Paired by field type rather than position, so adding or reordering a field
   in HubSpot doesn't scramble the layout. */
.guide .hsfc-Renderer .hsfc-Row:has(.hsfc-RichText) { display: none; }  /* our heading is above */
.guide .hsfc-Renderer .hsfc-Row:has(.hsfc-EmailField),
.guide .hsfc-Renderer .hsfc-Row:has(.hsfc-DropdownField),
.guide .hsfc-Renderer .hsfc-Row:has(.hsfc-TextAreaField),
.guide .hsfc-Renderer .hsfc-NavigationRow { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .guide .hsfc-Renderer .hsfc-Step__Content { grid-template-columns: minmax(0, 1fr); }
}

/* No theme variable covers casing or tracking, so these stay direct rules. */
.guide .hsfc-Renderer .hsfc-FieldLabel {
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.guide .hsfc-Renderer .hsfc-TextInput { width: 100%; box-sizing: border-box; }

/* --- Focus rings: HubSpot removes the outline, put it back --------------- */
.guide .hsfc-Renderer .hsfc-TextInput:focus,
.guide .hsfc-Renderer .hsfc-TextInput:focus-visible,
.guide .hsfc-Renderer .hsfc-Button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.guide .hsfc-Renderer .hsfc-TextInput:focus { border-color: var(--gold); }

/* --- Industry dropdown panel (no theme variables for these) ------------- */
.guide .hsfc-Renderer .hsfc-TextInput--button { cursor: pointer; }
.guide .hsfc-Renderer .hsfc-DropdownInput__Caret { color: var(--gold); }
.guide .hsfc-Renderer .hsfc-DropdownInput__Caret svg { fill: currentColor; }

.guide .hsfc-Renderer .hsfc-DropdownOptions {
  border: 1px solid rgba(201, 162, 77, .4);
  background: #0a1a16;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
}
/* HubSpot caps the panel around 242px. The search box costs ~79px of that,
   which is enough to clip a five-option list into a scrollbar — so hide it
   and let the options use the full height. Restore it if Industry ever grows
   a long list. */
.guide .hsfc-Renderer .hsfc-DropdownOptions__Search { display: none; }

.guide .hsfc-Renderer .hsfc-DropdownOptions__List {
  max-height: none;
  padding-block: 0;
  overflow-y: auto;   /* still scrolls gracefully if the list outgrows the panel */
}
.guide .hsfc-Renderer .hsfc-DropdownOptions__List__ListItem {
  padding: 8px 18px;
  color: rgba(244, 241, 234, .82);
  transition: background .2s ease, color .2s ease;
}
.guide .hsfc-Renderer .hsfc-DropdownOptions__List__ListItem:hover {
  background: rgba(201, 162, 77, .14);
  color: var(--cream);
}
.guide .hsfc-Renderer .hsfc-DropdownOptions__List__ListItem--selected {
  background: rgba(201, 162, 77, .22);
  color: var(--gold-light);
}

/* Match the site's button convention; no variable covers casing. */
.guide .hsfc-Renderer .hsfc-Button {
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* HubSpot adds a 32px top margin on top of the grid gap. */
.guide .hsfc-Renderer .hsfc-NavigationRow { margin-top: 8px; }

/* --- Alerts ------------------------------------------------------------- */
.guide .hsfc-Renderer .hsfc-NavigationRow__Alerts:not(:empty) { margin-bottom: 12px; }

/* --- Testimonials ------------------------------------------------------- */
.crna-quotes__head { margin-bottom: clamp(30px, 4vw, 52px); }
.crna-quotes__title { margin-top: 14px; max-width: 20ch; }

/* --- Vision ------------------------------------------------------------- */
.crna-vision {
  padding-block: clamp(60px, 8vw, 120px);
  text-align: center;
}
.crna-vision__mark {
  left: 50%;
  top: 50%;
  width: 420px;
  transform: translate(-50%, -50%);
  opacity: .06;
}
.crna-vision__inner .rule-wide { margin-bottom: clamp(22px, 2.8vw, 34px); }
.crna-vision__inner p {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--cream);
  text-wrap: pretty;
}

/* --- Final CTA ---------------------------------------------------------- */
.crna-cta {
  padding: clamp(70px, 10vw, 160px) var(--pad-x) clamp(56px, 7vw, 100px);
}
.crna-cta__mark {
  left: -120px;
  bottom: -90px;
  width: 420px;
  opacity: .14;
}
.crna-cta__lead { margin-bottom: clamp(40px, 5vw, 70px); }
.crna-cta__title { max-width: 22ch; color: var(--ink-card); }
.accent-dark { font-style: normal; color: #9a7526; }
.crna-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: clamp(26px, 3.4vw, 56px);
  margin-bottom: clamp(34px, 4vw, 54px);
}
.crna-cta__eyebrow {
  display: block;
  margin-bottom: 22px;
  letter-spacing: .22em;
  color: rgba(12, 28, 24, .5);
}

@media (max-width: 860px) {
  .crna-library__note { text-align: left; }
  .crna-hero__mark { display: none; }
}