/* ============================================================
   Careaga Plastic Surgery — Landing Page stylesheet
   Built against "Careaga DS 01 Foundations". Tokens are canonical:
   if a value is not here, it does not exist in the system.

   Two breakpoints only: 1024px (layout) and 1280px (side rail).
   Everything else is clamp().
   ============================================================ */

:root {
  --ca-navy:        #0D2B4D;
  --ca-navy-hover:  #14406F;
  --ca-ink:         #131313;
  --ca-body:        #4A4A4A;
  --ca-body-2:      #3D3D3D;
  --ca-body-3:      #5A5A5A;
  --ca-muted:       #6E6E6E;   /* 5.10:1 on white — lightest gray legal for text */
  --ca-surface:     #F5F5F7;
  --ca-card:        #FFFFFF;
  --ca-line:        rgba(19, 19, 19, .08);
  --ca-line-strong: rgba(19, 19, 19, .12);
  --ca-error:       #B3261E;

  --ca-glass:       rgba(255, 255, 255, .62);
  --ca-glass-brd:   rgba(13, 43, 77, .16);

  --ca-font:        "Poppins", system-ui, -apple-system, sans-serif;
  --ca-h1:          clamp(38px, 4.6vw, 66px);
  --ca-h2:          clamp(30px, 3.4vw, 50px);
  --ca-h3:          clamp(24px, 2.2vw, 32px);

  --ca-r-field:     12px;
  --ca-r-card:      18px;
  --ca-r-panel:     28px;
  --ca-r-pill:      99px;

  --ca-max:         1280px;
  --ca-pad-block:   clamp(40px, 5vw, 80px);
  --ca-pad-inline:  clamp(16px, 3vw, 28px);

  --ca-shadow-card: 0 22px 44px -34px rgba(13, 43, 77, .6);
  --ca-shadow-form: 0 30px 60px -30px rgba(13, 43, 77, .4), 0 2px 6px rgba(19, 19, 19, .05);
  --ca-shadow-hero: 0 40px 80px -50px rgba(13, 43, 77, .45);
  --ca-shadow-cta:  inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 34px -18px rgba(13, 43, 77, .75);
}

/* ---------- reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ca-surface);
  color: var(--ca-ink);
  font-family: var(--ca-font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* room for the sticky conversion bar so it never covers the footer */
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

img { max-width: 100%; display: block; }
a { color: var(--ca-navy); text-decoration: none; }
a:hover { color: var(--ca-navy-hover); }
h1, h2, h3, h4, p { margin: 0; }
input, select, button, textarea { font-family: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-width: 0; max-width: 100%;
}
input[type=checkbox] { flex: 0 0 auto; }
label { min-width: 0; }
::selection { background: var(--ca-navy); color: #fff; }

/* Visible focus ring on everything interactive — non-negotiable. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ca-navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.ca-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ca-navy); color: #fff; font-size: 14px; font-weight: 500;
  padding: 12px 20px; border-radius: 0 0 12px 0;
}
.ca-skip:focus { left: 0; color: #fff; }

.ca-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */

.ca-wrap { max-width: var(--ca-max); margin: 0 auto; padding-inline: var(--ca-pad-inline); }
.ca-section { padding-block: var(--ca-pad-block); }
.ca-section--tight { padding-block: clamp(28px, 3.4vw, 48px); }

/* Every multi-column grid uses min(Npx,100%) so it can collapse on phones. */
.ca-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.ca-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.ca-grid--288 { grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); }
.ca-grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ca-grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.ca-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { .ca-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- type ---------- */

.ca-eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ca-navy); font-weight: 500;
}
.ca-eyebrow--onnavy { color: rgba(255, 255, 255, .66); }

.ca-h1 {
  font-size: var(--ca-h1); line-height: 1.04; letter-spacing: -.03em;
  font-weight: 300; color: var(--ca-ink);
}
.ca-h2 {
  font-size: var(--ca-h2); line-height: 1.06; letter-spacing: -.03em;
  font-weight: 300; color: var(--ca-ink);
}
.ca-h3 {
  font-size: var(--ca-h3); line-height: 1.1; letter-spacing: -.025em;
  font-weight: 400; color: var(--ca-ink);
}
.ca-h4 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--ca-ink); }
.ca-em { font-weight: 500; }

.ca-lead {
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6;
  font-weight: 300; color: var(--ca-body-2);
}
.ca-p { font-size: 16px; line-height: 1.65; font-weight: 300; color: var(--ca-body); max-width: 66ch; }
.ca-fine { font-size: 11.5px; line-height: 1.7; font-weight: 300; color: var(--ca-muted); }

