/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
 Text Domain: twentytwentyfive-child
*/

/* Smooth scrolling for anchor links (modern browsers) */
html {
  scroll-behavior: smooth;
}

:root {
  /* our variables */
  --cc-bg: #050505;
  --cc-bg-soft: #101010;
  --cc-panel: #181511;
  --cc-panel-soft: #221b16;

  --cc-espresso: #442219;
  --cc-terracotta: #95461F;
  --cc-sage: #797049;
  --cc-olive: #49401F;

  --cc-cream: #f4f1e8;
  --cc-cream-soft: #f9f4ea;
  --cc-text-main: #f4f1e8;
  --cc-text-muted: #c5bfae;

  --cc-radius-lg: 28px;
  --cc-radius-md: 18px;
  --cc-radius-pill: 999px;

  --cc-shadow-soft: 0 22px 45px rgba(0,0,0,0.65);
  --cc-border-subtle: rgba(244,241,232,0.12);
}

/* ============================================
   CHRIS CAMPBELL — GLOBAL STYLES
   (Scoped so it doesn't disturb rest of site)
   ============================================ */

:root {
  --cc-bg: #050505;
  --cc-bg-soft: #101010;
  --cc-panel: #181511;
  --cc-panel-soft: #221b16;

  --cc-espresso: #442219;   /* deep brown */
  --cc-terracotta: #95461F; /* warm clay */
  --cc-sage: #797049;       /* sage drape */
  --cc-olive: #49401F;      /* olive stone */

  --cc-cream: #f4f1e8;
  --cc-cream-soft: #f9f4ea;
  --cc-text-main: #f4f1e8;
  --cc-text-muted: #c5bfae;

  --cc-radius-lg: 28px;
  --cc-radius-md: 18px;
  --cc-radius-pill: 999px;

  --cc-shadow-soft: 0 22px 45px rgba(0,0,0,0.65);
  --cc-border-subtle: rgba(244,241,232,0.12);
}

/* Base wrapper for all Chris pages */
.cc-site {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "DM Sans", "Work Sans", sans-serif;
  color: var(--cc-text-main);
  background: radial-gradient(circle at top left, #1b1511 0, #050505 55%, #000 100%);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 4.75rem) 1.75rem 5rem;
  box-sizing: border-box;
}

/* Typography */
.cc-site h1,
.cc-site h2,
.cc-site h3,
.cc-site h4 {
  font-family: "Cormorant Garamond", "Georgia", serif;
  letter-spacing: 0.03em;
  color: var(--cc-cream);
  margin: 0 0 0.75em;
}

.cc-site h1 {
  font-size: clamp(2.7rem, 4vw, 3.4rem);
  line-height: 1.05;
}

.cc-site h2 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.15;
}

.cc-site h3 {
  font-size: clamp(1.4rem, 2.3vw, 1.7rem);
}

.cc-site p {
  line-height: 1.7;
  font-size: 0.98rem;
  color: var(--cc-text-main);
  margin: 0 0 1.2em;
}

.cc-site .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--cc-sage);
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cc-site .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--cc-terracotta), transparent);
}

/* Layout helpers */
.cc-section {
  margin-bottom: clamp(3rem, 6vw, 4rem);
}

.cc-section-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: 1.75rem;
}

.cc-section-header p {
  max-width: 360px;
  font-size: 0.9rem;
  color: var(--cc-text-muted);
}

/* Panel / card */
.cc-panel {
  background: radial-gradient(circle at top left, rgba(149,70,31,0.24) 0, transparent 60%),
              radial-gradient(circle at bottom right, rgba(121,112,73,0.18) 0, transparent 55%),
              var(--cc-panel);
  border-radius: var(--cc-radius-lg);
  padding: clamp(1.9rem, 3vw, 2.4rem);
  border: 1px solid var(--cc-border-subtle);
  box-shadow: var(--cc-shadow-soft);
  position: relative;
  overflow: hidden;
}

/* Grid utilities */
.cc-grid {
  display: grid;
  gap: 1.3rem;
}

@media (min-width: 768px) {
  .cc-grid-2 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .cc-grid-3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Buttons */
.cc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

.cc-btn,
.cc-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--cc-radius-pill);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease-out;
  white-space: nowrap;
}

