/* ============================================================
   ET COMMON HEADER + FOOTER
   Shared across index.html, programs.html, about-us.html,
   et-you.html
   Uses the same ET colour tokens already defined inline on the
   four finalized pages (blue / deep / cyan / ink / muted / line / soft).
   ============================================================ */
:root{
  --et-blue:#1267e8;
  --et-deep:#083f9f;
  --et-cyan:#18c7d5;
  --et-cyanSoft:#eafcfd;
  --et-ink:#0b1d36;
  --et-muted:#6b788b;
  --et-line:#dceaf2;
  --et-soft:#f7fbfd;
  --et-white:#fff;

  /* Shared site-wide dimension system — used by every page so that
     every "full" section shares one container width and one vertical
     rhythm. Half/split sections simply divide this same container in two. */
  --et-container:1200px;       /* standard max content width, full sections */
  --et-section-pad:100px;      /* standard vertical padding, full sections */
  --et-section-pad-tablet:76px;
  --et-section-pad-mobile:64px;
  --et-hero-height:clamp(480px,62vh,680px); /* shared hero/intro section height, every page */
}

.et-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--et-line);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.et-header .et-nav-inner{
  width:min(var(--et-container),calc(100% - 36px));
  margin:auto;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.et-header .et-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--et-ink);font-weight:900;letter-spacing:.01em;
  flex:0 0 auto;
}
.et-header .et-brand-mark{
  width:38px;height:38px;
  display:grid;place-items:center;flex:0 0 auto;
}
.et-header .et-brand-word{font-size:16px;line-height:1.05}
.et-header .et-brand-word small{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--et-muted)}

.et-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.et-links a{
  display:inline-flex;align-items:center;
  padding:9px 14px;border-radius:10px;
  font-size:13px;font-weight:750;letter-spacing:.01em;
  color:var(--et-ink);text-decoration:none;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.et-links a:hover{background:none;color:rgba(18,103,232,.5)}
.et-links a.et-active{background:none;color:var(--et-blue);position:relative}
.et-links a.et-active::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--et-blue)}

.et-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--et-blue);color:#fff!important;
  border-radius:12px;padding:11px 18px;font-size:13px;font-weight:850;
  text-decoration:none;box-shadow:0 9px 22px rgba(18,103,232,.18);
  transition:transform .15s;white-space:nowrap;flex:0 0 auto;
}
.et-cta-btn:hover{transform:translateY(-2px)}
.et-cta-btn:hover,.et-cta-btn:focus,.et-cta-btn:focus-visible,.et-cta-btn:active{outline:none;box-shadow:none}

.et-menu-btn{
  display:none;border:0;background:none;cursor:pointer;
  width:40px;height:40px;border-radius:10px;
  align-items:center;justify-content:center;flex:0 0 auto;
}
.et-menu-btn span,.et-menu-btn span:before,.et-menu-btn span:after{
  content:"";display:block;width:20px;height:2px;background:var(--et-ink);
  position:relative;transition:.2s;
}
.et-menu-btn span:before{position:absolute;top:-6px}
.et-menu-btn span:after{position:absolute;top:6px}
.et-menu-btn.open span{background:transparent}
.et-menu-btn.open span:before{transform:rotate(45deg);top:0}
.et-menu-btn.open span:after{transform:rotate(-45deg);top:0}

@media(max-width:900px){
  .et-links{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--et-line);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:14px;box-shadow:0 18px 34px rgba(8,63,159,.08);
  }
  .et-links.et-open{display:flex}
  .et-links a{padding:13px 14px;border-radius:12px}
  .et-header .et-nav-inner{height:64px}
  .et-menu-btn{display:flex}
  .et-cta-btn.et-desktop-only{display:none}
}
@media(max-width:520px){
  .et-header .et-brand-word small{display:none}
}

