/* ------------------------------------------------------------------------
   Plug-in Solar Quotes

   This is the one company in the network whose product IS the enquiry
   itself: four questions, then a fitting quote from a local electrician.
   The design source is taken from that literally: a quote pad. A tradesman's
   duplicate book, where you keep the top copy and the electrician gets the
   rest. Three decisions carry the whole site and nothing else is allowed to
   compete with them.

   1. THE COUNTERFOIL is the signature device. Every object that holds
      content on this site (the step form, every card, each question, the
      aside, the closing tile, the nav panel) is built as TWO sheets: a flat
      ink-dark sheet sitting behind and offset down and right by 10px, and
      the real content sitting on a paper sheet in front of it, bordered on
      all four sides. That is what the carbon copy underneath a written quote
      looks like, caught at an angle. It is a whole second object, never an
      edge treatment, and it is drawn identically whether the sheet in front
      is cream or paper coloured.
   2. THE TEAR IS THE SEAM AND THE ONLY SEAM. Where two sections meet, the
      lower section's top edge is cut jagged, the way a page tears away from
      a perforated pad, in the lower section's own colour. It is one shape,
      clipped with CSS, never a rule and never doubled with a ground change
      plus anything else. A torn edge never appears inside a component; it
      is reserved entirely for the meeting of two sections.
   3. THE SWEEP is the one ambient motion. A soft wedge of light pivots
      slowly back and forth low on the dark hero plane, the way a search
      beam swings while it looks for something, because that is what this
      firm is doing with your four answers: finding the electrician who
      covers your postcode. Transform only, an oscillation rather than a
      full turn or a straight-line drift, and it stops dead for anyone who
      has asked for less movement.

   Radius is 0 everywhere, so the glyphs are Lucide geometry drawn with
   square caps and mitred joins to match the corners. Display face is Public
   Sans at 800, the closest thing on the shortlist to the plain, slightly
   official grotesk you would expect on a form; body face is Source Sans 3,
   chosen for the same reason and for how cleanly it sets long FAQ answers.
   ------------------------------------------------------------------------ */

:root {
  /* 7 roles. ink: text and the counterfoil's own kept-copy sheet, so it
     always reads the same regardless of what ground it sits on. teal:
     ACTION ONLY, links and buttons, never decoration. teal-deep: the dark
     plane. cream: the page. paper: the alternate ground, a shade toward the
     quote pad's own manila. amber: the one highlight, the headline phrase
     and callouts. ink-soft: secondary text. */
  --ink: #10221F;
  --teal: #0C6D5F;
  --teal-deep: #0A3B35;
  --cream: #FBF6EC;
  --paper: #EFE3C4;
  --amber: #A8701B;
  --ink-soft: #4C5C58;

  /* derived, not new colours: the highlight lifted for dark grounds, teal
     pressed for the active state, and one hairline tint used inside
     components only, never at a seam. */
  --amber-lit: #E2A53F;
  --teal-press: #093E37;
  --hair: #DCCFA6;
  --danger: #8C2F22;
  --danger-bg: #F6E6DE;

  --display: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gut: 24px;
  --cf: 10px; /* counterfoil: how far the kept copy shows past the front sheet */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; font-weight: 600; }
a:hover { color: var(--teal-press); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 em, h2 em, .h1 em { color: var(--amber); font-style: normal; }
.dark h1 em, .dark h2 em { color: var(--amber-lit); }

h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.ico { flex: none; vertical-align: -3px; }

button { font-family: inherit; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal); color: var(--cream);
  font-family: var(--display); font-weight: 800; font-size: 0.98rem;
  padding: 15px 26px; border: 2px solid var(--teal);
  cursor: pointer; line-height: 1;
}
.btn:hover { background: var(--teal-press); border-color: var(--teal-press); color: var(--cream); }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--cream); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn.small { padding: 11px 18px; font-size: 0.88rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--cream); padding: 12px 18px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* --- the counterfoil ---------------------------------------------------- */
/* Two sheets. cf-back is always ink, whatever the front sheet's colour, so
   the device reads the same on chalk, paper or the dark plane. cf-front
   carries the real content and always closes on all four sides. */
