/* Round the corners on every anchor that links to /order or /book site-wide
   (nav CTAs, hero buttons, footer links, in-page CTAs, etc.). The base
   `.btn` is sharp-cornered; this attribute selector picks out the two
   primary action paths and gives them a softer pill-ish radius. */
a[href="/book"],
a[href="/order"] {
  border-radius: 20px;
}

a[href="/book"],
a[href="/order"] {
  color: #ffffff;
}

/* Restore sharp corners on Book Now buttons inside loud-CTA contexts
   (cta-band + home-hero). The global a[href="/book"] radius above turns
   nav CTAs and editorial side-links into pills, but these primary
   buttons are meant to read as loud rectangular CTAs. */
.cta-band a[href="/book"],
.home-hero a[href="/book"] {
  border-radius: 0;
}

/* CTA-band Book Now: outlined with white text (sits on a dark photo overlay),
   fills with gold on hover. Home-hero keeps its gold-on-dark resting state. */
.cta-band-buttons a[href="/book"] {
  background: none;
  color: #ffffff;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-hero-ctas a[href="/book"] {
  background: none;
  color: var(--accent-text);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-band-buttons a[href="/book"]:hover,
.home-hero-ctas a[href="/book"]:hover {
  background: var(--accent);
  color: #ffffff;
}

/* Navbar Book Now: outlined-only treatment (no fill), theme-aware text. */
.nav-cta[href="/book"] {
  background: none;
}

[data-theme='light'] .nav-cta[href="/book"] {
  color: #111111;
}

[data-theme='dark'] .nav-cta[href="/book"] {
  color: #ffffff;
}

.nav-cta[href="/book"]:hover {
  color: #ffffff;
}

a[href="/order/cart"] {
  color: #ffffff;
  border-radius: 4px;
}

/* ========== NAVBAR ========== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    box-shadow 0.3s ease,
    background-color 0.3s ease;
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
}

.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.nav-logo {
  flex-shrink: 0;
  color: var(--text-primary);
  line-height: 0;
}

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

/* Inline wordmark SVG (NCC-WORDMARK.svg) — aspect ~4.2:1.
   currentColor inheritance lets it flip black/cream with theme. */
.nav-logo svg {
  display: block;
  height: 45px;
  width: auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  .nav-logo svg {
    height: 55px;
  }
}

.nav-links {
  display: none;
  gap: 35px;
  margin: 0 auto;
  padding: 0 40px;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-primary);
  position: relative;
  padding: 4px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--accent-hover-text);
}

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

.nav-link.active {
  color: var(--accent-text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Nav CTA Button */
.nav-cta {
  display: none;
  padding: 10px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--accent);
  color: #1a1a1a;
  border: 2px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #1a1a1a;
}

.nav-cta:active {
  transform: translateY(1px);
  transition-duration: 0.05s;
}

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
  transition: color 0.3s ease;
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.theme-toggle .fa-sun,
.theme-toggle .fa-moon {
  position: absolute;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

[data-theme='dark'] .theme-toggle .fa-sun {
  opacity: 1;
  transform: rotate(0deg);
}
[data-theme='dark'] .theme-toggle .fa-moon {
  opacity: 0;
  transform: rotate(-90deg);
}
[data-theme='light'] .theme-toggle .fa-sun {
  opacity: 0;
  transform: rotate(90deg);
}
[data-theme='light'] .theme-toggle .fa-moon {
  opacity: 1;
  transform: rotate(0deg);
}

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

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  transition: all 0.3s ease;
}

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

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

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

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 999;
  transition: right 0.3s ease;
}

.mobile-overlay.open {
  right: 0;
}

.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: var(--bg-secondary);
  padding: 100px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* On phone-width devices the 280 px drawer leaves only ~95 px of viewport
   exposed — too narrow to feel like a real overlay, and the inner padding
   wraps menu items awkwardly. Below 600 px, fill almost the whole screen. */
@media (max-width: 600px) {
  .mobile-menu {
    width: min(90vw, 360px);
    padding: 100px 28px 32px;
  }
}

