/* Prime Time Electricians, demo Google Search landing page (Oct 2026).
   From the SAL landing page kit (approved v2 air con demo styles).
   Accent is the yellow from Prime Time's own vans and uniforms, on black. Their logo is black on white, so the header is white. */

:root {
  --navy: #16181d;
  --navy-2: #2a2d33;
  --blue: #6b5a00;
  --accent: #f5d000;
  --accent-dark: #8a7300;
  --ink: #1b2230;
  --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(--line); background: #fff; 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: 52px; width: auto; }
.top-right { display: flex; align-items: center; gap: 18px; }
.top-phone { font-weight: 700; color: var(--navy); 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: #5cc16c; }
.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(245,208,0,.55) 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, #2a3344 0 18px, #253043 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: #eaf7ec; border-color: #bfe5c5; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 46px; }
.brand span { font-weight: 800; font-size: 19px; color: var(--navy); letter-spacing: -.01em; }
.photo-slot { background: repeating-linear-gradient(135deg, #2f343e 0 18px, #2a2f38 18px 36px); }
.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; }

/* Prime Time overrides: black-on-white logo sits on a white header; dark text on the yellow buttons for contrast */
.top { background: #fff; border-bottom-color: var(--line); }
.top img { height: 64px; mix-blend-mode: multiply; }
.top-phone { color: var(--navy); }
.btn, .mbar .go { color: var(--navy); }
.btn:hover { background: #ffdf1f; }
.btn svg { stroke: var(--navy); }
.fit .yes { background: #fffbe0; border-color: #f2e08a; }
.hero-photo img.real { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: 50% 40%; }