/* =========================================================
   PETROMAS ENERGIES — Design System
   Palette, type, and component styles.
   ========================================================= */

:root{
  /* --- Brand palette (locked) --- */
  --lime:        #799A05;
  --lime-hover:  #93B70B;
  --teal:        #00837E;
  --teal-hover:  #12A79F;
  --yellow:      #EDDA26;
  --black:       #231F20;
  --near-black:  #0F110E;
  --off-white:   #F3F5EF;
  --muted:       #A6ADA0;

  /* --- Surfaces --- */
  --bg-0: var(--near-black);
  --bg-1: #171913;
  --line: rgba(243,245,239,0.10);

  /* Alternating section surfaces. --bg-deep is pure-black; the Network
     section's glow effects are calibrated against it, so that section
     (and the hero/footer, which bracket the page) always sit on it. */
  --bg-deep: #0a0a0a;
  --bg-lift: #121212;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* --- Motion --- */
  --ease-default: cubic-bezier(0.16, 0.84, 0.44, 1); /* power3.out approximation */
  --reveal-duration: 0.9s;

  /* --- Layout --- */
  --nav-height: 84px;
  --container-pad: clamp(24px, 5vw, 72px);
}

/* DSEG7 Classic — self-hosted (assets/fonts/), no CDN. Drives the Network
   stat readouts (a real 7-segment face, not a styled monospace). SIL Open
   Font License — see assets/fonts/DSEG-LICENSE.txt. */
@font-face{
  font-family: 'DSEG7 Classic';
  src: url('../assets/fonts/DSEG7Classic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'DSEG7 Classic';
  src: url('../assets/fonts/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  background: var(--bg-0);
  scroll-behavior: auto; /* Lenis handles smoothing; native jump avoided via JS anchors */
}

html.lenis, html.lenis body{ height: auto; }
html.lenis-smooth{ scroll-behavior: auto; }

body{
  margin: 0;
  background: var(--bg-deep);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* =========================================================
   Placeholder system
   ========================================================= */

.ph{
  text-decoration: underline dashed var(--lime);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: help;
}

/* Kill switch: uncomment when replacing placeholder copy site-wide
.ph{ text-decoration: none; cursor: auto; }
*/

.img-ph{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--near-black);
  border: 1px solid var(--lime);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-align: center;
  padding: 24px;
  min-height: 220px;
  width: 100%;
}

.img-ph::before{
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(121,154,5,0.4);
  pointer-events: none;
}

.img-ph__label{
  position: relative;
  max-width: 80%;
}

.img-ph__name{
  display: block;
  color: var(--lime-hover);
  font-weight: 600;
  margin-bottom: 4px;
}

.img-ph__dims{
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--off-white);
  color: var(--off-white);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease-default), border-color 0.35s var(--ease-default);
}

.btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--off-white);
  transform: translateY(101%);
  transition: transform 0.35s var(--ease-default);
  z-index: -1;
}

.btn:hover, .btn:focus-visible{
  color: var(--near-black);
}

.btn:hover::before, .btn:focus-visible::before{
  transform: translateY(0%);
}

.btn--primary{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--near-black);
}

.btn--primary::before{ background: var(--lime-hover); }
.btn--primary:hover{ color: var(--near-black); }

.btn--ghost{
  background: transparent;
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* =========================================================
   Nav
   ========================================================= */

.site-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease-default),
              border-color 0.4s var(--ease-default),
              backdrop-filter 0.4s var(--ease-default);
}

.site-nav.is-scrolled{
  background: rgba(15,17,14,0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--lime);
}

.site-nav__inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__mark{
  width: 34px;
  height: auto;
}

.brand__word{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand__word .c-white{ color: var(--off-white); }
.brand__word .c-lime{ color: var(--lime); }

.nav-links{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a{
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--off-white);
  padding-bottom: 4px;
}

.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-default);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after{
  transform: scaleX(1);
}

.nav-toggle{
  display: none;
  background: none;
  border: none;
  color: var(--off-white);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle__bars{
  position: relative;
  width: 22px;
  height: 16px;
}

.nav-toggle__bars span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease-default), opacity 0.3s var(--ease-default);
}

.nav-toggle__bars span:nth-child(1){ top: 0; }
.nav-toggle__bars span:nth-child(2){ top: 7px; }
.nav-toggle__bars span:nth-child(3){ top: 14px; }

.nav-toggle.is-open .nav-toggle__bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open .nav-toggle__bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */

.hero{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg-deep);
  /* Contains mix-blend-mode (used by .glow) to this section's own layers —
     without this, "screen" blending compositess against whatever sits
     behind the hero in the page's stacking order (e.g. the fixed nav's
     text), which read as ghosting/double text bleeding through. */
  isolation: isolate;
}

.hero__stage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform: scale(1);
  will-change: transform;
}

.hero__img--night{
  opacity: 0;
}

/* Single-photo fallback (CONTENT.hero.useDayNightPair = false): the day
   picture isn't rendered at all, and the "night" image becomes the
   always-visible base — its filter is scrubbed (see main.js) instead of
   crossfading two different photos. */
.hero--single .hero__img--day{
  display: none;
}

.hero--single .hero__img--night{
  opacity: 1;
}

/* Colour grade overlays: warm amber -> deep blue-black */
.hero__grade{
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero__grade--warm{
  background: linear-gradient(180deg, rgba(237,218,38,0.10) 0%, rgba(121,154,5,0.14) 55%, rgba(35,31,32,0.30) 100%);
  opacity: 1;
}

.hero__grade--cool{
  background: linear-gradient(180deg, rgba(6,10,24,0.55) 0%, rgba(4,8,20,0.72) 50%, rgba(2,4,12,0.88) 100%);
  opacity: 0;
  mix-blend-mode: normal;
}

/* Glow bloom elements — lights coming on */
.hero__glows{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glow{
  position: absolute;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(18px);
  border-radius: 50%;
  will-change: opacity;
}

.glow--sign-l{
  top: 24%; left: 8%;
  width: 22%; height: 12%;
  background: radial-gradient(closest-side, rgba(243,245,239,0.9), rgba(243,245,239,0) 70%);
}

.glow--mark{
  top: 20%; left: 40%;
  width: 14%; height: 14%;
  background: radial-gradient(closest-side, rgba(147,183,11,0.95), rgba(0,131,126,0.5) 55%, rgba(0,131,126,0) 75%);
}

.glow--sign-r{
  top: 30%; left: 60%;
  width: 20%; height: 11%;
  background: radial-gradient(closest-side, rgba(243,245,239,0.85), rgba(243,245,239,0) 70%);
}

.glow--canopy{
  top: 26%; left: 12%;
  width: 60%; height: 22%;
  background: radial-gradient(ellipse closest-side, rgba(255,244,214,0.55), rgba(255,244,214,0) 72%);
  filter: blur(28px);
}

.glow--pole{
  top: 46%; left: 90%;
  width: 10%; height: 30%;
  background: radial-gradient(closest-side, rgba(18,167,159,0.7), rgba(18,167,159,0) 70%);
  filter: blur(14px);
}

/* Static contrast scrim — NOT scroll-driven. Sits above every photo/grade
   layer, below the text. Holds the headline legible whether the frame
   underneath is a bright sky (day) or a lit canopy (night); it does not
   change across the scroll, by design. */
.hero__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Full width already (inset:0) — the fix here is depth: the old taper
     thinned out right where the subhead sits, over the brightly lit
     storefront glass. Now it stays dark clear through buttons+subhead
     and only starts releasing above the headline's top edge. */
  background: linear-gradient(
    0deg,
    rgba(15,17,14,0.90) 0%,
    rgba(15,17,14,0.85) 30%,
    rgba(15,17,14,0.78) 50%,
    rgba(15,17,14,0.55) 70%,
    rgba(15,17,14,0.15) 88%,
    rgba(15,17,14,0) 100%
  );
}

.hero__content{
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(64px, 10vh, 120px);
}

.hero__eyebrow{
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime-hover);
  margin-bottom: 20px;
  opacity: 0.9;
}

.hero__headline{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8vw, 6.5rem);
  line-height: 0.98;
  color: var(--off-white);
  margin-bottom: 28px;
}

.hero__line{
  display: block;
  overflow: hidden;
}

.hero__line span{
  display: block;
  transform: translateY(100%);
}

.hero__headline .accent{ color: var(--lime); }

.hero__subhead{
  max-width: 40ch;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--muted);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
}

.hero__actions{
  opacity: 0;
  transform: translateY(20px);
}

.hero__scroll-cue{
  position: absolute;
  left: var(--container-pad);
  bottom: 32px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
}