.mobile-menu .nav-cta {
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
}

/* Visually group the two top CTAs together. The .mobile-menu's 24px flex
   gap + the previous CTA's 10px margin-bottom combine to ~34px between
   them, which feels disconnected. Pull consecutive CTAs back together. */
.mobile-menu .nav-cta + .nav-cta {
  margin-top: -22px;
}

.mobile-link {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.mobile-link:hover {
  color: var(--accent-hover-text);
}

/* ========== SHARED LAYOUT UTILITIES ========== */
/* Section header row — title/tabs on the left, action(s) on the right.
   Wraps on narrow viewports so a long heading doesn't crash into the
   action button. Was 8 inline copies across customer + admin views. */
.section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ========== BREADCRUMB ========== */
.breadcrumb-bar {
  padding: 15px 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--bg-tertiary);
  margin-top: 80px;
  transition: background-color 0.3s ease;
}

.breadcrumb {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb li + li::before {
  content: '/';
  color: var(--text-secondary);
}

.breadcrumb a {
  color: var(--text-secondary);
  font-weight: 400;
}

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

.breadcrumb li[aria-current='page'] {
  color: var(--accent-text);
  font-weight: 700;
}

/* ========== PAGE HERO ==========
   Padding-top reserves space for the fixed 80px navbar so centred content
   never reads behind it (was an issue on mobile where the hero is short
   and `align-items: center` could push the H1 up under the navbar). */
.page-hero {
  position: relative;
  height: 65vh;
  min-height: 380px;
  max-height: 420px;
  padding-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Light-gold hairline shared with `.services-intro` and the home-process
     connecting line. Theme-agnostic - the rgba value resolves identically
     in both themes. Sits above the absolutely-positioned bg + overlay
     since they snap to the padding box, not the border edge. */
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* The desktop URL is set inline by each view via the --hero-bg custom
     property; --hero-bg-mobile is optional and falls back to --hero-bg if
     unset, so views without a mobile variant keep working unchanged. */
  background-image: var(--hero-bg);
}
@media (max-width: 768px) {
  .page-hero-bg {
    background-image: var(--hero-bg-mobile, var(--hero-bg));
  }
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
  /* Soft blur of the underlying hero photo through the overlay - shared
     across all pages that use `.page-hero` (services, packages, gallery,
     order, book, track, cart, checkout, confirmation, my-bookings + admin
     pages, etc.). The .page-hero-split (story/contact) and .page-hero-type
     (menu/blog) heroes are separate patterns and not affected. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}

.page-hero-content h1 {
  color: #ffffff;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 15px;
  font-size: clamp(2.5rem, 6vw, 5rem);
}

.page-hero-content p {
  color: #d4cfc5;
  font-size: 1rem;
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Sprig ornament that frames the H1 on service-detail and package-detail
   page heroes. Reads as a kicker rather than a watermark - solid gold over
   the dark overlay, sized modestly so the H1 still leads. Opted in per-page
   by adding the wrapper div in the view, so other pages that share
   `.page-hero` are unaffected. */
.page-hero-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--accent);
}

.page-hero-mark svg {
  height: 30px;
  width: auto;
  display: block;
}

/* Flip the kicker sprig horizontally. Higher specificity than the
   motif-animated `transform: none` reset on the wrapper, so the flip
   sticks while the SVG's reveal + sway animations still play inside. */
.page-hero-mark.motif-animated.animate-on-scroll {
  transform: scaleY(-1);
}

/* ========== PAGE HERO — TYPOGRAPHIC (editorial cover) ==========
   Used by /menu and /blog. No photo. A kicker eyebrow, a massive Playfair Display
   display headline that fills the canvas, and an italic subtitle. Reads like
   opening the front of a magazine or a restaurant menu. */
.page-hero-type {
  position: relative;
  min-height: 380px;
  max-height: 420px;
  padding: 9rem 1.5rem 6rem;
  background: var(--bg-secondary);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Light-gold hairline — see `.page-hero` for rationale. */
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
}

