/* ==========================================================================
   Coastal Light Electric — shared stylesheet
   Palette:
     --ink      #0F1F2A   deep harbor blue-black (dark sections)
     --slate    #1B3240   lifted panel blue
     --brass    #C08A2E   gold-leaf brass (accent, quarterboard lettering)
     --filament #F4CE86   warm bulb glow (highlights only)
     --shingle  #E7E8E2   weathered cedar grey (light sections)
     --char     #3F4A48   body text on light
   ========================================================================== */

:root {
  --ink: #0F1F2A;
  --slate: #1B3240;
  --brass: #C08A2E;
  --filament: #F4CE86;
  --shingle: #E7E8E2;
  --char: #3F4A48;
  --paper: #F5F5F1;

  --display: "Zilla Slab", Georgia, serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 68ch;
  --wrap: 1120px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  color: var(--char);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* Small caps utility label — used for eyebrows and data, never decoration */
.label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.85em 1.6em;
  border: 1.5px solid var(--brass);
  background: var(--brass);
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--filament); border-color: var(--filament); }

.btn--ghost { background: transparent; color: var(--filament); }
.btn--ghost:hover { background: var(--brass); color: var(--ink); }

:where(a, button):focus-visible {
  outline: 3px solid var(--filament);
  outline-offset: 3px;
}

/* --- Header --------------------------------------------------------------- */
/* White bar. Text colors here are darker than the brand brass/filament,
   which are too pale to read on white. */

.masthead {
  --navy: #282460;        /* sampled from logo.png */
  --brass-deep: #94681F;  /* brass darkened to pass contrast on white */
  background: #FFFFFF;
  border-bottom: 1px solid rgba(15, 31, 42, 0.12);
  box-shadow: 0 4px 18px -14px rgba(15, 31, 42, 0.45);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead :where(a):focus-visible { outline-color: var(--brass-deep); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  flex-wrap: wrap;
}

/* Brand: logo + two-line wordmark set in Work Sans. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand__logo {
  width: auto;
  height: 54px;
  flex-shrink: 0;
}

.wordmark {
  font-family: "Work Sans", var(--body);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}
.wordmark__top {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-right: -0.05em;   /* cancel trailing letter-space so widths match exactly */
  color: var(--navy);
}
/* ELECTRIC: each letter is its own span, spread edge to edge so the word
   always spans the exact width of COASTAL LIGHT, whatever the font. */
.wordmark__bottom {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  margin-top: 0.15em;
  color: var(--brass-deep);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.8rem);
  flex-wrap: wrap;
}
.masthead__nav a {
  color: var(--char);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.masthead__nav a:hover { color: var(--brass-deep); }

.masthead__nav .masthead__phone {
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
.masthead__nav .masthead__phone:hover { color: var(--brass-deep); }

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

.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(3rem, 7vw, 5rem);
}

/* Signature: the glow "switches on" once, like a fixture warming up. */
.hero__glow {
  position: absolute;
  top: -28%;
  right: -12%;
  width: min(780px, 92vw);
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(244, 206, 134, 0.30) 0%,
              rgba(192, 138, 46, 0.14) 38%,
              transparent 68%);
  pointer-events: none;
  opacity: 0;
  animation: warmup 1900ms cubic-bezier(0.22, 0.8, 0.3, 1) 150ms forwards;
}

@keyframes warmup {
  0%   { opacity: 0; transform: scale(0.9); }
  22%  { opacity: 0.55; }
  38%  { opacity: 0.28; }   /* the flicker of a filament catching */
  100% { opacity: 1; transform: scale(1); }
}

.hero__inner { position: relative; z-index: 1; }

.hero h1 { color: var(--paper); max-width: 16ch; }
.hero h1 em {
  font-style: normal;
  color: var(--filament);
}

.hero__lede {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3rem);
  color: rgba(245, 245, 241, 0.86);
  max-width: 50ch;
}
/* Second hero paragraph: the same story at body size, so the lede leads. */
.hero__body {
  color: rgba(245, 245, 241, 0.7);
  max-width: 60ch;
}

.hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* --- Credentials strip ---------------------------------------------------- */

.creds {
  background: var(--slate);
  color: rgba(245, 245, 241, 0.9);
  border-top: 1px solid rgba(192, 138, 46, 0.3);
}
/* Always one row, one column per item, on every screen size. Dividers are
   borders on the items themselves, so no background can show through.
   Adding or removing an item needs no CSS change. */
.creds__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.creds__item {
  padding: 1.6rem 1.2rem;
  min-width: 0;
}
.creds__item + .creds__item {
  border-left: 1px solid rgba(192, 138, 46, 0.22);
}
.creds__figure {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--filament);
  display: block;
  line-height: 1.2;
}
.creds__note {
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 245, 241, 0.6);
}

/* Phones: same single row, tightened to fit three narrow columns. */
@media (max-width: 600px) {
  .creds__item {
    padding: 1.1rem 0.5rem;
    text-align: center;
  }
  .creds__figure { font-size: 1.15rem; }
  .creds__note {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
  }
}

/* --- Generic section ------------------------------------------------------ */

.band { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.band--shingle { background: var(--shingle); }
.band--ink { background: var(--ink); color: rgba(245, 245, 241, 0.82); }
.band--ink h2, .band--ink h3 { color: var(--paper); }

.band__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- Services ------------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.service {
  background: var(--paper);
  border: 1px solid rgba(63, 74, 72, 0.18);
  border-top: 3px solid var(--brass);
  padding: 1.6rem 1.5rem 1.4rem;
}
.service h3 { margin-bottom: 0.4rem; }
.service p { font-size: 0.95rem; margin-bottom: 0; }

/* --- Work gallery --------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--slate);
}
.gallery figcaption {
  font-size: 0.85rem;
  color: rgba(245, 245, 241, 0.62);
  padding-top: 0.6rem;
  border-top: 1px solid rgba(192, 138, 46, 0.28);
  margin-top: 0.6rem;
}

/* --- Reviews -------------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.review {
  background: var(--paper);
  border-left: 3px solid var(--brass);
  padding: 1.4rem 1.5rem;
}
.review p {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}
.review cite {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}

/* --- Service area --------------------------------------------------------- */

.towns {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.towns li {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(192, 138, 46, 0.5);
  color: var(--filament);
}

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

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--char);
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.7em 0.8em;
  border: 1px solid rgba(63, 74, 72, 0.35);
  background: #fff;
  color: var(--char);
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}
.field textarea { min-height: 130px; resize: vertical; }

/* Honeypot — hidden from people, visible to bots. Do not remove. */
.hp { position: absolute; left: -9999px; }

.notice {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--brass);
  background: rgba(192, 138, 46, 0.12);
  font-size: 0.95rem;
}

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

.foot {
  background: var(--ink);
  color: rgba(245, 245, 241, 0.6);
  padding: 3rem 0 2.5rem;
  font-size: 0.9rem;
  border-top: 1px solid rgba(192, 138, 46, 0.28);
}
.foot a { color: var(--filament); }
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.foot__license {
  font-family: var(--display);
  color: var(--filament);
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__glow { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}