/* ==========================================================================
   Naftamatika — Smart Oilfield
   Design system ported from naftamatika.com (Uniform type, #007e1e green,
   green-bar heading motif). Content and markup structure unchanged.
   ========================================================================== */

/* ---------- Uniform typeface (self-hosted webfont kit) ---------- */
@font-face{
  font-family:'UniformCondensed';
  src:url('fonts/2C5463_E_0.woff2') format('woff2'),
      url('fonts/2C5463_E_0.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'UniformCondensed-Light';
  src:url('fonts/2C5463_0_0.woff2') format('woff2'),
      url('fonts/2C5463_0_0.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Uniform-Bold';
  src:url('fonts/2C5463_3_0.woff2') format('woff2'),
      url('fonts/2C5463_3_0.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Uniform-Black';
  src:url('fonts/2C5463_4_0.woff2') format('woff2'),
      url('fonts/2C5463_4_0.woff') format('woff');
  font-weight:normal; font-style:normal; font-display:swap;
}

:root{
  --green:      #007e1e;
  --green-dark: #00661a;
  --ink:        #2f353c;   /* headings on light, dark surfaces */
  --ink-deep:   #23282e;   /* footer base */
  --muted:      #6e7978;   /* body copy */
  --grey:       #b6bcbb;   /* dates, meta */
  --line:       #eaeaea;
  --line-dark:  rgba(255,255,255,0.15);
  --bg:         #ffffff;
  --bg-alt:     #f7f7f7;
  --white:      #ffffff;

  --font-head: 'Uniform-Black', 'Arial Black', Arial, sans-serif;
  --font-bold: 'Uniform-Bold', Arial, sans-serif;
  --font-body: 'UniformCondensed', 'Arial Narrow', Arial, sans-serif;

  --container: 1200px;
  --gutter: 30px;
  --bar: 2px;            /* green rule beside section headings */
  --indent: 24px;        /* text offset from that rule */
  --ease: cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  overflow-x:hidden;   /* backstop: no page ever scrolls sideways */
  font-family:var(--font-body);
  font-size:16px;
  line-height:26px;
  color:var(--muted);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:normal;
  text-transform:uppercase;
  margin:0 0 .4em;
  letter-spacing:0;
}
h1{ color:var(--white); font-size:50px; line-height:50px; }
/* 40px/45px on desktop, as on the reference site; scales down on narrow screens. */
h2{ color:var(--green); font-size:clamp(26px,4.4vw,40px); line-height:1.13; }
h3{ color:var(--ink); font-size:22px; line-height:26px; }
h4{ color:var(--ink); font-size:16px; line-height:20px; }
h5{ color:var(--green); font-size:12px; line-height:12px; }
p{ margin:0 0 1em; }
strong{ font-family:var(--font-bold); font-weight:normal; color:var(--ink); }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-bold);
  font-size:12px;
  line-height:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:16px 35px;
  border-radius:25px;
  border:2px solid var(--green);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ background:var(--green); color:var(--white); border-color:var(--green); }
.btn--solid{ background:var(--green); color:var(--white); }
.btn--solid:hover{ background:var(--green-dark); border-color:var(--green-dark); }
/* On dark surfaces the outline button starts white-lettered */
.hero .btn, .section--dark .btn, .page-banner .btn{ color:var(--white); }
.hero .btn:hover, .section--dark .btn:hover, .page-banner .btn:hover{ color:var(--white); }
.btn--dark{ border-color:var(--green); color:var(--ink); background:transparent; }
.btn--dark:hover{ background:var(--green); color:var(--white); }

/* ---------- Header ----------
   Fixed on every page so the nav stays put while scrolling. It opens at
   top:40px over the hero/banner and slides to top:0 with a solid fill once
   .is-scrolled lands — the transition animates that. */
.site-header{
  position:fixed; top:40px; left:0; right:0; z-index:9999;
  padding:0;
  transition:background .3s var(--ease), padding .3s var(--ease), top .3s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  position:fixed; top:0;
  background:rgba(47,53,60,.97);
  padding:14px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.site-header.is-inner{ position:fixed; top:40px; background:transparent; }
/* When scrolled, inner-page headers take the solid fill like the home page. */
.site-header.is-inner.is-scrolled{
  position:fixed; top:0;
  background:rgba(47,53,60,.97);
}

.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo img{ height:63px; width:auto; }

/* Nav sits hard right against the container edge, as on the reference site. */
.main-nav{ display:flex; align-items:center; gap:35px; margin-left:auto; }
.main-nav a{
  color:rgba(255,255,255,.8);
  font-family:var(--font-body);
  font-size:16px;
  line-height:16px;
  text-transform:uppercase;
  padding-bottom:7px;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a.is-active{ color:var(--white); border-bottom-color:var(--green); }

/* Holds only the mobile menu button now, so it is hidden on desktop —
   otherwise the empty box would hold the nav off the container edge. */
.header-right{ display:none; }

.nav-toggle{ display:none; width:34px; height:26px; position:relative; background:none; border:0; cursor:pointer; }
.nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:var(--white); transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:12px; }
.nav-toggle span:nth-child(3){ top:24px; }
.nav-toggle.is-active span:nth-child(1){ transform:translateY(12px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-12px) rotate(-45deg); }

@media (max-width:1100px){
  .main-nav{ gap:22px; }
  .main-nav a{ font-size:14px; }
}
@media (max-width:960px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:110px 34px 34px; gap:22px; overflow-y:auto;
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ font-size:18px; }
  .header-right{ display:flex; align-items:center; }
  .nav-toggle{ display:block; }
  .site-header{ top:24px; }
}

/* ---------- Green-bar heading motif ----------
   The reference site marks every heading with a green rule to its left:
   10px block beside h1, 2px rule beside section headings. */
.hero__intro,
.page-banner__title{ position:relative; padding-left:71px; }
.hero__intro::before,
.page-banner__title::before{
  content:""; position:absolute; left:0; top:6px;
  width:10px; background:var(--green);
  height:calc(100% - 12px); max-height:135px;
}

.section-head{
  position:relative;
  max-width:760px;
  margin-bottom:32px;
  padding-left:var(--indent);
  border-left:var(--bar) solid var(--green);
}
.section-head h2{ margin-bottom:.35em; }
.section-head p{ font-size:16px; line-height:26px; }
.section-head .btn{ margin-top:14px; }

/* Small green label (reference site's h5 treatment) */
.eyebrow{
  display:block;
  font-family:var(--font-bold);
  font-size:12px; line-height:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:18px;
}

/* Split columns carry the same rule when they open with an eyebrow */
.split > div > .eyebrow{ position:relative; }

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  color:var(--white);
  overflow:hidden;
  background:var(--ink);
}
/* Rotating backdrop: slides cross-fade underneath the gradient wash. */
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.hero__slide.is-active{ opacity:1; }
.hero__slide--1{ background-image:url('photoes/bg-header-hp1.jpg'); }
.hero__slide--2{ background-image:url('photoes/bg-header-hp2.jpg'); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,24,28,.72) 0%, rgba(20,24,28,.45) 55%, rgba(20,24,28,.30) 100%);
  pointer-events:none;
}

