/* ============================================================
   LV CONTRACT SERVICES — THE MONOLITH
   Industrial monolith / brutalist elegance / blueprint precision.
   Motion: every animated value is driven by --p, a 0..1 scroll
   progress written by assets/scrub.js. Scroll position IS the
   playhead: stop and it stops, reverse and it reverses exactly.
   ============================================================ */
:root{
  --ground:#07090B; --ground-2:#0C1015; --navy:#061B33; --navy-d:#02101F;
  --blue:#185890; --sky:#5FA8FF; --concrete:#8A9199; --steel:#C8CDD3;
  --paper:#F4F6F9; --rule:rgba(200,205,211,.18); --wa:#25D366;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--steel);font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1500px;margin:0 auto;padding-inline:var(--gut)}

/* --- technical micro-type ------------------------------------ */
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--concrete);display:block}
.tag--blue{color:var(--sky)}
.rulebar{height:1px;background:var(--rule);width:100%}

/* --- fixed structural grid overlay ---------------------------- */
.grid-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/ calc(100%/6) 100%,
    linear-gradient(var(--rule) 1px,transparent 1px) 0 0/ 100% 25vh;
  opacity:.34}
@media(max-width:780px){.grid-overlay{background-size:calc(100%/3) 100%,100% 30vh;opacity:.22}}

/* --- header --------------------------------------------------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.9rem var(--gut);
  background:linear-gradient(180deg,rgba(7,9,11,.97) 0%,rgba(7,9,11,.86) 58%,rgba(7,9,11,0) 100%);
  backdrop-filter:blur(9px)}
.hdr__mark{font-family:var(--disp);font-weight:800;font-stretch:118%;letter-spacing:.14em;
  font-size:.82rem;color:var(--paper);text-decoration:none;text-transform:uppercase}
.hdr nav{display:flex;gap:1.35rem;align-items:center}
.hdr nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--concrete);text-decoration:none;transition:color .2s;white-space:nowrap}
.hdr nav a:hover,.hdr nav a[aria-current]{color:var(--sky)}
.hdr nav .num{color:var(--sky)}
@media(max-width:760px){
  /* the numerals carry the wayfinding on a phone; the words do not fit */
  .hdr nav{gap:.95rem}
  .hdr nav .lbl{display:none}
  .hdr__mark{font-size:.7rem;letter-spacing:.1em}
}
@media(max-width:380px){.hdr__mark{max-width:9.5rem;overflow:hidden;text-overflow:ellipsis}}

/* --- 01 THE EXCAVATION --------------------------------------- */
.excav{position:relative;height:320vh}
.excav__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;
  overflow:hidden}
#blueprint{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.excav__word{position:relative;z-index:2;margin:0;text-align:center;font-family:var(--disp);
  color:var(--paper);text-transform:uppercase;line-height:.84;
  /* the scroll IS the playhead: tracking, weight, width and scale all read --p */
  font-weight:calc(200 + var(--p,0) * 700);
  font-stretch:calc(62% + var(--p,0) * 63%);
  letter-spacing:calc(-0.02em + var(--p,0) * 0.26em);
  transform:scale(calc(1 + var(--p,0) * 1.9));
  opacity:calc(1 - max(0, (var(--p,0) - .62)) * 2.6);
  font-size:clamp(2.1rem,8.6vw,7.4rem)}
.excav__word span{display:block}
.excav__word .sm{font-size:.3em;font-weight:500;font-stretch:112%;letter-spacing:.42em;
  color:var(--sky);margin-top:1.1rem}
.excav__meta{position:absolute;z-index:3;bottom:2.1rem;left:var(--gut);
  right:calc(var(--gut) + 68px);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  opacity:calc(1 - var(--p,0) * 1.7)}
.excav__plate{position:absolute;z-index:1;inset:0;display:grid;place-items:center;
  opacity:calc(max(0, var(--p,0) - .66) * 3);pointer-events:none}
.excav__plate img{width:min(78vw,760px);filter:contrast(1.06) saturate(.82) brightness(.92);
  transform:scale(calc(.88 + var(--p,0) * .16))}

/* --- 02 THE STRUCTURAL SPLIT --------------------------------- */
.split{position:relative;z-index:2;background:var(--ground);border-top:1px solid var(--rule)}
.split__inner{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:clamp(24px,5vw,80px);
  align-items:start}
.split__left{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding-block:4rem}
.pillar{font-family:var(--disp);font-weight:800;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(1.6rem,3.3vw,3rem);line-height:1.02;margin:0 0 .18em;
  color:var(--concrete);opacity:.3;transition:opacity .45s,color .45s}
