/* == KMC — Clean Fixed CSS Palette: PLUM / sage / OCHRE / CREAM == */
/* ========================= Base + Reset ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0 0 1rem;
} /* ========================= Tokens ========================= */
:root {
  /* Core palette */
  --cream: #f6efe6;
  --ink: #1e1418;
  --plum: #582236;
  --sage: #899269;
  --ochre: #c78f2f; /* CTA + warm accents */ /* Surfaces */
  --bg: var(--cream);
  --soft: #efe4d6;
  --card: rgba(255, 255, 255, 0.78);
  --bg-panel: rgba(255, 255, 255, 0.7); /* Text */
  --text: var(--ink);
  --muted: rgba(30, 20, 24, 0.74); /* Brand usage */
  --accent: var(--ochre);
  --accent-2: var(--plum);
  --accent-3: var(--sage); /* Lines + depth */
  --line: rgba(88, 34, 54, 0.18);
  --line-soft: rgba(88, 34, 54, 0.1);
  --shadow-soft: 0 12px 32px rgba(30, 20, 24, 0.1);
  --shadow-float: 0 24px 80px rgba(30, 20, 24, 0.18);
  --radius: 18px;
  --radius-lg: 24px; /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(
    0.2,
    0.8,
    0.2,
    1
  ); /* Fixed header offset (single source of truth) */
  --header-offset: 96px; /* Hero scroll vars (JS updates these) */
  --hero-shift: 0px;
  --hero-tilt: 0deg;
  --hero-opacity: 1; /* Hero atmosphere */
  --grad-hero:
    radial-gradient(
      1100px 680px at 12% 10%,
      rgba(195, 132, 39, 0.28),
      transparent 60%
    ),
    radial-gradient(
      900px 620px at 88% 18%,
      rgba(48, 88, 83, 0.28),
      transparent 58%
    ),
    radial-gradient(
      900px 700px at 48% 92%,
      rgba(88, 34, 54, 0.22),
      transparent 62%
    );
} /* ========================= Global layout + type ========================= */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: var(--grad-hero), var(--bg);
  color: var(--text);
  line-height: 1.65;
} /* Subtle editorial grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(30, 20, 24, 0.06) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(30, 20, 24, 0.04) 0 1px,
      transparent 1px 4px
    );
}
main,
header,
footer {
  position: relative;
  z-index: 1;
}
main {
  flex: 1;
  padding-top: var(--header-offset);
} /* Sections + containers */
section {
  padding: 1.5rem 0;
}
section h2 {
  font-size: 1.55rem;
  margin: 0 0 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container.narrow {
  max-width: 720px;
} /* Fixed-header anchor offset */
section,
.hero,
[id] {
  scroll-margin-top: calc(var(--header-offset) + 24px);
} /* ========================= Accessibility: Skip link + Focus ========================= */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  transform: translateY(-200%);
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: rgba(246, 239, 230, 0.92);
  border: 2px solid rgba(88, 34, 54, 0.35);
  color: var(--text);
  z-index: 2000;
  box-shadow: var(--shadow-soft);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}
:focus-visible {
  outline: 3px solid rgba(195, 132, 39, 0.45);
  outline-offset: 3px;
  border-radius: 10px;
} /* ========================= Header / Nav ========================= */
.site-header {
  background: #efe4d6;
  border-bottom: 1px solid var(--line);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 1rem 1rem;
  position: relative;
}
.logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 0;
  line-height: 0;
  font-size: 0;
  flex: 0 0 auto;
}
#logo {
  height: 60px;
  width: auto;
  display: block;
  object-fit: contain;
} /* Toggle hidden on desktop */
.nav-toggle {
  display: none;
  position: relative;
  border: 1px solid rgba(88, 34, 54, 0.22);
  background: rgba(255, 255, 255, 0.6);
  color: var(--plum);
  border-radius: 999px;
  padding: 0.55rem 1rem 0.55rem 3rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.72);
} /* Hamburger icon */
.nav-toggle::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: translateY(-9px);
  box-shadow:
    0 8px 0 currentColor,
    0 16px 0 currentColor;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(0) rotate(0deg);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
