/* =========================================================
   EOTAK, First Response.  "Night operations."
   Loaded after core.css and NOTHING else. This page does not
   use style.css or product.css; every primitive it needs that
   core.css does not already carry is written out below.

   The argument: fire, EMS and search and rescue work at night,
   on ground that has no street numbers. So the page is night, full-bleed photographic plates with the type sitting inside
   the dark, separated by quiet passages of set text.

   US English throughout, source included.
   ========================================================= */

/* ---------------------------------------------------------
   PAGE TOKENS
   The plates carry a photograph, and a photograph does not
   change when the reader flips the theme. So the "night" ramp
   is declared identically in both themes on purpose: white type
   on a dark picture stays white on paper. Everything between
   the plates uses the ordinary contract tokens, which is what
   gives the light theme its own reading, dark plates
   punctuating warm paper, like a printed photo essay.
   --------------------------------------------------------- */
.fr-page{
  --navh:66px;

  --night:#0B0A0A;                 /* plate ground; identical to --bg in dark,
                                      so a plate dissolves into the page there
                                      and ends cleanly against paper in light  */
  --night-rgb:11,10,10;
  --night-fg:#F6F3F2;              /* 17.91:1 on --night                       */
  --night-fg2:#CFC8C3;             /* 11.96:1 on --night                       */
  --night-fg3:#9F9793;             /*  6.89:1 on --night                       */
  --night-line:rgba(255,255,255,.15);
  --night-hair:rgba(255,255,255,.08);
  --ember:#D9A88A;                 /*  9.34:1 on --night, copper, opened up
                                      for small type over the picture          */
  --ember-rgb:217,168,138;

  /* the atmospheric wash. Copper, per the token contract, with an explicit
     zero-alpha stop of the same hue so it never cuts off at a hard edge. */
  --wash:.15;
}
:root[data-theme="light"] .fr-page{
  --night:#0B0A0A; --night-rgb:11,10,10;
  --night-fg:#F6F3F2; --night-fg2:#CFC8C3; --night-fg3:#9F9793;
  --night-line:rgba(255,255,255,.15);
  --night-hair:rgba(255,255,255,.08);
  --ember:#D9A88A; --ember-rgb:217,168,138;
  --wash:.085;                     /* copper reads far hotter on paper         */
}

.fr-page{background:var(--bg);color:var(--fg)}

/* ---------------------------------------------------------
   SHARED SMALL PARTS
   --------------------------------------------------------- */
.tag{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.tag.on-night{color:var(--ember)}

.fr-crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--night-fg3)}
.fr-crumb a{color:var(--night-fg3)}
.fr-crumb a:hover{color:var(--ember)}
.fr-crumb span[aria-hidden]{margin:0 7px;opacity:.6}
.fr-crumb [aria-current]{color:var(--night-fg2)}

.fr-h1{font-family:var(--font-display);font-size:clamp(40px,6.6vw,94px);font-weight:800;
  line-height:.97;letter-spacing:-.04em}
.fr-h2{font-family:var(--font-display);font-size:clamp(29px,4.2vw,58px);font-weight:800;
  line-height:1.02;letter-spacing:-.036em}
.fr-h3{font-family:var(--font-display);font-size:clamp(21px,2.1vw,30px);font-weight:700;
  line-height:1.14;letter-spacing:-.028em}
.fr-lede{font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.62;font-weight:350}
.fr-body{font-size:15.5px;line-height:1.75;font-weight:350}

.fr-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.fr-cta.center{justify-content:center}

.fr-note{font-size:10.5px;letter-spacing:.2em;color:var(--night-fg3)}

/* ---------------------------------------------------------
   1, THE HERO PLATE
   Full bleed, edge to edge, running up behind the nav. The
   picture's own black is in its lower left, which is where the
   type sits; the scrims only insure that.
   --------------------------------------------------------- */
.fr-hero{position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(-1 * var(--navh));
  min-height:clamp(620px,96vh,960px);
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--night)}
.fr-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 46%;z-index:0;filter:brightness(.86) saturate(1.04)}

/* two scrims: one lifts the left column, one seats the base of the plate on the
   page ground. Both end on an explicit zero-alpha stop of the same ink. */