.cc-btn {
  background: linear-gradient(135deg, var(--cc-terracotta), #b76b2f);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.6);
}

.cc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.7);
  background: linear-gradient(135deg, #b76b2f, var(--cc-terracotta));
}

.cc-btn-outline {
  background: transparent;
  border-color: rgba(244,241,232,0.35);
  color: var(--cc-text-main);
}

.cc-btn-outline:hover {
  border-color: var(--cc-terracotta);
  background: rgba(149,70,31,0.14);
}

/* Badges / tags */
.cc-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
}

.cc-tag {
  border-radius: var(--cc-radius-pill);
  border: 1px solid rgba(244,241,232,0.22);
  padding: 0.25rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

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

.cc-hero {
  display: grid;
  gap: 2.2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .cc-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

.cc-hero-title {
  font-size: clamp(2.6rem, 4.1vw, 3.3rem);
}

.cc-hero p.lead {
  font-size: 1rem;
  max-width: 32rem;
  color: var(--cc-text-muted);
}

.cc-hero-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.7rem;
  margin-top: 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-hero-identity span::before {
  content: "✶";
  margin-right: 0.4rem;
  color: var(--cc-terracotta);
}

/* Hero image */
.cc-hero-portrait-wrap {
  position: relative;
}

.cc-hero-portrait {
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(244,241,232,0.16);
  background: #000;
}

.cc-hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cc-hero-glow {
  position: absolute;
  inset: 8%;
  border-radius: var(--cc-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(252,211,77,0.18) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(149,70,31,0.38) 0, transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

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

.cc-offering-grid {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 840px) {
  .cc-offering-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.cc-offering {
  background: radial-gradient(circle at top, rgba(149,70,31,0.35) 0, transparent 55%),
              radial-gradient(circle at bottom, rgba(68,34,25,0.9) 0, #17110e 60%);
  border-radius: var(--cc-radius-md);
  padding: 1.2rem 1.1rem 1.25rem;
  border: 1px solid rgba(244,241,232,0.12);
  position: relative;
  overflow: hidden;
}

.cc-offering::after {
  content: "";
  position: absolute;
  inset-inline: -25%;
  bottom: -50%;
  height: 45%;
  background: radial-gradient(circle at top, rgba(244,241,232,0.12) 0, transparent 70%);
  opacity: 0.6;
}

.cc-offering h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.cc-offering p {
  font-size: 0.86rem;
  color: var(--cc-text-muted);
}

.cc-offering-icon {
  font-size: 1.3rem;
  margin-bottom: 0.45rem;
}

/* --------------------------------------------
   IMAGE STRIP
   -------------------------------------------- */

.cc-image-strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}

.cc-image-chip {
  flex: 0 0 46%;
  border-radius: var(--cc-radius-md);
  overflow: hidden;
  border: 1px solid rgba(244,241,232,0.18);
  background: #000;
  position: relative;
}

@media (min-width: 820px) {
  .cc-image-chip {
    flex-basis: 30%;
  }
}

.cc-image-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------
   QUOTE / TESTIMONIAL
   -------------------------------------------- */

.cc-quote {
  border-radius: var(--cc-radius-lg);
  padding: 1.8rem 1.6rem;
  background: radial-gradient(circle at top left, rgba(121,112,73,0.35) 0, transparent 60%),
              #15100e;
  border: 1px solid rgba(244,241,232,0.18);
}

.cc-quote p {
  font-size: 0.94rem;
}

.cc-quote mark {
  background: linear-gradient(120deg, rgba(149,70,31,0.65), rgba(68,34,25,0.85));
  color: #fff;
  padding: 0.08em 0.25em;
  border-radius: 0.2em;
}

.cc-quote-footer {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

/* --------------------------------------------
   ABOUT PAGE
   -------------------------------------------- */

.cc-about-header {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 780px) {
  .cc-about-header {
    grid-template-columns: minmax(0,1.25fr) minmax(0,0.95fr);
  }
}

.cc-about-photo {
  border-radius: var(--cc-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(244,241,232,0.16);
  background: #000;
}

.cc-about-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.cc-about-meta {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.cc-about-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

/* --------------------------------------------
   CONTACT PAGE
   -------------------------------------------- */

.cc-contact-card {
  display: grid;
  gap: 1.8rem;
}

@media (min-width: 760px) {
  .cc-contact-card {
    grid-template-columns: 1.4fr 1fr;
  }
}

.cc-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  font-size: 0.92rem;
}

.cc-contact-list strong {
  font-weight: 600;
  color: var(--cc-cream);
}

.cc-contact-link {
  color: var(--cc-cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cc-contact-link:hover {
  color: var(--cc-terracotta);
}

/* Tiny helper for form embeds */
.cc-form-placeholder {
  border-radius: var(--cc-radius-md);
  border: 1px dashed rgba(244,241,232,0.26);
  padding: 1rem 1.2rem;
  font-size: 0.86rem;
  color: var(--cc-text-muted);
}

/* Spacing tweaks for last section on pages */
.cc-site .cc-section:last-of-type {
  margin-bottom: 0;
}

/* Make canvas pages truly edge-to-edge dark */
body.page-template-elementor_canvas {
  background: #050505;
}

.cc-site {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "DM Sans", "Work Sans", sans-serif;
  color: var(--cc-text-main);

  /* Full-width background, centered content */
  background: radial-gradient(circle at top left, #1b1511 0, #050505 55%, #000 100%);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  padding: clamp(3.5rem, 6vw, 4.75rem)
           clamp(1.5rem, 6vw, 3.5rem)
           5rem;
  box-sizing: border-box;
}

:root {
  --cc-bg: #050505;
  --cc-bg-soft: #101010;
  --cc-panel: #181511;
  --cc-panel-soft: #221b16;

  /* Core palette from the September Colour Palette image */
  --cc-espresso: #442219;  /* ESPRESSO CLAY  */
  --cc-terracotta: #95461F; /* TERRACOTTA EMBER (warm orange) */
  --cc-sage: #797049;      /* SAGE DRAPE      */
  --cc-olive: #49401F;     /* OLIVE STONE     */

  --cc-cream: #F4F1E8;
  --cc-cream-soft: #F9F4EA;
  --cc-text-main: #F4F1E8;
  --cc-text-muted: #C5BFAE;

  --cc-radius-lg: 28px;
  --cc-radius-md: 18px;
  --cc-radius-pill: 999px;

  --cc-shadow-soft: 0 22px 45px rgba(0,0,0,0.65);
  --cc-border-subtle: rgba(244,241,232,0.12);
}

/* Recolor Elementor icons inside the offerings grid to match palette */
.cc-offering .elementor-icon svg,
.cc-offering .elementor-icon i {
  color: var(--cc-cream);
  fill: var(--cc-cream);
}

/* Optional: give each card a slightly different tint */
.cc-offering:nth-child(1) .elementor-icon svg,
.cc-offering:nth-child(1) .elementor-icon i {
  color: var(--cc-sage);
  fill: var(--cc-sage);
}

.cc-offering:nth-child(2) .elementor-icon svg,
.cc-offering:nth-child(2) .elementor-icon i {
  color: var(--cc-terracotta);
  fill: var(--cc-terracotta);
}

.cc-offering:nth-child(3) .elementor-icon svg,
.cc-offering:nth-child(3) .elementor-icon i {
  color: var(--cc-cream);
  fill: var(--cc-cream);
}

.cc-offering:nth-child(4) .elementor-icon svg,
.cc-offering:nth-child(4) .elementor-icon i {
  color: var(--cc-olive);
  fill: var(--cc-olive);
}

.cc-offering:nth-child(5) .elementor-icon svg,
.cc-offering:nth-child(5) .elementor-icon i {
  color: var(--cc-sage);
  fill: var(--cc-sage);
}

.cc-site {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "DM Sans", "Work Sans", sans-serif;
  color: var(--cc-text-main);

  background: radial-gradient(circle at top left, #1b1511 0, #050505 55%, #000 100%);
  width: 100%;
  max-width: 1320px; /* or 1360 / 1440 if you want wider */
  margin: 0 auto;

  padding: clamp(3.5rem, 6vw, 4.75rem)
           clamp(1.5rem, 5vw, 3.5rem)
           5rem;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .cc-site {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Reduce hero image width on desktop */
.cc-hero-portrait {
  max-width: 420px;
}

@media (min-width: 1024px) {
  .cc-hero-portrait {
    max-width: 380px; /* slightly smaller on large screens */
  }
}

/* Global warm tint for all images inside the site */
.cc-site img {
  border-radius: var(--cc-radius-md);
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;

  /* Gentle warmth + muted highlight filter */
  filter: contrast(0.96) saturate(0.92) brightness(0.98);
}

/* Optional: add a soft bronze overlay tint */
.cc-site img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(149, 70, 31, 0.08); /* terracotta soft tint */
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cc-site figure,
.cc-site .elementor-widget-image,
.cc-site .cc-image-chip {
  position: relative;
  overflow: hidden; /* ensures overlay stays inside rounded corners */
}

/* Universal rounded corners for all images */
.cc-site img {
  border-radius: var(--cc-radius-lg);
}

/* Slightly smaller rounding inside grids for consistency */
.cc-offering img,
.cc-image-chip img {
  border-radius: var(--cc-radius-md);
}

.cc-offering img:hover,
.cc-image-chip img:hover {
  transform: scale(1.02);
  transition: transform 0.35s ease;
}

.cc-offering,
.cc-image-chip {
  transition: box-shadow 0.35s ease;
}

.cc-offering:hover,
.cc-image-chip:hover {
  box-shadow: 0 18px 45px rgba(0,0,0,0.45);
}

/* ---------------------------------
   NAVIGATION
   --------------------------------- */

.cc-nav {
  margin-bottom: 2.5rem;
}

.cc-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cc-nav-brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cc-nav-name {
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-cream);
}

.cc-nav-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-text-muted);
}

.cc-nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  align-items: center;
}

.cc-nav-link {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cc-text-muted);
  padding-bottom: 0.1rem;
  position: relative;
}

.cc-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cc-terracotta), transparent);
  transition: width 0.2s ease-out;
}

.cc-nav-link:hover {
  color: var(--cc-cream);
}

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

.cc-nav-cta {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(244,241,232,0.3);
  color: var(--cc-cream);
}

.cc-nav-cta:hover {
  border-color: var(--cc-terracotta);
  background: rgba(149,70,31,0.16);
}

/* Stack nav on small screens */
@media (max-width: 768px) {
  .cc-nav-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-nav-menu {
    padding-top: 0.5rem;
  }
}

/* HERO portrait rounding (in case Elementor resets it) */
.cc-hero-portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--cc-radius-lg);
}

.cc-hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cc-radius-lg);
}

/* Offering card images */
.cc-offering-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--cc-radius-md);
  margin-bottom: 0.9rem;
}

