/* ═══════════════════════════════════════════════════
   SUNLITH POWER — stylesheet
   Palette : Lagos night indigo + filament amber
   Type    : Bricolage Grotesque / Instrument Sans / DM Mono
   ═══════════════════════════════════════════════════ */

:root{
  /* colour */
  --night:      #101A2E;
  --night-2:    #182742;
  --night-3:    #24365a;
  --filament:   #FFAE3B;
  --filament-2: #E8830F;
  --accent-ink: #96490A;          /* amber that passes contrast on light bg */
  --paper:      #EDF0F4;
  --surface:    #FFFFFF;
  --ink:        #111722;
  --slate:      #5B6577;
  --hair:       #D6DCE5;
  --hair-dark:  rgba(255,255,255,.14);

  /* type */
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* metrics */
  --r: 4px;
  --gut: clamp(20px, 5vw, 48px);
  --max: 1180px;
  --sec: clamp(72px, 10vw, 132px);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--filament); color:var(--night);
  padding:12px 18px; font-weight:600;
}
.skip:focus{ left:8px; top:8px; }

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--filament);
  outline-offset:3px;
  border-radius:2px;
}

/* ── eyebrow ─────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--filament);
  margin:0 0 20px;
}
.eyebrow--dark{ color:var(--accent-ink); }

/* ── buttons ─────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  font-family:var(--body); font-size:.9375rem; font-weight:600;
  line-height:1;
  padding:15px 24px;
  border:1px solid transparent;
  border-radius:var(--r);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--filament); color:var(--night); }
.btn--primary:hover{ background:var(--filament-2); }
.btn--dark{ background:var(--night); color:#fff; }
.btn--dark:hover{ background:var(--night-3); }
.btn--ghost{ background:transparent; color:#fff; border-color:var(--hair-dark); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
.btn--sm{ padding:11px 18px; font-size:.875rem; }
.btn--lg{ padding:18px 24px; font-size:1rem; }
.btn--full{ width:100%; }

/* ═══ NAV ════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:80;
  background:var(--night);
  transition:box-shadow .25s ease;
}
.nav.is-stuck{ box-shadow:0 1px 0 var(--hair-dark), 0 12px 30px -18px rgba(0,0,0,.8); }

.nav__inner{ display:flex; align-items:center; gap:24px; height:70px; }
.nav__brand{ display:flex; flex:0 0 auto; }
.nav__brand img{
  height:30px; width:auto;
  /* Renders the logo as a clean white silhouette on the dark bar.
     Delete this line to show the logo in its original colours. */
  filter:brightness(0) invert(1);
}

.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{
  color:rgba(255,255,255,.72);
  text-decoration:none; font-size:.9375rem; font-weight:500;
  transition:color .18s ease;
}
.nav__links a:hover{ color:var(--filament); }

.nav__actions{ display:flex; align-items:center; gap:12px; margin-left:24px; }

.nav__toggle{
  display:none;
  width:42px; height:42px;
  background:transparent; border:1px solid var(--hair-dark); border-radius:var(--r);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0;
}
.nav__toggle span{ display:block; width:17px; height:1.5px; background:#fff; transition:transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.nav__panel{ background:var(--night); border-top:1px solid var(--hair-dark); padding:8px var(--gut) 24px; }
.nav__panel a{
  display:block; padding:15px 0;
  border-bottom:1px solid var(--hair-dark);
  color:#fff; text-decoration:none; font-size:1.0625rem; font-weight:500;
}
.nav__panel a:last-child{ border-bottom:0; }
.nav__panel-call{ color:var(--filament) !important; }

/* ═══ HERO ═══════════════════════════════════════ */
.hero{ position:relative; background:var(--night); color:#fff; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(255,174,59,.16), transparent 62%),
    radial-gradient(700px 500px at 6% 88%, rgba(36,54,90,.85), transparent 70%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);
  align-items:stretch;
  padding-block:clamp(56px,8vw,96px) clamp(64px,8vw,104px);
}

.hero__h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.9rem,6.4vw,4.9rem);
  line-height:.95;
  letter-spacing:-.035em;
  margin:0 0 24px;
}
.hero__h1 em{ font-style:normal; color:var(--filament); }

