/* v13 — added mobile/PWA app-feel enhancements at end */
/* ================================================================
   KOASTAL ECO v5 — Design System
   Exact v9 tokens: Playfair Display + DM Sans · Off-white · Navy · Green
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root{
  --ndk:#142840;--nvy:#1C3A5C;--n2:#24486E;--n3:#2D5580;
  --grn:#2E8A60;--g2:#247550;--g3:#3AA070;--gp:#D4EDE0;
  --ow:#F4F1EB;--ow2:#EBE7DF;--ow3:#DDD8CE;
  --ink:#1A2E3E;--ik2:#2D4155;--ik3:#4A6070;--wht:#FFFFFF;
  --rdk:rgba(28,58,92,0.12);--rg:rgba(46,138,96,0.28);
  --fh:'Playfair Display',Georgia,serif;
  --fb:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--ow);color:var(--ink);overflow-x:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--ndk)}
::-webkit-scrollbar-thumb{background:var(--grn);border-radius:2px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* NAV */
nav#mainNav{position:fixed;top:0;left:0;right:0;z-index:500;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:var(--ndk);border-bottom:1px solid rgba(255,255,255,0.07);transition:box-shadow .3s}
nav#mainNav.stuck{box-shadow:0 4px 32px rgba(20,40,64,0.5)}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo img{height:36px;width:auto}
.nav-r{display:flex;align-items:center;gap:2rem}
.nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none}
.nav-links a{font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gp)}
.ncta{background:var(--grn)!important;color:var(--wht)!important;padding:.48rem 1.15rem;border-radius:3px;font-weight:600!important;transition:background .2s!important}
.ncta:hover{background:var(--g2)!important}
.lsw{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:3px}
.lb{padding:.22rem .6rem;font-size:.58rem;letter-spacing:.1em;color:rgba(255,255,255,.45);background:transparent;border:none;cursor:pointer;border-radius:14px;transition:all .2s;font-weight:600;text-transform:uppercase}
.lb.active{background:var(--grn);color:var(--wht)}
.lb:hover:not(.active){color:var(--wht)}
.nav-ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-ham span{display:block;width:22px;height:2px;background:#fff;transition:.2s}

/* PAGE HERO (inner pages) */
.page-hero{background:var(--ndk);padding:130px 5vw 6rem;position:relative;overflow:hidden;border-bottom:3px solid var(--grn)}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(46,138,96,.12),transparent 60%),linear-gradient(150deg,var(--ndk) 0%,var(--nvy) 60%,var(--ndk) 100%);pointer-events:none}
.page-hero-inner{position:relative;z-index:1;max-width:800px}
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1.5rem}
.breadcrumb a{color:rgba(255,255,255,.45);transition:color .2s}
.breadcrumb a:hover{color:var(--gp)}
.breadcrumb span{opacity:.35}

/* TYPOGRAPHY SYSTEM */
.stag{display:flex;align-items:center;gap:.7rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.2rem;font-weight:600}
.stag::before{content:'';width:22px;height:1px}
.sh1{font-family:var(--fh);font-size:clamp(2rem,4vw,3.6rem);font-weight:400;line-height:1.07;color:var(--wht);margin-bottom:1.2rem}
.sh1 em{font-style:italic;color:var(--gp)}
.sh2{font-family:var(--fh);font-size:clamp(1.9rem,3.5vw,3.3rem);font-weight:400;line-height:1.12}
.sh2 em{font-style:italic}
.body-p{font-size:.95rem;line-height:1.82;font-weight:300}

/* SECTIONS */
.sp{padding:7vmin 5vw}
.spl{padding:10vmin 5vw}

/* REVEALS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.reveal.vis{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-20px);transition:opacity .7s .15s,transform .7s .15s}
.reveal-l.vis{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(30px);transition:opacity .8s .2s,transform .8s .2s}
.reveal-r.vis{opacity:1;transform:none}

/* BUTTONS */
.btn-g{display:inline-flex;align-items:center;gap:.6rem;background:var(--grn);color:var(--wht);padding:.92rem 2.1rem;font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-radius:3px;transition:background .2s,transform .2s;border:none;cursor:pointer;font-family:var(--fb)}
.btn-g:hover{background:var(--g2);transform:translateY(-2px)}
.btn-gh{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.55);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;transition:color .2s}
.btn-gh:hover{color:var(--gp);border-color:var(--gp)}
.btn-nvy{display:inline-flex;align-items:center;gap:.6rem;background:var(--nvy);color:var(--wht);padding:.88rem 2rem;font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-radius:3px;transition:background .2s;border:none;cursor:pointer;font-family:var(--fb)}
.btn-nvy:hover{background:var(--n2)}
.btn-out{display:inline-flex;align-items:center;gap:.5rem;color:var(--nvy);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(28,58,92,.3);padding-bottom:2px;transition:color .2s}
.btn-out:hover{color:var(--grn);border-color:var(--grn)}

