/* ==========================================================================
   Muskoka Cottage Builds — Main Stylesheet
   Palette: ink #14181A · stone #75634E · paper #F7F5F2
   Fonts: Inter (body) · Fraunces (display: h1, h2, wordmark, stat numerals)
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
  /* Colors — Light Mode */
  --color-primary:      #14181A;
  --color-primary-dark: #0A0D0E;
  --color-primary-light:#2B3235;
  --color-accent:       #75634E;
  --color-accent-hover: #5C4C3B;
  --color-bg:           #F7F5F2;
  --color-surface:      #FFFFFF;
  --color-text:         #16191B;
  --color-text-muted:   #5C625F;
  --color-border:       #E5E2DC;

  /* Derived tints */
  --color-accent-soft:  rgba(117, 99, 78, 0.10);
  --color-accent-veil:  rgba(117, 99, 78, 0.05);
  --color-white:        #ffffff;

  /* Legacy aliases — the shared OLN component library still references these.
     Values resolve to the palette above so there is one source of truth. */
  --color-navy:         var(--color-primary);
  --color-navy-dark:    var(--color-primary-dark);
  --color-navy-light:   var(--color-primary-light);
  --color-green:        var(--color-accent);
  --color-green-hover:  var(--color-accent-hover);
  --color-green-light:  var(--color-accent-soft);
  --color-bg-light:     var(--color-surface);
  --color-card:         var(--color-surface);
  --color-surface-2:    var(--color-bg);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-heading: var(--font-body);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, 0.12);

  /* Layout */
  --max-width: 1200px;
  --header-height: 72px;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --color-bg:            #121614;
  --color-surface:       #191E1B;
  --color-text:          #ECEEEB;
  --color-text-muted:    #9BA29D;
  --color-border:        #292F2C;
  --color-primary-light: #3A4441;
  --color-accent:        #C4A986;
  --color-accent-hover:  #D4BE9E;
  --color-accent-soft:   rgba(196, 169, 134, 0.16);
  --color-accent-veil:   rgba(196, 169, 134, 0.08);

  --color-bg-light:      var(--color-surface);
  --color-card:          var(--color-surface);
  --color-surface-2:     #292F2C;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-green-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
}

h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
}

p, li, td, th, dd, dt, figcaption {
  line-height: 1.65;
}

/* --- Skip Link (AODA) --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 10000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-green);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-navy);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* space-between distributes what is left over, which is nothing once the
     wordmark and six nav items are both asking for room. Without this the two
     touch between roughly 768 and 1023px. */
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* The wordmark keeps its width; the nav is what gives ground. */
.site-logo { flex-shrink: 0; }

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo:hover {
  color: var(--color-green);
}

.site-logo svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-green);
}

.nav-cta {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
}

.nav-cta:hover {
  background: var(--color-green-hover) !important;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Dark mode toggle */
.theme-toggle {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: color var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--color-green);
}

.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--space-4xl) var(--space-lg);
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg,
      var(--color-primary-dark) 0%,
      var(--color-primary) 42%,
      var(--color-primary-light) 100%);
  background-size: cover;
  background-position: center;
}

/* ---- HERO PHOTO SLOT -----------------------------------------------------
   Full-bleed hero image goes here once Matt supplies the stock photography.
   Keep the gradient layered on top of the photo so the headline stays legible;
   drop the file into /img/ and uncomment the matching rule below.
   Subjects and search queries: docs/photo-shopping-list.md
   ------------------------------------------------------------------------- */
/*
   ---- HERO PHOTO SLOTS --------------------------------------------------
   Every hero on the site has a slot below. Uncomment one, point it at the
   delivered file, and the palette gradient stays layered over the photo so
   the headline keeps its contrast. Hero images need the highest resolution
   of any asset on the site — see docs/photo-shopping-list.md.

.hero-photo[data-slot="home-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/home-hero.jpg"); }
.hero-photo[data-slot="services-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/services-hero.jpg"); }
.hero-photo[data-slot="areas-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/areas-hero.jpg"); }
.hero-photo[data-slot="contact-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/contact-hero.jpg"); }
.hero-photo[data-slot="faq-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/faq-hero.jpg"); }
.hero-photo[data-slot="blog-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/blog-hero.jpg"); }
.hero-photo[data-slot="muskoka-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/muskoka-hero.jpg"); }
.hero-photo[data-slot="bracebridge-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/bracebridge-hero.jpg"); }
.hero-photo[data-slot="muskoka-lakes-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/muskoka-lakes-hero.jpg"); }
.hero-photo[data-slot="parry-sound-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/parry-sound-hero.jpg"); }
.hero-photo[data-slot="huntsville-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/huntsville-hero.jpg"); }
.hero-photo[data-slot="gravenhurst-hero"] { background-image: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58) 100%), url("/img/gravenhurst-hero.jpg"); }
*/

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(200, 154, 91, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(200, 154, 91, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  font-weight: 700;
}

.hero h1 .accent {
  color: var(--color-green);
}

.hero p {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-green);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-green-hover);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 154, 91, 0.30);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
  border-color: var(--color-green);
  color: var(--color-green);
}