/* On navy: body .76, eyebrow .6, pure white only for headings and button labels. */
.ca-onnavy       { color: #fff; }
.ca-onnavy-body  { color: rgba(255, 255, 255, .76); }
.ca-onnavy-quiet { color: rgba(255, 255, 255, .6); }

/* ---------- buttons ---------- */

.ca-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-align: center; cursor: pointer;
  border-radius: var(--ca-r-pill); border: 1px solid transparent;
  font-size: 14px; line-height: 1; padding: 16px 28px; min-height: 48px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primary — navy fill, white label. One per viewport. */
.ca-btn--primary {
  background: var(--ca-navy); color: #fff; font-weight: 600;
  box-shadow: var(--ca-shadow-cta);
}
.ca-btn--primary:hover { background: var(--ca-navy-hover); color: #fff; }

/* Glass secondary on light — navy label. */
.ca-btn--glass {
  background: rgba(255, 255, 255, .62); color: var(--ca-navy); font-weight: 500;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color: var(--ca-glass-brd);
  box-shadow: 0 1px 2px rgba(19, 19, 19, .05);
}
.ca-btn--glass:hover { background: #fff; color: var(--ca-navy); }

/* On navy the primary INVERTS: white fill, navy label. Never navy-on-navy. */
.ca-btn--invert { background: #fff; color: var(--ca-navy); font-weight: 600;
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .6); }
.ca-btn--invert:hover { background: var(--ca-surface); color: var(--ca-navy); }

/* Glass secondary on navy — white label. */
.ca-btn--glassnavy {
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 500;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-color: rgba(255, 255, 255, .34);
}
.ca-btn--glassnavy:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.ca-btn--block { display: flex; width: 100%; }

.ca-link {
  font-size: 14px; font-weight: 500; color: var(--ca-navy);
  display: inline-flex; gap: 8px; align-items: center;
}

/* ---------- image placeholders (no assets yet) ---------- */

.ca-ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  background:
    repeating-linear-gradient(135deg,
      rgba(13, 43, 77, .04) 0 10px,
      rgba(13, 43, 77, .07) 10px 20px);
  border: 1px dashed rgba(13, 43, 77, .32);
  color: var(--ca-navy);
  font-size: 11px; line-height: 1.5; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--ca-r-card);
  overflow: hidden;
}
.ca-ph span { max-width: 26ch; }
.ca-ph--r13 { border-radius: 13px; }
.ca-ph--r18 { border-radius: 18px; }
.ca-ph--r20 { border-radius: 20px; }
.ca-ph--r22 { border-radius: 22px; }
.ca-ph--r28 { border-radius: var(--ca-r-panel); }
/* A full-bleed placeholder must not float its label in the middle of the copy —
   it reads as body text. Pin it to the corner as a chip instead. */
.ca-ph--fill {
  position: absolute; inset: 0; border-radius: inherit;
  align-items: flex-start; justify-content: flex-start; padding: 14px;
}
.ca-ph--fill span {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(13, 43, 77, .22);
  border-radius: var(--ca-r-pill); padding: 7px 14px;
}
.ca-ph--onnavy.ca-ph--fill span {
  background: rgba(13, 43, 77, .78); border-color: rgba(255, 255, 255, .42);
}

/* Inside the hero and closing panels the chip gets its own band across the top,
   above the scrim, so it never sits behind the eyebrow or the buttons.
   The band disappears the moment a real photograph replaces the placeholder. */
.ca-hero__panel .ca-ph--fill,
.ca-close__panel .ca-ph--fill {
  z-index: 3; justify-content: center; padding: 12px;
}
.ca-hero__panel .ca-ph--fill span,
.ca-close__panel .ca-ph--fill span { max-width: min(90%, 60ch); }
.ca-ph--logo { width: 172px; height: 48px; flex: 0 0 auto; font-size: 9.5px; letter-spacing: .12em; }

/* On a navy background the dashed placeholder has to invert or it disappears. */
.ca-ph--onnavy {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .06) 0 10px,
      rgba(255, 255, 255, .12) 10px 20px);
  border-color: rgba(255, 255, 255, .4);
  color: rgba(255, 255, 255, .88);
}

.ca-ratio-34 { aspect-ratio: 3 / 4; }
.ca-ratio-45 { aspect-ratio: 4 / 5; }
.ca-ratio-43 { aspect-ratio: 4 / 3; }
.ca-ratio-169 { aspect-ratio: 16 / 9; }

/* ---------- utility bar ---------- */

.ca-utility {
  background: var(--ca-navy); color: rgba(255, 255, 255, .82);
  font-size: 11.5px; letter-spacing: .04em;
  padding: 9px var(--ca-pad-inline);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: center; text-align: center;
}
.ca-utility a { color: rgba(255, 255, 255, .82); }
.ca-utility a:hover { color: #fff; }
.ca-utility strong { color: #fff; font-weight: 500; }
.ca-utility__desk { display: none; }
@media (min-width: 1024px) {
  .ca-utility__desk { display: inline; }
  .ca-utility__mob { display: none; }
}

/* ---------- header ---------- */

.ca-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 245, 247, .82);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(19, 19, 19, .07);
}
.ca-header__inner {
  max-width: var(--ca-max); margin: 0 auto;
  padding: 10px var(--ca-pad-inline); min-height: 64px;
  display: flex; align-items: center; gap: 12px;
}
.ca-header__cta { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ca-header .ca-btn { padding: 12px 18px; min-height: 44px; font-size: 13px; white-space: nowrap; }
.ca-header .ca-ph--logo { width: 138px; height: 44px; }
@media (min-width: 1024px) {
  .ca-header__inner { min-height: 74px; padding-block: 12px; }
  .ca-header .ca-ph--logo { width: 172px; height: 48px; }
}
.ca-header__phone { display: none; }
@media (min-width: 600px) { .ca-header__phone { display: inline-flex; } }

/* ---------- hero ---------- */

.ca-hero { padding: clamp(20px, 4vw, 52px) var(--ca-pad-inline) 0; }
.ca-hero__panel {
  max-width: var(--ca-max); margin: 0 auto; position: relative;
  border-radius: var(--ca-r-panel); overflow: hidden;
  background: #E9E9EC; box-shadow: var(--ca-shadow-hero);
}
.ca-hero__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* copy layer is z-index 2 — see .ca-hero__inner */
  background: linear-gradient(100deg,
    rgba(245, 245, 247, .95) 0%,
    rgba(245, 245, 247, .88) 40%,
    rgba(245, 245, 247, .55) 66%,
    rgba(13, 43, 77, .12) 100%);
}
/* Mobile order is the spec, not the adaptation: copy → FORM → proof.
   The form must not sit under a wall of badges on a phone. */
