:root {
  /* LIGHT Theme Config & Custom Variable Names based on 'Cordinox' */
  --cx-cream-bg: #F7F9FC;
  --cx-sheet-bg: #FFFFFF;
  --cx-crimson: #C8102E;
  --cx-crimson-hover: #A00B21;
  --cx-navy-ink: #101620;
  --cx-slate-muted: #4A5568;
  --cx-ice-border: #E2E8F0;
  
  /* Typography Configuration */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Open Sans', Helvetica, Arial, sans-serif;
  
  /* Theme Style Modifies: Soft border radius & raised shadows */
  --cx-radius: 16px; 
  --cx-shadow: 0 10px 15px -3px rgba(16, 22, 32, 0.05), 0 4px 6px -2px rgba(16, 22, 32, 0.03);
}

/* Base resets & layouts */
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}

/* Custom Semantic Max Width Wrapper */
.cx-shell-max {
  max-width: 1180px; /* Chosen randomly within specified 960px-1380px range */
}

/* CSS background patterns setup */
.cx-background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Sticky Split Layout Configurations */
@media (min-width: 768px) {
  .cx-sticky-photo-column {
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
  }
}

/* Custom Testimonial System Grid (Avoiding standard grid class footprint) */
.cx-review-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cx-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cx-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Interactive elements styles */
.cx-action-trigger {
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}

.cx-action-trigger:hover, .cx-action-trigger:focus {
  background-color: var(--cx-crimson-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(160, 11, 33, 0.4);
  outline: none;
}

/* Ensure headings uppercase rendering based on parameter heading-case */
h1, h2, h3 {
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Clean accessible style overrides */
a:focus-visible {
  outline: 3px solid var(--cx-crimson);
  outline-offset: 2px;
}