.btn-sm {
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
}

/* --- Sections --- */
.section {
  padding: clamp(var(--space-3xl), 8vw, var(--space-4xl)) 0;
}

.section-light {
  background: var(--color-bg-light);
}

.section-navy {
  background: var(--color-navy);
  color: var(--color-white);
}

.section-navy h2,
.section-navy h3 {
  color: var(--color-white);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  margin-bottom: var(--space-md);
}

.section-header p {
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.0625rem;
}

.section-navy .section-header p {
  color: rgba(255, 255, 255, 0.75);
}

/* Badge / Label */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--color-green-light);
  color: var(--color-green);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 20px;
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  color: var(--color-green);
}

.card-icon svg {
  width: 28px;
  height: 28px;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.card p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* --- Grid Layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* --- How It Works / Steps --- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  counter-reset: step;
}

.step {
  text-align: center;
  position: relative;
}

.step-number {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
}

.step h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

.step p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* --- CTA Banner --- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(200, 154, 91, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner .amount {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-green);
  display: block;
  margin-bottom: var(--space-sm);
}

.cta-banner h2 {
  color: var(--color-white);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: var(--space-md);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

/* --- Service Area Tags --- */
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.area-tag {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.area-tag:hover {
  border-color: var(--color-green);
  color: var(--color-green);
  background: var(--color-green-light);
}

/* --- Tables --- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-xl) 0;
}

.data-table, .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.data-table th, .article-table th {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.data-table td, .article-table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.data-table tr:nth-child(even), .article-table tr:nth-child(even) {
  background: var(--color-bg-light);
}

.data-table .highlight, .article-table .highlight {
  color: var(--color-green);
  font-weight: 600;
}

/* --- FAQ Accordion --- */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
  background: var(--color-bg);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg) var(--space-xl);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  gap: var(--space-md);
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--color-green);
}

.faq-question .faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--transition-base);
}

.faq-item.active .faq-question .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
}

.faq-answer-inner {
  padding: 0 var(--space-xl) var(--space-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --- Forms --- */
.form-section {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-group label .required {
  color: #9A5B4C;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(200, 154, 91, 0.18);
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group input.error,
.form-group select.error {
  border-color: #9A5B4C;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-green);
}

.form-checkbox label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-weight: 400;
}

.form-checkbox label a {
  color: var(--color-green);
  text-decoration: underline;
}

.form-error {
  color: #9A5B4C;
  font-size: 0.8125rem;
  font-weight: 500;
  display: none;
  margin-top: var(--space-xs);
}

.form-error.visible {
  display: block;
}

/* --- Peak Shifting Flow --- */
.flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-sm);
}

.flow-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-light);
  color: var(--color-green);
  border-radius: 50%;
  flex-shrink: 0;
}

.flow-arrow {
  color: var(--color-green);
  font-size: 1.5rem;
}

/* --- City Cards --- */
.city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.city-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.city-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.city-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
  color: var(--color-navy);
}

[data-theme="dark"] .city-card h3 {
  color: var(--color-white);
}

.city-card p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* --- Savings Calculator (static) --- */
.calculator-card {
  background: var(--color-bg);
  border: 2px solid var(--color-green);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.calc-row:last-child {
  border-bottom: none;
}

.calc-label {
  font-weight: 500;
  color: var(--color-text);
}

.calc-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
}

.calc-value.savings {
  color: var(--color-green);
  font-size: 1.5rem;
}

/* --- Footer --- */
.site-footer {
  background: var(--color-navy-dark);
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
}

.footer-col p {
  font-size: 0.875rem;
  line-height: 1.7;
}

.footer-col ul li {
  margin-bottom: var(--space-sm);
}

.footer-col ul a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.footer-col ul a:hover {
  color: var(--color-green);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

.footer-logo svg {
  width: 28px;
  height: 28px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
}

.footer-contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-green);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-xl);
}

.footer-disclosure {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-md);
  line-height: 1.6;
  max-width: 800px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.8125rem;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
}

.footer-legal-links a:hover {
  color: var(--color-green);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.5);
}

.footer-attribution {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  margin-top: var(--space-md);
  text-align: center;
}

.footer-attribution a {
  color: rgba(255, 255, 255, 0.5);
}