.ca-hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 4vw, 40px);
  padding: clamp(24px, 5vw, 76px);
  align-items: center;
  z-index: 2;              /* above the scrim, which is above the photo */
}
.ca-hero__copy  { order: 1; }
.ca-hero__form  { order: 2; }
.ca-hero__proof { order: 3; }

@media (min-width: 1024px) {
  .ca-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: 0;
    align-items: start;
  }
  .ca-hero__copy  { grid-column: 1; grid-row: 1; }
  .ca-hero__proof { grid-column: 1; grid-row: 2; }
  .ca-hero__form  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.ca-hero__stat { display: flex; align-items: baseline; gap: 12px; }
.ca-hero__stat b {
  font-size: 38px; font-weight: 600; letter-spacing: -.03em; color: var(--ca-navy);
}
.ca-hero__stat span {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ca-body-3);
}

.ca-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ca-pill {
  font-size: 12px; font-weight: 400; color: var(--ca-navy);
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(13, 43, 77, .12);
  border-radius: var(--ca-r-pill); padding: 7px 14px;
}

.ca-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- form card ---------- */

.ca-form {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: var(--ca-shadow-form);
  scroll-margin-top: 96px;
}
.ca-form__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ca-ink); }
.ca-form__sub { font-size: 13px; font-weight: 300; color: var(--ca-body-3); margin-top: 6px; }
.ca-form__fields { display: grid; gap: 12px; margin-top: 22px; }

.ca-field { display: grid; gap: 6px; min-width: 0; }
/* #6E6E6E is 5.10:1 on WHITE only. These labels sit on glass over the hero
   panel / a photograph, where it measures 4.21:1 — below AA. Hence #5A5A5A. */
