/* Elevate Electric — site styles
   Design tokens lifted from the approved prototype. */

:root {
  --cream: #f5f1e8;
  --cream-2: #ece5d3;
  --green: #123d2c;
  --green-dark: #0b2a1f;
  --amber: #d98c3d;
  --ink: #1b1b18;
  --text: #3d3b34;
  --text-muted: #4a473e;
  --on-dark: #d7d2c6;
  --on-dark-2: #e6e1d3;
  --footer-muted: #8a9089;
  --rule: rgba(18, 61, 44, 0.15);

  --sans: 'Barlow', system-ui, -apple-system, sans-serif;
  --display: 'Oswald', system-ui, sans-serif;
  --wrap: 1280px;
  --gutter: 5%;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  text-wrap: pretty;
}

h1,
h2,
h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

a {
  color: var(--green);
}

a:hover {
  color: var(--amber);
}

img {
  max-width: 100%;
}

button {
  font-family: var(--display);
  cursor: pointer;
  border: none;
}

::selection {
  background: var(--amber);
  color: #fff;
}

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--cream);
  padding: 12px 20px;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 14px;
}

.skip-link:focus {
  left: 0;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--green);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 12px 22px;
}

.btn--primary:hover {
  background: var(--green-dark);
  color: var(--cream);
}

.btn--amber {
  background: var(--amber);
  color: var(--green-dark);
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 17px 30px;
}

.btn--amber:hover {
  background: #c87c31;
  color: var(--green-dark);
}

.btn--outline {
  border: 1px solid rgba(245, 241, 232, 0.4);
  color: var(--cream);
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 17px 30px;
}

.btn--outline:hover {
  background: rgba(245, 241, 232, 0.1);
  color: var(--cream);
}

.btn--submit {
  background: var(--green);
  color: var(--cream);
  font-size: 15px;
  letter-spacing: 0.05em;
  padding: 16px 30px;
  align-self: flex-start;
}

.btn--submit:hover {
  background: var(--green-dark);
}

.btn--submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 6px var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header__logo img {
  height: 92px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.site-nav a {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.site-header__phone {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  color: var(--green);
}

.icon-link {
  display: flex;
  align-items: center;
  color: var(--green);
  text-decoration: none;
}

/* ---------- hero ---------- */

.hero {
  background: var(--green-dark);
  color: var(--cream);
  padding: 100px var(--gutter) 90px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(245, 241, 232, 0.03) 0 26px,
    transparent 26px 52px
  );
}

/* Copy on the left, brand mark and the two calls to action on the right. The
   right column is capped rather than fluid so the buttons never stretch into
   letterboxes on a wide screen. */
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 56px;
  align-items: center;
}

.hero__aside {
  display: grid;
  gap: 24px;
}

.hero__mark {
  width: min(190px, 62%);
  height: auto;
  justify-self: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.eyebrow__bar {
  width: 38px;
  height: 6px;
  background: var(--amber);
  flex: none;
}

.eyebrow__text {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.hero h1 {
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.03;
  font-weight: 700;
}

/* No bottom margin: the lede now ends the copy column, so the grid gap owns
   the space between it and the buttons. */
.hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--on-dark);
  max-width: 520px;
  margin: 24px 0 0;
}

/* Stacked, both the same width: side by side they would be two different
   lengths, which reads as an accident rather than a pair. */
.hero__cta {
  display: grid;
  gap: 14px;
}

/* ---------- trust bar ---------- */

.trust {
  background: var(--green);
}

/* The list carries the gutter itself so its first/last item line up with the
   content edges of the .section.wrap blocks above and below, rather than
   sitting a gutter-width wider on each side.

   Equal 1fr tracks rather than auto + space-between: auto tracks stretch to
   eat the free space themselves, which leaves justify-content nothing to
   distribute and strands the last (short) label mid-track. */
.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  /* Must stay `0 auto`, not `0`: .wrap caps this at --wrap, and killing the
     auto margins pins the capped box to the left edge of a wider viewport. */
  margin: 0 auto;
  padding: 20px var(--gutter);
  list-style: none;
}

/* Pin the outer two to the content edges and centre the inner two in their
   quarters, so the row is flush left and right at any width. */
.trust__item {
  color: var(--cream);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}

.trust__item:first-child {
  justify-self: start;
}

.trust__item:last-child {
  justify-self: end;
}

.trust__item::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- shared section furniture ---------- */

.section {
  padding: 30px var(--gutter);
}

/* Every section heading is centred, at every width. */
.section__title {
  font-size: clamp(28px, 3.2vw, 42px);
  color: var(--green);
  margin-bottom: 40px;
  text-align: center;
}

/* The lede sits directly under a centred title, so it centres with it. */
.section__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 46px;
  text-align: center;
}