/* STATS BAR */
.stats{background:var(--nvy);display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--grn)}
.sc{padding:2.2rem 2rem;border-right:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.sc:last-child{border-right:none}
.sc.vis{opacity:1;transform:none}
.sv{font-family:var(--fh);font-size:2.8rem;font-weight:400;color:var(--gp);line-height:1}
.su{font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--g3);margin-top:.3rem;font-weight:600}
.sd{font-size:.78rem;color:rgba(255,255,255,.68);margin-top:.5rem;font-weight:300}

/* LOSS PANEL */
.losstrack{height:7px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.lossbar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--n3),var(--grn));width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1)}

/* STEP CARDS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rdk)}
.step{background:var(--n2);padding:2.5rem 2rem 3rem;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s,background .3s}
.step:hover{background:var(--n3)}
.step.vis{opacity:1;transform:none}
.stepn{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:2rem;font-weight:600}
.stepico{width:52px;height:52px;border-radius:50%;border:1px solid rgba(46,138,96,.35);background:rgba(46,138,96,.12);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.5rem}
.stepname{font-family:var(--fh);font-size:1.28rem;font-weight:400;color:var(--wht);margin-bottom:.8rem}
.stepdesc{font-size:.84rem;line-height:1.76;color:rgba(255,255,255,.7);font-weight:300}
.stepspec{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.6rem;letter-spacing:.1em;color:rgba(255,255,255,.35);font-weight:500}

/* DEAL BREAKDOWN */
.deal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.deal-col{padding:2rem 1.8rem}
.deal-col.opex{background:rgba(46,138,96,.12);border-left:2px solid rgba(46,138,96,.4)}
.deal-col.profit{background:rgba(46,138,96,.22);border-left:2px solid var(--grn)}
.deal-col.revenue{background:var(--nvy)}
.deal-col-label{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.8rem;font-weight:600}
.deal-col.opex .deal-col-label,.deal-col.profit .deal-col-label{color:var(--g3)}
.deal-pct{font-family:var(--fh);font-size:2.6rem;color:var(--wht);line-height:1}
.deal-col.opex .deal-pct,.deal-col.profit .deal-pct{color:var(--gp)}
.deal-desc{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:.6rem;font-weight:300;line-height:1.6}
.deal-col.opex .deal-desc,.deal-col.profit .deal-desc{color:rgba(255,255,255,.6)}

/* BEN GRID */
.bengrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06)}
.bencard{background:var(--n2);padding:2.5rem 2rem;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s,background .3s}
.bencard:hover{background:var(--n3)}
.bencard.vis{opacity:1;transform:none}
.benico{font-size:1.8rem;margin-bottom:1.2rem;display:block}
.bentitle{font-family:var(--fh);font-size:1.12rem;font-weight:400;color:var(--wht);margin-bottom:.7rem}
.bendesc{font-size:.83rem;line-height:1.74;color:rgba(255,255,255,.76);font-weight:300}

/* FINCARD */
.fincard{background:var(--nvy);border-radius:4px;padding:2.5rem;opacity:0;transform:translateY(24px);transition:opacity .7s .25s,transform .7s .25s}
.fincard.vis{opacity:1;transform:none}
.fintitle{font-family:var(--fh);font-size:1.5rem;font-weight:400;color:var(--wht);margin-bottom:.25rem}
.finsub{font-size:.72rem;color:rgba(255,255,255,.35);margin-bottom:2rem;font-weight:300}
.finrow{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.finrow:last-of-type{border-bottom:none}
.finrl{font-size:.82rem;color:rgba(255,255,255,.68);font-weight:300}
.finrv{font-family:var(--fh);font-size:1.45rem;font-weight:400;color:var(--gp)}
.finrv small{font-family:var(--fb);font-size:.7rem;color:rgba(255,255,255,.35);margin-left:.3rem;font-weight:300}
.fin0{color:var(--g3)!important}
.finnote{margin-top:1.4rem;font-size:.7rem;color:rgba(255,255,255,.28);line-height:1.6;font-style:italic}

/* BOOT PHASES */
.bphase{display:flex;gap:1.4rem;padding:2rem 0;border-bottom:1px solid var(--rdk);opacity:0;transform:translateX(-18px);transition:opacity .6s,transform .6s}
.bphase:first-child{border-top:1px solid var(--rdk)}
.bphase.vis{opacity:1;transform:none}
.bletter{font-family:var(--fh);font-size:3.5rem;font-weight:400;line-height:1;color:rgba(28,58,92,.1);flex-shrink:0;width:2.5rem;text-align:center}
.bptag{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nvy);margin-bottom:.4rem;font-weight:600}
.bpdesc{font-size:.88rem;line-height:1.72;color:var(--ink);font-weight:300}

