/* =========================
   THINGS TO DO BRISTOL — SHARED STYLESHEET
   Built from existing inline CSS in:
   - /index.html
   - /tours-and-experiences.html
   ========================= */

/* --- BASE --- */
@font-face {
  font-family: "Custom1";
  src: url("/fonts/custom1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.intro {
  /* This pushes the content down exactly enough to clear the fixed nav */
  padding-top: clamp(7rem, 14vw, 9rem) !important; 
}


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

body {
  font-family: "Custom1", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #e9e6df;
  color: #0f1e2e;
}

a { color: inherit; }

.container {
  width: min(1100px, calc(100% - 3rem));
  margin-inline: auto;
}

@media (max-width: 360px) {
  .container { width: min(1100px, calc(100% - 2rem)); }
}

/* --- SECTIONS --- */
section {
  padding: clamp(2rem, 4.2vw, 3.5rem) 0;
}

/* Intro block: slightly tighter bottom padding */
.intro {
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

/* Cards block: slightly tighter top padding */
.chooser {
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
}

/* --- TITLES / TEXT --- */
.page-title {
  font-size: clamp(1.8rem, 4.6vw, 2.7rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: clamp(0.6rem, 1.6vw, 1rem);
}

.lede {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  line-height: 1.75;
  color: #14263a;
  max-width: 70ch;
}

.section-title {
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  letter-spacing: 0.02em;
  margin-bottom: clamp(0.9rem, 2vw, 1.25rem);
}

/* =========================
   INDEX PAGE STYLES (from index.html)
   ========================= */

/* ---------------- HERO ---------------- */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.hero-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 4vw, 3rem);
  color: #f2f0e8;
}

.hero-text {
  margin-top: 12%;
  text-align: center;
  width: 100%;
}

.hero-text h1 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.95;
}

.line-one {
  font-size: clamp(1.6rem, 5vw, 3rem);
  margin-bottom: clamp(0.35rem, 1.2vw, 0.9rem);
}

.line-two {
  font-size: clamp(3.2rem, 18vw, 12.5rem);
  width: 85vw;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .hero-text { margin-top: 12%; }
}

@media (min-width: 1024px) {
  .hero-text { margin-top: 18%; }
}

.strapline {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 3vw, 1.25rem);
  line-height: 1.45;
  margin-top: clamp(1.2rem, 3.5vw, 2.2rem);
  max-width: 40ch;
  margin-inline: auto;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* ---------------- INTRO ---------------- */

.page-intro {
  background-color: #e9e6df;
  padding: clamp(3rem, 6vw, 6rem) 1.5rem;
}

.page-intro .container {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}

.page-intro__title {
  font-family: "Custom1", system-ui, -apple-system, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  color: #0f1e2e;
}

.page-intro__text {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.7;
  color: #14263a;
  margin-bottom: 1.5rem;
}

.page-intro__text:last-child {
  margin-bottom: 0;
}

/* ---------------- OFFERINGS ---------------- */

.offerings {
  background-color: #e9e6df;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem clamp(3rem, 6vw, 6rem);
}

.feature-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(280px, 45vw, 520px);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: url("images/walking-tours.webp") center / cover no-repeat;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 100%);
  z-index: 0;
}

.feature-card__kicker {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  font-family: "Custom1", system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: clamp(1rem, 2.8vw, 1.4rem);
  color: #f2f0e8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.feature-card__title {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  font-family: "Custom1", system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  line-height: 0.95;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 3vw, 1.5rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
}

.mini-card {
  position: relative;
  display: block;
  min-height: clamp(200px, 30vw, 320px);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  padding: clamp(1rem, 3vw, 2rem);
}

.mini-card--itineraries {
  background: url("images/itineraries.webp") center / cover no-repeat;
}

.mini-card--attractions {
  background: url("images/attractions.webp") center / cover no-repeat;
}

.feature-card--areas {
  background: url("images/explorebyarea.webp") center / cover no-repeat;
}

.mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.55) 100%
  );
  z-index: 0;
}