.footer-attribution a:hover {
  color: var(--color-green);
}

/* --- Cookie Banner --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(20, 36, 28, 0.97);
  color: var(--color-white);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  display: none;
  font-family: var(--font-body);
}

.cookie-banner.visible {
  display: block;
}

.cookie-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.cookie-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.cookie-text a {
  color: var(--color-green);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: var(--space-md);
  flex-shrink: 0;
}

.cookie-accept {
  background: var(--color-green);
  color: var(--color-white);
  border: none;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.cookie-accept:hover {
  background: var(--color-green-hover);
}

.cookie-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.625rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cookie-decline:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

/* --- Thank You Page --- */
.thank-you {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
}

.thank-you-content {
  max-width: 600px;
}

.thank-you-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-light);
  color: var(--color-green);
  border-radius: 50%;
  margin: 0 auto var(--space-xl);
}

.thank-you-icon svg {
  width: 40px;
  height: 40px;
}

.thank-you h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-md);
}

.thank-you p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

/* --- Legal Pages --- */
.legal-page {
  padding: var(--space-3xl) 0;
}

.legal-page h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: var(--space-sm);
}

.legal-page .last-updated {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-2xl);
}

.legal-page h2 {
  font-size: 1.25rem;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.legal-page p,
.legal-page li {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.legal-page ul {
  list-style: disc;
  padding-left: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.legal-page ul li {
  margin-bottom: var(--space-sm);
}

/* The legal pages inherit the 1200px page container, which on a desktop puts
   about 150 characters on a line — roughly twice a comfortable measure, and the
   reason they read as a wall. Body copy also ran in the muted grey meant for
   captions, which at that width looks washed out. */
.legal-page .container {
  max-width: 760px;
}
.legal-page p,
.legal-page li {
  color: var(--color-text);
}
.legal-page .last-updated {
  color: var(--color-text-muted);
}

/* --- Utility --- */
.text-center { text-align: center; }
.text-green { color: var(--color-green); }
.text-white { color: var(--color-white); }
.text-muted { color: var(--color-text-muted); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   RESPONSIVE — Tablet (768px)
   ========================================================================== */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid .form-group.full-width {
    grid-column: span 2;
  }

  .city-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .flow-steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .flow-step {
    flex-direction: column;
    text-align: center;
    max-width: 200px;
  }

  .cookie-inner {
    flex-direction: row;
    align-items: center;
  }

  .cookie-text {
    flex: 1;
  }
}

/* ==========================================================================
   RESPONSIVE — Desktop (1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .city-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-links {
    gap: var(--space-xl);
  }
}

/* The band where the wordmark and six nav items competed for room. Above
   1200px there is space for both at full spacing; below 768 the nav becomes a
   drawer. This is the gap in between. */
@media (min-width: 768px) and (max-width: 1199px) {
  .nav-links {
    gap: var(--space-md);
  }

  .nav-links a {
    font-size: 0.9375rem;
  }
}

/* ==========================================================================
   RESPONSIVE — Mobile (max 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-navy-dark);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-2xl);
    gap: var(--space-xl);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .hero {
    min-height: 70vh;
    padding: var(--space-3xl) var(--space-md);
  }

  .hero h1 {
    font-size: 1.625rem;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .section-header h2 {
    font-size: 1.375rem;
  }

  .card {
    padding: var(--space-lg);
  }

  .form-section {
    padding: var(--space-lg);
  }

  .cta-banner {
    padding: var(--space-xl) var(--space-lg);
  }

  .container {
    padding: 0 var(--space-md);
  }

  .data-table {
    font-size: 0.8125rem;
  }

  .data-table th,
  .data-table td {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ============================================================
   BLOG STYLES
   ============================================================ */

/* Blog index grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.blog-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.blog-tag {
  background: var(--color-green-light);
  color: var(--color-green);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-card-meta time {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.blog-card-title {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

.blog-card-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-card-title a:hover {
  color: var(--color-green);
}

.blog-card-excerpt {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.blog-read-more {
  color: var(--color-green);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-read-more:hover {
  color: var(--color-green-hover);
}

/* ---- Journal empty state -------------------------------------------------
   Shown only while the grid holds no post cards. injectTemplateCard() inserts
   each new card before the <!-- POSTS --> marker, which sits above this block,
   so the first published post stops matching :first-child and the empty state
   disappears on its own — no build step and no JS.
   ------------------------------------------------------------------------- */
.blog-grid > .blog-empty { display: none; }
.blog-grid > .blog-empty:first-child {
  display: block;
  grid-column: 1 / -1;
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}
.blog-empty h2 {
  margin: 0 0 var(--space-sm);
  font-size: 1.35rem;
}
.blog-empty p {
  margin: 0 auto var(--space-lg);
  max-width: 46ch;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.blog-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Blog article layout */
.blog-article-header {
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.blog-article-header h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.25;
  color: #fff;
  margin-bottom: var(--space-lg);
}

.blog-article-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  max-width: 700px;
}

.blog-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.blog-article-meta time {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}

.breadcrumb {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
}

.breadcrumb a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-green);
}

.breadcrumb span {
  margin: 0 0.3em;
}

/* Blog article body — two-column layout */
.blog-article-body {
  padding: var(--space-3xl) 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.blog-article-body .container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-3xl);
  align-items: start;
}