/* Headline lines share one grid cell, so the h1 is as tall as the longest
   line and the layout never jumps between slides. */
.hero__headline{ display:grid; }
.hero__line{
  grid-area:1/1;
  opacity:0;
  transform:translateY(10px);
  /* Outgoing line clears out first; the incoming one waits for it. Both
     share a grid cell, so overlapping fades would collide into mush. */
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.hero__line.is-active{
  opacity:1; transform:none;
  transition-delay:.42s;
}

/* Slide dots — pinned to the container's left edge so they clear the
   centred scroll cue. */
.hero__dots{
  position:absolute; z-index:3; bottom:52px;
  /* Sit on the container's inner left edge, hugging only the dots — a
     full-width row here would overlay the scroll cue and eat its clicks. */
  left:max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
  display:flex; gap:10px;
}
.hero__dot{
  width:34px; height:4px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.35);
  transition:background .25s var(--ease), width .25s var(--ease);
}
.hero__dot:hover{ background:rgba(255,255,255,.65); }
.hero__dot.is-active{ background:var(--green); width:48px; }
.hero__content{
  position:relative; z-index:2;
  /* Keep the container's horizontal gutter — a `0` here would let the hero
     bleed past the viewport once it is narrower than --container. */
  padding:200px var(--gutter) 120px;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
  gap:44px;
  align-items:end;
  width:100%;
}
.hero__eyebrow{
  font-family:var(--font-bold);
  font-size:12px; line-height:12px; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
  opacity:.75;
  margin-bottom:20px;
}
.hero h1{
  color:var(--white);
  font-size:clamp(34px,5vw,50px);
  line-height:1;
  max-width:17ch;
  margin:0 0 22px;
  text-shadow:0 20px 40px rgba(0,0,0,.1);
}
.hero p.lead{
  color:rgba(255,255,255,.8);
  font-size:17px; line-height:27px;
  max-width:46ch; margin:0;
}
.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }
.hero__panel{
  margin-left:auto; max-width:300px; padding:28px;
  border-left:10px solid var(--green);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
}
.hero__stat{ display:flex; flex-direction:column; gap:10px; }
.hero__stat strong{ font-family:var(--font-head); font-size:44px; line-height:1; color:var(--white); }
.hero__stat span{ font-size:15px; line-height:23px; color:rgba(255,255,255,.72); }

