@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.woff2") format("woff2"), url("fonts/OpenSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.woff2") format("woff2"), url("fonts/OpenSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"), url("fonts/SpaceGrotesk-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-base: "Open Sans", sans-serif;
  --font-heading: "Space Grotesk", sans-serif;

  /* Base Backgrounds */
  --color-bg: #f9f9f9;
  --color-surface: #ffffff;
  --color-header: #1a1a1a;

  /* Accent Colors */
  --color-primary: #f94144; /* vibrant red-pink */
  --color-secondary: #577590; /* deep urban blue */
  --color-tertiary: #43aa8b; /* green-accent */

  /* Additional Accent Blocks */
  --color-accent-1: #f3722c; /* metro orange */
  --color-accent-2: #f9844a; /* light tangerine */
  --color-accent-3: #90be6d; /* leaf green */
  --color-accent-4: #277da1; /* ocean blue */

  /* Text Colors */
  --color-text: #222222;
  --color-muted: #577590;
  --color-link: var(--color-primary);

  /* Border and Shadow */
  --color-border: #43aa8b;
  --shadow-default: 0 2px 6px rgba(0, 0, 0, 0.06);

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-h1: 48px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-h4: 20px;
  --font-size-small: 14px;
}

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

html,
body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

* {
  margin-top: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
}

button {
  border: 0;
  cursor: pointer;
}

figure {
  margin: 0;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

blockquote {
  margin: 0;
}

.aspect-3-4 {
  aspect-ratio: 3/4;
}

.aspect-4-3 {
  aspect-ratio: 4/3;
}

.aspect-16-9 {
  aspect-ratio: 16/9;
}

.aspect-1-1 {
  aspect-ratio: 1/1;
}

/* Header */
.header {
  background: var(--color-header);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-img {
  width: 60px;
  height: auto;
}

.burger {
  background: transparent;
  padding: 10px;
}

.burger-line {
  display: block;
  width: 24px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger.active .burger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger.active .burger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-main {
  display: none;
}

.nav-main.active {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-header);
  padding: 20px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
}

.nav-item {
  margin: 10px 0;
}

.nav-item a {
  color: #fff;
  text-decoration: none;
  font-size: var(--font-size-base);
  transition: color 0.3s ease;
}

.nav-item a:hover {
  color: var(--color-primary);
}

@media (min-width: 1024px) {
  .nav-main {
    display: block;
    position: static;
    background: none;
    padding: 0;
  }

  .nav-list {
    display: flex;
    gap: 20px;
  }

  .nav-item {
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }

  .nav-main {
    display: block;
  }
}

/* Hero */
.hero {
  padding: 100px 0;
  position: relative;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.hero-title {
  font-size: var(--font-size-h1);
  animation: fadeInUp 1s ease;
}

.hero-subtitle {
  font-size: var(--font-size-h3);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  animation: fadeInUp 1s ease 0.3s forwards;
  opacity: 0;
}

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

@media (max-width: 767px) {
  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 18px;
  }
}

section {
  position: relative;
}

.section-bg {
  position: absolute;
  inset: 0 0;
}

.section-bg + .container {
  position: relative;
  z-index: 2;
}

/* Trending Now */
.trending-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-size: var(--font-size-h2);
  color: var(--color-text);
  text-align: center;
  text-transform: uppercase;
}

.section-subtitle {
  font-size: var(--font-size-h3);
  color: var(--color-muted);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}

.section-text {
  font-size: var(--font-size-base);
  max-width: 800px;
  margin: 0 auto 40px;
  text-align: center;
}

.trending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.trending-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trending-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.trending-card figure {
  border-radius: 8px;
}

.trending-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.trending-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

.btn-primary {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  text-align: center;
  font-size: var(--font-size-base);
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: var(--color-accent-1);
}

@media (max-width: 767px) {
  .trending-section {
    padding: 40px 0;
  }
}

/* City Voices */
.voices-section {
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  padding: 80px 0;
  color: #fff;
}

.voices-section .section-title,
.voices-section .section-subtitle {
  color: #fff;
}

.voices-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.voice-card {
  display: flex;
  gap: 30px;
  align-items: center;
}

.voice-card--left {
  flex-direction: row;
}

.voice-card--right {
  flex-direction: row-reverse;
}

.voice-card figure {
  flex: 0 0 200px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
}

.voice-content blockquote {
  font-size: var(--font-size-base);
  font-style: italic;
  margin-bottom: 15px;
}

.voice-meta {
  font-size: var(--font-size-small);
  font-weight: bold;
}

@media (max-width: 767px) {
  .voice-card {
    flex-direction: column;
    text-align: center;
  }

  .voice-card--right {
    flex-direction: column;
  }

  .voice-card figure {
    flex: 0 0 150px;
  }

  .voices-section {
    padding: 40px 0;
  }
}

/* Quick Picks */
.quick-picks-section {
  padding: 80px 0;
  color: #fff;
}

.quick-picks-section .section-bg {
  background-color: var(--color-accent-4);
}

.quick-picks-section .section-bg img {
  opacity: 0.5;
}

.quick-picks-section .section-subtitle,
.quick-picks-section .section-title {
  color: #fff;
}

.quick-picks-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.quick-pick {
  flex: 1;
  min-width: 200px;
  max-width: 220px;
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.quick-pick:hover {
  transform: translateY(-5px);
}

.quick-pick h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
  color: var(--color-accent-2);
}

.quick-pick p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

.btn-secondary {
  display: inline-block;
  background: var(--color-secondary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  text-align: center;
  font-size: var(--font-size-small);
  transition: background 0.3s ease;
}

.btn-secondary:hover {
  background: var(--color-accent-4);
}

@media (max-width: 767px) {
  .quick-picks-section {
    padding: 40px 0;
  }
}

/* Metro Bytes */
.metro-bytes-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.metro-bytes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metro-byte {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.metro-byte:hover {
  transform: translateY(-5px);
}

.metro-byte--ride {
  border-top: 4px solid var(--color-accent-4);
}

.metro-byte--eat {
  border-top: 4px solid var(--color-accent-3);
}

.metro-byte--see {
  border-top: 4px solid var(--color-accent-1);
}

.metro-byte figure {
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
}

.metro-byte h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.metro-byte p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .metro-bytes-section {
    padding: 40px 0;
  }
}

/* Neighborhood Watch */
.neighborhood-section {
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-3));
  padding: 80px 0;
}

.neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.neighborhood-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.neighborhood-card:hover {
  transform: translateY(-5px);
}

.neighborhood-card figure {
  border-radius: 8px;
}

.neighborhood-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.neighborhood-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .neighborhood-section {
    padding: 40px 0;
  }
}

/* Pulse Poll */
.poll-section {
  padding: 80px 0;
}
.poll-section .section-bg img {
  opacity: 0.05;
}

.poll-form {
  max-width: 600px;
  margin: 40px auto 0;
  background: var(--color-surface);
  padding: 30px;
  border-radius: 12px;
  box-shadow: var(--shadow-default);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.poll-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-base);
}

.poll-option input {
  margin: 0;
}

.submit-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.poll-vote {
  padding: 12px 24px;
}

.poll-thanks {
  margin-top: 20px;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  display: none;
}

@media (max-width: 767px) {
  .poll-section {
    padding: 40px 0;
  }

  .poll-form {
    padding: 20px;
  }
}

/* Photo Strip */
.photo-strip-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.photo-strip {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
}

.photo-strip figure {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .photo-strip-section {
    padding: 40px 0;
  }
}

/* Tips & Tricks */
.tips-section {
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-1));
  padding: 80px 0;
  color: #fff;
}

.tips-section .section-title,
.tips-section .section-subtitle,
.tips-section .section-text,
.tips-section h4,
.tips-section p {
  color: #fff;
}

.tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.tips-list,
.tips-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tips-list h4,
.tips-visual h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.tips-list p,
.tips-visual p {
  font-size: var(--font-size-base);
}

.tips-list figure,
.tips-visual figure {
  border-radius: 8px;
}

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

  .tips-section {
    padding: 40px 0;
  }
}

/* What's Inside CityBytes */
.inside-section {
  padding: 80px 0;
}

.inside-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 40px auto 0;
}

.inside-list li {
  margin-bottom: 15px;
}

.inside-list a {
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-base);
  display: block;
  padding: 10px;
  background: var(--color-surface);
  border-radius: 8px;
  transition: background 0.3s ease;
  text-align: center;
}

.inside-list a:hover {
  background: var(--color-accent-2);
  color: #fff;
}

@media (max-width: 767px) {
  .inside-section {
    padding: 40px 0;
  }
}

/* Footer */
.footer {
  background: var(--color-header);
  padding: 60px 0 20px;
  color: #fff;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-brand h3 {
  font-size: var(--font-size-h3);
  margin-bottom: 15px;
}

.footer-brand p {
  font-size: var(--font-size-small);
  opacity: 0.8;
}

.footer-nav h4,
.footer-contact h4,
.footer-legal h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.footer-nav ul,
.footer-contact ul,
.footer-legal ul {
  list-style: none;
  padding: 0;
}

.footer-nav li,
.footer-contact li,
.footer-legal li {
  margin-bottom: 10px;
}

.footer-nav a,
.footer-contact a,
.footer-legal a {
  color: #fff;
  text-decoration: none;
  font-size: var(--font-size-small);
  transition: color 0.3s ease;
}

.footer-nav a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  font-size: var(--font-size-small);
  opacity: 0.8;
}

@media (max-width: 767px) {
  .footer {
    padding: 40px 0 20px;
  }
}