.ca-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ca-body-3); font-weight: 500;
}
.ca-label i { font-style: normal; color: var(--ca-navy); }
.ca-input {
  height: 48px; border: 1px solid rgba(19, 19, 19, .13); border-radius: var(--ca-r-field);
  background: rgba(255, 255, 255, .9); padding: 0 14px;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  color: var(--ca-ink); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ca-input::placeholder { color: #8A8A8A; }
.ca-input:focus {
  border-color: var(--ca-navy);
  box-shadow: 0 0 0 3px rgba(13, 43, 77, .12);
  outline: none;
}
.ca-input[aria-invalid="true"] { border-color: var(--ca-error); }
.ca-err { font-size: 11.5px; font-weight: 400; color: var(--ca-error); min-height: 0; }
.ca-err:empty { display: none; }

.ca-consent {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; cursor: pointer;
}
.ca-consent input {
  width: 20px; height: 20px; min-width: 20px; flex: 0 0 auto;
  margin: 1px 0 0; accent-color: var(--ca-navy); cursor: pointer;
}
.ca-consent__txt { font-size: 11.5px; line-height: 1.5; font-weight: 300; color: var(--ca-body-3); }
.ca-consent__hd {
  display: block; font-weight: 500; color: var(--ca-ink); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px;
}
.ca-consent__hd i { font-style: normal; color: var(--ca-navy); }

.ca-submit {
  margin-top: 6px; height: 56px; width: 100%; border: none; border-radius: 14px;
  background: var(--ca-navy); color: #fff; font-size: 15px; font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 18px 36px -18px rgba(13, 43, 77, .8);
  transition: background-color .15s ease;
}
.ca-submit:hover { background: var(--ca-navy-hover); }
.ca-submit[disabled] { opacity: .6; cursor: progress; }
.ca-form__trust { font-size: 11px; font-weight: 300; color: var(--ca-body-3); text-align: center; }

.ca-form__done {
  display: none; text-align: center; padding: 12px 0 4px;
}
.ca-form.is-done .ca-form__fields { display: none; }
.ca-form.is-done .ca-form__done { display: block; }
.ca-form__done b { display: block; font-size: 18px; font-weight: 600; color: var(--ca-ink); }
.ca-form__done span { display: block; font-size: 14px; font-weight: 300; color: var(--ca-body); margin-top: 8px; }

/* Form card sitting inside the navy closing band */
.ca-form--navy {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .24);
}
.ca-form--navy .ca-form__title { color: #fff; }
.ca-form--navy .ca-form__sub { color: rgba(255, 255, 255, .74); }
.ca-form--navy .ca-label { color: rgba(255, 255, 255, .74); }
.ca-form--navy .ca-label i { color: #fff; }
.ca-form--navy .ca-input {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.ca-form--navy .ca-input::placeholder { color: rgba(255, 255, 255, .6); }
.ca-form--navy .ca-input:focus {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}
.ca-form--navy .ca-consent input { accent-color: #fff; }
.ca-form--navy .ca-consent__txt { color: rgba(255, 255, 255, .76); }
.ca-form--navy .ca-consent__hd { color: #fff; }
.ca-form--navy .ca-consent__hd i { color: #fff; }
.ca-form--navy .ca-err { color: #FFB4AB; }        /* #B3261E is illegible on navy */
/* On navy the primary inverts — white fill, navy label. */
.ca-form--navy .ca-submit {
  background: #fff; color: var(--ca-navy);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .7);
}
.ca-form--navy .ca-submit:hover { background: var(--ca-surface); color: var(--ca-navy); }
.ca-form--navy .ca-form__trust { color: rgba(255, 255, 255, .62); }
.ca-form--navy .ca-form__done b { color: #fff; }
.ca-form--navy .ca-form__done span { color: rgba(255, 255, 255, .78); }

/* ---------- trust strip ---------- */

.ca-trust {
  display: flex; flex-wrap: wrap;
  background: var(--ca-card); border: 1px solid rgba(19, 19, 19, .09);
  border-radius: var(--ca-r-card); overflow: hidden;
}
.ca-trust__cell { flex: 1 1 180px; padding: 22px 24px; border-top: 1px solid rgba(19, 19, 19, .09); }
.ca-trust__cell:first-child { border-top: 0; }
@media (min-width: 700px) {
  .ca-trust__cell { border-top: 0; border-left: 1px solid rgba(19, 19, 19, .09); }
  .ca-trust__cell:first-child { border-left: 0; }
}
.ca-trust__n {
  font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--ca-navy);
}
.ca-trust__l {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ca-muted); margin-top: 7px; line-height: 1.4;
}

/* ---------- cards ---------- */

.ca-card {
  background: var(--ca-card); border: 1px solid var(--ca-line);
  border-radius: var(--ca-r-card); padding: 24px;
  display: flex; flex-direction: column;
}
.ca-card__desc { font-size: 13.5px; line-height: 1.55; font-weight: 300; color: var(--ca-body-3); margin-top: 10px; }
.ca-card__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ca-card__hd span:last-child { color: var(--ca-navy); font-size: 15px; }
a.ca-card:hover {
  border-color: rgba(13, 43, 77, .28);
  box-shadow: var(--ca-shadow-card);
}
.ca-card__btn { margin-top: auto; }

/* section head */
.ca-head { display: grid; gap: 16px; }
.ca-head__row {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: flex-end; justify-content: space-between;
}

/* ---------- before/after scroller ---------- */

.ca-scroll {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(320px, 84vw), 1fr);
  gap: 16px; overflow-x: auto; padding: 26px 2px 18px;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.ca-scroll::-webkit-scrollbar { height: 6px; }
.ca-scroll::-webkit-scrollbar-thumb { background: #D2D2D7; border-radius: var(--ca-r-pill); }
.ca-ba {
  scroll-snap-align: start; background: var(--ca-card);
  border: 1px solid var(--ca-line); border-radius: 20px; padding: 12px;
  box-shadow: 0 18px 40px -32px rgba(13, 43, 77, .5);
}
.ca-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ca-ba__tags {
  display: flex; justify-content: space-between;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ca-muted); padding: 9px 4px 0;
}
.ca-ba__name { font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--ca-ink); margin-top: 6px; padding-inline: 4px; }
.ca-ba__note { font-size: 11px; font-weight: 300; color: var(--ca-muted); margin-top: 3px; padding-inline: 4px; }

/* ---------- checklist ---------- */

.ca-check { display: grid; gap: 1px; background: rgba(19, 19, 19, .09);
  border-top: 1px solid rgba(19, 19, 19, .09); border-bottom: 1px solid rgba(19, 19, 19, .09); }
.ca-check__row { background: var(--ca-surface); display: flex; gap: 16px; padding: 16px 2px; align-items: flex-start; }
.ca-check__row span:first-child { color: var(--ca-navy); font-size: 15px; line-height: 1.5; flex: 0 0 auto; }
.ca-check__row span:last-child { font-size: 14.5px; line-height: 1.55; font-weight: 300; color: var(--ca-body-2); }
.ca-check--oncard .ca-check__row { background: var(--ca-card); }

.ca-num { display: grid; gap: 1px; background: rgba(19, 19, 19, .09);
  border-top: 1px solid rgba(19, 19, 19, .09); border-bottom: 1px solid rgba(19, 19, 19, .09); }
.ca-num__row { background: var(--ca-surface); display: flex; gap: 18px; padding: 18px 2px; }
.ca-num__row b { font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--ca-navy); padding-top: 3px; }
.ca-num__row span { font-size: 14.5px; line-height: 1.55; font-weight: 300; color: var(--ca-body-2); }

/* ---------- reviews ---------- */

.ca-review { background: var(--ca-card); border: 1px solid var(--ca-line);
  border-radius: var(--ca-r-card); padding: 24px; }
.ca-review__stars { font-size: 13px; letter-spacing: .14em; color: var(--ca-navy); }
.ca-review__q { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--ca-body); margin-top: 14px; }
.ca-review__by { font-size: 12px; font-weight: 300; color: var(--ca-muted); margin-top: 14px; }

/* ---------- price list ---------- */

.ca-price { display: grid; gap: 0; }
.ca-price__row {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  justify-content: space-between; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--ca-line);
}
.ca-price__row b { font-size: 15px; font-weight: 500; color: var(--ca-ink); }
.ca-price__row span { font-size: 15px; font-weight: 500; color: var(--ca-navy); white-space: nowrap; }

/* ---------- FAQ ---------- */

.ca-faq { background: var(--ca-card); border: 1px solid var(--ca-line);
  border-radius: var(--ca-r-card); overflow: hidden; }
.ca-faq details { padding: 0 clamp(18px, 2.4vw, 26px); }
.ca-faq details + details { border-top: 1px solid var(--ca-line); }
.ca-faq summary {
  display: flex; gap: 16px; justify-content: space-between; align-items: baseline;
  padding: 20px 0; font-size: 16px; font-weight: 500; color: var(--ca-ink);
  cursor: pointer; list-style: none;
}
.ca-faq summary::-webkit-details-marker { display: none; }
.ca-faq summary::marker { content: ""; }
.ca-faq summary i {
  font-style: normal; color: var(--ca-navy); font-size: 18px; line-height: 1;
  flex: 0 0 auto; transition: transform .15s ease;
}
.ca-faq details[open] summary i { transform: rotate(45deg); }
.ca-faq__a {
  font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--ca-body);
  padding: 0 0 20px; max-width: 72ch;
}

/* ---------- closing navy band ---------- */

.ca-close { padding: 0 var(--ca-pad-inline) var(--ca-pad-block); }
.ca-close__panel {
  max-width: var(--ca-max); margin: 0 auto; position: relative;
  border-radius: var(--ca-r-panel); overflow: hidden;
  background: var(--ca-navy); box-shadow: 0 40px 80px -50px rgba(13, 43, 77, .6);
}
.ca-close__art { position: absolute; inset: 0; opacity: .3; }
.ca-close__scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg,
    rgba(13, 43, 77, .96) 0%, rgba(13, 43, 77, .92) 45%, rgba(13, 43, 77, .68) 100%);
}
.ca-close__inner {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3.4vw, 56px); padding: clamp(26px, 4.4vw, 64px);
  align-items: center; z-index: 2;
}

