/* Updated 2026-09-07 */
/* eMotion Video site footer. Built from the approved mockup
   ops/waiting/read/footer-proposed-2026-08-30.html (button option A, teal with navy label).
   The footer markup is owned by website/site-build-2026-08-03-workfiles/stamp-footer.py.
   Colour variables come from brand-system.css; every var() carries a fallback because
   404.html does not load brand-system.css. */

.ev-footer{background:var(--colour-bg-dark,#0d1a3e);color:var(--colour-white,#ffffff);
  padding:clamp(48px,5.5vw,76px) clamp(20px,4vw,64px) 0;
  font-family:'Inter',system-ui,sans-serif;font-size:16px;text-align:left;-webkit-font-smoothing:antialiased}
.ev-footer *,.ev-footer *::before,.ev-footer *::after{box-sizing:border-box}
.ev-footer img{max-width:100%}
.ev-footer p{max-width:none}
.ev-inner{max-width:1240px;margin:0 auto}
.ev-rule{max-width:1240px;margin:0 auto;height:1px;background:rgba(255,255,255,0.10);border:0}

/* ---- band 1, newsletter ---- */
.nl{text-align:center;padding-bottom:clamp(40px,4.5vw,58px)}
.nl-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 22px}
.nl-eyebrow span{font-size:13px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--colour-highlight,#33ccee)}
.nl-eyebrow i{display:block;width:40px;height:2px;background:var(--colour-highlight,#33ccee);flex:none}
.nl h2{font-size:clamp(28px,3.6vw,40px);font-weight:900;line-height:1.08;letter-spacing:-0.02em;color:var(--colour-white,#ffffff);margin:0 0 16px}
.nl p{font-size:16px;line-height:1.65;color:var(--colour-text-tertiary,#c9d2ec);margin:0}
.nl p + p{margin-top:2px}

/* The live signup is the Beehiiv embed. It sits where the mockup's .nl-form sat.
   Beehiiv's embed.js resizes the iframe to the form's real height once the form has
   loaded (it writes an inline height). The height here is the fallback before that
   happens: the form measured 202px tall at 760px and at 375px on 2026-09-07. */
.nl-embed{max-width:760px;margin:30px auto 16px}
.nl .beehiiv-embed{display:block;width:100%;height:210px;border:0;margin:0;background:transparent}

.nl-form{display:flex;justify-content:center;align-items:stretch;gap:14px;flex-wrap:wrap;margin:30px 0 16px}
.nl-field{position:relative;flex:0 1 300px;min-width:0}
.nl-field input{width:100%;height:60px;border:0;border-radius:10px;background:var(--colour-white,#ffffff);color:var(--colour-navy,#112255);
  font-family:inherit;font-size:16px;font-weight:500;padding:0 52px 0 20px}
.nl-field input::placeholder{color:#4a5578;opacity:1}
.nl-field input{transition:box-shadow .18s ease}
.nl-field input:hover{box-shadow:0 0 0 2px rgba(51,204,238,0.45)}
.nl-field input:focus{outline:3px solid var(--colour-highlight,#33ccee);outline-offset:2px}
.nl-field .ico{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:block;pointer-events:none}
.nl-btn{height:60px;border:0;border-radius:10px;background:var(--colour-highlight,#33ccee);color:var(--colour-bg-dark,#0d1a3e);
  font-family:inherit;font-size:16px;font-weight:800;letter-spacing:-0.01em;
  padding:0 26px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;flex:0 0 auto}
.nl-btn{transition:background-color .18s ease, transform .18s ease}
.nl-btn:hover{background:#7fe4ff}
.nl-btn:active{transform:translateY(1px)}
.nl-btn:focus-visible{outline:3px solid var(--colour-white,#ffffff);outline-offset:2px}
.nl-fine{font-size:13px;line-height:1.6;color:#aab6db;margin:0 0 4px}
.nl-fine a{color:var(--colour-highlight,#33ccee);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- band 2, three columns ---- */
.cols{display:grid;grid-template-columns:1.5fr 1.15fr 1fr;gap:clamp(28px,3.4vw,54px);
  padding:clamp(40px,4.5vw,58px) 0}
.col-head{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--colour-highlight,#33ccee);margin:0 0 10px;line-height:1.3}
.col-head-rule{width:38px;height:2px;background:var(--colour-highlight,#33ccee);margin:0 0 22px}

.brand-logo{width:214px;max-width:100%;height:auto;display:block;margin:0 0 18px}
.brand-hair{width:64px;height:2px;background:var(--colour-highlight,#33ccee);margin:0 0 20px}
.blurb{font-size:15px;line-height:1.75;color:var(--colour-text-tertiary,#c9d2ec);margin:0 0 28px}
.blurb b{color:var(--colour-highlight,#33ccee);font-weight:700}
.partner-label{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--colour-highlight,#33ccee);margin:0 0 14px;line-height:1.3}
.partners{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.partner{background:var(--colour-white,#ffffff);border-radius:10px;padding:11px 15px;display:flex;align-items:center}
.partner a{display:flex;align-items:center}
.partner img{height:36px;width:auto;display:block}

.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px clamp(18px,2.4vw,34px)}
.link-col{display:flex;flex-direction:column;gap:14px}
.flink{display:flex;align-items:center;gap:11px;color:var(--colour-text-secondary,#dfe5f6);font-size:15px;line-height:1.35;
  text-decoration:none;font-weight:500}
.flink{transition:color .16s ease}
.flink:hover{color:var(--colour-highlight,#33ccee)}
.flink:focus-visible,.col-more:focus-visible,.talk-lead:focus-visible,.legal a:focus-visible,.nl-fine a:focus-visible,.soc:focus-visible{outline:2px solid var(--colour-highlight,#33ccee);outline-offset:3px;border-radius:3px}
.flink svg{flex:none}
.col-more{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:var(--colour-highlight,#33ccee);
  font-size:14.5px;font-weight:700;text-decoration:none}
.col-more:hover{text-decoration:underline;text-underline-offset:3px}

.talk-lead{display:flex;align-items:flex-start;gap:14px;margin:0 0 26px;text-decoration:none}
.talk-badge{flex:none;width:46px;height:46px;border-radius:11px;background:rgba(51,204,238,0.14);
  display:flex;align-items:center;justify-content:center}
.talk-title{display:flex;align-items:center;gap:8px;color:var(--colour-highlight,#33ccee);font-size:16.5px;font-weight:700;margin:0 0 3px}
.talk-sub{font-size:14.5px;line-height:1.55;color:var(--colour-text-tertiary,#c9d2ec);margin:0}
.talk-list{display:flex;flex-direction:column;gap:14px}
.talk-badge{transition:background-color .18s ease}
.talk-lead:hover .talk-badge{background:rgba(51,204,238,0.24)}
.talk-lead:hover .talk-title{text-decoration:underline;text-underline-offset:3px}

/* ---- band 3, bottom bar ---- */
.bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px 0 clamp(30px,3.4vw,44px)}
.legal{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:13.5px;color:#aab6db}
.legal-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;line-height:1.5}
.legal a{color:var(--colour-text-tertiary,#c9d2ec);text-decoration:none}
.legal a:hover{color:var(--colour-highlight,#33ccee);text-decoration:underline;text-underline-offset:3px}
.legal .pipe{width:1px;height:13px;background:rgba(255,255,255,0.22);display:block}
.connect{display:flex;align-items:center;gap:8px}
.connect .script{display:block;height:46px;width:auto;flex:none}
.socials{display:flex;align-items:center;gap:12px}
.soc{width:42px;height:42px;border-radius:50%;border:1.5px solid #93a0c8;
  display:flex;align-items:center;justify-content:center;text-decoration:none}
.soc{transition:border-color .18s ease}
.soc:hover{border-color:var(--colour-highlight,#33ccee)}
.soc:hover svg{fill:var(--colour-highlight,#33ccee);stroke:var(--colour-highlight,#33ccee)}
.soc svg{transition:fill .18s ease, stroke .18s ease}

@media (prefers-reduced-motion:reduce){.ev-footer *{transition:none !important;animation:none !important}}

/* ---- responsive ---- */
@media (max-width:1000px){
  .cols{grid-template-columns:1fr 1fr;gap:44px}
  .col-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .cols{grid-template-columns:1fr;gap:40px}
  .nl-form{flex-direction:column;align-items:stretch;gap:12px}
  .nl-field{flex:1 1 auto;width:100%}
  .nl-btn{width:100%;justify-content:center}
  .bottom{flex-direction:column;align-items:flex-start;gap:26px}
  .connect{align-self:flex-start}
}
@media (max-width:620px){
  /* the two legal lines wrap at this width and the dividers orphan onto their own
     row, so drop the dividers and let each statement have its own line instead. */
  .legal-line{flex-direction:column;align-items:flex-start;gap:7px}
  .legal-line .pipe{display:none}
}
@media (max-width:480px){
  .link-grid{grid-template-columns:1fr}
  .connect .script{height:38px}
  .partner img{height:34px}
}