/* ===================================
   ZIPIBU — MAIN STYLESHEET
   Monochrome Plus design concept
   Forest green palette + amber accent
   =================================== */


:root {
  
  --color-primary-darkest: #0d1f14;
  --color-primary-dark: #1a3a24;
  --color-primary-mid: #2d5a3d;
  --color-primary-base: #3d7a52;
  --color-primary-light: #6aaa82;
  --color-primary-pale: #b8d9c5;
  --color-primary-ghost: #e8f4ec;
  --color-primary-whisper: #f3f9f5;

  
  --color-accent: #d4821a;
  --color-accent-hover: #b86e12;
  --color-accent-light: #f5e6d0;

  
  --color-text-primary: #111c15;
  --color-text-secondary: #3a5245;
  --color-text-muted: #7a9585;
  --color-text-on-dark: #eef7f1;
  --color-surface-white: #f9fdf9;
  --color-surface-light: #f0f7f2;
  --color-surface-mid: #dceee3;
  --color-border: #c5dece;
  --color-border-subtle: #e0ede5;

  
  --color-season-spring: #6aaa82;
  --color-season-summer: #d4821a;
  --color-season-autumn: #8b4513;
  --color-season-winter: #4a7fa5;

  
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;

  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --text-md: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --text-hero: clamp(3rem, 2.5rem + 3vw, 5.5rem);

  
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  
  --shadow-xs: 0 1px 3px rgba(13,31,20,0.06), 0 1px 2px rgba(13,31,20,0.04);
  --shadow-sm: 0 2px 6px rgba(13,31,20,0.08), 0 1px 3px rgba(13,31,20,0.05);
  --shadow-md: 0 4px 16px rgba(13,31,20,0.1), 0 2px 6px rgba(13,31,20,0.06);
  --shadow-lg: 0 8px 32px rgba(13,31,20,0.12), 0 4px 12px rgba(13,31,20,0.08);
  --shadow-xl: 0 16px 48px rgba(13,31,20,0.16), 0 8px 20px rgba(13,31,20,0.1);
  --shadow-accent: 0 4px 20px rgba(212,130,26,0.3);

  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  
  --nav-height: 70px;
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 0;
}

body.mobile-nav-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

address {
  font-style: normal;
}


.section-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}


.section-eyebrow-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-header-block {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.section-main-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.section-supporting-paragraph {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ===================================
   NAVIGATION
   =================================== */
.main-navigation-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-surface-white);
  height: var(--nav-height);
  box-shadow: none;
  transition: box-shadow var(--transition-base);
}

.navigation-inner-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

.navigation-logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.navigation-logo-image {
  height: 36px;
  width: auto;
}

.navigation-desktop-links-list {
  display: none;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
  margin-right: var(--space-6);
}

.navigation-desktop-link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition-base);
}

.navigation-desktop-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.navigation-desktop-link:hover {
  color: var(--color-primary-mid);
}

.navigation-desktop-link:hover::after,
.navigation-link-active::after {
  width: 100%;
}

.navigation-link-active {
  color: var(--color-primary-dark);
}

.navigation-cta-button {
  display: none;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.navigation-cta-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}

.navigation-hamburger-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
}

.navigation-hamburger-button:hover {
  background-color: var(--color-surface-light);
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ===================================
   MOBILE BOTTOM TAB BAR
   =================================== */
.mobile-bottom-tab-navigation {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: var(--color-surface-white);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -4px 20px rgba(13,31,20,0.1), 0 -1px 4px rgba(13,31,20,0.06);
  height: 64px;
  justify-content: space-around;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  transition: color var(--transition-base), background-color var(--transition-base);
  border-radius: var(--radius-sm);
  min-height: 44px;
}

.mobile-tab-item:hover {
  color: var(--color-primary-mid);
  background-color: var(--color-primary-ghost);
}

.mobile-tab-item-active {
  color: var(--color-accent);
}

.mobile-tab-icon {
  font-size: 1.1rem;
}

.mobile-tab-label {
  font-size: 0.65rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===================================
   HERO SECTION
   =================================== */
.homepage-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: 0;
}

.hero-split-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--color-primary-dark);
  transform: translateX(-100%);
  animation: heroSplitLeftSlide 1s cubic-bezier(0.77,0,0.175,1) 0.1s forwards;
  z-index: 1;
}