/* ---------- footer ---------- */

.ca-footer {
  background: var(--ca-card); border-top: 1px solid var(--ca-line);
  padding: clamp(32px, 4.6vw, 64px) var(--ca-pad-inline) 0;
}
.ca-footer__cols {
  max-width: var(--ca-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.ca-footer__hd { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ca-ink); font-weight: 600; }
.ca-footer__list { display: grid; gap: 9px; margin-top: 18px; font-size: 13.5px; font-weight: 300; }
.ca-footer__list a, .ca-footer__list div { color: var(--ca-body); line-height: 1.6; }
.ca-footer__list a:hover { color: var(--ca-navy); }
.ca-footer__bar {
  max-width: var(--ca-max); margin: 24px auto 0;
  border-top: 1px solid var(--ca-line); padding: 20px 0 28px;
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 300; color: var(--ca-muted);
}
.ca-footer__bar a { color: var(--ca-muted); }
.ca-footer__bar a:hover { color: var(--ca-navy); }
.ca-footer__legal { display: flex; flex-wrap: wrap; gap: 14px 20px; }

/* ---------- sticky conversion bar ---------- */

.ca-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(245, 245, 247, .88);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-top: 1px solid var(--ca-line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 8px;
}
.ca-sticky a {
  height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; border-radius: 16px; text-align: center;
}
.ca-sticky__sec {
  color: var(--ca-navy); background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(13, 43, 77, .16);
}
.ca-sticky__pri {
  color: #fff; background: var(--ca-navy); font-weight: 600; font-size: 14.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 30px -16px rgba(13, 43, 77, .8);
}
.ca-sticky__pri:hover { color: #fff; background: var(--ca-navy-hover); }

/* Desktop: the bar becomes a centered glass pill, and it stays out of the way
   while the hero form is on screen — one primary per viewport. The mobile bar
   never hides (that one IS the conversion path on a phone). */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .ca-sticky {
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  body.ca-past-hero .ca-sticky { opacity: 1; visibility: visible; }
  .ca-sticky {
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-top: 0; padding: 12px var(--ca-pad-inline);
    display: flex; justify-content: center; pointer-events: none;
  }
  .ca-sticky__pill {
    pointer-events: auto; display: flex; gap: 10px; align-items: center;
    background: rgba(255, 255, 255, .74);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: var(--ca-r-pill); padding: 8px 8px 8px 22px;
    box-shadow: 0 20px 44px -20px rgba(13, 43, 77, .5), 0 1px 2px rgba(19, 19, 19, .06);
  }
  .ca-sticky a { height: auto; border-radius: var(--ca-r-pill); font-size: 13px; }
  .ca-sticky__sec { background: none; border: 0; padding: 0 4px; }
  .ca-sticky__pri { padding: 12px 22px; }
  .ca-sticky__sep { width: 1px; height: 18px; background: rgba(19, 19, 19, .12); }
}
.ca-sticky__pill { display: contents; }
@media (min-width: 1024px) { .ca-sticky__pill { display: flex; } }
.ca-sticky__sep { display: none; }
@media (min-width: 1024px) { .ca-sticky__sep { display: block; } }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- language suggestion bar ---------- */
/* Shown only when the browser language does not match the page. It offers; it
   never redirects — a redirect can stop a crawler reaching the other version,
   and it traps the bilingual reader who wants the language they landed on. */

.ca-langbar {
  background: var(--ca-navy);
  color: #fff;
  padding: 10px var(--ca-pad-inline);
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  align-items: center; justify-content: center;
  font-size: 13px; line-height: 1.4; text-align: center;
}
.ca-langbar[hidden] { display: none; }
.ca-langbar__t { color: rgba(255, 255, 255, .82); }

/* White fill, navy label — the inverted primary. Never navy on navy. */
.ca-langbar__yes {
  color: var(--ca-navy); background: #fff;
  font-weight: 600; font-size: 13px; line-height: 1;
  border-radius: var(--ca-r-pill); padding: 9px 16px;
  min-height: 36px; display: inline-flex; align-items: center;
}
.ca-langbar__yes:hover { color: var(--ca-navy); background: var(--ca-surface); }

.ca-langbar__no {
  color: #fff; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .34);
  font-weight: 500; font-size: 13px; line-height: 1;
  border-radius: var(--ca-r-pill); padding: 9px 16px;
  min-height: 36px; cursor: pointer;
}
.ca-langbar__no:hover { background: rgba(255, 255, 255, .26); }

.ca-langbar__x {
  color: #fff; background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 8px 6px; margin-left: 4px;
}
.ca-langbar__x:hover { color: rgba(255, 255, 255, .74); }

.ca-langbar :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* The always-available manual switch in the utility bar. */
.ca-utility__lang {
  color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--ca-r-pill); padding: 3px 12px; line-height: 1.5;
}
.ca-utility__lang:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* On a phone the suggestion bar sits above everything, so it has to earn its
   height. Tighter type, and the utility bar drops its tagline — the hero
   already carries a "Hablamos Español" pill, and the switch is right here. */
@media (max-width: 1023px) {
  .ca-langbar { font-size: 12.5px; padding: 9px 12px; gap: 7px 9px; }
  .ca-langbar__t { flex: 1 1 100%; }
  .ca-langbar__yes,
  .ca-langbar__no { font-size: 12.5px; padding: 8px 14px; min-height: 34px; }
  .ca-langbar__x { padding: 6px 4px; margin-left: 0; }
  .ca-utility__mob { display: none; }
}

/* ---------- procedure tags ---------- */
/* Names only. A visitor who clicked an ad for this category needs to recognise
   their procedure in one glance, not read six descriptions. */

.ca-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ca-tag {
  font-size: 13px; font-weight: 400; color: var(--ca-navy);
  background: var(--ca-surface);
  border: 1px solid rgba(13, 43, 77, .14);
  border-radius: var(--ca-r-pill); padding: 8px 14px; line-height: 1.3;
}

/* ---------- real photography ---------- */

.ca-logo {
  width: 150px; height: auto; display: block; flex: 0 0 auto;
}
@media (min-width: 1024px) { .ca-logo { width: 178px; } }
.ca-logo--ft { width: 172px; }

/* Hero photo fills the panel behind the scrim. */
.ca-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.ca-close__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}