.blog-article-content {
  max-width: 700px;
}

.blog-article-content h2 {
  font-size: 1.5rem;
  color: var(--color-navy);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-xl);
  border-top: 2px solid var(--color-border);
}

.blog-article-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.blog-article-content h3 {
  font-size: 1.15rem;
  color: var(--color-navy);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.blog-article-content p {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

.blog-article-content ul,
.blog-article-content ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

.blog-article-content li {
  line-height: 1.7;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

/* Callout box */
.blog-callout {
  background: var(--color-green-light);
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.65;
}

/* CTA box inside article */
.blog-cta-box {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-2xl);
  margin: var(--space-2xl) 0;
  text-align: center;
}

.blog-cta-box h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: var(--space-sm);
}

.blog-cta-box p {
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-lg);
}

/* Blog tables */
.blog-table-wrap {
  overflow-x: auto;
  margin: var(--space-lg) 0;
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.blog-table thead th {
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
}

.blog-table tbody td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.blog-table tbody tr:nth-child(even) td {
  background: var(--color-surface, rgba(0,0,0,0.02));
}

/* Sidebar */
.blog-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sidebar-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.sidebar-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-green);
}

.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li {
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.4;
}

.sidebar-list li:last-child {
  border-bottom: none;
}

.sidebar-list a {
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sidebar-list a:hover {
  color: var(--color-green-hover);
}

.sidebar-cta {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
}

.sidebar-cta h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-cta p {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  margin-bottom: var(--space-md);
}

/* Dark mode blog adjustments */
[data-theme="dark"] .blog-article-content h2,
[data-theme="dark"] .blog-article-content h3,
[data-theme="dark"] .sidebar-card h4 {
  color: var(--color-green);
}

[data-theme="dark"] .blog-article-header {
  background: #121815;
}

[data-theme="dark"] .blog-table thead th {
  background: #121815;
}

/* Responsive blog — defensive mobile-overlap prevention */
@media (max-width: 1024px) {
  .blog-article-body .container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Force every descendant of .blog-sidebar out of sticky/fixed/absolute
     positioning so cards can never overlap the article body on mobile. */
  .blog-sidebar,
  .blog-sidebar * {
    position: static !important;
    top: auto !important;
  }

  .blog-sidebar {
    order: 2 !important;
    width: 100%;
    margin-top: var(--space-2xl);
  }

  .blog-article-content {
    max-width: 100%;
    order: 1 !important;
  }

  .blog-article-body {
    padding-bottom: var(--space-3xl);
  }
}

/* Mobile table restack — converts <table class="blog-table"> rows into
   labelled cards. Requires each <td> to carry a data-label attribute
   matching its column header. The injector script and wrapMES emitter
   both add these attributes. Falls back to horizontal scroll if data-label
   is absent on any cell. */
@media (max-width: 640px) {
  .blog-table-wrap {
    overflow-x: visible;
    margin: var(--space-lg) 0;
  }

  .blog-table,
  .data-table,
  .article-table {
    display: block;
    width: 100%;
    border: none;
    font-size: 1rem;
  }

  .blog-table thead,
  .data-table thead,
  .article-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .blog-table tbody,
  .blog-table tr,
  .data-table tbody,
  .data-table tr,
  .article-table tbody,
  .article-table tr {
    display: block;
    width: 100%;
  }

  .blog-table tr,
  .data-table tr,
  .article-table tr {
    margin: 0 0 var(--space-md) 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .blog-table tbody tr:nth-child(even) td,
  .data-table tbody tr:nth-child(even) td,
  .article-table tbody tr:nth-child(even) td {
    background: transparent;
  }

  .blog-table td,
  .data-table td,
  .article-table td {
    display: block;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    border-right: none;
    border-left: none;
    color: var(--color-text);
  }

  .blog-table td:last-child,
  .data-table td:last-child,
  .article-table td:last-child {
    border-bottom: none;
  }

  /* Show the column header from data-label as a small uppercase eyebrow
     above each cell value, restacking the row into a card. */
  .blog-table td[data-label]::before,
  .data-table td[data-label]::before,
  .article-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 4px;
  }

  /* If a <td> is missing data-label, keep the table horizontally scrollable
     as a fallback so the data is at least reachable. */
  .blog-table:has(td:not([data-label])),
  .data-table:has(td:not([data-label])),
  .article-table:has(td:not([data-label])) {
    display: table;
  }
  .blog-table:has(td:not([data-label])) thead,
  .data-table:has(td:not([data-label])) thead,
  .article-table:has(td:not([data-label])) thead {
    position: static; width: auto; height: auto; padding: revert; margin: 0; overflow: visible; clip: auto; white-space: normal;
  }
  .blog-table:has(td:not([data-label])) tbody,
  .blog-table:has(td:not([data-label])) tr,
  .blog-table:has(td:not([data-label])) td,
  .data-table:has(td:not([data-label])) tbody,
  .data-table:has(td:not([data-label])) tr,
  .data-table:has(td:not([data-label])) td,
  .article-table:has(td:not([data-label])) tbody,
  .article-table:has(td:not([data-label])) tr,
  .article-table:has(td:not([data-label])) td { display: revert; }
  .blog-table:has(td:not([data-label])) td::before,
  .data-table:has(td:not([data-label])) td::before,
  .article-table:has(td:not([data-label])) td::before { content: none; }
  .blog-table-wrap:has(td:not([data-label])) {
    overflow-x: auto;
    background:
      linear-gradient(to right, var(--color-bg) 30%, rgba(20, 36, 28, 0)) left center / 12px 100% no-repeat,
      linear-gradient(to left,  var(--color-bg) 30%, rgba(20, 36, 28, 0)) right center / 12px 100% no-repeat;
    background-attachment: local, local;
  }
}

/* Anchor-link offset — prevent sticky header from hiding heading targets
   when readers click in-page anchor links or use back/forward navigation. */
.blog-article-header h1,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h2[id],
.blog-article-content h3[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* Opaque inline callout on dark theme — fix transparent bleed-through
   that made the .blog-callout box look like an overlap artifact. */
[data-theme="dark"] .blog-callout {
  background: var(--color-bg-light);
  border-left-color: var(--color-green);
  color: var(--color-text);
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Photo Gallery Grid
   =========================== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: var(--space-xl);
}

.photo-grid-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--color-surface);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.photo-grid-item.photo-grid-wide {
  grid-column: span 2;
}

.photo-grid-item picture,
.photo-grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  transition: transform 0.4s ease;
}

