/* contact: page-specific styles ported from reference/ets-contact.html. Shared rules live in base.css and chrome.css, tokens in tokens.css. */
:root{ --horizon:#1C3E63;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);line-height:1.6}
.cy{color:var(--cyan)}
@media(max-width:768px){.wrap{padding:0 20px}body{font-size:16px}}
.btn-dark{background:var(--on-flood);color:var(--ink)}
.btn-dark:hover{background:#0A2836}
.link{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--cyan);
  transition:gap var(--t-fast) var(--e)}
.link:hover{gap:14px}

/* ---------- NAV ---------- */

/* ---------- HERO SCENE ---------- */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;overflow:hidden;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-1}
.scene svg{width:100%;height:100%;display:block}
.hero-copy{position:relative;text-align:center;padding:126px var(--margin) 0;max-width:1000px}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:1.06;letter-spacing:-.03em}
.hero .sub{margin:var(--s5) auto 0;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:400;
  color:var(--muted);max-width:60ch}
.hero .acts{margin-top:var(--s7)}
.badges{position:relative;margin-top:auto;padding:0 var(--margin) clamp(40px,7vh,78px);
  display:flex;gap:clamp(26px,6vw,88px);justify-content:center;flex-wrap:wrap;width:100%}
.badge{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:210px}
.badge b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
@media(max-width:900px){
  .hero-copy{padding-top:136px}
  .badges{gap:22px;padding-bottom:42px}
  .badge{max-width:31%;gap:9px}.badge b{font-size:11px}.badge svg{width:42px;height:48px}
}
@keyframes net{to{stroke-dashoffset:-100}}
.net{stroke-dasharray:7 93;animation:net 6s linear infinite}
@keyframes moonrise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.orb-in{animation:moonrise 1.8s cubic-bezier(.16,1,.3,1) both .1s}
.orb-pos{transform:translateY(16px)}
@media (min-width:821px) and (max-height:800px){.orb-pos{transform:translateY(40px)}}
@supports (animation-timeline:scroll()){
  @keyframes sink{to{transform:translateY(var(--d))}}
  .par{animation:sink linear both;animation-timeline:scroll(root);animation-range:0 100svh}
}
@media (prefers-reduced-motion:reduce){.net,.orb-in,.par{animation:none!important}}
@media (max-height:800px){
  .hero-copy{padding-top:104px}
  .hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
  .hero .sub{font-size:1.02rem;margin-top:var(--s4)}
  .hero .acts{margin-top:var(--s5)}
}
@keyframes ps1{from{stroke-dashoffset:0}to{stroke-dashoffset:-186.9px}}
@keyframes tr1{from{stroke-dashoffset:78.5px}to{stroke-dashoffset:-108.4px}}
.p1{animation:ps1 7.5s linear infinite}
.t1{animation:tr1 7.5s linear infinite}
@keyframes fl1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-560px,0,0)}}
@keyframes bb1{from{transform:translate3d(0,-1.6px,0)}to{transform:translate3d(0,1.6px,0)}}
.w1{animation:fl1 50s linear infinite}
.b1{animation:bb1 7.0s ease-in-out infinite alternate}
@keyframes ps2{from{stroke-dashoffset:0}to{stroke-dashoffset:-119.3px}}
@keyframes tr2{from{stroke-dashoffset:50.1px}to{stroke-dashoffset:-69.2px}}
.p2{animation:ps2 10.5s linear infinite}
.t2{animation:tr2 10.5s linear infinite}
@keyframes fl2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-476px,0,0)}}
@keyframes bb2{from{transform:translate3d(0,-2.3px,0)}to{transform:translate3d(0,2.3px,0)}}
.w2{animation:fl2 42s linear infinite}
.b2{animation:bb2 8.3s ease-in-out infinite alternate}
@keyframes fl3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-406px,0,0)}}
@keyframes bb3{from{transform:translate3d(0,-3.0px,0)}to{transform:translate3d(0,3.0px,0)}}
.w3{animation:fl3 35s linear infinite}
.b3{animation:bb3 9.6s ease-in-out infinite alternate}
@keyframes ps4{from{stroke-dashoffset:0}to{stroke-dashoffset:-117.7px}}
@keyframes tr4{from{stroke-dashoffset:49.4px}to{stroke-dashoffset:-68.3px}}
.p4{animation:ps4 9s linear infinite}
.t4{animation:tr4 9s linear infinite}
@keyframes fl4{from{transform:translate3d(0,0,0)}to{transform:translate3d(-350px,0,0)}}
@keyframes bb4{from{transform:translate3d(0,-3.7px,0)}to{transform:translate3d(0,3.7px,0)}}
.w4{animation:fl4 29s linear infinite}
.b4{animation:bb4 10.9s ease-in-out infinite alternate}
@keyframes fl5{from{transform:translate3d(0,0,0)}to{transform:translate3d(-302px,0,0)}}
@keyframes bb5{from{transform:translate3d(0,-4.4px,0)}to{transform:translate3d(0,4.4px,0)}}
.w5{animation:fl5 24s linear infinite}
.b5{animation:bb5 12.2s ease-in-out infinite alternate}
@keyframes fl6{from{transform:translate3d(0,0,0)}to{transform:translate3d(-260px,0,0)}}
@keyframes bb6{from{transform:translate3d(0,-5.1px,0)}to{transform:translate3d(0,5.1px,0)}}
.w6{animation:fl6 19s linear infinite}
.b6{animation:bb6 13.5s ease-in-out infinite alternate}
@keyframes fl7{from{transform:translate3d(0,0,0)}to{transform:translate3d(-224px,0,0)}}
@keyframes bb7{from{transform:translate3d(0,-5.8px,0)}to{transform:translate3d(0,5.8px,0)}}
.w7{animation:fl7 15s linear infinite}
.b7{animation:bb7 14.8s ease-in-out infinite alternate}
.glow{animation:pulse 11s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.82}to{opacity:1}}

