/* ============================================================
   Eldar Power
   Colours and type taken from the Eldar Power brand book.
   Display face is Loos Wide (licensed); Archivo is the fallback
   and the body face. Drop a Loos Wide webfont into /assets and
   add an @font-face block below to switch it on.
   ============================================================ */

:root{
  --ink:      #211316;   /* brand near-black: text, lines, borders */
  --deep:     #1A1210;   /* deepest ground: hero centre and the dark sections */
  --deep-lift:  #221714; /* warm centre of the hero gradient, behind the planet */
  --deep-edge:  #15100F; /* its outer edge — the three stops are the whole hero ground */
  --ink-2:    #4A4240;   /* brand warm grey  */
  --grey:     #8A827E;   /* brand mid grey   */
  --line:     #D5D0CA;   /* brand light grey */
  --paper:    #F4F1EC;   /* brand off-white  */
  --fire:     #CE4C27;   /* brand orange     */
  --sulphur:  #E6C82D;   /* brand yellow     */

  --display: "Loos Wide", "Archivo", system-ui, sans-serif;
  --body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --measure: 62ch;
}

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

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0; letter-spacing:-.015em; }
p{ margin:0; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--fire); outline-offset:3px; }

.wrap{ max-width:1420px; margin-inline:auto; padding-inline:var(--gutter); }

.eyebrow{
  font-family:var(--body); font-weight:600; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}

/* ---------------------------------------------------------- header */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(244,241,236,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:84px; flex-wrap:wrap;
}
.brand img{ height:30px; width:auto; }
.nav{ display:flex; gap:clamp(16px,2.4vw,36px); flex-wrap:wrap; }
.nav a{
  font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2); padding-block:8px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--fire); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:760px){
  /* logo on its own line, then the five items spread across one full row */
  .site-head .wrap{ min-height:0; padding-block:12px; gap:10px; flex-wrap:wrap; }
  .brand img{ height:26px; }
  .nav{
    width:100%; gap:8px; flex-wrap:nowrap;
    justify-content:space-between; align-items:center;
  }
  .nav a{
    font-size:10.5px; letter-spacing:.06em; padding-block:11px;
    white-space:nowrap;
  }
}

/* tighter rhythm on small screens: the desktop spacing reads as drift on a phone */
@media (max-width:640px){
  :root{ --gutter:24px; }
  .section{ padding-block:32px 44px; }
  .hero{ padding-block:36px 44px; }
  .page-hero{ padding-block:36px 24px; }
  .cols{ gap:40px; margin-top:30px; }
  .lede{ margin-top:16px; }
  .btn{ margin-top:26px; padding:14px 26px; }
  .media, .hero-grid{ gap:28px; }
  .form{ margin-top:26px; }
}

/* ---------------------------------------------------------- type scale */
.display{
  font-size:clamp(34px,5vw,66px); line-height:1.05; text-transform:uppercase;
  letter-spacing:-.025em;
}
.page-title{
  /* 1.12, not the 1.02 these carried at 68px: uppercase has no descenders, so the
     only air between lines is what the leading gives, and a display setting that
     reads as deliberate at 68px reads as a mistake at 46px. */
  font-size:clamp(30px,3.9vw,50px); line-height:1.12; text-transform:uppercase;
  /* 25ch, not the 21ch first tried: `ch` is the width of a zero, and these titles are
     uppercase, so a character eats noticeably more than 1ch. Measured, 24ch is where
     About drops to three lines and Vision and Careers to two; 25 leaves headroom for
     Archivo and Loos Wide, both of which set narrower than the test face. */
  letter-spacing:-.02em; max-width:25ch;
}
.h2{
  font-size:clamp(22px,2.5vw,33px); line-height:1.15; text-transform:uppercase;
  max-width:22ch;
}
/* a line break that only applies once there is room for it: the homepage headline
   must not split "superhot geothermal" across two lines, and at the smaller display
   size it would. Below the breakpoint the headline wraps on its own. */
