/* ============================================================
   DevCo · Section 09 — Final CTA
   Dark ground, centred composition. The conversion moment:
   eyebrow, headline, bordered guide panel, lead-capture form.
   ============================================================ */
.cta{position:relative;}
.cta__contour{color:var(--bone);opacity:.05;}
.cta__ghost{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(200px,26vw,440px);line-height:.85;
  color:var(--bone);opacity:.035;letter-spacing:-.04em;
  pointer-events:none;user-select:none;white-space:nowrap;
}

.cta__shell{position:relative;z-index:2;}

/* — Header — centred eyebrow, headline, sub — */
.cta__head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.cta__eyebrow{justify-content:center;}
.cta__headline{
  margin:clamp(28px,4vh,40px) 0 0;
  font-size:clamp(2.6rem,1.4rem + 4.6vw,5.6rem);
  line-height:.95;letter-spacing:-.025em;
}
.cta__headline em{font-style:italic;}
.cta__sub{
  margin:clamp(20px,3vh,32px) 0 0;max-width:34ch;
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);line-height:1.4;
}

/* — Body — centred column holding the panel, note, and form — */
.cta__body{
  max-width:620px;margin:clamp(56px,8vh,96px) auto 0;
  display:flex;flex-direction:column;
}

/* — Bordered guide panel — */
.cta__panel{
  border:var(--hair) solid var(--bone-hair);
  padding:clamp(28px,3.5vw,44px);
}
.cta__panel-title{
  margin:0 0 clamp(20px,3vh,28px);
  text-align:center;letter-spacing:-.018em;
}
.cta__panel-list{
  border-top:var(--hair) solid var(--bone-hair);
}
.cta__panel-item{
  display:grid;grid-template-columns:38px 1fr;gap:16px;
  align-items:baseline;
  padding:16px 0;
  border-bottom:var(--hair) solid var(--bone-hair);
}
.cta__panel-idx{color:var(--accent);}
.cta__panel-text{
  font-family:var(--font-display);
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  line-height:1.35;letter-spacing:-.005em;
  color:var(--bone-soft);
}

/* — Body note — */
.cta__note{
  margin:clamp(24px,3.5vh,36px) auto 0;
  max-width:48ch;text-align:center;
  font-size:var(--fs-body-sm);line-height:1.7;
}

/* — Lead-capture form — */
.cta__form-wrap{margin-top:clamp(28px,4vh,40px);}
.cta__form{
  display:flex;flex-direction:column;gap:18px;
}
.cta__field{display:flex;flex-direction:column;gap:10px;}
.cta__label{color:var(--bone-faint);}
.cta__input{
  width:100%;
  font-family:var(--font-sans);font-size:var(--fs-body);
  color:var(--bone);
  background:transparent;
  border:var(--hair) solid var(--bone-hair);border-radius:0;
  padding:16px 18px;
  transition:border-color .32s var(--ease),background .32s var(--ease);
}
.cta__input::placeholder{color:var(--bone-faint);}
.cta__input:hover{border-color:var(--bone-soft);}
.cta__input:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(237,230,214,.03);
}
.cta__input:focus-visible{
  outline:var(--hair) solid var(--accent);outline-offset:3px;
}
/* invalid state — only after the JS marks the field */
.cta__input.is-invalid{border-color:var(--accent);}

.cta__submit-row{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:6px;
}
.cta__submit{cursor:pointer;}
.cta__submit[aria-busy="true"]{opacity:.6;pointer-events:none;}
.cta__micro{flex:none;}

/* — Inline status message (success / error) — */
.cta__status{
  margin-top:18px;
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  line-height:1.6;
}
.cta__status:empty{display:none;}
.cta__status.is-error{color:var(--accent);}

/* — Thank-you state — replaces the form on success — */
.cta__thanks{
  border:var(--hair) solid var(--bone-hair);
  padding:clamp(28px,3.5vw,40px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.cta__thanks-mark{
  width:44px;height:44px;flex:none;
  border:var(--hair) solid var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:18px;line-height:1;
}
.cta__thanks-text{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);line-height:1.35;
  color:var(--bone);margin:0;max-width:30ch;
}

/* — Secondary link row — */
.cta__secondary{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.5vw,28px);flex-wrap:wrap;
  text-align:center;
  margin-top:clamp(72px,10vh,140px);
  padding-top:clamp(32px,5vh,56px);
  border-top:var(--hair) solid var(--bone-hair);
}
.cta__secondary-text{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.3;
  color:var(--bone-soft);
}
.cta__secondary-link{color:var(--accent);}
.cta__secondary-link span{font-size:1em;line-height:1;}