/* Scroll cue — reference site's sprite */
.hero__scroll{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  pointer-events:none;   /* decorative cue, never intercepts clicks */
  width:24px; height:68px;
  background:url('photoes/icon-scroll.png') no-repeat 0 0;
  background-size:24px auto;
  text-indent:-9999px; overflow:hidden;
  animation:scrollBob 2s var(--ease) infinite;
}
@keyframes scrollBob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

@media (max-width:900px){
  .hero{ min-height:auto; }
  .hero__content{ grid-template-columns:1fr; padding:150px var(--gutter) 90px; gap:36px; }
  .hero__panel{ margin-left:0; max-width:none; }
  .hero__scroll{ display:none; }
}
@media (max-width:600px){
  .hero__intro{ padding-left:34px; }
  .hero__intro::before{ width:6px; }
}

/* ---------- Inner page banner ---------- */
.page-banner{
  background:var(--ink) url('photoes/bg-header.jpg') center center / cover no-repeat;
  color:var(--white);
  padding:190px 0 90px;
  position:relative;
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,24,28,.74), rgba(20,24,28,.42));
}
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:var(--white); font-size:clamp(30px,4.4vw,50px); line-height:1; margin-bottom:16px; }
.page-banner p{ color:rgba(255,255,255,.72); max-width:56ch; font-size:16px; line-height:26px; margin:0; }
@media (max-width:600px){
  .page-banner{ padding:150px 0 60px; }
  .page-banner__title{ padding-left:34px; }
  .page-banner__title::before{ width:6px; }
}

/* Solid header for pages that have no dark banner behind the nav. The nav
   links are white, so the header keeps a dark fill even at the top. */
.site-header.is-inner.is-solid{
  position:fixed; top:0;
  background:rgba(47,53,60,.97);
  padding:14px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}