.nav-toggle.is-open::before {
  transform: translateY(0) rotate(45deg);
  box-shadow: none;
}
.nav-toggle.is-open::after {
  opacity: 1;
  transform: translateY(0) rotate(-45deg);
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.main-nav a {
  font-size: 0.9rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--plum);
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--ochre);
}
.main-nav a.active {
  background: var(--plum);
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
} /* ========================= Buttons (ONE system) ========================= */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease),
    background-color 200ms var(--ease),
    color 200ms var(--ease),
    border-color 200ms var(--ease);
  will-change: transform;
}
.btn-primary-one {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem; /* use real padding, not 0 */
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease),
    background-color 200ms var(--ease),
    color 200ms var(--ease),
    border-color 200ms var(--ease);
  will-change: transform;
}
.btn-primary,
.btn-primary-one {
  background: var(--ochre);
  color: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 16px 40px rgba(195, 132, 39, 0.24);
}
.btn-primary:hover,
.btn-primary-one:hover {
  background: color-mix(in srgb, var(--ochre) 88%, #000);
  transform: translateY(-3px);
  box-shadow: 0 26px 80px rgba(195, 132, 39, 0.3);
}
.btn-secondary {
  background: transparent;
  color: var(--plum);
  border: 2px solid var(--ochre);
}
.btn-secondary:hover {
  background: rgba(88, 34, 54, 0.08);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: #899269;
  border: 2px solid var(--ochre);
}
.btn-outline:hover {
  background: rgba(48, 88, 83, 0.1);
  transform: translateY(-2px);
}
.btn-nav {
  border: 12px solid transparent;
  background: var(--ochre);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(195, 132, 39, 0.2);
  padding: 3px 4px;
  min-width: fit-content;
}
.btn-nav:hover,
.btn-nav.active {
  background: color-mix(in srgb, var(--ochre) 88%, #000);
  transform: translateY(-1px);
} /* Keyboard focus */
.btn-primary:focus-visible,
.btn-primary-one:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-nav:focus-visible,
.text-link:focus-visible {
  outline: 3px solid rgba(195, 132, 39, 0.45);
  outline-offset: 3px;
} /* ========================= Links ========================= */
.text-link {
  color: var(--plum);
  font-weight: 650;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition:
    border-color 180ms var(--ease),
    color 180ms var(--ease);
}
.text-link:hover {
  color: color-mix(in srgb, var(--plum) 90%, #000);
  border-bottom-color: currentColor;
} /* ========================= Motion ========================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
} /* ========================= Hero (Home) ========================= */
.hero {
  padding: 4.75rem 0 3.75rem;
  background: transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero .hero-bg {
  display: none;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  background: var(--grad-hero);
  filter: blur(14px);
  opacity: var(--hero-opacity);
  transform: translate3d(0, var(--hero-shift), 0) rotate(var(--hero-tilt))
    scale(1.08);
  transform-origin: center;
  will-change: transform, opacity;
  transition: opacity 240ms var(--ease-soft);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.hero-text {
  max-width: 720px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.05rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.hero-sub {
  font-size: 1.06rem;
  color: var(--muted);
  margin: 0 0 1.8rem;
}
.hero-cta {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
} /* ========================= Proof Strip ========================= */
.proof-strip {
  padding: 1.75rem 0;
  background: linear-gradient(
    135deg,
    rgba(246, 181, 181, 0.7) 0%,
    var(--plum) 40%
  );
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.proof-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.proof-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-soft);
}
.proof-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  font-weight: 800;
}
.proof-text {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
} /* ========================= Home: Packages ========================= */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem;
  align-items: stretch;
}
.package-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}
.package-card-strip {
  background: linear-gradient(to bottom, #feba53 0%, var(--ochre));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}
.package-card .price {
  font-weight: 850;
  color: var(--plum);
  margin-bottom: 0.9rem;
}
.package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.package-card li {
  margin-bottom: 0.5rem;
  color: var(--muted);
}
.packages-actions {
  text-align: center;
}
.muted-web {
  text-align: center;
  color: var(--muted);
} /* ========================= Home: Featured Work ========================= */ /* ========================= Featured Work — 3 columns + staggered ========================= */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start; /* important: allows stagger offsets */
}
.featured-grid img {
  height: auto;
} /* Stagger the 3 cards */ /* .featured-grid .work-card:nth-child(1) { margin-top: 0; } .featured-grid .work-card:nth-child(2) { margin-top: 32px; } .featured-grid .work-card:nth-child(3) { margin-top: 54px; } */
.work-card {
  display: flex;
  flex-direction: column;
} /* Image / logo area */
.work-card .work-media {
  aspect-ratio: 16 / 10; /* KEY LINE */
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #000; /* fallback */
  display: grid;
  place-items: center;
}
.work-card .work-media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* logos = contain */
} /* If one of them is a photo instead of a logo */
.work-card.is-photo .work-media img {
  object-fit: cover;
} /* Tablet */
@media (max-width: 1024px) {
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  } /* Reset stagger so it doesn't look weird in 2-col */
  .featured-grid .work-card:nth-child(1),
  .featured-grid .work-card:nth-child(2),
  .featured-grid .work-card:nth-child(3) {
    margin-top: 0;
  }
} /* Mobile */
@media (max-width: 640px) {
  .featured-grid {
    grid-template-columns: 1fr;
  }
} /* Featured media behavior */
.work-card .work-media img {
  width: 100%;
  height: 100%;
  display: block;
} /* Logos should never crop */
.work-card.is-logo .work-media img {
  object-fit: contain;
  padding: 18px; /* gives breathing room */
  background: #000; /* logo card background */
} /* Brand images can crop tastefully */
.work-card.is-cover .work-media img {
  object-fit: cover;
  background: transparent;
} /* .featured-item { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid var(--line-soft); display: flex; flex-direction: column; backdrop-filter: blur(10px); } .featured-item img { width: 100%; height: 220px; object-fit: cover; } .featured-body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; } .featured-item h3 { font-size: 1.1rem; margin: 0; } .featured-item p { margin: 0; color: var(--muted); } .featured-body .text-link { margin-top: 0.65rem; align-self: flex-end; } */ /* ========================= Testimonials ========================= */
.testimonials {
  padding: 40px 0;
  background: var(--soft);
  background: linear-gradient(
    to bottom,
    #305853,
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
}
.section-kicker.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(2px);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
}
.services-process .kicker {
  align-self: flex-start;
}
.work-together {
  color: #efe4d6;
}
.testimonials-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.t-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  border-left: 3px solid var(--ochre);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}
.t-card blockquote {
  margin: 0 0 18px;
  line-height: 1.7;
  color: var(--text);
}
.t-card figcaption strong {
  display: block;
  color: var(--text);
  font-weight: 700;
}
.t-card figcaption span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 4px;
}
.t-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  opacity: 0;
  transition: opacity 220ms ease;
}
@media (hover: hover) {
  .t-card:hover::after {
    opacity: 1;
  }
} /* Mobile swipe (no JS) */
@media (max-width: 719px) {
  .testimonials-grid {
    grid-auto-flow: column;
    grid-auto-columns: 92%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    gap: 10px;
    overscroll-behavior-x: contain;
    scroll-padding-left: 16px;
  }
  .t-card {
    scroll-snap-align: start;
  }
}
.testimonials-hint {
  margin: 6px 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
@media (min-width: 720px) {
  .testimonials-hint {
    display: none;
  }
} /* ========================= FAQ ========================= */ /* ========================= FAQ CTA ========================= */
.faq-cta {
  margin-top: 22px;
  text-align: center;
}
.faq-cta-text {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--muted);
}
.faq-cta-link {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--accent);
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}
.faq-cta-link:hover {
  transform: translateX(2px);
  opacity: 0.85;
} /* ========================= Home FAQ (index only) ========================= */
.home-faq {
  padding: 56px 0;
}
.home-faq-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px 24px;
}
.home-faq-intro {
  color: var(--muted);
  max-width: 48ch;
  margin: 6px 0 14px;
  padding-bottom: 25px;
}
.home-faq-cta {
  margin-top: 14px;
  text-align: left;
}
@media (max-width: 640px) {
  .home-faq {
    padding: 40px 0;
  }
  .home-faq-card {
    padding: 18px;
  }
}
.home-faq-head h2 {
  margin: 0 0 6px;
}
.home-faq-cta {
  margin-top: 18px;
  text-align: center;
}
.home-faq-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .home-faq-grid {
    grid-template-columns: 1fr;
  }
} /* ========================= Final CTA ========================= */
.final-cta .container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta p {
  color: var(--muted);
} /* ========================================================= PORTFOLIO PAGE — Section Bands + Grid + Cards Drop-in block (safe + consistent with Services/About) ========================================================= */ /* Optional: tokens (only if you don't already have them) :root{ --band-soft: #f3eee9; --band-muted: #e9e2dc; } */ /* ---------- Page hero spacing ---------- */
body.portfolio-page .portfolio-hero {
  padding: clamp(3.5rem, 5vw, 5.5rem) 0 clamp(2.25rem, 4vw, 3.25rem);
  margin-top: -62px;
} /* Kicker pill (keep this if you want portfolio to match services/about) */
body.portfolio-page .portfolio-hero .kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 12px;
} /* Lead spacing */
body.portfolio-page .portfolio-hero .lead {
  margin-top: 10px;
  max-width: 62ch;
} /* Hero buttons spacing */
body.portfolio-page .portfolio-hero .hero-actions .btn-primary-one {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-primary-one {
  display: inline-flex;
  align-items: center;
  justify-content: center;
} /* Center only the CTA in the brand bridge section */
.services-bridge.brand-hero .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
} /* Keep the button from stretching */
.services-bridge.brand-hero .btn-primary-one {
  display: inline-flex;
  width: fit-content;
  padding: 0.5rem 0.5rem;
} /* ---------- Proof row (hero) ---------- */
body.portfolio-page .proof-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  body.portfolio-page .proof-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  body.portfolio-page .proof-row {
    grid-template-columns: 1fr;
  }
}
body.portfolio-page .proof-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(10px);
}
body.portfolio-page .proof-title {
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
body.portfolio-page .proof-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
} /* ---------- Section bands (full-width) ---------- */
body.portfolio-page .portfolio-section {
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
body.portfolio-page .portfolio-section.section-band {
  background: linear-gradient(
    to bottom,
    var(--plum),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  ) !important;
}
body.portfolio-page .portfolio-section.section-band.muted {
  background: var(--band-muted, rgba(233, 226, 220, 1));
}
body.portfolio-page .portfolio-section.section-neutral {
  background: transparent;
} /* Section header spacing */
body.portfolio-page .section-head {
  margin-bottom: 18px;
}
body.portfolio-page .portfolio-section h2 {
  margin: 0 0 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 4px;
}
body.portfolio-page .portfolio-grid--products .portfolio-item img {
  height: 260px;
  object-fit: contain;
  background: #fff;
}

/* Portfolio case study cards — show full image */
body.portfolio-page .portfolio-item--case img {
  height: auto;
  max-height: 320px; /* adjust if needed */
  object-fit: contain;
  background: #fff;
}
body.portfolio-page .section-sub,
body.portfolio-page .section-intro {
  margin: 0;
  color: var(--muted);
  max-width: 72ch;
} /* ---------- Portfolio grid ---------- */
body.portfolio-page .portfolio-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  body.portfolio-page .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body.portfolio-page .portfolio-grid {
    grid-template-columns: 1fr;
  }
} /* ---------- Card ---------- */
body.portfolio-page .portfolio-item {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
} /* Image */
body.portfolio-page .portfolio-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--line-soft);
  margin-bottom: 14px;
  background: #fff; /* prevents weird transparent PNG edge */
} /* Contain variant */
body.portfolio-page .portfolio-img-contain {
  object-fit: contain !important;
  background: #fff;
} /* Text */
body.portfolio-page .portfolio-item h3 {
  margin: 0 0 10px;
}
body.portfolio-page .portfolio-item p {
  margin: 0 0 12px;
  color: var(--muted);
} /* Note list */
body.portfolio-page .portfolio-note .note-list {
  margin: 6px 0 12px;
  padding-left: 18px;
  color: var(--muted);
} /* Soon placeholder */
body.portfolio-page .portfolio-soon {
  opacity: 0.65;
} /* ---------- Footer pinned to bottom ---------- */
body.portfolio-page .portfolio-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
} /* Tech line */
body.portfolio-page .portfolio-footer .tech {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
} /* CTA row — SINGLE source of truth (no duplicate conflicting rules) */
body.portfolio-page .portfolio-footer .link-row {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap; /* keep one line on desktop */
}
body.portfolio-page .portfolio-footer .link-row a {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--plum);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
body.portfolio-page .portfolio-footer .link-row a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
} /* Allow wrapping on small screens */
@media (max-width: 640px) {
  body.portfolio-page .portfolio-footer .link-row {
    flex-wrap: wrap;
  }
} /* ---------- Portfolio CTA section ---------- */
body.portfolio-page .portfolio-cta {
  padding: clamp(3.5rem, 6vw, 6rem) 0;
  text-align: center;
}
body.portfolio-page .portfolio-cta .lead {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.portfolio-cta h2 {
  margin-top: -100px;
}
.portfolio-section h2 {
  margin-top: -100px;
} /* ---------- Hover lift (portfolio-only; doesn’t touch other pages) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.portfolio-page .portfolio-item {
    transition:
      transform 320ms var(--ease),
      box-shadow 320ms var(--ease);
  }
  body.portfolio-page .portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-float);
  }
} /* Digital Products grid: 2-up feels better than 1 lonely card */
body.portfolio-page .portfolio-grid--products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  body.portfolio-page .portfolio-grid--products {
    grid-template-columns: 1fr;
  }
} /* ========================= Services ========================= */
.service-block {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.8rem 1.6rem;
  border: 1px solid var(--line-soft);
  margin-bottom: 1.8rem;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}
.service-block .price {
  font-weight: 850;
  color: var(--plum);
  margin-bottom: 0.6rem;
}
.service-block .summary {
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.services-hero .kicker,
.service-block .kicker,
.contact-hero .kicker,
.portfolio-hero .kicker,
.about-page .kicker,
.photo-hero .kicker,
.kmc-hero .kicker,
.kw-hero .kicker,
.ss-hero .kicker,
.quiz-hero .kicker,
.brand-hero .kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 12px;
}
/* =========================
   Brand Foundations card fixes (NO nesting)
   ========================= */

.bf-card {
  margin-top: -40px;
}

/* If you meant “when inside bf-card” */
.bf-card .service-band .section-title {
  margin-top: -75px;
}

/* Kicker pill inside bf-card */
.bf-card .service-block .kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: max-content;
  align-self: flex-start;

  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);

  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 0 0 12px;
  padding: 4px 10px;

  white-space: nowrap;
}

