/* ==========================================================================
   4D Energy Incorporated — 4denergy.ca
   Palette and type are derived from the product itself: charcoal container
   paint, galvanized steel, the cold cyan of interior light spilling from an
   open door, and the safety amber of bollards and CSC plates.
   Two accents, each with one job:
     cyan  = live / operational / signal
     amber = physical / structural / act here
   ========================================================================== */

:root{
  /* steel */
  --steel-900:#12161A;
  --steel-800:#1C2227;
  --steel-700:#242B31;
  --steel-600:#333C44;
  --steel-500:#4A555E;
  --steel-400:#7F8B95;
  --steel-300:#AEB8C0;

  /* galvanized paper */
  --plate:#E7E5E0;
  --plate-2:#DCDAD4;
  --ink:#151A1E;
  --ink-2:#4C555C;

  --cyan:#4FD1E0;
  --cyan-dim:#2B8C99;
  --amber:#E8A33D;
  --amber-dark:#C9862A;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,56px);
  --sec-y:clamp(72px,9vw,132px);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--steel-900);
  color:var(--steel-300);
  font:400 17px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amber);color:var(--steel-900);
  padding:12px 20px;font:600 14px/1 var(--f-body);
}
.skip:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px;
}

/* ---------- type ---------- */
.h2{
  font:700 clamp(30px,4.2vw,52px)/1.06 var(--f-display);
  letter-spacing:-.021em;margin:0 0 20px;
  color:var(--plate);text-wrap:balance;
}
.h3{font:600 21px/1.25 var(--f-display);letter-spacing:-.01em;margin:0 0 10px;color:var(--plate)}
.h4{font:600 18px/1.3 var(--f-display);letter-spacing:-.005em;margin:0 0 6px;color:var(--plate)}

.eyebrow{
  font:500 11.5px/1 var(--f-mono);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--amber-dark);margin:0 0 18px;
}
.eyebrow--onDark{color:var(--amber)}

p{margin:0 0 18px}
.section__lede{font-size:19px;color:var(--steel-300);max-width:56ch}

.link-arrow{
  display:inline-block;margin-top:10px;
  font:500 15px/1 var(--f-body);text-decoration:none;
  color:var(--cyan-dim);border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:color .2s var(--ease);
}
.link-arrow::after{content:" →"}
.link-arrow:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--f-body);letter-spacing:.01em;
  padding:15px 24px;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--amber{background:var(--amber);color:#1A1204;border-color:var(--amber)}
.btn--amber:hover{background:#F5B455;border-color:#F5B455}
.btn--ghost{background:transparent;color:var(--plate);border-color:rgba(231,229,224,.4)}
.btn--ghost:hover{border-color:var(--plate);background:rgba(231,229,224,.08)}
.btn--sm{padding:11px 17px;font-size:13px}
.btn--block{width:100%}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(18,22,26,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s var(--ease);
}
.nav.is-scrolled{background:rgba(18,22,26,.95)}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter);
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--plate)}
.brand__mark{width:32px;height:32px;flex:none;color:var(--steel-400)}
.brand__word{font:500 16px/1 var(--f-display);letter-spacing:.13em}
.brand__word b{font-weight:800;letter-spacing:.02em}