/* Portrait: the frame carries the panel's radius, never a square in a round box. */
.ca-portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%;
  border-radius: 18px 18px 0 0; display: block;
}

/* The published clinical photos are SQUARE. Forcing them into a 3:4 frame would
   crop the sides off the patient — the one thing a before/after must not do. */
.ca-ba__img {
  width: 100%;
  /* height:auto is required — the width/height ATTRIBUTES are presentational
     hints that otherwise beat aspect-ratio and crop a vertical strip. */
  height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 13px; display: block; background: #E9E9EC;
}

/* ============================================================
   Conversion pass. Everything below exists because it was
   measured on a 390×844 phone, not because it looked nicer.
   ============================================================ */

/* --- the first screen ------------------------------------------------------ */

/* The H1 was rendering four lines and eating the fold. On a phone the job of the
   headline is to be read in one glance and get out of the form's way. */
@media (max-width: 767px) {
  .ca-h1 { font-size: clamp(29px, 8.2vw, 38px); line-height: 1.08; }
  .ca-lead { font-size: 15px; line-height: 1.5; }
  .ca-hero { padding-top: 12px; }
  .ca-hero__inner { padding: 20px 18px; gap: 18px; }
  .ca-hero__copy .ca-h1 { margin-top: 12px !important; }
  .ca-hero__copy .ca-lead { margin-top: 12px !important; }

  /* The utility bar repeated the hero eyebrow verbatim 110px below it. */
  .ca-utility { display: none; }
}

/* The language bar must not push the form off the fold — it fires for exactly
   the bilingual visitor this market is made of. Docked to the bottom instead. */
@media (max-width: 1023px) {
  .ca-langbar {
    position: fixed; left: 0; right: 0; z-index: 55;
    bottom: calc(72px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 -12px 30px -18px rgba(13, 43, 77, .8);
  }
}

/* --- before/after: the argument, not a thumbnail --------------------------- */

/* At 165px wide nobody can study a scar line, and studying the scar line is
   exactly what an anxious buyer came to do. Stack them full-width instead. */
@media (max-width: 767px) {
  .ca-scroll { grid-auto-columns: minmax(min(300px, 86vw), 1fr); }
  .ca-ba__pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ca-ba__img { aspect-ratio: 4 / 3; }
}
.ca-ba__side { position: relative; }
.ca-ba__lbl {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ca-navy); background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--ca-r-pill); padding: 5px 11px;
}

/* --- form ------------------------------------------------------------------ */