/* Local Lifestyles */
.lifestyles-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.lifestyles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.lifestyle-item {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.lifestyle-item:hover {
  transform: translateY(-5px);
}

.lifestyle-item h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.lifestyle-item p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

.lifestyle-item figure {
  border-radius: 8px;
}

@media (max-width: 767px) {
  .lifestyles-section {
    padding: 40px 0;
  }
}

/* Mood Zones */
.mood-zones-section {
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  padding: 80px 0;
}

.mood-zones-section .section-title,
.mood-zones-section .section-text {
  color: #fff;
}

.mood-zones-section .section-subtitle {
  color: var(--color-accent-3);
}

.mood-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.mood-zone {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.mood-zone:hover {
  transform: scale(1.05);
}

.mood-zone--calm {
  background: var(--color-accent-4);
  color: #fff;
}

.mood-zone--lively {
  background: var(--color-primary);
  color: #fff;
}

.mood-zone--green {
  background: var(--color-accent-3);
  color: #fff;
}

.mood-zone--creative {
  background: var(--color-accent-2);
  color: #fff;
}

.mood-zone h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.mood-zone p {
  font-size: var(--font-size-small);
}

@media (max-width: 767px) {
  .mood-zones-section {
    padding: 40px 0;
  }
}

/* People of the City */
.people-section {
  padding: 80px 0;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.person-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.person-card:hover {
  transform: translateY(-5px);
}

.person-card figure {
  border-radius: 50%;
}

.person-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.person-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .people-section {
    padding: 40px 0;
  }
}

/* Micro Moments */
.micro-moments-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.micro-moments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.moment-item {
  position: relative;
  border-radius: 8px;
}

.moment-item figcaption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px;
  font-size: var(--font-size-small);
  text-align: center;
  border-radius: 4px;
  animation: slideUp 0.5s ease;
}

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

@media (max-width: 767px) {
  .micro-moments-section {
    padding: 40px 0;
  }
}

/* Work & Pause */
.work-pause-section {
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  padding: 80px 0;
  color: #fff;
}

.work-pause-section .section-title {
  color: var(--color-primary);
}

.work-pause-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.work-column,
.pause-column {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.work-column h4,
.pause-column h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.work-column ul,
.pause-column ul {
  list-style: disc;
  padding-left: 20px;
  font-size: var(--font-size-base);
}

.work-column li,
.pause-column li {
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .work-pause-grid {
    grid-template-columns: 1fr;
  }

  .work-pause-section {
    padding: 40px 0;
  }
}

/* The Sounds We Hear */
.sounds-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.sounds-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sound-item {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.sound-item:hover {
  transform: translateY(-5px);
}

.sound-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.sound-item p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .sounds-section {
    padding: 40px 0;
  }
}

/* Window Views */
.window-views-section {
  padding: 80px 0;
}

.window-views {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
}

.view-item {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-radius: 8px;
  border: 4px solid var(--color-border);
}

@media (max-width: 767px) {
  .window-views-section {
    padding: 40px 0;
  }
}

/* This or That */
.this-or-that-section {
  background: var(--color-bg);
  padding: 80px 0;
}

.this-or-that-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 600px;
  margin: 40px auto 0;
}

.choice-row {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.choice-row h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.choice-options {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.choice-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-base);
}

.choice-option input {
  margin: 0;
}

.choice-result {
  display: none;
  margin-top: 15px;
  font-size: var(--font-size-small);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .this-or-that-section {
    padding: 40px 0;
  }

  .choice-options {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Wrap Up */
.wrap-up-section {
  background: linear-gradient(180deg, var(--color-accent-4), var(--color-accent-2));
  padding: 80px 0;
  color: #fff;
}

.wrap-up-section .section-subtitle,
.wrap-up-section .section-title {
  color: #fff;
}

.timeline {
  max-width: 800px;
  margin: 40px auto 0;
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
}

.timeline-item:nth-child(odd) {
  flex-direction: row-reverse;
  text-align: right;
}

.timeline-time {
  font-size: var(--font-size-h4);
  font-weight: bold;
  background: var(--color-surface);
  color: var(--color-accent-4);
  padding: 10px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  flex: 0 0 80px;
  text-align: center;
  white-space: nowrap;
}

.timeline-item p {
  font-size: var(--font-size-base);
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  flex: 1;
}

@media (max-width: 767px) {
  .wrap-up-section {
    padding: 40px 0;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  .timeline-item:nth-child(odd) {
    flex-direction: column;
    text-align: left;
  }

  .timeline-time {
    flex: 0 0 auto;
  }
}

/* Hero Image for Food Page */
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0 0;
  background: linear-gradient(to bottom, rgba(39, 125, 161, 0.2), rgba(39, 125, 161, 0.8), rgba(39, 125, 161, 0.2));
}

.hero-image img {
  object-fit: cover;
  filter: brightness(0.7);
}

/* Taste Trails */
.taste-trails-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.taste-trails-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.trail-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.trail-card:hover {
  transform: translateY(-5px);
}

.trail-card figure {
  border-radius: 8px;
}

.trail-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.trail-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .taste-trails-section {
    padding: 40px 0;
  }
}

/* Hidden Spots */
.hidden-spots-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  color: #fff;
}

.hidden-spots-section .section-title,
.hidden-spots-section .section-subtitle,
.hidden-spots-section .section-text,
.hidden-spots-section h4,
.hidden-spots-section p {
  color: #fff;
}

.hidden-spots-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.spot-item {
  display: flex;
  gap: 30px;
  align-items: center;
}

.spot-item--left {
  flex-direction: row;
}

.spot-item--right {
  flex-direction: row-reverse;
}

.spot-item figure {
  flex: 0 0 200px;
  border-radius: 8px;
}

.spot-content h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.spot-content p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .hidden-spots-section {
    padding: 40px 0;
  }

  .spot-item {
    flex-direction: column;
    text-align: center;
  }

  .spot-item--right {
    flex-direction: column;
  }

  .spot-item figure {
    flex: 0 0 150px;
  }
}

/* Single Ingredient Wonders */
.ingredient-wonders-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.ingredient-carousel {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
}

.carousel-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.carousel-item:hover {
  transform: translateY(-5px);
}

.carousel-item figure {
  border-radius: 8px;
}

.carousel-item h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.carousel-item p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .ingredient-wonders-section {
    padding: 40px 0;
  }
}