.nav__menu{display:flex;align-items:center;gap:28px}
.nav__menu a{
  font:500 14px/1 var(--f-body);text-decoration:none;color:var(--steel-300);
  transition:color .2s var(--ease);
}
.nav__menu a:hover{color:var(--plate)}
.nav__menu a.is-active{color:var(--cyan)}
.nav__menu .btn{color:#1A1204}
.nav__menu .btn:hover{color:#1A1204}
.nav__menu .btn.is-active{color:#1A1204}

.nav__toggle{
  display:none;width:42px;height:42px;background:none;border:0;padding:0;cursor:pointer;
  align-items:center;justify-content:center;color:var(--plate);
}
.nav__bars,.nav__bars::before,.nav__bars::after{
  display:block;width:22px;height:2px;background:currentColor;transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.nav__bars{position:relative}
.nav__bars::before,.nav__bars::after{content:"";position:absolute}
.nav__bars::before{transform:translateY(-7px)}
.nav__bars::after{transform:translateY(7px)}
.nav__toggle[aria-expanded="true"] .nav__bars{background:transparent}
.nav__toggle[aria-expanded="true"] .nav__bars::before{transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bars::after{transform:rotate(-45deg)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:min(94vh,880px);
  display:flex;align-items:flex-end;
  padding:150px 0 clamp(56px,8vw,96px);
  overflow:hidden;isolation:isolate;
}
.hero__img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:52% 60%;
}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(12,15,18,.90) 0%,rgba(12,15,18,.60) 44%,rgba(12,15,18,.10) 80%),
    linear-gradient(0deg,rgba(12,15,18,.78) 0%,rgba(12,15,18,0) 48%);
}
.hero__inner{position:relative;max-width:var(--wrap)}
.hero__title{
  font:800 clamp(42px,7.4vw,90px)/.97 var(--f-display);
  letter-spacing:-.035em;color:#fff;margin:0 0 24px;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__lede{
  font-size:clamp(17px,1.5vw,20px);line-height:1.6;
  color:#D3DAE0;max-width:53ch;margin:0 0 34px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ==========================================================================
   SIGNATURE — the container data plate
   Stencilled markings, the way they appear on a real container door.
   ========================================================================== */
.plate{
  border:1px solid var(--steel-500);
  background:rgba(18,22,26,.82);
  font-family:var(--f-mono);
}
.plate__head{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 14px;border-bottom:1px solid var(--steel-600);
  background:var(--amber);color:#1A1204;
  font:600 10.5px/1.3 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
}

/* small scale — hero badge */
.plate--badge{
  position:absolute;right:var(--gutter);bottom:clamp(56px,8vw,96px);z-index:2;
  width:270px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.plate__rows{margin:0;padding:6px 14px 10px}
.plate__row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.plate__row:last-child{border-bottom:0}
.plate__row dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-400)}
.plate__row dd{margin:0;font-size:13px;font-weight:500;color:var(--plate);display:flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(79,209,224,.6);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(79,209,224,.55)}70%{box-shadow:0 0 0 9px rgba(79,209,224,0)}100%{box-shadow:0 0 0 0 rgba(79,209,224,0)}}

/* full scale — specifications */
.plate--full{
  background:#F2F1EE;border-color:#B9B6AF;
  box-shadow:0 30px 70px rgba(21,26,30,.14);
  max-width:920px;margin-inline:auto;
}
.plate__grid{padding:6px 0 0}
.prow{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);
  gap:16px;align-items:baseline;
  padding:11px clamp(16px,3vw,26px);
  border-bottom:1px solid rgba(21,26,30,.09);
  font-size:14px;color:var(--ink);
}
.prow:last-child{border-bottom:0}
.prow > :first-child{
  font-family:var(--f-body);font-weight:500;color:var(--ink-2);
}
.prow > :not(:first-child){font-variant-numeric:tabular-nums;font-weight:500}
.prow--header{
  border-bottom:1.5px solid var(--ink);
  font:600 10.5px/1.4 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);padding-top:14px;padding-bottom:10px;
}
.prow--header > :first-child{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;color:var(--ink);text-transform:uppercase}
.plate__foot{
  margin:0;padding:14px clamp(16px,3vw,26px) 18px;
  border-top:1px solid rgba(21,26,30,.12);
  font:400 12.5px/1.5 var(--f-body);color:var(--ink-2);
}
/* orchestrated reveal: rows stamp in top-to-bottom, like a plate being printed */
[data-plate] .prow{opacity:0;transform:translateY(7px)}
[data-plate].is-stamped .prow{
  animation:stamp .42s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * 38ms);
}
@keyframes stamp{to{opacity:1;transform:none}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding-block:var(--sec-y)}
.section--steel{background:var(--steel-800)}
.section--plate{background:var(--plate);color:var(--ink-2)}
.section--plate .h2,.section--plate .h3,.section--plate .h4{color:var(--ink)}
.section--plate .section__lede{color:var(--ink-2)}

