@font-face { font-family:'Messina Modern'; src:url('fonts/MessinaModern-TTF.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Messina Sans'; src:url('fonts/MessinaSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Messina Sans'; src:url('fonts/MessinaSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --midnight:#001C29; --denim:#2D75B2; --gold:#cfaf6c; --pepper:#ec4325;
  --steel:#bcd0df; --sky:#dbe6ee; --stone:#f1e7d1; --parchment:#f9f4ec; --grey:#6b757d;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Messina Sans',Arial,Helvetica,sans-serif; color:var(--midnight); background:var(--parchment); line-height:1.55;}
h1,h2{font-family:'Messina Modern',Georgia,serif; font-weight:400; line-height:1.15;}
h1{font-size:clamp(1.9rem,5.5vw,3.1rem);}
h2{font-size:clamp(1.4rem,3.6vw,2rem); margin-bottom:.4rem;}
a{color:var(--denim);}
.topbar{height:6px; background:var(--midnight);}
.h3-label{font-weight:700; text-transform:uppercase; color:var(--pepper); font-size:.72rem; letter-spacing:.07em; margin-bottom:.5rem;}

.site-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:980px; margin:0 auto; padding:1.1rem 1.2rem;}
.logo{width:132px; height:auto;}
.head-tag{font-size:.72rem; color:var(--grey);}

.hero{background:#fff; border-bottom:1px solid var(--sky); overflow:hidden;}
.hero-inner{max-width:980px; margin:0 auto; padding:2.6rem 1.2rem 2.8rem; display:flex; gap:1.5rem; position:relative;}
.hero-copy{max-width:620px; position:relative; z-index:2;}
.hero-sub{margin:1rem 0 .8rem; font-size:1.02rem;}
.five-q{margin:0 0 1.4rem 1.2rem;}
.five-q li{margin:.42rem 0;}
.hero-note{font-size:.8rem; color:var(--grey); margin-top:.7rem;}
.hero-shape{position:absolute; right:-70px; top:-30px; width:340px; opacity:.16; z-index:1;}
@media(max-width:700px){.hero-shape{width:220px; right:-90px;}}

.btn{display:inline-block; background:var(--gold); color:var(--midnight); font-weight:700; text-transform:uppercase; letter-spacing:.04em; border:none; border-radius:4px; padding:.8rem 1.5rem; font-size:.85rem; cursor:pointer; text-decoration:none; font-family:'Messina Sans',Arial,sans-serif;}
.btn:hover{filter:brightness(1.05);}
.btn-outline{background:transparent; border:1px solid var(--gold);}

.section{max-width:980px; margin:0 auto; padding:2.6rem 1.2rem 1rem;}
.section-sub{color:var(--grey); margin:.3rem 0 1.2rem; max-width:640px;}
.panel{background:#fff; border:1px solid var(--steel); border-radius:6px; padding:1.4rem;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem 1.4rem; margin-bottom:1.2rem;}
label{display:flex; flex-direction:column; gap:.3rem; font-size:.86rem; font-weight:700;}
.req{color:var(--pepper); font-weight:400; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;}
.opt{color:var(--grey); font-weight:400; font-size:.7rem;}
input,select,textarea{font-family:inherit; font-size:1rem; font-weight:400; padding:.6rem .7rem; border:1px solid var(--steel); border-radius:4px; background:#fff; color:var(--midnight); width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--denim); border-color:var(--denim);}
.hp{position:absolute; left:-5000px; height:1px; width:1px; opacity:0;}

.full{margin-bottom:.4rem;}
.bwrap{position:relative;}
.bresults{position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--denim); border-radius:6px; max-height:290px; overflow-y:auto; z-index:30; box-shadow:0 8px 22px rgba(0,28,41,.14);}
.bitem{padding:.55rem .8rem; cursor:pointer; display:flex; flex-direction:column; gap:.1rem; border-bottom:1px solid var(--sky); font-weight:400;}
.bitem:last-child{border-bottom:none;}
.bitem:hover{background:var(--sky);}
.bitem span{font-size:.78rem; color:var(--grey);}
.bnone{cursor:default; color:var(--grey);}
.bchip{background:var(--sky); border:1px solid var(--denim); border-radius:6px; padding:.6rem .8rem; font-size:.9rem; font-weight:400; margin:.2rem 0 .6rem;}
.linklike{background:none; border:none; color:var(--denim); font-family:inherit; font-size:.8rem; cursor:pointer; padding:0; margin:.15rem 0 .9rem; text-decoration:underline;}
.consent{margin-top:.7rem;}
#fallbackLoc{margin-bottom:1rem;}

.hidden{display:none !important;}
.grade-row{display:flex; gap:1.1rem; align-items:center; margin-bottom:1.3rem;}
.grade-chip{min-width:74px; height:74px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Messina Modern',Georgia,serif; font-size:2.6rem; color:#fff; background:var(--denim);}
.grade-A{background:#2e6e4e;} .grade-B{background:var(--denim);} .grade-C{background:#b08a3c;} .grade-D{background:#8a4a3a;}
#gradeWhy{font-size:.95rem;}

.bandviz{margin:1.2rem 0 1.4rem;}
.bandviz-title{font-weight:700; font-size:.9rem; margin-bottom:.2rem;}
.band-track{position:relative; height:16px; background:var(--sky); border-radius:8px; margin-top:40px;}
.band-range{position:absolute; top:0; bottom:0; background:var(--steel); border-radius:8px;}
.band-marker{position:absolute; top:-7px; width:4px; height:30px; background:var(--pepper); border-radius:2px;}
.band-marker span{position:absolute; top:-24px; left:50%; transform:translateX(-50%); white-space:nowrap; font-weight:700; font-size:.82rem; background:var(--midnight); color:#fff; border-radius:3px; padding:.08rem .45rem;}
.band-labels{display:flex; justify-content:space-between; font-size:.78rem; color:var(--grey); margin-top:.5rem;}
.findings{margin:1.1rem 0 1rem 1.2rem;}
.findings li{margin:.55rem 0;}
.fineprint{font-size:.72rem; color:var(--grey);}
.fineprint-light{font-size:.72rem; color:var(--steel);}

.cta-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-top:1.4rem;}
.cta-panel{background:var(--parchment); border-color:var(--gold);}
.panel-h{font-family:'Messina Modern',Georgia,serif; font-weight:400; font-size:1.35rem; margin-bottom:.5rem;}
.cta-panel p{font-size:.9rem; margin-bottom:.9rem;}
.cta-panel form{display:flex; flex-direction:column; gap:.8rem;}
.form-msg{margin-top:.7rem; font-size:.9rem; font-weight:700;}

.filedrop{display:block; border:1.5px dashed var(--denim); border-radius:6px; background:var(--sky); padding:1.6rem 1rem; text-align:center; cursor:pointer; margin-bottom:1.1rem; font-weight:400;}
.filedrop input{display:none;}
.filedrop.has-file{background:#e7f0e9; border-color:#2e6e4e;}
#uploadForm textarea{margin-bottom:1rem;}
#uploadForm .btn{margin-top:.2rem;}

.fee-strip{background:var(--midnight); color:#fff; margin-top:2.6rem;}
.fee-inner{max-width:980px; margin:0 auto; padding:2.3rem 1.2rem;}
.fee-h{color:#fff; margin-bottom:.7rem;}
.zero{color:var(--gold);}
.fee-inner p{max-width:680px; font-size:.95rem; color:var(--steel);}
.fee-inner .fineprint-light{margin-top:.7rem; color:#5a6b76;}

.site-foot{background:var(--midnight); color:#fff; border-top:1px solid #12303f;}
.foot-inner{max-width:980px; margin:0 auto; padding:1.8rem 1.2rem .6rem; display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;}
.foot-name{font-weight:700; font-size:1.05rem;}
.foot-line{font-size:.82rem; color:var(--steel); margin-top:.25rem;}
.foot-line a{color:#fff; text-decoration:none;}
.foot-right{text-align:right;}
.foot-logo{width:120px; height:auto;}
.foot-legal{max-width:980px; margin:0 auto; padding:.6rem 1.2rem 1.6rem; font-size:.68rem; color:#5a6b76;}
@media(max-width:700px){.foot-right{text-align:left;}}

.expwrap{display:flex; gap:.5rem;}
.expwrap select{flex:1; min-width:0;}
.hint{font-weight:400; font-size:.72rem; color:var(--grey); margin-top:.15rem;}

.cta-single{margin-top:1.4rem;}
.cta-single p{max-width:70ch;}

.exphelp{background:var(--sky); border:1px solid var(--steel); border-radius:5px; padding:.7rem .8rem; margin-top:.4rem;}
.exphelp .hint{margin:0 0 .5rem;}
.exphelp .expwrap{margin-bottom:.5rem;}
.exphelp .hint:last-child{margin:0;}

.inlinelink{margin:0; font-size:.72rem;}

.unitwrap{display:flex; gap:.5rem;}
.unitwrap input{flex:1 1 auto; min-width:0;}
.unitwrap select{flex:0 0 auto; width:auto; max-width:47%;}

.verdict-body{font-size:1.02rem; margin-bottom:1.2rem;}
.basis{font-size:.82rem; color:var(--midnight); background:var(--sky); border-radius:5px;
       padding:.7rem .85rem; margin:.9rem 0 .6rem;}

/* The part a calculator can't reach. Sits after the findings so the rate never reads
   as the whole story - it is one line of a forty-line document. */
.blind{margin:26px 0 6px;padding:20px 20px 14px;background:var(--sky,#dbe6ee);border-left:4px solid var(--gold,#cfaf6c)}
.blind .h3-label{margin:0 0 4px}
.blind .panel-h{margin:0 0 8px;font-size:1.22rem;line-height:1.25}
.blind>p{margin:0 0 12px;font-size:.95rem;line-height:1.6}
.blind-list{list-style:none;margin:0;padding:0}
.blind-list li{margin:0 0 13px;padding:0 0 0 17px;position:relative;font-size:.93rem;line-height:1.6}
.blind-list li:before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--pepper,#ec4325)}
.blind-list strong{display:block;margin-bottom:2px}
.blind .fineprint{margin:4px 0 0}

/* What replacing this tenant costs the landlord. Styled like a statement, not a pitch:
   every line is arithmetic the reader can check against the figures they entered. */
.relet{margin:26px 0 6px;padding:20px 20px 14px;background:#fff;border:1px solid var(--steel,#bcd0df);border-top:4px solid var(--midnight,#001C29)}
.relet .h3-label{margin:0 0 4px}
.relet .panel-h{margin:0 0 8px;font-size:1.22rem;line-height:1.25}
.relet>p{margin:0 0 12px;font-size:.95rem;line-height:1.6}
.relet-table{width:100%;border-collapse:collapse;margin:0 0 14px}
.relet-table td{padding:9px 0;border-bottom:1px solid var(--sky,#dbe6ee);vertical-align:top}
.relet-table td.rl{padding-right:14px}
.relet-table td.rv{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.relet-table .rl b{display:block;font-size:.95rem}
.relet-table .rl span{display:block;font-size:.82rem;color:var(--grey,#6b757d);line-height:1.5;margin-top:2px}
.relet-table tfoot td{border-bottom:none;border-top:2px solid var(--midnight,#001C29);padding-top:11px;font-size:1.05rem}
.relet-table tfoot td.rv{font-size:1.28rem;color:var(--midnight,#001C29)}
.relet-table tr.sub td{border-bottom:none;padding:5px 0 0}
.relet-table tr.sub td.rl b{font-weight:400;font-size:.9rem;color:var(--grey,#6b757d)}
.relet-table tr.sub td.rv{font-size:.95rem;font-weight:400;color:var(--grey,#6b757d)}
.relet .gap{background:var(--stone,#f1e7d1);padding:12px 14px;margin:0 0 10px;font-size:.97rem;line-height:1.6}
@media(max-width:560px){
  .relet-table .rl span{font-size:.78rem}
  .relet-table tfoot td.rv{font-size:1.1rem}
}

/* Keep this read: one email field, low pressure. For the practice years from expiration this
   is the only ask that makes sense, so the reminder checkbox rides along when it applies. */
.keepread{margin:24px 0 8px;padding:18px 20px 14px;background:var(--parchment,#f9f4ec);border:1px solid var(--gold,#cfaf6c)}
.keep-h{font-weight:700;margin:0 0 3px;font-size:1.02rem}
.keep-sub{margin:0 0 12px;font-size:.86rem;color:var(--grey,#6b757d)}
.keeprow{display:flex;gap:10px;flex-wrap:wrap}
.keeprow input[type=email]{flex:1 1 220px;padding:.65rem .8rem;border:1px solid var(--steel,#bcd0df);border-radius:4px;font:inherit;font-size:.95rem}
.btn-small{padding:.65rem 1.1rem;font-size:.78rem}
.keep-remind{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;font-size:.88rem;line-height:1.5;cursor:pointer}
.keep-remind input{margin-top:3px}

/* Header: the direct line sits where an inbound caller looks first. On a phone the tagline
   goes and the number stays. */
.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;text-align:right}
.head-phone{font-weight:700;font-size:.92rem;color:var(--midnight);text-decoration:none;white-space:nowrap}
@media(max-width:700px){.head-tag{display:none}.head-phone{font-size:.86rem}.logo{width:112px}}

/* The gate. The verdict line above it is free; the read underneath is rendered but blurred
   and clipped so the visitor can see how much is waiting. */
.gate{border-color:var(--gold);background:#fff;margin:.9rem 0 1.2rem;position:relative;z-index:3}
.gate-h{font-family:'Messina Modern',Georgia,serif;font-size:1.35rem;line-height:1.25;margin:0 0 .5rem}
.gate-sub{font-size:.95rem;margin:0 0 1rem;max-width:72ch}
.gate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem 1rem;margin-bottom:.9rem}
.gate .keep-remind{margin:0 0 .9rem}
.gate .btn{width:100%;max-width:340px}
@media(max-width:560px){.gate .btn{max-width:none}}
.gate .form-msg{margin-top:.5rem}
.gate .fineprint{margin-top:.8rem}

.read-body{position:relative}
.read-body.gated{max-height:440px;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}
.read-body.gated>*{filter:blur(6px)}
.read-body.gated::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(249,244,236,0) 0%,rgba(249,244,236,.6) 50%,var(--parchment) 100%)}

.cta-call{font-size:.9rem;margin-top:1rem;color:var(--grey)}
.cta-call a{font-weight:700;color:var(--midnight);text-decoration:none}

/* Sticky call bar, phones only, once the read is open: the moment intent is highest. */
.callbar{display:none}
@media(max-width:700px){
  .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--midnight);color:#fff;text-align:center;font-weight:700;font-size:.9rem;padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));text-decoration:none;border-top:2px solid var(--gold)}
  .callbar.hidden{display:none}
  body.has-callbar{padding-bottom:3.6rem}
}

.cta-panel .proof{background:#fff;border-left:3px solid var(--gold);padding:.7rem .9rem;font-size:.9rem}
.gate .fineprint+.fineprint{margin-top:.35rem}