/* ============================================================
   BEAM Engineering Services — shared stylesheet
   Display  Fraunces (variable optical size)
   Text     Jost
   Ground   limestone · Accent BEAM blue · Warm bronze
   Audience triad: blue / bronze / teal
   ============================================================ */

:root{
  --paper:#F1EFEA;
  --paper-2:#E9E5DC;
  --paper-3:#DFDACF;
  --white:#FCFBF8;
  --ink:#1B1915;
  --ink-2:#4A443C;
  --mut:#7E7568;
  --rule:#D9D3C6;
  --rule-2:#C7BFAE;

  --blue:#0076B3;
  --blue-d:#00537E;
  --blue-l:#4FA5D0;
  --blue-wash:#E3EEF5;

  --bronze:#9A7343;
  --bronze-d:#6E5130;
  --bronze-l:#BF9A64;
  --bronze-wash:#F0E8DC;

  --teal:#17646E;
  --teal-d:#0E454C;
  --teal-l:#4E9AA3;
  --teal-wash:#E0EDEE;

  --graphite:#635A54;

  --disp:Fraunces,"Iowan Old Style",Georgia,serif;
  --sans:Jost,"Helvetica Neue",Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5.2vw,86px);
  --maxw:1480px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.68 var(--sans);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
::selection{background:var(--blue);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:500}
.skip:focus{left:12px;top:12px}

/* Lenis (inlined — external stylesheets are restricted) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:1120px;margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:300;letter-spacing:-.018em;text-wrap:balance;margin:0}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300;color:var(--bronze)}
p{margin:0}

.eyebrow{display:flex;align-items:center;gap:13px;font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--bronze)}
.eyebrow::before{content:"";width:clamp(22px,3vw,44px);height:1px;background:var(--bronze);flex:none;opacity:.7}
.num{font-family:var(--disp);font-style:italic;font-weight:300;color:var(--bronze-l)}
.mtxt{color:var(--mut);font-size:14px}

#prog{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--blue);z-index:200;transition:width .08s linear}

/* ---------------- nav ---------------- */
.nav{position:fixed;inset:0 0 auto;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px var(--pad);transition:padding .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(241,239,234,.92),rgba(241,239,234,0));transition:opacity .4s}
.nav.stuck{background:rgba(241,239,234,.93);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 1px 0 var(--rule);padding-block:12px}
.nav.stuck::before{opacity:0}
.nav.solid{background:var(--paper);box-shadow:0 1px 0 var(--rule)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand svg{height:31px;width:auto;transition:height .45s var(--ease)}
.nav.stuck .brand svg{height:27px}
.brand>span{display:block}
.brand .bt{display:block;font-family:var(--disp);font-weight:400;font-size:20px;line-height:1;letter-spacing:.1em}
.brand .bs{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:4px;font-weight:500}
.navlinks{display:flex;gap:clamp(16px,2.2vw,34px)}
.navlinks a{font-size:14.5px;color:var(--ink-2);position:relative;padding-block:4px;transition:color .25s}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--bronze);transition:right .4s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{right:0}
.navlinks a[aria-current="page"]{color:var(--ink)}
.navcta{flex:none;border:1px solid var(--rule-2);color:var(--ink);padding:11px 22px;font-size:14px;border-radius:2px;
  transition:.35s var(--ease);background:transparent}
.navcta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.burger{display:none;border:1px solid var(--rule-2);background:transparent;width:44px;height:40px;border-radius:2px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:17px;height:1px;background:var(--ink);transition:.3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}
@media(max-width:1060px){.navlinks,.navcta{display:none}.burger{display:flex}}
#drawer{position:fixed;inset:0;z-index:149;background:var(--paper);display:flex;flex-direction:column;justify-content:center;
  gap:4px;padding:0 var(--pad);transform:translateY(-101%);transition:transform .6s var(--ease);visibility:hidden}
#drawer.open{transform:none;visibility:visible}
#drawer a{font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,8vw,3rem);line-height:1.3;color:var(--ink)}
#drawer a:hover{color:var(--bronze)}
#drawer .dcontact{margin-top:32px;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--mut)}
#drawer .dcontact a{font-family:var(--sans);font-size:15px;line-height:1.7}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:13px;background:var(--ink);color:var(--paper);padding:16px 30px;border-radius:2px;
  font-size:15px;transition:.4s var(--ease);position:relative;overflow:hidden;border:1px solid var(--ink)}
