/* ============================================================
   DevCo · CTA pop-up modal
   The site's primary call to action — a lead-capture modal that
   opens over the page on a translucent, BLURRED scrim. The page
   stays softly visible behind it (Apple-overlay usage, not an
   opaque cover). Premium, on-brand: design tokens, hard edges,
   hairline borders, editorial type.

   Every rule is scoped under the .dc-cta-modal root class.
   ============================================================ */

/* — Root — fixed full-viewport layer, hidden until opened — */
.dc-cta-modal{
  position:fixed;
  inset:0;
  z-index:920;                 /* above --z-overlay (880) — the nav overlay */
  display:flex;
}
.dc-cta-modal[hidden]{display:none;}

/* — Scrim — translucent + blurred. The page is still SEEN
     through it, softly blurred. NOT an opaque cover. — */
.dc-cta-modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(20,18,14,.46);              /* warm ink film, low opacity */
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
  opacity:0;
  transition:opacity .42s var(--ease);
}
.dc-cta-modal.is-open .dc-cta-modal__scrim{opacity:1;}

/* Fallback where backdrop-filter is unsupported — lean on a
   slightly heavier film so the panel stays legible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dc-cta-modal__scrim{background:rgba(20,18,14,.78);}
}

/* — Viewport — centres the panel, allows scroll on short screens — */
.dc-cta-modal__viewport{
  position:relative;
  width:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,5vh,64px) var(--gutter);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* — Panel — the premium surface. Dark ground (sec--dark voice),
     hard edges, hairline border, frosted catch-light. — */
.dc-cta-modal__panel{
  position:relative;
  z-index:2;
  width:100%;
  max-width:480px;
  background:var(--glass-dark-hi);
  border:var(--hair) solid var(--glass-dark-edge);
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(130%);
  backdrop-filter:blur(var(--glass-blur-strong)) saturate(130%);
  color:var(--bone);
  padding:clamp(32px,4.4vw,52px);
  box-shadow:0 40px 120px -32px rgba(0,0,0,.66);
  /* opening transform — see .is-open + reduced-motion below */
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:
    opacity .5s var(--ease),
    transform .5s var(--ease);
  outline:none;
}
.dc-cta-modal.is-open .dc-cta-modal__panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Solid fallback where backdrop-filter is unsupported. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dc-cta-modal__panel{background:#221d18;}
}

/* hairline catch-light along the top edge — the OS "lift" */
.dc-cta-modal__panel::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:var(--hair);
  background:var(--glass-dark-light);
  pointer-events:none;
}

/* — Survey-document corner ticks — */
.dc-cta-modal__tick{
  position:absolute;width:14px;height:14px;
  border:0 solid var(--bone-faint);
  pointer-events:none;
}
.dc-cta-modal__tick--tl{top:9px;left:9px;border-top-width:var(--hair);border-left-width:var(--hair);}
.dc-cta-modal__tick--tr{top:9px;right:9px;border-top-width:var(--hair);border-right-width:var(--hair);}
.dc-cta-modal__tick--bl{bottom:9px;left:9px;border-bottom-width:var(--hair);border-left-width:var(--hair);}
.dc-cta-modal__tick--br{bottom:9px;right:9px;border-bottom-width:var(--hair);border-right-width:var(--hair);}

/* — Close button — top-right, hairline glyph — */
.dc-cta-modal__close{
  position:absolute;
  top:14px;right:14px;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:var(--hair) solid var(--bone-hair);
  border-radius:0;
  cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.dc-cta-modal__close:hover{
  border-color:var(--bone-soft);
  background:rgba(237,230,214,.04);
}
.dc-cta-modal__close:focus-visible{
  outline:var(--hair) solid var(--accent);
  outline-offset:3px;
}
.dc-cta-modal__close-glyph{
  position:relative;width:14px;height:14px;display:block;
}
.dc-cta-modal__close-glyph::before,
.dc-cta-modal__close-glyph::after{
  content:"";
  position:absolute;top:50%;left:0;
  width:100%;height:var(--hair);
  background:var(--bone-soft);
}
.dc-cta-modal__close-glyph::before{transform:rotate(45deg);}
.dc-cta-modal__close-glyph::after{transform:rotate(-45deg);}
.dc-cta-modal__close:hover .dc-cta-modal__close-glyph::before,
.dc-cta-modal__close:hover .dc-cta-modal__close-glyph::after{background:var(--bone);}

/* — Head — eyebrow, title, supporting line — */
.dc-cta-modal__head{
  display:flex;flex-direction:column;
  margin:0 0 clamp(24px,3.2vh,32px);
}
.dc-cta-modal__eyebrow{
  color:var(--bone-faint);
  margin-bottom:18px;
}
.dc-cta-modal__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.85rem,1.4rem + 1.7vw,2.55rem);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--bone);
}
.dc-cta-modal__sub{
  margin:clamp(12px,1.8vh,16px) 0 0;
  font-family:var(--font-sans);
  font-size:var(--fs-body-sm);
  line-height:1.6;
  color:var(--bone-soft);
  max-width:38ch;
}

/* — Form — */
.dc-cta-modal__form{
  display:flex;flex-direction:column;
  gap:clamp(16px,2.2vh,20px);
}
.dc-cta-modal__form[hidden]{display:none;}