/* Force kicker to shrink inside grid/flex parents */
.bf-card .service-block .kicker {
  grid-column: auto !important;
  justify-self: start;
  align-self: flex-start;
}

.bf-card .service-block {
  align-items: flex-start;
}

/* Internal links card kicker — shrink to content */
.bf-card .service-block.internal-links > .kicker {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}


  .service-block {
    align-items: flex-start;
  }

  /* Internal links card kicker — shrink to content */
  .service-block.internal-links > .kicker {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
/* ========================= How it Works grid ========================= */
.how-it-works h2 {
  margin-bottom: 14px;
}
.how-grid {
  display: grid;
  gap: 14px;
} /* Mobile: stacked */
.how-step {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) - 6px);
  background: rgba(255, 255, 255, 0.35);
}
.how-num {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  color: var(--text);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.6);
  margin: 0 0 10px;
}
.services-process .how-num {
  background: rgba(255, 255, 255, 0.9);
  color: #2f5b52;
  border-color: rgba(47, 91, 82, 0.25);
}
.how-title {
  margin: 0 0 6px;
  font-size: 1rem;
}
.how-desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.95rem;
} /* How it works cards */
.services-process .how-step {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.services-process .service-block {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.services-process .how-step {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}
.services-process .service-block {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.service-block.reassurance {
  /* background: rgba(255, 255, 255, 0.55); */
  background: linear-gradient(
    180deg,
    rgba(137, 146, 105, 0.14),
    rgba(255, 255, 255, 0.6)
  );
  border-radius: 16px;
  padding: 28px 32px;
}
.service-block.reassurance h3 {
  font-size: 1.15rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  .service-block.reassurance {
    padding: 22px 20px;
  }
} /* Desktop: 4 across */
@media (min-width: 900px) {
  .how-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .how-step {
    padding: 16px 16px 18px;
  }
} /* ========================= Services band (full width) ========================= */
.services-band {
  position: relative;
  padding: 64px 0;
  background: linear-gradient(
    to bottom,
    var(--plum),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
}
.services-band-one {
  position: relative;
  padding: 64px 0;
  background: linear-gradient(
    to bottom,
    var(--sage),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
}
.services-band-two {
  position: relative;
  padding: 64px 0;
  background: linear-gradient(
    to bottom,
    var(--cream),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
}
@media (max-width: 640px) {
  .services-band {
    padding: 46px 0;
  }
} /* This replaces the old giant white card wrapper */
.services-band-inner {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: -50px;
} /* Optional: if you want the title area slightly tighter */
.services-band .section-title {
  margin: 0 0 10px;
  color: #efe4d6;
}
.services-band .section-subtext {
  margin: 0 0 22px;
  color: #efe4d6;
  max-width: 110ch;
}

.section-subtext p {
  color: #efe4d6;
}
.services-process {
  background: linear-gradient(180deg, #bfcecb 0%, #8ca49f 40%, #2a524a 90%);
  padding-top: 72px;
  padding-bottom: 72px;
}
.services-faq {
  background: var(--ochre);
  padding-top: 2rem;
  padding-bottom: 1.3rem;
}
.services-faq .service-block {
  max-width: 980px; /* try 920–1000px range */
  margin-left: auto;
  margin-right: auto;
}
.service-block.reassurance {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 28px 32px;
}
@media (max-width: 768px) {
  .service-block.reassurance {
    padding: 22px 20px;
  }
}
.simple-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 10px;
}
.simple-list li {
  margin: 0;
}
.faq-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
}
.faq-aside {
  border-radius: calc(var(--radius) - 6px);
  padding: 1.8rem;
  padding: 1.2rem;
  background: var(--plum);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.18),
    0 12px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.faq-aside-title {
  font-weight: 700;
  color: #efe4d6;
  margin: 1rem 0 0.5rem;
  text-align: center;
}
.faq-aside-text {
  margin: 0;
  color: #efe4d6;
  line-height: 1.6;
  text-align: center;
}
.soft-divider {
  display: block;
  width: 220px;
  height: 2px;
  margin: 1.4rem auto;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0)
  );
  border-radius: 999px;
}
.services-process .kicker {
  display: inline-flex;
  align-items: left;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 12px;
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--plum); /* if you want it inverted */
}
body.portfolio-page .portfolio-section.section-band.muted {
  background: linear-gradient(
    to bottom,
    #899269,
    rgba(246, 239, 230, 0.92) 72%,
    rgba(246, 239, 230, 1) 100%
  );
} /* ========================= Bridge tagline between sections ========================= */
.services-bridge {
  background: linear-gradient(
    180deg,
    rgba(90, 38, 48, 0.85),
    rgba(90, 38, 48, 0.65)
  );
  padding: 12px 0;
  opacity: 0.9;
}
.bridge-text {
  margin: 0;
  text-align: center;
  color: #efe4d6;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.bridge-accent {
  color: #efe4d6;
  font-weight: 700;
} /* ========================= Contact (form) ========================= */
.project-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}
.project-form label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.project-form input,
.project-form textarea,
.project-form select {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(88, 34, 54, 0.22);
  font-family: inherit;
  font-size: 0.95rem;
  background: rgba(246, 239, 230, 0.65);
  color: var(--text);
}
.project-form textarea {
  resize: vertical;
}
.container-narrow {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.cta-note {
  margin-top: 15px;
} /* ========================= Contact page polish ========================= */
body.contact-page .contact-hero {
  padding: clamp(3.25rem, 5vw, 4.75rem) 0 1.5rem;
  margin-top: -52px;
}
body.contact-page .contact-hero p {
  max-width: 70ch;
}
.contact-boundary {
  background: linear-gradient(
    180deg,
    rgba(90, 38, 48, 0.85),
    rgba(90, 38, 48, 0.65)
  );
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.contact-boundary p {
  margin: 0;
  text-align: center;
  color: rgba(239, 228, 214, 0.98);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.form-note {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
}
.selection-note {
  border: 1px dashed rgba(88, 34, 54, 0.26);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.addons-fieldset {
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  margin: 16px 0 0;
}
.addons-fieldset legend {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  font-weight: 850;
  padding: 0 6px;
}
label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(88, 34, 54, 0.18);
  background: rgba(246, 239, 230, 0.55);
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
}
label.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--plum);
}
label.check .check__text {
  flex: 1;
}
.contact-expectations {
  padding: 1.25rem 0 3rem;
}
.contact-expectations .start-container {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}
.contact-expectations h4 {
  margin: 0 0 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--plum);
}
.contact-expectations ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 8px;
}
.contact-expectations .expectations-note {
  margin-top: 12px;
  color: var(--muted);
} /* ========================= Legal pages ========================= */
.legal-wrap {
  padding: 56px 0;
  padding-top: calc(var(--header-offset) + 24px);
}
.legal-header {
  max-width: 920px;
  margin: 0 auto 18px;
}
.legal-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 28px;
  backdrop-filter: blur(10px);
}
.legal-card h2 {
  margin-top: 26px;
  margin-bottom: 10px;
}
.legal-card p {
  margin: 12px 0;
}
.legal-card ul {
  margin: 10px 0 14px;
  padding-left: 1.15rem;
}
.legal-card li {
  margin: 8px 0;
}
.legal-card h2,
.legal-card h3 {
  scroll-margin-top: calc(var(--header-offset) + 24px);
}

/* Contact: conditional checkbox alignment (clean + valid) */
.project-form .checks {
  display: grid;
  gap: 12px;
}

/* CONTACT — Branding "Where will this brand be used?" alignment fix */
.project-form .form-conditional .checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.project-form .form-conditional .checks label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  margin: 0;
  padding: 0;
}

.project-form .form-conditional .checks input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.project-form .form-conditional .checks label > input + * {
  flex: 0 1 auto;
}