.mini-card__title,
.mini-card__desc {
  position: relative;
  z-index: 1;
  display: block;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.mini-card__title {
  font-family: "Custom1", system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: clamp(1.6rem, 4.8vw, 2.6rem);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.mini-card__desc {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  line-height: 1.45;
  max-width: 34ch;
  opacity: 0.95;
  margin-top: auto;
}

/* --- OVERRIDE: title stays top, subheading sticks to bottom --- */
.offerings .mini-card{
  display: flex !important;
  flex-direction: column;
}

.offerings .mini-card__desc{
  margin-top: auto !important;
}

.feature-card--food {
  margin-top: clamp(1rem, 3vw, 1.5rem);
  background: url("images/foodanddrink.webp") center / cover no-repeat;
}

.mini-card--free {
  background: url("images/free.webp") center / cover no-repeat;
}

.mini-card--streetart {
  background: url("images/streetart.webp") center / cover no-repeat;
}

.feature-card--areas-bottom {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* =========================
   TOURS & EXPERIENCES PAGE STYLES (from tours-and-experiences.html)
   ========================= */

/* --- CARD GRID: 2-up always (even on mobile) --- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 2.6vw, 1.5rem);
}

/* --- CARDS --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(210px, 42vw, 340px);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  padding: clamp(0.9rem, 2.8vw, 1.6rem);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.08) 45%,
    rgba(0,0,0,0.52) 100%
  );
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Kicker (top) */
.kicker {
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  opacity: 0.95;
}

/* Title (bottom) */
.title {
  margin-top: auto;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.98;
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  max-width: 18ch;
}

/* --- Background images (tours-and-experiences) --- */
.bg-walking { background: url("images/tours-walking.webp") center / cover no-repeat; }
.bg-bike    { background: url("images/tours-bike-tours.webp") center / cover no-repeat; }
.bg-hire    { background: url("images/tours-bike-hire.webp") center / cover no-repeat; }
.bg-self    { background: url("images/tours-self-guided.webp") center / cover no-repeat; }

/* =========================
   WALKING TOURS (new pages) — brand-consistent additions
   ========================= */

/* Walking tour hero backgrounds (using images already in your tour HTML) */
.bg-blackbeard { background: url("https://www.bristol-walking-tours.co.uk/images/blackbeard-banksy-hero.jpg") center / cover no-repeat; }
.bg-banksy     { background: url("https://www.bristol-walking-tours.co.uk/images/banksy-walk-hero.jpg") center / cover no-repeat; }
.bg-private    { background: url("https://www.bristol-walking-tours.co.uk/images/private-tour-large.jpg") center / cover no-repeat; }

/* Factual detail blocks */
.fact-box {
  margin-top: clamp(1rem, 2.6vw, 1.6rem);
  background: #f2f0e8;
  border-radius: 22px;
  padding: clamp(1rem, 2.6vw, 1.4rem);
}

.fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
}

.fact {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #14263a;
  line-height: 1.65;
}

.fact strong {
  font-weight: 700;
  color: #0f1e2e;
}

.actions {
  margin-top: clamp(1rem, 2.6vw, 1.6rem);
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .85rem 1.1rem;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .9rem;
  color: #0f1e2e;
  background: #f2f0e8;
}

.btn--outline {
  background: transparent;
  border: 2px solid #0f1e2e;
}

.btn:hover { filter: brightness(0.98); }

.photo-grid {
  margin-top: clamp(1rem, 2.6vw, 1.6rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.85rem, 2.6vw, 1.5rem);
}

.photo-grid img {
  width: 100%;
  height: clamp(220px, 34vw, 340px);
  object-fit: cover;
  border-radius: 22px;
  display: block;
}

@media (max-width: 640px) {
  .fact-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }
}

.simple-list {
  margin-top: .6rem;
  padding-left: 1.1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #14263a;
  line-height: 1.75;
}

.simple-list li { margin: .25rem 0; }

.note {
  margin-top: 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #14263a;
  line-height: 1.75;
}

/* Embedded video wrapper (simple) */
.video-wrap {
  margin-top: clamp(1rem, 2.6vw, 1.6rem);
  border-radius: 22px;
  overflow: hidden;
}

.video-wrap iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* --- UNIQUE TOUR HERO CARDS (Prevents style conflicts) --- */

.tour-hero {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(300px, 50vw, 550px); /* Slightly taller for the stack */
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.tour-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.7) 100%);
  z-index: 0;
}