.page-hero-type::before,
.page-hero-type::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 60px;
  background: var(--accent);
  opacity: 0.4;
}

.page-hero-type::before {
  top: 40px;
}

.page-hero-type::after {
  bottom: 40px;
}

/* ========== EYEBROW / KICKER ==========
   Small uppercase brand label sitting above hero h1s and intro h2s. Two
   semantic names for the same visual treatment: .hero-eyebrow inside page
   heroes, .intro-label inside section intros. The per-context rules below
   only set margin-bottom — the spacing between eyebrow and the heading it
   captions varies by hero/section style, but everything else is unified. */
.intro-label,
.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--accent-text);
  font-weight: 500;
}

/* Hero eyebrows render bold across all hero patterns (page-hero,
   page-hero-type, page-hero-split). Section intros keep .intro-label at
   500 (the shared base above) unless individually bolded - e.g.
   `.home-intro-text .intro-label` in home.css per Iteration 26. */
.hero-eyebrow {
  font-weight: bold;
}

/* Section-level eyebrow used by the redesigned light-theme sections
   (home-services, home-process, /story service-area). Distinct from
   .intro-label / .hero-eyebrow above: Inter 0.76rem with heavier weight
   and 3px letter-spacing, centred and gold. Pairs with `.home-services-blurb`. */
.section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent-text);
  margin-bottom: 0.8rem;
}

/* Centered muted-grey blurb that follows the eyebrow + Title Case H2
   in the redesigned section-header pattern. Class name retains the original
   `.home-services-blurb` form so existing markup keeps working - rename to
   `.section-blurb` in a future cleanup pass. */
.home-services-blurb {
  font-family: 'Inter', sans-serif;
  font-size: 1.06rem;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 600px;
}

.page-hero-type .hero-eyebrow {
  margin-bottom: 2rem;
}

.page-hero-type h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(3.5rem, 13vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  max-width: 900px;
  text-transform: none;
  margin: 0 auto 1.5rem;
}

.page-hero-type .hero-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .page-hero-type {
    padding: 7rem 1.25rem 4rem;
    min-height: 50vh;
    max-height: 350px;
  }
  .page-hero-type::before,
  .page-hero-type::after {
    height: 40px;
  }
  .page-hero-type::before {
    top: 24px;
  }
  .page-hero-type::after {
    bottom: 24px;
  }
  .page-hero-type .hero-eyebrow {
    margin-bottom: 1.25rem;
  }
}

/* ========== PAGE HERO — ASYMMETRIC SPLIT ==========
   Used by /contact and /story. 60/40 text-photo split with the text card
   overlapping the photo's left edge. Feels personal, editorial, and breaks
   the "centered everything" rhythm of the rest of the site. */
.page-hero-split {
  position: relative;
  min-height: 70vh;
  background: var(--bg-primary);
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 80px; /* clear the fixed navbar */
  /* Light-gold hairline — see `.page-hero` for rationale. */
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
}

/* Gold at 35% reads strongly against the dark theme's near-black bg, but
   composites near-invisible against the light theme's white. Bump the
   alpha on light so the border has comparable presence in both. */
[data-theme='light'] .page-hero,
[data-theme='light'] .page-hero-type,
[data-theme='light'] .page-hero-split {
  border-bottom-color: rgba(201, 169, 110, 0.6);
}

/* /story-specific: drop the bottom hairline on the split hero in light
   theme. Owner-requested — the cream `.about-philosophy` band immediately
   below the hero already carries enough visual separation that the border
   reads redundant. Dark theme retains the gold hairline for definition
   against the body bg. /contact's split hero is unaffected. */
[data-theme='light'] body[data-page='story'] .page-hero-split {
  border-bottom: none;
}

.page-hero-split-image {
  position: relative;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  /* Same --hero-bg variable pattern as .page-hero-bg / .home-hero-bg.
     Inline style on the view sets the URL; the @media rule below swaps
     to the mobile variant if one is provided. */
  background-image: var(--hero-bg);
}
@media (max-width: 768px) {
  .page-hero-split-image {
    background-image: var(--hero-bg-mobile, var(--hero-bg));
  }
}