.cc-offering-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vibe strip images */
.cc-image-chip {
  position: relative;
  overflow: hidden;
  border-radius: var(--cc-radius-md);
}

.cc-image-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subtle warm tint overlay */
.cc-offering-media::before,
.cc-image-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top,
              rgba(149,70,31,0.22) 0,
              rgba(0,0,0,0.35) 70%);
  mix-blend-mode: multiply;
  opacity: 0.8;
  pointer-events: none;
}

/* Gentle global filter to unify photos */
.cc-offering-media img,
.cc-image-chip img,
.cc-hero-portrait img {
  filter: contrast(0.97) saturate(0.94) brightness(0.99);
}

.cc-hero-portrait {
  max-width: 380px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .cc-hero-portrait {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ---------------------------------
   SCROLL REVEAL ANIMATIONS
   --------------------------------- */

.cc-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.cc-reveal.cc-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------
   HOVER MICROINTERACTIONS
   --------------------------------- */

.cc-offering,
.cc-image-chip {
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out;
}

.cc-offering:hover,
.cc-image-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.55);
}

/* ---------------------------------
   FOOTER
   --------------------------------- */

.cc-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(244,241,232,0.12);
  font-size: 0.78rem;
  color: var(--cc-text-muted);
}

.cc-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  align-items: flex-end;
}

