/* ── Sunshine Plumbing & Repair — sections ── */

/* ═══ HERO: the sunrise ═══ */
.hero{
  position:relative;
  background:var(--night-800);
  color:var(--on-night);
  overflow:hidden;
  padding:clamp(2.5rem,5vw,4.25rem) 0 clamp(2.75rem,5vw,4.25rem);
  isolation:isolate;
}
/* the sky: a sun that rises once, from below the horizon */
.hero__sky{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--night-900) 0%,var(--night-800) 52%,#12305c 100%);
}
/* The sun sits mostly below the horizon: what shows is the glow off it,
   concentrated in the lower band so the copy above keeps its contrast. */
.hero__sun{
  position:absolute;left:62%;bottom:-64%;
  width:min(1260px,136vw);aspect-ratio:1;
  transform:translate(-50%,20%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,214,110,.72) 0%,
      rgba(253,185,19,.44) 24%,
      rgba(244,119,31,.26) 44%,
      rgba(224,90,12,.10) 62%,
      transparent 76%);
  filter:blur(10px);
  animation:sunrise 2.2s var(--ease-out) .1s both;
}
/* navy scrim: keeps the copy column off the warm field */
.hero__sky::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,
    rgba(8,23,45,.86) 0%,
    rgba(8,23,45,.62) 32%,
    rgba(8,23,45,.12) 62%,
    transparent 80%);
}
@keyframes sunrise{
  from{transform:translate(-50%,58%);opacity:.2}
  to  {transform:translate(-50%,20%);opacity:1}
}
/* the horizon line the sun comes up over */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(253,185,19,.55),transparent);
}

.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__h1{
  font-size:clamp(2.7rem,1.4rem + 5.6vw,5.25rem);
  color:var(--white);
  letter-spacing:-.045em;
  margin:0 0 1rem;
}
.hero__sub{
  font-size:clamp(1.05rem,1rem + .5vw,1.28rem);
  color:var(--on-night);
  max-width:44ch;margin:0 0 1.75rem;line-height:1.55;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}

.trust{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  padding-top:1.35rem;border-top:1px solid var(--rule);
}
.trust li{
  display:flex;align-items:center;gap:.45rem;
  font-size:.9rem;color:#cfdcf0;
}
.trust li b{color:var(--white);font-weight:700}
.trust .ico{color:var(--gold-500);width:1.2rem;height:1.2rem}
.trust__q{color:#7f96b8}
.trust__stars{display:inline-flex}
.trust__stars svg{width:1.15rem;height:1.15rem;fill:var(--gold-500)}

.hero__shot{position:relative}
.hero__shot img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid rgba(253,185,19,.32);
}
.hero__shot figcaption{
  margin-top:.85rem;font-size:.9rem;color:#e2eaf7;
  letter-spacing:.01em;
}

/* ═══ PILLARS — his logo's own four tiles, not a card grid ═══ */
.pillars{
  background:var(--paper);
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);
}
.tiles{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--rule-ink);
  border:1px solid var(--rule-ink);
  border-radius:var(--r-md);
  overflow:hidden;
  margin:0 0 2.75rem;
  box-shadow:0 10px 24px -18px rgba(8,23,45,.4);
}
.tile{
  background:var(--white);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  display:flex;flex-direction:column;gap:.75rem;
  position:relative;
  transition:background-color .3s var(--ease-out);
}
/* hover: the same sunrise the hero uses, washing up from the tile's floor */
.tile::before{
  content:"";position:absolute;inset:auto 0 0 0;height:72%;
  background:linear-gradient(0deg,rgba(253,185,19,.20),rgba(244,119,31,.06) 55%,transparent);
  opacity:0;transition:opacity .42s var(--ease-out);
  pointer-events:none;
}
.tile:hover::before{opacity:1}
.tile > *{position:relative}
.tile__ico{
  width:38px;height:38px;flex:none;
  fill:none;stroke:var(--night-600);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s var(--ease-out);
}
.tile:hover .tile__ico{stroke:var(--sun-ink)}
.tile--gas .tile__ico{stroke:var(--sun-ink)}
.tile h3{
  font-size:1.15rem;letter-spacing:-.02em;color:var(--night-800);
}
.tile p{
  font-size:.95rem;color:var(--ink-soft);line-height:1.6;margin:0;
}

.pillars__more{
  max-width:68ch;font-size:1.05rem;color:var(--ink-soft);
}

/* ═══ ABOUT ═══ */
.about{
  background:var(--white);
  padding:clamp(3.5rem,7vw,6rem) 0;
  border-top:1px solid var(--rule-ink);
}
.about__in{
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(2rem,5vw,4.25rem);align-items:center;
}
.about__shot img{
  width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lift);
}
.about__copy p{max-width:52ch;color:var(--ink-soft);font-size:1.05rem}
.about__copy p b{color:var(--night-800)}
.about__tag{
  font-family:var(--ff-display);text-transform:uppercase;
  font-size:clamp(.92rem,.85rem + .3vw,1.1rem);
  letter-spacing:-.01em;color:var(--sun-ink)!important;
  padding-top:1.35rem;margin-top:1.35rem;
  border-top:2px solid var(--gold-500);
  display:inline-block;
}