/* ========================= Reveal-on-scroll ========================= */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(6px);
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
  will-change: opacity, transform, filter;
}
.reveal.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
} /* Hover lift (sitewide) */
@media (prefers-reduced-motion: no-preference) {
  .featured-item,
  .package-card,
  .faq-item,
  .proof-item,
  .portfolio-item,
  .service-block,
  .t-card {
    transition:
      transform 320ms var(--ease),
      box-shadow 320ms var(--ease);
  }
  .featured-item:hover,
  .package-card:hover,
  .proof-item:hover,
  .portfolio-item:hover,
  .service-block:hover,
  .t-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-float);
  }
} 
/* ========================================================= ABOUT PAGE — the version in your screenshots Full-width image intro + plum story band + blue why + mustard proof + steps ========================================================= */
.about-page {
  background: var(--bg);
} /* Full-width intro image */
.about-intro {
  position: relative;
  padding: 0;
  margin-top: 0;
}
.about-intro-media {
  position: relative;
  height: clamp(380px, 78vh, 920px);
  overflow: hidden;
}
.about-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-intro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(246, 239, 230, 0) 0%,
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
}
.about-intro-inner {
  position: relative;
  margin-top: -90px;
  padding-bottom: 20px;
  text-align: center;
}
.about-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--plum);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.about-title {
  margin: 0 auto;
  max-width: 28ch;
  font-size: clamp(1.9rem, 3.2vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
} /* Plum band (story) */
.about-band {
  background: var(--plum);
  color: rgba(255, 255, 255, 0.92);
  padding: clamp(36px, 4vw, 56px) 0;
}
.about-band-inner {
  display: grid;
  grid-template-columns: 1fr minmax(520px, 740px);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}
.about-band-body {
  padding-right: 14px;
}
.about-band-subhead {
  margin: 0 0 14px;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.about-band-body p {
  margin: 0 0 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}
.about-band-body p:last-child {
  margin-bottom: 0;
} /* Plum band feels too tall because the paragraphs are tall */
.about-band {
  padding: 28px 0 !important; /* tighter band */
}
.about-band-body p {
  line-height: 1.65 !important;
  margin: 0 0 10px !important;
}
.about-band-subhead {
  margin: 0 0 10px !important;
} /* About page: tighten header stacks */
.about-page h2 {
  margin-bottom: 0.4rem;
}
.about-page .section-sub,
.about-page p.lead {
  margin-top: 0.25rem;
} /* WHO I HELP (your existing cards) */
.about-page .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.about-page .card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.about-page .check-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 10px;
}
.about-page .check-list li {
  position: relative;
  padding-left: 26px;
}
.about-page .check-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--ochre);
  opacity: 0.95;
}
.about-page .check-list.muted li {
  color: var(--muted);
}
.about-page .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.about-page .pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted);
  font-size: 0.82rem;
} /* WHY band (blue-teal from screenshot) */
.about-page .about-why {
  --kmc-blue-deep: #1d4341;
  --kmc-blue-teal: #aeba8a;
  background: linear-gradient(
    135deg,
    var(--kmc-blue-deep),
    var(--kmc-blue-teal)
  );
  color: rgba(255, 255, 255, 0.92);
  padding: 50px 0 50px;
  position: relative;
  overflow: hidden;
}
.about-page .about-why::before {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(
      900px 520px at 18% 20%,
      rgba(195, 132, 39, 0.2),
      transparent 60%
    ),
    radial-gradient(
      900px 520px at 82% 10%,
      rgba(255, 255, 255, 0.1),
      transparent 55%
    );
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
}
.about-page .about-why .section-title,
.about-page .about-why .section-sub {
  color: rgba(255, 255, 255, 0.92);
}
.about-page .about-why .section-sub {
  color: rgba(255, 255, 255, 0.82);
  max-width: 70ch;
} /* Quote card on WHY band */
.about-page .about-why .quote-card {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  max-width: 860px;
}
.about-page .about-why .quote-card p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.75;
}
.about-page .about-why .quote-card footer {
  color: rgba(255, 255, 255, 0.75);
} /* Client experience band (mustard) */
.about-page .about-proof {
  background: var(--ochre);
  color: var(--text);
  padding: 50px 0 50px;
}
.about-page .section-title-client {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.section-title {
  margin-top: 0;
}
.about-page .about-proof .testimonial {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
  max-width: 980px;
}
.about-page .about-proof .testimonial p {
  line-height: 1.75;
}
.about-page .about-proof .testimonial-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 4px;
  color: rgba(30, 20, 24, 0.74);
} /* How it works (steps) */
.about-page .about-process {
  padding: 25px 0;
}
.about-page .about-process .steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px) {
  .about-page .about-process .steps {
    grid-template-columns: 1fr;
  }
}
.about-page .about-process .steps > li {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}
.about-page .about-process .step-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.8);
  font-weight: 800;
  color: var(--plum);
}
.about-page .about-process .steps h3 {
  margin: 0 0 6px;
}
.about-page .about-process .steps p {
  margin: 0;
  color: var(--muted);
} /* ========================= Responsive Breakpoints ========================= */
@media (max-width: 1024px) {
  .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .proof-inner {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 901px) {
  .nav-toggle {
    display: none !important;
  }
  .main-nav {
    display: flex !important;
    position: static !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.35rem !important;
  }
} /* Mobile nav = stacked header -> update header offset ONCE */
@media (max-width: 900px) {
  :root {
    --header-offset: 125px;
  }
  .nav-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0.85rem 1rem 1rem !important;
  }
  .logo {
    width: 100% !important;
    justify-content: center !important;
  }
  #logo {
    height: 58px !important;
    max-width: 92vw !important;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    background: rgba(246, 239, 230, 0.96);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 14px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    z-index: 1200;
    box-shadow: var(--shadow-soft);
  }
  .main-nav.is-open {
    display: flex;
  }
  .main-nav a {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .main-nav .btn-nav {
    justify-content: center;
    width: 100%;
  } /* About intro overlay spacing */
  .about-intro-inner {
    margin-top: -70px;
  } /* Plum band becomes single column */
  .about-band-inner {
    grid-template-columns: 1fr;
  }
  .about-band-body {
    padding-right: 0;
    max-width: 72ch;
    margin: 0 auto;
  }
  .about-title {
    max-width: 50ch;
  }
}
@media (max-width: 640px) {
  :root {
    --header-offset: 122px;
  }
  section {
    padding: 3rem 0;
  }
  .container {
    padding: 0 1.15rem;
  }
  .package-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 70px !important;
    padding-bottom: 18px !important;
  }
  .hero h1 {
    font-size: clamp(1.65rem, 6vw, 2.1rem);
    line-height: 1.06;
    text-align: center;
  }
  .hero-sub {
    text-align: center;
  }
  .hero-cta {
    justify-content: center;
    gap: 12px;
  }
  .legal-wrap {
    padding: 36px 0;
    padding-top: calc(var(--header-offset) + 18px);
  }
  .legal-card {
    padding: 18px;
  }
  .legal-header {
    padding-top: 24px;
  }
}
@media (max-width: 520px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .site-footer {
    padding: 44px 0;
  }
  .site-footer .footer-inner {
    justify-items: center;
    text-align: center;
  }
  .site-footer .footer-logo {
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer .footer-list {
    justify-items: center;
  }
  .site-footer .footer-contact {
    justify-items: center;
  }
  .site-footer .footer-contact-item {
    justify-items: center;
  }
  .site-footer .footer-cta {
    margin-left: auto;
    margin-right: auto;
  }
}
.about-intro-line {
  border-top: 1px solid rgba(88, 34, 54, 0.35);
  padding-top: 24px;
  margin-bottom: 28px;
  text-align: center;
  font-size: 30px;
  font-family: "Times New Roman", Times, serif;
} /* ========================= ABOUT — Full-width split band (ochre + plum) ========================= */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(520px, 70vh, 760px);
} /* LEFT: ochre */
.about-split__left {
  background: var(--ochre);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}