/* Real photography. Each file is pre-cropped to the aspect it is displayed at,
   so the browser can scale it without object-fit and without layout shift —
   the width/height attributes in the markup reserve the right box up front. */
.media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--cream-2);
}

/* Striped stand-in, kept for any section that has no photo yet. */
.media-placeholder {
  background: repeating-linear-gradient(
    135deg,
    #d9d2c0 0px,
    #d9d2c0 14px,
    var(--cream-2) 14px,
    var(--cream-2) 28px
  );
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 20px;
}

/* ---------- team ---------- */

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
  margin-bottom: 46px;
}

/* min-height suits the striped stand-in, but on an <img> it would stretch the
   picture out of proportion once the grid drops to one column. Photos hold
   their shape with aspect-ratio instead. */
.media-placeholder.team__photo {
  min-height: 280px;
}

/* 3:2 is the cameras' native frame, so the portraits show in full — nothing is
   cropped away. Matching the box to the file also means object-fit has nothing
   to trim. */
.media.team__photo {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.team__name {
  font-size: 19px;
  color: var(--green);
  margin: 18px 0 4px;
  text-align: center;
}

.team__role {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0;
  text-align: center;
}

.team__copy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.team__copy p,
.team__copy li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}

.team__copy p {
  margin: 0 0 20px;
}

.team__copy p:last-child {
  margin-bottom: 0;
}

.team__copy ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

/* ---------- services ---------- */

.services {
  background: var(--cream-2);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}

.service-card {
  background: #fff;
  border: 1px solid rgba(18, 61, 44, 0.12);
  padding: 30px;
}

.service-card::before {
  content: '';
  width: 32px;
  height: 32px;
  background: var(--amber);
  display: block;
  margin-bottom: 16px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.service-card h3 {
  font-size: 20px;
  color: var(--green);
  margin-bottom: 14px;
}

.service-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid rgba(18, 61, 44, 0.08);
  font-size: 15px;
  color: var(--text);
}

.service-card li::before {
  content: '—';
  color: var(--amber);
  font-family: var(--display);
  font-size: 12px;
  flex: none;
}

/* ---------- recent work ---------- */

.work {
  max-width: 900px;
  margin: 0 auto;
}

.work__stage {
  display: flex;
  align-items: center;
  gap: 20px;
}

.work__nav {
  background: transparent;
  color: var(--amber);
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  flex: none;
}

.work__track {
  flex: 1;
  min-width: 0;
}

/* Inactive slides are display:none rather than merely transparent, so the
   browser never fetches the nine photos you are not looking at. Every image
   is 4:3, so the frame does not resize as you move through them. */
.work__slide {
  margin: 0;
  display: none;
}

.work__slide[data-active] {
  display: block;
}

.work__slide .media {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.work__slide figcaption {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 14px;
  text-align: center;
}

.work__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.work__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  background: rgba(18, 61, 44, 0.3);
}

.work__dot[aria-current='true'] {
  background: var(--amber);
}

/* With JS off, stack every photo instead of hiding all but one. */
.no-js .work__slide {
  display: block;
  margin-bottom: 28px;
}

.no-js .work__nav,
.no-js .work__dots {
  display: none;
}

/* ---------- testimonials ---------- */

.testimonials {
  background: var(--green);
  padding: 80px var(--gutter);
}

.testimonials__inner {
  max-width: 900px;
  margin: 0 auto;
}

.testimonials .section__title {
  color: var(--cream);
}

.testimonials__stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.testimonials__nav {
  background: transparent;
  color: var(--amber);
  font-size: 28px;
  line-height: 1;
  padding: 6px 10px;
  flex: none;
}

.testimonials__track {
  flex: 1;
  min-height: 160px;
  display: grid;
}

.testimonial {
  grid-area: 1 / 1;
  background: var(--green-dark);
  padding: 36px;
  border-left: 3px solid var(--amber);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.testimonial[data-active] {
  opacity: 1;
  visibility: visible;
}

/* With JS off, stack every quote instead of hiding all but one. */
.no-js .testimonials__track {
  display: block;
}

.no-js .testimonial {
  opacity: 1;
  visibility: visible;
  margin-bottom: 16px;
}

.no-js .testimonials__nav,
.no-js .testimonials__dots {
  display: none;
}

.testimonial p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-dark-2);
  margin: 0 0 18px;
  font-style: italic;
}

.testimonial cite {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
  font-style: normal;
}

.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.testimonials__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  background: rgba(245, 241, 232, 0.3);
}

.testimonials__dot[aria-current='true'] {
  background: var(--amber);
}

/* ---------- contact ---------- */

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 56px;
  align-items: start;
}

/* Contact keeps its centred heading, but the lede moves into the left column
   so it reads as an intro to the form it sits above. */