.hero-split-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform: translateX(100%);
  animation: heroSplitRightSlide 1s cubic-bezier(0.77,0,0.175,1) 0.1s forwards;
  z-index: 1;
  overflow: hidden;
}

.hero-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@keyframes heroSplitLeftSlide {
  to { transform: translateX(0); }
}
@keyframes heroSplitRightSlide {
  to { transform: translateX(0); }
}

.hero-content-overlay {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding-top: var(--nav-height);
  animation: heroContentFadeIn 0.8s ease 1.1s both;
}

@keyframes heroContentFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content-inner {
  max-width: 680px;
  padding: var(--space-12) var(--space-6);
  margin-left: max(var(--space-6), calc((100vw - 1280px) / 2 + var(--space-6)));
}

.hero-eyebrow-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary-pale);
  background-color: rgba(255,255,255,0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  margin-bottom: var(--space-5);
  backdrop-filter: blur(4px);
}

.hero-display-heading {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 800;
  color: var(--color-text-on-dark);
  line-height: 1.05;
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-typed-text-wrapper {
  display: block;
  color: var(--color-accent);
}

.hero-supporting-text {
  font-size: var(--text-md);
  color: var(--color-primary-pale);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.hero-action-buttons-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-primary-action-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  min-height: 48px;
}

.hero-primary-action-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}

.hero-secondary-action-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-on-dark);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: background-color var(--transition-base), border-color var(--transition-base);
  min-height: 48px;
  backdrop-filter: blur(4px);
}

.hero-secondary-action-button:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.7);
}

/* ===================================
   INTRO STRIP
   =================================== */
.homepage-intro-strip-section {
  padding: var(--space-16) 0;
  background-color: var(--color-surface-white);
}

.intro-strip-inner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.intro-strip-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.intro-strip-body-text {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.intro-strip-stat-boxes-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.intro-stat-single-box {
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

.intro-stat-icon {
  font-size: 1.5rem;
  color: var(--color-primary-mid);
}

.intro-stat-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* ===================================
   BENTO GRID
   =================================== */
.homepage-featured-content-section {
  padding: var(--space-16) 0;
  background-color: var(--color-surface-light);
}

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

.bento-card-item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.bento-card-item:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}

.bento-card-size-large {
  min-height: 380px;
}

.bento-card-size-medium {
  min-height: 300px;
}

.bento-card-size-small {
  min-height: 200px;
  background-color: var(--color-primary-ghost);
}

.bento-card-background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.bento-card-item:hover .bento-card-background-image {
  transform: scale(1.04);
}

.bento-card-content-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,31,20,0.92) 0%, rgba(13,31,20,0.5) 50%, rgba(13,31,20,0.1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  gap: var(--space-2);
}

.bento-card-city-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: rgba(212,130,26,0.15);
  border: 1px solid rgba(212,130,26,0.4);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  width: fit-content;
  margin-bottom: var(--space-1);
}

.bento-card-article-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-on-dark);
  line-height: 1.25;
}

.bento-card-article-excerpt {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento-card-read-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-top: var(--space-2);
  transition: gap var(--transition-base);
}

.bento-card-read-link:hover {
  gap: var(--space-3);
}

.bento-card-tip-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.bento-tip-icon {
  font-size: 1.8rem;
  color: var(--color-primary-mid);
}

.bento-tip-season-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.bento-tip-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ===================================
   JOURNEY SECTION
   =================================== */
.homepage-journey-section {
  padding: var(--space-20) 0;
  background-color: var(--color-primary-dark);
}

.homepage-journey-section .section-main-heading {
  color: var(--color-text-on-dark);
}

.homepage-journey-section .section-eyebrow-label {
  color: var(--color-primary-pale);
}

.journey-steps-visual-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
}