/* QUOTE */
.aq{background:var(--nvy);border:1px solid rgba(255,255,255,.09);border-left:4px solid var(--grn);border-radius:4px;padding:3rem;position:relative;overflow:hidden}
.aq::before{content:'"';font-family:var(--fh);font-size:8rem;line-height:.75;color:rgba(46,138,96,.12);position:absolute;top:.5rem;left:1rem;pointer-events:none}
.aqtext{font-family:var(--fh);font-size:1.5rem;font-weight:400;font-style:italic;line-height:1.5;color:var(--wht);position:relative;z-index:1}
.aqattr{margin-top:1.6rem;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--g3);font-weight:600}

/* ABOUT CRED GRID */
.credgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:2.5rem;background:var(--rdk)}
.credcell{background:var(--ow);padding:1.4rem}
.credv{font-family:var(--fh);font-size:2.2rem;font-weight:400;color:var(--nvy);line-height:1}
.credl{font-size:.74rem;color:var(--ik3);margin-top:.3rem;line-height:1.5;font-weight:300}

/* GALLERY */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;height:320px;overflow:hidden}
.photo-cell{position:relative;overflow:hidden;background:var(--n2)}
.photo-cell::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,40,64,.7))}
.photo-cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.photo-cell:hover img{transform:scale(1.04)}

/* PORS ANIMATION */
.pors-scene{height:550vh;position:relative}
.pors-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--ow);padding-top:3rem}
.pors-progress{position:absolute;top:0;left:0;right:0;height:3px;background:var(--rdk)}
.pors-fill{height:100%;background:linear-gradient(90deg,var(--n2),var(--grn));width:0;transition:width .04s linear}
.pors-info{position:absolute;top:5.5rem;left:0;right:0;text-align:center;pointer-events:none}
.pors-stage-lbl{font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--nvy);opacity:0;transition:opacity .35s;display:block;margin-bottom:4px}
.pors-title{font-family:var(--fh);font-size:clamp(.95rem,2vw,1.3rem);font-weight:400;color:var(--nvy);opacity:0;transform:translateY(5px);transition:opacity .35s,transform .35s;display:block;margin-bottom:3px}
.pors-desc{font-size:.72rem;color:var(--ik3);opacity:0;transform:translateY(4px);transition:opacity .35s .07s,transform .35s .07s;display:block;font-weight:300}
.pors-stage-lbl.on,.pors-title.on,.pors-desc.on{opacity:1;transform:translateY(0)}
.pors-wrap{width:min(900px,95vw);margin:0 auto}
.pors-wrap svg{width:100%;height:auto;overflow:visible}
.pors-comp{opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.pors-dot{opacity:0}
.pors-done{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .5s;white-space:nowrap}
.pors-done.on{opacity:1}
.pors-badge{display:inline-flex;align-items:center;gap:8px;background:var(--nvy);color:rgba(212,237,224,.9);border-radius:3px;padding:9px 20px;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-left:3px solid var(--grn)}
.pors-hint{position:absolute;bottom:2.2rem;right:3rem;display:flex;align-items:center;gap:8px;color:var(--ik3);font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:opacity .4s}
.pors-hbar{width:1px;height:36px;background:linear-gradient(to bottom,var(--grn),transparent);animation:hpulse 1.8s ease-in-out infinite}
@keyframes hpulse{0%,100%{opacity:.3}50%{opacity:1}}

/* FORM */
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem}
.cform-full{grid-column:1/-1}
.cfield{display:flex;flex-direction:column;gap:.5rem}
.cfield label{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600}
.cfield label .req{color:var(--gp);margin-left:2px}
.cfield input,.cfield select,.cfield textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--wht);padding:.82rem 1rem;font-size:.88rem;font-family:var(--fb);border-radius:3px;outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{border-color:var(--grn);background:rgba(255,255,255,.08)}
.cfield input::placeholder,.cfield textarea::placeholder{color:rgba(255,255,255,.2)}
.cfield select option{background:#1a2e3e;color:#fff}
.cfield textarea{resize:vertical;min-height:90px}
.cform-check{display:flex;align-items:flex-start;gap:.75rem;margin:1.6rem 0 1.8rem}
.cform-check input[type="checkbox"]{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--grn);cursor:pointer}
.cform-check label{font-size:.8rem;color:rgba(255,255,255,.42);line-height:1.6;cursor:pointer}
.cform-msg{display:none;margin-top:1.4rem;padding:1rem 1.4rem;border-radius:3px;font-size:.85rem;line-height:1.5}
.cform-msg.err{background:rgba(200,55,55,.12);border:1px solid rgba(200,55,55,.28);color:#f99}
.cform-msg.ok{background:rgba(46,138,96,.12);border:1px solid rgba(46,138,96,.3);color:#7ee8b0}

/* CALC (solutions page) */
.calc-panel{background:var(--nvy);border-radius:4px;padding:2.5rem}
.calc-row{margin-bottom:1.4rem}
.calc-lbl{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;display:flex;justify-content:space-between;margin-bottom:.6rem}
.calc-lbl span{color:var(--gp);font-weight:400;font-family:var(--fh)}
input[type=range]{width:100%;accent-color:var(--grn);cursor:pointer}
.calc-results{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07);margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.07)}
.calc-res{padding:1.1rem;background:rgba(255,255,255,.03)}
.calc-res.full{grid-column:1/-1;background:rgba(46,138,96,.1)}
.calc-res-lbl{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);font-weight:600;margin-bottom:.3rem}
.calc-res-val{font-family:var(--fh);font-size:1.4rem;font-weight:400;color:var(--gp)}

