/* Switch Electrical: "dusk" look from the 2026 website redesign
   (Guided Growth/Solar/Switch Electrical Website: docs/DESIGN-BRIEF.md + src/styles/global.css + QuoteDock).
   Layered over template/styles.css by the build. Same brand tokens as the redesign: navy #1B2A3A / deep
   #0F1D29, orange #F47820 (navy text on orange), Instrument Sans + Instrument Serif italic accent word,
   pill buttons with a round arrow, hairline glass panels, white rounded inputs, warm horizon glow. */

:root {
  --deep: #0F1D29;
  --ink: #18242E;
  --muted: #5C6B76;
  --line: #E4E9ED;
  --on-dark: rgb(255 255 255 / 0.96);
  --on-dark-muted: rgb(255 255 255 / 0.72);
  --on-dark-line: rgb(255 255 255 / 0.14);
  --err-on-dark: #FFB4A3;
  --glass: linear-gradient(160deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.03) 48%), rgb(15 29 41 / 0.55);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 22px 48px -26px rgb(5 12 20 / 0.95);
  --disc: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--brand) 55%, white), var(--brand) 60%, color-mix(in oklab, var(--brand) 80%, black));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- dusk sky ---- */
html { background: var(--deep); }
body {
  position: relative;
  color: var(--on-dark);
  background: linear-gradient(180deg, var(--deep) 0%, #1B2A3A 62%, color-mix(in oklab, #1B2A3A 84%, #F47820) 100%);
}
/* PV-cell hairline grid, fading out, and a golden horizon glow rising from the bottom edge. */
body::before, body::after { content: ''; position: fixed; pointer-events: none; z-index: 0; }
body::before {
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.045) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(80% 55% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(80% 55% at 50% 30%, #000, transparent 75%);
}
body::after {
  left: 50%; bottom: 0; width: min(980px, 150%); aspect-ratio: 2 / 1; translate: -50% 55%;
  background: radial-gradient(closest-side, rgb(255 196 140 / 0.42), rgb(244 120 32 / 0.2) 42%, transparent 100%);
}
.top, main, .reviews, .foot { position: relative; z-index: 1; }
::selection { background: rgb(244 120 32 / 0.35); color: #fff; }
body { caret-color: transparent; } /* no text cursor on ordinary text after a click; inputs set their own below */

/* ---- header ---- */
.logo { height: 44px; }
.progress { height: 3px; background: var(--on-dark-line); }
.progress span { background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 55%, white)); }

/* ---- type: light, tight headline with one orange serif-italic phrase ---- */
.h1, .q, .h2 { font-weight: 400; letter-spacing: -0.035em; color: #fff; }
.h1 { font-size: clamp(32px, 8.6vw, 54px); line-height: 1.04; }
.q { font-size: clamp(26px, 7vw, 38px); line-height: 1.08; }
.hl { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.08em; line-height: 0.9; color: var(--brand); }
.sub, .hint { color: var(--on-dark-muted); }
.back { color: var(--on-dark-muted); font-weight: 500; }
.back:hover { color: #fff; }
.eyebrow {
  display: flex; width: fit-content; align-items: center; margin: 6px auto 4px; padding: 0.4rem 0.9rem;
  border-radius: 999px; border: 1px solid var(--on-dark-line); background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  color: var(--on-dark); font-family: var(--font-body); font-size: 14px; font-weight: 500;
}

/* ---- step 1: the house render sits straight on the sky ---- */
.hero { aspect-ratio: 900 / 605; object-fit: contain; background: none; border-radius: 0; max-height: 36vh; margin: 0 auto 8px; }
.has-consent .hero { max-height: 24vh; }

/* ---- glass answers ---- */
.yn, .card {
  background: var(--glass); border: 1px solid rgb(255 255 255 / 0.15); box-shadow: var(--glass-edge);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.yn { border-radius: 999px; min-height: 64px; font-size: 22px; font-weight: 600; color: #fff; }
.card { gap: 12px; padding: 20px 10px 14px; border-radius: 20px; }
.card-icon {
  width: 64px; height: 64px; aspect-ratio: 1; margin: 0 auto; padding: 0; border-radius: 50%;
  background: var(--disc); color: var(--deep);
  box-shadow: 0 10px 24px -8px rgb(244 120 32 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.45);
}
.card-icon svg { width: 32px; max-width: none; }
/* Bill coins: light-orange faces with navy rims and €, drawn larger so the € stays legible. */
.card-icon .coin { fill: color-mix(in oklab, var(--brand) 40%, white); }
.card-icon svg:has(.coin) { width: 60px; }
.card-label { min-height: 44px; padding: 0 4px; background: none; color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 600; }
@media (hover: hover) {
  .card:hover, .yn:hover { transform: translateY(-2px); border-color: rgb(255 255 255 / 0.3); box-shadow: var(--glass-edge); }
}
.card.is-selected, .yn.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 6px rgb(244 120 32 / 0.22), var(--glass-edge);
}

/* Grant question: full-width glass rows with the orange disc on the left. */
.card.row { padding: 14px 52px 14px 14px; gap: 14px; border-radius: 20px; }
.row .card-icon { width: 52px; height: 52px; margin: 0; background: var(--disc); }
.row .card-icon svg { width: 26px; }
.row .card-label { color: #fff; font-size: 17px; }
.row-note { color: var(--on-dark-muted); }
.grant-help summary { color: #FFB37A; }
.grant-help ol { color: var(--on-dark-muted); }

/* ---- pill buttons with a round arrow (the redesign's .btn) ---- */
.btn {
  justify-content: space-between; gap: 14px; min-height: 58px; padding: 0.4rem 0.45rem 0.4rem 1.5rem;
  border-radius: 999px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 12px 28px -12px rgb(244 120 32 / 0.75);
  transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn:hover { filter: none; background: color-mix(in oklab, var(--brand) 90%, white); }
.btn__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--deep); color: #fff; transition: transform 180ms var(--ease); }
.btn__dot svg { width: 18px; height: 18px; transform: rotate(-45deg); } /* arrow-up-right */
.btn:hover .btn__dot { transform: rotate(45deg); }
.btn:hover .btn__dot svg { transform: rotate(-45deg); }
.btn-lg { min-height: 60px; font-size: 18px; }
.btn-ghost {
  justify-content: center; background: rgb(255 255 255 / 0.08); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.btn-ghost:hover { background: rgb(255 255 255 / 0.14); }
.btn-call { justify-content: center; gap: 12px; padding: 0.4rem 2rem; } /* no arrow dot: even padding so icon + number sit in the middle */

/* ---- form: white rounded inputs on the dark panel (the redesign's quote dock) ---- */
.label { color: rgb(255 255 255 / 0.82); font-family: var(--font-body); font-weight: 500; }
.field, .input {
  border: 1px solid rgb(255 255 255 / 0.9); border-radius: 14px; background: rgb(255 255 255 / 0.96);
  box-shadow: inset 0 1px 2px rgb(15 29 41 / 0.08);
}
.field:focus, .input:focus-within { border-color: #fff; background: #fff; box-shadow: 0 0 0 2px var(--brand), 0 0 0 7px rgb(244 120 32 / 0.25); }
.input.invalid, .field[aria-invalid="true"] { border-color: #E5484D; box-shadow: inset 0 0 0 1px #E5484D; }
.input-icon { color: var(--muted); }
.prefix { color: var(--ink); border-right-color: var(--line); }
input, textarea { caret-color: #C25E12; }
.err { color: var(--err-on-dark); }
.err-form { background: rgb(255 120 100 / 0.12); border: 1px solid rgb(255 180 163 / 0.35); color: #FFD9D0; }
.err-form a { color: #fff; }
.check { color: var(--on-dark); }
.check input { accent-color: var(--brand); }
.check a { color: #FFB37A; }
.assure { color: var(--on-dark-muted); }
.assure svg { color: #FFB37A; }

/* ---- review strip, footer link, consent ---- */
.reviews { color: var(--on-dark); font-weight: 500; }
.linkish { color: var(--on-dark-muted); }
.consent { color: var(--ink); background: linear-gradient(160deg, rgb(255 255 255 / 0.97), rgb(255 255 255 / 0.9)); border-top: 0; border-radius: 22px 22px 0 0; }
.btn-choice { justify-content: center; padding: 0 1rem; background: var(--deep); color: #fff; box-shadow: none; }
.btn-choice:hover { background: #1B2A3A; }

/* ---- focus: visible on the dark sky ---- */
:is(.btn, .card, .yn, .back, a, input, select, textarea, .linkish):focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgb(244 120 32 / 0.3); }
.consent :focus-visible { outline-color: var(--deep); }

/* ---- thank-you ---- */
.rule { border-top-color: var(--on-dark-line); }
.num { width: 48px; height: 48px; border-radius: 50%; background: var(--disc); color: var(--deep); font-weight: 600; box-shadow: 0 10px 24px -8px rgb(244 120 32 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.45); }
.next h3 { color: #fff; font-weight: 600; letter-spacing: -0.01em; }
.next p { color: var(--on-dark-muted); }

/* ---- embedded in switchelectrical.ie: the page behind is already the brand ---- */
.embedded body::before, .embedded body::after { position: absolute; }
/* Compact: the website's hero already shows the logo, the house render and the "free quote" heading,
   so inside the site the funnel opens straight on "Do you own your home?". The standalone funnel
   (what the ads link to) is unchanged. */
.embedded .logo, .embedded .hero { display: none; }
.embedded #app[data-screen="own"] .h1 { display: none; }
/* The horizon glow hangs below the page; embedded, that overhang was counted in the height sent to
   the website (~270px of empty glow under the funnel). The website section has its own glow. */
.embedded body::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__dot, .card:hover, .yn:hover { transform: none; }
}