.dc-cta-modal__field{
  display:flex;flex-direction:column;gap:10px;
}
.dc-cta-modal__label{
  color:var(--bone-faint);
}
.dc-cta-modal__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:15px 17px;
  transition:border-color .32s var(--ease),background .32s var(--ease);
}
.dc-cta-modal__input::placeholder{color:var(--bone-faint);}
.dc-cta-modal__input:hover{border-color:var(--bone-soft);}
.dc-cta-modal__input:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(237,230,214,.03);
}
.dc-cta-modal__input:focus-visible{
  outline:var(--hair) solid var(--accent);
  outline-offset:3px;
}
.dc-cta-modal__input.is-invalid{border-color:var(--accent);}

/* — Actions row — submit + secondary text link — */
.dc-cta-modal__actions{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:4px;
}
.dc-cta-modal__submit{
  cursor:pointer;
  color:var(--bone);
}
/* the panel ground is dark — fill on hover to bone */
.dc-cta-modal__submit:hover{background:var(--bone);color:var(--ink);}
.dc-cta-modal__submit[aria-busy="true"]{opacity:.6;pointer-events:none;}
.dc-cta-modal__altlink{
  flex:none;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--bone-soft);
  border-bottom:var(--hair) solid var(--bone-hair);
  padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.dc-cta-modal__altlink:hover{
  color:var(--bone);
  border-bottom-color:var(--bone-soft);
}
.dc-cta-modal__altlink:focus-visible{
  outline:var(--hair) solid var(--accent);
  outline-offset:3px;
}

/* — Inline status message (validation / error) — */
.dc-cta-modal__status{
  margin:2px 0 0;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  line-height:1.6;
  color:var(--bone-soft);
}
.dc-cta-modal__status:empty{display:none;}
.dc-cta-modal__status.is-error{color:var(--accent);}

/* — Thank-you state — replaces the form on success — */
.dc-cta-modal__thanks{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:16px;
}
.dc-cta-modal__thanks[hidden]{display:none;}
.dc-cta-modal__thanks-mark{
  width:44px;height:44px;flex:none;
  border:var(--hair) solid var(--accent);
  border-radius:50%;
  position:relative;
}
/* drawn check mark */
.dc-cta-modal__thanks-mark::after{
  content:"";
  position:absolute;
  left:15px;top:12px;
  width:8px;height:15px;
  border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);
}
.dc-cta-modal__thanks-text{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem);
  line-height:1.4;
  color:var(--bone);
}
.dc-cta-modal__thanks-close{
  color:var(--bone-soft);
  cursor:pointer;
  background:transparent;
}
.dc-cta-modal__thanks-close:hover{color:var(--bone);}
.dc-cta-modal__thanks-close:focus-visible{
  outline:var(--hair) solid var(--accent);
  outline-offset:3px;
}

/* — Scroll-lock helper — applied to <html> while the modal is open — */
html.dc-cta-modal-lock,
html.dc-cta-modal-lock body{
  overflow:hidden;
}

/* ============================================================
   Quiet inline CTA — the tasteful homepage CTA moments.
   A single editorial line + an underline link, scoped under
   .dc-cta-modal-cue so it never collides with section styles.
   Lives on dark grounds (Ecosystem) and light grounds.
   ============================================================ */
.dc-cta-modal-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(16px,2.4vh,22px);
  max-width:46ch;
  margin-inline:auto;
  padding-top:clamp(40px,6vh,72px);
}
.dc-cta-modal-cue__line{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);
  line-height:1.34;
  letter-spacing:-.012em;
  color:inherit;
}
.dc-cta-modal-cue__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:currentColor;
  border-bottom:var(--hair) solid currentColor;
  padding-bottom:4px;
  cursor:pointer;
  background:transparent;
  transition:gap .3s var(--ease),opacity .3s var(--ease);
}
.dc-cta-modal-cue__link:hover{gap:18px;}
.dc-cta-modal-cue__link:focus-visible{
  outline:var(--hair) solid var(--accent);
  outline-offset:4px;
}
.dc-cta-modal-cue__link-arrow{
  display:inline-block;width:18px;height:var(--hair);
  background:currentColor;position:relative;
  transition:transform .3s var(--ease);
}
.dc-cta-modal-cue__link-arrow::after{
  content:"";position:absolute;right:-1px;top:-3px;
  width:6px;height:6px;
  border-right:var(--hair) solid currentColor;
  border-top:var(--hair) solid currentColor;
  transform:rotate(45deg);
}
.dc-cta-modal-cue__link:hover .dc-cta-modal-cue__link-arrow{transform:translateX(4px);}

/* — Mobile — clean at 390px — */
@media (max-width:520px){
  .dc-cta-modal__viewport{
    padding:0;
    align-items:stretch;
  }
  .dc-cta-modal__panel{
    max-width:none;
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:64px 22px 40px;
  }
  .dc-cta-modal__actions{
    gap:16px;
  }
  .dc-cta-modal__submit{width:100%;justify-content:space-between;}
}

/* — Reduced motion — no transforms, gentle fade only — */
@media (prefers-reduced-motion:reduce){
  .dc-cta-modal__scrim,
  .dc-cta-modal__panel{
    transition:opacity .2s linear;
  }
  .dc-cta-modal__panel{
    transform:none;
  }
  .dc-cta-modal.is-open .dc-cta-modal__panel{
    transform:none;
  }
  .dc-cta-modal__input,
  .dc-cta-modal__close,
  .dc-cta-modal__submit,
  .dc-cta-modal__altlink,
  .dc-cta-modal-cue__link,
  .dc-cta-modal-cue__link-arrow{
    transition:none;
  }
}