.btn .l,.btn .arw{position:relative;z-index:1}
.btn .arw{transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--blue);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{border-color:var(--blue)}
.btn:hover .arw{transform:translateX(5px)}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.alt::before{background:var(--ink)}
.btn.alt:hover{color:var(--paper);border-color:var(--ink)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light::before{background:var(--bronze)}
.btn.light:hover{color:var(--paper);border-color:var(--bronze)}
.btn.ghostl{background:transparent;color:var(--paper);border-color:rgba(241,239,234,.3)}
.btn.ghostl::before{background:var(--paper)}
.btn.ghostl:hover{color:var(--ink);border-color:var(--paper)}

/* ---------------- section scaffolding ---------------- */
section{padding-block:clamp(74px,11vh,168px)}
.shead{display:grid;grid-template-columns:1fr 1.22fr;gap:clamp(24px,6vw,110px);align-items:end;margin-bottom:clamp(38px,6vh,74px)}
.shead h2{font-size:clamp(2rem,4.7vw,3.9rem);line-height:1.02;margin-top:18px;max-width:16ch}
.shead .lede{color:var(--ink-2);font-size:17px;line-height:1.74;max-width:52ch}
@media(max-width:920px){.shead{grid-template-columns:1fr;gap:18px}}

/* ---------------- page header (inner pages) ---------------- */
.phead{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(36px,6vh,72px);border-bottom:1px solid var(--rule)}
.phead h1{font-size:clamp(2.5rem,6.6vw,5.4rem);line-height:1;margin:22px 0 0;max-width:15ch}
.phead .plede{max-width:54ch;margin-top:24px;font-size:clamp(16px,1.7vw,19px);line-height:1.74;color:var(--ink-2)}
.crumb{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mut)}
.crumb a:hover{color:var(--bronze)}

/* ---------------- figures band ---------------- */
.figs{border-block:1px solid var(--rule);background:var(--paper-2)}
.figs .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:clamp(26px,3.4vw,44px) clamp(10px,2vw,30px) clamp(24px,3vw,40px) 0;border-right:1px solid var(--rule)}
.fig:last-child{border-right:0}
.fig b{font-family:var(--disp);font-weight:300;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.04;display:block;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fig span{display:block;margin-top:12px;font-size:14px;color:var(--mut);max-width:24ch;line-height:1.55;padding-right:14px}
@media(max-width:760px){
  .figs .wrap{grid-template-columns:1fr 1fr}
  .fig{padding:24px 16px 22px 0;border-bottom:1px solid var(--rule)}
  .fig:nth-child(2n){border-right:0}
  .fig:nth-child(n+3){border-bottom:0}
}

/* ---------------- statement ---------------- */
.stmt{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(26px,6vw,110px)}
@media(max-width:920px){.stmt{grid-template-columns:1fr}}
.stmt .big{font-family:var(--disp);font-weight:300;font-size:clamp(1.5rem,2.9vw,2.5rem);line-height:1.22;letter-spacing:-.018em;max-width:16ch}
.stmt .body p{font-size:17px;line-height:1.82;color:var(--ink-2);max-width:60ch;margin-bottom:20px}
.stmt .body p:first-child{font-size:clamp(18px,2vw,21px);color:var(--ink);line-height:1.66}
.stmt .body p:last-child{margin-bottom:0}

/* ---------------- names / marquee ---------------- */
.mqrow{overflow:hidden;border-bottom:1px solid var(--rule);padding-block:2px;position:relative}
.mqrow:first-of-type{border-top:1px solid var(--rule)}
.mqrow::before,.mqrow::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,9vw,140px);z-index:2;pointer-events:none}
.mqrow::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.mqrow::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.mqrow.onpaper2::before{background:linear-gradient(90deg,var(--paper-2),transparent)}
.mqrow.onpaper2::after{background:linear-gradient(270deg,var(--paper-2),transparent)}
.mqtrack{display:flex;width:max-content;align-items:center;animation:mqScroll var(--dur,52s) linear infinite}
.mqrow.rev .mqtrack{animation-direction:reverse}
/* once JS drives the row, the CSS keyframes step aside; they remain the
   no-script fallback */
.mqtrack.mqjs{animation:none;will-change:transform}
.mqtrack span{font-family:var(--disp);font-weight:300;font-size:clamp(20px,2.7vw,36px);letter-spacing:-.015em;color:var(--ink-2);
  padding:16px 0;white-space:nowrap;display:flex;align-items:center;transition:color .3s}
.mqtrack span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--bronze-l);margin-inline:clamp(20px,2.6vw,40px);flex:none;opacity:.75}
.mqtrack span:hover{color:var(--blue-d)}
@keyframes mqScroll{to{transform:translateX(-50%)}}

/* ---------------- system tiles ---------------- */
.systems{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:980px){.systems{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.systems{grid-template-columns:repeat(2,1fr)}}
.sys{background:var(--paper);padding:22px 20px 20px;position:relative;overflow:hidden;transition:background .4s var(--ease)}
.sys::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);transition:width .55s var(--ease)}
.sys:hover{background:var(--white)}
.sys:hover::after{width:100%}
.sys .cnt{display:flex;align-items:baseline;gap:8px}
.sys .cnt i{font-style:normal;font-family:var(--disp);font-weight:300;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;transition:color .4s var(--ease)}
.sys:hover .cnt i{color:var(--blue)}
.sys .cnt em{font-style:normal;font-size:12.5px;color:var(--mut)}
.sys b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(1.02rem,1.7vw,1.26rem);letter-spacing:-.012em;margin-top:12px}
.sys .bar{display:block;height:2px;background:var(--rule);margin-top:14px;position:relative;overflow:hidden}
.sys .bar i{position:absolute;inset:0 auto 0 0;width:var(--share,0%);background:var(--bronze);
  transition:width 1.1s var(--ease),background .4s}