.about-split__media {
  width: min(520px, 92%);
}
.about-split__label {
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(246, 239, 230, 0.92);
  margin-bottom: 14px;
}
.about-split__figure {
  margin: 0;
}
.about-split__img {
  width: 100%;
  height: clamp(425px, 48vh, 550px);
  object-fit: cover;
  border-radius: 22px;
  border: 3px ridge var(--plum);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.12);
}
.about-split__caption {
  margin-top: 12px;
  color: rgba(246, 239, 230, 0.9);
  line-height: 1.55;
  font-size: 0.98rem;
} /* controls */
.about-split__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}
.about-split__btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(246, 239, 230, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(246, 239, 230, 0.92);
  cursor: pointer;
}
.about-split__btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.about-split__dots {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
}
.about-split__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(246, 239, 230, 0.55);
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
}
.about-split__dot.is-active {
  background: rgba(246, 239, 230, 0.9);
} /* RIGHT: plum */
.about-split__right {
  background: var(--plum);
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  padding: clamp(32px, 5vw, 50px);
}
.about-split__copy {
  width: min(1000px, 92%);
  margin: 0 auto;
} /* the “line at the top” you asked for */
.about-split__rule {
  width: 64px;
  height: 2px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  margin-bottom: 18px;
}
.about-split__headline {
  margin: 0 0 18px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  text-align: center;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.about-split__body p {
  margin: 0 0 0;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
}
.about-split__cta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.center-cta {
  margin-top: 20px;
} /* responsive: stack */
@media (max-width: 980px) {
  .about-split {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .about-split__left,
  .about-split__right {
    padding: 36px 18px;
  }
  .about-split__img {
    height: 360px;
  }
}
body.portfolio-page .portfolio-section.section-band {
  background: linear-gradient(
    to bottom,
    #305853,
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  ) !important;
} /* DIGITAL PRODUCTS — plum */
body.portfolio-page .portfolio-section.section-band.band-plum {
  background: linear-gradient(
    to bottom,
    var(--plum),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
} /* ========================================================= PORTFOLIO — Band backgrounds (NO conflicts) Put this at the VERY BOTTOM of style.css ========================================================= */ /* Shared band spacing */
body.portfolio-page .portfolio-section.section-band {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
} /* Make the band headings readable on dark gradients */
body.portfolio-page .portfolio-section.section-band > .container > h2,
body.portfolio-page .portfolio-section.section-band .section-head h2 {
  color: rgba(246, 239, 230, 0.92);
}
body.portfolio-page .portfolio-section.section-band .section-sub,
body.portfolio-page .portfolio-section.section-band .section-intro {
  color: rgba(246, 239, 230, 0.78);
} /* CASE STUDIES — sage band */
body.portfolio-page .portfolio-section.section-band.band-sage {
  background: linear-gradient(
    to bottom,
    #899269,
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
} /* DIGITAL PRODUCTS — plum band */
body.portfolio-page .portfolio-section.section-band.band-plum {
  background: linear-gradient(
    to bottom,
    var(--plum),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  );
} /* ========================================================= PORTFOLIO — NUCLEAR BAND OVERRIDES (paste at VERY bottom) ========================================================= */ /* CASE STUDIES: sage */
body.portfolio-page section.portfolio-section.section-band.band-sage {
  background: linear-gradient(
    to bottom,
    #899269,
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  ) !important;
} /* DIGITAL PRODUCTS: plum */
body.portfolio-page section.portfolio-section.section-band.band-plum {
  background: linear-gradient(
    to bottom,
    var(--plum),
    rgba(246, 239, 230, 0.86) 72%,
    rgba(246, 239, 230, 1) 100%
  ) !important;
} /* ========================= About hero responsiveness ========================= */
.about-hero {
  position: relative;
  overflow: hidden; /* cap the height so mobile doesn't become 90% image */
  min-height: clamp(360px, 52vh, 620px);
  padding: clamp(84px, 12vh, 140px) 0 clamp(28px, 6vh, 60px);
}
.about-hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* adjust the crop focus (tweak this!) */
  object-position: center 30%;
  transform: scale(1.02);
} /* your fade overlay */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(246, 239, 230, 0) 0%,
    rgba(246, 239, 230, 0.35) 45%,
    rgba(246, 239, 230, 0.85) 78%,
    rgba(246, 239, 230, 1) 100%
  );
} /* ensure text sits above image + overlay */
.about-hero > .container {
  position: relative;
  z-index: 2;
} /* mobile: tighter hero so content starts sooner */
@media (max-width: 640px) {
  .about-hero {
    min-height: clamp(300px, 46vh, 440px);
    padding: 84px 0 28px;
  }
  .about-hero .hero-media img {
    object-position: center 22%;
  }
} /* ===== ABOUT: top image (about-intro) — fix mobile height + crop ===== */
.about-intro-media {
  height: clamp(340px, 56vh, 700px); /* less aggressive than 78vh */
}
.about-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* tweak up/down */
}
@media (max-width: 640px) {
  .about-intro-media {
    height: clamp(260px, 42vh, 420px); /* this is the real mobile fix */
  }
  .about-intro-inner {
    margin-top: -60px; /* pulls your chip/title up a bit */
  }
  .about-intro-media img {
    object-position: center 18%; /* usually better for portraits */
  }
} /* ABOUT top hero — shift crop so left side stays visible */
.about-intro-media img {
  object-position: 25% 18%; /* more left, slightly up */
} /* Mobile: keep even more of the left */
@media (max-width: 640px) {
  .about-intro-media img {
    object-position: 18% 18%;
  }
} /* ========================================================= KMC — MOBILE RESPONSIVE PATCH ONLY Paste at VERY BOTTOM of your ORIGINAL style.css Goal: keep styling the same, fix mobile spacing + layout ========================================================= */ /* ---------- 1) Global mobile spacing: tighten section padding ---------- */ /* Your mobile currently feels too tall because section padding jumps. */
@media (max-width: 640px) {
  section {
    padding: 2.1rem 0;
  } /* tighter than 3rem, still breathable */
} /* ---------- 2) Index: "What I Do" yellow box — tighten space above/below ---------- */
@media (max-width: 640px) {
  .what-i-do {
    padding: 1.5rem 0;
  } /* reduce section height */
  .package-card-strip {
    padding: 1.15rem 1.05rem;
  } /* reduce card padding */
  .package-card-strip h2 {
    margin-bottom: 0.5rem;
  }
  .package-card-strip .bullet-grid {
    margin-top: 0.75rem;
  }
} /* ---------- 3) Index: Featured Work — tighten space above heading ---------- */
@media (max-width: 640px) {
  .featured-work {
    padding-top: 1.7rem;
  }
  .featured-work h2 {
    margin-bottom: 0.75rem;
  }
} /* ---------- 4) Index: Testimonials — one card at a time, NOT super tall ---------- */
@media (max-width: 719px) {
  .testimonials {
    padding: 30px 0;
  } /* slightly tighter section */
  .testimonials-grid {
    grid-auto-columns: 94%; /* closer to "one at a time" */
    gap: 12px;
    padding-bottom: 10px;
    scroll-padding-left: 1.15rem;
    scroll-padding-right: 1.15rem;
  }
  .t-card {
    padding: 18px; /* reduces height */
    min-height: unset; /* let content define height */
  }
  .t-card blockquote {
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .t-card figcaption span {
    font-size: 0.9rem;
  }
} /* ---------- 5) Services: "The process" pill bumped up a bit ---------- */
@media (max-width: 640px) {
  .services-process .kicker {
    margin-bottom: 10px;
  }
  .how-it-works .kicker {
    margin-top: -8px;
  } /* subtle "bump up" */
} /* ---------- 6) Services: FAQ split card — stack on mobile (FAQ first, plum aside second) ---------- */
@media (max-width: 820px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .faq-questions {
    order: 1;
  }
  .faq-aside {
    order: 2;
    transform: none;
  } /* stop competing / floating */
} /* ---------- 7) About: "Best fit" + "Probably not" cards — stack on mobile + slightly tighter ---------- */
@media (max-width: 820px) {
  .about-page .two-col {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .about-page .about-who {
    padding: 36px 0;
  } /* slightly tighter section */
  .about-page .pill-row {
    margin-top: 12px;
  }
} /* ---------- 8) Stronger reveal animation (more noticeable) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    filter: blur(10px);
    transition:
      opacity 800ms var(--ease-out),
      transform 1000ms var(--ease-out),
      filter 1000ms var(--ease-out);
  }
  .reveal.is-inview {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
} /* ========================================================= CASE STUDIES — restore 2-column grid + card styling Paste at VERY BOTTOM of style.css ========================================================= */
body.case-page .case-wrap .portfolio-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  body.case-page .case-wrap .portfolio-grid {
    grid-template-columns: 1fr;
  }
}
body.case-page .case-wrap .portfolio-item.case-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  backdrop-filter: blur(10px);
} /* Case meta spacing */
body.case-page .case-meta {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
  color: var(--muted);
} /* CTA rows */
body.case-page .case-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
} /* Top nav links (Portfolio / Live / Services) */
body.case-page .case-nav {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
body.case-page .case-nav a {
  font-weight: 650;
  color: var(--plum);
  border-bottom: 1px solid transparent;
  transition:
    border-color 180ms var(--ease),
    color 180ms var(--ease);
}
body.case-page .case-nav a:hover {
  color: color-mix(in srgb, var(--plum) 90%, #000);
  border-bottom-color: currentColor;
} /* Case images */
body.case-page .case-logo {
  width: 100%;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--line-soft);
  background: #fff;
  margin-bottom: 14px;
}

/* ========================================================= Brand Identity — Tabbed Process + Packages Matches KMC palette + card look ========================================================= */
.brand-process {
  padding: 64px 0;
}
.brand-process__header {
  margin-bottom: 22px;
}
.bp-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
}
.bp-lead {
  max-width: 760px;
  margin: 0.9rem auto 0;
  color: var(--muted);
}
.bp-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
} /* Tabs */
.bp-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: rgba(246, 239, 230, 0.6);
}
.bp-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 14px 12px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(30, 20, 24, 0.75);
  cursor: pointer;
  border-right: 1px solid var(--line-soft);
  transition:
    background 180ms var(--ease),
    color 180ms var(--ease);
}
.bp-tab:last-child {
  border-right: 0;
}
.bp-tab[aria-selected="true"] {
  background: var(--plum);
  color: var(--cream);
}
.bp-tab:focus-visible {
  outline: 3px solid rgba(195, 143, 47, 0.45);
  outline-offset: -3px;
  border-radius: 0;
} /* Panels */
.bp-panelwrap {
  padding: 22px;
  background: rgba(246, 239, 230, 0.35);
}
.bp-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 22px;
  align-items: center;
}
.bp-copy p {
  color: var(--muted);
}
.bp-phase {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  color: var(--text);
}
.bp-bullets {
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(30, 20, 24, 0.78);
}
.bp-bullets li {
  margin: 0.35rem 0;
}
.bp-media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-soft);
}
.bp-media img {
  width: 100%;
  height: auto;
  display: block;
} /* Packages */
.bp-packages {
  padding-top: 46px;
}
.bp-packages__header {
  margin-bottom: 18px;
}
.bp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.bp-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.bp-card--featured {
  border-color: rgba(195, 143, 47, 0.55);
  box-shadow:
    0 18px 48px rgba(30, 20, 24, 0.12),
    0 6px 16px rgba(30, 20, 24, 0.06);
}
.bp-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.bp-card h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.bp-price {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.45rem;
  color: var(--plum);
}
.bp-card__desc {
  margin: 10px 0 14px;
  color: var(--muted);
}
.bp-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(30, 20, 24, 0.78);
}
.bp-list li {
  margin: 0.35rem 0;
}
.bp-bestfor {
  margin: 14px 0 0;
  color: rgba(30, 20, 24, 0.84);
}
.bp-bundle {
  margin: 12px 0 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(195, 143, 47, 0.35);
  background: rgba(195, 143, 47, 0.12);
  color: rgba(30, 20, 24, 0.82);
}
.bp-card__cta {
  margin-top: 16px;
  display: inline-flex;
  width: 100%;
  justify-content: center;
}
.bp-footnote {
  margin: 14px auto 0;
  max-width: 860px;
  text-align: center;
  color: var(--muted);
} /* Responsive */
@media (max-width: 900px) {
  .bp-grid {
    grid-template-columns: 1fr;
  }
  .bp-media {
    order: -1;
  }
}
@media (max-width: 760px) {
  .brand-process {
    padding: 48px 0;
  }
  .bp-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bp-panelwrap {
    padding: 16px;
  }
  .bp-cards {
    grid-template-columns: 1fr;
  }
} /* ========================================================= Home — Brand Foundations Bridge ========================================================= */
.brand-foundation-bridge {
  padding: 48px 0;
}
.bf-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px;
}
.bf-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .bf-card {
    padding: 18px;
  }
  .bf-actions {
    gap: 10px;
  }
} /* Contact: conditional blocks */
.form-conditional {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.form-subhead {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
}
.form-conditional {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.form-subhead {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
} /* Skip link should only appear on keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 99999;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--plum);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
} /* Prevent header overlap on contact hero */
.contact-hero {
  padding-top: calc(72px + 24px); /* adjust 72px to your header height */
} /* CONTACT – Branding "Where will this brand be used?" (checkbox + text lockup) */
.project-form .checks {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: start !important;
  justify-items: start !important;
}
.project-form .checks label {
  display: grid !important;
  grid-template-columns: 22px 1fr !important; /* checkbox | text */
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
  justify-content: start !important;
  text-align: left !important;
  margin: 0 !important;
}
.project-form .checks input[type="checkbox"] {
  margin: 0 !important;
  justify-self: start !important;
}
.project-form .checks label span,
.project-form .checks label strong,
.project-form .checks label em {
  justify-self: start !important;
  text-align: left !important;
}
/* ========================= Lightbox ========================= */

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.lightbox.is-open {
  display: block;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

.lightbox-panel {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 980px);
  max-height: 86vh;
  margin: 6vh auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  padding: 14px;
}

.lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 12px;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  cursor: pointer;
}

/* Ensure grid items stretch */
.package-grid {
  align-items: stretch;
}

/* Make cards vertical flex containers */
.package-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Force CTA to bottom + center */
/* Push CTA block to bottom */
.package-card .cta-stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* space between button and micro-line */
  text-align: center;
}