.photo-grid-item:hover img {
  transform: scale(1.03);
}

.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 0.85rem;
  padding: 1.5rem 1rem 0.75rem;
  font-family: var(--font-body);
}

/* Hero with background image */
.hero-with-image {
  min-height: 520px;
}

@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
  .photo-grid-item.photo-grid-wide {
    grid-column: span 1;
  }
  .hero-with-image {
    min-height: 400px;
  }
}

/* ===========================
   Split Sections (image + content)
   =========================== */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.split-section.split-reverse {
  direction: rtl;
}
.split-section.split-reverse > * {
  direction: ltr;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  aspect-ratio: 4/3;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.split-image-rounded img {
  border-radius: 16px;
}

.split-content h2 {
  margin-top: 0;
}

.split-intro {
  color: var(--color-text-muted, #555);
  margin-bottom: 1.5rem;
}

/* Vertical steps inside split */
.steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.steps-vertical .step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}

.steps-vertical .step-number {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.steps-vertical .step h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.steps-vertical .step p {
  margin: 0;
  font-size: 0.92rem;
}

/* 2-col grid inside split */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.split-content-cards .card {
  padding: 1.25rem;
}

/* Area tags left-aligned */
.area-tags-left {
  justify-content: flex-start;
}

/* ===========================
   Power Outage Full-Width Strip
   =========================== */
.outage-strip {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem;
  text-align: center;
  color: #fff;
}

.outage-strip-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.outage-strip-content h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

.outage-strip-content p {
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
  line-height: 1.7;
}

/* Responsive */
@media (max-width: 900px) {
  .split-section,
  .split-section.split-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .split-image {
    order: -1;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .area-tags-left {
    justify-content: center;
  }
}


/* Quick Answer Box */
.quick-answer {
  background: var(--color-bg);
  border-left: 4px solid var(--color-accent-hover);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--color-text);
}
.quick-answer strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-hover);
  margin-bottom: 0.35rem;
}


/* ==========================================================================
   Photo slots
   --------------------------------------------------------------------------
   Every slot below is an intentional design element while it is empty: a
   framed panel carrying the palette gradient and a single accent rule. When
   the real photography arrives, drop the file into /img/ and uncomment the
   matching rule. Nothing needs to change in the HTML.
   Search queries and subjects: docs/photo-shopping-list.md
   ========================================================================== */