/* Bite-size Reviews */
.reviews-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.review-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.review-card:hover {
  transform: translateY(-5px);
}

.review-card figure {
  border-radius: 8px;
}

.review-card p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-top: 10px;
}

@media (max-width: 767px) {
  .reviews-section {
    padding: 40px 0;
  }
}

/* All-Day Plates */
.all-day-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-1));
  color: #fff;
}

.all-day-section .section-title,
.all-day-section .section-subtitle,
.all-day-section .section-text,
.all-day-section h4,
.all-day-section p {
  color: #fff;
}

.all-day-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 40px auto 0;
}

.day-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.day-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.day-item p {
  font-size: var(--font-size-base);
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .all-day-section {
    padding: 40px 0;
  }
}

/* Café Corners */
.cafe-corners-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.cafe-corners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.cafe-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.cafe-card:hover {
  transform: translateY(-5px);
}

.cafe-card figure {
  border-radius: 8px;
}

.cafe-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.cafe-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .cafe-corners-section {
    padding: 40px 0;
  }
}

/* Sip Stories */
.sip-stories-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  color: #fff;
}

.sip-stories-section .section-title,
.sip-stories-section .section-subtitle,
.sip-stories-section .section-text,
.sip-stories-section h4,
.sip-stories-section p {
  color: #fff;
}

.sip-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.sip-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  transition: transform 0.3s ease;
}

.sip-item:hover {
  transform: translateY(-5px);
}

.sip-item figure {
  border-radius: 8px;
}

.sip-item h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.sip-item p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .sip-stories-section {
    padding: 40px 0;
  }
}

/* The Local Menu */
.local-menu-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.local-menu-table {
  width: 100%;
  max-width: 800px;
  margin: 40px auto 0;
  border-collapse: collapse;
}

.local-menu-table th,
.local-menu-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.local-menu-table th {
  font-size: var(--font-size-h4);
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
}

.local-menu-table td {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

.local-menu-table tr:hover {
  background: var(--color-surface);
}

@media (max-width: 767px) {
  .local-menu-section {
    padding: 40px 0;
  }

  .local-menu-table th,
  .local-menu-table td {
    padding: 10px;
    font-size: var(--font-size-small);
  }
}

/* Tips for Tasting */
.taste-tips-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  color: #fff;
}

.taste-tips-section .section-title,
.taste-tips-section .section-subtitle,
.taste-tips-section .section-text,
.taste-tips-section p {
  color: #fff;
}

.taste-tips-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 600px;
  margin: 40px auto 0;
}

.tip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.tip-item:hover {
  transform: translateY(-5px);
}

.tip-item figure {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.tip-item p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .taste-tips-section {
    padding: 40px 0;
  }
}

/* Ride & Glide */
.ride-glide-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.ride-glide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.ride-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.ride-card:hover {
  transform: translateY(-5px);
}

.ride-card figure {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
}

.ride-card h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.ride-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .ride-glide-section {
    padding: 40px 0;
  }
}

/* Shortcut Diaries */
.shortcut-diaries-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  color: #fff;
}

.shortcut-diaries-section .section-title,
.shortcut-diaries-section .section-subtitle,
.shortcut-diaries-section .section-text,
.shortcut-diaries-section summary,
.shortcut-diaries-section p {
  color: #fff;
}

.shortcut-accordion {
  max-width: 800px;
  margin: 40px auto 0;
}

.shortcut-item {
  margin-bottom: 10px;
}

.shortcut-item summary {
  font-size: var(--font-size-h4);
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.shortcut-item summary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.shortcut-item p {
  font-size: var(--font-size-base);
  padding: 15px;
  background: var(--color-surface);
  border-radius: 8px;
  margin: 0;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .shortcut-diaries-section {
    padding: 40px 0;
  }
}

/* Parking Puzzles */
.parking-puzzles-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.parking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.parking-item {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.parking-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.parking-item ul {
  list-style: disc;
  padding-left: 20px;
  font-size: var(--font-size-base);
}

.parking-item li {
  margin-bottom: 10px;
}

.parking-item figure {
  border-radius: 8px;
  margin: 15px 0;
}

.parking-item p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .parking-puzzles-section {
    padding: 40px 0;
  }

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

/* Transit Tools */
.transit-tools-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-1));
  color: #fff;
}

.transit-tools-section .section-title,
.transit-tools-section .section-subtitle,
.transit-tools-section .section-text,
.transit-tools-section h4,
.transit-tools-section p {
  color: #fff;
}

.transit-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.tool-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.tool-card:hover {
  transform: translateY(-5px);
}

.tool-card figure {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
}

.tool-card h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.tool-card p {
  font-size: var(--font-size-small);
}

@media (max-width: 767px) {
  .transit-tools-section {
    padding: 40px 0;
  }
}

/* Walkability Score */
.walkability-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.walkability-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.score-item {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.score-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.score-bar {
  height: 20px;
  border-radius: 10px;
  margin: 10px 0;
}

.bar1 {
  width: 90%;
  background: var(--color-accent-3);
}
.bar2 {
  width: 75%;
  background: var(--color-accent-2);
}
.bar3 {
  width: 85%;
  background: var(--color-accent-4);
}

.bar11 {
  width: 30%;
  background: var(--color-accent-4);
}
.bar12 {
  width: 50%;
  background: var(--color-accent-3);
}
.bar13 {
  width: 60%;
  background: var(--color-accent-2);
}
.bar14 {
  width: 80%;
  background: var(--color-accent-1);
}

.score-item p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .walkability-section {
    padding: 40px 0;
  }
}