.hero__sub{
  margin:0 0 32px;
  max-width:44ch;
  color:rgba(255,255,255,.76);
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__media{ position:relative; display:flex; min-height:clamp(340px,40vw,560px); }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  border-radius:var(--r);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.85);
}
.hero__badge{
  position:absolute; left:16px; bottom:16px;
  display:flex; align-items:center; gap:9px;
  background:rgba(16,26,46,.82);
  backdrop-filter:blur(10px);
  border:1px solid var(--hair-dark);
  border-radius:var(--r);
  padding:9px 14px;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff;
}
.hero__badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--filament);
  box-shadow:0 0 0 0 rgba(255,174,59,.6);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,174,59,.55); }
  70%{ box-shadow:0 0 0 11px rgba(255,174,59,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,174,59,0); }
}

/* ── SIGNATURE: the night ribbon ─────────────────── */
.nightstrip{ margin:44px 0 0; max-width:520px; }
.nightstrip__cap{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:11px;
}
.nightstrip__val{ color:var(--filament); }

.ribbon{
  display:grid;
  grid-template-columns:repeat(24,1fr);
  gap:3px;
  height:38px;
}
.ribbon i{
  display:block;
  border-radius:1px;
  background:rgba(255,255,255,.11);
  transform-origin:bottom;
  transition:background-color .45s ease, opacity .45s ease;
}
.ribbon i.on{ background:linear-gradient(180deg,var(--filament),var(--filament-2)); }
.ribbon i.over{ background:repeating-linear-gradient(135deg,var(--filament) 0 3px,var(--filament-2) 3px 6px); }

.ribbon__legend{
  display:flex; justify-content:space-between;
  margin-top:9px;
  font-size:.625rem; letter-spacing:.06em;
  color:rgba(255,255,255,.42);
}
.ribbon__legend small{ font-size:.85em; opacity:.75; }


/* ═══ PROOF ══════════════════════════════════════ */
.proof{ background:var(--night-2); color:#fff; border-top:1px solid var(--hair-dark); }
.proof__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(30px,4vw,44px);
  gap:24px;
}
.proof__item{ display:flex; flex-direction:column; gap:6px; }
.proof__n{ font-size:clamp(1.6rem,3.1vw,2.4rem); font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--filament); }
.proof__n small{ font-size:.5em; opacity:.8; margin-left:1px; }
.proof__l{ font-size:.8125rem; color:rgba(255,255,255,.6); }

/* ═══ SECTION HEADS ══════════════════════════════ */
.sec-head{ max-width:640px; margin-bottom:clamp(40px,5vw,60px); }
.sec-head--tight{ margin-bottom:clamp(28px,4vw,40px); }
.sec-head__h{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  line-height:1.0;
  letter-spacing:-.032em;
  margin:0 0 18px;
}
.sec-head__p{ margin:0; color:var(--slate); max-width:52ch; }

/* ═══ PACKAGES ═══════════════════════════════════ */
.packages{ padding-block:var(--sec); }

.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,22px);
  align-items:stretch;
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:28px 24px 24px;
}
.card--pick{
  background:var(--night);
  border-color:var(--night);
  color:#fff;
  box-shadow:0 34px 60px -40px rgba(16,26,46,.7);
}
.card__flag{
  position:absolute; top:-1px; right:-1px;
  background:var(--filament); color:var(--night);
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 12px;
  border-radius:0 var(--r) 0 var(--r);
  margin:0;
}

.card__name{
  font-family:var(--display); font-weight:700;
  font-size:1.55rem; letter-spacing:-.02em;
  margin:0 0 4px;
}
.card__hours{ margin:0 0 18px; font-size:.9375rem; color:var(--slate); }
.card--pick .card__hours{ color:rgba(255,255,255,.6); }
.card__hours .mono{ font-size:1.35rem; font-weight:500; color:var(--accent-ink); letter-spacing:-.02em; }
.card--pick .card__hours .mono{ color:var(--filament); }