/* MODAL */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(20,40,64,.7);z-index:1000;align-items:center;justify-content:center}
.modal-ov.open{display:flex}
.modal{background:var(--ow);border-radius:4px;padding:2.5rem 2rem;max-width:420px;width:90%;text-align:center;border-top:3px solid var(--grn)}
.modal h3{font-family:var(--fh);font-size:1.4rem;font-weight:400;color:var(--nvy);margin-bottom:.6rem}
.modal p{font-size:.9rem;color:var(--ik2);line-height:1.65;margin-bottom:1.5rem;font-weight:300}
.modal-close{background:var(--grn);color:#fff;border:none;border-radius:3px;padding:.65rem 1.8rem;font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;font-family:var(--fb);transition:background .2s}
.modal-close:hover{background:var(--g2)}

/* STAGE SPEC TABLE */
.stage-tbl{border:1px solid var(--rdk);border-top:3px solid var(--nvy)}
.stage-row{display:grid;grid-template-columns:60px 1fr 1fr;border-bottom:1px solid var(--rdk)}
.stage-row:last-child{border-bottom:none}
.stage-num{background:var(--nvy);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;font-family:var(--fh);font-size:1.8rem;font-weight:400;color:var(--gp);line-height:1}
.stage-body{padding:2rem;border-right:1px solid var(--rdk)}
.stage-stag{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grn);margin-bottom:.5rem;font-weight:600}
.stage-spec-panel{padding:2rem;background:var(--ow2)}
.spec-row{display:flex;justify-content:space-between;font-size:.82rem;padding:.45rem 0;border-bottom:1px solid var(--rdk)}
.spec-row:last-child{border-bottom:none}
.spec-lbl{color:var(--ik3);font-weight:300}
.spec-val{color:var(--nvy);font-weight:500}

/* FLOAT BTNS */
.float-btns{position:fixed;right:1.4rem;bottom:1.6rem;display:flex;flex-direction:column;gap:10px;z-index:400}
.float-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 16px rgba(20,40,64,.35);transition:transform .15s;border:none;cursor:pointer;text-decoration:none}
.float-btn:hover{transform:translateY(-3px)}
.float-btn svg{width:22px;height:22px}
.float-wa{background:#25d366}
.float-mail{background:var(--grn)}

/* FOOTER */
footer{background:var(--ndk);border-top:1px solid rgba(255,255,255,.07);padding:2.8rem 5vw}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2rem}
.ftn{font-family:var(--fh);font-size:1rem;font-weight:400;color:var(--wht)}
.ftreg{font-size:.56rem;letter-spacing:.12em;color:rgba(255,255,255,.25);margin-top:.25rem}
.ftmid{font-size:.76rem;color:rgba(255,255,255,.3);text-align:center;line-height:1.7;font-weight:300}
.ftr{text-align:right}
.ftr a{color:var(--g3);font-size:.82rem;transition:color .2s}
.ftr a:hover{color:var(--gp)}
.ftcopy{font-size:.65rem;color:rgba(255,255,255,.2);margin-top:.3rem}

/* ANIMATIONS */
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}

