/* Voltera Grid Services AB */

:root{
  --navy:#072A3D;          /* deep petrol, drawn down from the brand blue */
  --brand:#0772AB;         /* Voltera brand blue, sampled from the logo */
  --brand-deep:#055C8B;
  --text:#404751;
  --heading:#666C74;
  --muted:#8A9099;
  --rule:#E1E6EA;
  --footer-text:#BDDCEE;
  --footer-link:#DCEDF7;
  --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-deep)}

p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.narrow{max-width:980px}
.narrow > *{max-width:620px}   /* voltcm measure, left-aligned in the column */
.mid{max-width:980px}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:104px;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:height .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.site-header.low{
  height:68px;
  border-bottom-color:var(--rule);
}

.site-header .top{
  height:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.wordmark{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:22px;
  font-weight:400;
  letter-spacing:3.5px;
  color:var(--brand);
  text-transform:uppercase;
  transition:font-size .35s ease;
}
.wordmark:hover{color:var(--brand-deep)}
.wordmark .mark{
  width:1.32em;height:1.32em;
  flex:none;
  display:block;
  color:currentColor;
}
.site-header.low .wordmark{font-size:19px}

.site-nav ul{list-style:none;margin:0;padding:0}
.site-nav li{display:inline-block}
.site-nav a{
  display:inline-block;
  margin-left:34px;
  font-size:13px;
  font-weight:500;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--brand);
}
.site-nav a:hover,.site-nav a.current{color:var(--navy)}

/* ---------- Hero ---------- */

/* A flat brand-colour band, 300px, headline centred in it.
   The grid runs at 54.4deg — the angle of the longest edge of the bolt
   in the logo — with a second set square to it. */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--brand);
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero--home{height:300px}
.hero--page{height:300px}

.hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    repeating-linear-gradient(126deg,rgba(255,255,255,.15) 0 1px,transparent 1px 52px),
    repeating-linear-gradient(36deg,rgba(255,255,255,.085) 0 1px,transparent 1px 52px);
  animation:grid-drift 34s linear infinite;
  will-change:transform;
}

/* One full 44px period, so the loop is seamless. */
@keyframes grid-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(30.3px,-42.3px,0)}
}

.hero::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(126deg,
    transparent 40%,
    rgba(255,255,255,.085) 50%,
    transparent 60%);
  animation:hero-sheen 19s ease-in-out infinite;
  will-change:transform;
}

@keyframes hero-sheen{
  0%,100%{transform:translate3d(-15%,-11%,0)}
  50%{transform:translate3d(15%,11%,0)}
}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none}
}

.hero .inner{position:relative;z-index:2;max-width:960px}

.hero h1{
  margin:0;
  font-size:clamp(21px,3.1vw,36px);
  font-weight:500;
  line-height:1.5;
  letter-spacing:clamp(4px,1.05vw,12px);
  text-transform:uppercase;
  color:#fff;
  text-indent:clamp(4px,1.05vw,12px);
}

.hero .kicker{
  margin:0 0 26px;
  font-size:12px;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ---------- Sections ---------- */

.lead{padding:150px 0 0}
.section{padding:78px 0 0}
.section--tight{padding:56px 0 0}

.lead p{
  font-size:19px;
  line-height:1.7;
  color:#39404A;
}

h2{
  margin:0 0 26px;
  font-family:var(--sans);
  font-size:22px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:1.4px;
  color:var(--heading);
}

h3{
  margin:0 0 10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--navy);
}

.eyebrow{
  margin:0 0 22px;
  font-size:12px;
  font-weight:500;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Three-up ---------- */

.cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
}
.cols p{font-size:15px;line-height:1.65;margin:0}
.cols > div{border-top:1px solid var(--rule);padding-top:20px}

/* ---------- Figure ---------- */

.figure{margin:0}
.figure img{display:block;width:100%;height:auto}
.figure figcaption{
  margin-top:16px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  max-width:620px;
}

/* ---------- Investor profiles ---------- */

.profiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:54px;
  margin-top:38px;
}
.profiles > div{
  border-top:2px solid var(--brand);
  padding-top:24px;
}
.profiles .tag{
  display:block;
  margin:0 0 14px;
  font-size:11px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--brand);
}
.profiles h3{
  margin:0 0 12px;
  font-size:19px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--navy);
}
.profiles .intro{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.65;
}
.profiles .dashlist li{font-size:14px;line-height:1.7}