.hero__scroll-cue .stem{
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, var(--lime), transparent);
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .hero__img--night{ opacity: 1; }
  .hero__img--day{ opacity: 0; }
  .hero__grade--warm{ opacity: 0; }
  .hero__grade--cool{ opacity: 1; }
  .glow{ opacity: 1; }
  .hero__line span{ transform: translateY(0); }
  .hero__subhead, .hero__actions{ opacity: 1; transform: translateY(0); }
  .hero__scroll-cue{ display: none; }

  .service-block__media{ clip-path: inset(0 0 0 0); }
  .service-block__media img{ transform: scale(1); }
  .service-block__name, .service-block__tagline, .service-block__body{
    opacity: 1; transform: translateY(0);
  }

  .why-row__divider{ transform: scaleX(1); }
  .why-row__title, .why-row__body{ opacity: 1; transform: translateY(0); }

  /* .scroll-road stays visible — js/main.js parks the car at the
     bottom (top: 100%) and skips creating the ScrollTrigger, so it
     renders as a static end-state rather than being hidden. Network
     section: setupNetworkAnimation's own networkStaticMode branch
     (js/main.js) renders one static full-tank frame directly and never
     applies the blink animation in the first place, so there's nothing
     to override here. */
}

/* =========================================================
   Shared section chrome
   ========================================================= */

section{
  position: relative;
  /* Trimmed ~25% from clamp(72px, 12vw, 160px) — the old values left
     long stretches of empty background between sections while
     scrolling. Still generous enough to keep the pacing deliberate. */
  padding: clamp(54px, 9vw, 120px) 0;
}

/* Hairline between adjacent sections only — a blanket border-top on
   `section` also drew a line above the hero, at the very top of the
   page, where there's nothing to divide from. */
section + section{
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* --- Alternating section surfaces (see --bg-deep/--bg-lift). The
   Network section stays on --bg-deep because its glow effects are
   calibrated to pure black; nothing inside it is touched. --- */
.who{ background: var(--bg-deep); }
.services{ background: var(--bg-lift); }
.network{ background: var(--bg-deep); }
.why{ background: var(--bg-lift); }
.contact{ background: var(--bg-deep); }

.eyebrow{
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime-hover);
  margin: 0 0 18px;
}

.section-heading{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  color: var(--off-white);
  margin: 0 0 32px;
  max-width: 18ch;
}

.section-heading .word{
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.section-heading .word > span{
  display: inline-block;
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce){
  .section-heading .word > span{ transform: translateY(0); }
}

/* =========================================================
   Who We Are
   ========================================================= */

.who__inner{
  max-width: 860px;
}

.who__body{
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

/* =========================================================
   What We Do — service blocks
   ========================================================= */

.services__list{
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vw, 120px);
  margin-top: 24px;
}

.service-block{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.service-block--reverse .service-block__media{ order: 2; }
.service-block--reverse .service-block__content{ order: 1; }

.service-block__media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-default);
}

.service-block__media.is-open{
  clip-path: inset(0 0 0 0);
}

.service-block__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 1.2s var(--ease-default);
}

.service-block__media img.is-settled{
  transform: scale(1);
}

.service-block__media .img-ph{
  position: absolute;
  inset: 0;
  min-height: 0;
}

.service-block__number{
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--teal-hover);
  margin: 0 0 12px;
}

.service-block__name{
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 16px;
  opacity: 0;
  transform: translateY(24px);
}

.service-block__tagline{
  font-size: 1.05rem;
  color: var(--off-white);
  line-height: 1.5;
  margin: 0 0 16px;
  opacity: 0;
  transform: translateY(24px);
}

.service-block__body{
  color: var(--muted);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(24px);
}

/* =========================================================
   Network / Coverage
   ========================================================= */

.network__body{
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.network__scene{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  /* Guarantees clearance under the fixed navbar regardless of viewport
     height — centering alone doesn't know the navbar exists. */
  padding-top: calc(var(--nav-height) + 32px);
  padding-bottom: 32px;
  overflow: hidden;
}

@media (min-width: 901px){
  /* While pinned, the scene IS the viewport for the duration of the
     scrub — centre it in that space instead of top-aligned with dead
     space below. */
  .network__scene{
    min-height: 100vh;
  }
}

/* Decorative radial glow behind the whole scene — color and opacity
   are set inline, per frame, from the same remaining-fuel value that
   drives the gauge (see setupNetworkAnimation in js/main.js), so the
   backdrop itself shifts lime -> yellow -> red as the tank drains
   instead of sitting static. Positioned off the top-left corner
   (not centered) so it reads as ambient light spilling in, not a
   dead-centered halo competing with the map/gauge for attention. */
.network__glow{
  position: absolute;
  left: -8%;
  top: -10%;
  width: 70vw;
  max-width: 1100px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 0;
}

/* --- Stage: map card + gauge/text column side by side; stacks under
   768px (see Responsive, below). z-index above .network__glow. --- */

.network__stage{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 90px);
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* --- Map card: the map is now fully separate from the gauge — its
   own bordered card, no overlap, no shared vertical space with the
   arc (compare .network__gauge-wrap below, in the OTHER column). --- */

.network__map-card{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bg-1) 0%, #12140F 100%);
}

