/* =========================================================================
   EOTAK, Solutions / Law Enforcement.
   Art direction: WET ASPHALT, AFTER DARK.

   This page shares no layout with the product, software or MARS pages. It is
   built from three ideas:

   1. A night plate. The hero is the photograph, full bleed, with the copy
      standing in the dark half of it. The plate ends on a hard edge and a
      copper curb rule rather than dissolving, the rest of the site fades its
      plates out, so this one does not.
   2. A staircase. The page's argument is coverage: the picture stops where the
      car stops. So the three places a shift outruns its own systems step down
      and across the page, each rule starting copper at its own left edge and
      running out to the right. The resolution sits at the bottom of the flight.
   3. A vertical. The patrol photograph is portrait, so it is used as a tall
      column that stays put while its copy scrolls past it, the lateral tension
      the rest of the page is built around.

   The photography carries the red and blue of emergency lighting. Every rule,
   fill, tick and accent on this page is brand copper or a neutral token, nothing borrows the light bar's palette.

   Loads after css/core.css and nothing else. Any primitive it needs that lives
   in style.css or product.css is restated here under a le- name.
   ========================================================================= */

/* ---- page-local tokens, both themes ------------------------------------- */
:root,
:root[data-theme="dark"]{
  --le-sheen:.17;          /* wet-asphalt specular strength                  */
  --le-rule:var(--line);
  --le-panel-sh:var(--sh-card);
  --le-img:saturate(.94) contrast(1.06) brightness(.60);
}
:root[data-theme="light"]{
  --le-sheen:.10;
  --le-rule:var(--line);
  --le-panel-sh:var(--sh-card);
  --le-img:saturate(.94) contrast(1.06) brightness(.60);
}
/* The hero and the tall figure are dark plates in BOTH themes, a night
   photograph does not become a paper photograph. Their type colors are fixed
   here rather than tokenized, and measured against the plate, not the page. */
.le-hero,.le-tall{
  --on:#F6F3F2;            /* 17.9:1 on the scrimmed plate                   */
  --on2:#D6D1CE;           /* 12.6:1                                        */
  --on3:#B3ACA8;           /*  8.0:1                                        */
  --on-cop:#D9A88A;        /*  9.3:1, copper that survives on near-black    */
}

/* ---- type ---------------------------------------------------------------- */
.le-h1{font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.042em;font-weight:800}
.le-h2{font-size:clamp(29px,3.7vw,52px);line-height:1.02;letter-spacing:-.036em;font-weight:800}
.le-h3{font-size:clamp(19px,1.75vw,25px);line-height:1.2;letter-spacing:-.024em;font-weight:700}
.le-lede{font-size:clamp(16.5px,1.4vw,20px);line-height:1.58;color:var(--fg2);font-weight:350}
.le-p{font-size:15.5px;line-height:1.74;color:var(--fg2);font-weight:350}
.le-lab{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-txt);font-variant-numeric:tabular-nums}
.le-sec{position:relative;padding:clamp(72px,10vh,138px) 0}
.le-cta{display:flex;gap:12px;flex-wrap:wrap}

/* breadcrumb (product.css is not loaded on this page) */
.le-crumb{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on3);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.le-crumb a{color:var(--on3)}
.le-crumb a:hover{color:var(--on-cop)}
.le-crumb span[aria-current]{color:var(--on2)}

/* =========================================================================
   1. HERO, the night plate
   ========================================================================= */
.le-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,84vh,860px);display:flex;align-items:stretch}
.le-hero img.le-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 66%;filter:var(--le-img);z-index:0}
/* Two scrims. The vertical one seats the copy at the bottom of the frame; the
   lateral one darkens the left where the type stands and clears to the right,
   where the wet asphalt and the light bars are the picture. */