/* ---------- Product intro (title + description left, image right) ---------- */
.product-intro{ padding-top:150px; }
.product-intro__row{
  display:grid;
  grid-template-columns:55fr 45fr;   /* image column a little smaller */
  gap:56px;
  align-items:center;
  margin-top:24px;
}
.product-intro__text{ margin:0; }
.product-intro h1{
  color:var(--ink);
  font-size:clamp(30px,4.4vw,46px);
  line-height:1.04;
  margin-bottom:18px;
}
.product-intro__text p{ color:var(--muted); font-size:16px; line-height:26px; margin:0; }
.product-intro__media{ margin:0; }
.product-intro__media .media-block{
  aspect-ratio:4/3;
  object-fit:contain;
  background:var(--bg-alt);
  padding:22px;
}
/* Stacks text first, then image (source order) on narrow screens. */
@media (max-width:840px){
  .product-intro__row{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:700px){ .product-intro{ padding-top:120px; } }

/* ---------- Sections ---------- */
.section{ padding:100px 0; }
.section--alt{ background:var(--bg-alt); }
.section--dark{
  background:var(--ink);
  color:rgba(255,255,255,.72);
  position:relative;
}
/* Our history section: a lighter dark surface than the default section--dark */
.section--history{ background:#3b434c; }
.section--dark h2{ color:var(--white); }
.section--dark h3{ color:var(--white); }
.section--dark .section-head{ border-left-color:var(--green); }
.section--dark .eyebrow{ color:var(--white); opacity:.6; }
@media (max-width:700px){
  .section{ padding:64px 0; }
  .section-head{ margin-bottom:40px; padding-left:28px; }
}

/* ---------- Grids / cards ---------- */
.grid{ display:grid; gap:var(--gutter); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:0;
  padding:38px 34px;
  height:100%;
  position:relative;
  display:flex; flex-direction:column;   /* lets card__link sit at the bottom */
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* Green rule slides in on hover — echoes the heading motif */
.card::before{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:3px;
  background:var(--green); transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease);
}
.card:hover{ box-shadow:0 20px 50px rgba(47,53,60,.10); transform:translateY(-3px); }
.card:hover::before{ transform:scaleY(1); }
.card:hover h3{ color:var(--green); }
.card h3{ font-size:22px; line-height:26px; margin-bottom:12px; transition:color .2s var(--ease); }
.card p{ font-size:15px; line-height:22px; margin-bottom:16px; }
.card__icon{
  width:52px; height:52px;
  background:var(--green); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
  font-family:var(--font-head); font-size:16px;
}

/* Photo/logo banner atop a card. Full-bleed to the card edges; the text
   below keeps its own padding. Product shots and client logos both sit on
   white, so a light tile makes their edges read as intentional. */
.card--photo{ padding:0; display:flex; flex-direction:column; }
.card__media{
  display:block; overflow:hidden;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.card__media img{
  width:100%; aspect-ratio:16/11; object-fit:contain;
  padding:18px; display:block;
  transition:transform .5s var(--ease);
}
.card--photo:hover .card__media img{ transform:scale(1.03); }
.card--photo h3{ margin-top:30px; }
.card--photo > h3,
.card--photo > p,
.card--photo > .card__link{ margin-left:34px; margin-right:34px; }
.card--photo > .card__link{ margin-bottom:34px; }
.card__link{
  font-family:var(--font-bold); font-size:11px; line-height:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey);
  border-bottom:1px solid var(--green); padding-bottom:3px;
  /* Push to the card's bottom edge so links align across a row; hug the
     text so the underline doesn't span the whole card. */
  margin-top:auto; align-self:flex-start;
  transition:color .2s var(--ease);
}
.card__link:hover{ color:var(--green); }
.section--alt .card{ background:var(--white); }
.section--dark .card{ background:rgba(255,255,255,.04); border-color:var(--line-dark); }
.section--dark .card p{ color:rgba(255,255,255,.66); }

.service-list{ margin:18px 0 0; padding:0; display:grid; gap:10px; }
.service-list li{ position:relative; padding-left:18px; color:var(--muted); font-size:15px; line-height:22px; }
.service-list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--green); }

/* ---------- Product description prose ----------
   Description copy is wrapped in .prose-cols and flows as two newspaper
   columns across the full container width, which roughly halves the height of
   the section. Multi-column fills down-then-across, so reading order runs down
   the first column and continues at the top of the second — the same order as
   the spec tables. Paragraphs and lists are kept whole so neither splits
   across the column boundary. */