.journey-step-item {
  display: grid;
  grid-template-columns: 56px 2px 1fr;
  gap: 0 var(--space-5);
  align-items: start;
}

.journey-step-number-circle {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-mid);
  border: 2px solid var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-on-dark);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.journey-step-number-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent-hover);
}

.journey-step-connector-line {
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary-mid));
  align-self: stretch;
  min-height: 60px;
  margin-top: 56px;
  margin-left: 0;
  grid-column: 2;
  grid-row: 1;
}

.journey-step-content-block {
  padding: var(--space-3) 0 var(--space-10);
  grid-column: 3;
  grid-row: 1;
}

.journey-step-item-final .journey-step-content-block {
  padding-bottom: 0;
}

.journey-step-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-2);
}

.journey-step-body-text {
  font-size: var(--text-base);
  color: var(--color-primary-pale);
  line-height: 1.65;
}

/* ===================================
   SEASONAL SNAPSHOT
   =================================== */
.homepage-seasonal-snapshot-section {
  padding: var(--space-20) 0;
  background-color: var(--color-surface-white);
}

.seasonal-cards-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.seasonal-card-item {
  background-color: var(--color-surface-light);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.seasonal-card-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.seasonal-card-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.seasonal-card-spring { background-color: rgba(106,170,130,0.15); color: var(--color-season-spring); }
.seasonal-card-summer { background-color: rgba(212,130,26,0.15); color: var(--color-season-summer); }
.seasonal-card-autumn { background-color: rgba(139,69,19,0.15); color: var(--color-season-autumn); }
.seasonal-card-winter { background-color: rgba(74,127,165,0.15); color: var(--color-season-winter); }

.seasonal-card-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.seasonal-card-body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* ===================================
   FAQ ACCORDION
   =================================== */
.homepage-faq-section {
  padding: var(--space-20) 0;
  background-color: var(--color-surface-light);
}

.faq-accordion-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-accordion-item-card {
  background-color: var(--color-surface-white);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}

.faq-accordion-item-card:hover {
  box-shadow: var(--shadow-sm);
}

.faq-accordion-question-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  gap: var(--space-4);
  transition: background-color var(--transition-base);
  min-height: 64px;
}

.faq-accordion-question-button:hover {
  background-color: var(--color-primary-ghost);
}

.faq-accordion-question-button[aria-expanded="true"] {
  background-color: var(--color-primary-ghost);
}

.faq-question-text {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary-dark);
  flex: 1;
}

.faq-chevron-icon {
  color: var(--color-accent);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq-accordion-question-button[aria-expanded="true"] .faq-chevron-icon {
  transform: rotate(180deg);
}

.faq-accordion-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow) cubic-bezier(0.4,0,0.2,1), padding var(--transition-base);
}

.faq-accordion-answer-panel.faq-panel-open {
  max-height: 500px;
}

.faq-answer-body-text {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
}

/* ===================================
   FAQ FLIP CARDS
   =================================== */
.homepage-faq-cards-section {
  padding: var(--space-20) 0;
  background-color: var(--color-surface-white);
}

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

.faq-flip-card-item {
  height: 180px;
  cursor: pointer;
  perspective: 1000px;
}

.faq-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  border-radius: var(--radius-lg);
}

.faq-flip-card-item.faq-card-flipped .faq-flip-card-inner {
  transform: rotateY(180deg);
}

.faq-flip-card-front,
.faq-flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  gap: var(--space-3);
  text-align: center;
}