/* light-card ribbon variant */
.ribbon--sm{ height:26px; gap:2px; }
.card .ribbon i{ background:#E2E7EE; }
.card .ribbon i.on{ background:linear-gradient(180deg,var(--filament),var(--filament-2)); }
.card--pick .ribbon i{ background:rgba(255,255,255,.11); }
.ribbon__legend--sm{ color:var(--slate); opacity:.75; font-size:.5625rem; }
.card--pick .ribbon__legend--sm{ color:rgba(255,255,255,.42); opacity:1; }

.card__price{
  display:flex; flex-direction:column; gap:3px;
  margin:24px 0 20px;
  padding-top:20px;
  border-top:1px solid var(--hair);
}
.card--pick .card__price{ border-top-color:var(--hair-dark); }
.card__amt{ font-size:1.55rem; font-weight:500; letter-spacing:-.03em; }
.card__note{ font-size:.8125rem; color:var(--slate); }
.card--pick .card__note{ color:rgba(255,255,255,.55); }

.spec{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:9px; }
.spec li{ display:grid; grid-template-columns:82px 1fr; gap:12px; align-items:baseline; font-size:.875rem; }
.spec__k{ font-size:.625rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); }
.card--pick .spec__k{ color:rgba(255,255,255,.45); }
.spec__v{ color:var(--ink); }
.card--pick .spec__v{ color:rgba(255,255,255,.9); }

.card__runs{
  margin:0 0 22px;
  padding-top:18px; border-top:1px dashed var(--hair);
}
.card--pick .card__runs{ border-top-color:var(--hair-dark); }
.card__runs-k{ font-size:.625rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); margin:0 0 7px; }
.card--pick .card__runs-k{ color:rgba(255,255,255,.45); }
.card__runs-v{ margin:0; font-size:.875rem; line-height:1.55; color:var(--slate); }
.card--pick .card__runs-v{ color:rgba(255,255,255,.78); }

.card .btn{ margin-top:auto; }

.nudge{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
  margin-top:clamp(28px,4vw,40px);
  padding:clamp(24px,3.5vw,36px);
  background:var(--surface);
  border:1px solid var(--hair);
  border-left:3px solid var(--filament);
  border-radius:var(--r);
}
.nudge__h{ font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:-.02em; margin:0 0 6px; }
.nudge__p{ margin:0; color:var(--slate); max-width:52ch; font-size:.9375rem; }