/* ---------- Figures ---------- */

.figures{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
}
.figures > div{border-top:1px solid var(--rule);padding-top:22px}
.figures .n{
  display:block;
  font-size:30px;
  font-weight:500;
  letter-spacing:.5px;
  line-height:1.2;
  color:var(--navy);
  margin-bottom:12px;
}
.figures .l{
  display:block;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

/* ---------- Lists ---------- */

.dashlist{margin:0;padding:0;list-style:none}
.dashlist li{
  font-size:15px;
  line-height:1.75;
  padding-left:1em;
}
.dashlist li::before{
  content:"-";
  color:var(--brand);
  display:inline-block;
  width:1em;
  margin-left:-1em;
}

/* ---------- Presentation ---------- */

.deck-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:34px;
}

.btn{
  display:inline-block;
  padding:15px 30px;
  font-size:12px;
  font-weight:500;
  letter-spacing:3px;
  text-transform:uppercase;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.btn--ghost{background:transparent;color:var(--navy);border-color:#C9CFD6}
.btn--ghost:hover{background:transparent;color:var(--brand);border-color:var(--brand)}

/* ---------- Contact ---------- */

.contact-name{
  font-size:19px;
  font-weight:500;
  color:var(--navy);
  margin:0 0 4px;
}
.contact-role{
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
}
.contact-lines{font-size:16px;margin:0}
.contact-lines a{color:var(--brand)}

/* ---------- Form ---------- */

.form{margin-top:44px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.field{margin-bottom:22px}

.field label{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
}

.field input,
.field select,
.field textarea{
  display:block;
  width:100%;
  padding:13px 14px;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--text);
  background:#fff;
  border:1px solid #D5DAE0;
  border-radius:0;
  transition:border-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.field textarea{resize:vertical;min-height:120px}

.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A9099' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:38px;
}

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

.form button{cursor:pointer;font-family:var(--sans)}

.form-status{
  margin:18px 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--brand);
}
.form-status.error{color:#A6371F}

/* ---------- Rule + disclosure ---------- */

.spacer{height:78px}

.rule{
  height:1px;
  border:0;
  margin:0;
  background:var(--brand);
}

.disclosure{
  padding:34px 0 70px;
  text-align:center;
}
.disclosure p{
  max-width:1200px;
  margin:0 auto;
  font-size:13px;
  line-height:1.7;
  color:#777;
}

/* ---------- Footer ---------- */

.site-footer{
  background:var(--brand);
  color:var(--footer-text);
  font-size:14px;
  line-height:1.6;
}
.site-footer .inner{
  max-width:1200px;
  margin:0 auto;
  padding:26px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-footer p{margin:0}
.site-footer ul{list-style:none;margin:0;padding:0;text-align:right}
.site-footer li{display:inline-block;margin-left:30px}
.site-footer a{color:var(--footer-link)}
.site-footer a:hover{color:#fff}

/* ---------- Responsive ---------- */

@media (max-width:900px){
  .cols{grid-template-columns:1fr;gap:32px}
  .profiles{grid-template-columns:1fr;gap:40px}
  .figures{grid-template-columns:repeat(2,1fr);gap:30px}
  .lead{padding-top:88px}
  .lead p{font-size:17px}
}

@media (max-width:640px){
  .site-header,.site-header.low{height:72px}
  .wordmark,.site-header.low .wordmark{font-size:16px;letter-spacing:2.5px;gap:8px}
  /* Measured at 390px: wordmark 116 + three nav items 222 + gaps 39 = 377
     against 342 of usable width, so the row wrapped and the nav landed on
     top of the logo. Dropping the word frees 95px, which is more than the
     35 needed, so the nav keeps a legible size and the header stays one row
     at the same height. The bolt still reads as the mark, and the link's
     aria-label still says "Voltera, home". */
  .wordmark span{display:none}
  .site-nav a{margin-left:16px;font-size:11px;letter-spacing:1.8px}
  .hero--home,.hero--page{height:230px}
  .figures{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:0}
  .form button{width:100%}
  .site-footer .inner{flex-direction:column;align-items:flex-start}
  .site-footer ul{text-align:left}
  .site-footer li{margin-left:0;margin-right:24px}
  .deck-actions .btn{width:100%;text-align:center}
}