/* MOBILE */
@media(max-width:960px){
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .bengrid{grid-template-columns:1fr 1fr}
  .deal-grid{grid-template-columns:1fr}
  .cform-grid{grid-template-columns:1fr}
  .cform-full{grid-column:1}
  .footer-inner{flex-direction:column;text-align:center}
  .ftr{text-align:center}
  .nav-links{display:none}
  .lsw{display:none}
  .nav-ham{display:flex}
  .nav-links.open{display:flex;position:fixed;inset:0;background:var(--ndk);flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;z-index:999}
  .nav-links.open a{font-size:1.2rem}
  .stage-row{grid-template-columns:1fr}
  .stage-num{padding:1rem 2rem;justify-content:flex-start}
  .stage-body{border-right:none;border-bottom:1px solid var(--rdk)}
  .photo-grid{grid-template-columns:1fr;height:auto}
  .photo-cell{height:220px}
  .credgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .bengrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .calc-results{grid-template-columns:1fr}
  .calc-res.full{grid-column:1}
}

/* PROBLEM SECTION */
.prob{background:var(--nvy);}
.prob .stag{color:var(--g3);}
.prob .stag::before{background:var(--g3);}
.prob .sh2{color:var(--wht);}
.prob .sh2 em{color:var(--gp);}
.prob-inner{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;}
.prob-text p{font-size:.95rem;line-height:1.82;color:rgba(255,255,255,.84);margin-top:1.5rem;font-weight:300;}
.losspanel{background:var(--n2);border:1px solid rgba(255,255,255,.09);border-radius:4px;padding:2.2rem;opacity:0;transform:translateX(30px);transition:opacity .8s .2s,transform .8s .2s;}
.losspanel.vis{opacity:1;transform:none;}
.losstitle{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g3);margin-bottom:1.8rem;font-weight:600;}
.lossrow{margin-bottom:1.3rem;}
.losshead{display:flex;justify-content:space-between;font-size:.82rem;color:rgba(255,255,255,.8);margin-bottom:.5rem;font-weight:300;}
.losshead b{font-size:.72rem;color:var(--gp);font-weight:600;}
.lossnote{margin-top:1.8rem;padding:1rem 1.3rem;border-left:3px solid var(--grn);background:rgba(46,138,96,.1);font-size:.8rem;line-height:1.65;color:rgba(255,255,255,.8);font-weight:300;}
.lossnote strong{color:var(--gp);font-weight:600;}

/* HOW IT WORKS / STEP SECTION wrapper */
.hiw{background:var(--ow);border-top:1px solid var(--rdk);}

/* BEN HEADER */
.ben-hd{max-width:700px;margin:0 auto 4rem;text-align:center;}
.ben-hd p{margin-top:1.2rem;font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.78);font-weight:300;}

/* VIAL ANIMATION */
@keyframes sheen{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}

/* Mobile fixes */
@media(max-width:960px){
  .prob-inner{grid-template-columns:1fr;gap:3rem;}
}

/* ── MOBILE PORS OPTIMISATION ── */
@media(max-width:768px){
  .pors-scene{height:220vh!important}
  .pors-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pors-wrap svg{min-width:600px;height:auto}
  .pors-info{top:4rem}
  .pors-stage-lbl{font-size:.55rem}
  .pors-title{font-size:.95rem}
  .pors-desc{font-size:.66rem}
  .pors-hint{display:none}
  .pors-badge{font-size:.58rem;padding:7px 14px}
  /* Hero responsive */
  section[aria-label="Hero"]{grid-template-columns:1fr!important;gap:1.5rem!important;padding-bottom:3rem!important}
  #heroVial{display:flex;flex-direction:row!important;gap:2rem!important;padding:2rem 0!important;justify-content:center;flex-wrap:wrap}
  #heroVial #vialPct{font-size:5rem!important}
  #heroVial .fintitle-box{max-width:100%!important;width:100%!important}
  /* Calculator grid mobile */
  #cpoCalc > div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .pors-scene{height:180vh!important}
  #heroVial #vialPct{font-size:4rem!important}
}
/* ── HERO MESH BLOBS ── */
.mesh-blob{position:absolute;border-radius:50%;pointer-events:none}

/* ════════════════════════════════════════════════════════════════════
   v13 MOBILE / APP-FEEL ENHANCEMENTS
   Appended Apr 2026. All rules ADDITIVE — they refine existing v10
   behaviour without breaking desktop layout.
   ════════════════════════════════════════════════════════════════════ */