/* ---------- FLOOD ---------- */
.flood{position:relative;background:var(--flood);color:var(--on-flood);overflow:hidden;
  padding:var(--s9) 0 var(--s8)}
.flood h2{font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.02em;line-height:1.18}
.flood p{font-size:16px;line-height:1.55}
.flood h2{color:var(--on-flood);max-width:16ch}
.flood p{color:#0A2A38}
.flood-top,.flood-bot{position:absolute;left:0;right:0;width:100%;display:block;height:52px}
.flood-top{top:-1px}.flood-bot{bottom:-1px}
.flood-in{position:relative;display:grid;grid-template-columns:.9fr 1.35fr;gap:var(--s8);align-items:center}
.flood .stat{font-size:clamp(3rem,6vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:.95}
.flood .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s8)}
.flood .statrow p{font-size:15px;line-height:1.45;margin-top:6px}
@media(max-width:900px){.flood{padding:var(--s8) 0 var(--s7)}.flood-in{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------- CURRENTS ---------- */
.currents{position:relative;background:var(--base);padding:var(--s11) 0 var(--s10);overflow:hidden}
.cur-head{max-width:640px;margin-bottom:var(--s9)}
.cur-wrap{position:relative}
.cur-wrap svg{width:100%;height:auto;display:block}
.cur-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s7);margin-top:var(--s9)}
.cur-list h3{margin-bottom:var(--s3)}
.cur-list .n{display:block;font-size:14px;font-weight:600;color:var(--cyan);margin-bottom:10px}
.cur-list p{font-size:15.5px;color:var(--muted);line-height:1.6}
@media(max-width:980px){.cur-list{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media(max-width:600px){.cur-list{grid-template-columns:1fr}.cur-wrap{display:none}}

/* ---------- GALLERY ---------- */
.gallery{background:var(--deep);padding:var(--s11) 0}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s7);
  margin-bottom:var(--s8);flex-wrap:wrap}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.gal{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  transition:transform var(--t-mid) var(--e)}
.gal:hover{transform:translateY(-5px)}
.gal .im{aspect-ratio:16/11;overflow:hidden;background:var(--base)}
.gal .im img{width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform 900ms var(--e)}
.gal:hover .im img{transform:scale(1.05)}
.gal .bd{padding:var(--s5) var(--s5) var(--s6)}
.gal .k{font-size:13.5px;font-weight:600;color:var(--cyan);display:block;margin-bottom:8px}
.gal p{font-size:15px;color:var(--muted);line-height:1.6;margin-top:10px}
@media(max-width:940px){.gal-grid{grid-template-columns:1fr}}