.faq-flip-card-front {
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.faq-flip-card-back {
  background-color: var(--color-primary-dark);
  transform: rotateY(180deg);
  box-shadow: var(--shadow-md);
}

.faq-card-front-icon {
  font-size: 1.6rem;
  color: var(--color-primary-mid);
}

.faq-card-front-question {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.35;
}

.faq-card-back-answer {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.6;
}

/* ===================================
   RECENT ARTICLES
   =================================== */
.homepage-recent-articles-section {
  padding: var(--space-20) 0;
  background-color: var(--color-surface-light);
}

.recent-articles-three-column-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.recent-article-card-item {
  background-color: var(--color-surface-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
}

.recent-article-card-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.recent-article-image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.recent-article-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.recent-article-card-item:hover .recent-article-thumbnail-image {
  transform: scale(1.05);
}

.recent-article-season-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.recent-article-badge-autumn {
  background-color: rgba(139,69,19,0.85);
  color: #fff;
}

.recent-article-badge-summer {
  background-color: rgba(212,130,26,0.9);
  color: #fff;
}

.recent-article-badge-winter {
  background-color: rgba(74,127,165,0.9);
  color: #fff;
}

.recent-article-text-content {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.recent-article-city-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.recent-article-title-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.3;
}

.recent-article-excerpt-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;
}

.recent-article-read-more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-top: var(--space-2);
  transition: gap var(--transition-base);
  align-self: flex-start;
}

.recent-article-read-more-link:hover {
  gap: var(--space-3);
}

/* ===================================
   CTA BAND
   =================================== */
.homepage-cta-band-section {
  padding: var(--space-16) 0;
  background: linear-gradient(135deg, var(--color-primary-darkest) 0%, var(--color-primary-dark) 60%, var(--color-primary-mid) 100%);
}

.cta-band-inner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.cta-band-main-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text-on-dark);
  line-height: 1.2;
}

.cta-band-supporting-text {
  font-size: var(--text-md);
  color: var(--color-primary-pale);
  line-height: 1.65;
  max-width: 560px;
}

.cta-band-action-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  min-height: 52px;
  white-space: nowrap;
}

.cta-band-action-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}

/* ===================================
   FOOTER
   =================================== */
.main-site-footer {
  background-color: var(--color-primary-darkest);
  padding: var(--space-16) 0 0;
}

.footer-columns-grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo-image {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-4);
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-brand-description-text {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.65;
  margin-bottom: var(--space-5);
  max-width: 300px;
}

.footer-contact-address-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-contact-address-block p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
}

.footer-contact-address-block a {
  color: var(--color-primary-pale);
  transition: color var(--transition-base);
}

.footer-contact-address-block a:hover {
  color: var(--color-accent);
}

.footer-contact-icon {
  color: var(--color-accent);
  width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-column-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-4);
}

.footer-navigation-links-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav-link-item {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  transition: color var(--transition-base), padding-left var(--transition-base);
  opacity: 0.8;
}

.footer-nav-link-item:hover {
  color: var(--color-accent);
  padding-left: var(--space-2);
  opacity: 1;
}

.footer-latest-posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-latest-post-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background-color: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.footer-latest-post-item:hover {
  background-color: rgba(255,255,255,0.08);
  border-color: rgba(212,130,26,0.3);
}

.footer-latest-post-city {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.footer-latest-post-title {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.4;
}

.footer-bottom-legal-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

.footer-copyright-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

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

.footer-legal-link-item {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.footer-legal-link-item:hover {
  color: var(--color-accent);
}

/* ===================================
   COOKIE CONSENT — SPLIT BANNER
   =================================== */
.cookie-consent-split-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: none;
  background-color: var(--color-surface-white);
  border-top: 2px solid var(--color-primary-mid);
  box-shadow: 0 -8px 32px rgba(13,31,20,0.18), 0 -2px 8px rgba(13,31,20,0.1);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.cookie-consent-split-banner.cookie-banner-visible {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
}

.cookie-consent-left-panel {
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-primary-ghost);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cookie-consent-right-panel {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cookie-consent-heading {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.cookie-consent-explanation-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.cookie-consent-policy-link {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent-toggles-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cookie-consent-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cookie-toggle-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cookie-toggle-category-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.cookie-toggle-category-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.cookie-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-base);
}

.cookie-toggle-switch-locked {
  background-color: var(--color-primary-mid);
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-checkbox:checked + .cookie-toggle-knob,
.cookie-toggle-switch-locked .cookie-toggle-knob {
  transform: translateX(20px);
}

.cookie-toggle-switch:has(.cookie-toggle-checkbox:checked) {
  background-color: var(--color-primary-mid);
}

.cookie-toggle-knob {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-base);
}

.cookie-consent-action-buttons-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie-consent-accept-all-button {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 36px;
  cursor: pointer;
}

.cookie-consent-accept-all-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
}

.cookie-consent-save-prefs-button {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  background-color: var(--color-primary-mid);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
  min-height: 36px;
  cursor: pointer;
}

.cookie-consent-save-prefs-button:hover {
  background-color: var(--color-primary-dark);
}

.cookie-consent-reject-button {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  background-color: transparent;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  transition: color var(--transition-base), border-color var(--transition-base);
  min-height: 36px;
  cursor: pointer;
}

.cookie-consent-reject-button:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
}

/* ===================================
   INNER PAGE HERO
   =================================== */
.inner-page-hero-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-mid) 100%);
  padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16);
}