.page-hero-split-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%);
}

/* Opt-in darker overlay for split-image heroes whose photo benefits from
   a more cinematic tint (e.g. /story's chef portrait). Keeps the default
   subtle on other pages like /contact. */
.page-hero-split-image.dark::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.page-hero-split-text {
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem 3.5rem;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-hero-split-text-inner {
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}

.page-hero-split-text .hero-eyebrow {
  margin-bottom: 1.5rem;
}

.page-hero-split-text h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-transform: none;
}

.page-hero-split-text .hero-subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 0 2rem;
}

.page-hero-split-text .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border: 2px solid var(--accent);
  align-self: flex-start;
}

.page-hero-split-text .hero-badge .badge-number {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1;
}

.page-hero-split-text .hero-badge .badge-text {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
}

@media (min-width: 900px) {
  .page-hero-split {
    grid-template-columns: 5fr 7fr;
    min-height: 75vh;
    padding-top: 0;
  }
  .page-hero-split-image {
    order: 2;
    min-height: unset;
  }
  .page-hero-split-text {
    order: 1;
    padding: 4rem 3rem 4rem clamp(2rem, 8vw, 8rem);
    margin-right: -80px; /* card hangs into the photo edge */
    box-shadow: 40px 0 80px -40px rgba(0, 0, 0, 0.4);
  }
  .page-hero-split-text-inner {
    margin: 0;
    max-width: 560px;
  }
}

@media (min-width: 1400px) {
  .page-hero-split {
    grid-template-columns: 4fr 6fr;
  }
}

/* ========== CTA BAND ========== */
.cta-band {
  padding: 120px 0;
  position: relative;
  text-align: center;
  overflow: hidden;
  /* Editorial accent line — matches the `4px solid var(--accent)` rule
     on `.footer` below, so the CTA band → footer transition reads as a
     deliberate two-rule editorial frame around the closing moment.
     Sits above the absolutely-positioned bg + overlay since they snap to
     the padding box, not the border edge. */
  border-top: 4px solid var(--accent);
}

.cta-band-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Same `--hero-bg` / `--hero-bg-mobile` token pattern as `.page-hero-bg`.
     Pages that still set inline `background-image: url(...)` keep working —
     inline beats this default. New callers should set `style="--hero-bg:
     url(...); --hero-bg-mobile: url(...);"` instead. */
  background-image: var(--hero-bg);
}
@media (max-width: 768px) {
  .cta-band-bg {
    background-image: var(--hero-bg-mobile, var(--hero-bg));
  }
}

.cta-band-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cta-band .container {
  position: relative;
  z-index: 1;
}

.cta-band h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 2px;
  color: #ffffff;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.75);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-band-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-band .btn-outline {
  border-color: #ffffff;
  color: #ffffff;
}

.cta-band .btn-outline:hover {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #ffffff;
}

/* ========== TESTIMONIAL PULLQUOTE ========== */
.testimonial-pullquote {
  padding: 80px 0;
  background: var(--bg-tertiary);
  text-align: center;
  transition: background-color 0.3s ease;
}

.pullquote-icon {
  font-size: 3rem;
  color: var(--accent-text);
  opacity: 0.4;
  margin-bottom: 25px;
}

.pullquote-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto 30px;
}

.pullquote-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.pullquote-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.pullquote-author strong {
  display: block;
  font-size: 1rem;
}