/* No Traffic Tales */
.no-traffic-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  color: #fff;
}

.no-traffic-section .section-title,
.no-traffic-section .section-subtitle,
.no-traffic-section .section-text,
.no-traffic-section p,
.no-traffic-section cite {
  color: #fff;
}

.no-traffic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.traffic-quote {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.traffic-quote:hover {
  transform: translateY(-5px);
}

.traffic-quote p {
  font-size: var(--font-size-base);
  font-style: italic;
  margin-bottom: 10px;
}

.traffic-quote cite {
  font-size: var(--font-size-small);
  font-weight: bold;
}

@media (max-width: 767px) {
  .no-traffic-section {
    padding: 40px 0;
  }
}

/* Time It Right */
.time-it-right-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.time-it-right-chart {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.chart-item {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.chart-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.chart-bar {
  height: 20px;
  border-radius: 10px;
  margin: 10px 0;
}

.chart-item p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .time-it-right-section {
    padding: 40px 0;
  }
}

/* Route Snapshots */
.route-snapshots-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  color: #fff;
}

.route-snapshots-section .section-title,
.route-snapshots-section .section-subtitle,
.route-snapshots-section .section-text,
.route-snapshots-section h4,
.route-snapshots-section p {
  color: #fff;
}

.route-snapshots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.route-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.route-card:hover {
  transform: translateY(-5px);
}

.route-card figure {
  border-radius: 8px;
}

.route-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.route-card p {
  font-size: var(--font-size-small);
}

@media (max-width: 767px) {
  .route-snapshots-section {
    padding: 40px 0;
  }
}

/* Go Green Tips */
.go-green-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.go-green-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.green-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.green-tip:hover {
  transform: translateY(-5px);
}

.green-tip figure {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.green-tip p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .go-green-section {
    padding: 40px 0;
  }
}

/* Theatres & Screens */
.theatres-screens-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.theatres-screens-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.theatre-item {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.theatre-item:hover {
  transform: translateY(-5px);
}

.theatre-item figure {
  border-radius: 8px;
}

.theatre-item h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.theatre-item p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .theatres-screens-section {
    padding: 40px 0;
  }
}

/* Cultural Corners */
.cultural-corners-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  color: #fff;
}

.cultural-corners-section .section-title,
.cultural-corners-section .section-subtitle,
.cultural-corners-section .section-text,
.cultural-corners-section h4,
.cultural-corners-section p {
  color: #fff;
}

.cultural-corners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.corner-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.corner-card:hover {
  transform: translateY(-5px);
}

.corner-card figure {
  border-radius: 8px;
}

.corner-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.corner-card p {
  font-size: var(--font-size-small);
}

@media (max-width: 767px) {
  .cultural-corners-section {
    padding: 40px 0;
  }
}

/* Book & Ink */
.book-ink-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.book-ink-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.book-item {
  display: flex;
  gap: 30px;
  align-items: center;
  max-width: 600px;
  margin: auto;
}

.book-item--left {
  flex-direction: row;
}

.book-item--right {
  flex-direction: row-reverse;
}

.book-item figure {
  flex: 0 0 200px;
  border-radius: 8px;
}

.book-content h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.book-content p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .book-ink-section {
    padding: 40px 0;
  }

  .book-item {
    flex-direction: column;
    text-align: center;
  }

  .book-item--right {
    flex-direction: column;
  }

  .book-item figure {
    flex: 0 0 150px;
  }
}

/* Wall Talk */
.wall-talk-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-1));
  color: #fff;
}

.wall-talk-section .section-title,
.wall-talk-section .section-subtitle,
.wall-talk-section .section-text,
.wall-talk-section p {
  color: #fff;
}

.wall-talk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.mural-item {
  position: relative;
  border-radius: 8px;
}

.mural-item figure {
  border-radius: 8px;
}

.mural-item p {
  font-size: var(--font-size-small);
  background: rgba(0, 0, 0, 0.7);
  padding: 8px;
  text-align: center;
  border-radius: 4px;
  margin-top: 10px;
}

@media (max-width: 767px) {
  .wall-talk-section {
    padding: 40px 0;
  }
}

/* Classic vs Contemporary */
.classic-contemporary-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.classic-contemporary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.classic-column,
.contemporary-column {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.classic-column h4,
.contemporary-column h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.classic-column figure,
.contemporary-column figure {
  border-radius: 8px;
  margin-bottom: 15px;
}

.classic-column p,
.contemporary-column p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .classic-contemporary-section {
    padding: 40px 0;
  }

  .classic-contemporary-grid {
    grid-template-columns: 1fr;
  }
}

/* Storytellers */
.storytellers-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  color: #fff;
}

.storytellers-section .section-title,
.storytellers-section .section-subtitle,
.storytellers-section .section-text,
.storytellers-section h4,
.storytellers-section p {
  color: #fff;
}

.storytellers-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.storyteller-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.storyteller-card figure {
  flex: 0 0 100px;
  border-radius: 50%;
}

.storyteller-card h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.storyteller-card p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .storytellers-section {
    padding: 40px 0;
  }

  .storyteller-card {
    flex-direction: column;
    text-align: center;
  }

  .storyteller-card figure {
    flex: 0 0 80px;
  }
}