.fr-hero .sc{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--night-rgb),.90) 0%,rgba(var(--night-rgb),.62) 30%,
                          rgba(var(--night-rgb),.18) 60%,rgba(var(--night-rgb),0) 84%),
    linear-gradient(180deg,rgba(var(--night-rgb),.80) 0%,rgba(var(--night-rgb),.18) 22%,
                          rgba(var(--night-rgb),0) 40%,rgba(var(--night-rgb),.72) 82%,
                          rgba(var(--night-rgb),1) 100%)}
.fr-hero .grain{z-index:2}

.fr-hero-in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(120px,16vh,190px) var(--sp7) clamp(26px,3.4vh,40px)}
.fr-hero-in>*+*{margin-top:clamp(14px,1.8vh,22px)}
.fr-hero .fr-h1{color:var(--night-fg);max-width:15ch;
  text-shadow:0 2px 40px rgba(var(--night-rgb),.9),0 1px 3px rgba(var(--night-rgb),.75)}
.fr-hero .fr-lede{color:var(--night-fg2);max-width:56ch;
  text-shadow:0 1px 22px rgba(var(--night-rgb),.9)}
.fr-hero .fr-cta{margin-top:clamp(22px,3vh,34px)}

/* the ember strip, four facts sitting on the base of the picture, not on a
   panel below it. Tabular figures; the face is proportional. */
.fr-strip{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(16px,2.2vh,22px) var(--sp7) clamp(22px,3vh,30px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp5)}
.fr-strip::before{content:"";position:absolute;left:var(--sp7);right:var(--sp7);top:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--ember-rgb),.72),var(--night-line) 34%,var(--night-line))}
.fr-strip .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--night-fg3);font-variant-numeric:tabular-nums}
.fr-strip .v{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.015em;
  margin-top:8px;color:var(--night-fg);font-variant-numeric:tabular-nums}
.fr-strip .v.c{color:var(--ember)}

/* ---------------------------------------------------------
   2, THE QUIET GAP
   One statement, set large, with a copper wash standing behind
   it. Nothing else in the viewport.
   --------------------------------------------------------- */
.fr-say{position:relative;overflow:hidden;
  padding:clamp(96px,15vh,190px) 0 clamp(88px,13vh,170px)}
.fr-say::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-6%;top:-30%;width:78%;height:150%;
  background:radial-gradient(closest-side,rgba(var(--cop-rgb),var(--wash)),rgba(var(--cop-rgb),0) 100%);
  animation:fr-drift 38s ease-in-out infinite alternate}
@keyframes fr-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(5%,3%,0)}}
.fr-say .wrap{position:relative;z-index:1}
.fr-statement{font-family:var(--font-display);font-size:clamp(25px,3.5vw,48px);font-weight:350;
  line-height:1.17;letter-spacing:-.032em;color:var(--fg);max-width:min(20ch,90%);
  margin-top:clamp(20px,2.6vh,30px)}
.fr-statement em{font-style:normal;color:var(--accent-txt);font-weight:500}
.fr-say .fr-body{color:var(--fg2);max-width:58ch;margin-top:clamp(22px,3vh,34px)}

/* ---------------------------------------------------------
   3, THE BEATS
   The three things fire, EMS and SAR name first. Full-width
   rows with a hanging label, divided by a rule that catches an
   ember at its left end. Not columns, not cards.
   --------------------------------------------------------- */
.fr-beats{padding:0 0 clamp(90px,13vh,168px)}
.fr-beat{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding:clamp(34px,4.6vh,54px) 0}
.fr-beat::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--cop-rgb),.85),var(--line) 26%,var(--line))}
.fr-beat:last-child{border-bottom:1px solid var(--line)}
.fr-beat .fr-h3{color:var(--fg)}
.fr-beat p{color:var(--fg2);max-width:60ch;margin-top:14px;
  font-size:15.5px;line-height:1.75;font-weight:350}
.fr-beat .tag{padding-top:6px}

/* ---------------------------------------------------------
   4, THE SECOND PLATE
   The aerial. Its black is at the top, so the type is at the
   top; the crew and the drone stay in view underneath.
   --------------------------------------------------------- */