.pillar.on{opacity:1;color:var(--paper)}
.pillar.on::after{content:"";display:block;width:2.6rem;height:3px;background:var(--sky);
  margin-top:.34em}
.split__note{margin-top:2.2rem;max-width:34ch;color:var(--concrete);font-size:.95rem}
.split__right{padding-block:14vh 12vh;display:flex;flex-direction:column;gap:clamp(60px,12vh,150px)}
.plate{position:relative;transform:translate3d(0,calc(var(--drift,0px) * var(--speed,1)),0)}
.plate img{border:1px solid var(--rule);filter:contrast(1.05) saturate(.86)}
.plate figcaption{margin-top:.75rem;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete)}
@media(max-width:820px){
  .split__inner{grid-template-columns:1fr}
  .split__left{position:relative;min-height:auto;padding-block:5rem 1rem}
  .split__right{padding-block:2rem 6vh}
  .plate{transform:none}
}

/* metrics, masked in word by word */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:0}
.metric{background:var(--ground);padding:1.4rem 1.2rem}
.metric dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--concrete);margin-bottom:.5rem}
.metric dd{margin:0;font-family:var(--disp);font-weight:800;font-stretch:115%;
  font-size:clamp(1.5rem,2.6vw,2.4rem);color:var(--paper);line-height:1}
.mask{display:inline-block;overflow:hidden;vertical-align:bottom}
.mask>span{display:inline-block;transform:translateY(calc((1 - var(--w,0)) * 112%));
  opacity:var(--w,0)}

/* --- 03 THE BLUEPRINT OVERLAY -------------------------------- */
.coord{display:inline-flex;align-items:center;gap:.7rem;background:none;border:1px solid var(--rule);
  color:var(--sky);font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.85rem 1.2rem;cursor:pointer;transition:border-color .25s,background .25s}
.coord:hover{border-color:var(--sky);background:rgba(24,88,144,.12)}
.coord__glyph{font-size:1.1rem;line-height:1}
.bp{position:fixed;inset:0;z-index:90;background:rgba(2,16,31,.97);display:none;
  overflow-y:auto;overscroll-behavior:contain}
.bp[data-open="1"]{display:block}
.bp__inner{min-height:100%;padding:clamp(60px,9vh,110px) var(--gut) 5rem;
  display:grid;grid-template-columns:1fr;gap:2rem;align-content:start}
.bp__close{position:fixed;top:1rem;right:var(--gut);z-index:2;background:none;
  border:1px solid var(--rule);color:var(--paper);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;padding:.7rem 1rem;cursor:pointer}
.bp__stage{position:relative;max-width:820px;margin:0 auto;width:100%}
.bp__stage img{filter:grayscale(.55) contrast(1.1) brightness(.78)}
.bp__svg{position:absolute;inset:0;width:100%;height:100%}
.bp__svg path,.bp__svg line,.bp__svg circle,.bp__svg rect{
  stroke:var(--sky);fill:none;stroke-width:1.1;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:calc(var(--len,1200) * (1 - var(--d,0)))}
.bp__specs{max-width:820px;margin:0 auto;width:100%;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.bp__spec{background:var(--navy-d);padding:1.1rem}
.bp__spec b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky);margin-bottom:.4rem;font-weight:500}

/* --- THE PROJECT LEDGER -------------------------------------- */
.ledger{padding-block:clamp(90px,14vh,150px) 6rem}
.ledger__filters{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:2rem 0 3rem}
.filt{background:var(--ground);border:0;color:var(--concrete);font-family:var(--mono);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:.9rem 1.15rem;
  cursor:pointer;flex:1 1 auto;transition:color .2s,background .2s}