.prose-cols{ columns:2; column-gap:56px; }
.prose-cols > *:first-child{ margin-top:0; }
.prose-cols p{ line-height:28px; margin:0 0 1.15em; break-inside:avoid; }
/* A line that introduces a list ("… features include:") hugs its list. */
.prose-cols p.prose-lead{ margin-bottom:.5em; break-after:avoid; }
.prose-cols .service-list{ margin:0 0 1.6em; break-inside:avoid; }
.prose-cols .service-list li{ font-size:16px; line-height:25px; }
/* Opts a description out of the two-column flow, keeping the prose styling. */
.prose-cols--single{ columns:1; }
/* Flows a single bullet list into two columns on its own, independent of
   whether the surrounding description is one- or two-column. Fills
   down-then-across; items never split across the column boundary. */
.service-list.service-list--cols{
  display:block;     /* multicol has no effect on a grid container */
  columns:2;
  column-gap:48px;
}
.service-list.service-list--cols li{ margin-bottom:10px; break-inside:avoid; }
.service-list.service-list--cols li:last-child{ margin-bottom:0; }
@media (max-width:760px){
  .prose-cols{ columns:1; }
  .service-list.service-list--cols{ columns:1; }
}

/* ---------- Stat strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); }
.stat{ border-left:2px solid var(--green); padding:6px 0 6px 24px; }
.stat strong{
  display:block; font-family:var(--font-head); font-weight:normal;
  font-size:clamp(28px,3.4vw,40px); line-height:1.05; color:var(--green); margin-bottom:8px;
}
.stat span{ font-size:15px; line-height:22px; color:var(--muted); }
.section--dark .stat span{ color:rgba(255,255,255,.66); }
.section--dark .stat strong{ color:var(--white); }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .stats{ grid-template-columns:1fr; } }

/* ---------- Two column ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
@media (max-width:840px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split .btn{ margin-top:12px; }

/* Imagery */
.media-block{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:0;
  background:var(--bg-alt);
}
/* Gallery images are mostly screenshots and diagrams — show them whole rather
   than cropping to fill. Contained on the light tile keeps the grid tidy.
   Scoped to .grid--2 (galleries only) so feature photos keep their crop. */
.grid--2 .media-block{
  object-fit:contain;
  padding:14px;
}
/* Click-to-enlarge affordance on gallery images */
.grid--2 .media-figure .gallery-clickable{ cursor:zoom-in; transition:opacity .2s var(--ease); }
.grid--2 .media-figure:hover .gallery-clickable{ opacity:.9; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px, 5vw, 64px);
  background:rgba(15,20,18,.92);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  background:var(--white);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:scale(.97);
  transition:transform .25s var(--ease);
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:18px; right:24px;
  width:46px; height:46px; padding:0;
  background:transparent; border:0; cursor:pointer;
  color:var(--white); font-size:38px; line-height:1;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.lightbox__close:hover{ color:var(--green); transform:scale(1.1); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,20,18,.55); border:0; border-radius:50%; cursor:pointer;
  color:var(--white);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.lightbox__nav:hover{ color:var(--green); background:rgba(15,20,18,.8); }
.lightbox__nav[hidden]{ display:none; }
.lightbox__nav--prev{ left:clamp(6px, 2vw, 24px); }
.lightbox__nav--next{ right:clamp(6px, 2vw, 24px); }
.lightbox__chev{ width:26px; height:26px; display:block; }
.lightbox__counter{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  color:var(--white); font-size:14px; letter-spacing:.04em; opacity:.75;
}
@media (max-width:600px){
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__chev{ width:20px; height:20px; }
}
.media-figure{ position:relative; margin:0; }
/* Green corner accent on photography */
.media-figure::after{
  content:""; position:absolute; left:0; bottom:0;
  width:10px; height:100px; background:var(--green);
}
/* With a caption the figure grows past the image, so the corner accent would
   land on the text. Captioned figures carry the green rule instead. */
.media-figure--caption::after{ content:none; }
.media-figure figcaption{
  margin-top:14px;
  padding-left:14px;
  border-left:2px solid var(--green);
  font-size:14px;
  line-height:20px;
  color:var(--muted);
}