.fr-plate{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,86vh,880px);display:flex;flex-direction:column;
  justify-content:flex-start;background:var(--night)}
.fr-plate>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 62%;z-index:0;filter:brightness(.88) saturate(1.02)}
.fr-plate .sc{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--night-rgb),.92) 0%,rgba(var(--night-rgb),.74) 30%,
                          rgba(var(--night-rgb),.16) 56%,rgba(var(--night-rgb),0) 74%),
    linear-gradient(90deg,rgba(var(--night-rgb),.78) 0%,rgba(var(--night-rgb),.30) 42%,
                          rgba(var(--night-rgb),0) 72%)}
.fr-plate .grain{z-index:2}
.fr-plate-in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(66px,10vh,120px) var(--sp7) clamp(48px,7vh,90px)}
.fr-plate-in>*+*{margin-top:clamp(14px,1.8vh,22px)}
.fr-plate .fr-h2{color:var(--night-fg);max-width:16ch;
  text-shadow:0 2px 36px rgba(var(--night-rgb),.85)}
.fr-plate .fr-lede{color:var(--night-fg2);max-width:54ch;
  text-shadow:0 1px 20px rgba(var(--night-rgb),.9)}
.fr-plate figcaption{margin-top:clamp(26px,4vh,44px);font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--night-fg3)}

/* ---------------------------------------------------------
   5, WHAT YOU RUN
   A vertical rail with an ember at each stop. The list runs
   down the page rather than across it, which is the opposite
   of every other page in this build.
   --------------------------------------------------------- */
.fr-run{padding:clamp(96px,15vh,180px) 0 clamp(80px,12vh,150px)}
.fr-lead .fr-h2{color:var(--fg);margin-top:16px;max-width:18ch}
.fr-lead .fr-body{color:var(--fg2);max-width:56ch;margin-top:18px}
.fr-list{list-style:none;padding:0;margin:clamp(44px,6vh,74px) 0 0}
.fr-list li{position:relative;padding:0 0 clamp(30px,4vh,44px) clamp(34px,4vw,54px)}
.fr-list li:last-child{padding-bottom:0}
.fr-list li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 5px rgba(var(--cop-rgb),.16),0 0 22px 2px rgba(var(--cop-rgb),.55)}
.fr-list li::after{content:"";position:absolute;left:4px;top:22px;bottom:-4px;width:1px;
  background:linear-gradient(180deg,rgba(var(--cop-rgb),.5),var(--line))}
.fr-list li:last-child::after{display:none}
.fr-list h3{font-family:var(--font-display);font-size:clamp(19px,1.7vw,23px);font-weight:700;
  letter-spacing:-.024em;color:var(--fg);line-height:1.2}
.fr-list p{color:var(--fg2);max-width:62ch;margin-top:11px;
  font-size:15.5px;line-height:1.75;font-weight:350}

/* ---------------------------------------------------------
   6, AFTER THE INCIDENT
   --------------------------------------------------------- */
.fr-after{position:relative;overflow:hidden;padding:0 0 clamp(90px,13vh,170px)}
.fr-after::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-10%;top:-40%;width:70%;height:170%;
  background:radial-gradient(closest-side,rgba(var(--cop-rgb),var(--wash)),rgba(var(--cop-rgb),0) 100%)}
.fr-after .wrap{position:relative;z-index:1}
.fr-after-in{border-top:1px solid var(--line);padding-top:clamp(40px,5.5vh,64px)}
.fr-after .fr-h2{color:var(--fg);margin-top:16px;max-width:15ch}
.fr-after .fr-lede{color:var(--fg2);max-width:64ch;margin-top:22px}
.fr-out{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.6vh,38px)}
.fr-out span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-txt);font-variant-numeric:tabular-nums;
  border:1px solid rgba(var(--cop4-rgb),.42);border-radius:999px;padding:6px 13px}

/* ---------------------------------------------------------
   7, WHAT IT COSTS
   Three published figures, divided by hairlines. No toggle, the toggle lives on the pricing table, and this is a quote
   of it, not a copy of it.
   --------------------------------------------------------- */
