/* Eagle Mailbox Sales, Inc.
   Direction: government submittal sheet - hard rules, visible grid, mono spec
   labels, index numbering, no rounded corners anywhere.
   Surprise colour is postal safety yellow, lifted from the carrier tags in the
   client's own CBU photograph. Flag red appears ONLY inside the SDVOSB seal. */

@font-face{font-family:'Saira Condensed';src:url('fonts/Saira-Condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Saira Condensed';src:url('fonts/Saira-Condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/IBM-Plex-Sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/IBM-Plex-Sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/IBM-Plex-Mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/IBM-Plex-Mono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#F2F0EB;      /* manila spec paper */
  --ink:#15181C;
  --ink-2:#4A5158;
  --navy:#1C3054;       /* postal navy */
  --navy-2:#2A4470;
  --tag:#E4A93C;        /* postal safety yellow - the surprise */
  --rule:#C9C4B8;
  --rule-hard:#15181C;
  --disp:'Saira Condensed',Impact,sans-serif;
  --body:'Plex',Georgia,serif;
  --mono:'PlexMono',ui-monospace,monospace;
  --rail:44px;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  padding-left:var(--rail);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}
.wrap{width:min(100% - 3rem,var(--maxw));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--navy);color:#fff;padding:.6rem 1rem}
:focus-visible{outline:3px solid var(--tag);outline-offset:2px}

/* ---- signature: vertical credential rail ---------------------------------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  border-right:3px solid var(--tag);
}
.rail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.34em;
  text-transform:uppercase;color:#E9E5DC;white-space:nowrap;
}

/* ---- spec bar + masthead -------------------------------------------------- */
.specbar{background:var(--ink);color:#D8D4CB}
.specbar-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.5rem 0}
.specbar a{color:#fff;text-decoration:none}
.specbar a:hover{color:var(--tag)}
.specbar-tel i{opacity:.4;font-style:normal;margin:0 .45rem}

.mast{
  position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:3px solid var(--rule-hard);
}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:inherit}
.brand-eagle{width:86px;height:auto}
.brand-tx b{display:block;font-family:var(--disp);font-weight:700;font-size:1.55rem;line-height:1;letter-spacing:.005em;text-transform:uppercase}
.brand-tx i{display:block;font-style:normal;color:var(--ink-2);font-size:.64rem;letter-spacing:.14em;
  font-family:var(--mono);text-transform:uppercase;margin-top:.15rem}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{
  font-family:var(--mono);font-weight:600;font-size:.82rem;line-height:1;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);padding:.4rem 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--tag)}
