/* ==========================================================================
   VOLTLINE ELECTRICAL — design system
   Black stage · oversized uppercase display · absolutely-placed text blocks
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  --vl-black:#000000;
  --vl-white-100:#F0F0FA;
  --vl-white-90:rgba(240,240,250,.9);
  --vl-white-80:rgba(240,240,250,.8);
  --vl-white-70:rgba(240,240,250,.7);
  --vl-white-60:rgba(240,240,250,.6);
  --vl-white-50:rgba(240,240,250,.5);
  --vl-white-35:rgba(240,240,250,.35);
  --vl-white-25:rgba(255,255,255,.25);
  --vl-white-15:rgba(240,240,250,.15);
  --vl-white-10:rgba(240,240,250,.1);
  --vl-black-80:rgba(0,0,0,.8);
  --vl-accent:#4DE1C1;

  --vl-gutter:40px;
  --vl-stage:1400px;
  --vl-header-h:60px;
  --vl-ease:cubic-bezier(.25,.8,.25,1);

  /* No webfont is bundled: these resolve to a tight grotesque everywhere, so the
     display type never falls back to Arial's wide proportions. */
  --font-sans:'Archivo','Helvetica Neue',Helvetica,'Arial Narrow',Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,'Roboto Mono','IBM Plex Mono',Menlo,Consolas,monospace;
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--vl-black);
  color:var(--vl-white-100);
  font:400 16px/1.625 var(--font-sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
fieldset{ border:0; padding:0; margin:0; min-width:0; }
legend{ padding:0; }

:focus-visible{ outline:2px solid var(--vl-accent); outline-offset:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--vl-white-100); color:#000; padding:12px 20px;
  font:500 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.06em;
}
.skip-link:focus{ left:0; }

/* --- 3. Typography ------------------------------------------------------ */
h1,h2,h3,h4{
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:700;
}
h1{
  font-size:100px; line-height:.95; letter-spacing:-1px;
  max-width:13ch;
}
h2{
  font-size:48px; line-height:1; letter-spacing:.02em;
  max-width:16ch;
}
h3{ font-size:20px; line-height:1.2; font-weight:400; letter-spacing:.08em; }
h4{ font-size:16px; line-height:1.3; font-weight:400; letter-spacing:.06em; }

.eyebrow{
  font:400 13px/1 var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vl-white-70);
}
.lede{
  font-size:16px; line-height:26px;
  color:var(--vl-white-90);
  max-width:46ch;
  margin-top:15px;
}

/* --- 4. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  padding:14px 22px;
  min-height:44px;
  border:1px solid var(--vl-white-25);
  border-radius:0;
  background:transparent;
  color:var(--vl-white-100);
  font:500 14px/1 var(--font-sans);
  text-transform:uppercase;
  letter-spacing:.06em;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.btn:hover{ border-color:var(--vl-white-100); background:var(--vl-white-10); }
.btn .arrow{ transition:transform .3s var(--vl-ease); display:inline-block; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--solid{
  background:var(--vl-white-100); color:#000; border-color:var(--vl-white-100);
}
.btn--solid:hover{ background:#fff; border-color:#fff; }

/* --- 5. Header ---------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:120;
  height:var(--vl-header-h);
  display:flex; align-items:center;
  padding:0 var(--vl-gutter);
  gap:24px;
  background:transparent;
  transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:var(--vl-black-80);
  border-bottom-color:var(--vl-white-15);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.wordmark{
  font:700 18px/1 var(--font-sans);
  letter-spacing:.24em;
  text-transform:uppercase;
  flex:0 0 auto;
}
.site-nav{ margin-left:auto; }
.site-nav ul{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.site-nav a{
  position:relative;
  display:inline-block; padding:8px 0;
  font:500 13px/1 var(--font-sans);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--vl-white-80);
  transition:color .3s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--vl-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--vl-ease);
}
.site-nav a:hover{ color:var(--vl-white-100); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-nav a[aria-current="page"]{ color:var(--vl-white-100); }

.header-cta{ flex:0 0 auto; padding:9px 16px; min-height:0; font-size:12px; }
@media (max-width:1180px){
  .site-nav ul{ gap:18px; }
  .site-nav a{ font-size:12px; letter-spacing:.06em; }
}

/* Hamburger */
.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block; width:22px; height:1px; background:var(--vl-white-100);
  margin:5px auto;
  transition:transform .3s var(--vl-ease), opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* --- 6. Mobile nav overlay ---------------------------------------------- */
