/* Energy Plus — Voltage Navy design tokens (from the Claude Design project), combined for hosting.
   Fonts (Oswald + Roboto) are linked from Google Fonts in index.html. */

/* fonts */
:root{--font-display:"Oswald","Arial Narrow",sans-serif;--font-body:"Roboto",Arial,sans-serif}

/* colors */
:root{
  --navy-900:#000610;
  --navy-800:#001529;
  --navy-100:#c6d6ec;
  --volt-600:#00578d;
  --volt-500:#0075bc;
  --volt-400:#00a6f3;
  --grey-600:#5f6469;
  --grey-400:#8b9096;
  --white-100:#fafcfe;
  --white-200:#f3f5f8;
  --ink-900:#0b0e10;
  --line-300:#d7dbe1;
  --red-600:#af3c3c;
  --green-700:#2b7b45;

  --surface-page:var(--white-100);
  --surface-card:var(--white-200);
  --surface-dark:var(--navy-800);
  --surface-darkest:var(--navy-900);
  --surface-badge:var(--navy-100);

  --text-body:var(--ink-900);
  --text-muted:var(--grey-600);
  --text-on-dark:var(--white-100);
  --text-muted-on-dark:var(--grey-400);
  --text-link:var(--volt-500);
  --text-link-hover:var(--volt-600);
  --text-accent-on-dark:var(--volt-400);
  --text-badge:var(--navy-800);
  --text-success:var(--green-700);
  --text-error:var(--red-600);

  --action-primary:var(--volt-500);
  --action-primary-hover:var(--volt-600);
  --action-primary-text:var(--white-100);
  --action-secondary:var(--white-100);
  --action-secondary-text:var(--navy-800);

  --border-hairline:var(--line-300);
  --border-on-dark:rgba(250,252,254,0.25);
  --border-error:var(--red-600);
}

/* typography */
:root{
  --font-display-family:var(--font-display);
  --font-body-family:var(--font-body);
  --type-display-size:56px;--type-display-weight:700;--type-display-lh:1.05;--type-display-ls:-0.015em;
  --type-headline-lg-size:36px;--type-headline-lg-weight:600;--type-headline-lg-lh:1.15;--type-headline-lg-ls:-0.01em;
  --type-headline-sm-size:24px;--type-headline-sm-weight:600;--type-headline-sm-lh:1.2;--type-headline-sm-ls:0;
  --type-body-lg-size:18px;--type-body-lg-weight:400;--type-body-lg-lh:1.6;
  --type-body-md-size:16px;--type-body-md-weight:400;--type-body-md-lh:1.6;
  --type-body-sm-size:14px;--type-body-sm-weight:400;--type-body-sm-lh:1.5;
  --type-label-size:12px;--type-label-weight:600;--type-label-lh:1.3;--type-label-ls:0.1em;
  --measure-body:65ch;
  --container-max:1280px;
}
.vn-display{font-family:var(--font-display);font-size:var(--type-display-size);font-weight:var(--type-display-weight);line-height:var(--type-display-lh);letter-spacing:var(--type-display-ls)}
.vn-headline-lg{font-family:var(--font-display);font-size:var(--type-headline-lg-size);font-weight:var(--type-headline-lg-weight);line-height:var(--type-headline-lg-lh);letter-spacing:var(--type-headline-lg-ls)}
.vn-headline-sm{font-family:var(--font-display);font-size:var(--type-headline-sm-size);font-weight:var(--type-headline-sm-weight);line-height:var(--type-headline-sm-lh)}
.vn-body-lg{font-family:var(--font-body);font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-lh)}
.vn-body-md{font-family:var(--font-body);font-size:var(--type-body-md-size);line-height:var(--type-body-md-lh)}
.vn-body-sm{font-family:var(--font-body);font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-lh)}
.vn-label{font-family:var(--font-display);font-size:var(--type-label-size);font-weight:var(--type-label-weight);line-height:var(--type-label-lh);letter-spacing:var(--type-label-ls);text-transform:uppercase}

/* spacing */
:root{
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:32px;--space-xl:64px;
  --space-section-y:96px;
  --space-section-y-tight:64px;
  --space-gutter:24px;
  --space-gutter-sm:20px;
}

/* radii */
:root{
  --radius-none:0px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;
  --radius-input:var(--radius-sm);
  --radius-card:var(--radius-lg);
  --radius-pill:var(--radius-full);
}

/* elevation */
:root{
  --shadow-none:none;
  --shadow-float:0 8px 24px rgba(0,117,188,0.18);
  --divider-height:1px;
}