.nav-cta{background:var(--navy);color:#fff !important;padding:.62rem 1rem !important;border-bottom:none !important}
.nav-cta:hover{background:var(--ink)}

/* ---- hero ----------------------------------------------------------------- */
.hero{border-bottom:1px solid var(--rule);padding:4.2rem 0 3.6rem}
.hero-in{display:grid;grid-template-columns:1.45fr .9fr;gap:3.5rem;align-items:start}
.eyebrow{color:var(--navy);margin:0 0 1.1rem;font-weight:600}
.hero h1{
  margin:0 0 1.3rem;font-family:var(--disp);font-weight:700;font-size:clamp(2.9rem,6.2vw,5.1rem);line-height:.95;
  text-transform:uppercase;letter-spacing:-.005em;
}
.hero h1 em{
  font-style:normal;color:var(--navy);
  /* the one place the surprise colour underlines the headline. A real
     text-decoration tracks the glyphs; box-shadow escaped the tight line box. */
  text-decoration:underline;
  text-decoration-color:var(--tag);
  text-decoration-thickness:.085em;
  text-underline-offset:.04em;
}
.lede{margin:0 0 2rem;max-width:56ch;color:var(--ink-2);font-size:1.06rem}
.hero-call{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;margin:0}
.hero-call .mono{color:var(--ink-2)}
.bignum{
  font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1;letter-spacing:.01em;
  text-decoration:none;color:var(--ink);border-bottom:4px solid var(--tag);
}
.bignum:hover{color:var(--navy)}
.textlink{font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  margin-top:.6rem;color:var(--navy)}

.cred{border:3px solid var(--rule-hard);background:#fff}
.cred-seal{width:100%;max-width:210px;margin:1.3rem auto .4rem;display:block}
.cred-tbl{margin:0;border-top:1px solid var(--rule)}
.cred-tbl>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1.1rem;border-bottom:1px solid var(--rule)}
.cred-tbl>div:last-child{border-bottom:none}
.cred-tbl dt{color:var(--ink-2);margin:0}
.cred-tbl dd{margin:0;font-weight:600;color:var(--navy)}

/* ---- sections ------------------------------------------------------------- */
.sec{padding:4.4rem 0 1rem}
.sec-h{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin:0 0 2.4rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.05;text-transform:uppercase;
  border-bottom:3px solid var(--rule-hard);padding-bottom:.7rem;
}
.sec-k{color:var(--navy);font-weight:600}

/* ---- product index rows --------------------------------------------------- */
.row{border-bottom:1px solid var(--rule);padding:2.6rem 0}
.row-in{display:grid;grid-template-columns:auto 1fr 1.25fr;gap:2.4rem;align-items:start}
.row-alt .row-in{grid-template-columns:auto 1.25fr 1fr}
.row-alt .row-fig{order:3}
.row-alt .row-tx{order:2}
.row-n{
  margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.8;
  color:transparent;-webkit-text-stroke:2px var(--rule);
}
.row-fig{margin:0;border:1px solid var(--rule-hard)}
.row-fig img{width:100%}
.row-tx h3{margin:0 0 .7rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.05;text-transform:uppercase}
.row-tx p{margin:0 0 1.2rem;color:var(--ink-2)}
.apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem .9rem}
.apps li{padding-left:1.05rem;position:relative;color:var(--ink)}
.apps li::before{content:"";position:absolute;left:0;top:.42em;width:.5rem;height:.5rem;background:var(--tag)}

/* ---- markets marquee ------------------------------------------------------ */
.marquee{background:var(--navy);color:#EDEAE2;overflow:hidden;margin-top:2.6rem;
  border-top:3px solid var(--rule-hard);border-bottom:3px solid var(--rule-hard)}
.marquee-track{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 2.6rem;white-space:normal;
  padding:.85rem clamp(1rem,4vw,3rem);width:auto;max-width:1200px;margin:0 auto}  /* 2026-09-22: static row — Chris: no scrolling banners */
.marquee-track span{position:relative;padding-left:2.6rem}
.marquee-track span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:.42rem;height:.42rem;background:var(--tag)}

/* ---- about ---------------------------------------------------------------- */
.about-in{display:grid;grid-template-columns:.75fr 1.25fr;gap:3.2rem;align-items:start}
.bigfig{margin:0;border-left:6px solid var(--tag);padding-left:1.2rem}
.bigfig b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(5rem,11vw,9rem);line-height:.82;color:var(--navy)}
.bigfig i{display:block;font-style:normal;color:var(--ink-2);font-family:var(--mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem;line-height:1.7}
.about-tx p{max-width:62ch}

/* ---- manufacturers -------------------------------------------------------- */
.mfr-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mfr-list li{display:grid;grid-template-columns:auto 1fr auto auto;gap:1.4rem;align-items:baseline;
  padding:1.3rem 0;border-bottom:1px solid var(--rule)}
.mfr-n{color:var(--navy);font-weight:600}
.mfr-name{font-family:var(--disp);font-weight:700;font-size:1.35rem;line-height:1.1;text-transform:uppercase}
.mfr-note{color:var(--ink-2)}
.mfr-go{font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--tag);white-space:nowrap}
.mfr-foot{margin:1.2rem 0 0;color:var(--ink-2)}

/* ---- quote (colour-inverted, boldest block on the page) ------------------- */
.quote{background:var(--navy);color:#EDEAE2;margin-top:4.4rem;padding:4.4rem 0;
  border-top:3px solid var(--rule-hard)}