.photo-slot {
  position: relative;
  display: block;
  width: 100%;
  margin: var(--space-xl) 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-primary);
  background-image: linear-gradient(122deg,
      var(--color-primary-dark) 0%,
      var(--color-primary) 46%,
      var(--color-primary-light) 100%);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}

/* A soft accent bloom in one corner, so an empty slot reads as a composed
   panel rather than a missing image. */
.photo-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 18%, var(--color-accent-soft) 0%, transparent 58%),
    radial-gradient(ellipse at 12% 88%, var(--color-accent-veil) 0%, transparent 52%);
  pointer-events: none;
}

/* Inset hairline frame. */
.photo-slot::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--radius-lg) - 6px);
  pointer-events: none;
}

/* Single accent rule, bottom-left — the one deliberate mark in the frame. */
.photo-slot-rule {
  position: absolute;
  left: 28px;
  bottom: 26px;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0.9;
}

.photo-slot-wide { aspect-ratio: 21 / 9; }

@media (max-width: 640px) {
  .photo-slot { aspect-ratio: 4 / 3; }
  .photo-slot-rule { left: 20px; bottom: 20px; width: 42px; }
}

/*
   ---- FIGURE PHOTO SLOTS ------------------------------------------------
   Uncomment a rule and point it at the delivered file. The gradient stays as
   the fallback background-color underneath, so a slow or failed image load
   never shows a blank box.

.photo-slot[data-slot="svc-renovations"] { background-image: url("/img/svc-renovations.jpg"); }
.photo-slot[data-slot="svc-custom-builds"] { background-image: url("/img/svc-custom-builds.jpg"); }
.photo-slot[data-slot="svc-cottage-specialty"] { background-image: url("/img/svc-cottage-specialty.jpg"); }
.photo-slot[data-slot="svc-outdoor-living"] { background-image: url("/img/svc-outdoor-living.jpg"); }
.photo-slot[data-slot="geo-muskoka"] { background-image: url("/img/geo-muskoka.jpg"); }
.photo-slot[data-slot="geo-bracebridge"] { background-image: url("/img/geo-bracebridge.jpg"); }
.photo-slot[data-slot="geo-muskoka-lakes"] { background-image: url("/img/geo-muskoka-lakes.jpg"); }
.photo-slot[data-slot="geo-parry-sound"] { background-image: url("/img/geo-parry-sound.jpg"); }
.photo-slot[data-slot="geo-huntsville"] { background-image: url("/img/geo-huntsville.jpg"); }
.photo-slot[data-slot="geo-gravenhurst"] { background-image: url("/img/geo-gravenhurst.jpg"); }
*/

/* ==========================================================================
   Breadcrumb list (shared component, kept from the source build)
   ========================================================================== */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.breadcrumb-list li { line-height: 1.4; }

.breadcrumb-list a { color: var(--color-accent); }

.breadcrumb-list [aria-current="page"] { color: var(--color-text-muted); }

/* ==========================================================================
   Small additions
   ========================================================================== */
.footer-entity {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
}

/* Cards sitting on a white section invert to the warm ground so they keep an
   edge without relying on the border alone. */
.section-light .card,
.section-light .area-tag,
.section-light .city-card {
  background: var(--color-bg);
}

.prose {
  max-width: 780px;
  margin: 0 auto;
}

.prose p {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.prose p:last-child { margin-bottom: 0; }

.prose h2 { margin-bottom: 1rem; }
.prose h2 + p { margin-top: 0; }
.prose h2:not(:first-child) { margin-top: 2rem; }

/* ==========================================================================
   Long-form post typography
   --------------------------------------------------------------------------
   The global reset zeroes margin and padding on everything, and every rule that
   put it back lived inside .prose — which generated posts never used. So an
   article's paragraphs ran together with no gap, its headings sat flush against
   the text above them, and its lists lost both their markers and their indent.
   This is the article's own type scale, applied to the wrapper renderPost emits.
   ========================================================================== */

.post .container {
  max-width: 720px;
}

/* ---- Header ---- */
.post-header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.post-meta {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.post-meta a {
  color: var(--color-accent);
  text-decoration: none;
}
.post-meta a:hover { text-decoration: underline; }

.post-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* ---- Body ---- */
.post-body {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--color-text);
}
.post-body > p {
  margin-bottom: 1.45em;
}
/* The opening paragraph carries the reader in, so it gets a little more air. */
.post-body > p:first-child {
  font-size: 1.16rem;
  line-height: 1.7;
  color: var(--color-text);
}
.post-body > p:last-child { margin-bottom: 0; }

.post-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.72rem;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin-top: 2.9rem;
  margin-bottom: 0.9rem;
}
.post-body h2:first-child { margin-top: 0; }