.fr-cost{padding:0 0 clamp(96px,14vh,180px)}
.fr-cost-in{border-top:1px solid var(--line);padding-top:clamp(40px,5.5vh,64px)}
.fr-cost .fr-h2{color:var(--fg);margin-top:16px;max-width:16ch}
.fr-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5.5vh,66px)}
.fr-figs>div{padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--line)}
.fr-figs>div:first-child{padding-left:0;border-left:0}
.fr-figs .f{font-family:var(--font-display);font-size:clamp(32px,4.2vw,58px);font-weight:800;
  letter-spacing:-.042em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.fr-figs .f i{font-style:normal;color:var(--accent-txt)}
.fr-figs .l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-top:12px;line-height:1.6;
  font-variant-numeric:tabular-nums}
.fr-cost .fr-body{color:var(--fg2);max-width:64ch;margin-top:clamp(32px,4.4vh,50px)}
.fr-cost .fr-body+.fr-body{margin-top:18px}

/* ---------------------------------------------------------
   8, THE CLOSING PLATE
   The hero picture again, flipped and pulled right down, so the
   page opens and closes on the same ridge.
   --------------------------------------------------------- */
.fr-close{position:relative;isolation:isolate;overflow:hidden;background:var(--night);
  min-height:clamp(500px,72vh,720px);display:flex;align-items:center;
  border-bottom:1px solid var(--night-hair)}
.fr-close>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;z-index:0;transform:scaleX(-1);filter:brightness(.44) saturate(.9)}
.fr-close .sc{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(72% 58% at 50% 60%,rgba(var(--cop-rgb),.22),rgba(var(--cop-rgb),0) 100%),
    linear-gradient(180deg,rgba(var(--night-rgb),.86) 0%,rgba(var(--night-rgb),.42) 34%,
                          rgba(var(--night-rgb),.52) 70%,rgba(var(--night-rgb),.92) 100%)}
.fr-close .grain{z-index:2}
.fr-close-in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(70px,10vh,120px) var(--sp7);text-align:center}
.fr-close .fr-h2{color:var(--night-fg);margin-top:18px;max-width:18ch;
  margin-left:auto;margin-right:auto;text-shadow:0 2px 40px rgba(var(--night-rgb),.9)}
.fr-close .fr-lede{color:var(--night-fg2);max-width:48ch;margin:20px auto 0;
  text-shadow:0 1px 20px rgba(var(--night-rgb),.9)}
.fr-close .fr-cta{margin-top:clamp(26px,3.6vh,38px)}
.fr-close .fr-note{margin-top:clamp(26px,3.4vh,36px)}
/* the secondary button sits on a photograph here, so it stops borrowing the
   page ground and carries its own night surface in both themes */
.fr-close .btn2{background:rgba(255,255,255,.09);color:var(--night-fg);
  border-color:var(--night-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.fr-close .btn2:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);
  color:var(--night-fg)}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1100px){
  .fr-hero-in,.fr-strip,.fr-plate-in,.fr-close-in{padding-left:var(--sp5);padding-right:var(--sp5)}
  .fr-strip::before{left:var(--sp5);right:var(--sp5)}
  .fr-hero{min-height:clamp(560px,88vh,860px)}
  .fr-plate{min-height:clamp(520px,78vh,780px)}
}
@media (max-width:900px){
  .fr-beat{grid-template-columns:1fr;gap:14px}
  .fr-beat .tag{padding-top:0}
  .fr-figs{grid-template-columns:1fr;gap:26px}
  .fr-figs>div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:20px}
  .fr-figs>div:first-child{border-top:0;padding-top:0}
}
@media (max-width:720px){
  .fr-strip{grid-template-columns:1fr 1fr;gap:22px var(--sp4)}
  .fr-hero .fr-h1{max-width:none}
  .fr-statement{max-width:none}
  .fr-cta .btn,.fr-cta .btn2{flex:1 1 auto;justify-content:center}
}

/* the wash is decoration and it moves; reduced motion stops it dead. core.css
   already clamps every animation, this states it. */
@media (prefers-reduced-motion:reduce){
  .fr-say::before{animation:none}
}