/* Common footer */
.et-footer{
  border-top:1px solid var(--et-line);
  background:var(--et-soft);
  padding:52px 0 30px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--et-muted);
}
.et-footer-inner{width:min(var(--et-container),calc(100% - 36px));margin:auto}
.et-footer-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px;
  padding-bottom:34px;border-bottom:1px solid var(--et-line);
}
.et-footer-brand{display:flex;align-items:center;gap:10px;color:var(--et-ink);font-weight:900}
.et-footer-brand .et-brand-mark{width:34px;height:34px;display:grid;place-items:center}
.et-logo-mark{width:100%;height:100%;display:block}
.et-footer-tagline{margin-top:10px;font-size:12px;letter-spacing:.14em;font-weight:800;color:var(--et-muted);text-transform:uppercase}
.et-footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.et-footer-col h4{margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--et-ink);font-weight:850}
.et-footer-col a{display:block;color:var(--et-muted);text-decoration:none;font-size:14px;margin-bottom:10px}
.et-footer-col a:hover{color:var(--et-blue)}
.et-footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-top:22px;font-size:12px;
}
@media(max-width:700px){
  .et-footer-top{flex-direction:column;gap:26px}
  .et-footer-cols{gap:36px}
}

/* "et" -> lightning swap effect (applied wherever "et" occurs in text) */
.et-swap{position:relative;display:inline-block;vertical-align:-0.08em}
.et-swap .et-txt{display:inline-block;opacity:1;animation:etSwapText 4.5s infinite}
.et-swap .et-icon{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:etSwapIcon 4.5s infinite}
@keyframes etSwapText{0%,55%{opacity:1}65%,90%{opacity:0}100%{opacity:1}}
@keyframes etSwapIcon{0%,55%{opacity:0}65%,90%{opacity:1}100%{opacity:0}}

/* Mobile-only "Let's Talk" entry inside the menu (the header pill is hidden on small screens) */
.et-links a.et-mobile-only{display:none}
@media(max-width:900px){.et-links a.et-mobile-only{display:inline-flex;color:var(--et-blue)}}

/* ============================================================
   ENQUIRY POP-UP (replaces the old Contact page)
   ============================================================ */