/* ═══ INSTALL ════════════════════════════════════ */
.install{ background:var(--night); color:#fff; padding-bottom:clamp(48px,6vw,72px); }
.install__media img{ width:100%; height:clamp(240px,38vw,460px); object-fit:cover; }
.install__copy{ padding-block:clamp(44px,6vw,68px) clamp(36px,4vw,52px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.install__h{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.06; letter-spacing:-.03em; margin:0; }
.install__p{ margin:0; color:rgba(255,255,255,.72); }

.brands{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.brands__k{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 20px; }
.brands__row{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,1.8vw,18px); }

/* Manufacturer logos come in mixed formats — some transparent, some
   with a solid white background. A light chip renders every one of
   them correctly without needing to re-cut the source files. */
.brands__chip{
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-radius:var(--r);
  padding:clamp(10px,1.4vw,14px) clamp(14px,2vw,22px);
  min-width:clamp(96px,11vw,132px);
  min-height:clamp(46px,5vw,58px);
  transition:transform .2s ease, box-shadow .2s ease;
}
.brands__chip:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(0,0,0,.9); }
.brands__chip img{
  height:clamp(18px,2.2vw,26px); width:auto;
  max-width:100%; object-fit:contain;
}
@media (prefers-reduced-motion:reduce){ .brands__chip:hover{ transform:none; } }

/* ═══ REVIEWS ════════════════════════════════════ */
.reviews{ padding-block:var(--sec); }
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.quote{
  margin:0; padding:28px 26px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
  display:flex; flex-direction:column;
}
.quote p{
  margin:0 0 22px;
  font-size:1rem; line-height:1.6;
}
.quote p::before{ content:"\201C"; color:var(--filament-2); font-family:var(--display); font-size:1.3em; line-height:0; }
.quote footer{ margin-top:auto; padding-top:18px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.quote__name{ font-weight:600; font-size:.9375rem; }
.quote__loc{ font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }

/* ═══ FAQ ════════════════════════════════════════ */
.faq{ padding-block:0 var(--sec); }
.faq__inner{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,72px); align-items:start; }
.faq__head{ position:sticky; top:100px; }
.faq__ask{ margin:20px 0 0; font-size:.9375rem; color:var(--slate); }
.faq__ask a{ color:var(--accent-ink); font-weight:600; }

.faq__list{ border-top:1px solid var(--hair); }
.qa{ border-bottom:1px solid var(--hair); }
.qa summary{
  list-style:none; cursor:pointer;
  padding:20px 40px 20px 0;
  position:relative;
  font-weight:600; font-size:1.0625rem; line-height:1.4;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:1.5px solid var(--accent-ink); border-bottom:1.5px solid var(--accent-ink);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .22s ease;
}
.qa[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.qa__a{ padding:0 40px 22px 0; }
.qa__a p{ margin:0; color:var(--slate); }

/* ═══ QUOTE ══════════════════════════════════════ */
.quote-sec{ background:var(--night); color:#fff; padding-block:var(--sec); }
.quote-sec__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:start; }
.quote-sec__h{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,4vw,3rem); line-height:1.0; letter-spacing:-.032em; margin:0 0 16px; }
.quote-sec__p{ margin:0 0 32px; color:rgba(255,255,255,.72); max-width:46ch; }

.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); font-family:var(--mono); }
.field .opt{ text-transform:none; letter-spacing:0; opacity:.6; font-family:var(--body); }

.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--body); font-size:1rem;
  color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--hair-dark);
  border-radius:var(--r);
  padding:14px 15px;
  transition:border-color .18s ease, background-color .18s ease;
}
.field textarea{ resize:vertical; min-height:88px; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.32); }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(255,255,255,.28); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--filament); background:rgba(255,255,255,.08); outline:none;
}
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.field select option{ background:var(--night-2); color:#fff; }
.field.is-bad input,.field.is-bad select{ border-color:#FF7A6B; }
.field__err{ font-size:.75rem; color:#FF9A8E; font-family:var(--body); text-transform:none; letter-spacing:0; }

.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__msg{ margin:0; font-size:.9375rem; min-height:1px; }
.form__msg.ok{ color:var(--filament); }
.form__msg.bad{ color:#FF9A8E; }
.form__fine{ margin:0; font-size:.8125rem; color:rgba(255,255,255,.45); }
.form__fine a{ color:rgba(255,255,255,.75); }

.contact{ background:var(--night-2); border:1px solid var(--hair-dark); border-radius:var(--r); padding:clamp(24px,3vw,32px); }
.contact__h{ font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; margin:0 0 24px; }
.contact__list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:18px; }
.contact__list li{ display:grid; gap:5px; }
.contact__k{ font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.contact__v{ color:#fff; text-decoration:none; font-size:1rem; line-height:1.45; }
a.contact__v:hover{ color:var(--filament); }

.map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--hair-dark); }
.map iframe{ width:100%; height:220px; border:0; display:block; filter:grayscale(1) contrast(.9) brightness(.85); }

/* ═══ FOOTER ═════════════════════════════════════ */
.foot{ background:#0B1322; color:#fff; padding-top:clamp(48px,6vw,72px); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); padding-bottom:clamp(36px,5vw,56px); }
.foot__brand img{ height:32px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); }
.foot__brand p{ margin:0; color:rgba(255,255,255,.55); font-size:.9375rem; max-width:34ch; }
.foot__col{ display:flex; flex-direction:column; gap:11px; }
.foot__k{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.38); margin:0 0 3px; }
.foot__col a,.foot__col span{ color:rgba(255,255,255,.72); text-decoration:none; font-size:.9375rem; line-height:1.5; }
.foot__col a:hover{ color:var(--filament); }
.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-block:22px;
  border-top:1px solid var(--hair-dark);
}
.foot__base p{ margin:0; font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.38); }