.tour-hero__kicker {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  font-family: "Custom1", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  color: #f2f0e8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* The vertical stack at the bottom */
.tour-hero__content {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tour-hero__title {
  font-family: "Custom1", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  line-height: 0.95;
  font-size: clamp(2rem, 7vw, 3.8rem); /* Bigger as requested */
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.tour-hero__tagline {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(1.1rem, 2.8vw, 1.4rem);
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  opacity: 0.95;
}

.cta-group {
    text-align: center; /* Centers all text elements */
    margin-top: 4rem;
    width: 100%;
}

.internal-links {
    display: flex;
    justify-content: center; /* Centers the buttons horizontally */
    gap: 1.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.pill-link {
    background: #0f1e2e;
    color: #f2f0e8;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: "Custom1", sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: inline-flex;
    transition: all 0.3s ease;
}

.pill-link:hover {
    background: #1a2b3c;
    transform: translateY(-2px);
}

.bg-churches    { background: url("/images/self-guided-churches.webp") center / cover no-repeat; }
.bg-charity     { background: url("/images/self-guided-charity.webp") center / cover no-repeat; }
.bg-st-nicks    { background: url("/images/self-guided-stnicks.webp") center / cover no-repeat; }
.bg-harbourside { background: url("/images/self-guided-harbourside.webp") center / cover no-repeat; }
.bg-at-war      { background: url("/images/self-guided-at-war.webp") center / cover no-repeat; }



/* --- ITINERARY CARD BACKGROUNDS --- */
.bg-half-day  { background: url("/images/itin-half-day.webp") center / cover no-repeat; }
.bg-full-day  { background: url("/images/itin-full-day.webp") center / cover no-repeat; }
.bg-two-days  { background: url("/images/itin-two-days.webp") center / cover no-repeat; }
.bg-weekend   { background: url("/images/itin-weekend.webp") center / cover no-repeat; }
.bg-family    { background: url("/images/itin-family.webp") center / cover no-repeat; }
.bg-romantic  { background: url("/images/itin-romantic.webp") center / cover no-repeat; }

/* New Additions */
.bg-budget    { background: url("/images/itin-budget.webp") center / cover no-repeat; }
.bg-rainy     { background: url("/images/itin-rainy.webp") center / cover no-repeat; }
.bg-beer      { background: url("/images/itin-beer.webp") center / cover no-repeat; }

* --- ATTRACTION BACKGROUND IMAGES --- */
.bg-ss-gb       { background: url("/images/attract-ss-gb.webp") center / cover no-repeat; }
.bg-suspension  { background: url("/images/attract-bridge.webp") center / cover no-repeat; }
.bg-aquarium    { background: url("/images/attract-aquarium.webp") center / cover no-repeat; }
.bg-wtc         { background: url("/images/attract-wtc.webp") center / cover no-repeat; }
.bg-aerospace   { background: url("/images/attract-aerospace.webp") center / cover no-repeat; }
.bg-the-wave    { background: url("/images/attract-the-wave.webp") center / cover no-repeat; }
.bg-wild-place  { background: url("/images/attract-wildplace.webp") center / cover no-repeat; }

Gemini said
To keep your stylesheet organized and ensure every card has its corresponding image, you need to add the backgrounds for the Free Bristol, Stunning Views, and Discovery Trails sections.

Here is the final "lump" of CSS to add to your existing list to bring the whole site together.

1. Final Background CSS Additions
CSS
/* --- FREE MUSEUM & HISTORY --- */
.bg-underfall    { background: url("/images/free-underfall.webp") center / cover no-repeat; }
.bg-georgian     { background: url("/images/free-georgian.webp") center / cover no-repeat; }
.bg-red-lodge    { background: url("/images/free-red-lodge.webp") center / cover no-repeat; }

/* --- SELF GUIDED TRAILS --- */
.bg-harbour-loop { background: url("/images/trail-harbour.webp") center / cover no-repeat; }
.bg-pirate       { background: url("/images/trail-pirate.webp") center / cover no-repeat; }
.bg-churches     { background: url("/images/trail-churches.webp") center / cover no-repeat; }
.bg-at-war       { background: url("/images/trail-at-war.webp") center / cover no-repeat; }

/* --- STUNNING VIEWS --- */
.bg-cabot        { background: url("/images/view-cabot.webp") center / cover no-repeat; }
.bg-csb          { background: url("/images/view-clifton-bridge.webp") center / cover no-repeat; }
.bg-trenchard    { background: url("/images/view-trenchard.webp") center / cover no-repeat; }
.bg-perretts     { background: url("/images/view-perretts.webp") center / cover no-repeat; }

/* --- BRISTOL'S GREEN SPACES --- */
.bg-castle       { background: url("/images/park-castle.webp") center / cover no-repeat; }
.bg-queen-sq     { background: url("/images/park-queen.webp") center / cover no-repeat; }
.bg-parks-challenge { background: url("/images/park-7-challenge.webp") center / cover no-repeat; }
.bg-downs        { background: url("/images/park-downs.webp") center / cover no-repeat; }

/* --- SPECIAL FEATURE BOXES --- */
.bg-free-box  { 
  background: linear-gradient(rgba(15, 30, 46, 0.4), rgba(15, 30, 46, 0.4)), 
              url("/images/attract-free.webp") center / cover no-repeat; 
}