/* the risk: real container corrugation, rendered in CSS, kept near-invisible */
.section--corrugated{
  background-color:var(--plate);
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.34) 0px, rgba(255,255,255,.34) 1px,
    transparent 1px, transparent 15px,
    rgba(21,26,30,.022) 15px, rgba(21,26,30,.022) 16px,
    transparent 16px, transparent 30px);
}

.grid--split .h2,.grid--contact .h2{font-size:clamp(30px,3.5vw,43px)}
.section__head{max-width:64ch;margin-bottom:clamp(38px,5vw,60px)}
.section__head--center{max-width:60ch;margin-inline:auto;text-align:center}

.grid{display:grid;gap:clamp(34px,5vw,72px)}
.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.grid--split-rev{align-items:start}
.grid--contact{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:start}

.figure{margin:0}
.figure img{width:100%;height:auto;border:1px solid rgba(21,26,30,.14)}
.figure--onDark img{border-color:var(--steel-600)}
.figure figcaption{
  margin-top:12px;font:400 12.5px/1.55 var(--f-mono);
  color:var(--ink-2);border-left:2px solid var(--amber);padding-left:11px;
}
.figure--onDark figcaption{color:var(--steel-400)}

/* ---------- subsystem cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.card{
  background:var(--steel-700);border:1px solid var(--steel-600);
  display:flex;flex-direction:column;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:var(--steel-500);transform:translateY(-3px)}
.card__img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--steel-600)}
.card__img--diagram{display:grid;place-items:center;background:var(--steel-800);padding:12px;overflow:hidden}
.card__img--diagram svg{width:100%;height:100%}
.card__body{padding:22px clamp(18px,2vw,24px) 26px}
.card__kicker{
  font:500 10.5px/1 var(--f-mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);margin:0 0 11px;
}
.card p:last-child{margin-bottom:0;font-size:15.5px;line-height:1.62}

/* power path diagram */
.dg__line{stroke:var(--steel-500);stroke-width:1.5}
.dg__line--alt{stroke:var(--steel-600);stroke-dasharray:3 4}
.dg__node rect{fill:none;stroke:var(--steel-400);stroke-width:1.5}
.dg__node text{fill:var(--plate);font:600 14px var(--f-mono);text-anchor:middle;letter-spacing:.04em}
.dg__node--live rect{stroke:var(--cyan)}
.dg__node--live text{fill:var(--cyan)}
.dg__cap{fill:var(--steel-400);font:400 11px var(--f-mono);text-anchor:middle;letter-spacing:.07em}
.dg__cap--alt{fill:var(--steel-500)}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:34px 0 0;padding:0}
.tl{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:22px;
  padding:0 0 26px 0;position:relative;
}
.tl::before{
  content:"";position:absolute;left:6px;top:9px;bottom:-9px;width:1px;background:var(--steel-600);
}
.tl:last-child{padding-bottom:0}
.tl:last-child::before{display:none}
.tl__day{
  position:relative;padding-left:22px;
  font:500 11.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);
}
.tl__day::before{
  content:"";position:absolute;left:0;top:5px;width:13px;height:13px;
  border:1px solid var(--amber);background:var(--steel-800);border-radius:50%;
}
.tl--live .tl__day{color:var(--cyan)}
.tl--live .tl__day::before{border-color:var(--cyan);background:var(--cyan)}
.tl p{margin:0;font-size:15.5px;color:var(--steel-400)}

/* ---------- site register ---------- */
.register{border-top:1.5px solid var(--ink)}
.rrow{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.95fr);
  gap:clamp(16px,3vw,36px);align-items:baseline;
  padding:22px 0;border-bottom:1px solid rgba(21,26,30,.13);
  font-size:15.5px;
}
.rrow--header{
  font:600 10.5px/1.4 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);padding:12px 0;
}
.rrow__name{font:600 18px/1.3 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
.rrow .mono{font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- contact ---------- */
.addr{font-style:normal;margin-top:30px;padding-top:26px;border-top:1px solid var(--steel-600)}
.addr p{margin:0 0 4px}
.addr__name{font:700 22px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--plate)}
.addr__role{font:400 12px/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:16px !important}
.addr a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(79,209,224,.35)}
.addr a:hover{border-bottom-color:var(--cyan)}
.addr__lines{margin-top:18px !important;font-size:15px;line-height:1.7;color:var(--steel-400)}