.le-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,7,8,.72) 0%,rgba(7,7,8,.26) 30%,rgba(7,7,8,.30) 46%,rgba(7,7,8,.80) 82%,rgba(7,7,8,.93) 100%),
    linear-gradient(97deg,rgba(7,7,8,.88) 0%,rgba(7,7,8,.62) 30%,rgba(7,7,8,.16) 62%,rgba(7,7,8,0) 84%)}
.le-hero .grain{z-index:2}
.le-hero-in{position:relative;z-index:3;flex:1;display:grid;
  grid-template-rows:auto 1fr auto;gap:var(--sp5);
  padding-top:clamp(28px,4.6vh,52px);padding-bottom:clamp(36px,5.6vh,64px)}
.le-hero-copy{max-width:min(100%,760px)}
.le-hero .eyebrow{color:var(--on-cop)}
.le-hero .le-h1{color:var(--on);margin-top:16px;max-width:15ch;
  text-shadow:0 2px 40px rgba(7,7,8,.9),0 1px 3px rgba(7,7,8,.7)}
.le-hero .le-lede{color:var(--on2);margin-top:22px;max-width:56ch;
  text-shadow:0 1px 24px rgba(7,7,8,.9)}
.le-hero .le-cta{margin-top:clamp(26px,3.6vh,36px)}
/* the plate is dark in both themes, so the secondary button is too */
.le-hero .btn2{background:rgba(255,255,255,.07);color:var(--on);border-color:rgba(255,255,255,.24)}
.le-hero .btn2:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}

/* =========================================================================
   2. THE CURB, the fact rail, sitting on the page ground under the plate
   ========================================================================= */
.le-curb{border-top:1px solid rgba(var(--cop-rgb),.55);border-bottom:1px solid var(--le-rule);
  background:var(--bg);position:relative;z-index:4}
.le-curb-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,36px);
  padding-top:clamp(20px,3.2vh,30px);padding-bottom:clamp(20px,3.2vh,30px)}
.le-curb-in > div{position:relative;padding-left:24px}
.le-curb-in > div::before{content:"";position:absolute;left:0;top:5px;width:13px;height:2px;
  background:var(--accent);border-radius:1px}
.le-curb .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute)}
.le-curb .v{font-size:15px;font-weight:600;color:var(--fg);margin-top:8px;line-height:1.35;
  font-variant-numeric:tabular-nums}
.le-curb .v.c{color:var(--accent-txt)}

/* =========================================================================
   3. THE STAIRCASE, where the picture stops
   Each tread indents one step further right. Its rule starts copper at its own
   left edge and fades out to the right; a short copper drop hangs from the
   corner, so the three of them read as a flight of steps going down and across.
   ========================================================================= */
.le-head{max-width:26ch}
.le-head .le-h2{margin-top:16px}
.le-head .le-lede{margin-top:20px;max-width:52ch}

.le-stops{list-style:none;margin:clamp(38px,6vh,74px) 0 0;padding:0}
.le-stop{position:relative;display:grid;
  grid-template-columns:minmax(120px,16%) minmax(0,1fr);
  gap:clamp(16px,3vw,52px);
  padding:clamp(24px,3.6vh,40px) 0 clamp(30px,4.4vh,52px);
  margin-left:calc(var(--i,0) * clamp(0px,6.4vw,120px))}
/* the tread's rule */
.le-stop::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--cop-rgb),.95) 0%,rgba(var(--cop-rgb),.55) 9%,var(--le-rule) 30%,var(--le-rule) 100%)}
/* the riser */
.le-stop::before{content:"";position:absolute;left:0;top:0;width:2px;
  height:clamp(26px,3.6vh,40px);border-radius:1px;
  background:linear-gradient(180deg,var(--accent),rgba(var(--cop-rgb),0))}
.le-stop .le-lab{padding-top:3px}
.le-stop .le-h3{color:var(--fg)}
.le-stop .le-p{margin-top:14px;max-width:56ch}
.le-stop[style*="--i:0"] .le-h3,.le-stop.s0 .le-h3{color:var(--fg2)}