/* ── Global app-feel polish ─────────────────────────────────────── */
/* Kill iOS/Android grey tap highlight on tappable elements */
*{-webkit-tap-highlight-color:transparent}
/* Crisper text rendering on mobile retina screens */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* iPhone notch / Dynamic Island: paint the safe-area-inset-top with the same navy as the nav,
   so the nav appears to extend behind the status bar (with status-bar-style="black-translucent"). */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:env(safe-area-inset-top, 0px);
  background:var(--ndk);
  z-index:501;
  pointer-events:none;
}

/* ── iOS Safari form-input zoom-on-focus fix ─────────────────────── */
/* iOS Safari zooms in when an input has font-size < 16px. Lock to 16px on mobile. */
@media(max-width:960px){
  .cfield input,.cfield select,.cfield textarea,
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="number"],input[type="search"],input[type="url"],
  select,textarea{
    font-size:16px !important;
  }
}

/* ── Tap-target sizing (iOS HIG = 44pt, Material = 48dp) ────────── */
@media(max-width:960px){
  /* Lang switcher buttons — boost from .22rem padding to comfortable taps */
  .lb{padding:.55rem 1rem;font-size:.66rem;min-height:38px;min-width:48px}
  /* Hamburger — make it a proper 44px touch target */
  .nav-ham{padding:11px 8px;min-width:44px;min-height:44px;justify-content:center}
  /* Nav menu items in open state */
  .nav-links.open a{padding:.6rem 1.2rem;min-height:44px;display:inline-flex;align-items:center}
  /* All primary CTAs */
  .btn-g,.btn-nvy{min-height:46px;padding:.95rem 2rem}
  /* FAQ summary in contact page */
  details summary{padding:.85rem 0 !important;min-height:44px}
}

/* ── Float buttons — keep above iPhone home indicator ───────────── */
.float-btns{
  bottom:max(1.6rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
  right:max(1.4rem, calc(env(safe-area-inset-right, 0px) + 0.6rem));
}

/* ── Mobile language switcher (CRITICAL FIX: was display:none on mobile) ── */
@media(max-width:960px){
  /* Default mobile state: hide lang switcher in nav bar */
  .lsw{display:none}
  /* When mobile menu opens, reveal lang switcher floating at the bottom of the overlay */
  .nav-links.open ~ .lsw{
    display:flex !important;
    position:fixed;
    bottom:calc(2.4rem + env(safe-area-inset-bottom, 0px));
    left:50%;
    transform:translateX(-50%);
    z-index:1001;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    padding:5px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .nav-links.open ~ .lsw .lb{
    padding:.65rem 1.2rem;
    font-size:.72rem;
    min-width:54px;
    min-height:42px;
    border-radius:18px;
  }
}

/* ── Mobile menu polish ─────────────────────────────────────────── */
@media(max-width:960px){
  /* Ensure mobile menu accounts for notch */
  .nav-links.open{
    padding-top:calc(2rem + env(safe-area-inset-top, 0px));
    padding-bottom:calc(7rem + env(safe-area-inset-bottom, 0px));
  }
  /* Nicer hamburger animation when open */
  body:has(.nav-links.open) .nav-ham span:nth-child(1){
    transform:translateY(7px) rotate(45deg)
  }
  body:has(.nav-links.open) .nav-ham span:nth-child(2){opacity:0}
  body:has(.nav-links.open) .nav-ham span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)
  }
  /* Lock body scroll when mobile menu is open */
  body:has(.nav-links.open){
    overflow:hidden;
    position:fixed;
    width:100%;
  }
}

/* ── App-feel touches on UI surfaces ────────────────────────────── */
/* Disable text selection on UI controls (preserve on body content) */
.lb,.nav-ham,.btn-g,.btn-nvy,.btn-out,.btn-gh,.modal-close,
.float-btn,.stag,.stepn,.bptag,.faq-label,
nav#mainNav .nav-links a{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Subtle tap-down feedback on primary buttons (app-like) */
@media(hover:none){
  .btn-g:active{transform:scale(.97);background:var(--g2)}
  .btn-nvy:active{transform:scale(.97);background:var(--n2)}
  .float-btn:active{transform:scale(.92)}
  .lb:active{transform:scale(.94)}
}

/* ── Image rendering on retina ──────────────────────────────────── */
img{image-rendering:auto}

/* ── Safe-area-inset for left/right (landscape iPhone with notch) ── */
@media(max-width:960px) and (orientation:landscape){
  nav#mainNav,footer,.float-btns{
    padding-left:max(5vw, env(safe-area-inset-left));
    padding-right:max(5vw, env(safe-area-inset-right));
  }
}