/* — Responsive — */
@media (max-width:640px){
  .cta__submit-row{flex-direction:column;align-items:stretch;gap:16px;}
  .cta__submit{justify-content:center;}
  .cta__micro{text-align:center;}
  .cta__secondary{flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  .cta__input{transition:none;}
}

/* ============================================================
   ELEMENTOR COMPAT — Section 11 Final CTA
   ------------------------------------------------------------
   Rebuilt as native Elementor content on a DARK ground. The
   Peak-End moment: centred eyebrow, large headline, sub, the
   bordered guide panel, body note, the lead-capture form, and
   a secondary text link. The form is custom (free Elementor
   has no Form widget): it is embedded via a Shortcode widget
   running [devco_cta_form] from inc/leads.php, so the existing
   cta.css form rules + cta.js behaviour apply unchanged.
   Everything around it is a native, client-editable widget.
   This block bridges the Elementor structure. Scoped to
   .devco-site.
   ============================================================ */

/* — section shell + ghost word (decoration, ported from cta.php) — */
.devco-site #cta.cta { position: relative; }
.devco-site #cta.cta::before {
  content: "Start.";
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(200px, 26vw, 440px);
  line-height: .85;
  color: var(--bone);
  opacity: .035;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.devco-site #cta .cta__shell.e-con {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

/* — header — centred eyebrow / headline / sub — */
.devco-site #cta .cta__head.e-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.devco-site #cta .dc-eyebrow.cta__eyebrow.e-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.devco-site #cta .dc-eyebrow__rule { flex: none; }
.devco-site #cta .dc-eyebrow__idx > span,
.devco-site #cta .dc-eyebrow__label > span,
.devco-site #cta .dc-eyebrow__rule > span { display: inline; }

.devco-site #cta .cta__headline .elementor-heading-title {
  font: inherit;
  margin: clamp(28px, 4vh, 40px) 0 0;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem);
  line-height: .95;
  letter-spacing: -.025em;
  color: inherit;
}
.devco-site #cta .cta__headline em { font-style: italic; }

.devco-site #cta .cta__sub p {
  margin: clamp(20px, 3vh, 32px) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.4;
  color: inherit;
}

/* — body — centred column holding panel, note, form — */
.devco-site #cta .cta__body.e-con {
  display: flex;
  flex-direction: column;
  max-width: 620px;
  margin: clamp(56px, 8vh, 96px) auto 0;
}

/* — guide panel — frosted-glass surface (round 3) — */
.devco-site #cta .cta__panel.e-con {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--hair) solid var(--glass-dark-edge);
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(130%);
}
/* hairline catch-light along the panel's top edge */
.devco-site #cta .cta__panel.e-con::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hair);
  background: var(--glass-dark-light);
  pointer-events: none;
  z-index: 1;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .devco-site #cta .cta__panel.e-con { background: var(--glass-dark-hi); }
}
.devco-site #cta .cta__panel-title .elementor-heading-title {
  font: inherit;
  margin: 0 0 clamp(20px, 3vh, 28px);
  text-align: center;
  letter-spacing: -.018em;
  color: inherit;
}

/* panel list — each item a 2-col Container, hairline-ruled */
.devco-site #cta .cta__panel-item.e-con {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: var(--hair) solid var(--bone-hair);
}
.devco-site #cta .cta__panel-item.e-con:first-of-type {
  border-top: var(--hair) solid var(--bone-hair);
}
.devco-site #cta .cta__panel-idx {
  color: var(--accent);
}
.devco-site #cta .cta__panel-idx span { display: inline; }
.devco-site #cta .cta__panel-text {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--bone-soft);
}
.devco-site #cta .cta__panel-text span { display: inline; }

/* — body note — */
.devco-site #cta .cta__note p {
  margin: clamp(24px, 3.5vh, 36px) auto 0;
  max-width: 48ch;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: inherit;
}

/* — the embedded form (Shortcode widget → [devco_cta_form]) — */
.devco-site #cta .cta__form-shortcode { margin-top: clamp(28px, 4vh, 40px); }
.devco-site #cta .cta__form-shortcode .elementor-shortcode { display: block; }
/* the .cta__form-wrap inside already carries its own cta.css rules;
   reset the margin so the widget controls the spacing */
.devco-site #cta .cta__form-shortcode .cta__form-wrap { margin-top: 0; }

/* — secondary link row — */
.devco-site #cta .cta__secondary.e-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vw, 28px);
  flex-wrap: wrap;
  text-align: center;
  margin-top: clamp(72px, 10vh, 140px);
  padding-top: clamp(32px, 5vh, 56px);
  border-top: var(--hair) solid var(--bone-hair);
}
.devco-site #cta .cta__secondary-text span {
  display: inline;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.3;
  color: var(--bone-soft);
}
.devco-site #cta .cta__secondary-linkwrap .cta__secondary-link {
  color: var(--accent);
}
.devco-site #cta .cta__secondary-linkwrap .cta__secondary-link span {
  font-size: 1em;
  line-height: 1;
}

/* — responsive — */
@media (max-width: 640px) {
  .devco-site #cta .cta__secondary.e-con { flex-direction: column; }
}