/* Full-width card with text and a small, right-aligned image. The image
   column is narrow and top-aligned so it reads as an accent, not a panel. */
.card--row{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:40px;
  align-items:start;
}
.card--row .media-figure{ margin-top:4px; }
.card--row .media-block{ aspect-ratio:4/3; }
@media (max-width:840px){
  .card--row{ grid-template-columns:1fr; gap:24px; }
  .card--row .media-figure{ max-width:340px; }
}

/* ---------- News list ---------- */
.news-item{
  display:grid; grid-template-columns:150px 240px 1fr; gap:28px;
  padding:30px 0 30px 28px;
  border-left:2px solid var(--line);
  align-items:start;
  transition:border-color .25s var(--ease);
}
.news-item:hover{ border-left-color:var(--green); }
.news-item:hover h3{ color:var(--green); }
.news-item .date{
  font-family:var(--font-body); color:var(--grey);
  font-size:20px; line-height:20px; text-transform:uppercase;
  padding-top:3px;
}
/* Article thumbnail. Decorative — the headline beside it is the real link. */
.news-item__thumb{ display:block; overflow:hidden; }
.news-item__thumb img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.news-item:hover .news-item__thumb img{ transform:scale(1.04); }
.news-item h3{ font-size:22px; line-height:26px; margin-bottom:10px; transition:color .2s var(--ease); }
.news-item p{ font-size:15px; line-height:22px; margin:0; }
@media (max-width:900px){
  .news-item{ grid-template-columns:120px 170px 1fr; gap:20px; }
}
@media (max-width:640px){
  .news-item{ grid-template-columns:1fr; gap:12px; padding-left:20px; }
  .news-item .date{ font-size:16px; line-height:16px; }
  .news-item__thumb{ max-width:360px; }
}

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:24px 0;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
  font-family:var(--font-bold); font-size:16px; line-height:22px;
  color:var(--ink); text-transform:none;
  transition:color .2s var(--ease);
}
.faq-item summary:hover{ color:var(--green); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; color:var(--green); font-size:22px; line-height:1; flex-shrink:0;
  transition:transform .25s var(--ease);
}
.faq-item[open] summary{ color:var(--green); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding:0 0 24px; font-size:15px; line-height:24px; max-width:74ch; margin:0; }
.section--dark .faq-item{ border-bottom-color:var(--line-dark); }
.section--dark .faq-item summary{ color:var(--white); }

/* ---------- Spec table ---------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th,.spec-table td{ text-align:left; padding:8px; border-bottom:1px solid var(--line); font-size:15px; }
.spec-table th{
  width:40%; font-family:var(--font-bold); font-weight:normal;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-size:12px;
}
.spec-table td{ color:var(--ink); }

.spec-table td:last-child{padding-right:0;}
.spec-table td:first-child{padding-left:0;}
.spec-table tr:hover td{ color:var(--green); }
/* Two-column spec layout — halves the height of long tables. Each half is a
   normal .spec-table; the pair collapses back to one column on narrow screens
   (the left block holds the first rows, so the stacked order stays correct). */
.spec-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; align-items:start; }
@media (max-width:760px){ .spec-cols{ grid-template-columns:1fr; gap:0; } }

/* ---------- Downloads ---------- */
.download-group h3{ font-size:12px; line-height:12px; letter-spacing:.06em; color:var(--green); font-family:var(--font-bold); margin-bottom:20px; }
.download-list{ margin-bottom:48px; }
.download-item{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 22px; border:1px solid var(--line); margin-bottom:10px; background:var(--white);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.download-item:hover{ border-color:var(--green); transform:translateX(4px); }
.download-item:hover span{ color:var(--green); }
.download-item span{ font-size:15px; color:var(--ink); transition:color .2s var(--ease); }
.download-item .file-tag{
  font-family:var(--font-bold); font-size:11px; letter-spacing:.06em;
  color:var(--grey); text-transform:uppercase; flex-shrink:0;
}

/* ---------- Forms ---------- */
.form-panel{
  background:var(--white);
  border:1px solid var(--line);
  border-left:10px solid var(--green);
  border-radius:0;
  padding:44px;
}
.section--dark .form-panel{ border-color:var(--line-dark); border-left-color:var(--green); background:rgba(255,255,255,.04); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } .form-panel{ padding:28px; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--font-bold); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.section--dark .field label{ color:rgba(255,255,255,.6); }
.field input,.field textarea{
  border:1px solid var(--line); border-radius:0; padding:14px 16px;
  font-family:var(--font-body); font-size:15px;
  background:var(--bg-alt); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--green); background:var(--white); }