.network__map-card__label{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

.network__map-card__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime-hover);
  box-shadow: 0 0 8px rgba(147,183,11,0.9);
  flex: 0 0 auto;
}

/* --- Map viewport: the Lebanon silhouette, no camera, cropped via the
   SVG viewBox (js/main.js MAP_VIEWBOX, "170 160 250 420") — aspect-
   ratio here must match that viewBox exactly (250/420) or the crop
   letterboxes instead of filling its box. Sized by HEIGHT (capped at
   64vh/760px) with width following from the aspect-ratio, rather than
   width-driven like the rest of the site's layout — the map card
   sizes itself independent of the gauge column now that they're not
   sharing a box, so there's no width formula to keep in sync with
   anything else. --- */

.network__viewport{
  position: relative;
  height: min(64vh, 760px);
  width: auto;
  aspect-ratio: 250 / 420;
  overflow: hidden;
}

.network__track{
  position: relative;
  width: 100%;
  height: 100%;
}

.network__track svg{ width: 100%; height: 100%; display: block; overflow: visible; }

/* Flat and graphic: solid dark fill, one clean brand stroke. Was
   opacity 0.4 / stroke-width 1 — at the map's actual on-screen size
   that read as a ghost, not a country. Still quiet relative to the
   lit route/dots (no glow here), just no longer a whisper. */
