/* ==========================================================================
   NorthStar Heating & Cooling — art direction: "two halves of the year"
   The whole page is built on a cold/warm duality. A serif display face keeps
   it domestic rather than industrial; the signature module is a real
   winter/summer tablist that recolours its own section.
   ========================================================================== */

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-weight: 600;
  --display-tracking: -0.022em;

  --bg: #fbfaf8;
  --bg-2: #f1efea;
  --deep: #16222e;

  --ink: #17232f;
  --ink-soft: #52646f;
  --ink-faint: var(--ink-soft);

  --cold: #39779f;
  --warm: #d4762f;
  --accent: var(--cold);
  --accent-ink: #ffffff;

  --hairline: rgba(23, 35, 47, .14);
  --hairline-strong: rgba(23, 35, 47, .26);
  --danger: #c33;
  --focus: var(--warm);

  --masthead-bg: rgba(251, 250, 248, .88);
  --panel-bg: #fbfaf8;
  --input-bg: #fff;
  --input-radius: 8px;
  --btn-radius: 999px;
  --sim-bg: rgba(61, 126, 166, .08);

  --flag-bg: rgba(212, 118, 47, .12);
  --flag-ink: #a2551c;
  --flag-border: rgba(212, 118, 47, .35);
  --demo-bar-bg: #16222e;
  --demo-bar-ink: #c2d0da;

  --measure: 1140px;
}

.on-deep {
  background: var(--deep);
  --ink: #eef3f7;
  --ink-soft: #9db0be;
  --ink-faint: #7590a2;
  --hairline: rgba(238, 243, 247, .16);
  --hairline-strong: rgba(238, 243, 247, .3);
  --input-bg: rgba(255,255,255,.05);
  color: var(--ink);
}

/* --- Hero: centred editorial with a temperature rule -------------------- */

.hero-centre {
  padding: clamp(4rem, 10vw, 7rem) 0 0;
  text-align: center;
}
.hero-centre h1 {
  font-size: clamp(2.5rem, 7vw, 5.2rem);
  max-width: 15ch;
  margin: 1.2rem auto 1.4rem;
}
.hero-centre__lede {
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 2.2rem;
}
.hero-centre__actions {
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
}
.hero-centre__note { margin-top: 1.6rem; font-size: .84rem; color: var(--ink-faint); }

.temp-rule {
  height: 3px;
  width: min(100%, 720px);
  margin: 2.8rem auto 0;
  border-radius: 3px;
  background: linear-gradient(to right, var(--cold) 0%, #8fa6a8 48%, var(--warm) 100%);
}

.hero-centre__media {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--bg-2);
}
.hero-centre__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Bands -------------------------------------------------------------- */

.band { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); max-width: 58ch; }
.band h2 { font-size: clamp(1.9rem, 4.8vw, 3.2rem); max-width: 20ch; }
.band__lede { font-size: 1.07rem; color: var(--ink-soft); margin-top: 1.1rem; max-width: 56ch; }

.kicker {
  display: block;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #a85520;
  margin-bottom: .9rem;
}
.on-deep .kicker { color: var(--warm); }

/* --- Season switcher ---------------------------------------------------- */

.seasons { --season: var(--cold); }
.seasons[data-active-theme="warm"] { --season: var(--warm); }

.seasons__tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  margin-bottom: 2.5rem;
}
.on-deep .seasons__tabs { background: rgba(255,255,255,.07); }

.seasons__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.seasons__tab[aria-selected="true"] { background: var(--season); color: #fff; }
.seasons[data-active-theme="warm"] .seasons__tab[aria-selected="true"] { color: #17232f; }

.seasons__panel[hidden] { display: none; }

.seasons__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .seasons__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }

.seasons__panel h3 {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  color: var(--season);
  margin-bottom: .9rem;
}
.seasons__panel p { color: var(--ink-soft); }

.season-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .8rem; }
.season-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: .98rem;
}
.season-points li::before {
  content: "";
  width: 10px; height: 10px;
  margin-top: .45em;
  border-radius: 50%;
  border: 2px solid var(--season);
}

.season-figure {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
}
.season-figure img { width: 100%; height: 100%; object-fit: cover; }

/* --- Comfort audit ------------------------------------------------------ */

.audit-grid { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .audit-grid { grid-template-columns: repeat(3, 1fr); } }

.audit-item { padding-top: 1.3rem; border-top: 2px solid var(--hairline-strong); }
.audit-item h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.audit-item p { font-size: .95rem; color: var(--ink-soft); }

/* --- Receptionist ------------------------------------------------------- */

.receptionist { background: var(--deep); color: #eef3f7; }
.receptionist__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .receptionist__grid { grid-template-columns: 1.5fr 1fr; gap: 4rem; } }
.receptionist h2 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); max-width: 18ch; }
.receptionist p { margin-top: 1rem; max-width: 50ch; color: #9db0be; }
.receptionist .btn { background: var(--warm); color: #17232f; }
.receptionist__note { margin-top: 1.1rem; font-size: .86rem; color: #7590a2; }

/* --- Booking ------------------------------------------------------------ */

.booking { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 940px) { .booking { grid-template-columns: .85fr 1.15fr; } }
.booking__panel {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: 0 24px 60px -40px rgba(23,35,47,.5);
}
.contact-line { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--hairline); display: grid; gap: .3rem; }
.contact-line__number { font-family: var(--font-display); font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 600; }
.contact-line span { font-size: .85rem; color: var(--ink-faint); }