/* Art in Transit */
.art-transit-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.art-transit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.art-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.art-card:hover {
  transform: translateY(-5px);
}

.art-card figure {
  border-radius: 8px;
}

.art-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.art-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .art-transit-section {
    padding: 40px 0;
  }
}

/* Festival Sights */
.festival-sights-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  color: #fff;
}

.festival-sights-section .section-title,
.festival-sights-section .section-subtitle,
.festival-sights-section .section-text {
  color: #fff;
}

.festival-sights-row {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
}

.sight-item {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .festival-sights-section {
    padding: 40px 0;
  }
}

/* City Echoes */
.city-echoes-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.city-echoes-timeline {
  max-width: 800px;
  margin: 40px auto 0;
  position: relative;
}

.city-echoes-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
  transform: translateX(-50%);
}

.echo-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
}

.echo-item:nth-child(odd) {
  flex-direction: row-reverse;
  text-align: right;
}

.echo-time {
  font-size: var(--font-size-h4);
  font-weight: bold;
  background: var(--color-surface);
  padding: 10px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  flex: 0 0 80px;
  text-align: center;
}

.echo-item p {
  font-size: var(--font-size-base);
  background: var(--color-surface);
  padding: 15px;
  border-radius: 8px;
  flex: 1;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .city-echoes-section {
    padding: 40px 0;
  }

  .city-echoes-timeline::before {
    left: 20px;
  }

  .echo-item {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  .echo-item:nth-child(odd) {
    flex-direction: column;
    text-align: left;
  }

  .echo-time {
    flex: 0 0 auto;
  }
}

/* Top Localities */
.top-localities-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.top-localities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.locality-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.locality-card:hover {
  transform: translateY(-5px);
}

.locality-card figure {
  border-radius: 8px;
}

.locality-card h4 {
  font-size: var(--font-size-h4);
  margin: 15px 0 10px;
}

.locality-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.locality-icons span {
  font-size: var(--font-size-small);
  background: var(--color-accent-3);
  color: #fff;
  padding: 5px 10px;
  border-radius: 12px;
}

.locality-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .top-localities-section {
    padding: 40px 0;
  }
}

/* Stay & Sleep */
.stay-sleep-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  color: #fff;
}

.stay-sleep-section .section-title,
.stay-sleep-section .section-subtitle,
.stay-sleep-section .section-text,
.stay-sleep-section h4,
.stay-sleep-section h5,
.stay-sleep-section p {
  color: #fff;
}

.stay-sleep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.stay-column h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 20px;
}

.stay-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.stay-item figure {
  border-radius: 8px;
}

.stay-item h5 {
  font-size: var(--font-size-base);
  margin: 15px 0 10px;
}

.stay-item p {
  font-size: var(--font-size-small);
}

@media (max-width: 767px) {
  .stay-sleep-section {
    padding: 40px 0;
  }

  .stay-sleep-grid {
    grid-template-columns: 1fr;
  }
}

/* To Do Today */
.to-do-today-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.to-do-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 800px;
  margin: 40px auto 0;
}

.to-do-column h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.to-do-list {
  list-style: disc;
  padding-left: 20px;
}

.to-do-list li {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .to-do-today-section {
    padding: 40px 0;
  }

  .to-do-grid {
    grid-template-columns: 1fr;
  }
}

/* Map Yourself */
.map-yourself-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-1));
  color: #fff;
}

.map-yourself-section .section-title,
.map-yourself-section .section-subtitle,
.map-yourself-section .section-text {
  color: #fff;
}

.map-container {
  max-width: 800px;
  margin: 40px auto 0;
  border-radius: 8px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  border: none;
}

@media (max-width: 767px) {
  .map-yourself-section {
    padding: 40px 0;
  }
}

/* Emergency & Essentials */
.emergency-essentials-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.emergency-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.emergency-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.emergency-item figure {
  flex: 0 0 50px;
}

.emergency-item p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .emergency-essentials-section {
    padding: 40px 0;
  }
}

/* How to CityBytes */
.how-to-citybytes-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  color: #fff;
}

.how-to-citybytes-section .section-title,
.how-to-citybytes-section .section-subtitle,
.how-to-citybytes-section .section-text,
.how-to-citybytes-section h4,
.how-to-citybytes-section p {
  color: #fff;
}

.how-to-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.how-to-step {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.how-to-step:hover {
  transform: translateY(-5px);
}

.how-to-step h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.how-to-step p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .how-to-citybytes-section {
    padding: 40px 0;
  }
}

/* Mini Hacks */
.mini-hacks-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.mini-hacks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  max-width: 800px;
  margin: 40px auto 0;
}

.hack-item {
  background: var(--color-surface);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--color-muted);
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.hack-item:hover {
  transform: translateY(-5px);
}

@media (max-width: 767px) {
  .mini-hacks-section {
    padding: 40px 0;
  }
}

/* Weather & Wear */
.weather-wear-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  color: #fff;
}

.weather-wear-section .section-title,
.weather-wear-section .section-subtitle,
.weather-wear-section .section-text,
.weather-wear-section h4,
.weather-wear-section p {
  color: #fff;
}

.weather-wear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.weather-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.weather-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 15px;
}

.weather-item figure {
  border-radius: 8px;
  margin-bottom: 10px;
}

.weather-item p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .weather-wear-section {
    padding: 40px 0;
  }
}