.contact__lede {
  max-width: none;
  margin: 0 0 24px;
  text-align: left;
}

.quote-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(18, 61, 44, 0.25);
  background: #fff;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  border-radius: 0;
}

.field textarea {
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px;
}

/* Honeypot — hidden from people, tempting to bots. */
.field--trap {
  position: absolute;
  left: -9999px;
}

.form-status {
  font-size: 15px;
  color: #9c3b2e;
  margin: 0;
}

.form-success {
  background: var(--cream-2);
  padding: 48px;
  border-left: 3px solid var(--amber);
}

.form-success h3 {
  font-size: 22px;
  color: var(--green);
  margin-bottom: 12px;
}

.form-success p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.info-card {
  background: var(--cream-2);
  padding: 32px;
}

.info-card + .info-card {
  margin-top: 24px;
}

/* Fixed width so the two numbers line up under each other. */
.info-card__who {
  display: inline-block;
  min-width: 62px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-card h3 {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.info-card p {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}

.info-card p:last-child {
  margin-bottom: 0;
}

.info-card a {
  text-decoration: none;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--green);
  color: var(--on-dark);
  padding: 48px var(--gutter) 30px;
  margin-top: auto;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.site-footer__brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--cream);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.site-footer p {
  font-size: 14px;
  margin: 0;
  max-width: 320px;
  line-height: 1.6;
}

.site-footer__links {
  font-size: 14px;
  line-height: 1.9;
}

.site-footer__links a {
  text-decoration: none;
  color: var(--on-dark);
  display: block;
}

.site-footer__links a:hover {
  color: var(--amber);
}

.site-footer__address {
  margin-top: 10px;
}

.site-footer__legal {
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 241, 232, 0.15);
  font-size: 12px;
  color: var(--footer-muted);
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}

.site-footer__credit {
  color: var(--footer-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 232, 0.3);
}

.site-footer__credit:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ---------- page shell ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- responsive ---------- */

/* The hero runs out of room for two columns well before the phone breakpoint:
   340px of buttons plus a 56px gap leaves the headline too little to work with. */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 36px;
    text-align: center;
  }

  .eyebrow {
    justify-content: center;
  }

  .hero__lede {
    margin-inline: auto;
  }

  .hero__aside {
    width: 100%;
    max-width: 420px;
  }

  /* Four across stops fitting well before 900px, so drop to a 2x2 block with
     both columns left-aligned — flush outer edges only read as deliberate on
     a single row. */
  .trust__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
  }

  .trust__item,
  .trust__item:first-child,
  .trust__item:last-child {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  /* Two rows: logo beside the nav, then the phone and Facebook icon centred
     underneath. The logo has to be small to share a line — at 390px the header
     has 337px of usable width and the four nav links eat 242px of it. */
  .site-header {
    justify-content: center;
    text-align: center;
    gap: 4px 12px;
    padding: 6px var(--gutter);
  }

  .site-header__logo img {
    height: 44px;
  }

  .site-nav {
    gap: 12px;
    justify-content: center;
  }

  .site-nav a {
    font-size: 16px;
  }

  .site-header__actions {
    flex: 0 0 100%;
    justify-content: center;
  }

  .hero {
    padding: 64px var(--gutter) 56px;
  }

  /* Running text centres on a phone too (headings already do, at every width).
     Lists, the quote form, the contact cards and the service cards stay
     left-aligned — centred bullets and centred form labels are harder to read,
     not easier. */
  .team__copy,
  .work__slide figcaption {
    text-align: center;
  }

  /* Centre the list as a block while its items stay left-aligned. */
  .team__copy ul {
    display: inline-block;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }

  /* Full-width call-to-action buttons on a phone: easier to hit. The hero pair
     already stretches to its grid column, so only the submit button needs it. */
  .hero__cta {
    gap: 12px;
  }

  .btn--submit {
    width: 100%;
    align-self: stretch;
  }

  .section {
    padding: 32px var(--gutter);
  }

  /* Two of these labels no longer fit side by side at phone widths. Items stay
     left-aligned (justify-self: start, inherited from the 900px block). */
  .trust__list {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  /* Side arrows cost ~90px, which on a phone leaves the slide barely half the
     screen — painfully narrow for a photo, and very tall for a long quote.
     Wrap the arrows underneath so the slide gets the full column width. */
  .testimonials__stage,
  .work__stage {
    flex-wrap: wrap;
    gap: 0;
  }

  .testimonials__track,
  .work__track {
    flex: 0 0 100%;
    order: 1;
  }

  .testimonials__nav,
  .work__nav {
    order: 2;
    flex: 1 1 50%;
    margin-top: 6px;
  }

  .testimonial {
    padding: 26px;
  }

  .form-success {
    padding: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}