/* Make sure micro-line doesn't float weirdly */
.package-card .cta-stack .micro-line {
  margin: 0;
}


/* NEXT STEPS – make it a centered card, not a full band */
.service-block.internal-links {
  max-width: 860px; /* controls card width */
  margin: 15px auto 30px; /* centers + spacing */
  padding: 48px 56px; /* internal breathing room */

  background: var(--soft); /* or whatever light surface you're using */
  border-radius: 24px;
}

.service-block.internal-links {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .service-block.internal-links {
    padding: 36px 24px;
    margin-bottom: 64px;
  }
}

.section-band {
  padding-block: 96px;
}

@media (max-width: 768px) {
  .section-band {
    padding-block: 72px;
  }
}

.section-content {
  padding-block: 64px;
}

@media (max-width: 768px) {
  .section-content {
    padding-block: 48px;
  }
}

.section-pause {
  padding-block: 48px;
}

@media (max-width: 768px) {
  .section-pause {
    padding-block: 36px;
  }
}

.section-band.faq {
  padding-block: 72px;
}

/* Case Studies — bump Best-Fit Package block up */
.case-page section[aria-label="Best fit package"] .service-block {
  margin-top: 0 !important;
}

/* CASE STUDY — pull “Best-Fit Package” band up */
.case-page section[aria-label*="Best fit"] {
  padding-top: 0 !important;
  margin-top: -24px !important; /* adjust: -12 / -16 / -24 / -32 */
}

/* also kill any top margin on the block itself */
.case-page section[aria-label*="Best fit"] .service-block {
  margin-top: 0 !important;
}

/* CASE STUDIES — normalize vertical rhythm */
.case-page section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.case-page section + section {
  margin-top: 0;
}

/* Case Study — add breathing room at top of narrative band */
.case-page .services-band {
  padding-top: calc(3rem + 18px);
}

/* Case Studies — force 2-column cards to equal height */
.case-page .portfolio-grid {
  align-items: stretch; /* if your grid is display:grid, this is harmless + helpful */
  margin-bottom: 50px;
}

.case-page .portfolio-grid > .portfolio-item,
.case-page .portfolio-grid > article {
  height: 100%;
}

.case-page .portfolio-item.case-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push CTA + “text-link” blocks to the bottom */
.case-page .portfolio-item.case-card .case-cta,
.case-page .portfolio-item.case-card .text-link {
  margin-top: auto;
}

/* Kingdom Woodcraft — tighten hero → proof strip spacing */
.case-page .kw-hero + .proof-strip .container,
.case-page .kmc-hero + .proof-strip .container,
.case-page .ss-hero + .proof-strip .container {
  margin-top: -19px;
}

/* Divider that sits BETWEEN two service-block cards */
.case-page .case-divider,
.portfolio-page .case-divider {
  width: min(800px, 92%);
  height: 1px;
  margin: 22px auto 22px; /* space above & below divider */
  background: linear-gradient(to right, transparent, var(--sage), transparent);
  position: relative;
}

.wellness-page .case-divider {
  width: min(800px, 92%);
  height: 1px;
  margin: -30px auto 22px; /* space above & below divider */
  background: linear-gradient(to right, transparent, var(--sage), transparent);
  position: relative;
}

/* Case study — nudge reassurance block down slightly */
.case-page .service-block.reassurance {
  margin-top: 25px;
}

/* =========================
   QUIZ PAGE — INTENTIONAL LAYOUT
   ========================= */

.quiz-page .quiz-band {
  padding: 2.25rem 0;
}

.quiz-page .quiz-band .container {
  max-width: 1100px;
}

.quiz-page .quiz-grid {
  display: grid;
  gap: 22px;
  align-items: start;
}

@media (min-width: 900px) {
  .quiz-page .quiz-grid {
    grid-template-columns: minmax(320px, 420px) minmax(520px, 720px);
    justify-content: center;
  }
}

/* Left card */
.quiz-page .quiz-help {
  width: 100%;
  max-width: 420px;
  margin-top: 0;
}

/* Right form area */
.quiz-page .quiz-main {
  width: 100%;
  max-width: 720px;
  margin-top: 0;
}

/* Result card sits FULL WIDTH under both columns */
.quiz-page #quizResult {
  max-width: 1100px;
  margin: 1.25rem auto 0;
}

/* Respect hidden attribute */
.quiz-page #quizResult[hidden] {
  display: none !important;
}

/* Mobile tightening */
@media (max-width: 899px) {
  .quiz-page .quiz-grid {
    gap: 14px;
  }

  .quiz-page .quiz-help,
  .quiz-page .quiz-main {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hero spacing polish */
.quiz-page .page-hero {
  padding-bottom: 1.5rem;
}
.quiz-page .page-hero + .quiz-band {
  margin-top: 0;
}

/* ===== FIX: internal-links kicker pill should hug content ===== */
.service-block.internal-links .kicker.kicker--pill {
  display: inline-flex !important;
  width: auto !important;
  inline-size: max-content !important;
  max-width: none !important;

  padding: 4px 10px !important; /* override that crazy padding */
  margin: 0 0 12px !important;

  align-items: center;
  justify-content: center;
  white-space: nowrap;

  /* make sure it doesn't behave like a full-width block */
  place-self: start !important; /* grid */
  align-self: flex-start !important; /* flex */
}

/* =========================
   PORTFOLIO CARD — Footer cleanup
   ========================= */

.portfolio-item .portfolio-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.portfolio-item .tech {
  margin: 0 0 10px;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Make the links stack cleanly (matches your calm “list” vibe) */
.portfolio-item .link-row {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Link styling that matches KMC */
.portfolio-item .link-row a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  font-weight: 600;
  color: var(--plum);
  border-bottom: 1px solid rgba(88, 34, 54, 0.25);
  padding-bottom: 2px;
}

.portfolio-item .link-row a:hover {
  border-bottom-color: rgba(88, 34, 54, 0.55);
}

.portfolio-item .link-row a:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Keep your note calm */
.portfolio-item .portfolio-footer .micro-line {
  margin: 10px 0 0;
  opacity: 0.85;
  font-size: 0.92rem;
}

.portfolio-item .link-row a:last-child {
  border-bottom-color: transparent;
  background: rgba(199, 143, 47, 0.16);
  border: 1px solid rgba(199, 143, 47, 0.45);
  padding: 8px 10px;
  border-radius: 999px;
}

/* Stack + center CTAs in portfolio cards */
.portfolio-item .link-row {
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal centering */
  gap: 10px;
  margin: 0;
  padding: 0;
}

.portfolio-item .portfolio-footer {
  text-align: center;
}

.concept-feature {
  padding: clamp(30px, 5vw, 70px) 0;
}

.concept-layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
}

.portfolio-grid--concepts {
  display: grid;
  grid-template-columns: 1fr; /* one featured card */
}

.concept-soon {
  margin: 14px 0 0;
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Prevent your pill from stretching */
.concept-note .kicker--pill {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .concept-layout {
    grid-template-columns: 1fr;
  }
}

/* =========================
   PORTFOLIO — Concept feature layout FIX
   (prevents skinny left card)
   ========================= */

/* Make the two columns behave like: left = card width, right = flexible */
body.portfolio-page .concept-layout {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
}

/* Ensure left column can actually be wide */
body.portfolio-page .concept-left {
  min-width: 0;
}

/* Stop any inherited portfolio grid constraints */
body.portfolio-page .portfolio-grid--concepts {
  display: block;
  max-width: none;
}

/* Force the card to fill the left column (no skinny collapse) */
body.portfolio-page .portfolio-grid--concepts .portfolio-item {
  width: 100%;
  max-width: 520px; /* matches the column max */
}

/* Make sure the image behaves in this card */
body.portfolio-page .portfolio-grid--concepts .portfolio-item img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  background: #fff;
}

/* Responsive stacking */
@media (max-width: 980px) {
  body.portfolio-page .concept-layout {
    grid-template-columns: 1fr;
  }

  body.portfolio-page .portfolio-grid--concepts .portfolio-item {
    max-width: 100%;
  }
}

body.portfolio-page .concept-right {
  margin-top: 44px; /* tweak 0–60px to taste */
}

section.concept-feature .concept-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, 540px) minmax(0, 1fr) !important;
  gap: 40px !important;
  align-items: start !important;
}