.nav-overlay{
  position:fixed; inset:0; z-index:110;
  background:#000;
  display:flex; flex-direction:column;
  padding:calc(var(--vl-header-h) + 24px) var(--vl-gutter) 24px;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--vl-ease), visibility .4s var(--vl-ease);
  overflow-y:auto;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; }
.nav-overlay ul{ display:flex; flex-direction:column; }
.nav-overlay a{
  display:flex; align-items:center; min-height:52px;
  font:500 1.25rem/1 var(--font-sans);
  text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid var(--vl-white-15);
}
.nav-overlay .overlay-emergency{
  margin-top:32px;
  display:flex; justify-content:center;
  min-height:48px;
}
.nav-overlay-close{ margin-top:auto; padding-top:40px; display:flex; justify-content:center; }
.nav-overlay-close button{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--vl-white-25); background:transparent; cursor:pointer;
  color:var(--vl-white-100); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
body.nav-open{ overflow:hidden; }

/* --- 7. Section shell --------------------------------------------------- */
.section{
  position:relative;
  width:100%;
  background:var(--vl-black);
  overflow:hidden;
}
.section-media{
  position:absolute; inset:0; z-index:0;
}
/* Scene art is inlined <svg> (a .svg file cannot be served by the uploader).
   preserveAspectRatio="xMidYMid slice" on the svg does the object-fit:cover job. */
.section-media img,
.section-media svg{
  width:100%; height:100%;
  display:block;
}
.section-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.55) 100%);
}
.section--soft .section-media::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.25) 100%);
}
.section-inner{
  position:relative; z-index:1;
  max-width:var(--vl-stage);
  margin-inline:auto;
  width:100%;
  height:max(100vh,941px);
  height:max(100svh,941px);
}
.section-inner > *{
  position:absolute;
  width:520px;
}
.inner-left-top{ left:100px; top:13%; width:535px; }
.inner-left-middle{ left:100px; top:50%; transform:translateY(-50%); }
.inner-left-bottom{ left:100px; bottom:15%; }
.inner-right-top{ right:100px; top:13%; width:450px; }
.inner-right-middle{ right:100px; top:50%; transform:translateY(-50%); }
.inner-right-bottom{ right:100px; bottom:15%; }
.inner-center{
  left:50%; transform:translate(-50%,-50%);
  top:50%; width:960px; text-align:center;
}
.inner-center h1,.inner-center h2{ margin-inline:auto; }
.inner-center .lede{ margin-inline:auto; text-align:center; }
.inner-right-bottom .btn,
.inner-right-top .btn,
.inner-left-bottom .btn,
.inner-left-top .btn,
.inner-left-middle .btn,
.inner-right-middle .btn,
.inner-center .btn{ margin-top:30px; }

.section .eyebrow{ margin-bottom:20px; }

/* --- 8. Reveal motion --------------------------------------------------- */
@keyframes reveal-header{ from{opacity:0; transform:translateY(220%)} to{opacity:1; transform:none} }
@keyframes reveal-subheader{ from{opacity:0; transform:translateY(80%)} to{opacity:1; transform:none} }
@keyframes reveal-button{ from{opacity:0; transform:translateY(300%)} to{opacity:1; transform:none} }
.reveal-header{ animation:reveal-header .75s ease-in-out both; }
.reveal-subheader{ animation:reveal-subheader .75s ease-in-out .5s backwards; }
.reveal-button{ animation:reveal-button .75s ease-in-out 1s backwards; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* --- 9. Stats band ------------------------------------------------------ */
.stats{ padding:100px var(--vl-gutter); }
.stats-grid{
  max-width:var(--vl-stage); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:48px;
}
.stat__value{
  font:700 64px/.95 var(--font-sans);
  letter-spacing:-.01em;
  color:var(--vl-white-100);
}
.stat__label{
  margin-top:16px;
  font:400 14px/1.4 var(--font-sans);
  color:var(--vl-white-80);
}
.stat__rule{ width:40px; height:1px; background:var(--vl-accent); margin-bottom:24px; opacity:.7; }

/* --- 10. Tile grid ------------------------------------------------------ */
.tiles{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--vl-white-15);
  border-top:1px solid var(--vl-white-15);
  border-bottom:1px solid var(--vl-white-15);
}
.tiles--2{ grid-template-columns:repeat(2,1fr); }
.tile{
  position:relative; display:block;
  background:#000; overflow:hidden;
  aspect-ratio:16/9;
  margin:0;
}
.tile img,
.tile svg{
  width:100%; height:100%; display:block;
  transition:transform .6s var(--vl-ease);
}
.tile:hover img, .tile:hover svg,
.tile:focus-visible img, .tile:focus-visible svg{ transform:scale(1.04); }
.tile__label{
  position:absolute; inset:auto 0 0 0;
  padding:24px;
  /* Deeper scrim: the eyebrow and sub-copy must stay readable over a
     bright pool of practical light in any of the three source images. */
  background:linear-gradient(transparent,rgba(0,0,0,.55) 38%,rgba(0,0,0,.92) 100%);
  display:flex; flex-direction:column; gap:10px;
}
.tile__label h3{
  font:700 28px/1 var(--font-sans);
  letter-spacing:.02em; text-transform:uppercase;
}
.tile__label p{
  font:400 15px/1.45 var(--font-sans);
  color:var(--vl-white-90); max-width:34ch;
}
.tile__arrow{
  font-size:18px; color:var(--vl-white-100);
  transition:transform .3s var(--vl-ease);
  display:inline-block;
}
.tile:hover .tile__arrow{ transform:translateX(4px); }
.tile--square{ aspect-ratio:1/1; }
.tile--project{ aspect-ratio:3/4; }
.tile--project .tile__label{ padding:20px; }
.tile__meta{
  font:400 12px/1.4 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--vl-white-70);
}
.tile__label .eyebrow{ color:var(--vl-white-80); }
.tile__outcome{
  font:400 14px/1.45 var(--font-sans); color:var(--vl-white-90);
}