/* ---------- SOPROS ---------- */
.sopros{position:relative;background:var(--surface-2);padding:var(--s11) 0;overflow:hidden}
.sop-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.sop-feat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6);margin-top:var(--s7)}
.sop-feat div{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.sop-feat svg{flex-shrink:0;margin-top:5px}
.sop-shot{border-radius:var(--r-lg);overflow:hidden;background:var(--base)}
@media(max-width:940px){.sop-in{grid-template-columns:1fr;gap:var(--s7)}}
@media(max-width:520px){.sop-feat{grid-template-columns:1fr}}

/* ---------- LUMEN ---------- */
.lumen{position:relative;background:var(--base);padding:var(--s11) 0;overflow:hidden}
.lum-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.free{font-size:clamp(4rem,10vw,8rem);font-weight:800;letter-spacing:-.06em;line-height:.85;
  color:var(--cyan)}
.lum-shot{border-radius:var(--r-lg);overflow:hidden;background:var(--deep)}
@media(max-width:940px){.lum-in{grid-template-columns:1fr;gap:var(--s7)}}

/* ---------- CTA + FOOTER ---------- */
.cta{position:relative;background:var(--deep);padding:var(--s11) 0 var(--s10);text-align:center;
  overflow:hidden}
.cta h2{max-width:18ch;margin:0 auto}
.cta .lead{max-width:56ch;margin:var(--s5) auto 0}
.cta .btn{margin-top:var(--s7)}

.rv{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

.phero{position:relative;min-height:0;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(180deg,#040A18 0%,#06131F 62%,#00060C 100%)}
.phero-in{position:relative;padding:150px 0 var(--s9);max-width:760px}
.phero h1{font-size:clamp(2.3rem,5.2vw,4.2rem);line-height:1.06;letter-spacing:-.03em}
.phero .sub{margin-top:var(--s5);font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:56ch}
.phero .acts{margin-top:var(--s7)}
.form-sec{background:var(--deep);padding:var(--s11) 0}
.form-in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--s9);align-items:start}
.f-field{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s6)}
.f-field label{font-size:15px;font-weight:600;color:var(--ink)}
.f-field input{font-family:var(--sans);font-size:17px;color:var(--ink);background:var(--surface);
  border:0;border-radius:var(--r);padding:16px 18px;transition:box-shadow var(--t-fast) var(--e)}
.f-field input::placeholder{color:var(--dim)}
.f-field input:focus{outline:none;box-shadow:0 0 0 2px var(--cyan)}
.f-help{font-size:14px;color:var(--dim)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.check{display:flex;gap:13px;align-items:center;background:var(--surface);border-radius:var(--r);
  padding:16px 18px;cursor:pointer;transition:background var(--t-fast) var(--e)}
.check:hover{background:var(--surface-2)}
.check input{appearance:none;width:22px;height:22px;border-radius:6px;background:var(--base);
  flex-shrink:0;position:relative;cursor:pointer;transition:background var(--t-fast) var(--e)}
.check input:checked{background:var(--cyan)}
.check input:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #001018;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.check input:focus-visible{outline:2px solid var(--cyan-pale);outline-offset:3px}
.check span{font-size:16px;line-height:1.35}
.next{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s6)}
.next div{display:flex;gap:14px;align-items:flex-start}
.next b{display:block;font-size:16px;font-weight:600}
.next p{font-size:15px;color:var(--muted);margin-top:4px}
.next .num{width:28px;height:28px;border-radius:var(--r-pill);background:var(--surface);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
@media(max-width:940px){.form-in{grid-template-columns:1fr;gap:var(--s7)}}
@media(max-width:600px){.checks{grid-template-columns:1fr}}

/* ---- the CTA lives in the drawer on small screens ---- */
@media(max-width:480px){
  .hero h1{font-size:clamp(2rem,9.2vw,2.6rem)}
  .hero .sub{font-size:1rem}
  .hero-copy{padding-top:112px}
}

.req{color:var(--cyan);font-weight:700;margin-left:2px}
.opt{color:var(--dim);font-weight:400;font-size:.85em;letter-spacing:0;text-transform:none;margin-left:6px}

.form-in{display:block;max-width:680px;margin:0 auto}
.form-sec form{width:100%}
.phero-in h1{text-align:center}
.phero .wrap{display:flex;justify-content:center}

/* ---- top rail: SOPros carries its mark, Lumen carries its glow ---- */

/* ---- brand mark, upper left ---- */

.consent{margin-top:18px;max-width:52ch}
.consent-row{display:flex;gap:10px;align-items:flex-start;line-height:1.5;font-size:.8125rem;font-weight:400;color:var(--dim)}
.consent-row span{font-weight:400!important;letter-spacing:0}
.consent .req{font-size:.9em}
.consent-row input{margin-top:2px;flex:none;width:15px;height:15px;accent-color:#3CCCF0}
.consent-row a{color:#3CCCF0;text-decoration:underline;text-underline-offset:3px}

.phero-sub{margin:18px auto 0;max-width:46ch;text-align:center;font-size:1.0625rem;color:var(--muted)}