@media (max-width: 980px) {
  section.concept-feature .concept-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* =========================================================
   PORTFOLIO — Concept section (FINAL override)
   Goal: LEFT is the main column, RIGHT is a capped note card
   Paste at VERY BOTTOM of style.css
========================================================= */

body.portfolio-page section.concept-feature .concept-layout {
  display: grid !important;

  /* LEFT grows, RIGHT stays readable */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;

  gap: clamp(18px, 3vw, 44px) !important;
  align-items: start !important;
}

body.portfolio-page section.concept-feature .concept-left,
body.portfolio-page section.concept-feature .concept-right {
  min-width: 0;
}

/* Kill the “skinny card” clamp */
body.portfolio-page section.concept-feature .portfolio-grid--concepts,
body.portfolio-page
  section.concept-feature
  .portfolio-grid--concepts
  .portfolio-item {
  max-width: none !important;
  width: 100% !important;
}

/* Make sure the image behaves nicely in the wider card */
body.portfolio-page
  section.concept-feature
  .portfolio-grid--concepts
  .portfolio-item
  img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: #fff;
}

/* Remove any right-column nudges */
body.portfolio-page section.concept-feature .concept-right {
  margin-top: 0 !important;
}

/* Stack cleanly on mobile */
@media (max-width: 980px) {
  body.portfolio-page section.concept-feature .concept-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* CONCEPT FEATURE — align both cards to start at same height */
body.portfolio-page .concept-head {
  margin-bottom: 18px;
}

body.portfolio-page .concept-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  gap: clamp(18px, 3vw, 44px) !important;
  align-items: start !important;
}

@media (max-width: 980px) {
  body.portfolio-page .concept-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* remove any old “push down” */
body.portfolio-page .concept-right {
  margin-top: 0 !important;
}

/* CONCEPT FEATURE — remove portfolio-grid top margin so columns align */
body.portfolio-page section.concept-feature .concept-left .portfolio-grid,
body.portfolio-page
  section.concept-feature
  .concept-left
  .portfolio-grid--concepts {
  margin-top: 0 !important;
}

/* =========================================================
   CONCEPT FEATURE — visual polish + hierarchy
========================================================= */

/* Reduce dead space around the section */
body.portfolio-page section.concept-feature {
  padding-top: 0;
  padding-bottom: clamp(56px, 7vw, 80px);
}

/* Soft header band */
body.portfolio-page .concept-band {
  background: linear-gradient(
    to bottom,
    rgba(246, 239, 230, 0.9),
    rgba(246, 239, 230, 0.6)
  );
  padding: clamp(24px, 4vw, 36px) 0;
  margin-bottom: 24px;
  margin-top: -50px;
}

/* Header stack tightening */
body.portfolio-page .concept-head {
  max-width: 720px;
}

body.portfolio-page .concept-head .kicker {
  margin-bottom: 8px;
}

body.portfolio-page .concept-head .section-title {
  margin-bottom: 6px;
}

body.portfolio-page .concept-head .section-subtext {
  margin-top: 0;
  color: var(--muted);
}

/* Bring cards closer to the header */
body.portfolio-page .concept-layout {
  margin-top: 0;
}

/* Slight group shadow so cards feel related */
body.portfolio-page .concept-left .portfolio-item,
body.portfolio-page .concept-right .service-block {
  box-shadow:
    0 12px 34px rgba(30, 20, 24, 0.08),
    0 4px 12px rgba(30, 20, 24, 0.05);
}

/* Reduce bottom air before next section */
body.portfolio-page .concept-soon {
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
}

/* =========================================================
   CONCEPT CASE STUDY — header card (internal color only)
========================================================= */

body.portfolio-page .concept-band {
  background: transparent;
  padding: 0;
  margin-bottom: 28px;
}

body.portfolio-page .concept-head {
  background: linear-gradient(to bottom, #c49c57 5%, rgba(246, 239, 230, 0.9));
  border-radius: 18px;
  padding: clamp(20px, 4vw, 28px);
  box-shadow:
    2px 14px 36px rgba(30, 20, 24, 0.06),
    2px 6px 16px rgba(30, 20, 24, 0.04);
  max-width: 900px;
}

/* Tighten text rhythm inside header card */
body.portfolio-page .concept-head .kicker {
  margin-bottom: 6px;
}

body.portfolio-page .concept-head .section-title {
  margin-bottom: 6px;
}

body.portfolio-page .concept-head .section-subtext {
  margin-top: 0;
  max-width: 640px;
  color: var(--muted);
}

/* Center the Concept Case Study header card */
body.portfolio-page .concept-head {
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* keep text editorial, not centered */
}

/* Ensure Concept kicker matches global pill styling */
body.portfolio-page .concept-head .kicker--pill {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(30, 20, 24, 0.12);
  color: var(--ink);
}

/* =========================
   MOBILE — Testimonials swipe row
   ========================= */
@media (max-width: 640px) {
  .testimonials .testimonials-hint {
    display: block;
    margin: 10px 0 14px;
  }

  .testimonials .testimonials-grid {
    /* override your 3-col grid on mobile */
    display: flex !important;
    grid-template-columns: none !important;

    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    padding: 6px 16px 14px !important;
    margin: 0 -16px; /* lets the swipe row reach the edges */
  }

  .testimonials .t-card {
    flex: 0 0 88% !important; /* one card at a time */
    max-width: 88% !important;
    scroll-snap-align: start;

    /* reduce “tallness” */
    padding: 18px !important;
  }

  .testimonials .t-card blockquote {
    margin: 0 0 14px !important;
    line-height: 1.55;
  }

  .testimonials .t-card figcaption {
    margin-top: 10px !important;
  }

  .testimonials .t-link {
    display: inline-block;
    margin-top: 10px !important;
  }
}

/* =========================
   MOBILE — Services spacing (titles bumped down)
   ========================= */
@media (max-width: 640px) {
  /* more breathing room under the header for the hero */
  .page-hero.services-hero {
    padding-top: 28px !important;
  }

  /* bump section blocks down so headings don’t feel jammed */
  .services-band {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  /* specifically the section titles you’re using */
  .services-band .section-title {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
  }

  .services-band .section-subtext {
    margin-top: 0 !important;
  }

  /* if you’re jumping to anchors, avoid titles hiding under header */
  #overview,
  #find-your-fit,
  #process {
    scroll-margin-top: 110px;
  }
}

/* =========================
   MOBILE — Portfolio concept feature bumped down
   ========================= */
@media (max-width: 640px) {
  .concept-feature {
    margin-top: 22px !important;
    padding-top: 18px !important;
  }

  .concept-band {
    margin-top: 10px !important;
  }

  .concept-head .section-title {
    margin-top: 10px !important;
  }
}

/* =========================
   MOBILE — Case study spacing fixes
   - bump plum band section titles down
   - remove tiny gap above fixed header
   ========================= */

@media (max-width: 640px) {
  /* 1) Remove the tiny top gap above the fixed header */
  html,
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* If your header is fixed/sticky with a non-zero top value, force it flush */
  header,
  .header,
  .site-header,
  .nav,
  .nav-wrap {
    top: 0 !important;
  }

  /* 2) Case study band titles: add breathing room at top of plum bands */
  /* This targets the sections that visually look like “bands” without changing layout */
  .case-study-page section,
  body[class*="case"] section,
  body[class*="study"] section {
    scroll-margin-top: calc(var(--header-offset, 120px) + 14px);
  }

  /* Add extra top padding ONLY to band-style sections (common naming patterns) */
  .case-study-page section[class*="band"],
  .case-study-page section[class*="stripe"],
  .case-study-page section[class*="block"],
  body[class*="case"] section[class*="band"],
  body[class*="study"] section[class*="band"] {
    padding-top: calc(1rem + 18px) !important;
  }

  /* If those band headings are using a specific class, this keeps it tight + consistent */
  .case-study-page .section-title,
  .case-study-page h2.section-title,
  body[class*="case"] .section-title,
  body[class*="study"] .section-title {
    margin-top: 0 !important;
    padding-top: 10px; /* tiny internal nudge so the title never kisses the band edge */
  }
}

/* =========================
   MOBILE — Fix band titles sitting too high
   (Your .services-band-inner is pulled up with margin-top:-50px)
   ========================= */

@media (max-width: 640px) {
  /* Stop pulling the content up inside plum bands on mobile */
  .services-band-inner {
    margin-top: 0 !important;
  }

  /* Give the band a touch more top breathing room (subtle) */
  .services-band {
    padding-top: 15px !important; /* was 46px on mobile */
  }

  /* Optional micro-nudge so titles never kiss the top */
  .services-band .section-title {
    padding-top: 10px;
  }
}

/* =========================
   MOBILE — Portfolio concept band lift
   (gold "CONCEPT CASE STUDY" block)
   ========================= */

@media (max-width: 640px) {
  body.portfolio-page .concept-band {
    margin-top: -60px !important; /* was -50px */
  }
}

/* =========================
   MOBILE — Portfolio hero kicker spacing fix
   ========================= */

@media (max-width: 640px) {
  /* Reduce excess space above hero content */
  body.portfolio-page .portfolio-hero {
    padding-top: calc(var(--header-offset) - 20px) !important;
  }

  /* Slightly nudge the kicker downward so it clears header cleanly */
  body.portfolio-page .portfolio-hero .kicker {
    margin-top: 10px;
  }

  body.contact-page .contact-hero .kicker {
    margin-top: 27px;
  }
}

/* =========================
   MOBILE — Center + tighten H1 titles
   ========================= */

@media (max-width: 640px) {
  /* Center hero titles */
  .hero h1,
  .services-hero h1,
  .portfolio-hero h1,
  .brand-hero h1,
  .about-hero h1,
  .contact-hero h1 {
    text-align: center;
  }

  /* Tighten line spacing */
  .hero h1,
  .services-hero h1,
  .portfolio-hero h1,
  .brand-hero h1,
  .about-hero h1 {
    line-height: 1.15; /* was likely ~1.3–1.4 */
  }

  /* Reduce vertical spacing between lines */
  .hero h1 {
    margin-bottom: 14px;
  }
}

/* =========================
   /services/venues-wineries/
   Packages section: add outer breathing room so cards don't hug the band edge
   ========================= */

body.services-page.venues-page #packages .service-block {
  padding-left: 44px !important;
  padding-right: 44px !important;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Keep it sane on smaller screens */
@media (max-width: 900px) {
  body.services-page.venues-page #packages .service-block {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* =========================
   /services/venues-wineries/
   Lighten the recommendation helper line only
   ========================= */

body.services-page.venues-page
  #packages
  > .container
  > article.service-block
  > .small-note {
  color: white; /* softer than default ink */
  font-weight: 400;
}

/* =========================
   /services/venues-wineries/
   Prevent CTA pills from wrapping arrow to next line
   ========================= */

body.services-page.venues-page .package-card .btn-secondary {
  display: inline-flex; /* keeps text + arrow on one line */
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* prevents wrapping */
  padding-left: 18px; /* slightly wider */
  padding-right: 18px;
}

/* =========================
   services.html — How it works block
   Add inner side breathing room so the how-step cards don't hug the band edge
   ========================= */

section.services-band.services-process
  > .container
  > article.service-block.how-it-works#process {
  padding-left: 44px !important;
  padding-right: 44px !important;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Keep it comfortable on smaller screens */
@media (max-width: 900px) {
  section.services-band.services-process
    > .container
    > article.service-block.how-it-works#process {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* ===============================
   Package Cards – Button Alignment
   =============================== */

.package-grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

.package-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.package-card ul {
  margin-bottom: 1.25rem;
}

.package-card .btn,
.package-card .btn-outline {
  margin-top: auto;       /* pushes button to bottom */
  align-self: center;     /* centers horizontally */
}

/* =========================================
   PHOTO STRIP — FINAL (NO GAP, NO DRIFT)
   Replace your old HARD OVERRIDE block
   ========================================= */

.photo-strip {
  overflow: hidden !important;
}

.photo-strip .photo-strip__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: max-content !important;
  gap: 0 !important;
  will-change: transform !important;

  /* JS controls these */
  animation-name: kmc-photo-marquee !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-duration: var(--marquee-duration, 22s) !important;
}

.photo-strip .photo-strip__set {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--strip-gap, 16px) !important;
  flex: 0 0 auto !important;

  /* IMPORTANT: seam lives on EVERY set (no first-child special case) */
  padding-right: var(--strip-gap, 16px) !important;
}

.photo-strip .photo-strip__btn {
  all: unset !important;
  display: block !important;
  flex: 0 0 auto !important;
  cursor: zoom-in !important;
}

.photo-strip .photo-strip__btn img {
  display: block !important;
  height: clamp(92px, 16vw, 140px) !important;
  width: auto !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  background: #fff !important;
  padding: 6px !important;
}

@keyframes kmc-photo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--marquee-distance, 1000px)), 0, 0);
  }
}