.form{
  background:var(--steel-700);border:1px solid var(--steel-600);
  padding:clamp(22px,3vw,32px);
}
.field{margin-bottom:17px}
.field label{
  display:block;margin-bottom:7px;
  font:500 11px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--steel-400);
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;
  background:var(--steel-800);border:1px solid var(--steel-600);border-radius:2px;
  color:var(--plate);font:400 15.5px/1.4 var(--f-body);color-scheme:dark;
  transition:border-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:104px}
.field input::placeholder{color:var(--steel-500)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--steel-500)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#E2705B}
.field__error{
  margin:6px 0 0;min-height:0;
  font:400 12.5px/1.4 var(--f-body);color:#E2705B;
}
.form__note{
  margin:16px 0 0;font:400 13.5px/1.55 var(--f-body);color:var(--steel-400);
}
.form__note.is-ok{color:var(--cyan)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--steel-900);border-top:1px solid var(--steel-700);padding-top:56px}
.footer__inner{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;padding-bottom:40px}
.brand--footer{margin-bottom:14px}
.footer__tag{margin:0;font-size:14.5px;color:var(--steel-500);max-width:38ch}
.footer__nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 44px;align-content:start}
.footer__nav a{font:400 14px/1 var(--f-body);color:var(--steel-400);text-decoration:none}
.footer__nav a:hover{color:var(--plate)}
.footer__legal{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  border-top:1px solid var(--steel-700);padding-top:22px;padding-bottom:30px;
}
.footer__legal p{margin:0;font-size:12.5px;color:var(--steel-500)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--diagram{grid-column:1 / -1}
  .card--diagram .card__img--diagram{aspect-ratio:auto;padding:22px}
  .card--diagram .card__img--diagram svg{max-width:460px}
}

@media (max-width:900px){
  /* the blur on .nav bleeds into the dropdown, which is a descendant of it */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,22,26,.94)}
  .nav.is-scrolled{background:var(--steel-900)}
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--steel-900);
    border-bottom:1px solid var(--steel-700);
    padding:8px var(--gutter) 22px;
    clip-path:inset(0 0 100% 0);pointer-events:none;
    transition:clip-path .32s var(--ease);
  }
  .nav__menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
  .nav__menu a{padding:15px 0;border-bottom:1px solid var(--steel-700);font-size:16px}
  .nav__menu .btn{margin-top:16px;border-bottom:0;justify-content:center;padding:15px 20px;font-size:14px}

  .grid--split,.grid--contact{grid-template-columns:minmax(0,1fr)}
  .grid--split-rev > .figure{order:2}

  /* the hero is a flex row on desktop; stack it so the plate falls below the copy */
  .hero{flex-direction:column;align-items:stretch;min-height:0;padding-bottom:clamp(44px,7vw,72px)}
  .hero__img{object-position:14% 60%}
  /* narrow viewports crop the photo hard, so darken evenly rather than left-to-right */
  .hero__scrim{background:linear-gradient(180deg,rgba(12,15,18,.70) 0%,rgba(12,15,18,.80) 50%,rgba(12,15,18,.93) 100%)}
  .hero__inner{padding-bottom:0}
  .plate--badge{
    position:static;width:calc(100% - var(--gutter) * 2);max-width:340px;
    margin:34px var(--gutter) 0;box-shadow:none;
  }

  .rrow{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
  .rrow--header{display:none}
  .rrow .mono{color:var(--amber-dark)}
}

@media (max-width:620px){
  body{font-size:16px}
  .eyebrow{font-size:10px;letter-spacing:.14em}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card--diagram{grid-column:auto}
  .prow{grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(0,.72fr);gap:10px;font-size:12.5px;padding-inline:14px}
  .prow--header,.prow--header > :first-child{font-size:9.5px;letter-spacing:.1em}
  .tl{grid-template-columns:minmax(0,1fr);gap:8px}
  .tl::before{display:none}
  .footer__nav{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
  [data-plate] .prow{opacity:1;transform:none}
}