/* --- 11. Intro strip ---------------------------------------------------- */
.intro .section-inner{ height:auto; padding:calc(var(--vl-header-h) + 120px) 0 100px; }
.intro h1{ max-width:14ch; }

/* --- 12. CTA band ------------------------------------------------------- */
.cta-band .section-inner{ height:auto; padding:120px 0; }

/* --- 13. Forms ---------------------------------------------------------- */
.form-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  margin-top:30px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font:400 12px/1 var(--font-sans);
  letter-spacing:.08em; text-transform:uppercase;
  /* 60% off-white on black is below AA for small text; labels carry meaning. */
  color:var(--vl-white-80);
}
.field input,
.field select,
.field textarea{
  background:rgba(240,240,250,.05);
  border:1px solid var(--vl-white-25);
  border-radius:0;
  padding:14px;
  font-size:16px; line-height:1.4;
  width:100%;
  min-height:48px;
  transition:border-color .3s ease, background .3s ease;
  color:var(--vl-white-100);
}
.field textarea{ min-height:140px; resize:vertical; }
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23F0F0FA' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
}
.field select option{ background:#000; color:var(--vl-white-100); }
.field input::placeholder,
.field textarea::placeholder{ color:var(--vl-white-35); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--vl-accent);
  background:rgba(240,240,250,.08);
}
.form-actions{ margin-top:24px; }
.form-note{ margin-top:16px; font:400 12px/1.5 var(--font-sans); color:var(--vl-white-70); }
.form-status{ margin-top:16px; font:400 14px/1.5 var(--font-sans); color:var(--vl-accent); }
.form-status:empty{ display:none; }

.lines{ margin-top:30px; display:flex; flex-direction:column; }
.lines li{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--vl-white-15);
}
.lines li:first-child{ border-top:1px solid var(--vl-white-15); }
.line__label{
  flex:0 0 150px;
  font:400 12px/1.4 var(--font-sans);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--vl-white-60);
}
.line__value{ font:400 17px/1.4 var(--font-sans); color:var(--vl-white-100); transition:color .3s ease; }
.lines a:hover{ color:#ccc; }

/* --- 14. Value blocks --------------------------------------------------- */
.value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--vl-white-15); }
.value{ background:#000; padding:48px 40px; }
.value h3{ font:700 22px/1.1 var(--font-sans); letter-spacing:.02em; text-transform:uppercase; }
.value p{ margin-top:15px; color:var(--vl-white-90); max-width:42ch; }
.value__rule{ width:32px; height:1px; background:var(--vl-accent); margin-bottom:22px; opacity:.7; }

/* --- 15. Section index -------------------------------------------------- */
.index-band{ padding:100px var(--vl-gutter); border-top:1px solid var(--vl-white-15); }
.index-inner{ max-width:var(--vl-stage); margin-inline:auto; }
.index-list{
  margin-top:40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--vl-white-15);
}
.index-list a{
  background:#000; padding:32px 28px;
  display:flex; flex-direction:column; gap:12px;
  min-height:140px;
  transition:background .3s ease;
}
.index-list a:hover{ background:#0b0b0f; }
.index-list .idx{ font:400 12px/1 var(--font-mono); letter-spacing:.08em; color:var(--vl-accent); }
.index-list .lbl{ font:700 22px/1.1 var(--font-sans); text-transform:uppercase; letter-spacing:.02em; }

/* --- 16. Footer --------------------------------------------------------- */
.site-footer{
  background:#000;
  padding:0 var(--vl-gutter) 48px;
  border-top:1px solid var(--vl-white-15);
}
.footer-inner{
  max-width:var(--vl-stage); margin-inline:auto;
  padding-top:64px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  text-align:center;
}
.to-top{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--vl-white-25);
  background:transparent; color:var(--vl-white-100);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; cursor:pointer;
  transition:border-color .3s ease, background .3s ease;
}
.to-top:hover{ border-color:var(--vl-white-100); background:var(--vl-white-10); }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; }
.footer-links a{
  font:400 12px/1 var(--font-sans);
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--vl-white-60);
  transition:color .3s ease;
}
.footer-links a:hover{ color:var(--vl-white-100); }
.footer-legal{ font:400 12px/1.6 var(--font-sans); color:var(--vl-white-60); max-width:60ch; }
.footer-legal a{ color:var(--vl-white-80); border-bottom:1px solid var(--vl-white-25); }
.footer-legal a:hover{ color:var(--vl-white-100); }