.pullquote-author span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ========== CARD BASE ========== */
.card-base {
  background: var(--bg-primary);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

.card-base:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.card-base .card-image {
  overflow: hidden;
  height: 260px;
}

.card-base .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-base:hover .card-image img {
  transform: scale(1.1);
}

.card-base .card-content {
  padding: 30px;
}

.card-icon {
  color: var(--accent-text);
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.card-content h3 {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}

.card-content p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.card-link {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-text);
}

.card-link i {
  transition: transform 0.3s ease;
  margin-left: 6px;
}

.card-link:hover i {
  transform: translateX(5px);
}

/* ========== BACK LINK ==========
   Used on detail pages above the page-hero hand-off into the content
   section (/packages/{slug}, /my/bookings/{id}, /my/orders/{id}, /track).
   Was previously defined in dashboard.css; lifted here so any pageCss
   bundle can use it without depending on dashboard.css being loaded. */
.back-link {
  color: var(--accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.back-link:hover {
  opacity: 0.8;
}

/* ========== EMPTY STATES ==========
   Centred icon + heading + supporting copy + CTA. Used wherever a list /
   grid renders with zero items (no bookings, no menu items, no packages,
   etc). Replaces inline styles previously scattered across packages.ejs,
   order.ejs, and `.dashboard-empty` in dashboard.css. */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 500px;
  margin: 0 auto;
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--accent-text);
  margin-bottom: 1.5rem;
  display: block;
}

.empty-state h2,
.empty-state h3 {
  margin-bottom: 0.5rem;
}

.empty-state p {
  opacity: 0.6;
  margin: 0 0 1.5rem;
}

/* ========== PROCESS STEPS ========== */
.process-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.process-step {
  text-align: center;
  max-width: 300px;
}

.step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-text);
}

.process-step h3 {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.process-step p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.process-connector {
  width: 2px;
  height: 50px;
  background: var(--accent);
  margin: 10px 0;
}

/* ========== HOW IT WORKS — NUMBERED BLOCKS (shared) ========== */
.home-process {
  position: relative;
  padding: 140px 0;
}

[data-theme='light'] .home-process {
  background: linear-gradient(to bottom, #ffffff, #fafafa);
}

/* Section-scoped paper texture - the opaque gradient above covers
   body::before's site-wide grain in this section's area, so we re-apply
   the texture here at the same intensity/blend as .home-intro (Iteration 5
   in REDESIGN-LOG.md). */
[data-theme='light'] .home-process::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: image-set(
    url('/images/textures/subtle-texture.webp') type('image/webp'),
    url('/images/textures/subtle-texture.jpg') type('image/jpeg')
  );
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.1;
  mix-blend-mode: multiply;
}

.home-process > .container {
  position: relative;
  z-index: 1;
}

.home-process-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-bottom: 80px;
}

.home-process-header h2 {
  font-size: var(--fs-h2);
}

/* Horizontal step layout: circles on top with a thin connecting line
   running through their vertical centre, heading + body below each. The
   ::before pseudo on the grid draws the line; circles sit above it via
   z-index so the line appears to pass behind them. */
.home-process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  position: relative;
}

@media (min-width: 768px) {
  .home-process-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .home-process-grid::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background: rgba(201, 169, 110, 0.35);
    z-index: 0;
  }
}

.home-process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0;
  border: none;
}

.process-step-number {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border: 1px solid var(--accent-text);
  border-radius: 50%;
  background: var(--bg-primary);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--accent-text);
  margin-bottom: 28px;
  pointer-events: none;
  user-select: none;
}

.process-step-content {
  position: relative;
  z-index: 1;
  max-width: 280px;
  margin: 0 auto;
}

.process-step-icon {
  display: none;
}

.process-step-content h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 0.8rem;
  text-transform: none;
  color: var(--text-primary);
}

.process-step-content p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ========== IMAGE FRAME ========== */
.image-frame {
  position: relative;
  overflow: hidden;
}

.image-frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.image-frame:hover img {
  transform: scale(1.03);
}

/* ========== FOOTER ========== */
.footer {
  padding: 60px 0 30px;
  background: var(--bg-secondary);
  border-top: 4px solid var(--accent);
  transition: background-color 0.3s ease;
}

[data-theme='light'] .footer {
  background: #ffffff;
}

[data-theme='dark'] .footer {
  background: #000000;
}