.checkbox-row{
  display:block; position:relative; padding-left:28px;
  font-size:14px; line-height:24px; margin:20px 0 26px; color:var(--muted);
}

.checkbox-row a{text-decoration:underline;} 
.section--dark .checkbox-row{ color:rgba(255,255,255,.66); }
.checkbox-row input{ position:absolute; left:0; top:3px; accent-color:var(--green); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-deep); color:rgba(255,255,255,.55); padding:80px 0 30px; }
.footer-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:50px; border-bottom:1px solid var(--line-dark);
}
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }
.footer-top h4{
  color:var(--white); font-size:12px; line-height:12px; letter-spacing:.08em;
  font-family:var(--font-bold); margin-bottom:20px;
}
.footer-top p{ font-size:15px; line-height:24px; }
.footer-top ul li{ margin-bottom:12px; }
.footer-top ul a{ font-size:15px; transition:color .2s var(--ease); }
.footer-top ul a:hover{ color:var(--green); }
.footer-logo{
  color:var(--white); font-family:var(--font-head);
  text-transform:uppercase; font-size:18px; margin-bottom:16px; display:block;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:28px; font-size:13px;
}
.footer-bottom a{ transition:color .2s var(--ease); }
.footer-bottom a:hover{ color:var(--green); }

/* ---------- Timeline (history) ----------
   Vertical milestones on a green line, echoing the section-head bar motif.
   Default styling is for light surfaces; dark overrides follow. */
.timeline{ display:grid; gap:36px; max-width:820px; }
.timeline__item{
  position:relative;
  padding:2px 0 8px 40px;
  border-left:2px solid var(--line);
}
.timeline__item:last-child{ border-left-color:transparent; }
.timeline__item::before{
  content:""; position:absolute; left:-8px; top:4px;
  width:14px; height:14px; background:var(--green);
  border:3px solid var(--white);
}
.timeline__year{
  display:block;
  font-family:var(--font-head); font-weight:normal;
  color:var(--green); font-size:20px; line-height:1;
  text-transform:uppercase; letter-spacing:0; margin-bottom:14px;
}
.timeline__item p{ font-size:15px; line-height:24px; margin:0; }

/* On dark surfaces: keep the green markers/line for accent, lighten the type. */
.section--dark .timeline__item{ border-left-color:var(--line-dark); }
.section--dark .timeline__item::before{ border-color:var(--ink); }
.section--dark .timeline__year{ color:var(--white); }
.section--dark .timeline__item p{ color:rgba(255,255,255,.66); }