.post-body h3 {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

/* ---- Lists: the reset stripped both the marker and the indent ---- */
.post-body ul,
.post-body ol {
  margin: 0 0 1.45em;
  padding-left: 1.5rem;
}
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li {
  margin-bottom: 0.55em;
  padding-left: 0.3rem;
}
.post-body li:last-child { margin-bottom: 0; }
.post-body li::marker { color: var(--color-accent); }
.post-body li > p { margin-bottom: 0.55em; }

/* ---- Inline ---- */
.post-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.post-body a:hover { color: var(--color-accent-hover); }
.post-body strong { font-weight: 600; color: var(--color-text); }
.post-body em { font-style: italic; }

.post-body blockquote {
  margin: 1.8em 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-muted);
  font-style: italic;
}

/* A closing note set apart from the body — used for the general-information
   disclaimer at the foot of an article. */
.post-body > p:last-of-type > em:only-child {
  display: block;
  margin-top: 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* ---- Foot ---- */
.post-cta {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .post-body { font-size: 1rem; line-height: 1.75; }
  .post-body > p:first-child { font-size: 1.09rem; }
  .post-body h2 { font-size: 1.42rem; margin-top: 2.3rem; }
  .post-header { margin-bottom: var(--space-xl); }
}

.lead-note {
  max-width: 760px;
  margin: 1.5rem auto 0;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.btn-outline-dark {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

[data-theme="dark"] .btn-outline-dark {
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ==========================================================================
   Typography application
   --------------------------------------------------------------------------
   The display serif is reserved for h1, h2, the wordmark and large stat/CTA
   numerals. Nav links, buttons, form labels and small text stay on the body
   sans. This block is last in the file so it wins over the shared component
   rules that still reference --font-heading.
   ========================================================================== */

h1, h2,
.site-logo span,
.footer-logo span,
.cta-banner .amount,
.cta-banner h2,
.step-number,
.stat-number,
.thank-you h1,
.legal-page h1,
.legal-page h2,
.section-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.site-logo span,
.footer-logo span {
  font-size: 1.1875rem;
  letter-spacing: 0.005em;
}

.step-number,
.cta-banner .amount,
.stat-number {
  font-variant-numeric: lining-nums;
}

/* Never let the serif reach controls or fine print. */
.nav-links a,
.btn,
button,
input,
select,
textarea,
label,
.badge,
.area-tag,
.breadcrumb-list,
.faq-question,
.footer-col h4,
.footer-disclosure,
.footer-entity,
.cookie-text,
.last-updated,
.photo-caption {
  font-family: var(--font-body);
}

/* ==========================================================================
   Layout helpers used by the page templates
   ========================================================================== */
.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.city-card h3 {
  font-family: var(--font-body);
}

.mt-2xl { margin-top: var(--space-2xl); }

/* ==========================================================================
   Type that sits on a photograph
   --------------------------------------------------------------------------
   Same treatment as the County site, and needed for the same reason: the
   accent word in a hero headline and the badge above it were dark colours
   being used as light-on-dark type. Measured against the real background
   under them, glyphs excluded, the accent ran 2.60:1 and the badge 2.77:1
   against thresholds of 3.0 and 4.5.

   Scoped to .hero-photo, so plain heroes and the rest of the site are
   untouched. The badge gets a solid pill because at 13px no colour reaches
   4.5:1 over an arbitrary photograph.
   ========================================================================== */
.hero-photo h1 .accent {
  color: #E6D6C0;
}

.hero-photo .badge {
  background: rgba(10, 13, 14, 0.84);
  color: #E6D6C0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ==========================================================================
   Disclosure — "the detail, if you want it"
   --------------------------------------------------------------------------
   Native <details>. No JS, works with scripting off, keyboard and screen
   reader accessible without added ARIA, and the closed text stays in the DOM
   so search engines and AI crawlers still read it. Folding depth away costs
   nothing in ranking; it only removes the obligation to scroll past it.
   ========================================================================== */
.detail {
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0 0;
}

.detail > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail > summary::-webkit-details-marker { display: none; }

.detail > summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.detail[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.detail > summary:hover { color: var(--color-accent-hover); }

.detail > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.detail-body { padding-bottom: var(--space-md); }

.detail-body p {
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: 1rem;
  max-width: 68ch;
}

.detail-body p:last-child { margin-bottom: 0; }

/* A fact worth stopping on, used to break long reading runs. */
.keynote {
  border-left: 3px solid var(--color-accent);
  padding: 0.25rem 0 0.25rem var(--space-lg);
  margin: var(--space-xl) 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

@media (max-width: 640px) {
  .keynote { padding-left: var(--space-md); margin: var(--space-lg) 0; }
}


/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The stylesheet had 27 transitions and 24 transforms, every one of them on
   :hover — so on a phone, where there is no hover, nothing ever moved. That is
   what reads as static.

   Deliberately restrained: a short rise as sections arrive, and a slow scale
   on hero photographs. Opacity and transform only, so it composites on the GPU
   and holds frame rate. Anyone who has asked their system for less motion gets
   none of it.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Stagger cards within a revealed row so they arrive as a group rather than
     as one block. Capped at six; beyond that the last card waits too long. */
  .reveal.is-visible > .card:nth-child(1) { transition-delay: 0ms; }
  .reveal.is-visible > .card:nth-child(2) { transition-delay: 70ms; }
  .reveal.is-visible > .card:nth-child(3) { transition-delay: 140ms; }
  .reveal.is-visible > .card:nth-child(4) { transition-delay: 210ms; }

  /* A hero photograph settles slowly instead of sitting dead still. 8s, once,
     no loop — felt rather than watched. */
  .hero-photo {
    animation: heroSettle 8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes heroSettle {
    from { background-size: 108% auto, cover; }
    to   { background-size: 100% auto, cover; }
  }
}

/* Nothing above applies without the media query, so a reduced-motion visitor
   sees the finished state immediately. Belt and braces for older engines: */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero-photo { animation: none; }
}


/* In dark mode the accent is lightened so it reads as text on a dark ground,
   which makes white button text fail on it — 3.39:1 and 2.24:1 measured. A
   light button takes dark text; that is the convention and it is what passes. */
[data-theme="dark"] .btn-primary {
  color: var(--color-bg);
}

[data-theme="dark"] .btn-primary:hover {
  color: var(--color-bg);
}


/* The CTA gradient is built from --color-primary, which the dark theme does not
   redefine — so in dark mode it rendered as a light-theme green slab, 1.76:1
   against the page at one corner and 3.60:1 at the other. That uneven wash is
   what reads as a lopsided card. A panel that sits consistently above the page,
   with the orange button doing the work of drawing the eye. */
[data-theme="dark"] .cta-banner {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-border);
}

/* BEGIN GENERATED IMAGE RULES */
/* Written by scripts/generate-images.js — do not edit by hand. Re-run the
   script to change what is here; anything added inside these markers is lost. */

/* Figure slots still awaiting a photograph — hidden so they do not show as
   empty boxes. Drop the file into img/ and re-run; the rule goes away. */
.photo-slot[data-slot="svc-renovations"],
.photo-slot[data-slot="svc-custom-builds"],
.photo-slot[data-slot="svc-cottage-specialty"],
.photo-slot[data-slot="svc-outdoor-living"],
.photo-slot[data-slot="geo-muskoka"],
.photo-slot[data-slot="geo-bracebridge"],
.photo-slot[data-slot="geo-muskoka-lakes"],
.photo-slot[data-slot="geo-parry-sound"],
.photo-slot[data-slot="geo-huntsville"],
.photo-slot[data-slot="geo-gravenhurst"],
.photo-slot[data-slot="geo-simcoe-county"],
.photo-slot[data-slot="geo-barrie"],
.photo-slot[data-slot="geo-orillia"],
.photo-slot[data-slot="geo-oro-medonte"],
.photo-slot[data-slot="geo-severn"],
.photo-slot[data-slot="geo-innisfil"] { display: none; }

.hero-photo[data-slot="home-hero"] {
  background-image: linear-gradient(180deg, rgba(18, 30, 24, 0.34) 0%, rgba(18, 30, 24, 0.26) 55%, rgba(18, 30, 24, 0.44) 100%), url("/img/home-hero.jpg");
  background-image: linear-gradient(180deg, rgba(18, 30, 24, 0.34) 0%, rgba(18, 30, 24, 0.26) 55%, rgba(18, 30, 24, 0.44) 100%), image-set(url("/img/home-hero.webp") type("image/webp"), url("/img/home-hero.jpg") type("image/jpeg"));
}

/* On a filled hero, ::after (the plus-motif texture) is dropped and ::before is
   repurposed from an accent bloom into the scrim that sits behind the type. */
.hero-photo[data-slot="home-hero"]::after { display: none; }
.hero-photo[data-slot="home-hero"]::before {
  background: radial-gradient(ellipse 64% 60% at 50% 44%, rgba(8, 16, 12, 0.74) 0%, rgba(8, 16, 12, 0.52) 42%, rgba(8, 16, 12, 0.16) 70%, rgba(8, 16, 12, 0) 84%);
}
/* END GENERATED IMAGE RULES */