/* --- 17. Responsive ----------------------------------------------------- */
@media (max-width:961px){
  :root{ --vl-gutter:20px; }

  body{ font-size:20px; line-height:26px; }
  h1{ font-size:50px; letter-spacing:-.5px; max-width:100%; }
  h2{ font-size:36px; line-height:1.05; max-width:100%; }
  .lede{ font-size:20px; line-height:26px; max-width:100%; }

  .site-nav,.header-cta{ display:none; }
  .nav-toggle{ display:block; }

  /* On mobile the image leads and the text stacks beneath it */
  .section{ display:flex; flex-direction:column; }
  .section-media{ position:relative; inset:auto; width:100%; }
  .section-media img, .section-media svg{ aspect-ratio:16/9; height:auto; }
  .section--portrait .section-media img, .section--portrait .section-media svg{ aspect-ratio:3/4; }
  .section-inner{ height:auto; padding:0 0 64px; }
  .section--hero .section-inner{ padding-bottom:72px; }
  .section-inner > *{
    position:static;
    width:auto;
    transform:none;
    left:auto; right:auto; top:auto; bottom:auto;
    text-align:left;
  }
  .inner-left-bottom,
  .inner-right-bottom,
  .inner-left-top,
  .inner-right-top,
  .inner-left-middle,
  .inner-right-middle,
  .inner-center,
  .inner-center-top{ margin-top:56px; }
  .section--hero .section-inner > *{ margin-top:40px; }
  .inner-center h1,.inner-center h2,
  .inner-center-top h1,.inner-center-top h2{ margin-inline:0; }
  .inner-center .lede,
  .inner-center-top .lede{ margin-inline:0; text-align:left; }

  .section--soft .section-media::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.2) 60%,
      rgba(0,0,0,.85) 100%);
  }

  .reveal-header,.reveal-subheader,.reveal-button{ animation:none; }

  .stats{ padding:64px var(--vl-gutter); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
  .stat__value{ font-size:44px; }

  .tiles,.tiles--2{ grid-template-columns:1fr; }
  .tile{ aspect-ratio:16/9; }
  .tile--square,.tile--project{ aspect-ratio:4/3; }

  .value-grid{ grid-template-columns:1fr; }
  .value{ padding:36px 24px; }
  .index-list{ grid-template-columns:1fr; }
  .index-band{ padding:64px var(--vl-gutter); }

  .form-grid{ grid-template-columns:1fr; gap:20px; }
  .intro .section-inner{ padding:calc(var(--vl-header-h) + 72px) 0 56px; }
  .cta-band .section-inner{ padding:80px 0; }
  .footer-inner{ padding-top:48px; }

  /* Every in-page CTA goes full width on a phone, not just the left-anchored ones. */
  .btn,
  .section-inner .btn{ width:100%; }
}

@media (max-width:480px){
  .tile--project .tile__label h3,
  .tile__label h3{ font-size:22px; }
  .stat__value{ font-size:36px; }
  .lines li{ flex-direction:column; gap:6px; padding:16px 0; }
  .line__label{ flex:0 0 auto; }
}

/* 320px floor — nothing may overflow */
@media (max-width:360px){
  h1{ font-size:38px; }
  h2{ font-size:30px; }
  .wordmark{ font-size:15px; letter-spacing:.18em; }
  .stat__value{ font-size:32px; }
  .footer-links{ gap:10px 16px; }
}

/* --- 18. Utility -------------------------------------------------------- */
.visually-hidden{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}