/* motion */
:root{
  --motion-instant:0ms;
  --motion-state:150ms;
  --motion-entrance:250ms;
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0,0,0.2,1);
}
@keyframes vn-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes vn-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* base */
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-md-size);line-height:var(--type-body-md-lh);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-0.01em}
h1{font-size:var(--type-display-size);font-weight:700;line-height:var(--type-display-lh);letter-spacing:var(--type-display-ls)}
h2{font-size:var(--type-headline-lg-size);line-height:var(--type-headline-lg-lh)}
h3{font-size:var(--type-headline-sm-size);line-height:var(--type-headline-sm-lh);letter-spacing:0}
p{margin:0 0 var(--space-md)}
a{color:var(--text-link);text-decoration:none;transition:color var(--motion-state) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
hr{border:0;height:var(--divider-height);background:var(--border-hairline);margin:0}
*,*::before,*::after{box-sizing:border-box}

/* responsive */
@media (max-width:1024px){[data-vn-utility-address]{display:none}}
@media (max-width:900px){[data-vn-utility]{display:none}[data-vn-nav]{display:none!important}[data-vn-mobile-actions]{display:flex!important}}

@media (max-width:900px){
  [data-vn-hero]{grid-template-columns:1fr!important;grid-template-rows:1fr!important;min-height:78vh}
  [data-vn-hero]>*{grid-area:1 / 1}
  [data-vn-hero]>*:last-child{min-height:0!important;box-shadow:inset 0 0 0 9999px rgba(0,6,16,0.82);z-index:0}
  [data-vn-hero]>*:first-child{z-index:1;padding:var(--space-xl) var(--space-gutter-sm)!important;justify-items:center;text-align:center;align-content:center}
  [data-vn-hero] h1{font-size:38px!important;max-width:none!important;color:var(--text-on-dark)!important}
  [data-vn-hero] p{color:rgba(250,252,254,0.86)!important}
  [data-vn-hero-eyebrow]{color:var(--text-accent-on-dark)!important}
  [data-vn-hero] [data-vn-hero-badges] > *{background:rgba(250,252,254,0.10)!important;color:var(--text-on-dark)!important;border:1px solid var(--border-on-dark)}
  [data-vn-hero]>*:first-child>*{justify-items:center;justify-content:center}
  [data-vn-hero] [data-vn-hero-badges]{flex-direction:column;align-items:center}
  [data-vn-hero] a[href="#quote"],[data-vn-hero] button{width:100%;max-width:340px}
}

@media (max-width:900px){
  [data-vn-story]{grid-template-columns:1fr!important;gap:var(--space-lg)!important}
  [data-vn-story]>*:last-child{text-align:center}
  [data-vn-story]>*:last-child>*{justify-content:center}
  [data-vn-story] h2,[data-vn-story] p,[data-vn-story] blockquote{max-width:none!important;margin-left:auto;margin-right:auto}
  [data-vn-story] button{width:100%}
}

@media (max-width:900px){
  [data-vn-gallery]{grid-template-columns:repeat(2,1fr)!important}
  [data-vn-gallery]>*{grid-column:span 1!important}
  [data-vn-services]{grid-template-columns:1fr!important}
  [data-vn-services]>*{grid-column:span 1!important;min-height:0!important}
  [data-vn-why]{grid-template-columns:1fr!important;gap:var(--space-xl)!important}
  [data-vn-intake]{grid-template-columns:1fr!important;gap:var(--space-lg)!important}
  [data-vn-intake-row]{grid-template-columns:1fr!important}
}

@media (max-width:900px){
  [data-vn-section-head]{flex-direction:column;align-items:center!important;text-align:center}
  [data-vn-section-head] h2,[data-vn-section-head] p{max-width:none!important}
  [data-vn-section-head] button{width:100%;max-width:340px}
}

@media (max-width:640px){
  :root{--space-section-y:56px;--space-section-y-tight:40px;--space-gutter:20px;--type-headline-lg-size:28px;--type-display-size:38px;--type-body-lg-size:17px}
  [data-vn-services] h3{font-size:26px!important}
  [data-vn-marquee-card]{width:min(84vw,340px)!important}
}

/* page shell */
html,body,#root{height:100%;margin:0}
body{overflow:hidden}
@media (max-width:900px){[data-vn-map-card]{position:static!important;width:auto!important;margin:calc(var(--space-lg) * -1) var(--space-gutter-sm) 0!important}}
/* ---- Phone polish ---- */
@media (max-width:900px){
  /* Hero: darken the photo itself. An inset shadow can't paint over an <img>, so the old scrim never showed on real photos. */
  [data-vn-hero]{min-height:0!important}
  [data-vn-hero]>img:last-child{filter:brightness(.36) saturate(.85)}
  [data-vn-hero]>*:first-child{padding:56px var(--space-gutter-sm) 48px!important}
  [data-vn-hero] h1{text-shadow:0 2px 16px rgba(0,6,16,.45)}
  [data-vn-hero] [data-vn-hero-badges]{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:6px!important}
  [data-vn-hero] [data-vn-hero-badges]>*{font-size:10px!important;padding:6px 10px!important}

  /* Stats: one compact row of three instead of three stacked bands */
  [data-vn-stats]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-sm)!important;padding:20px var(--space-gutter-sm)!important}
  [data-vn-stats]>*{flex-direction:column;align-items:center!important;gap:4px!important;text-align:center}
  [data-vn-stats]>*>span:last-child{font-size:10px!important;letter-spacing:.06em!important;line-height:1.3}

  /* Story photo: landscape crop so the copy starts sooner */
  [data-vn-story] img{aspect-ratio:4 / 3!important}

  /* Why section: tighter rhythm, and a van banner tall enough to read */
  [data-vn-why]{gap:var(--space-lg)!important}
  #why img{aspect-ratio:16 / 9!important;object-position:center 55%!important}

  /* Footer: link columns side by side; brand and contact span the full width */
  [data-vn-footer]>div>div:first-child{grid-template-columns:1fr 1fr!important;gap:var(--space-lg) var(--space-md)!important}
  [data-vn-footer]>div>div:first-child>*:first-child,
  [data-vn-footer]>div>div:first-child>*:last-child{grid-column:1 / -1}
}