/* The /cart page pins a `.cart-mobile-bar` (position: fixed; bottom: 0)
   on viewports ≤768px. Without extra body padding the bar covers the
   footer when the user scrolls to the bottom of the document. Mobile-only
   body padding-bottom gives clearance equal to the bar's ~80px height
   plus a 16px buffer. */
@media (max-width: 768px) {
  body[data-page='cart'] {
    /* `--cart-bar-height` is defined in cart.ejs's inline style block
       alongside the `.cart-mobile-bar` rule, so the bar's intrinsic
       height and the body's bottom-padding are derived from the same
       single source. 16px buffer above the bar so footer content has
       breathing room. */
    padding-bottom: calc(var(--cart-bar-height, 76px) + 16px);
  }
  /* Tighten /order/cart form layout on mobile - drop the gaps so stacked
     fields and rows sit flush without the desktop's vertical breathing
     room. */
  body[data-page='cart'] .form-row,
  body[data-page='cart'] .form-group {
    gap: 0;
  }
  body[data-page='cart'] .cart-section {
    padding-top: 3rem;
  }
  body[data-page='cart'] .cart-layout {
    gap: 0;
  }
  body[data-page='cart'] .cart-section-heading:last-of-type {
    margin-top: 1.2rem;
  }
}

/* The /order page pins a `.floating-cart-bar` (position: fixed; bottom: 0)
   that JS shows/hides based on cart contents (inline `style="display: none"`
   when cart is empty, cleared when items present - see public/js/order.js).
   Use `:has()` to apply the padding-bottom only when the bar is visible -
   when the cart is empty there's no bar and no need for clearance. */
body[data-page='order']:has(.floating-cart-bar:not([style*="display: none"])) {
  padding-bottom: 96px;
}

.footer-grid {
  display: grid;
  gap: 40px;
  margin-bottom: 50px;
}

/* Inline SVG logo wrapped in this span. Sized via the SVG child so it
   scales cleanly; color inherits via currentColor (paths inside the SVG
   use fill="currentColor" / stroke="currentColor"), so the logo flips
   automatically when the theme toggles. */
.footer-logo {
  display: inline-block;
  color: var(--text-primary);
  line-height: 0;
}

.footer-logo svg {
  /* Horizontal wordmark lockup (~4.2:1 aspect): single row with the mountain
     mark + "NORTH COAST CATERING" + "LAUNCESTON, TASMANIA". Heights are
     significantly lower than the previous stacked composition so width stays
     in proportion - at 90px tall the wordmark renders ~378px wide.
     max-width: 100% guards against overflow on very narrow viewports. */
  height: 60px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (min-width: 768px) {
  .footer-logo svg {
    height: 75px;
  }
}

@media (min-width: 1024px) {
  .footer-logo svg {
    height: 90px;
  }
}

.footer-brand p {
  color: var(--text-secondary);
  margin: 15px 0;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
  color: var(--accent-text);
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--accent-hover-text);
}

.footer-contact h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  color: var(--accent-text);
}

.footer-contact p {
  color: var(--accent-text);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.footer-contact p i {
  color: var(--accent-text);
  width: 20px;
  margin-right: 8px;
}

.footer-bottom {
  border-top: 1px solid var(--bg-tertiary);
  padding-top: 25px;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.footer-motif {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--accent-text);
}

.footer-motif svg {
  height: 36px;
  width: auto;
  display: block;
}

.testimonial-motif {
  display: flex;
  margin-bottom: 14px;
  color: var(--accent-text);
}

.testimonial-motif svg {
  height: 36px;
  width: auto;
  display: block;
}

.auth-motif {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--accent-text);
}

.auth-motif svg {
  height: 22px;
  width: auto;
  display: block;
}

.confirmation-motif {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  color: var(--accent-text);
}

.confirmation-motif svg {
  height: 48px;
  width: auto;
  display: block;
}

.empty-motif {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--accent-text);
}

.empty-motif svg {
  height: 64px;
  width: auto;
  display: block;
}

.contact-motif {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
  color: var(--accent-text);
}

.contact-motif svg {
  height: 36px;
  width: auto;
  display: block;
}