.inner-hero-content-wrapper {
  max-width: 720px;
}

.inner-page-hero-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text-on-dark);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.inner-page-hero-subtext {
  font-size: var(--text-md);
  color: var(--color-primary-pale);
  line-height: 1.65;
  max-width: 580px;
}

/* ===================================
   WHY THIS EXISTS PAGE
   =================================== */
.why-exists-main-content-section {
  padding: var(--space-20) 0;
}

.why-exists-two-column-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.why-exists-section-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.why-exists-section-heading:first-child {
  margin-top: 0;
}

.why-exists-body-paragraph {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.why-exists-principles-card {
  background-color: var(--color-primary-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-5);
}

.why-exists-principles-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-5);
}

.why-exists-principles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.why-exists-principle-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.5;
}

.why-exists-check-icon {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.why-exists-cities-card {
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.why-exists-cities-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

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

.why-exists-city-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.why-exists-city-icon {
  color: var(--color-accent);
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.why-exists-contact-prompt-card {
  background-color: var(--color-accent-light);
  border: 1px solid rgba(212,130,26,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.why-exists-contact-prompt-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.why-exists-contact-link-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 44px;
}

.why-exists-contact-link-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
}

.why-exists-image-band-section {
  padding: 0 0 var(--space-20);
}

.why-exists-image-band-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.why-exists-image-band-item {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.why-exists-band-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.why-exists-image-band-item:hover .why-exists-band-image {
  transform: scale(1.03);
}

.why-exists-image-caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background-color: var(--color-surface-light);
  font-style: italic;
}

/* ===================================
   PRINTABLE GUIDES PAGE
   =================================== */
.guides-format-explainer-section {
  padding: var(--space-16) 0;
  background-color: var(--color-surface-white);
}

.guides-format-three-points-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.guides-format-point-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.guides-format-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-primary-mid);
}

.guides-format-point-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.guides-format-point-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.guides-listing-grid-section {
  padding: var(--space-4) 0 var(--space-20);
  background-color: var(--color-surface-light);
}

.guides-cards-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.guide-card-item {
  background-color: var(--color-surface-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.guide-card-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.guide-card-featured {
  border: 2px solid var(--color-accent);
}

.guide-card-header-band {
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guide-card-header-kampinos { background-color: var(--color-primary-dark); }
.guide-card-header-krakow { background-color: var(--color-primary-mid); }
.guide-card-header-wroclaw { background-color: #3a5c45; }
.guide-card-header-poznan { background-color: #4a7a5c; }
.guide-card-header-pttk { background-color: var(--color-primary-darkest); }

.guide-card-city-tag {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-pale);
}

.guide-card-season-tag {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
}

.guide-card-season-autumn { background-color: rgba(139,69,19,0.6); color: #fff; }
.guide-card-season-summer { background-color: rgba(212,130,26,0.7); color: #fff; }
.guide-card-season-all { background-color: rgba(106,170,130,0.5); color: var(--color-primary-darkest); }

.guide-card-body-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guide-card-title-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.25;
}

.guide-card-description-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.guide-card-meta-details-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.guide-card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
}

.guide-card-packing-preview {
  background-color: var(--color-primary-ghost);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.guide-card-packing-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.guide-card-packing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.packing-tag-item {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-mid);
  background-color: var(--color-surface-white);
  border: 1px solid var(--color-border);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
}

.guide-card-download-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  align-self: flex-start;
  min-height: 44px;
}

.guide-card-download-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}


.pttk-explainer-content-section {
  padding: var(--space-20) 0;
  background-color: var(--color-surface-white);
}

.pttk-explainer-inner-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

.pttk-explainer-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}

.pttk-explainer-body-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.pttk-colour-code-card {
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.pttk-colour-card-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-5);
}

.pttk-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.pttk-status-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.pttk-status-green .pttk-status-dot { background-color: #2e7d32; }
.pttk-status-yellow .pttk-status-dot { background-color: #f9a825; }
.pttk-status-red .pttk-status-dot { background-color: #c62828; }
.pttk-status-grey .pttk-status-dot { background-color: #9e9e9e; }

.pttk-status-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pttk-status-text-group strong {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.pttk-status-text-group span {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* ===================================
   CITY GUIDES PAGE
   =================================== */
.city-guides-filter-tab-section {
  padding: var(--space-6) 0;
  background-color: var(--color-surface-white);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  top: var(--nav-height);
  z-index: 100;
}

.city-filter-tabs-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.city-filter-tabs-row::-webkit-scrollbar {
  display: none;
}

.city-filter-tab-button {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  white-space: nowrap;
  transition: all var(--transition-base);
  min-height: 40px;
  background-color: transparent;
}

.city-filter-tab-button:hover {
  border-color: var(--color-primary-mid);
  color: var(--color-primary-dark);
  background-color: var(--color-primary-ghost);
}

.city-filter-tab-active {
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary-dark);
}

.city-filter-tab-active:hover {
  background-color: var(--color-primary-mid);
  color: var(--color-text-on-dark);
}

.city-guides-main-content-section {
  padding: var(--space-12) 0 var(--space-20);
  background-color: var(--color-surface-light);
}

.city-guide-section-block {
  background-color: var(--color-surface-white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-8);
  transition: opacity var(--transition-base);
}

.city-guide-section-block.city-guide-block-hidden {
  display: none;
}

.city-guide-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-8) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.city-guide-city-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.city-guide-section-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.city-guide-download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base);
  min-height: 36px;
  flex-shrink: 0;
}

.city-guide-download-link:hover {
  background-color: var(--color-accent);
  color: #fff;
}

.city-guide-content-two-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8) var(--space-8);
}

.city-guide-body-paragraph {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.city-guide-subheading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.city-guide-info-card {
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.city-guide-info-card-heading {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.city-guide-info-card-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.city-guide-difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

.city-guide-difficulty-easy {
  background-color: rgba(106,170,130,0.15);
  color: var(--color-primary-mid);
  border: 1px solid rgba(106,170,130,0.3);
}

.city-guide-difficulty-moderate {
  background-color: rgba(212,130,26,0.12);
  color: var(--color-accent-hover);
  border: 1px solid rgba(212,130,26,0.3);
}

/* ===================================
   CONTACT PAGE
   =================================== */
.contact-main-content-section {
  padding: var(--space-16) 0;
}

.contact-two-column-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.contact-form-section-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.contact-form-intro-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.contact-form-element {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

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

.contact-form-field-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.contact-form-required-marker {
  color: var(--color-accent);
}

.contact-form-text-input,
.contact-form-select-input,
.contact-form-textarea-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
  min-height: 48px;
  appearance: none;
}

.contact-form-text-input:focus,
.contact-form-select-input:focus,
.contact-form-textarea-input:focus {
  border-color: var(--color-primary-mid);
  box-shadow: 0 0 0 3px rgba(61,122,82,0.15);
}

.contact-form-text-input::placeholder,
.contact-form-textarea-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.contact-form-textarea-input {
  resize: vertical;
  min-height: 140px;
}

.contact-form-select-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a9585' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.contact-form-privacy-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-form-checkbox-label-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.contact-form-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact-form-checkbox-custom-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-white);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.contact-form-checkbox-input:checked + .contact-form-checkbox-custom-box {
  background-color: var(--color-primary-mid);
  border-color: var(--color-primary-mid);
}

.contact-form-checkbox-input:checked + .contact-form-checkbox-custom-box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.contact-form-checkbox-label-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.contact-form-privacy-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form-error-message-display {
  font-size: var(--text-sm);
  color: #c62828;
  background-color: rgba(198,40,40,0.08);
  border: 1px solid rgba(198,40,40,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: none;
}

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

.contact-form-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  min-height: 52px;
  align-self: flex-start;
}

.contact-form-submit-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}

.contact-info-card-block {
  background-color: var(--color-primary-ghost);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.contact-info-card-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-5);
}

.contact-info-detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.contact-info-detail-row:last-child {
  margin-bottom: 0;
}

.contact-info-icon {
  color: var(--color-accent);
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-detail-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-info-detail-text-group strong {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.contact-info-detail-text-group span,
.contact-info-detail-text-group a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}

.contact-info-detail-text-group a:hover {
  color: var(--color-accent);
}

.contact-first-meeting-card-block {
  background-color: var(--color-primary-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.contact-first-meeting-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
}

.contact-first-meeting-body-text {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.contact-first-meeting-process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.contact-meeting-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-meeting-step-number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-meeting-step-text {
  font-size: var(--text-sm);
  color: var(--color-primary-pale);
  line-height: 1.5;
  padding-top: 4px;
}

.contact-map-section {
  padding: 0 0 var(--space-20);
}

.contact-map-heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.contact-map-subtext {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.contact-google-map-embed-container {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-subtle);
}

.contact-google-map-embed-container iframe {
  display: block;
}

/* ===================================
   THANKS PAGE
   =================================== */
.thanks-page-main-section {
  min-height: calc(100vh - var(--nav-height) - 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-height) + var(--space-16)) var(--space-6) var(--space-16);
}

.thanks-page-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
  max-width: 480px;
}

.thanks-checkmark-svg-container {
  width: 100px;
  height: 100px;
}

.thanks-checkmark-svg {
  width: 100%;
  height: 100%;
}

.thanks-checkmark-circle-path {
  stroke: var(--color-primary-mid);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  animation: drawCircle 0.7s ease-out 0.3s forwards;
}

.thanks-checkmark-tick-path {
  stroke: var(--color-accent);
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: drawTick 0.5s ease-out 1s forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes drawTick {
  to { stroke-dashoffset: 0; }
}

.thanks-text-content-block {
  animation: thanksTextFadeIn 0.6s ease 1.5s both;
}

@keyframes thanksTextFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.thanks-main-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

.thanks-supporting-text {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.thanks-homepage-return-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
  min-height: 48px;
}

.thanks-homepage-return-button:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}

/* ===================================
   LEGAL PAGES
   =================================== */
.legal-page-hero-section {
  background: linear-gradient(135deg, var(--color-primary-darkest) 0%, var(--color-primary-dark) 100%);
  padding: calc(var(--nav-height) + var(--space-12)) 0 var(--space-12);
}

.legal-hero-content-block {
  max-width: 760px;
}

.legal-page-main-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text-on-dark);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.legal-page-update-date {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-5);
}