.cc-footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cc-footer-name {
  font-family: "Cormorant Garamond", "Georgia", serif;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-cream);
}

.cc-footer-tagline {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.cc-footer-copy {
  font-size: 0.75rem;
  color: var(--cc-text-muted);
}

.cc-footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: flex-end;
}

.cc-footer-link {
  text-decoration: none;
  color: var(--cc-text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  position: relative;
  padding-bottom: 0.1rem;
}

.cc-footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.22rem;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cc-terracotta), transparent);
  transition: width 0.18s ease-out;
}

.cc-footer-link:hover {
  color: var(--cc-cream);
}

.cc-footer-link:hover::after {
  width: 100%;
}

.cc-footer-top {
  opacity: 0.9;
}

/* Stack layout on small screens */
@media (max-width: 768px) {
  .cc-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-footer-right {
    justify-content: flex-start;
  }
}

/* ---------------------------------
   SPACE ALIGNMENT PAGE
   --------------------------------- */

.cc-space-hero {
  display: grid;
  gap: 2.2rem;
  align-items: center;
}

@media (min-width: 780px) {
  .cc-space-hero {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  }
}

.cc-space-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--cc-radius-lg);
  border: 1px solid var(--cc-border-subtle);
  box-shadow: var(--cc-shadow-soft);
  max-width: 440px;
  margin-left: auto;
}