.legal-motif {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--accent-text);
}

.legal-motif svg {
  height: 16px;
  width: auto;
  display: block;
}

.byline-sep {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.4rem;
  color: var(--accent-text);
}

.byline-sep svg {
  height: 10px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ========== BACK TO TOP ========== */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--accent-hover);
  transform: translateY(-3px);
}

/* ========== LIGHTBOX ========== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
}

.lightbox-close:hover {
  color: var(--accent-hover-text);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.lightbox-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1a1a;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-counter {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* ========== FORM STYLES ========== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 16px 20px;
  border: 2px solid var(--border-tinted);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  border-radius: var(--radius-md);
}

/* Border-colour shift on :focus is the focus indicator for form inputs —
   the 2px border going from grey to gold meets WCAG 1.4.11 (>3:1 contrast
   change). The site-wide :focus-visible outline from base.css would
   otherwise stack on top, producing a visible double border (own gold
   border + 3px gap + outer gold outline) since modern browsers apply
   :focus-visible to form fields even on click. Drop the outline for
   form inputs specifically; other elements (links, plain buttons) keep
   the global outline. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
}
/* Disabled form controls — visually muted and uninteractive. */
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.form-success {
  display: none;
  text-align: center;
  padding: 20px;
  color: var(--accent-text);
}

.form-success.show {
  display: block;
}

.form-success i {
  font-size: 2rem;
  margin-bottom: 10px;
}

.form-success p {
  font-size: 1rem;
}

/* ========== MONEY HERO ==========
   Headline money figures across the funnel — Total, Deposit, Amount
   Paid. Playfair Display so the number reads as the deliberate
   editorial moment rather than just bold sans. Apply to either the row
   container (inherits onto label + value) or the value cell alone. */
.money-hero {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  color: var(--accent-text);
}

/* ========== ORDER ITEM OPTIONS ==========
   Chosen options under an order line item — small, muted, indented so they
   read as supplementary detail rather than a full row. Used on confirmation,
   checkout, and my-order-detail (3 surfaces) — canonical home here so we
   don't ship 3 near-identical copies. */
.item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0 0 0.6rem 0.75rem;
  font-size: 0.82rem;
  opacity: 0.7;
  line-height: 1.5;
  border-bottom: 1px solid var(--bg-tertiary);
  margin-top: -0.35rem;
}
.item-options span strong {
  font-weight: 600;
  opacity: 0.85;
}

/* ========== PER-ITEM NOTES ==========
   Customer-entered note attached to a specific cart line (e.g. "no
   onions"). Visually distinct from .item-options so the kitchen reads
   it as a directive rather than a chosen option. Gold left border +
   subtle tinted background draw the eye. Shared across confirmation,
   checkout, my-order-detail, track, and admin order-detail. */
.item-notes {
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: rgba(201, 169, 110, 0.08);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  /* Defensive overrides — this component appears inside contexts that
     muted/uppercased/bolded their first child (e.g. .confirmation-section
     .detail-row on mobile). Reset so the customer's note renders
     verbatim at full color and normal weight; the inner <strong> keeps
     its own styling. */
  text-transform: none;
  color: var(--text-primary);
}
.item-notes strong {
  font-style: normal;
  font-weight: 600;
  opacity: 1;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

/* ========== QUANTITY CONTROL ==========
   Used in the order modal (/order) and the cart (/order/cart). 2.75rem
   buttons hit the 44×44 px Apple/Android tap-target minimum. Was
   defined inline in both views with subtle differences (cart had the
   2.75rem size, order had 2.2rem); unified here at the larger size for
   consistent a11y. */
.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-tinted);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  font-family: inherit;
}
.qty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.qty-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: rgba(201, 169, 110, 0.1);
}
.qty-btn:active {
  background: rgba(201, 169, 110, 0.2);
  transition-duration: 0.05s;
}
.qty-value {
  width: 2.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Light-theme bg flip — translucent whites wash out on a white page. */
[data-theme='light'] .qty-btn {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme='light'] .qty-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ========== DIETARY TAG ==========
   Small uppercase outline pill labelling a menu item's GF / V / VG / DF
   status. Used on /menu and /order. Bordered, not filled, so it reads as
   supplementary metadata rather than primary UI. Was previously defined
   inline in order.ejs (with `border-radius: 3px` — a fifth radius) and
   as `.menu-pill` in menu.css. Unified here at `var(--radius-sm)`. */
.dietary-tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
}