/* Ask CityBytes */
.ask-citybytes-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.ask-form {
  max-width: 600px;
  margin: 40px auto 0;
}

.ask-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ask-form label {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: 5px;
}

.ask-form input,
.ask-form textarea {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: var(--color-surface);
  color: var(--color-text);
}

.ask-form textarea {
  min-height: 150px;
  resize: vertical;
}

.ask-form button {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .ask-citybytes-section {
    padding: 40px 0;
  }
}

/* Our Story */
.our-story-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.story-timeline {
  max-width: 800px;
  margin: 40px auto 0;
  position: relative;
}

.story-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
  transform: translateX(-50%);
}

.story-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;
}

.story-item:nth-child(odd) {
  flex-direction: row-reverse;
  text-align: right;
}

.story-time {
  font-size: var(--font-size-h4);
  font-weight: bold;
  background: var(--color-surface);
  padding: 10px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  flex: 0 0 80px;
  text-align: center;
}

.story-item p {
  font-size: var(--font-size-base);
  background: var(--color-surface);
  padding: 15px;
  border-radius: 8px;
  flex: 1;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .our-story-section {
    padding: 40px 0;
  }

  .story-timeline::before {
    left: 20px;
  }

  .story-item {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  .story-item:nth-child(odd) {
    flex-direction: column;
    text-align: left;
  }

  .story-time {
    flex: 0 0 auto;
  }
}

/* The CityBytes Mission */
.mission-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  color: #fff;
}

.mission-section .section-title,
.mission-section .section-subtitle,
.mission-section .section-text,
.mission-section h4,
.mission-section p {
  color: #fff;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.mission-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.mission-item:hover {
  transform: translateY(-5px);
}

.mission-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.mission-item p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .mission-section {
    padding: 40px 0;
  }
}

/* Meet the Team */
.team-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.team-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-default);
  transition: transform 0.3s ease;
}

.team-card:hover {
  transform: translateY(-5px);
}

.team-card figure {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
}

.team-card h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.team-card p {
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .team-section {
    padding: 40px 0;
  }
}

/* Why Local Matters */
.local-matters-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-1));
  color: #fff;
}

.local-matters-section .section-title,
.local-matters-section .section-subtitle,
.local-matters-section .section-text {
  color: #fff;
}

.local-image {
  margin-top: 20px;
  border-radius: 8px;
  filter: grayscale(100%);
}

.local-image img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .local-matters-section {
    padding: 40px 0;
  }
}

/* How We Work */
.how-we-work-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.workflow-item {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-default);
}

.workflow-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.workflow-item p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .how-we-work-section {
    padding: 40px 0;
  }
}

/* Voice from the Ground */
.voice-ground-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  color: #fff;
}

.voice-ground-section .section-title,
.voice-ground-section .section-subtitle,
.voice-ground-section .section-text,
.voice-ground-section p,
.voice-ground-section cite {
  color: #fff;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.voice-quote {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.voice-quote:hover {
  transform: translateY(-5px);
}

.voice-quote p {
  font-size: var(--font-size-base);
  font-style: italic;
  margin-bottom: 10px;
}

.voice-quote cite {
  font-size: var(--font-size-small);
  font-weight: bold;
}

@media (max-width: 767px) {
  .voice-ground-section {
    padding: 40px 0;
  }
}

/* FAQ */
.faq-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.faq-accordion {
  max-width: 800px;
  margin: 40px auto 0;
}

.faq-item {
  margin-bottom: 10px;
}

.faq-item summary {
  font-size: var(--font-size-h4);
  padding: 15px;
  background: var(--color-surface);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-item summary:hover {
  background: var(--color-accent-3);
  color: #fff;
}

.faq-item p {
  font-size: var(--font-size-base);
  padding: 15px;
  background: var(--color-surface);
  border-radius: 8px;
  margin: 0;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .faq-section {
    padding: 40px 0;
  }
}

/* Our Values */
.values-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  color: #fff;
}

.values-section .section-title,
.values-section .section-subtitle,
.values-section .section-text,
.values-section h4,
.values-section p {
  color: #fff;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.value-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.value-item:hover {
  transform: translateY(-5px);
}

.value-item figure {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
}

.value-item h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.value-item p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .values-section {
    padding: 40px 0;
  }
}

/* Thank You Note */
.thank-you-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.thank-you-text {
  font-family: "Dancing Script", cursive;
  font-size: var(--font-size-h3);
  text-align: center;
  color: var(--color-primary);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .thank-you-section {
    padding: 40px 0;
  }

  .thank-you-text {
    font-size: var(--font-size-h4);
  }
}

/* Send a Message */
.send-message-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.contact-form {
  max-width: 600px;
  margin: 40px auto 0;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form label {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-base);
  background: var(--color-surface);
  color: var(--color-text);
}

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

.contact-form button {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .send-message-section {
    padding: 40px 0;
  }
}

/* Quick Tips from Locals */
.quick-tips-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
  color: #fff;
}

.quick-tips-section .section-title,
.quick-tips-section .section-subtitle,
.quick-tips-section .section-text,
.quick-tips-section p,
.quick-tips-section cite {
  color: #fff;
}