.cc-space-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      145deg,
      rgba(121, 112, 73, 0.09),
      rgba(149, 70, 31, 0.12)
    );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cc-space-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: inherit;
  filter: contrast(0.97) saturate(0.92) brightness(0.98);
}

.cc-space-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 232, 0.18);
  background: rgba(149, 70, 31, 0.12);
  color: var(--cc-sage);
  font-family: Georgia, serif;
  font-size: 1.15rem;
}

.cc-process-card {
  height: 100%;
}

.cc-process-number {
  margin-bottom: 0.65rem;
  color: var(--cc-terracotta);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

@media (max-width: 779px) {
  .cc-space-photo {
    max-width: 360px;
    margin: 0 auto;
  }
}

.cc-support{
  --terra:#BE7136;      /* your accent */
  --terra-2:#D69A5A;    /* lighter accent for handles */
  --cream:#F0EDE2;
  --muted:#A08560;
  padding:clamp(2.75rem,6vw,4.5rem) 0;
}
.cc-support-inner{
  max-width:1080px;margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
}

.cc-support-title{
  font-family:Georgia,"Times New Roman",serif;  /* falls back to your heading font */
  font-weight:400;color:var(--cream);
  font-size:clamp(1.55rem,3.2vw,2.15rem);
  line-height:1.15;letter-spacing:.005em;
  margin:.35rem 0 .7rem;
}
.cc-support-lead{
  color:var(--muted);max-width:52ch;line-height:1.65;margin:0;font-size:1rem;
}
.cc-pay-grid{
  list-style:none;margin:1.9rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;
}
.cc-pay{
  display:flex;flex-direction:column;gap:.2rem;
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  text-decoration:none;
  background:rgba(190,113,54,.06);
  border:1px solid rgba(190,113,54,.30);
  border-radius:16px;
  padding:1.05rem 1.15rem;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.cc-pay:hover,.cc-pay:focus-visible{
  background:rgba(190,113,54,.14);
  border-color:var(--terra);
  transform:translateY(-3px);
  outline:none;
}
.cc-pay:focus-visible{box-shadow:0 0 0 2px rgba(214,154,90,.55)}
.cc-pay-plat{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.cc-pay-handle{
  font-size:1.02rem;color:var(--terra-2);font-weight:500;letter-spacing:.01em;
  word-break:break-word;
}
.cc-pay-zelle{position:relative}
.cc-pay-copy{
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,237,226,.42);margin-top:.2rem;transition:color .2s ease;
}
.cc-pay-zelle.is-copied{border-color:var(--terra)}
.cc-pay-zelle.is-copied .cc-pay-copy{color:var(--terra-2)}
 
@media (max-width:820px){ .cc-pay-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .cc-pay-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .cc-pay{transition:none}
  .cc-pay:hover,.cc-pay:focus-visible{transform:none}
}