/* ========== STATUS BADGES ==========
   Canonical styles for booking / order / payment status chips. Previously
   duplicated across 9+ templates with off-brand flat-UI colours; now driven
   by the semantic tokens declared in base.css. Capsule shape is the one
   deliberate border-radius in the system (signals "this is a chip"). */
.status-badge {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
}
/* Background tints derived from the status tokens via color-mix(). Adapts
   automatically when the token changes per theme — no need to maintain a
   parallel set of rgba() values. (color-mix has full support across Safari
   16.2+, Chrome 111+, Firefox 113+ — universal in 2026.) */
.status-inquiry,
.status-pending,
.status-quoted {
  background: color-mix(in srgb, var(--status-neutral) 14%, transparent);
  color: var(--status-neutral);
}
.status-deposit_paid,
.status-confirmed,
.status-preparing,
.status-paid,
.status-completed,
.status-ready,
.status-delivered,
.status-succeeded {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
}
.status-cancelled,
.status-failed {
  background: color-mix(in srgb, var(--status-cancelled) 14%, transparent);
  color: var(--status-cancelled);
}

/* ========== SOCIAL LINKS ========== */
.social-links {
  display: flex;
  gap: 18px;
}

.social-links a {
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: var(--accent);
  color: #1a1a1a;
}

/* ========== RESPONSIVE: TABLET ========== */
@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

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

  .process-steps {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }

  .process-connector {
    width: 80px;
    height: 2px;
    margin: 30px 0 0;
  }

  /* Editorial process step uses an absolute-positioned number watermark, so
     no grid-column overrides needed at wider viewports — the clamp() on the
     number font-size handles fluid scaling. */
}

/* ========== RESPONSIVE: TABLET (nav CTAs visible) ==========
   At tablet widths (768+) the primary CTAs appear alongside the hamburger.
   Previously they were hidden until 1200px, which forced tablet users into
   the overlay menu to find "Book Now" / "Order Online". */
@media (min-width: 768px) {
  .nav-cta {
    display: inline-block;
  }
}

/* ========== RESPONSIVE: DESKTOP (full horizontal nav) ========== */
@media (min-width: 1200px) {
  .nav-links {
    display: flex;
  }

  .hamburger {
    display: none;
  }
}

/* ========== RESPONSIVE: MOBILE ========== */
@media (max-width: 767px) {
  .image-frame::after {
    display: none;
  }

  .home-process {
    padding: 60px 0;
  }

  .home-process-header {
    margin-bottom: 40px;
  }


  .btn {
    padding: 12px 24px;
    letter-spacing: 2px;
    font-size: 0.85rem;
  }

  .page-hero {
    height: 50vh;
    min-height: 300px;
    max-height: 350px;
  }

  .page-hero-content h1 {
    letter-spacing: -0.01em;
  }

  .page-hero-content p {
    font-size: 0.95rem;
  }

  .cta-band {
    padding: 60px 0;
  }

  .cta-band h2 {
    letter-spacing: 1px;
  }

  .cta-band-buttons {
    gap: 12px;
  }

  .testimonial-pullquote {
    padding: 40px 0;
  }

  .section-heading {
    margin-bottom: 30px;
  }

  .card-base .card-content {
    padding: 20px;
  }

  .card-base .card-image {
    height: 200px;
  }

  /* Service detail pages */
  .service-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .service-detail-image {
    order: -1;
  }

  .service-detail-image img {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
  }

  .service-includes-grid {
    grid-template-columns: 1fr !important;
  }

  .mini-gallery-grid {
    grid-template-columns: 1fr !important;
  }
}