.counterfoil { position: relative; }
.cf-back {
  position: absolute; inset: 0;
  transform: translate(var(--cf), var(--cf));
  background: var(--ink);
  z-index: 0;
}
.cf-front {
  position: relative; z-index: 1;
  background: var(--cream);
  border: 2px solid var(--ink);
  height: 100%;
}
.cf-front.paper { background: var(--paper); }
.cf-front.on-dark { background: var(--cream); border-color: var(--cream); }

/* --- the tear ------------------------------------------------------------ */
/* One shape, clipped with CSS, filled with the lower section's own colour.
   It sits at the top of the section it belongs to and nowhere else. */
.tear {
  width: 100%; height: 18px;
  clip-path: polygon(0.00% 0%, 4.17% 46%, 8.33% 0%, 12.50% 46%, 16.67% 0%, 20.83% 46%, 25.00% 0%, 29.17% 46%, 33.33% 0%, 37.50% 46%, 41.67% 0%, 45.83% 46%, 50.00% 0%, 54.17% 46%, 58.33% 0%, 62.50% 46%, 66.67% 0%, 70.83% 46%, 75.00% 0%, 79.17% 46%, 83.33% 0%, 87.50% 46%, 91.67% 0%, 95.83% 46%, 100.00% 0%, 100% 100%, 0% 100%);
}
.tear--cream { background: var(--cream); }
.tear--paper { background: var(--paper); }
.tear--dark { background: var(--teal-deep); }

/* --- the sweep ------------------------------------------------------------ */
.sweep-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sweep-beam {
  position: absolute; left: 50%; bottom: -60%;
  width: 1700px; height: 1700px; margin-left: -850px;
  transform-origin: 50% 100%;
  background: conic-gradient(from 246deg at 50% 100%, transparent 0deg, rgba(226,165,63,0.16) 42deg, rgba(226,165,63,0.05) 60deg, transparent 92deg);
  animation: sweep 15s ease-in-out infinite;
}
@keyframes sweep {
  0% { transform: rotate(-11deg); }
  50% { transform: rotate(11deg); }
  100% { transform: rotate(-11deg); }
}

/* --- chips ---------------------------------------------------------------- */
.chips { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.chips li {
  display: flex; align-items: center; gap: 11px;
  background: rgba(251,246,236,0.08); border: 1px solid rgba(251,246,236,0.28);
  color: var(--cream); padding: 11px 16px; font-size: 0.96rem; font-weight: 600;
}
.chips .ico { color: var(--amber-lit); }

/* --- masthead --------------------------------------------------------- */
.mast { background: var(--cream); position: relative; z-index: 20; }
.mast > .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.24rem; color: var(--ink); display: flex; flex-direction: column; line-height: 1.05; }
.brand b { color: var(--teal); }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a.link { color: var(--ink); font-weight: 700; font-size: 0.97rem; }
.nav a.link:hover { color: var(--teal); }
.nav .cta-top { }
.burger {
  display: none; background: var(--ink); color: var(--cream); border: none;
  font-family: var(--display); font-weight: 800; padding: 10px 16px; cursor: pointer;
}
.mobile { display: none; }
.mobile[data-open="true"] { display: block; background: var(--cream); }
.mobile .wrap { padding: 18px var(--gut) 26px; }
.mobile ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mobile a { display: block; padding: 12px 4px; color: var(--ink); font-weight: 700; }