.network__track .lebanon-outline{
  fill: var(--bg-1);
  stroke: var(--muted);
  stroke-width: 1.5;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

/* The full route, visible from load — a ghost of the whole network in
   brand green, not the grey dashed preview this used to be (grey-on-
   grey against the outline read as "not there" until the car actually
   drew over it). Solid, not dashed, for the same reason. Raised from
   ~20% to ~35% opacity so the whole network reads clearly at station
   01, not just a hint of one. tanker-progress (below) draws on top of
   this at full brightness as the car travels; this layer never
   changes. */
.network__track .tanker-route{
  fill: none;
  stroke: var(--lime-hover);
  stroke-width: 1.6;
  opacity: 0.35;
  vector-effect: non-scaling-stroke;
}

/* The drawn route — the brightest thing on screen, thicker than the
   outline, with a soft glow so it's the obvious focal point once drawn. */
.network__track .tanker-progress{
  fill: none;
  stroke: var(--lime-hover);
  stroke-width: 3;
  stroke-linecap: round;
  /* No vector-effect here (unlike the other map strokes) — the dash
     pattern driven by js/main.js's stroke-dashoffset is computed from
     getTotalLength(), which is always in the path's own user-space
     units. non-scaling-stroke can make the browser compute the dash
     pattern in screen space instead at render time, which disagreed
     with that math right at the path's start/end at this map's small
     render size — a persistent gap right at Anfeh even once the drive
     was nearly complete, not a stroke-width problem. */
  filter: drop-shadow(0 0 2px var(--lime-hover)) drop-shadow(0 0 8px rgba(147,183,11,0.7));
}

/* Unlit: part of the same ghost treatment as tanker-route (brand
   green, not a grey ring, and the same raised ~35% opacity) — every
   station is visible as part of the whole network from load, not
   just the ones already reached. */
.station-dot{
  fill: var(--lime-hover);
  stroke: none;
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  transition: transform 0.4s ease, fill 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.station-dot.is-lit{
  fill: var(--lime-hover);
  opacity: 1;
  transform: scale(1.8);
  filter: drop-shadow(0 0 2px var(--lime-hover)) drop-shadow(0 0 5px rgba(147,183,11,0.7));
}

.station-dot--hq.is-lit{ transform: scale(2.3); }

/* Growing/fading ring on the dot the truck is at or about to reach —
   "is-pulsing" toggled in setupNetworkAnimation (js/main.js), not tied
   to is-lit, since it marks the CURRENT stop specifically, not every
   reached one. r and opacity are both CSS-animatable on <circle> in
   modern browsers, so this needs no JS-driven per-frame work. */
.station-dot__ring{
  fill: none;
  stroke: var(--lime-hover);
  stroke-width: 1.2;
  opacity: 0;
  pointer-events: none;
}

.station-dot__ring.is-pulsing{
  animation: station-dot-ring 1.8s ease-out infinite;
}

@keyframes station-dot-ring{
  0%{ r: 5; opacity: 0.9; }
  100%{ r: 16; opacity: 0; }
}

/* --- Truck marker: top-down, drawn inside the map SVG, positioned and
   rotated entirely by GSAP MotionPathPlugin (js/main.js) --- */

#truckMarker{ pointer-events: none; }
.truck-marker__tank{ fill: var(--off-white); }
.truck-marker__stripe{ fill: var(--lime-hover); }
.truck-marker__cab{ fill: var(--lime-hover); }
/* Was var(--near-black) — nearly invisible against the near-black map
   background, so at headings where the tank silhouette itself is thin
   (e.g. pointing straight up/down a mostly north-south leg of the
   route) the wheels vanished entirely and the marker read as a plain
   capsule with a floating cab, not a truck. --muted gives them actual
   contrast against the map at every rotation. */
.truck-marker__wheel{ fill: var(--muted); opacity: 1; }

/* --- Gauge + station text column: fully independent of the map card
   now — no overlap, no shared box, just a second flex-row child. --- */

.network__info{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vh, 26px);
}

/* Sized by height (vh-capped, like the map card) rather than the old
   width-driven formula — there's nothing to keep in sync with anymore
   since the map isn't sharing this box. */
.network__gauge-wrap{
  position: relative;
  width: min(100%, 58vh);
}

.network__gauge{ width: 100%; }

.network__gauge svg{ width: 100%; height: auto; display: block; overflow: visible; }

/* Segmented bar ring — one bar per station. Color, opacity, and glow
   are all set inline per scroll frame (see setupNetworkAnimation in
   js/main.js) rather than toggled via a lit/unlit class: the fuel
   color itself shifts lime -> yellow -> red as the tank drains, and
   the currently-draining segment gets a partial (not binary) fill, so
   a static CSS class pair can't express the full range on its own.
   stroke-width 13 (up from 7) matches the gauge's larger GAUGE_VB
   scale (400x226 vs the old 400x200 — see js/main.js). */
.gauge-segment{
  stroke-linecap: round;
  /* No transition here — color/opacity are already driven by the
     scroll-smoothed proxy.p in setupNetworkAnimation (js/main.js),
     which has its own 0.4s ease. Stacking a second, independent
     transition on top of that compounded the lag during active
     scrolling: each frame's freshly-computed color was chasing an
     already-lagged target, so relighting on scroll-back read as
     sluggish or imperceptible instead of a clean color change. */
}

.gauge-label{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  fill: var(--muted);
  transition: fill 0.3s ease;
}

/* E blinks continuously (not a finite 3-flash) for as long as the
   tank reads under ~6% remaining — set inline (style.animation) from
   js/main.js alongside the fill color, since both are driven off the
   same continuous remaining-fuel value rather than a discrete
   empty/not-empty class. */
@keyframes gauge-empty-blink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.25; }
}

/* --- Digital "%" fuel readout, centered under the gauge arc. Same
   DSEG7 face used by the stat-tile counters elsewhere on the page, so
   this reads as the same "instrument display" language, not a
   one-off. Color is set inline per frame, matching the gauge. --- */