.filt[aria-pressed="true"]{background:var(--sky);color:var(--navy-d)}
.rows{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.row{background:var(--ground);display:grid;
  grid-template-columns:3.4rem minmax(0,1fr) minmax(0,auto);
  gap:.85rem;align-items:center;padding:1rem 1.15rem;cursor:pointer;
  transition:background .25s}
@media(max-width:620px){
  /* stack rather than squeeze: a three-column ledger row cannot hold a long
     title and a metadata string side by side at 390px without overflowing */
  .row{grid-template-columns:3.4rem minmax(0,1fr);row-gap:.3rem}
  .row__m{grid-column:2;text-align:left}
}
.row:hover,.row.on{background:var(--ground-2)}
.row__n{font-family:var(--mono);font-size:.68rem;color:var(--sky);letter-spacing:.14em}
.row__t{font-family:var(--disp);font-weight:700;font-stretch:112%;font-size:clamp(1rem,1.8vw,1.42rem);
  text-transform:uppercase;letter-spacing:.02em;color:var(--steel);transition:color .25s,filter .35s}
.row:hover .row__t,.row.on .row__t{color:var(--paper)}
.rows.focusing .row:not(:hover):not(.on) .row__t{filter:blur(2.4px);opacity:.5}
.row__m{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete);text-align:right}
.row[hidden]{display:none}
.canvasbox{position:sticky;top:12vh;margin-top:3rem}
.canvasbox figure{margin:0;border:1px solid var(--rule);background:var(--ground-2);
  min-height:220px;display:grid;place-items:center;padding:1rem}
.canvasbox img{filter:contrast(1.06) saturate(.88);transition:opacity .35s}
.canvasbox figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--concrete);margin-top:.8rem;text-align:center}
.pairgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.pairgrid figure{margin:0;background:var(--ground);padding:0;position:relative}
.pairgrid figcaption{position:absolute;top:0;left:0;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;background:var(--navy-d);color:var(--sky);
  padding:.4rem .6rem}
.pairs{display:grid;gap:2.4rem}
.pair__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--concrete);margin:.8rem 0 0}

/* --- THE SPECIFICATION --------------------------------------- */
.spec{padding-block:clamp(90px,14vh,150px) 5rem;
  background-image:linear-gradient(90deg,var(--rule) 1px,transparent 1px),
                   linear-gradient(var(--rule) 1px,transparent 1px);
  background-size:calc(100%/12) 100%,100% 5.5rem;background-position:0 0}
.specgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
.specgrid section{background:var(--ground);padding:1.6rem 1.4rem}
.specgrid h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin:0 0 .9rem;font-weight:500}
.specgrid p,.specgrid li{font-size:.95rem;color:var(--steel)}
.specgrid ul{margin:0;padding-left:1.1rem}
.bigcall{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:1px}
.bigcall a{background:var(--ground);padding:1.6rem 1.4rem;text-decoration:none;display:block;
  transition:background .25s}
.bigcall a:hover{background:var(--ground-2)}
.bigcall b{display:block;font-family:var(--disp);font-weight:800;font-stretch:115%;
  font-size:clamp(1.3rem,2.4vw,2rem);color:var(--paper);text-transform:uppercase;line-height:1.05}
.bigcall--wa b{color:var(--wa)}

/* --- section heads, footer ----------------------------------- */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--rule);padding-bottom:.9rem;margin-bottom:2.4rem}
.sechead h2{font-family:var(--disp);font-weight:800;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,3.2rem);line-height:.98;margin:0;color:var(--paper);
  letter-spacing:.005em}
.ftr{border-top:1px solid var(--rule);padding:3rem var(--gut) 4rem;
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--concrete);position:relative;z-index:2;background:var(--ground)}
.ftr a{color:var(--concrete);text-decoration:none}
.ftr a:hover{color:var(--sky)}

/* --- sticky whatsapp ----------------------------------------- */
.wafab{position:fixed;right:clamp(12px,3vw,26px);bottom:clamp(12px,3vw,26px);z-index:70;
  background:var(--wa);color:#04210F;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:width .2s,border-radius .2s}
.wafab__txt{display:none}
@media(hover:hover){
  .wafab:hover{width:auto;border-radius:27px;padding:0 1.15rem;gap:.55rem}
  .wafab:hover .wafab__txt{display:inline}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.6rem;z-index:99;background:var(--sky);color:var(--navy-d);
  padding:.7rem 1rem;font-family:var(--mono);font-size:.7rem}

/* --- motion off: everything resolves to its END state --------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .excav{height:auto}
  .excav__stage{position:relative;height:auto;padding-block:26vh 12vh}
  .excav__word{transform:none;opacity:1;font-weight:800;font-stretch:118%;letter-spacing:.12em}
  .excav__plate{position:relative;opacity:1;inset:auto;margin-top:3rem}
  .excav__meta{position:relative;opacity:1;bottom:auto;left:auto;right:auto;margin-top:2rem}
  .plate{transform:none}
  .mask>span{transform:none;opacity:1}
  .bp__svg path,.bp__svg line,.bp__svg circle,.bp__svg rect{stroke-dashoffset:0}
  .split__left{position:relative;min-height:auto}
}