.legal-page-intro-paragraph {
  font-size: var(--text-base);
  color: var(--color-primary-pale);
  line-height: 1.75;
}

.legal-page-intro-paragraph a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page-content-section {
  padding: var(--space-16) 0 var(--space-24);
}

.legal-content-document-wrapper {
  max-width: 860px;
}

.legal-section-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border-subtle);
}

.legal-section-heading:first-child {
  margin-top: 0;
}

.legal-section-heading-letter {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-ghost);
}

.legal-section-heading-letter:first-child {
  margin-top: 0;
}

.legal-section-heading-unnumbered {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.legal-section-heading-unnumbered:first-child {
  margin-top: 0;
}

.legal-section-heading-unnumbered::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.2em;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.legal-subsection-heading {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary-mid);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-content-document-wrapper p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.legal-content-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-left: var(--space-4);
}

.legal-content-list li {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  position: relative;
  padding-left: var(--space-5);
}

.legal-content-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.legal-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.legal-data-table thead {
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}

.legal-data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legal-data-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  line-height: 1.55;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-subtle);
}

.legal-data-table tbody tr:nth-child(even) {
  background-color: var(--color-primary-ghost);
}

.legal-data-table tbody tr:last-child td {
  border-bottom: none;
}

.legal-definition-list {
  margin-bottom: var(--space-5);
}