.br-wide{ display:none; }
@media (min-width:761px){ .br-wide{ display:inline; } }
.lede{
  margin-top:22px; max-width:52ch; font-size:clamp(17px,1.5vw,20px);
  line-height:1.55; color:var(--ink-2);
}
.body-copy{ max-width:var(--measure); color:var(--ink-2); }
.body-copy p + p{ margin-top:18px; }

/* ---------------------------------------------------------- sections */
.section{ padding-block:clamp(40px,5.4vw,80px) clamp(56px,8vw,116px); border-top:1px solid var(--line); }
.section:first-of-type{ border-top:0; }
.section-grid{
  display:grid; grid-template-columns:minmax(180px,22%) 1fr;
  gap:clamp(24px,5vw,72px); align-items:start;
}
@media (max-width:820px){ .section-grid{ grid-template-columns:1fr; gap:20px; } }

/* ---------------------------------------------------------- hero */
.hero{ padding-block:clamp(48px,7vw,104px) clamp(56px,8vw,120px); }
.hero-grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,6vw,80px); align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero figure{ margin:0; }
.hero figure img{ width:100%; height:auto; }

.page-hero{ padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px); }

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-block; margin-top:34px; padding:15px 32px;
  border:1px solid var(--ink); text-decoration:none;
  color:var(--ink); background:transparent;
  font-family:var(--body);
  font-weight:600; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  -webkit-appearance:none; appearance:none; border-radius:0;
  transition:background .2s, color .2s, border-color .2s;
}
button.btn{ cursor:pointer; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-light{ border-color:var(--paper); color:var(--paper); }
.btn-light:hover{ background:var(--paper); color:var(--ink); }

/* ---------------------------------------------------------- columns */
.cols{ display:grid; gap:clamp(24px,4vw,52px); margin-top:clamp(32px,4vw,56px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .cols-3, .cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .cols-2, .cols-3, .cols-4{ grid-template-columns:1fr; } }

.col{ border-top:1px solid var(--ink); padding-top:18px; }
.col h3{
  font-family:var(--body); font-weight:700; font-size:17px;
  letter-spacing:0; text-transform:none;
}
.col p{ margin-top:10px; color:var(--ink-2); font-size:15.5px; }
.col .tag{
  display:block; margin-bottom:12px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fire);
}

/* numbered list used only where order is real */
.steps{ counter-reset:step; }
.steps .col::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  display:block; margin-bottom:12px; font-size:11px; font-weight:600;
  letter-spacing:.16em; color:var(--fire);
}

/* ---------------------------------------------------------- dark band */
.dark{ background:var(--deep); color:#CFC7C2; border-top:0; }
.dark h1, .dark h2, .dark h3{ color:var(--paper); }
.dark .eyebrow{ color:#A79E99; }
.dark .col{ border-top-color:#4A4240; }
.dark .col .tag{ color:var(--sulphur); }
.dark .body-copy, .dark .lede, .dark .col p, .dark p{ color:#CFC7C2; }

.band-image{
  width:100%; height:clamp(220px,34vw,460px); object-fit:cover; object-position:center 30%; display:block;
  filter:grayscale(1) contrast(1.05);
}

/* ---------------------------------------------------------- media pair */
.media{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,64px); align-items:center;
}
@media (max-width:820px){ .media{ grid-template-columns:1fr; } }
.media img{ width:100%; height:auto; }
figcaption{ margin-top:12px; font-size:12.5px; color:var(--grey); max-width:46ch; }

/* ---------------------------------------------------------- form */
.form{ margin-top:36px; max-width:640px; }
.field{ margin-bottom:22px; }
.field label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey); margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; padding:13px 14px; font-family:var(--body); font-size:16px;
  color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:0;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--ink); outline:2px solid var(--fire); outline-offset:1px;
}
.field textarea{ min-height:150px; resize:vertical; }
.form-note{ margin-top:18px; font-size:13px; color:var(--grey); max-width:52ch; }