.quote-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.4rem;align-items:start}
.quote h2{margin:0 0 1rem;font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1;text-transform:uppercase;color:#fff}
.quote-tx p{color:#C8CEDA;max-width:46ch}
.quote-dl{margin:2rem 0 0;border-top:1px solid rgba(255,255,255,.22)}
.quote-dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;
  border-bottom:1px solid rgba(255,255,255,.22)}
.quote-dl dt{margin:0;color:#9FB0CB}
.quote-dl dd{margin:0}
.quote-dl a{color:var(--tag);text-decoration:none}
.quote-dl a:hover{text-decoration:underline}

.qform{background:var(--paper);color:var(--ink);padding:1.8rem;border:3px solid var(--ink)}
.qform label{display:block;margin:0 0 1rem}
.qform .lbl{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.32rem}
.qform .lbl b{color:#B3282D}
.qform input,.qform textarea{
  width:100%;font-family:var(--body);font-weight:400;font-size:1rem;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--rule-hard);padding:.62rem .7rem;border-radius:0;
}
.qform input:focus,.qform textarea:focus{outline:3px solid var(--tag);outline-offset:0;border-color:var(--navy)}
.qform textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.qform button{
  font-family:var(--mono);font-weight:600;font-size:.86rem;line-height:1;letter-spacing:.11em;text-transform:uppercase;
  background:var(--navy);color:#fff;border:none;padding:1rem 1.8rem;cursor:pointer;
}
.qform button:hover{background:var(--ink)}
.qnote{margin:.9rem 0 0;color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- footer --------------------------------------------------------------- */
.foot{background:var(--ink);color:#B9B4AA;padding:3.2rem 0 1.4rem}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.6rem}
.foot-brand img{width:120px;margin-bottom:.9rem}
.foot-brand b{color:#F2F0EB;font-family:var(--disp);font-weight:700;font-size:1.25rem;line-height:1.1;text-transform:uppercase}
.foot-brand p{margin:0}
.foot-col h3{margin:0 0 .8rem;color:#EDEAE2;font-size:.72rem;font-weight:600}
.foot-col a{display:block;color:#B9B4AA;text-decoration:none;padding:.22rem 0}
.foot-col a:hover{color:var(--tag)}
.foot-loc{display:block;margin-top:.7rem;color:#7E7A72}
.foot-rule{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid #33373D;color:#7E7A72}

/* ---- motion: scoped to html.js so content is NEVER hidden without JS ------ */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
  html.js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .hero-in,.about-in,.quote-in{grid-template-columns:1fr;gap:2.4rem}
  .cred{max-width:420px}
  .row-in,.row-alt .row-in{grid-template-columns:auto 1fr;gap:1.2rem 1.6rem}
  .row-fig,.row-alt .row-fig{order:2;grid-column:1/-1;max-width:460px}
  .row-tx,.row-alt .row-tx{order:3;grid-column:1/-1}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--rail:30px}
  .rail span{letter-spacing:.22em;font-size:.6rem}
  .mast-in{flex-direction:column;align-items:flex-start;gap:.7rem}
  .nav{flex-wrap:wrap;gap:.7rem 1rem}
  .nav a{font-size:.72rem}
  .nav-cta{padding:.55rem .9rem !important}
  /* The masthead was eating a third of the first screen on a phone. */
  .brand-eagle{width:62px}
  .brand-tx b{font-size:1.25rem}
  .brand-tx i{font-size:.56rem;letter-spacing:.1em}
  .specbar-in{font-size:.62rem;gap:.15rem;line-height:1.5}
  .hero{padding:2.4rem 0 2.6rem}
  .mfr-list li{grid-template-columns:auto 1fr;gap:.5rem 1rem}
  .mfr-note,.mfr-go{grid-column:2}
  .two{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr}
}

/* ---- form outcome notice (rendered client-side; page is static) ----------- */
.notice{
  margin:0 0 1.2rem;padding:.95rem 1.1rem;border:3px solid var(--ink);
  background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;line-height:1.6;
}
.notice.ok{border-color:var(--tag);box-shadow:inset 0 0 0 3px rgba(228,169,60,.18)}
.notice.bad{border-color:#B3282D}