.legal-definition-term {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
}

.legal-definition-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-border);
}

.legal-contact-address-block {
  font-style: normal;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
  background-color: var(--color-primary-ghost);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border-subtle);
  margin-top: var(--space-3);
}

.legal-inline-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-base);
}

.legal-inline-link:hover {
  color: var(--color-accent-hover);
}

/* ===================================
   RESPONSIVE — TABLET (640px+)
   =================================== */
@media (min-width: 640px) {
  .bento-grid-layout-container {
    grid-template-columns: 1fr 1fr;
  }

  .bento-card-size-large {
    grid-column: span 2;
    min-height: 420px;
  }

  .seasonal-cards-grid-container {
    grid-template-columns: 1fr 1fr;
  }

  .faq-cards-responsive-grid {
    grid-template-columns: 1fr 1fr;
  }

  .recent-articles-three-column-grid {
    grid-template-columns: 1fr 1fr;
  }

  .guides-format-three-points-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-exists-image-band-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cookie-consent-split-banner.cookie-banner-visible {
    flex-direction: row;
    align-items: stretch;
    max-height: 280px;
  }

  .cookie-consent-left-panel {
    width: 45%;
    border-bottom: none;
    border-right: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
  }

  .cookie-consent-right-panel {
    flex: 1;
    overflow-y: auto;
  }

  .intro-strip-stat-boxes-group {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===================================
   RESPONSIVE — DESKTOP (1024px+)
   =================================== */
@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  .mobile-bottom-tab-navigation {
    display: none;
  }

  .navigation-desktop-links-list {
    display: flex;
  }

  .navigation-cta-button {
    display: inline-flex;
  }

  .navigation-hamburger-button {
    display: none;
  }

  .hero-content-inner {
    padding: var(--space-20) var(--space-6);
  }

  .intro-strip-inner-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bento-grid-layout-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }

  .bento-card-size-large {
    grid-column: span 2;
    min-height: 460px;
  }

  .bento-card-size-medium {
    min-height: 320px;
  }

  .bento-card-size-small {
    min-height: 240px;
  }

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

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

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

  .cta-band-inner-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cta-band-text-group {
    max-width: 600px;
  }

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

  .footer-bottom-legal-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .why-exists-two-column-layout {
    grid-template-columns: 1.4fr 1fr;
  }

  .pttk-explainer-inner-layout {
    grid-template-columns: 1.2fr 1fr;
  }

  .contact-two-column-layout {
    grid-template-columns: 1.2fr 1fr;
  }

  .city-guide-content-two-columns {
    grid-template-columns: 1.4fr 1fr;
  }

  .guides-cards-layout-grid {
    grid-template-columns: 1fr 1fr;
  }

  .guide-card-featured {
    grid-column: span 2;
  }

  .journey-steps-visual-container {
    padding: 0 var(--space-12);
  }

  .cookie-consent-split-banner.cookie-banner-visible {
    max-height: 220px;
  }
}

/* ===================================
   RESPONSIVE — WIDE (1280px+)
   =================================== */
@media (min-width: 1280px) {
  .section-container {
    padding: 0 var(--space-8);
  }
}

/* ===================================
   BODY PADDING FOR MOBILE TAB BAR
   =================================== */
@media (max-width: 1023px) {
  body {
    padding-bottom: 64px;
  }

  .main-site-footer {
    padding-bottom: calc(var(--space-4) + 64px);
  }
}

/* ===================================
   ACCESSIBILITY & FOCUS
   =================================== */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
  .main-navigation-container,
  .mobile-bottom-tab-navigation,
  .cookie-consent-split-banner,
  .homepage-cta-band-section {
    display: none !important;
  }

  body {
    padding: 0;
    color: #000;
  }
}