/* ---------------------------------------------------------- empty state */
.empty{
  border:1px solid var(--line); padding:clamp(28px,4vw,48px);
  margin-top:36px; max-width:var(--measure);
}
.empty h3{ font-family:var(--body); font-weight:700; font-size:18px; }
.empty p{ margin-top:10px; color:var(--ink-2); }

/* ---------------------------------------------------------- definition list */
.facts{ margin:0; }
.facts dt{
  font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);
}
.facts dd{ margin:8px 0 26px; }
.facts a{ font-weight:600; text-decoration:none; border-bottom:1px solid var(--fire); }

/* ---------------------------------------------------------- footer
   Same ground as the page, one hairline as the break. It carries the
   registry detail that appears nowhere else, so it earns its height. */
.site-foot{
  background:var(--paper); color:var(--ink-2);
  border-top:1px solid var(--ink);   /* the page ends here */
  padding-block:44px 28px; font-size:13.5px;
}
.site-foot img{ height:26px; width:auto; }

/* logo and page links share the top line; the two detail columns below are sized
   to their content rather than stretched across 1420px, which left the last one
   stranded at the far right of the page. */
.foot-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px clamp(24px,4vw,56px); flex-wrap:wrap;
}
.foot-nav{ display:flex; flex-wrap:wrap; gap:8px clamp(16px,2.2vw,30px); }
.foot-nav a{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2);
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .2s, border-color .2s;
}
.foot-nav a:hover{ color:var(--ink); border-bottom-color:var(--fire); }

.foot-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,max-content));
  gap:26px clamp(44px,7vw,110px); margin-top:34px;
}
@media (max-width:520px){ .foot-cols{ grid-template-columns:1fr; gap:26px; } }
.foot-h{
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); margin-bottom:10px;
}
.foot-cols p + p{ margin-top:4px; }
.foot-cols a{ text-decoration:none; border-bottom:1px solid var(--line); }
.foot-cols a:hover{ color:var(--ink); border-bottom-color:var(--fire); }
.foot-row{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  align-items:baseline; margin-top:36px; padding-top:18px;
  border-top:1px solid var(--line); color:var(--grey); font-size:12.5px;
}
.foot-row a{ text-decoration:none; border-bottom:1px solid var(--line); }
.foot-row a:hover{ color:var(--ink); }

/* ---------------------------------------------------------- accent = heat
   Orange and yellow appear only where the page is talking about temperature.
   Yellow is reserved for dark grounds, where it actually reads. */
.hot{ color:var(--fire); }
.dark .hot{ color:var(--fire); }

/* column labels go back to grey: the accent should mean something */
.col .tag, .dark .col .tag, .person .role{ color:var(--grey); }

/* people are monochrome, place is in colour */
.band-image.colour{ filter:none; object-position:center 62%; }


/* ---------------------------------------------------------- full-bleed hero */
.hero-full{
  position:relative;
  display:flex; align-items:flex-end;
  background:var(--deep);
}
/* homepage: the globe loop fills the section. The renders already carry their own
   ground (#20161A) and their own composition — the planet sits right of centre on
   the desktop render and near the top on the portrait one — so the video simply
   covers the box and nothing is laid over it. The matching poster is painted as the
   section background underneath, which is what shows before the first frame, under
   reduced motion, and without JavaScript. */
.hero-video{
  --hero-h:clamp(560px,82vh,820px);
  min-height:var(--hero-h);
  overflow:hidden;
  background-color:#20161A;               /* the renders' own ground */
  background-image:url(eldar-earth-desktop-poster.webp);
  background-size:cover; background-position:center center; background-repeat:no-repeat;
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  display:block; border:0;
}
.hero-media[hidden]{ display:none; }
/* the planet's left limb sits at about 52% of the viewport at every desktop width,
   so the copy column stops short of it and wraps instead of running underneath */