.ca-form__count {
  font-size: 12px; font-weight: 500; color: var(--ca-navy); margin-top: 10px;
}
.ca-form__why {
  font-size: 12px; font-weight: 300; color: var(--ca-body-3); margin-top: 4px;
}
.ca-form--navy .ca-form__count { color: #fff; }
.ca-form--navy .ca-form__why { color: rgba(255, 255, 255, .74); }

/* The objection ("will you sell my details") happens AT the checkbox, so the
   answer belongs above it — not under the submit button where it was. */
.ca-form__privacy {
  font-size: 11.5px; line-height: 1.5; font-weight: 300;
  color: var(--ca-body-3); margin-top: 6px;
}
.ca-form--navy .ca-form__privacy { color: rgba(255, 255, 255, .7); }

/* Consent is where a three-field form loses people. Make it an action, not a
   footnote: the benefit leads, the carrier boilerplate follows. */
.ca-consent {
  background: rgba(13, 43, 77, .045);
  border: 1px solid rgba(13, 43, 77, .12);
  border-radius: var(--ca-r-field);
  padding: 13px 14px; margin-top: 8px; gap: 12px;
}
.ca-consent input { width: 24px; height: 24px; min-width: 24px; }
.ca-consent__hd {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ca-ink); margin-bottom: 4px;
}
.ca-form--navy .ca-consent {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .26);
}
.ca-err--submit { display: block; text-align: center; margin-top: 8px; }

.ca-done__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.ca-done__acts .ca-btn { min-height: 44px; padding: 12px 20px; font-size: 13px; }
.ca-form--navy .ca-done__acts .ca-btn {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .34);
}

/* --- trust strip: five facts should scan in one glance, not two swipes ----- */

@media (max-width: 767px) {
  .ca-trust { display: grid; grid-template-columns: 1fr 1fr; }
  .ca-trust__cell {
    flex: none; padding: 15px 16px;
    border-top: 1px solid rgba(19, 19, 19, .09);
    border-left: 1px solid rgba(19, 19, 19, .09);
  }
  .ca-trust__cell:nth-child(-n+2) { border-top: 0; }
  .ca-trust__cell:nth-child(odd) { border-left: 0; }
  .ca-trust__cell:last-child { grid-column: 1 / -1; }
  .ca-trust__n { font-size: 19px; }
  .ca-trust__l { font-size: 10px; letter-spacing: .1em; margin-top: 5px; }
}

/* --- provider: credentials answered "is he qualified". Nobody asked. ------- */

.ca-quote {
  font-size: 14.5px; line-height: 1.6; font-weight: 300; font-style: italic;
  color: var(--ca-body-2); margin: 16px 0 20px;
  padding-left: 14px; border-left: 2px solid var(--ca-glass-brd);
}
/* Halve the portrait — 1,000px of photograph was not persuading anybody. */
@media (max-width: 767px) { .ca-portrait { aspect-ratio: 5 / 4; } }

/* --- 3D explainer: the claim appeared four times and was never explained --- */

.ca-threed {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ca-line);
}
.ca-threed__h {
  font-size: 16px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ca-ink); margin-top: 10px;
}

/* --- closing band: the form is the ask ------------------------------------ */

.ca-close__alt { font-size: 13px; font-weight: 300; margin-top: 22px; }
.ca-close__alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ca-close__alt a:hover { color: rgba(255, 255, 255, .8); }

/* --- converted: stop asking for something already given ------------------- */

body.ca-converted .ca-sticky__pri {
  background: #1E7A4C; cursor: default; pointer-events: none;
}

/* The smart CTA scrolls the WRAPPER, so the offset has to live there too —
   otherwise the form's heading lands behind the sticky header. */
[data-consult-form] { scroll-margin-top: 88px; }


/* --- success state ---------------------------------------------------------- */

/* The card heading restated the same sentence above the confirmation. */
.ca-form.is-done .ca-form__title,
.ca-form.is-done .ca-form__sub,
.ca-form.is-done .ca-form__count,
.ca-form.is-done .ca-form__why { display: none; }

.ca-form__done b { font-size: 19px; line-height: 1.25; }
.ca-form__done span { font-size: 14.5px; line-height: 1.6; }

/* On the navy card the phone link inherited navy — navy on navy. The single
   most important number on the page was effectively invisible. */
.ca-form__done a { color: var(--ca-navy); font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; }
.ca-form--navy .ca-form__done a { color: #fff; }
.ca-form--navy .ca-form__done a:hover { color: rgba(255, 255, 255, .82); }

/* Inline text links that are actually conversion actions — a phone number, a
   WhatsApp handoff — need a thumb-sized hit area even though they are not
   buttons. Padding on inline-block gets there without adding visual weight. */
.ca-close__alt a,
.ca-form__done a,
.ca-link {
  display: inline-block; padding: 9px 2px;
}
.ca-close__alt { line-height: 1.2; }

/* A 900px measure is far past the readable limit, and a button that wide stops
   reading as a button. Cap both once the card goes horizontal. */
@media (min-width: 768px) {
  .ca-provider__body > * { max-width: 62ch; }
  .ca-provider__body .ca-btn {
    align-self: flex-start; width: auto; flex: 0 0 auto;
    padding-inline: 30px; margin-top: 20px;
  }
}

/* A lone review card spans the full row; the quote should not run 950px wide. */
.ca-review__q, .ca-review__by { max-width: 62ch; }


/* --- provider + reviews ----------------------------------------------------
   A 4:5 portrait at full column width ran the provider card ~1,200px tall and
   the review cards stretched to match it. The card goes horizontal and sits
   beside the reviews instead of above them, so neither one has to be huge. */

.ca-provider { padding: 0; overflow: hidden; }
.ca-provider__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px; }

.ca-people { display: grid; gap: 16px; }
.ca-providers, .ca-reviews { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  .ca-provider { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr); }
  .ca-provider .ca-portrait {
    aspect-ratio: auto; height: 100%; min-height: 280px;
    border-radius: 18px 0 0 18px; object-position: center 15%;
  }
  .ca-provider__body { padding: 22px 26px; justify-content: center; }
  .ca-provider__body > * { max-width: 54ch; }
  .ca-provider__body .ca-btn {
    align-self: flex-start; width: auto; flex: 0 0 auto;
    padding-inline: 26px; margin-top: 18px; min-height: 44px;
  }
}

