/* Westline Electrical Services, demo Google Search landing page (Oct 2026).
   Copied from the Westside Electrical pilot, built on the SAL landing page kit styles.
   Accent is the yellow from Westline's own logo (#ffcc00), on a deep navy (their logo is white and yellow, so the header is dark). */

:root {
  --navy: #0f1c33;
  --navy-2: #1c2c4a;
  --blue: #1d4f91;
  --accent: #ffcc00;
  --accent-dark: #a07c00;
  --ink: #0f1c33;
  --muted: #5d6c7b;
  --line: #e3e7ec;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --radius: 10px;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Draft banner, remove before launch */
.draft-bar {
  background: #fff4d6; color: #6b4e00; font-size: 13px; text-align: center;
  padding: 8px 16px; border-bottom: 1px solid #f0dca0;
}

/* Header: logo + phone + one CTA, no nav (every link is an exit) */
.top { border-bottom: 1px solid var(--navy-2); background: var(--navy); position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.top img { height: 58px; width: auto; }
.top-right { display: flex; align-items: center; gap: 18px; }
.top-phone { font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; }
.btn {
  display: inline-block; background: var(--accent); color: var(--navy); font-weight: 700;
  text-decoration: none; padding: 15px 26px; border-radius: 8px; border: 0; cursor: pointer;
  font-size: 16px; font-family: inherit; transition: background .15s;
}
.btn:hover { background: #ffd83d; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
@media (max-width: 640px) { .top .btn-sm { display: none; } }

/* Hero: split, text panel left, real photo right */
.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 560px; }
.hero-copy { padding: 64px 48px 64px 0; display: flex; flex-direction: column; justify-content: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; margin: 0 0 20px; font-weight: 800; letter-spacing: -.02em; }
.hl { background: linear-gradient(transparent 58%, rgba(255,204,0,.45) 58%); padding: 0 4px; }
.hero p.sub { font-size: 19px; color: #c9d3df; margin: 0 0 28px; max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-cta .phone-link { color: #fff; font-weight: 600; text-decoration: none; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font-size: 14px; color: #c9d3df; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { width: 16px; height: 16px; flex: none; }
.stars { color: #f5b301; letter-spacing: 1px; }
.hero-photo { position: relative; margin-right: calc((100vw - min(100vw, var(--max))) / -2 - 20px); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 30%; }
.hero-photo .badge {
  position: absolute; left: 24px; bottom: 24px; background: #fff; color: var(--navy);
  border-radius: var(--radius); padding: 12px 16px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.hero-photo .badge strong { display: block; font-size: 15px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 44px 0 36px; }
  .hero-photo { margin: 0 -20px; height: 320px; }
}

/* Curved transition out of the hero */
.curve { display: block; width: 100%; height: 40px; background: var(--navy); }
.curve svg { display: block; width: 100%; height: 40px; }

/* Logo strip */
.logos { padding: 28px 0 8px; text-align: center; }
.logos p { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 16px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; }
.logo-row img { height: 34px; width: auto; filter: grayscale(1); opacity: .7; }

section { padding: 72px 0; }
section.soft { background: var(--bg-soft); }
h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin: 0 0 14px; letter-spacing: -.01em; color: var(--navy); }
.lead { font-size: 19px; color: var(--muted); max-width: 720px; margin: 0 0 36px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Form block (sits high, section 3 of the founder-led template) */
.form-band { padding: 56px 0; }
.form-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 30px; box-shadow: 0 10px 30px rgba(2,23,46,.08); }
.form-card h3 { margin: 0 0 6px; font-size: 22px; color: var(--navy); }
.form-card .micro { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.field input, .field select {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #cfd6de;
  border-radius: 8px; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-card .btn { width: 100%; margin-top: 6px; font-size: 17px; }
.reassure { font-size: 13px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.hp { position: absolute; left: -9999px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: 34px; margin-bottom: 16px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302172e' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } .two { grid-template-columns: 1fr; } }

/* Before / after comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.compare > div { padding: 32px; }
.compare .old { background: #fff; }
.compare .new { background: var(--navy); color: #fff; }
.compare h3 { margin: 0 0 18px; font-size: 19px; }
.compare .old h3 { color: var(--muted); }
.compare .new h3 { color: var(--accent); }
.compare ul { margin: 0; padding: 0; list-style: none; }
.compare li { padding: 11px 0; border-bottom: 1px solid rgba(127,140,155,.25); }
.compare li:last-child { border-bottom: 0; }
.compare .old li { color: var(--muted); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* Three cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.card .num { font-size: 13px; font-weight: 700; color: var(--accent-dark); letter-spacing: .08em; }
.card h3 { margin: 8px 0 10px; font-size: 20px; color: var(--navy); line-height: 1.3; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* Video proof wall (native format, static grid, no carousel) */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vid { position: relative; border-radius: 12px; overflow: hidden; background: #0a0915; aspect-ratio: 9 / 13; }
.vid img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.vid .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center;
}
.vid .play::after { content: ""; border-left: 16px solid var(--navy); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.vid .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; font-size: 14px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.vid .cap small { display: block; font-weight: 400; opacity: .8; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr 1fr; } }

/* Founder */
.founder { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center; }
.founder img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 25%; }
.creds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.creds span { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } .founder img { max-width: 340px; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.step { position: relative; padding: 28px 24px 24px; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--accent); font-weight: 800; margin-bottom: 14px; }
.step h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
.step p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Fit check (who this is and isn't for) */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fit > div { border-radius: 12px; padding: 28px; }
.fit .yes { background: #e9f8f5; border: 1px solid #bfeade; }
.fit .no { background: #fff; border: 1px solid var(--line); }
.fit h3 { margin: 0 0 12px; color: var(--navy); }
.fit ul { margin: 0; padding-left: 20px; }
.fit li { margin-bottom: 8px; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 700; color: var(--navy); position: relative; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 26px; color: var(--accent-dark); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 18px; color: var(--muted); }

/* Closing CTA */
.close-cta { background: var(--navy); color: #fff; text-align: center; padding: 72px 0; }
.close-cta h2 { color: #fff; }
.close-cta p { color: #c9d3df; max-width: 620px; margin: 0 auto 28px; font-size: 18px; }

/* Light footer: suburb only, no street address on landing pages */
footer { background: #010f1f; color: #8fa0b3; font-size: 14px; padding: 32px 0; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { color: #fff; text-decoration: none; font-weight: 600; }

/* Draft notes, visible to Chris only, remove before launch */
.note { display: inline-block; background: #fff4d6; color: #6b4e00; border: 1px dashed #d9b24a; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.hero .note { margin-top: 10px; }

/* Mobile sticky call/CTA bar */
.mbar { display: none; }
@media (max-width: 640px) {
  .mbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
  .mbar a { text-align: center; padding: 15px 8px; font-weight: 700; text-decoration: none; }
  .mbar .call { background: #fff; color: var(--navy); }
  .mbar .go { background: var(--accent); color: var(--navy); }
  body { padding-bottom: 54px; }
}

.logo-row img.inv { filter: invert(1) grayscale(1); }
.logo-row img { max-width: 150px; object-fit: contain; }
@media (max-width: 900px) {
  .form-grid > form { order: -1; }
  .hero-photo .badge { right: 24px; }
  .logo-row { gap: 18px 28px; }
  .logo-row img { height: 28px; max-width: 120px; }
}

/* Five-step tile form (adapted from the SAL landing page kit) */
.tf { padding: 26px; }
.tf-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.tf-top span { display: inline-flex; align-items: center; gap: 5px; }
.tf-top svg, .chips svg { width: 14px; height: 14px; stroke: var(--accent-dark); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tf-progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 22px; }
.tf-progress i { display: block; height: 100%; width: 20%; background: var(--accent); transition: width .4s ease; }
.tf .step { display: none; }
.tf .step.active { display: block; animation: stepIn .35s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tf-label { text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.tf h3 { text-align: center; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0 0 18px; color: var(--navy); }
.tf h3 strong { font-weight: 800; }
.tf h3 small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tile {
  font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 18px 10px 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.tile svg { width: 34px; height: 34px; stroke: var(--navy); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile span { font-size: 14px; line-height: 1.3; }
.tile:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2,23,46,.08); }
.tile.selected { border-color: var(--navy); background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.tile.selected::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302172e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.tf-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
.back { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 6px 0; }
.back svg, .tf .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.tf .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tf .btn-sm { width: auto; margin: 0; }
.tf .btn[disabled] { opacity: .5; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px; }
.chips span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--line); background: var(--bg-soft); border-radius: 999px; padding: 5px 10px; }
.field textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #cfd6de; border-radius: 8px; resize: vertical; }
.form-error { display: none; background: #fff4f4; border: 1px solid #f0c4c4; color: #8a1f1f; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 6px 0 10px; }
.form-error.show { display: block; }
@media (max-width: 420px) { .tiles.cols-3 { grid-template-columns: 1fr; } .tf { padding: 20px 16px; } }

/* Photo slot: their own job photo goes here. The site only has stock images, so no photo is shown until they send one. */
.photo-slot { height: 100%; min-height: 320px; background: repeating-linear-gradient(135deg, #1c2c4a 0 18px, #172540 18px 36px); display: grid; place-items: center; text-align: center; padding: 32px; color: #c9d3df; }
.photo-slot strong { display: block; color: #fff; font-size: 18px; margin-bottom: 6px; }
.fit .yes { background: #fff8d6; border-color: #f0dc8a; }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.board > div { border-radius: 12px; padding: 28px; border: 1px solid var(--line); background: #fff; }
.board .price { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1.1; margin: 6px 0 4px; }
.board .price span { font-size: 15px; font-weight: 500; color: var(--muted); }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }

/* Form steps share the .step class with the How It Works cards; strip the card styling inside the form */
.tf .step { padding: 0; border: 0; background: none; border-radius: 0; }
.tf .step::before { content: none; display: none; }