.hero-video .hero-full-inner > h1,
.hero-video .hero-full-inner > .lede,
.hero-video .hero-full-inner > .hero-actions{
  max-width:min(calc(50vw - var(--gutter)),620px);
}
@media (max-width:760px){
  /* phone: the portrait render is pinned to the top of the section at its own
     9:16 height rather than stretched to the section's. Stretching tied the
     planet's position to how tall the copy happened to be, which pushed it — and
     the headline under it — off the screen. At a fixed height the planet always
     lands in the same place and the copy starts just below it. Everything under
     the video block is the section's own #20161A, the render's ground colour, so
     there is no visible edge where the video stops. */
  .hero-video{
    --hero-media-h:calc(100vw * 16 / 9);
    min-height:0;
    background-image:url(eldar-earth-mobile-poster.webp);
    background-size:100% auto;            /* match the video block exactly */
    background-position:center top;
  }
  .hero-media{
    inset:0 0 auto 0; height:var(--hero-media-h);
    object-position:center top;
  }
  .hero-video .hero-full-inner{
    padding-top:calc(var(--hero-media-h) * .50); padding-bottom:44px;
  }
  .hero-video .hero-full-inner > h1,
  .hero-video .hero-full-inner > .lede,
  .hero-video .hero-full-inner > .hero-actions{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  /* belt and braces: the selector never attaches sources here, and if it does not
     run at all the element is still not shown. The poster background stays. */
  .hero-media{ display:none; }
}
.hero-full-inner{
  position:relative; z-index:1; width:100%;
  padding-block:clamp(48px,7vw,88px); color:var(--paper);
}
.hero-full h1{ color:var(--paper); }
.hero-full .lede{ color:#DCD5D0; max-width:46ch; font-size:clamp(18px,1.75vw,22px); }
.hero-full .eyebrow{ color:#A79E99; }
.hero-full .hot{ color:var(--fire); }


/* phone: the full-width bands need real height, and this must sit after the
   base rule above or it loses on source order */
@media (max-width:640px){
  .band-image{ height:300px; }
}


/* the job listing */
.ticks{ margin:0; padding-left:20px; color:var(--ink-2); }
.ticks li{ margin-bottom:8px; }
.empty .job-h, .job-h{
  margin:28px 0 12px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fire);
}

/* social icon in the footer */
.foot-cols a.social{
  display:inline-flex; align-items:center; border-bottom:0;
  padding:4px 0; opacity:1; transition:opacity .2s;
}
.foot-cols a.social:hover{ opacity:.75; }


/* ---------------------------------------------------------- text links */
.text-link{
  display:inline-block; margin-top:22px; font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--fire); padding-bottom:2px;
}
.text-link + .text-link{ margin-left:28px; }
.body-copy p a, .lede a{ text-decoration:none; border-bottom:1px solid var(--fire); }
.dark .text-link{ color:var(--paper); border-bottom-color:var(--fire); }
.hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 32px; }
.hero-actions .btn{ margin-top:0; }
.hero-actions .text-link{ margin-top:0; color:var(--paper); border-bottom-color:var(--fire); }

/* ---------------------------------------------------------- headline widths
   .h2 is capped at 22ch so section headings stay a tight block. A closing
   statement is the exception: it is the sentence, not a label for one. */
.h2.wide{ max-width:30ch; }

/* a single declarative line, set in the display face. Used to close a section
   where the argument has already been made and only the claim should remain. */
.kicker{
  margin-top:clamp(28px,3vw,44px);
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:clamp(17px,1.9vw,25px); line-height:1.26; letter-spacing:-.015em;
  max-width:34ch;
}
.dark .kicker{ color:var(--paper); }

/* ---------------------------------------------------------- proof band
   Three figures, nothing else. The numbers are deliberately NOT in the accent:
   orange and yellow mean heat on this site, and MW and TW are power, not
   temperature. Scale carries them instead. */