/* Regions block under the timeline */
.history-regions{ margin-top:60px; }
.history-regions .card h3{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.region-note{
  font-family:var(--font-bold); font-size:11px; line-height:1;
  letter-spacing:.06em; text-transform:uppercase; color:var(--green);
}
@media (max-width:700px){ .history-regions{ margin-top:44px; } }

/* Gallery of early years: a 4-column grid of clickable thumbnails under the
   Regions block; each photo opens in the lightbox on click. */
.history-gallery{ margin-top:60px; }
.gallery-grid{ gap:20px; }
.gallery-item{ margin:0; }
.gallery-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border:1px solid var(--line-dark);
  cursor:zoom-in;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.gallery-item:hover img{ opacity:.9; transform:scale(1.01); }
.gallery-item figcaption{
  margin-top:12px; padding-left:12px;
  border-left:2px solid var(--green);
  font-size:14px; line-height:18px;
  color:rgba(255,255,255,.66);
}
@media (max-width:700px){ .history-gallery{ margin-top:44px; } }

/* ---------- Partner logo carousel ----------
   Manual only: the visitor pages through logos with the arrows or dots.
   Slide width is set here per breakpoint and measured by the script, so the
   number shown per page lives in one place — this stylesheet. */
.logo-slider{ position:relative; padding:0 60px; }
.logo-slider__viewport{ overflow:hidden; }
.logo-slider__track{
  display:flex; margin:0; padding:0; list-style:none;
  transition:transform .55s var(--ease);
}
.logo-slide{
  flex:0 0 20%;            /* 5 per page on desktop */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:22px 18px; min-height:130px;
}
.logo-slide img{
  max-width:100%; max-height:76px; width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1); opacity:.62;
  transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-slide:hover img{ filter:grayscale(0); opacity:1; }
/* Company name normally backs up the logo for screen readers only; if the
   image file is missing it becomes the visible fallback. */
.logo-slide__name{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.logo-slide.is-missing img{ display:none; }
.logo-slide.is-missing .logo-slide__name{
  position:static; width:auto; height:auto; overflow:visible; clip:auto;
  white-space:normal; text-align:center;
  font-family:var(--font-bold); font-size:14px; line-height:20px;
  letter-spacing:.04em; color:var(--muted);
}
.logo-slider__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line); border-radius:50%;
  cursor:pointer; color:var(--ink);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.logo-slider__nav:hover{ color:var(--white); background:var(--green); border-color:var(--green); }
.logo-slider__nav[hidden]{ display:none; }
.logo-slider__nav--prev{ left:0; }
.logo-slider__nav--next{ right:0; }
.logo-slider__chev{ width:22px; height:22px; display:block; }
.logo-slider__dots{
  display:flex; justify-content:center; gap:8px; margin-top:22px;
}
.logo-slider__dots:empty{ display:none; }
.logo-slider__dot{
  width:24px; height:4px; padding:0;
  background:var(--line); border:0; cursor:pointer;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.logo-slider__dot:hover{ background:var(--grey); }
.logo-slider__dot.is-active{ background:var(--green); width:40px; }
@media (max-width:900px){
  .logo-slide{ flex-basis:33.3333%; }
}
@media (max-width:600px){
  .logo-slider{ padding:0 44px; }
  .logo-slide{ flex-basis:50%; padding:18px 12px; min-height:110px; }
  .logo-slide img{ max-height:60px; }
  .logo-slider__nav{ width:38px; height:38px; }
  .logo-slider__chev{ width:18px; height:18px; }
}
@media (prefers-reduced-motion: reduce){
  .logo-slider__track{ transition:none; }
}

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head.text-center{
  margin-left:auto; margin-right:auto;
  border-left:0; padding-left:0;
}
.section-head.text-center .eyebrow{ text-align:center; }
.eyebrow.text-center{ text-align:center; }
.badge{
  display:inline-block; font-family:var(--font-bold); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--green); color:var(--white);
  padding:7px 14px; margin-bottom:16px;
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Legal / policy documents ---------- */
.legal{ max-width:820px; }
.legal__lead{ font-size:17px; line-height:28px; }
.legal__title{
  color:var(--green); font-size:20px; line-height:26px;
  margin:2em 0 .6em;
}
.legal__title:first-child{ margin-top:0; }
.legal p{ margin:0 0 .85em; }
.legal p a{ color:var(--green); }
.legal p a:hover{ text-decoration:underline; }
.legal__list{
  list-style:disc; margin:0 0 1.1em; padding-left:1.35em;
}
.legal__list li{ margin:0 0 .4em; line-height:26px; }

/* Honeypot: display:none so browser autofill leaves it alone. Off-screen
   fields still get autofilled by Chrome, which would falsely flag real
   visitors as bots. A filled value here still marks a submission as spam. */
.botcheck{ display:none !important; }