.photo-strip:hover .photo-strip__track {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip .photo-strip__track {
    animation: none !important;
    transform: none !important;
  }
}

/* =========================
   PHOTO STRIP — STABLE SIZE + SEAMLESS LOOP
   ========================= */

.photo-strip {
  overflow: hidden;
  width: 100%;
}

.photo-strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: photoMarquee var(--marquee-duration, 22s) linear infinite;
}

/* Each set must shrink-wrap its content */
.photo-strip__set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding-right: 16px; /* seam */
}

/* Each item */
.photo-strip__btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* Image sizing: fixed height so they NEVER blow up */
.photo-strip__btn img {
  height: 94px;
  width: auto;
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

/* Adjust for larger screens */
@media (min-width: 900px) {
  .photo-strip__btn img {
    height: 110px;
  }
}

@keyframes photoMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--marquee-distance, 600px)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip__track {
    animation: none !important;
    transform: none !important;
  }
}

/* Ensure photo strip items can actually be clicked */
.photo-strip,
.photo-strip__track,
.photo-strip__set {
  pointer-events: auto;
}

.photo-strip__btn,
.photo-strip__btn * {
  pointer-events: auto;
}

.photo-strip__btn {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* =========================
   LIGHTBOX (required)
   ========================= */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.lightbox.is-open {
  display: block;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.lightbox-panel {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  margin: 6vh auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
}

.lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

/* Make sure nothing blocks clicks on the strip */
.photo-strip,
.photo-strip__track,
.photo-strip__set,
.photo-strip__btn {
  pointer-events: auto;
}

.photo-strip__btn {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 5;
}

/* If any strip overlays exist, they must not eat clicks */
.photo-strip::before,
.photo-strip::after,
.photo-strip__track::before,
.photo-strip__track::after {
  pointer-events: none;
}

/* === FORCE strip to accept clicks even if something earlier disables it === */
.photo-strip,
.photo-strip * {
  pointer-events: auto !important;
}

.photo-strip__btn {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* === FORCE lightbox visible when open (even if other CSS fights it) === */
#lightbox.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   FOOTER — Centered Brand Top + Link Grid Bottom (like your screenshot)
   Paste at VERY BOTTOM of style.css
========================================================= */

.site-footer.footer--centered {
  background: var(--plum);
  color: var(--bg);
  border-top: 1px solid rgba(246, 239, 230, 0.18);
  padding: 0 !important;
}

.site-footer.footer--centered .container {
  max-width: 1100px;
}

/* TOP: centered brand block */
.site-footer.footer--centered .footer-top {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 34px 0 18px;
}

.site-footer.footer--centered .footer-logo {
  width: min(520px, 92%);
  height: auto;
  margin: 0 0 12px;
  display: block;
}

.site-footer.footer--centered .footer-tagline {
  margin: 0 0 14px;
  max-width: 60ch;
  color: rgba(246, 239, 230, 0.82);
  line-height: 1.5;
}

.site-footer.footer--centered .footer-cta {
  margin-top: 2px;
}

.site-footer.footer--centered .footer-meta {
  margin-top: 14px;
  padding-top: 12px;
  width: min(820px, 92%);
  border-top: 1px solid rgba(246, 239, 230, 0.18);
  color: rgba(246, 239, 230, 0.72);
}

.site-footer.footer--centered .footer-meta p {
  margin: 0;
}

/* Divider between top + bottom */
.site-footer.footer--centered .footer-divider {
  height: 1px;
  width: 100%;
  background: rgba(246, 239, 230, 0.12);
}

/* BOTTOM: 5-column link grid */
.site-footer.footer--centered .footer-links {
  display: grid;
  gap: 22px;
  padding: 20px 0 34px;
  align-items: start;
}

/* Desktop */
@media (min-width: 980px) {
  .site-footer.footer--centered .footer-links {
    grid-template-columns: repeat(4, minmax(160px, 1fr)) minmax(220px, 1.2fr);
    column-gap: 44px;
  }
}

/* Kicker + lists keep your existing vibe but tighter */
.site-footer.footer--centered .footer-kicker {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  font-weight: 800;
  opacity: 0.92;
}

.site-footer.footer--centered .footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.site-footer.footer--centered .footer-list a {
  color: rgba(246, 239, 230, 0.82);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease, color 160ms ease;
  opacity: 0.92;
}

.site-footer.footer--centered .footer-list a:hover {
  opacity: 1;
  color: var(--bg);
  border-bottom-color: rgba(246, 239, 230, 0.55);
  transform: translateY(-1px);
}

/* Contact formatting */
.site-footer.footer--centered .footer-contact {
  display: grid;
  gap: 12px;
}

.site-footer.footer--centered .footer-contact-item {
  display: grid;
  gap: 3px;
}

.site-footer.footer--centered .footer-contact-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 239, 230, 0.68);
  margin: 0 !important;
}

.site-footer.footer--centered .footer-contact-value {
  color: rgba(246, 239, 230, 0.88);
  line-height: 1.35;
  margin: 0 !important;
}

.site-footer.footer--centered a.footer-contact-value:hover {
  color: var(--bg);
  text-decoration: underline;
}

/* Mobile: stack + center like your screenshot */
@media (max-width: 520px) {
  .site-footer.footer--centered .footer-links {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 18px 0 28px;
    gap: 16px;
  }

  .site-footer.footer--centered .footer-list {
    justify-items: center;
  }

  .site-footer.footer--centered .footer-contact {
    justify-items: center;
  }
}