/* ═══ AREAS — prose, deliberately not a grid of city cards ═══ */
.areas{
  background:var(--paper);
  padding:clamp(3.5rem,7vw,5.5rem) 0;
}
.areas__prose{
  font-size:clamp(1.15rem,1rem + .85vw,1.6rem);
  line-height:1.62;max-width:64ch;color:var(--ink);
}
.areas__prose b{color:var(--night-800)}
.tag{
  display:inline-block;
  background:var(--white);border:1px solid var(--rule-ink);
  border-radius:99px;padding:.16em .72em;
  font-size:.72em;font-weight:600;color:var(--night-700);
  margin:.16em .1em;white-space:nowrap;
}

/* ═══ URGENT — the drenched sunrise band ═══ */
.urgent{
  background:linear-gradient(122deg,var(--gold-500) 0%,var(--sun-500) 52%,var(--sun-600) 100%);
  color:#3a1c04;
  padding:clamp(3rem,6vw,4.75rem) 0;
  position:relative;overflow:hidden;
}
.urgent::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 130% at 88% 0%,rgba(255,255,255,.30),transparent 60%);
  pointer-events:none;
}
.urgent__in{
  position:relative;
  display:grid;grid-template-columns:1fr auto;
  gap:2.5rem;align-items:center;
}
.urgent p{max-width:58ch;font-size:1.05rem;font-weight:500;margin:0;color:var(--on-sun)}

/* ═══ REVIEWS ═══ */
.reviews{
  background:var(--night-800);color:var(--on-night);
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.reviews .h2{color:var(--white)}
.reviews__head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:1rem;margin-bottom:2.5rem;
}
.reviews__head .h2{margin:0}
.reviews__score{margin:0;color:var(--on-night-soft);font-size:1rem}
.reviews__score b{
  font-family:var(--ff-display);font-size:1.6rem;color:var(--gold-500);
  margin-right:.35rem;letter-spacing:-.02em;
}
.quotes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.25rem;margin-bottom:3rem;
}
.quote{
  background:rgba(255,255,255,.045);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.95rem;
}
.quote__stars{display:flex;gap:.14rem}
.quote__stars svg{width:1.05rem;height:1.05rem;fill:var(--gold-500)}
.quote blockquote{margin:0}
.quote blockquote p{
  font-size:1.05rem;line-height:1.6;color:var(--white);margin:0;
}
.quote cite{
  font-style:normal;font-weight:700;font-size:.9rem;
  color:var(--white);margin-top:auto;
  display:flex;flex-direction:column;gap:.15rem;
}
.quote__src{
  font-weight:500;font-size:.8rem;color:var(--on-night-soft);
  letter-spacing:.01em;
}
/* Facebook recommendations are not star ratings — never render them as stars */
.rec{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-size:.8rem;font-weight:700;color:var(--gold-500);
  letter-spacing:.02em;
}
.rec svg{
  width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.proof{
  display:grid;grid-template-columns:auto minmax(0,38ch);
  justify-content:start;
  gap:1.9rem;align-items:center;
  border-top:1px solid var(--rule);padding-top:2.5rem;
}
.proof img{
  width:230px;border-radius:var(--r-md);
  border:1px solid rgba(253,185,19,.25);
}
.proof figcaption{
  font-size:1.05rem;color:var(--on-night-soft);
}

/* ═══ CLOSE ═══ */
.close{
  background:var(--paper);
  padding:clamp(4rem,8vw,7rem) 0;
  text-align:center;
}
.close__in{display:flex;flex-direction:column;align-items:center}
.close .h2{margin-bottom:.35em}
.close p{font-size:clamp(1.1rem,1rem + .6vw,1.4rem);color:var(--ink-soft);margin-bottom:2.25rem}
.close__acts{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.close .btn--ghost{border-color:rgba(13,31,60,.28);color:var(--night-700)}
.close .btn--ghost:hover{border-color:var(--sun-500);color:var(--sun-ink)}

/* The sunrise is this page's one authored moment. Sections do not each get
   their own entrance — content is never hidden waiting on a scroll event. */
@media (prefers-reduced-motion:reduce){
  .hero__sun{animation:none;transform:translate(-50%,22%)}
}

/* ═══ responsive ═══ */
@media (max-width:1040px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:2.5rem}
  .hero__shot{order:-1}
  .hero__sub{max-width:52ch}
  /* stacked hero: the sun rises up the page, so the scrim turns vertical */
  .hero__sun{left:50%;bottom:-34%;width:min(900px,175vw)}
  .hero__sky::after{
    background:linear-gradient(180deg,
      rgba(8,23,45,.90) 0%,
      rgba(8,23,45,.68) 42%,
      rgba(8,23,45,.22) 74%,
      transparent 92%);
  }
  .about__in{grid-template-columns:1fr;gap:2.25rem}
  .about__shot{order:-1}
  .urgent__in{grid-template-columns:1fr;gap:1.75rem}
  .proof{grid-template-columns:1fr;gap:1.25rem}
  .proof img{width:160px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
  .trust{gap:.65rem 1.2rem}
  .trust li{font-size:.88rem}
  .hero__acts .btn{width:100%}
  .close__acts .btn{width:100%}
}