/* ── Smooth momentum scrolling on iOS for any horizontal scroll area ── */
[style*="overflow-x:auto"]{
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

/* ── Phone link colour normalisation (iOS auto-styles tel: links blue) ── */
a[href^="tel:"]{color:inherit;text-decoration:inherit}

/* ── Prevent rubber-banding overscroll on body (cleaner app feel) ── */
html,body{overscroll-behavior-y:none}

/* ── Smaller adjustments for very narrow phones (iPhone SE / mini) ── */
@media(max-width:380px){
  /* Reduce side padding on hero sections to avoid cramped text */
  .page-hero{padding-left:4vw;padding-right:4vw}
  /* Smaller stat numbers */
  .sv,.credv{font-size:2rem !important}
  /* Slightly smaller body padding */
  .sp,.spl{padding-left:4vw;padding-right:4vw}
}


/* ════════════════════════════════════════════════════════════════════
   v14 — NAV LAYOUT FIX + ARTICLE-STYLE MOBILE READING + CLOSE BUTTON
   Added Apr 2026 in response to user feedback:
   - Tablet/mid-width nav cramping (Contact button breaking)
   - Mobile menu missing visible close affordance
   - Mobile reading experience: needs article/news feel
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. NAV BREAKPOINT FIX ──────────────────────────────────────────
   Raise the hamburger trigger from 960px to 1100px so the nav doesn't
   cramp on tablets and small laptops (where 6 nav links + lang switcher
   + logo no longer fit comfortably). */
@media(min-width:961px) and (max-width:1100px){
  /* Mirror the 960px nav rules in the gap zone */
  .nav-links{display:none}
  .lsw{display:none}
  .nav-ham{display:flex}
  /* Open-state overlay — same behaviour as ≤960px */
  .nav-links.open{
    display:flex;
    position:fixed;
    inset:0;
    background:var(--ndk);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.5rem;
    z-index:999;
    padding-top:calc(2rem + env(safe-area-inset-top, 0px));
    padding-bottom:calc(7rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-links.open a{font-size:1.2rem;padding:.6rem 1.2rem;min-height:44px;display:inline-flex;align-items:center}
  /* Tap-target sizing for hamburger */
  .nav-ham{padding:11px 8px;min-width:44px;min-height:44px;justify-content:center}
  /* Lang switcher floats in open menu */
  .nav-links.open ~ .lsw{
    display:flex !important;
    position:fixed;
    bottom:calc(2.4rem + env(safe-area-inset-bottom, 0px));
    left:50%;
    transform:translateX(-50%);
    z-index:1001;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    padding:5px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .nav-links.open ~ .lsw .lb{
    padding:.65rem 1.2rem;font-size:.72rem;
    min-width:54px;min-height:42px;border-radius:18px;
  }
  /* Hamburger animates to X */
  body:has(.nav-links.open) .nav-ham span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body:has(.nav-links.open) .nav-ham span:nth-child(2){opacity:0}
  body:has(.nav-links.open) .nav-ham span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Lock body scroll */
  body:has(.nav-links.open){overflow:hidden;position:fixed;width:100%}
}

/* ── 2. MOBILE MENU CLOSE BUTTON ────────────────────────────────────
   The hamburger animates to an X but isn't always obvious. Add an
   explicit ghost-X button at the top-right of the open menu. The
   element is created by main.js — this just styles it. */
.menu-close-x{
  position:fixed;
  top:max(1.2rem, calc(env(safe-area-inset-top, 0px) + 0.8rem));
  right:max(1.4rem, calc(env(safe-area-inset-right, 0px) + 0.8rem));
  width:44px;height:44px;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  z-index:1002;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,transform .15s;
}
.menu-close-x:active{transform:scale(.92);background:rgba(255,255,255,.12)}
.menu-close-x svg{width:18px;height:18px;stroke:var(--wht);stroke-width:2;fill:none;stroke-linecap:round}
/* Show only when mobile menu is open AND viewport is narrow enough */
@media(max-width:1100px){
  body:has(.nav-links.open) .menu-close-x{display:flex}
}

/* ── 3. ARTICLE-STYLE MOBILE READING EXPERIENCE ─────────────────────
   "Like a news page" — generous typography, full-bleed images,
   breathing room between sections, reading-optimised contrast. */
@media(max-width:768px){

  /* ─── Typography: bigger, more readable body text ─── */
  /* Increase body font on small screens — easier to read at arm's length.
     Targets generic paragraphs that don't have inline font-size overrides. */
  section p:not([style*="font-size"]),
  .step-desc:not([style*="font-size"]),
  .stepdesc-lt:not([style*="font-size"]){
    font-size:1rem;
    line-height:1.8;
  }
  /* Inline-styled body paragraphs — bump them up by ~10% via CSS variable swap not possible,
     so use blanket overrides for the most common patterns */
  p[style*="line-height:1.72"]{line-height:1.78 !important}
  p[style*="line-height:1.74"]{line-height:1.8 !important}
  p[style*="line-height:1.76"]{line-height:1.82 !important}
  p[style*="line-height:1.78"]{line-height:1.85 !important}
  p[style*="line-height:1.82"]{line-height:1.88 !important}

  /* Generous heading rhythm — let h1/h2 breathe more */
  h1,h2,.sh2{margin-bottom:1.2rem !important;line-height:1.15 !important}
  /* Paragraph spacing within content */
  section p + p{margin-top:1rem}

  /* ─── Reading width: edge-to-edge body for content sections ─── */
  /* Reduce excessive horizontal padding so text uses more of the screen */
  .sp,.spl{padding-left:5vw !important;padding-right:5vw !important}
  /* Hero sections: tighter horizontal padding */
  .page-hero{padding-left:5vw !important;padding-right:5vw !important}

  /* ─── Section vertical breathing room ─── */
  /* Each major section gets more top/bottom padding for editorial feel */
  section.sp,section.spl{padding-top:5rem !important;padding-bottom:5rem !important}

  /* ─── IMAGES: full-bleed, full-quality on mobile ─── */
  /* Tech gallery: 1 column on phone (was 2). Bigger photos = better viewing. */
  .photo-grid,
  div[style*="grid-template-columns:repeat(4,1fr)"]:has(> div[onclick*="openLightbox"]),
  div[style*="grid-template-columns:repeat(2,1fr)"]:has(> div[onclick*="openLightbox"]){
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }
  /* Each photo card taller — show more of the image */
  div[onclick*="openLightbox"]{
    aspect-ratio:4/3 !important;
  }
  /* Always show the gallery caption on mobile (no hover state available) */
  div[onclick*="openLightbox"] > div:last-child{
    opacity:1 !important;
  }
  div[onclick*="openLightbox"] > div:nth-last-child(2){
    opacity:1 !important;
  }
  /* Hero images & content images: full-width, no rounded corners on edges */
  .photo-grid img,
  div[onclick*="openLightbox"] img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* ─── Lightbox image quality: ensure full resolution shown ─── */
  #lightbox img{
    max-width:100vw !important;
    max-height:90vh !important;
    object-fit:contain !important;
  }

  /* ─── Loss panel & financial cards: more readable on mobile ─── */
  .losspanel,
  div[style*="padding:2.5rem"][style*="border-radius:4px"],
  div[style*="padding:2.2rem"][style*="border-radius:4px"]{
    padding:1.6rem 1.4rem !important;
  }

  /* ─── Lists in body content ─── */
  section ul li,section ol li{margin-bottom:.6rem;line-height:1.7}

  /* ─── Detail/FAQ rows: more tap room, better readability ─── */
  details{padding:1.2rem 0 !important}
  details summary{font-size:.92rem !important}
  details p{font-size:.88rem !important;line-height:1.75 !important}

  /* ─── Form fields: more height, more readable ─── */
  .cfield label{font-size:.78rem !important;margin-bottom:.5rem}
  .cfield input,.cfield select,.cfield textarea{
    padding:.95rem 1rem !important;
    line-height:1.4 !important;
  }
}

/* ── 4. SMALLER PHONES (iPhone SE / mini, ≤480px) ─────────────────── */
@media(max-width:480px){
  /* Hero headlines reduce slightly to fit 2 lines comfortably */
  h1[style*="clamp(2rem"]{font-size:1.85rem !important;line-height:1.12 !important}
  /* Less section padding to avoid wasted screen estate */
  section.sp,section.spl{padding-top:3.5rem !important;padding-bottom:3.5rem !important}
  /* Nav logo sized down */
  .logo img{max-height:32px !important}
}

/* ── 5. SMOOTH SCROLLING REFINEMENT ─────────────────────────────────
   Smooth-scroll already in v13 via overscroll-behavior. Add scroll-snap
   for better anchor-link UX on mobile. */
html{scroll-padding-top:80px}
@media(max-width:1100px){
  html{scroll-padding-top:64px}
  /* Subtle scroll-margin so anchored sections don't stick to nav */
  section{scroll-margin-top:64px}
}

/* ── 6. NAV ON MID-WIDTH (961-1100px) — extra polish ──────────────── */
/* The fix is the @media block above. Just ensure logo doesn't shrink */
@media(min-width:961px) and (max-width:1100px){
  .logo{flex-shrink:0}
  nav#mainNav{padding-left:5vw !important;padding-right:5vw !important}
}