/* One provider: card left, reviews stacked right — the two columns come out
   close in height, so nothing has to stretch. */
@media (min-width: 1024px) {
  .ca-people { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  /* Two providers earn the full width; the review then sits underneath. */
  .ca-people:has(.ca-provider:nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
  .ca-people:has(.ca-provider:nth-child(2)) .ca-providers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ca-review__q, .ca-review__by { max-width: 62ch; }

/* A single review card spanning the full row leaves half of it empty. */
.ca-reviews .ca-review:only-child { max-width: 780px; }

/* ---------- HubSpot embedded form ---------- */
/* The embed injects an iframe that sizes itself by postMessage. Without a
   min-height it lands at 0px and the card looks empty while it loads. */

.hs-form-frame {
  display: block; width: 100%; min-height: 430px; margin-top: 18px;
}
.hs-form-frame iframe { width: 100% !important; border: 0; display: block; }

/* On the navy closing card the form sits on a dark surface. */
.ca-form--navy .hs-form-frame { color-scheme: dark; }

/* ---------- HubSpot inline form, styled to match ---------- */
/* hbspt.forms.create renders real markup (not an iframe), so the design system
   can own it instead of shipping a stock HubSpot form inside our card. */

.ca-hsform { margin-top: 18px; min-height: 300px; }
.ca-hsform .hs-form-field { margin-bottom: 12px; }
.ca-hsform label {
  display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ca-body-3); font-weight: 500; margin-bottom: 6px;
}
.ca-hsform input[type=text],
.ca-hsform input[type=tel],
.ca-hsform input[type=email] {
  width: 100% !important; height: 48px; box-sizing: border-box;
  border: 1px solid rgba(19,19,19,.13); border-radius: var(--ca-r-field);
  background: rgba(255,255,255,.9); padding: 0 14px;
  font-family: var(--ca-font); font-size: 16px; color: var(--ca-ink); outline: none;
}
.ca-hsform input:focus {
  border-color: var(--ca-navy); box-shadow: 0 0 0 3px rgba(13,43,77,.12);
}
.ca-hsform .hs-error-msg, .ca-hsform .hs-error-msgs label {
  font-size: 11.5px; color: var(--ca-error); text-transform: none; letter-spacing: 0;
}
.ca-hsform .legal-consent-container {
  font-size: 11.5px; line-height: 1.5; font-weight: 300; color: var(--ca-body-3);
  background: rgba(13,43,77,.045); border: 1px solid rgba(13,43,77,.12);
  border-radius: var(--ca-r-field); padding: 12px 14px; margin: 10px 0;
}
.ca-hsform .legal-consent-container p { margin: 0; }
.ca-hsform .hs-button {
  width: 100%; height: 56px; border: 0; border-radius: 14px;
  background: var(--ca-navy); color: #fff;
  font-family: var(--ca-font); font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 36px -18px rgba(13,43,77,.8);
}
.ca-hsform .hs-button:hover { background: var(--ca-navy-hover); }

/* On the navy closing card the primary inverts — never navy on navy. */
.ca-form--navy .ca-hsform label { color: rgba(255,255,255,.74); }
.ca-form--navy .ca-hsform input { background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3); color: #fff; }
.ca-form--navy .ca-hsform .legal-consent-container {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.76); }
.ca-form--navy .ca-hsform .hs-button { background: #fff; color: var(--ca-navy); }
.ca-form--navy .ca-hsform .hs-button:hover { background: var(--ca-surface); }

/* ---------- living inside HubSpot's grid ---------- */
/* HubSpot wraps module content in `.row-fluid` (display:flex) with `.spanN`
   children. A flex item defaults to `min-width:auto`, so it refuses to shrink
   below its content's intrinsic width — our before/after scroller then stretches
   the whole document to 1280px and the page overflows on a phone and sits
   left-aligned on desktop. `min-width:0` lets the item shrink and the scroller
   scroll inside its own box, which is what it was always meant to do. */

.row-fluid > [class*="span"],
.hs_cos_wrapper,
.dnd-module { min-width: 0; max-width: 100%; }

/* .row-fluid is flex and its spans come in at `flex: 0 1 auto`, so a span
   sizes to its CONTENT, not to the row: measured 1611.52px (max-content)
   inside a 1905px row, hard against the left edge. Every viewport wider than
   the content stack shows the whole page shoved left. Only-child because a
   single-column row must fill; a genuine multi-column row keeps its own
   proportions. Pairs with the min-width:0 above — grows to fill, still
   shrinks on mobile. */
.row-fluid > [class*="span"]:only-child { flex: 1 1 100%; width: 100%; }

/* min-width ONLY. These already carry their own max-width (var(--ca-max) on
   .ca-wrap), and this rule sits later in the file at equal specificity — a
   blanket max-width:100% here silently beats it and uncaps every mid-page
   section on wide screens. The overflow this block exists to fix is a flex
   min-width:auto problem, so min-width is the whole fix. Only .ca-scroll,
   which has no cap of its own, still needs the 100%. */
.ca-wrap, .ca-hero, .ca-close, .ca-footer { min-width: 0; }
.ca-scroll { min-width: 0; max-width: 100%; }