/* ==========================================================================
   County Cottage Builds — Main Stylesheet
   Palette: primary #34433D · accent #A65D3D · ground #F8F5EF
   Fonts: Inter (body) · Cormorant Garamond (display: h1, h2, wordmark, stat numerals)
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
  /* Colors — Light Mode */
  --color-primary:      #34433D;
  --color-primary-dark: #222D28;
  --color-primary-light:#4A5D54;
  --color-accent:       #A65D3D;
  --color-accent-hover: #8B4B2F;
  --color-bg:           #F8F5EF;
  --color-surface:      #FFFFFF;
  --color-text:         #221F1B;
  --color-text-muted:   #635D54;
  --color-border:       #E5DFD4;

  /* Derived tints */
  --color-accent-soft:  rgba(166, 93, 61, 0.12);
  --color-accent-veil:  rgba(166, 93, 61, 0.06);
  --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: 'Cormorant Garamond', 'Hoefler Text', Constantia, Georgia, 'Times New Roman', 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:            #16150F;
  --color-surface:       #1F1E17;
  --color-text:          #F1EDE5;
  --color-text-muted:    #A39C90;
  --color-border:        #302E25;
  --color-primary-light: #5E7368;
  --color-accent:        #A65D3D;
  --color-accent-hover:  #8B4B2F;
  --color-accent-soft:   rgba(166, 93, 61, 0.16);
  --color-accent-veil:   rgba(166, 93, 61, 0.08);

  --color-bg-light:      var(--color-surface);
  --color-card:          var(--color-surface);
  --color-surface-2:     #302E25;
}

/* --- 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;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.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="pec-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/pec-hero.jpg"); }
.hero-photo[data-slot="picton-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/picton-hero.jpg"); }
.hero-photo[data-slot="wellington-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/wellington-hero.jpg"); }
.hero-photo[data-slot="bloomfield-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/bloomfield-hero.jpg"); }
.hero-photo[data-slot="hillier-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/hillier-hero.jpg"); }
.hero-photo[data-slot="ameliasburgh-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/ameliasburgh-hero.jpg"); }
*/

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(166, 93, 61, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(166, 93, 61, 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(166, 93, 61, 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(166, 93, 61, 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: #e74c3c;
}

.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(166, 93, 61, 0.18);
  outline: none;
}

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

.form-group input.error,
.form-group select.error {
  border-color: #e74c3c;
  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: #e74c3c;
  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(34, 45, 40, 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);
}

/* --- 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);
  }
}

/* ==========================================================================
   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);
}

/* 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: #16150F;
}

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

/* 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(34, 45, 40, 0)) left center / 12px 100% no-repeat,
      linear-gradient(to left,  var(--color-bg) 30%, rgba(34, 45, 40, 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: rgba(166, 93, 61, 0.14);
}
.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-prince-edward-county"] { background-image: url("/img/geo-prince-edward-county.jpg"); }
.photo-slot[data-slot="geo-picton"] { background-image: url("/img/geo-picton.jpg"); }
.photo-slot[data-slot="geo-wellington"] { background-image: url("/img/geo-wellington.jpg"); }
.photo-slot[data-slot="geo-bloomfield"] { background-image: url("/img/geo-bloomfield.jpg"); }
.photo-slot[data-slot="geo-hillier"] { background-image: url("/img/geo-hillier.jpg"); }
.photo-slot[data-slot="geo-ameliasburgh"] { background-image: url("/img/geo-ameliasburgh.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: 860px;
  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; }

.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); }