.network__gauge-readout{
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.network__gauge-readout__value{
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  font-family: 'DSEG7 Classic', var(--font-display), monospace;
  font-weight: 700;
  font-size: clamp(26px, 2.9vw, 44px);
  line-height: 1;
}

.network__gauge-readout__sign{
  font-family: var(--font-display);
  font-size: 0.42em;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.network__gauge-readout__label{
  margin-top: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--muted);
}

/* --- Station text: current/next station crossfade, plus a third
   end-of-route state, all absolutely stacked in the same box so none
   of them reserve their own flow height (only one is ever meaningfully
   opaque at a time). Height is fixed (not content-driven) so the
   crossfade has a stable box to fade within instead of the layout
   jumping as text swaps. Opacity/transform for all three are set
   inline per frame — see setupNetworkAnimation in js/main.js. --- */

.network__panel{
  position: relative;
  height: min(30vh, 250px);
}

.network__panel-state{
  position: absolute;
  inset: 0;
}

.network__panel-counter{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.network__panel-counter__num{
  font-family: 'DSEG7 Classic', var(--font-display), monospace;
  font-size: clamp(14px, 1.2vw, 19px);
  color: var(--lime-hover);
}

.network__panel-counter__total{
  font-family: var(--font-display);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.network__panel-counter__rule{
  flex: 0 0 44px;
  height: 1px;
  background: rgba(147,183,11,0.55);
}

.network__panel-hq{
  padding: 4px 11px;
  border: 1px solid rgba(147,183,11,0.6);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--lime-hover);
}

.network__panel-name{
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(46px, 5.6vw, 92px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--off-white);
}

.network__panel-region{
  margin: 0;
  font-size: clamp(16px, 1.35vw, 21px);
  color: var(--muted);
}

/* End-of-route state — same box, sits inert (pointer-events:none)
   until endOpacity brings it in during the pinned hold. */
.network__panel-end{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}

.network__panel-end__headline{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--yellow);
}

.network__panel-end__support{
  margin: 0;
  font-size: clamp(15px, 1.3vw, 20px);
  color: var(--muted);
}

/* --- Reduced motion / mobile-width fallback: full station list, no
   crossfade. --- */

.network__panel-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.network__panel-list__item{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.network__panel-list__item:last-child{ border-bottom: none; padding-bottom: 0; }

.network__panel-list__name{
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--off-white);
}

.network__panel-list__region{
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

/* --- Stat grid: 5 items, litres figure featured, never an orphan cell --- */

.stat-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: clamp(48px, 6vw, 80px);
}

.stat-tile{
  text-align: center;
  padding: 20px 12px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 148px;
}

.stat-tile__display{
  width: 100%;
  background: var(--near-black);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(243,245,239,0.02);
  padding: 14px 8px;
}

.stat-tile__value{
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: 'DSEG7 Classic', 'Space Mono', 'Courier New', monospace;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-tile__ghost{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: rgba(147,183,11,0.09);
  pointer-events: none;
  user-select: none;
}

.stat-tile__num{
  color: var(--lime-hover);
  text-shadow: 0 0 6px rgba(147,183,11,0.85), 0 0 16px rgba(147,183,11,0.45);
}

.stat-tile__suffix{
  font-family: var(--font-display);
  color: var(--lime-hover);
  text-shadow: 0 0 6px rgba(147,183,11,0.6);
  opacity: 0;
  margin-left: 0.15em;
  align-self: flex-start;
}

.stat-tile__suffix--small{
  font-size: 0.5em;
  margin-left: 0.1em;
}

.stat-tile__value--static{
  font-family: var(--font-body);
}

.stat-tile__static-text{
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lime-hover);
  text-shadow: 0 0 6px rgba(147,183,11,0.55);
}

.stat-tile__label{
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.network__support{
  margin-top: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Why Petromas
   ========================================================= */

.why__list{
  margin-top: 24px;
}

.why-row{
  padding: 28px 0;
}

.why-row__divider{
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  margin-bottom: 24px;
}

.why-row__grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: baseline;
}

.why-row__title{
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  opacity: 0;
  transform: translateY(20px);
}

.why-row__body{
  color: var(--muted);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(20px);
}

/* =========================================================
   Contact
   ========================================================= */

.contact__body{
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.contact__grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  margin-top: 48px;
}

.contact-form{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label{
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea{
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color 0.3s var(--ease-default);
}

.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--lime);
}

.contact-form .btn{
  align-self: flex-start;
}

.contact-form__note{
  font-size: 0.78rem;
  line-height: 1.5;
}

.contact-form__success{
  color: var(--lime-hover);
  font-size: 0.9rem;
}

.contact-form__error{
  color: var(--yellow);
  font-size: 0.9rem;
}

.contact-details{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-details__group h3{
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-hover);
  margin: 0 0 10px;
}

.contact-details__group a,
.contact-details__group p{
  display: block;
  color: var(--off-white);
  font-size: 1.02rem;
  margin: 0 0 4px;
}

.contact-details__group p{ color: var(--muted); }

.contact-details__group a:hover{ color: var(--lime-hover); }

/* =========================================================
   Footer
   ========================================================= */

.site-footer{
  padding: clamp(42px, 6vw, 72px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: var(--bg-deep);
}

.site-footer__inner{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.site-footer__blurb{
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 32ch;
}

.site-footer__links ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__links a{
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.3s var(--ease-default);
}

.site-footer__links a:hover{ color: var(--lime-hover); }

.site-footer__contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__contact a,
.site-footer__contact p{
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

.site-footer__contact a:hover{ color: var(--lime-hover); }

.site-footer__bottom{
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.site-footer__bottom p{
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* =========================================================
   Scroll road — whole-document scroll progress, fixed at the
   right edge. Replaces the old page-gauge fuel bar entirely;
   only one of the two ever ships. Hidden under 768px (see
   Responsive, below) and parked/static under reduced motion
   (handled in js/main.js — no ScrollTrigger created).
   ========================================================= */

.scroll-road{
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  top: 0;
  bottom: 0;
  width: 20px;
  z-index: 90;
  pointer-events: none;
}

.scroll-road__line{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(243,245,239,0.18);
  transform: translateX(-50%);
}

.scroll-road__car{
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  opacity: 0.55;
  transform: translate(-50%, -50%);
  will-change: top;
}

.scroll-road__car svg{ width: 100%; height: auto; display: block; }
.scroll-road .mini-car__body{ fill: var(--off-white); }
.scroll-road .mini-car__glass{ fill: var(--near-black); opacity: 0.7; }

/* =========================================================
   Responsive
   (Kept last so these overrides win the cascade against every
   component rule above, regardless of media-query source order.)
   ========================================================= */

@media (max-width: 900px){
  .nav-links{
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 28px;
    padding: 40px var(--container-pad);
    background: rgba(15,17,14,0.98);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-default), transform 0.35s var(--ease-default);
  }

  .nav-links.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a{ font-size: 1.1rem; }
  .nav-toggle{ display: inline-flex; }

  .hero__img{ object-position: 50% 55%; }
  .hero__content{ padding-bottom: 48px; }

  .service-block{
    grid-template-columns: 1fr;
  }
  .service-block--reverse .service-block__media,
  .service-block--reverse .service-block__content{ order: initial; }

  .stat-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  .why-row__grid{ grid-template-columns: 1fr; gap: 8px; }

  .contact__grid{ grid-template-columns: 1fr; }

  .site-footer__inner{ grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px){
  .scroll-road{ display: none; }

  /* Network: map on top, panel below — same pinned/animated behaviour,
     just re-laid-out. */
  .network__stage{
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  /* Map card and gauge column each size independently by height (see
     base rules) — tighten the caps here so neither one demands more
     vertical space than a phone screen has, now that they're stacked
     instead of side by side. */
  .network__viewport{
    height: min(46vh, 420px);
  }

  .network__info{
    max-width: 420px;
    width: 100%;
    text-align: center;
  }

  .network__gauge-wrap{
    width: min(80vw, 360px);
    margin: 0 auto;
  }

  .network__panel-counter,
  .network__panel-hq{
    justify-content: center;
  }

  .network__panel-list{
    text-align: left;
  }
}

@media (max-width: 480px){
  .hero__headline{ font-size: clamp(2.25rem, 11vw, 3rem); }
  .btn{ padding: 15px 24px; font-size: 0.88rem; }

  .stat-grid{ grid-template-columns: 1fr; gap: 12px; }
  .stat-tile{ padding: 20px 10px; min-height: 120px; }
  .stat-tile__display{ padding: 10px 6px; }
}

/* =========================================================
   Sticky WhatsApp button
   Base state is display:none — this is a MOBILE-ONLY element,
   switched on in the max-width:768px block below. Fading is pure
   CSS; js/main.js (setupWhatsappFab) only toggles .is-visible.
   z-index sits under the nav (100) and over the scroll road (90).
   ========================================================= */

.wa-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 95;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.wa-fab svg{ width: 28px; height: 28px; display: block; }

.wa-fab.is-visible{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* =========================================================
   MOBILE (<= 768px)
   Deliberately the LAST block in this file: several rules here
   intentionally win over the earlier max-width:767px and
   max-width:480px blocks (hero headline size, .btn sizing,
   .stat-grid columns, .network__* sizing). Same specificity, so
   source order is what decides — do not move this block up.
   Desktop is untouched: every rule below is inside this query.
   ========================================================= */

@media (max-width: 768px){

  /* ---- Scroll progress indicator: restored on mobile (the 767px
     block above hides it). Narrower, thinner car, and stopped 84px
     short of the bottom so the dashed line never runs behind the
     WhatsApp button. ---- */
  .scroll-road{
    display: block;
    right: 8px;
    width: 14px;
    bottom: 84px;
  }

  .scroll-road__car{ width: 9px; }

  /* ---- Section rhythm: ~30% off the vertical padding. Desktop is
     clamp(54px, 9vw, 120px); this is that x0.7. ---- */
  section{ padding: clamp(38px, 6.3vw, 84px) 0; }

  /* ---- Hero: smaller headline so "Fueling the Future" wraps instead
     of overflowing at 375px. ---- */
  .hero__headline{ font-size: clamp(2rem, 9vw, 2.75rem); }

  /* ---- Call Now / WhatsApp: stacked, full-width, 52px tall (comfortably
     over the 48px minimum tap target), larger label. ---- */
  .hero__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .hero__actions .btn{
    width: 100%;
    min-height: 52px;
    font-size: 1.02rem;
    padding: 14px 24px;
  }

  /* ---- Stat counters: two per row. Five tiles divide 2+2+1, so the
     last one spans the full width rather than sitting as a half-width
     orphan. ---- */
  .stat-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-tile:last-child{ grid-column: span 2; }

  /* ---- Form inputs: 16px minimum. Below 16px, iOS Safari zooms the
     whole page in when a field is focused. (These already computed to
     16px via 1rem — pinned explicitly so a future rem change can't
     silently reintroduce the zoom.) ---- */
  .field input,
  .field textarea{ font-size: 16px; }

  /* ---- Network section: fit map + gauge + station text in one screen
     while pinned, keeping the stacked order. Budget on a 667px-tall
     phone: 92 (nav clearance) + 314 (map card) + 12 + 180 (gauge +
     text) + 12 = ~610px. ---- */
  .network__scene{
    padding-top: calc(var(--nav-height) + 8px);
    padding-bottom: 12px;
  }

  .network__stage{ gap: 12px; }

  .network__map-card{
    padding: 10px;
    gap: 6px;
    border-radius: 12px;
  }

  .network__map-card__label{
    font-size: 8px;
    letter-spacing: 0.14em;
  }

  /* The desktop crop keeps the whole country inside the frame, so its
     filled landmass reads as Lebanon. The mobile crop deliberately cuts
     straight through land on both sides, and the fill then runs to the
     clip edges — which rendered as a plain lighter rectangle sitting
     under the route, not a coastline. Dropping the fill leaves just the
     coast stroke, which is the part that actually carries the shape at
     this width. Stroke, route, dots and truck are untouched. */
  .network__track .lebanon-outline{
    fill: none;
  }

  /* aspect-ratio MUST match MAP_VIEWBOX_MOBILE in js/main.js
     ("212 194 128 366") or the crop letterboxes inside this box. */
  .network__viewport{
    /* 280px is the target; the 42vh cap shrinks it on genuinely short
       viewports (older phones, and iOS Safari before the URL bar
       collapses) so the station text underneath can't get pushed past
       the fold while the section is pinned. */
    height: min(280px, 42vh);
    aspect-ratio: 128 / 366;
  }

  .network__info{
    gap: 8px;
    max-width: 100%;
  }

  .network__gauge-wrap{ width: 110px; }

  /* Gauge readout scaled to the 110px-wide arc (62px tall at the
     gauge SVG's 400:226 ratio). */
  .network__gauge-readout__value{
    font-size: 18px;
    gap: 3px;
  }

  .network__gauge-readout__label{
    font-size: 7px;
    letter-spacing: 0.16em;
    margin-top: 3px;
  }

  /* Station block: counter + name + region inside ~110px. */
  .network__panel{ height: 110px; }

  .network__panel-counter{
    margin-bottom: 8px;
    gap: 10px;
  }

  .network__panel-counter__rule{ flex-basis: 28px; }

  .network__panel-name{
    font-size: 30px;
    margin-bottom: 6px;
  }

  .network__panel-region{ font-size: 13px; }

  /* The end-of-route state shares that same 110px box. */
  .network__panel-end__headline{
    font-size: 26px;
    margin-bottom: 8px;
  }

  .network__panel-end__support{ font-size: 13px; }

  /* ---- Sticky WhatsApp button: on. ---- */
  .wa-fab{ display: flex; }
}