.sys:hover .bar i{background:var(--blue)}
.sys .use{display:block;margin-top:10px;font-size:12px;color:var(--mut);line-height:1.45;min-height:2.9em}

/* ---------------- contact / CTA ---------------- */
.contact{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.contact canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.contact .wrap{position:relative;z-index:1}
.contact .eyebrow{color:var(--bronze-l)}
.contact .eyebrow::before{background:var(--bronze-l)}
.ctaTop{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,100px);align-items:end}
@media(max-width:940px){.ctaTop{grid-template-columns:1fr}}
.contact h2{font-size:clamp(2.2rem,6vw,5rem);line-height:1;margin:20px 0 0;max-width:12ch}
.contact h2 em{color:var(--bronze-l)}
.contact .sub{color:#B9B1A4;font-size:17.5px;line-height:1.74;max-width:46ch}
.mailBig{display:block;margin-top:clamp(40px,6vw,74px);padding-top:clamp(26px,4vw,44px);border-top:1px solid rgba(241,239,234,.18);
  font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,7.4vw,5.4rem);line-height:1.05;letter-spacing:-.025em;color:var(--paper);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;transition:color .4s var(--ease)}
.mailBig .arw{font-size:.5em;transition:transform .45s var(--ease)}
.mailBig:hover{color:var(--bronze-l)}
.mailBig:hover .arw{transform:translateX(14px)}
.nextSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(241,239,234,.16);
  border:1px solid rgba(241,239,234,.16);margin-top:clamp(36px,5vw,60px)}
@media(max-width:800px){.nextSteps{grid-template-columns:1fr}}
.nextSteps div{background:var(--ink);padding:24px 24px 26px}
.nextSteps .num{color:var(--bronze-l);font-size:17px}
.nextSteps b{display:block;font-family:var(--disp);font-weight:400;font-size:19px;margin:10px 0 7px;color:var(--paper)}
.nextSteps p{font-size:14.5px;color:#A79F93;line-height:1.66}
.cDetails{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:clamp(36px,5vw,60px);
  padding-top:clamp(26px,4vw,40px);border-top:1px solid rgba(241,239,234,.18)}
@media(max-width:800px){.cDetails{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cDetails{grid-template-columns:1fr}}
.cDetails small{display:block;font-size:12.5px;color:#8F887C;margin-bottom:7px}
.cDetails a,.cDetails p{font-size:16px;color:var(--paper);line-height:1.6;transition:color .25s}
.cDetails a:hover{color:var(--bronze-l)}

/* ---------------- footer ---------------- */
footer{background:var(--ink);color:#9A9287;border-top:1px solid rgba(241,239,234,.13);padding-block:46px 40px}
.fgrid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:36px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
footer h5{font-size:13px;color:#C9C1B4;font-weight:500;margin-bottom:15px}
footer a,footer p{display:block;font-size:14.5px;margin-bottom:9px;color:#9A9287;transition:color .25s}
footer a:hover{color:var(--bronze-l)}
.fbot{display:flex;justify-content:space-between;gap:10px 26px;flex-wrap:wrap;margin-top:44px;padding-top:22px;
  border-top:1px solid rgba(241,239,234,.13);font-size:13.5px}
.fbot nav{display:flex;gap:22px;flex-wrap:wrap}
.fbot a{display:inline;margin:0}

/* ---------------- reveal ---------------- */
.rv{opacity:1;transform:none}
html.anim .rv{opacity:0;transform:translateY(26px)}
html.anim .rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.anim .rv.d1.in{transition-delay:.09s}
html.anim .rv.d2.in{transition-delay:.18s}
html.anim .rv.d3.in{transition-delay:.27s}

/* ---------------- prose (legal pages) ---------------- */
.prose{max-width:74ch;padding-block:clamp(50px,8vh,96px)}
.prose h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:clamp(38px,5vw,60px) 0 14px;line-height:1.14}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-weight:500;font-size:17px;margin:26px 0 8px;letter-spacing:0}
.prose p,.prose li{color:var(--ink-2);font-size:16.5px;line-height:1.82;margin-bottom:16px}
.prose ul{padding-left:20px;margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose a{color:var(--blue-d);border-bottom:1px solid var(--rule-2)}
.prose a:hover{border-color:var(--blue-d)}
.prose strong{color:var(--ink);font-weight:500}
.prose .updated{font-size:14px;color:var(--mut);padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:clamp(30px,4vw,48px)}
.prose .note{background:var(--bronze-wash);border-left:2px solid var(--bronze);padding:18px 22px;margin:26px 0}
.prose .note p{margin:0;font-size:15.5px;color:var(--ink-2)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.anim .rv{opacity:1;transform:none}
  .mqtrack{animation:none!important}
}