/* Netflex — brand tokens sampled from the event business cards
   (NETFLEX_Alfred_Roth_A4_duplex_long_edge.pdf, 300 dpi render). */
:root {
  --navy-900:#081A2C;
  --navy-800:#0C243A;
  --navy-700:#102B43;
  --cyan:#00BCEB;
  --cyan-dark:#0090b4;      /* AA-safe cyan for links on white */
  --lime:#A6E85D;
  --white:#fff;

  --ink:#0d1b2a;            /* body text on light */
  --ink-soft:#4a5a6a;       /* secondary text on light */
  --slate:#AAB5C0;          /* body text on dark  (7.4:1 on --navy-900) */
  --slate-dim:#8794a3;      /* muted text on dark (4.9:1 on --navy-900) */
  --line:#dce5ec;
  --line-dark:#1d3548;

  --wrap:1140px;
  --r:10px;
  --font:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* The canvas (what a browser paints beyond the document, e.g. iOS rubber-band
   overscroll or the gap left when the mobile address bar collapses) takes its
   colour from <html>. With <html> transparent it fell back to body's white, so
   scrolling past the navy footer flashed a white screen. Both ends of the page
   are navy, so paint the canvas navy and let body keep white for the content. */
html{background:var(--navy-900);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
h1,h2,h3{line-height:1.15;margin:0;font-weight:900;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--cyan-dark);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--cyan);color:var(--navy-900);
  padding:.7rem 1.1rem;font-weight:700;z-index:100}
.skip-link:focus{left:12px;top:12px}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:.6rem}
.logo__mark{width:38px;height:38px;flex:0 0 auto}
.logo__text{display:flex;flex-direction:column;line-height:1}
.logo__word{font-weight:900;font-size:1.16rem;letter-spacing:.01em}
.logo__net{color:var(--navy-900)}
.logo__flex{color:var(--cyan)}
.logo--dark .logo__net{color:#fff}
.logo__sub{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin-top:.28rem}
.logo--dark .logo__sub{color:var(--slate-dim)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,26,44,.92);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:70px;padding-block:.6rem}
.nav__brand{text-decoration:none}
.nav__links{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.7rem);
  list-style:none;margin:0;padding:0}
.nav__links a{color:var(--slate);text-decoration:none;font-weight:700;font-size:.9rem;
  letter-spacing:.02em;white-space:nowrap}
.nav__links a:hover{color:#fff}
.nav__cta{background:var(--cyan);color:var(--navy-900)!important;padding:.5rem .95rem;
  border-radius:var(--r)}
.nav__cta:hover{background:var(--lime)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-900);color:#fff;
  padding-block:clamp(4rem,12vw,8.5rem)}
.hero::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;
  background:linear-gradient(180deg,var(--cyan) 0%,var(--cyan) 45%,var(--lime) 45%,var(--lime) 100%)}
.hero__graph{position:absolute;top:0;right:0;width:min(62%,720px);height:100%;
  opacity:.5;pointer-events:none}