html.et-modal-open{overflow:hidden}
.et-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--et-ink)}
.et-modal[hidden]{display:none}
.et-modal-backdrop{position:absolute;inset:0;background:rgba(6,29,82,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:etModalFade .2s ease}
.et-modal-card{position:relative;width:min(640px,100%);max-height:min(92vh,860px);overflow:auto;background:#fff;border-radius:26px;padding:38px 38px 30px;box-shadow:0 30px 80px rgba(6,29,82,.35);animation:etModalRise .25s ease;outline:none}
@keyframes etModalFade{from{opacity:0}to{opacity:1}}
@keyframes etModalRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.et-modal-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:var(--et-soft);color:var(--et-ink);font-size:26px;line-height:1;cursor:pointer;transition:background .15s}
.et-modal-x:hover{background:var(--et-cyanSoft)}
.et-modal-eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--et-blue)}
.et-modal-card h2{font-size:clamp(28px,4vw,36px);line-height:1.06;letter-spacing:-.03em;margin:10px 0 10px;color:var(--et-ink)}
.et-modal-grad{background:linear-gradient(90deg,#1267e8,#19cad8,#6657dc);-webkit-background-clip:text;background-clip:text;color:transparent}
.et-modal-sub{margin:0 0 22px;font-size:14px;line-height:1.55;color:var(--et-muted);max-width:480px}
.et-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.et-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.et-f.et-full{grid-column:1/-1}
.et-f.et-cond{display:none}.et-f.et-cond.show{display:flex}
.et-f label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#78859f}
.et-f input,.et-f select,.et-f textarea{width:100%;font:inherit;font-size:14px;color:var(--et-ink);background:#fbfdff;border:1px solid var(--et-line);border-radius:12px;padding:12px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.et-f textarea{min-height:96px;resize:vertical}
.et-f input:focus,.et-f select:focus,.et-f textarea:focus{border-color:var(--et-cyan);box-shadow:0 0 0 3px rgba(25,202,216,.14)}
.et-submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.et-submit{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:var(--et-blue);color:#fff;border-radius:999px;padding:14px 24px;font:inherit;font-size:14px;font-weight:850;transition:transform .2s}
.et-submit:hover{transform:translateY(-2px)}
.et-note{font-size:12px;color:var(--et-muted);flex:1 1 200px}
.et-direct{margin-top:20px;padding-top:16px;border-top:1px solid var(--et-line);font-size:12.5px;color:var(--et-muted)}
.et-direct a{color:var(--et-blue);font-weight:750;text-decoration:none}
.et-direct a:hover{text-decoration:underline}
.et-modal-done{text-align:center;padding:26px 6px 10px}
.et-modal-done[hidden],.et-modal-body[hidden]{display:none}
.et-done-tick{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;background:linear-gradient(135deg,#1267e8,#19cad8)}
.et-modal-done p{margin:0 auto 22px;max-width:380px;font-size:14px;line-height:1.6;color:var(--et-muted)}
@media(max-width:560px){
  .et-modal{padding:10px;align-items:flex-end}
  .et-modal-card{padding:30px 20px 22px;border-radius:22px;max-height:94vh}
  .et-fgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.et-modal-backdrop,.et-modal-card{animation:none}}

/* === Round 4: unified headings (all pages) === */
html body :is(main,section,header.hero) h2:not(.no-uni){font-size:clamp(30px,4.2vw,56px)!important;line-height:1.08!important;letter-spacing:-.03em!important;font-weight:800!important}
html body :is(section.hero,header.hero) h1:not(.hero-lock){font-size:clamp(38px,5.4vw,72px)!important;line-height:1.04!important;letter-spacing:-.035em!important;font-weight:800!important}
.grad-light{background:linear-gradient(90deg,#9ec5ff,#b8a9ff,#f0b6ff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}

/* === Round 5: heading line 1 strictly black (white on dark) === */
html body :is(main,section,header.hero) :is(h1,h2):not(.no-uni):not(.hero-lock){color:#000!important}
html body :is(main,section,header.hero) :is(h1,h2) .audience,html body :is(main,section,header.hero) :is(h1,h2) .why-first-line,html body :is(main,section,header.hero) :is(h1,h2) .about-gradient-first,html body :is(main,section,header.hero) :is(h1,h2) .hero-line:not(.accent){color:#000!important}
html body :is(.et-products,.belief-half,.social,.vm-strong,.co2,.cb2-over,.support) :is(h1,h2):not(.no-uni):not(.hero-lock):not(.x){color:#fff!important}

/* ===== Round 6: fixed MOBILE type scale (≤600px) — one size per role, all pages =====
   H1 32 · H2 27 · Eyebrow 11 · Description 15 · Content 14 · Card title 20 · List title 15
   Button 13 · Chip 12 · Price 28 · Big numeral 44.  Desktop is untouched. */
@media(max-width:600px){
  html body section.belief-pillars{padding-top:0!important;padding-bottom:0!important}
  html body{--m-h1:32px;--m-h2:27px;--m-desc:15px;--m-content:14px;--m-card:20px}
  /* titles & headings */
  html body :is(main,section,header.hero) h1:not(.hero-lock):not(.no-uni):not(.x):not(.y){font-size:var(--m-h1)!important;line-height:1.12!important;letter-spacing:-.025em!important}
  html body :is(main,section,header.hero) h2:not(.no-uni){font-size:var(--m-h2)!important;line-height:1.15!important;letter-spacing:-.022em!important}
  html body :is(h1,h2) :is(span,strong,em,b),html body :is(.why-first-line,.why-second-line,.audience,.partner-gradient,.about-gradient-first,.about-black-second,.et-products-gradient,.hero-line,.grad-line){font-size:inherit!important;line-height:inherit!important}
  /* eyebrows, tags, kickers */
  html body :is(.eyebrow,.section-tag,.vm-tag,.cb2-t,.co2-pipe-title,.pl-step,.no,.et-product-tag,.pl-tag,.svc2-top small,.eco2-card small,.sp2-card>small,.sp2-card small,.soc-ring small,.vm-path small,.role,.discount){font-size:11px!important;letter-spacing:.14em!important}
  /* descriptions (text directly under headings + long copy) */
  html body :is(.hero-desc,.hero-inner>p,p.lead,.partner-desc,.program-intro p,.et-products-intro p,.why p,.head p,.sp2-head p,.prod-head p,.final p,.final-cta p,.support p,.section-inner>p,.about-story-copy p,.cb2-over p,.co2-copy p,.vm-sub,.founder-copy p,.hero-copy p,.hero p:not(.note)){font-size:var(--m-desc)!important;line-height:1.65!important}
  /* card titles */
  html body :is(.svc2-card h3,.et-product-card strong,.eco2-card strong,.stand h3,.member h3,.pl-main h3,.pg-copy h3,.sp2-i,.vm-path b,.vm-big,.partner h3,.et-products h3){font-size:var(--m-card)!important;line-height:1.25!important}
  html body :is(.sp2-card h3){font-size:16px!important;line-height:1.35!important}
  html body h2.no-uni{font-size:24px!important;line-height:1.15!important}
  /* list item titles */
  html body :is(.sp2-steps b,.cb2-how li b,.cb2-bring li b,.co2-pipe li b,.metric b,.story-sign b){font-size:15px!important;line-height:1.3!important}
  /* content text */
  html body :is(.svc2-card p,.et-product-card p,.eco2-card p,.stand p,.member p,.pl-main p,.pl-main p.for,.pg-copy p,.sp2-steps span,.cb2-how li span,.cb2-bring li span,.co2-pipe li span,.vm-path span,.pl li,.program-row .desc,.sp2-foot,.sp2-foot a,.prod-note,.partner-cta+p,.eco2-with,.eco2-base span,.story-sign small,.stand-rail p){font-size:var(--m-content)!important;line-height:1.6!important}
  html body :is(.pl-main p.for){font-size:12px!important;line-height:1.5!important}
  html body :is(.feature .fl){font-size:11px!important}html body :is(.feature .fv){font-size:13px!important}
  html body :is(.metric span){font-size:11px!important}
  html body :is(.note,.price .was,.pl-act .price){font-size:13px!important}
  /* buttons, links, chips */
  html body :is(.btn,.btn-primary-l,.btn-secondary-l,.hero-cta,.sp2-link,.eco2-go,.et-product-link,.pl-act .open,a.open,.reel-card a){font-size:13px!important}
  html body :is(.svc2-chips span,.cred span,.soc-pill span,.gallery-item span,.eco2-with span){font-size:12px!important}
  /* numbers */
  html body :is(.now,.price b,.pl-act .price b,.pl-price,.pl-act b){font-size:28px!important}
  html body :is(.stand-num){font-size:44px!important}
}

/* ===== Round 6b: mobile gutters, centring and reel swipe row (≤600px) ===== */
@media(max-width:600px){
  html body :is(.inner,.wrap,.nav-inner){width:calc(100% - 40px)!important;max-width:none!important}
  html body .belief-pillars>.inner{width:100%!important}
  html body .social-copy{text-align:center}
  html body .social-copy .soc-links{justify-content:center}
  html body .social-copy>.soc-block{justify-self:center!important;width:100%}
  html body .reel-row{display:flex!important;grid-template-columns:none!important;max-width:none!important;margin:0 -20px!important;padding:6px 20px 14px;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .reel-row::-webkit-scrollbar{display:none}
  html body .reel-card{flex:0 0 76vw;scroll-snap-align:center}
  html body .reel-card iframe{height:520px}
}
@media(max-width:600px){
  html body .soc-rings{display:grid!important;grid-template-columns:repeat(5,1fr);gap:4px!important;justify-items:center}
  html body .soc-ring span{width:46px!important;height:46px!important;font-size:16px!important}
  html body .soc-ring small{font-size:10px!important;letter-spacing:.02em!important}
}

/* ===== WhatsApp chat button (all pages) ===== */
.et-wa{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:10px;padding:0;border-radius:999px;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(7,94,84,.35);transition:transform .2s ease,box-shadow .2s ease}
.et-wa:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(7,94,84,.45)}
.et-wa svg{width:56px;height:56px;padding:14px;flex:none}
.et-wa span{display:none;font:800 14px/1 Inter,system-ui,sans-serif;padding-right:20px;white-space:nowrap}
@media(min-width:900px){.et-wa span{display:block}}
@media(max-width:600px){.et-wa{right:14px;bottom:14px}.et-wa svg{width:52px;height:52px;padding:13px}}

/* Shared logo image (header + footer) */
.et-brand-img{display:block;height:38px;width:auto}
.et-footer-logo{display:block;height:44px;width:auto}
@media(max-width:600px){.et-brand-img{height:32px}}

/* Dark footer (all pages) */
.et-footer{background:#061d52;border-top:0;color:#9db4de}
.et-footer-top{border-bottom-color:rgba(255,255,255,.14)}
.et-footer-col h4{color:#fff}
.et-footer-col a{color:#b9cdf0}
.et-footer-col a:hover{color:#5fe8ea}
.et-footer-bottom{color:#8ea6d2}

/* Form validation messages */
.et-err{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:#c62828;line-height:1.3}
.et-f [aria-invalid="true"]{border-color:#e53935!important;box-shadow:0 0 0 3px rgba(229,57,53,.12)!important}