/* --- hero ---------------------------------------------------------------- */
.hero { position: relative; background: var(--teal-deep); padding: 58px 0 0; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: var(--cream); max-width: 15ch; font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; margin-top: 30px; padding-bottom: 60px; }
.hero .lede { color: #DCEAE6; font-size: 1.14rem; max-width: 46ch; margin-bottom: 26px; }
.hero .cta-link { color: var(--amber-lit); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* --- the wizard ------------------------------------------------------------ */
.wizard-card { min-height: 470px; display: flex; flex-direction: column; }
.wizard-card .cf-front { padding: 30px 30px 26px; display: flex; flex-direction: column; }
.wiz-top h3 { margin-bottom: 4px; }
.wiz-top .said { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 20px; }
.wiz-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.wiz-steps li { list-style: none; flex: 1; height: 6px; background: var(--paper); position: relative; }
.wiz-steps li[data-done="true"] { background: var(--teal); }
.wiz-label { font-family: var(--display); font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 18px; text-transform: none; }
.wiz-label b { color: var(--ink); }

.step { display: flex; flex-direction: column; flex: 1; }
.step[hidden] { display: none; }
.step .q { font-family: var(--display); font-weight: 800; font-size: 1.5rem; margin-bottom: 8px; }
.step .why { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 20px; }

.opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.opt {
  text-align: left; background: var(--cream); border: 2px solid var(--ink);
  padding: 13px 16px; font-family: var(--body); font-size: 0.98rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.opt:hover { background: var(--paper); }
.opt[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--cream); }

.stop {
  margin-top: 12px; background: var(--danger-bg); border: 2px solid var(--danger);
  padding: 16px 18px; font-size: 0.94rem;
}
.stop b { display: block; color: var(--danger); font-family: var(--display); font-size: 1rem; margin-bottom: 6px; }
.stop a { color: var(--danger); font-weight: 700; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  border: 2px solid var(--ink); background: var(--cream); padding: 12px 13px;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; }

.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.wiz-nav .spacer { flex: 1; }
.after-note { color: var(--ink-soft); font-size: 0.86rem; margin-top: 14px; }

/* --- the compact ask form (foot of every interior) ---------------------- */
.ask-band { position: relative; background: var(--teal-deep); padding: 64px 0; overflow: hidden; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; position: relative; z-index: 2; }
.ask-grid h2 { color: var(--cream); }
.ask-grid .sec-lede { color: #DCEAE6; max-width: 44ch; }
.ask-form .cf-front { padding: 26px 28px; }

/* --- sections --------------------------------------------------------- */
.sec { padding: 74px 0; }
.sec--paper { background: var(--paper); }
.sec--cream { background: var(--cream); }
.sec--dark { background: var(--teal-deep); }
.sec--dark h2, .sec--dark p { color: var(--cream); }
.sec--dark .sec-lede { color: #DCEAE6; }
.sec-lede { color: var(--ink-soft); max-width: 62ch; font-size: 1.06rem; margin-bottom: 40px; }
.seam-wrap { position: relative; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pane .cf-front { padding: 26px; }
.pane h3 { display: flex; align-items: center; gap: 10px; }
.pane ul { margin: 0; padding-left: 20px; }
.pane li { margin-bottom: 10px; }
.pane.is-diy h3 { color: var(--teal); }
.pane.is-pro h3 { color: var(--amber); }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: start; }
.split.rev { grid-template-columns: 0.95fr 1.05fr; }

figure { margin: 0; }
figure figcaption { color: var(--ink-soft); font-size: 0.88rem; margin-top: 10px; }
.sec--dark figcaption { color: #B9CFC9; }

.two-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.list-plain { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.list-plain li { padding: 10px 0 10px 26px; position: relative; }
.list-plain .ico { position: absolute; left: 0; top: 12px; color: var(--teal); }

.op-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 26px; margin: 22px 0; }
.op-grid div { padding: 9px 12px; font-size: 0.95rem; }
.op-grid div:nth-child(4n+1), .op-grid div:nth-child(4n+2) { background: rgba(16,34,31,0.06); }
.op-note { background: var(--cream); border: 2px solid var(--ink); padding: 16px 18px; margin-top: 10px; }
.sec--dark .op-note { background: rgba(251,246,236,0.07); border-color: rgba(251,246,236,0.4); color: var(--cream); }
.sec--dark .op-note b { color: var(--amber-lit); }

/* --- faq ---------------------------------------------------------------- */
.qs { display: flex; flex-direction: column; gap: 10px; }
.q-item { position: relative; }
.q-item .cf-front { padding: 0; }
.q-item summary {
  list-style: none; cursor: pointer; padding: 17px 44px 17px 18px; font-family: var(--display);
  font-weight: 700; font-size: 1.02rem; position: relative;
}
.q-item summary::-webkit-details-marker { display: none; }
.q-item summary .ico { position: absolute; right: 16px; top: 18px; color: var(--teal); }
.q-item[open] summary .ico { transform: rotate(45deg); }
.q-item .a { padding: 0 18px 18px; color: var(--ink-soft); }
.q-item .a p:last-child { margin-bottom: 0; }

/* --- cards / grid --------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card .cf-front { display: flex; flex-direction: column; height: 100%; }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--ink-soft); font-size: 0.95rem; }
.go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; color: var(--teal); font-size: 0.9rem; }
.card a { display: block; color: inherit; }
.card a:hover .go { color: var(--teal-press); }

/* --- closer --------------------------------------------------------------- */
.closer { padding: 74px 0; background: var(--cream); }
.closer-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.closer-photo { aspect-ratio: 4/3; overflow: hidden; }
.closer-photo img { width: 100%; height: 100%; object-fit: cover; }
.closer-plate { background: var(--ink); color: var(--cream); padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.closer-plate h2 { color: var(--cream); }
.closer-plate p { color: #CFE0DB; margin-bottom: 22px; }

/* --- footer ----------------------------------------------------------- */
.foot { background: var(--ink); color: #CBD9D5; padding: 56px 0 0; }
.foot a { color: var(--cream); }
.foot a:hover { color: var(--amber-lit); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 42px; }
.foot .mark { font-family: var(--display); font-weight: 800; color: var(--cream); font-size: 1.2rem; margin-bottom: 12px; }
.foot h4 { color: var(--cream); font-family: var(--display); font-size: 0.86rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; font-size: 0.94rem; }
.foot-legal { padding: 30px 0 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.85rem; color: #9FB2AD; }
.foot-legal p { margin: 0; max-width: 74ch; }

/* --- interior page head + magazine layout -------------------------------- */
.page-head { background: var(--paper); padding: 52px 0 44px; }
.crumb { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 16px; }
.crumb a { color: var(--ink-soft); font-weight: 600; }
.page-head h1 { max-width: 22ch; font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
.page-head .pull { font-size: 1.14rem; color: var(--ink-soft); max-width: 62ch; margin-top: 14px; }

.article { padding: 54px 0 10px; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.4em; scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.said-note { background: var(--paper); border: 2px solid var(--ink); padding: 18px 20px; margin: 24px 0; }
.said-note b { display: block; font-family: var(--display); margin-bottom: 6px; }
.prose figure { margin: 26px 0; }
.prose figure img { width: 100%; }

.aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.aside h4 { font-family: var(--display); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 12px; }
.aside ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aside ol a { color: var(--ink); font-weight: 600; font-size: 0.94rem; }
.aside ol a:hover { color: var(--teal); }
.aside-card .cf-front { padding: 20px 20px 22px; }
.aside-card p { color: var(--ink-soft); font-size: 0.92rem; }

.siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 0; }

/* --- thanks / credits ----------------------------------------------------- */
.thanks-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.thanks-list { list-style: none; margin: 24px 0 0; padding: 0; }
.thanks-list li { padding: 14px 0; }
.thanks-list li + li { margin-top: 2px; }
.thanks-photo { aspect-ratio: 4/3; overflow: hidden; }
.thanks-photo img { width: 100%; height: 100%; object-fit: cover; }

.credits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.credit .cf-front { padding: 18px 20px; }
.credit h3 { font-size: 1.02rem; margin-bottom: 6px; }
.credit p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 6px; }

/* --- reveal ----------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: 0.08s; }
.rise.d2 { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .sweep-beam { animation: none; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto; }
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ask-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .two-col { grid-template-columns: 1fr; }
  .split, .split.rev { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .two-figs { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .closer-grid { grid-template-columns: 1fr; }
  .closer-photo { aspect-ratio: 16/9; }
  .article .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aside { position: static; }
  .siblings { grid-template-columns: 1fr; }
  .thanks-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav .link, .nav .cta-top { display: none; }
  .burger { display: inline-flex; }
  .mast > .wrap { height: 68px; }
  .cards { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .op-grid { grid-template-columns: 1fr; }
  .credits-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .wizard-card .cf-front { padding: 24px 20px 22px; }
  .sec { padding: 52px 0; }
  .hero { padding-top: 40px; }
  .hero-grid { padding-bottom: 40px; }
  :root { --cf: 7px; }
}

@media (max-width: 420px) {
  .btn { padding: 14px 20px; font-size: 0.92rem; }
}