.hero__inner{position:relative}
.hero__eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:1.4rem}
.hero__title{font-size:clamp(2.6rem,8vw,5rem);letter-spacing:-.02em}
.hero__title span{display:block}
.hero__title .accent{color:var(--cyan)}
.hero__strapline{margin-top:1.6rem;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;color:var(--slate)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:var(--r);font-weight:700;
  text-decoration:none;font-size:.95rem;border:2px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn--primary{background:var(--cyan);color:var(--navy-900)}
.btn--primary:hover{background:var(--lime)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- sections ---------- */
.section{padding-block:clamp(3.5rem,9vw,6.5rem)}
.section--tint{background:#f6f9fb;border-block:1px solid var(--line)}
.section--dark{background:var(--navy-900);color:#fff}
.section--dark .lede{color:var(--slate)}
.section__title{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:1.1rem}
.section__title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;
  margin-top:1rem;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.lede{max-width:62ch;font-size:1.08rem;color:var(--ink-soft)}
.lede--lg{font-size:clamp(1.2rem,2.6vw,1.6rem);color:var(--ink);font-weight:700;
  line-height:1.4;max-width:26ch}

/* ---------- pillars ---------- */
.pillars{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pillar{border:1px solid var(--line);border-top:3px solid var(--cyan);
  border-radius:var(--r);padding:1.5rem 1.4rem;background:#fff}
.pillar:nth-child(2){border-top-color:var(--lime)}
.pillar:nth-child(3){border-top-color:var(--navy-900)}
.pillar__title{font-size:1.12rem;margin-bottom:.5rem}
.pillar p{margin:0;color:var(--ink-soft);font-size:.96rem}

/* ---------- spec table ---------- */
.table-scroll{overflow-x:auto;margin-top:2.4rem;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;min-width:520px;font-size:.98rem}
.spec th,.spec td{text-align:left;padding:.95rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.1)}
.spec thead th{background:var(--navy-800);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime)}
.spec tbody th{font-weight:700;color:#fff;width:38%}
.spec tbody td{color:var(--slate)}
.spec tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}

/* ---------- scope ---------- */
.scope{display:grid;gap:1.6rem;margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.scope__col{background:#f6f9fb;border-radius:var(--r);padding:1.7rem 1.5rem;
  border-left:4px solid var(--cyan)}
.scope__col:nth-child(2){border-left-color:var(--lime)}
.scope__col:nth-child(3){border-left-color:var(--navy-900)}
.scope__num{font-size:.72rem;letter-spacing:.24em;font-weight:900;color:var(--cyan-dark);margin:0 0 .4rem}
.scope__col:nth-child(2) .scope__num{color:#5f9c21}
.scope__col:nth-child(3) .scope__num{color:var(--navy-900)}
.scope__title{font-size:1.1rem;margin-bottom:.9rem}
.scope__list{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-size:.94rem}
.scope__list li{margin-bottom:.6rem}
.scope__list li:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;align-items:start}}
.contact__details{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem}
.contact__details li{display:flex;gap:.9rem;align-items:flex-start;color:var(--slate)}
.contact__details a{color:#fff;text-decoration:none}
.contact__details a:hover{color:var(--cyan)}
.lbl{color:var(--cyan);font-weight:900;font-size:.72rem;letter-spacing:.16em;
  min-width:1.1rem;padding-top:.28rem}

.form{background:var(--navy-800);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:clamp(1.4rem,3vw,2rem)}
.form__heading{font-size:1.12rem;margin-bottom:1.2rem;color:#fff}
.field{display:block;margin-bottom:1rem}
.field__label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.4rem}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--slate-dim)}
.field input,.field textarea{width:100%;padding:.7rem .85rem;border-radius:8px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
  font:inherit;font-size:.98rem}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-dim)}
.form .btn{width:100%;margin-top:.4rem}
.form__note{margin:.9rem 0 0;font-size:.82rem;color:var(--slate-dim)}
.form__status{padding:.8rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.92rem;font-weight:700}
.form__status--ok{background:rgba(166,232,93,.15);color:var(--lime);
  border:1px solid rgba(166,232,93,.4)}
.form__status--err{background:rgba(255,120,120,.12);color:#ff9d9d;
  border:1px solid rgba(255,120,120,.4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.footer{background:var(--navy-900);color:var(--slate);
  border-top:1px solid rgba(255,255,255,.1);padding-block:2.8rem}
.footer__inner{display:grid;gap:1.6rem}
@media (min-width:760px){
  .footer__inner{grid-template-columns:1fr auto;align-items:center}
  .footer__legal{grid-column:1/-1}
}
.footer__tag{margin:.9rem 0 0;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate-dim)}
.footer__meta p{margin:0 0 .3rem;font-size:.94rem}
.footer__meta a{color:#fff;text-decoration:none}
.footer__meta a:hover{color:var(--cyan)}
.footer__legal{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;margin:0;
  font-size:.76rem;color:var(--slate-dim)}
.region{letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--slate)}
/* A button, not a link — it reopens the consent banner rather than going anywhere. */
.footer__consent{background:none;border:0;padding:0;font:inherit;color:var(--slate-dim);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.footer__consent:hover{color:#fff}

/* ---------- language switcher ---------- */
.langs{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.lang{display:block;padding:.3rem .5rem;border-radius:6px;font-size:.76rem;font-weight:700;
  letter-spacing:.08em;color:var(--slate-dim);text-decoration:none;line-height:1}
.lang:hover{color:#fff;background:rgba(255,255,255,.08)}
.lang--on{color:var(--navy-900);background:var(--lime)}
.lang--on:hover{color:var(--navy-900);background:var(--lime)}

/* ---------- cookie consent ---------- */
/* A bottom sheet rather than a centred modal: the page is one long scroll and the
   banner must not block reading while it waits for an answer. Sits above the
   sticky nav's z-index so it is never half-covered. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--navy-800);border-top:1px solid var(--line-dark);
  color:var(--slate);padding:1rem clamp(20px,5vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.7rem 1.6rem;font-size:.92rem;box-shadow:0 -8px 24px rgba(0,0,0,.35)}
/* An author `display:flex` outranks the UA stylesheet's [hidden]{display:none},
   so without this the dismissed banner stays on screen and keeps swallowing
   clicks on the footer beneath it. */
.consent[hidden]{display:none}
.consent__text{margin:0;max-width:64ch}
.consent__actions{display:flex;gap:.6rem;flex:0 0 auto}
/* The page buttons are sized for hero CTAs; that much padding turns the banner
   into a two-row block on a laptop. */
.consent .btn{padding:.55rem 1.3rem;font-size:.88rem}

/* ---------- narrow screens ----------
   Below ~720px the brand lockup plus five nav links exceed the viewport and push
   the whole page sideways. Let the bar wrap to a second row instead of clipping
   or hiding navigation — this is a one-page site, so the anchors are the only
   way around it. */
@media (max-width:720px){
  /* Two compact rows instead of three wrapped ones: brand + language on top,
     the section links on a horizontally scrollable row beneath. Keeps every link
     reachable and the bar around 95px instead of the 186px a fully wrapped menu
     needed, so it can stay sticky without eating a third of a small screen. */
  .nav__inner{flex-wrap:wrap;row-gap:0;padding-block:.3rem;justify-content:flex-start}
  /* The flex item is the <nav> wrapper, not the <ul> inside it — ordering the ul
     does nothing and leaves the menu at order:0, i.e. above the logo. */
  .nav__inner > nav{order:3;width:100%}
  .nav__brand{order:1}
  .langs{order:2;margin-left:auto}

  .nav__links{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:0 .35rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links li{flex:0 0 auto}

  /* Tap targets: the text is only ~16px tall, so height is set explicitly rather
     than inferred from padding (WCAG 2.5.5 / Apple HIG want ~44px). */
  .nav__links a{display:flex;align-items:center;min-height:44px;padding:0 .5rem;
    font-size:.82rem;white-space:nowrap}
  .nav__cta{padding:0 .9rem}
  .lang{display:flex;align-items:center;min-height:44px;padding:0 .55rem}
  .nav__brand{display:flex;align-items:center;min-height:44px}
  .contact__details a,.footer__meta a,.footer__consent{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:560px){
  /* Stacked: the text needs the full width, and two side-by-side buttons still
     clear 44px on a 320px screen once they share the row. */
  .consent{gap:.8rem}
  .consent__actions{width:100%}
  .consent__actions .btn{flex:1 1 0;text-align:center;min-height:44px}

  /* Ukrainian's strapline is the longest of the three and wrapped its last word
     between 421 and 560px, where the tighter rule below does not yet apply.
     Trimming the tracking keeps all three languages on one line. */
  .hero__strapline{letter-spacing:.16em}
}
@media (max-width:420px){
  /* At 320px the brand lockup plus the switcher come to exactly the available
     280px and wrap onto a third row on rounding. A tighter nav gutter and
     switcher padding buy back ~24px so the bar stays two rows. */
  .nav .wrap{padding-inline:14px}
  .lang{padding:0 .42rem}
  /* The link row only overflows below ~400px (and mostly in UK/DE, whose words are
     longer). Fade its right edge there so the clipped item reads as "scroll me"
     rather than as a broken layout. Scoped tight: above this it fits and a fade
     would just dim the Contact pill for no reason. */
  .nav__links{mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .logo__mark{width:30px;height:30px}
  .logo__word{font-size:.95rem}
  /* 8px was unreadable; this is the floor for a tracked uppercase label. */
  .logo__sub{font-size:.6rem;letter-spacing:.16em}
  /* Pulls the hero CTAs above the fold on a 320x568 screen, where they were
     landing just below it. */
  .hero{padding-block:2.4rem 3rem}
  .hero__eyebrow{margin-bottom:.9rem}
  .hero__actions{margin-top:1.5rem}
  .hero__title{font-size:clamp(2rem,9.5vw,3rem)}
  /* keeps "1.5-5 MW" from orphaning onto its own line */
  .hero__strapline{font-size:.72rem;letter-spacing:.14em;margin-top:1.1rem}
}
@media (max-width:360px){
  /* "…1.5-5 MW" was orphaning its last word onto a second line at 320px. */
  .hero__strapline{font-size:.66rem;letter-spacing:.1em}
  .btn{padding:.85rem 1.2rem;font-size:.9rem}
  .hero__actions .btn{flex:1 1 100%;text-align:center}
}