/* the landing, the flight's answer */
.le-answer{position:relative;margin-left:calc(3 * clamp(0px,6.4vw,120px));
  padding:clamp(26px,3.8vh,42px) 0 0;max-width:60ch}
.le-answer::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(var(--cop-rgb),.35) 46%,rgba(var(--cop-rgb),0) 100%)}
.le-answer p{font-size:clamp(17px,1.6vw,22px);line-height:1.5;color:var(--fg);font-weight:400;
  letter-spacing:-.018em;margin-top:14px}

/* =========================================================================
   4. THE VERTICAL, tall patrol column beside what a shift actually runs
   ========================================================================= */
.le-run-in{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1fr);
  gap:clamp(28px,5vw,84px);align-items:start}
.le-tall{position:sticky;top:104px;margin:0}
.le-tall .fr{position:relative;overflow:hidden;border-radius:var(--r-md);
  height:clamp(430px,72vh,700px);
  border:1px solid var(--hair2);box-shadow:var(--lit),var(--sh-deep)}
.le-tall img{width:100%;height:100%;object-fit:cover;object-position:32% 50%;
  filter:var(--le-img)}
/* a copper hairline down the left of the frame, the lane line the page runs on */
.le-tall .fr::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(var(--cop-rgb),0),var(--accent) 22%,var(--accent) 74%,rgba(var(--cop-rgb),0))}
.le-tall figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-top:14px;padding-left:14px;position:relative}
.le-tall figcaption::before{content:"";position:absolute;left:0;top:6px;width:7px;height:2px;
  background:var(--accent)}

.le-run-copy .le-h2{margin-top:16px}
.le-run-copy .le-lede{margin-top:18px;max-width:48ch}
.le-rows{list-style:none;margin:clamp(30px,4.4vh,48px) 0 0;padding:0}
.le-rows li{position:relative;padding:clamp(20px,2.6vh,26px) 0;border-top:1px solid var(--le-rule);
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.le-rows li:first-child{border-top-color:rgba(var(--cop-rgb),.5)}
.le-rows .nm{font-size:16.5px;font-weight:650;color:var(--fg);letter-spacing:-.018em}
.le-rows .ds{font-size:14.5px;line-height:1.68;color:var(--fg2);max-width:62ch}

/* =========================================================================
   5. THE LANE LINE, accountability, as one continuous rule down the page
   ========================================================================= */
.le-record-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.le-record-head{position:sticky;top:104px}
.le-record-head .le-h2{margin-top:16px}
.le-record-head .le-lede{margin-top:20px;max-width:38ch}
.le-rec{border-left:1px solid var(--le-rule);padding-left:0}
.le-rec-item{position:relative;padding:0 0 clamp(28px,4vh,44px) clamp(20px,2.6vw,40px)}
.le-rec-item:last-child{padding-bottom:0}
.le-rec-item::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:38px;
  background:var(--accent)}
.le-rec-item h3{font-size:17.5px;font-weight:650;color:var(--fg);letter-spacing:-.02em;margin-top:-3px}
.le-rec-item p{margin-top:11px;font-size:15px;line-height:1.74;color:var(--fg2);max-width:60ch;
  font-weight:350}

/* =========================================================================
   6. PUBLISHED PRICE, the strongest card on the page, stated flat
   ========================================================================= */
.le-price{border:1px solid var(--hair2);border-top:2px solid var(--accent);
  border-radius:var(--r-md);background:linear-gradient(180deg,var(--s2),var(--s1));
  box-shadow:var(--lit),var(--le-panel-sh);
  padding:clamp(28px,4vw,54px)}
.le-price .le-h2{margin-top:14px;font-size:clamp(26px,2.9vw,40px)}
.le-price > p{margin-top:16px;max-width:60ch;font-size:15.5px;line-height:1.7;color:var(--fg2);
  font-weight:350}
.le-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,46px);
  margin-top:clamp(28px,4vh,44px)}