.proof-figs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,5vw,72px); margin-top:clamp(28px,3.4vw,48px);
}
.proof-fig{ border-top:1px solid var(--ink); padding-top:20px; }
/* .proof-fig .proof-num, not .proof-num: the qualifier below it is styled with
   `.proof-fig p`, which would otherwise win on specificity and flatten the number
   back to body size. */
.proof-fig .proof-num{
  font-family:var(--display); font-weight:500;
  font-size:clamp(38px,4.6vw,62px); line-height:1; letter-spacing:-.03em;
  margin-top:0;
}
.proof-fig p{ margin-top:16px; font-size:15px; color:var(--ink-2); max-width:26ch; }
.dark .proof-fig{ border-top-color:#4A4240; }
.dark .proof-fig .proof-num{ color:var(--paper); }
.dark .proof-fig p{ color:#A79E99; }
@media (max-width:680px){ .proof-figs{ grid-template-columns:1fr; gap:28px; } }

/* ---------------------------------------------------------- roadmap
   Ordered stages. On desktop they run left to right under a hairline with a
   marker at each start; on a phone the same markers run down a left rail,
   which is the only way six stages stay readable at 390px. */
.roadmap{
  display:grid; grid-template-columns:repeat(var(--steps,5),1fr);
  gap:clamp(20px,2.4vw,34px); margin-top:clamp(32px,4vw,56px);
}
.stage{ position:relative; border-top:1px solid var(--ink); padding-top:22px; }
.stage::before{
  content:""; position:absolute; top:-4px; left:0;
  width:9px; height:9px; border-radius:50%; background:var(--ink);
}
.stage .n{
  display:block; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);
}
.stage h3{
  margin-top:8px; font-family:var(--body); font-weight:700; font-size:16.5px;
  letter-spacing:0; text-transform:none;
}
.stage p{ margin-top:10px; font-size:14.5px; color:var(--ink-2); }
.dark .stage{ border-top-color:#4A4240; }
.dark .stage::before{ background:var(--paper); }
.dark .stage p{ color:#CFC7C2; }
@media (max-width:1180px){ .roadmap{ grid-template-columns:repeat(3,1fr); row-gap:36px; } }
@media (max-width:820px){ .roadmap{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .roadmap{
    grid-template-columns:1fr; gap:0;
    border-left:1px solid var(--line); padding-left:26px;
  }
  .stage{ border-top:0; padding-top:0; padding-bottom:28px; }
  .stage:last-child{ padding-bottom:0; }
  .stage::before{ top:7px; left:-30px; }
  .dark .roadmap{ border-left-color:#4A4240; }
}

/* ---------------------------------------------------------- platform flow
   Four conceptual stages joined by a hairline. Conceptual on purpose: it is
   the business shape, not a plant schematic. */
.flow{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,30px); margin-top:clamp(32px,4vw,56px);
}
.flow-node{ position:relative; border:1px solid var(--line); padding:clamp(20px,2.2vw,28px); }
.flow-node:not(:first-child)::before{
  content:""; position:absolute; top:50%; left:calc(-1 * clamp(18px,2.2vw,30px));
  width:clamp(18px,2.2vw,30px); height:1px; background:var(--line);
}
.flow-node .n{
  display:block; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey);
}
.flow-node h3{
  margin-top:10px; font-family:var(--body); font-weight:700; font-size:16.5px;
  letter-spacing:0; text-transform:none;
}
.flow-node p{ margin-top:10px; font-size:14.5px; color:var(--ink-2); }
.dark .flow-node{ border-color:#4A4240; }
.dark .flow-node:not(:first-child)::before{ background:#4A4240; }
.dark .flow-node p{ color:#CFC7C2; }
@media (max-width:980px){
  .flow{ grid-template-columns:repeat(2,1fr); }
  .flow-node:not(:first-child)::before{ display:none; }
}
@media (max-width:620px){ .flow{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------- audience paths */
.paths{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(28px,3.4vw,44px); }
@media (max-width:680px){ .paths{ grid-template-columns:1fr; } }