.quick-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.tip-card {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.tip-card:hover {
  transform: translateY(-5px);
}

.tip-card--street {
  background: var(--color-accent-1);
}

.tip-card--shortcut {
  background: var(--color-accent-2);
}

.tip-card--app {
  background: var(--color-accent-3);
}

.tip-card--spot {
  background: var(--color-accent-4);
}

.tip-card p {
  font-size: var(--font-size-base);
  font-style: italic;
  margin-bottom: 10px;
}

.tip-card cite {
  font-size: var(--font-size-small);
  font-weight: bold;
}

@media (max-width: 767px) {
  .quick-tips-section {
    padding: 40px 0;
  }
}

/* Where We Work */
.where-we-work-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.map-container {
  max-width: 800px;
  margin: 40px auto 0;
  border-radius: 8px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  border: none;
}

@media (max-width: 767px) {
  .where-we-work-section {
    padding: 40px 0;
  }
}

/* Editorial Pitches */
.editorial-pitches-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent-1));
  color: #fff;
}

.editorial-pitches-section .section-title,
.editorial-pitches-section .section-subtitle,
.editorial-pitches-section .section-text,
.editorial-pitches-section h4,
.editorial-pitches-section p {
  color: #fff;
}

.pitch-box {
  max-width: 600px;
  margin: 40px auto 0;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.pitch-box h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.pitch-box p {
  font-size: var(--font-size-base);
}

.pitch-box a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .editorial-pitches-section {
    padding: 40px 0;
  }
}

/* General Inquiries */
.general-inquiries-section {
  padding: 80px 0;
  background: var(--color-bg);
  text-align: center;
}

.inquiries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.inquiry-box {
  background: var(--color-surface);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: var(--shadow-default);
}

.inquiry-box h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.inquiry-box p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
}

.inquiry-box a {
  color: var(--color-primary);
  text-decoration: none;
}

.inquiry-box a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .general-inquiries-section {
    padding: 40px 0;
  }
}

/* Drop by Anytime */
.drop-by-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
  color: #fff;
}

.drop-by-section .section-title,
.drop-by-section .section-subtitle,
.drop-by-section .section-text,
.drop-by-section h4,
.drop-by-section p {
  color: #fff;
}

.hours-box {
  max-width: 600px;
  margin: 40px auto 0;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.hours-box h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.hours-box p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .drop-by-section {
    padding: 40px 0;
  }
}

/* How to Tip Us */
.how-to-tip-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.tip-checklist {
  max-width: 600px;
  margin: 40px auto 0;
}

.tip-checklist ul {
  list-style: disc;
  padding-left: 20px;
}

.tip-checklist li {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .how-to-tip-section {
    padding: 40px 0;
  }
}

/* Support Our Work */
.support-work-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-accent-1), var(--color-accent-2));
  color: #fff;
}

.support-work-section .section-title,
.support-work-section .section-subtitle,
.support-work-section .section-text,
.support-work-section h4,
.support-work-section p {
  color: #fff;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.support-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease;
}

.support-card:hover {
  transform: translateY(-5px);
}

.support-card figure {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background-color: #fff;
  border-radius: 100%;
}

.support-card h4 {
  font-size: var(--font-size-h4);
  margin-bottom: 10px;
}

.support-card p {
  font-size: var(--font-size-base);
}

@media (max-width: 767px) {
  .support-work-section {
    padding: 40px 0;
  }
}

/* Privacy Policy Hero */
.hero-privacy {
  background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-4));
}

/* Privacy Policy Content */
.privacy-content-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.privacy-content-section h4 {
  font-size: var(--font-size-h4);
  margin: 20px 0 10px;
}

.privacy-content-section p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-bottom: 15px;
}

.privacy-content-section a {
  color: var(--color-primary);
  text-decoration: none;
}

.privacy-content-section a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .privacy-content-section {
    padding: 40px 0;
  }
}

/* Terms of Use Hero */
.hero-terms {
  background: linear-gradient(135deg, var(--color-accent-4), var(--color-accent-3));
}

/* Terms of Use Content */
.terms-content-section {
  padding: 80px 0;
  background: var(--color-bg);
}

.terms-content-section h4 {
  font-size: var(--font-size-h4);
  margin: 20px 0 10px;
}

.terms-content-section p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  margin-bottom: 15px;
}

.terms-content-section a {
  color: var(--color-primary);
  text-decoration: none;
}

.terms-content-section a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .terms-content-section {
    padding: 40px 0;
  }
}

/* Thank You Hero */
.hero-thank-you {
  background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-1));
}

/* Thank You Content */
.thank-you-content-section {
  padding: 80px 0;
  background: var(--color-bg);
  text-align: center;
}

.thank-you-content-section p {
  font-size: var(--font-size-base);
  color: var(--color-muted);
  max-width: 600px;
  margin: 0 auto 20px;
}

.thank-you-content-section a:not(.btn) {
  color: var(--color-primary);
  text-decoration: none;
}

.thank-you-content-section a:not(.btn):hover {
  text-decoration: underline;
}

.thank-you-content-section .btn {
  display: inline-block;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .thank-you-content-section {
    padding: 40px 0;
  }
}

.privacy-content-section h4,
.terms-content-section h4,
.thank-you-content-section h4 {
  text-align: center;
}

.privacy-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}

.privacy-checkbox input {
  width: 16px;
  height: 16px;
}

.privacy-checkbox label {
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.privacy-checkbox a {
  color: var(--color-primary);
  text-decoration: none;
}

.privacy-checkbox a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .privacy-checkbox {
    margin: 10px 0;
  }
}