.le-fig{border-top:1px solid var(--le-rule);padding-top:18px}
.le-fig .n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.1vw,42px);font-weight:600;letter-spacing:-.03em;color:var(--accent-txt);
  line-height:1}
.le-fig .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin-top:11px;font-variant-numeric:tabular-nums}
.le-fig .s{font-size:13.5px;line-height:1.62;color:var(--fg2);margin-top:10px;font-weight:350}
.le-price .le-more{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(26px,3.6vh,36px);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-txt)}

/* =========================================================================
   7. CLOSER, wet asphalt, drawn rather than photographed
   Copper only. The sheen is three soft speculars sitting below the baseline,
   the way light lies on a wet road; it drifts 2.4% over 38s and freezes under
   prefers-reduced-motion.
   ========================================================================= */
.le-close{position:relative;overflow:hidden;text-align:center;
  border-top:1px solid var(--hair2);background:var(--bg);
  padding:clamp(88px,13vh,168px) 0 clamp(96px,14vh,180px)}
.le-sheen{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(36% 40% at 21% 76%,rgba(var(--cop-rgb),var(--le-sheen)),rgba(var(--cop-rgb),0) 70%),
    radial-gradient(20% 34% at 50% 83%,rgba(var(--cop3-rgb),calc(var(--le-sheen) * .8)),rgba(var(--cop3-rgb),0) 72%),
    radial-gradient(30% 38% at 79% 74%,rgba(var(--cop-rgb),calc(var(--le-sheen) * .9)),rgba(var(--cop-rgb),0) 70%),
    linear-gradient(180deg,rgba(var(--cop-rgb),0) 42%,rgba(var(--cop-rgb),calc(var(--le-sheen) * .45)) 93%,rgba(var(--cop-rgb),0) 100%);
  filter:blur(10px);
  animation:le-drift 38s ease-in-out infinite alternate}
@keyframes le-drift{from{transform:translateX(-1.2%)}to{transform:translateX(1.2%)}}
.le-close-in{position:relative;z-index:2}
.le-close .le-mark{width:64px;height:2px;background:var(--accent);margin:0 auto 26px;border-radius:1px}
.le-close .le-h2{margin-top:18px}
.le-close-in > p:first-of-type{margin:20px auto 0;max-width:48ch;font-size:clamp(16px,1.4vw,19px);
  line-height:1.6;color:var(--fg2);font-weight:350}
.le-close .le-cta{justify-content:center;margin-top:clamp(26px,3.6vh,36px)}
.le-close .le-addr{margin-top:30px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim)}

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width:1100px){
  .le-sec{padding:clamp(60px,8vh,100px) 0}
  .le-record-head{position:static}
  .le-record-in{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,40px)}
  .le-run-in{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,44px)}
  .le-tall{position:static}
  .le-tall .fr{height:clamp(360px,52vh,460px)}
  .le-tall img{object-position:32% 34%}
  .le-figs{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
@media (max-width:860px){
  .le-hero{min-height:clamp(520px,78vh,700px)}
  .le-curb-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
  .le-stop{grid-template-columns:minmax(0,1fr);gap:12px;
    margin-left:calc(var(--i,0) * clamp(0px,3.4vw,34px))}
  .le-answer{margin-left:calc(3 * clamp(0px,3.4vw,34px))}
  .le-figs{grid-template-columns:minmax(0,1fr);gap:0}
  .le-fig{padding:18px 0}
  .le-fig + .le-fig{border-top:1px solid var(--le-rule)}
}
@media (max-width:560px){
  .le-hero-in{padding-bottom:clamp(30px,5vh,44px)}
  .le-curb-in{grid-template-columns:minmax(0,1fr)}
  .le-stop,.le-answer{margin-left:0}
  .le-cta .btn,.le-cta .btn2{flex:1 1 auto;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .le-sheen{animation:none}
  .le-record-head{position:static}
}