/* =========================================================
   GLOBAL CTA — the one closing call to action (inc/cta.php)

   Kept in its own file rather than in nn-custom.css because the
   older page template does not load the new stylesheet. The
   component therefore declares its own tokens, falling back to
   the site ones wherever they exist, so it looks identical on
   both templates.
   ========================================================= */
.gcta{
  --g-navy:var(--navy,#212A56);
  --g-blue:var(--blue,#005182);
  --g-blue-2:var(--blue-2,#003D60);
  --g-amber:var(--amber,#FAA31F);
  --g-amber-lite:var(--amber-lite,#FFB441);
  --g-paper:var(--paper,#FFFFFF);
  --g-body:var(--body,#5A5040);
  --g-muted:var(--muted,#8C7E69);
  --g-dark:var(--dark,#141A38);
  --g-ease:var(--ease,cubic-bezier(.2,.7,.1,1));
  font-family:var(--font,"Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
}
.gcta{
  /* The component is a full-width band at the end of the page, so it must
     start below anything floated above it. The WordPress theme floats its
     listing columns and they escape their container: without this the CTA
     was squeezed into the 1270px beside a float instead of running the
     full width. Harmless on templates that have no floats. */
  clear:both;
  position:relative; isolation:isolate;
  padding:clamp(56px,7vw,104px) 0 clamp(52px,6.5vw,96px);
  background:linear-gradient(180deg,#F4F8FD 0%,#EEF5FC 100%);
  border-top:1px solid rgba(33,42,86,.07);
  text-align:center;
  overflow:hidden;
}

/* the same quiet dot field the rest of the site uses */
.gcta .gcta-dots{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(33,42,86,.13) 1.1px, transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 46%, transparent 38%, #000 100%);
          mask-image:radial-gradient(ellipse 72% 62% at 50% 46%, transparent 38%, #000 100%);
  opacity:.75;
}

.gcta .gcta-in{ position:relative; display:flex; flex-direction:column; align-items:center }

.gcta .gcta-eyebrow{
  display:inline-block; margin-bottom:clamp(14px,1.8vw,20px);
  font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g-blue);
}

.gcta .gcta-title{
  margin:0; max-width:19ch;
  font-size:clamp(30px,4.2vw,54px); line-height:1.1;
  font-weight:900; letter-spacing:-.03em; color:var(--g-navy);
}
.gcta .gcta-title em{ font-style:normal; color:var(--g-amber) }

.gcta .gcta-lead{
  /* 70ch keeps the line length in the comfortable 65-75 character range.
     At the previous 58ch the longer description ran to six lines and left
     the final word stranded on a line of its own. */
  margin:clamp(16px,2vw,22px) 0 0; max-width:70ch;
  font-size:clamp(16px,1.2vw,1.16px); line-height:1.65; font-weight:500;
  color:var(--g-body);
}

/* ---- the three buttons ------------------------------------------------ */

.gcta .gcta-actions{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:14px; margin-top:clamp(28px,3.4vw,40px);
}

.gcta .gcta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 clamp(22px,2.2vw,30px);
  border:2px solid transparent; border-radius:999px;
  font:inherit; font-size:clamp(15px,1.05vw,16px); font-weight:800; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--g-ease), box-shadow .25s var(--g-ease),
             background-color .25s var(--g-ease), border-color .25s var(--g-ease), color .25s var(--g-ease);
}
.gcta .gcta-btn svg{ width:18px; height:18px; flex:0 0 auto;
  transition:transform .25s var(--g-ease) }
.gcta .gcta-btn:hover{ transform:translateY(-2px) }
.gcta .gcta-btn:hover svg:last-child{ transform:translateX(3px) }
.gcta .gcta-btn:focus-visible{ outline:3px solid var(--g-blue); outline-offset:3px }

/* 1 — primary: brand amber, navy lettering */
.gcta .gcta-btn-primary{
  background:var(--g-amber); color:var(--g-dark);
  box-shadow:0 14px 28px -16px rgba(250,163,31,.9);
}
.gcta .gcta-btn-primary:hover{ background:var(--g-amber-lite); box-shadow:0 20px 34px -16px rgba(250,163,31,.95) }

/* 2 — the assistant. Rendered only once NN_CHAT_LIVE is on. */
.gcta .gcta-btn-chat{
  background:var(--g-blue); color:#fff;
  box-shadow:0 14px 28px -16px rgba(0,81,130,.85);
}
.gcta .gcta-btn-chat:hover{ background:var(--g-blue-2); box-shadow:0 20px 34px -16px rgba(0,81,130,.9) }
.gcta .gcta-chat-ic{ display:grid; place-items:center }
.gcta .gcta-chat-ic svg{ width:19px; height:19px }

/* 3 — the health check: quiet, outlined */
.gcta .gcta-btn-health{
  background:var(--g-paper); color:var(--g-navy); border-color:var(--g-navy);
  box-shadow:0 10px 24px -18px rgba(33,42,86,.7);
}
.gcta .gcta-btn-health:hover{ background:var(--g-navy); color:#fff; border-color:var(--g-navy) }


/* ---- phones: one button per row, full width --------------------------- */

@media (max-width:720px){
  .gcta .gcta-actions{ flex-direction:column; align-items:stretch; width:min(420px,100%); gap:12px }
  .gcta .gcta-btn{ width:100%; white-space:normal; padding:14px 20px; text-align:center }
  .gcta .gcta-title{ max-width:none }
}

@media (prefers-reduced-motion:reduce){
  .gcta .gcta-btn, .gcta .gcta-btn svg{ transition:none }
  .gcta .gcta-btn:hover{ transform:none }
  .gcta .gcta-btn:hover svg:last-child{ transform:none }
}

/* the old closing sections are gone from the templates; this keeps any
   stale cached copy from showing a second CTA above the new one */
.gcta + .cta-band, .cta-band + .gcta{ display:none }


/* =========================================================
   HOLDING THE COMPONENT'S OWN TYPOGRAPHY

   The WordPress theme asserts three rules with !important that
   a normal author rule cannot beat:

       *                 { font-family: Inter !important }
       h1,h2,h3,h4,h5,h6 { font-family: "Open Sans" !important }
       h2                { font-size: 26px !important }

   The CTA has to read identically on every template, so it
   asserts its own type back. This is the only !important in
   the component, and it covers only what that theme overrides.
   ========================================================= */
.gcta,
.gcta *{
  font-family:"Epilogue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
.gcta .gcta-title{
  font-size:clamp(30px,4.2vw,54px) !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}
@media (max-width:720px){
  .gcta .gcta-title{ font-size:clamp(28px,7.4vw,36px) !important }
}

/* the assistant button ships hidden until NN_CHAT_LIVE is on */
.gcta .gcta-btn[hidden]{ display:none }