/* ═══ WHATSAPP FLOAT ═════════════════════════════ */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.5);
  transition:transform .18s ease;
}
.wa:hover{ transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){ .wa:hover{ transform:none; } }

/* ═══ RIBBON ANIMATION STATE ═════════════════════
   Must sit after every ribbon colour rule above, or
   the card variants win and nothing animates in.     */
.ribbon:not(.is-lit) i.on,
.ribbon:not(.is-lit) i.over,
.card .ribbon:not(.is-lit) i.on{ background:#E2E7EE; }
.card--pick .ribbon:not(.is-lit) i.on,
.hero .ribbon:not(.is-lit) i.on,
.hero .ribbon:not(.is-lit) i.over{ background:rgba(255,255,255,.11); }

@media (prefers-reduced-motion:reduce){
  .ribbon i.on,
  .card .ribbon:not(.is-lit) i.on,
  .card--pick .ribbon:not(.is-lit) i.on,
  .hero .ribbon:not(.is-lit) i.on{ background:linear-gradient(180deg,var(--filament),var(--filament-2)); }
  .ribbon i.over,
  .hero .ribbon:not(.is-lit) i.over{ background:repeating-linear-gradient(135deg,var(--filament) 0 3px,var(--filament-2) 3px 6px); }
  .hero__badge .dot{ animation:none; }
  .ribbon i{ transition:none; }
}

/* ═══ RESPONSIVE ═════════════════════════════════ */
@media (max-width:1000px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero__media{ min-height:0; }
  .hero__media img{ height:clamp(220px,52vw,320px); }
  .nightstrip{ max-width:none; }
  .cards{ grid-template-columns:1fr; max-width:520px; }
  .card--pick{ order:-1; }
  .quotes{ grid-template-columns:1fr; }
  .faq__inner{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .quote-sec__grid{ grid-template-columns:1fr; }
  .install__copy{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__actions{ margin-left:auto; }
  .proof__grid{ grid-template-columns:1fr 1fr; gap:22px 16px; }
  .field-row{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .nudge{ flex-direction:column; align-items:flex-start; }
  .nudge .btn{ width:100%; }
}

@media (max-width:460px){
  .nav__actions .btn{ display:none; }
  .ribbon{ gap:2px; height:32px; }
  .spec li{ grid-template-columns:74px 1fr; gap:10px; }
}

@media print{
  .nav,.wa,.hero__bg,.map{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ═══ LEGAL PAGES ════════════════════════════════ */
.legal{ padding-block:clamp(48px,7vw,88px) var(--sec); }
.legal__inner{ max-width:720px; }
.legal h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.02; letter-spacing:-.032em; margin:0 0 12px; }
.legal__date{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin:0 0 40px; }
.legal h2{ font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; margin:40px 0 12px; }
.legal p, .legal li{ color:var(--slate); }
.legal p{ margin:0 0 16px; }
.legal ul{ margin:0 0 16px; padding-left:20px; display:grid; gap:8px; }
.legal a{ color:var(--accent-ink); font-weight:600; }
.legal__back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); text-decoration:none; margin-bottom:32px; }
.legal__back:hover{ color:var(--accent-ink); }

/* ═══ SAVINGS CALCULATOR ═════════════════════════ */
.calc{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,32px);
  margin-top:clamp(28px,4vw,44px);
  background:var(--surface); border:1px solid var(--hair);
  border-left:3px solid var(--filament); border-radius:var(--r);
  padding:clamp(24px,3.5vw,40px);
}
.calc__h{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.08; letter-spacing:-.028em; margin:0 0 10px; }
.calc__p{ margin:0 0 26px; color:var(--slate); font-size:.9375rem; max-width:42ch; }
.calc__field{ margin-bottom:16px; }
.calc__field label{ display:block; font-family:var(--mono); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); margin-bottom:7px; }
.calc__field .opt{ text-transform:none; letter-spacing:0; opacity:.7; }
.calc__input{ display:flex; align-items:center; border:1px solid var(--hair); border-radius:var(--r); background:var(--paper); transition:border-color .18s ease; }
.calc__input:focus-within{ border-color:var(--filament); }
.calc__input span{ padding:0 4px 0 14px; font-family:var(--mono); color:var(--slate); font-size:1.05rem; }
.calc__input input{
  flex:1; border:0; background:transparent; outline:none;
  font-family:var(--mono); font-size:1.15rem; letter-spacing:-.01em; color:var(--ink);
  padding:14px 14px 14px 4px; width:100%;
}
.calc__out{ background:var(--night); border-radius:var(--r); padding:clamp(22px,3vw,30px); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.calc__empty p{ margin:0; color:rgba(255,255,255,.6); font-size:.9375rem; }
.calc__k{ font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 5px; }
.calc__big{ font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:500; letter-spacing:-.035em; line-height:1; margin:0 0 22px; }
.calc__big--good{ color:var(--filament); }
.calc__split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; padding:18px 0; border-block:1px solid var(--hair-dark); }
.calc__v{ margin:0; font-size:1.0625rem; font-weight:600; line-height:1.25; }
.calc__fine{ margin:12px 0 0; font-size:.75rem; color:rgba(255,255,255,.45); line-height:1.5; }

.proofquote{
  margin:clamp(16px,2vw,22px) 0 0; padding:24px 26px;
  background:var(--surface); border:1px solid var(--hair);
  border-left:3px solid var(--night); border-radius:var(--r);
}
.proofquote p{ margin:0 0 16px; font-size:1.0625rem; line-height:1.55; }
.proofquote p::before{ content:"\201C"; color:var(--filament-2); font-family:var(--display); font-size:1.3em; line-height:0; }
.proofquote footer{ display:flex; gap:12px; align-items:baseline; }

/* ═══ STICKY MOBILE BAR ══════════════════════════ */
.stickybar{ display:none; }
@media (max-width:760px){
  .stickybar{
    position:fixed; left:0; right:0; bottom:0; z-index:75;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:var(--night); border-top:1px solid var(--hair-dark);
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -18px rgba(0,0,0,.9);
    transform:translateY(115%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    will-change:transform;
  }
  .stickybar.is-on{ transform:translateY(0); }
  @media (prefers-reduced-motion:reduce){ .stickybar{ transition:none; } }
  .stickybar__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
  .stickybar__txt strong{ color:#fff; font-size:.875rem; font-weight:600; white-space:nowrap; }
  .stickybar__txt span{
    color:var(--filament); font-family:var(--mono); font-size:.625rem;
    letter-spacing:.06em; text-transform:uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .stickybar .btn{ flex:0 0 auto; white-space:nowrap; }
  .wa{ display:none; }
  body{ padding-bottom:70px; }
  .calc{ grid-template-columns:1fr; }
}
@media (max-width:1000px){ .calc{ grid-template-columns:1fr; } }

/* ═══ CALCULATOR SECTION ═════════════════════════ */
.calcsec{ padding-block:var(--sec); }
.calcsec .calc{ margin-top:0; }
.packages{ padding-block:0 var(--sec); }

/* payment terms line on package cards */
.card__pay{
  margin:10px 0 0; padding-top:10px;
  border-top:1px dotted var(--hair);
  font-size:.8125rem; line-height:1.45; color:var(--slate);
}
.card__pay strong{ color:var(--ink); font-weight:600; }
.card--pick .card__pay{ border-top-color:var(--hair-dark); color:rgba(255,255,255,.72); }
.card--pick .card__pay strong{ color:#fff; }

/* About block heading */
.install__h3{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-weight:600;
  margin:2.25rem 0 .75rem;
  letter-spacing:-.01em;
  color:inherit;
}