/* =============================================================
   NEOCATALYST — Navbar + Hero
   CSS Variables, Navbar, Hero, Animations, Responsive
============================================================= */

:root {
  /* Brand */
  --color-primary: #C56B39;
  --color-primary-strong: #a8582d;
  --color-ink: #231d18;
  --color-dark: #1f1813;
  --color-cream: #f6f2ec;
  --color-white: #ffffff;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;

  /* Layout */
  --nav-height: 80px;
  --container-max: 1400px;
  --gutter: 1.5rem;
  --gutter-lg: 2.5rem;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-base: 0.35s var(--ease-out-expo);

  /* z-index scale */
  --z-navbar: 1000;
  --z-hero-content: 10;
  --z-offcanvas-backdrop: 1040;
  --z-offcanvas: 1045;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-cream);
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* =============================================================
   SHARED LOGO
============================================================= */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
}

.logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out-expo);
}

.logo:hover .logo-dot {
  transform: scale(1.25);
}

.logo-text {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-white);
  transition: color var(--transition-base);
}

/* =============================================================
   NAVBAR
============================================================= */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--nav-height);
  z-index: var(--z-navbar);
  background: transparent;
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(35, 29, 24, 0.06), 0 12px 30px -16px rgba(35, 29, 24, 0.18);
}

.site-header.is-scrolled .logo-text {
  color: var(--color-ink);
}

.site-header.is-scrolled .nav-link {
  color: rgba(35, 29, 24, 0.72);
}

.site-header.is-scrolled .nav-link:hover {
  color: var(--color-ink);
}

.site-header.is-scrolled .hamburger-btn {
  border-color: rgba(35, 29, 24, 0.25);
  color: var(--color-ink);
}

.header-inner {
  position: relative;
  max-width: var(--container-max);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  .header-inner {
    padding-inline: var(--gutter-lg);
  }
}

/* Desktop nav: visually centered regardless of logo/CTA width */
.main-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 0.15rem;
}

@media (min-width: 992px) {
  .main-nav {
    display: flex;
  }
}

.nav-link {
  position: relative;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-base);
  white-space: nowrap;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.4rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}

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

.nav-link:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* CTA button (navbar) */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: gap 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo), filter 0.3s var(--ease-out-expo);
}

.btn-cta i {
  font-size: 0.8rem;
  transition: transform 0.3s var(--ease-out-expo);
}

.btn-cta:hover {
  gap: 0.7rem;
  color: var(--color-white);
  transform: scale(1.045);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px -10px rgba(197, 107, 57, 0.6);
}

.btn-cta:hover i {
  transform: translate(2px, -2px);
}

/* The header's inline "Book a Call" pill has `white-space: nowrap`,
   so it can never shrink below its full width. Combined with the
   logo and the hamburger button, that's more width than a phone-size
   viewport has available, which overflows the header horizontally
   and forces a page-wide scrollbar. Hide it below the point where
   it stops fitting — the mobile off-canvas menu already has its own
   "Book a Call" button (.btn-cta--mobile) once opened. */
@media (max-width: 575.98px) {
  .header-actions .btn-cta {
    display: none;
  }
}

.btn-cta--mobile {
  width: 100%;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  margin-top: 1.5rem;
}

/* Hamburger */
.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--color-white);
  padding: 0;
  transition: border-color var(--transition-base), color var(--transition-base);
}

@media (min-width: 992px) {
  .hamburger-btn {
    display: none;
  }
}

.hamburger-bars {
  position: relative;
  width: 16px;
  height: 11px;
  display: block;
}

.hamburger-bars .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out-expo), opacity 0.25s var(--ease-out-expo), top 0.35s var(--ease-out-expo);
}

.bar-1 { top: 0; }
.bar-2 { top: 4.5px; }
.bar-3 { top: 9px; }

/* Animate hamburger into an X when the menu is open */
.hamburger-btn.is-active .bar-1 {
  top: 4.5px;
  transform: rotate(45deg);
}

.hamburger-btn.is-active .bar-2 {
  opacity: 0;
}

.hamburger-btn.is-active .bar-3 {
  top: 4.5px;
  transform: rotate(-45deg);
}

/* =============================================================
   MOBILE OFF-CANVAS MENU
============================================================= */

.mobile-menu {
  width: min(420px, 86vw);
  background: var(--color-white);
  border: none;
  z-index: var(--z-offcanvas);
  transition: transform 0.45s var(--ease-out-expo) !important;
}

.offcanvas-backdrop {
  z-index: var(--z-offcanvas-backdrop);
}

.offcanvas-backdrop.show {
  opacity: 0.4;
}

.mobile-menu .offcanvas-header {
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid rgba(35, 29, 24, 0.08);
}

.mobile-menu .logo-text,
.mobile-menu .logo-dot {
  color: var(--color-ink);
}

.mobile-menu .logo-dot {
  background: var(--color-primary);
}

.btn-close-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(35, 29, 24, 0.15);
  background: transparent;
  color: var(--color-ink);
  font-size: 1rem;
  transition: background var(--transition-base), transform var(--transition-base);
}

.btn-close-mobile:hover {
  background: rgba(35, 29, 24, 0.06);
  transform: rotate(90deg);
}

.mobile-menu .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 1rem var(--gutter) 2.5rem;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: block;
  padding: 1.15rem 0.25rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid rgba(35, 29, 24, 0.08);
  transition: color var(--transition-base), padding-left var(--transition-base);
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  color: var(--color-primary);
  padding-left: 0.6rem;
}

/* =============================================================
   HERO SECTION
============================================================= */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Flat dark wash for overall readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Extra bottom-weighted gradient so the lower-anchored copy stays legible */
.hero-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 80%);
}

.hero-content {
  position: relative;
  z-index: var(--z-hero-content);
  max-width: var(--container-max);
  height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) 4.5rem;
}

@media (min-width: 768px) {
  .hero-content {
    padding-inline: var(--gutter-lg);
    padding-bottom: 6.5rem;
  }
}

.hero-eyebrow {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.85;
}

.hero-heading {
  margin: 0;
  max-width: 56rem;
  color: var(--color-white);
}

.line-mask {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 33px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.line-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

@media (min-width: 768px) {
  .line-inner {
    font-size: 56px;
  }
}

@media (min-width: 1200px) {
  .line-inner {
    font-size: 75px;
  }
}

.hero-desc {
  max-width: 600px;
  margin: 1.75rem 0 0;
  color: var(--color-white);
  opacity: 0.85;
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .hero-desc {
    font-size: 1.125rem;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

@media (max-width: 575.98px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo),
    gap 0.3s var(--ease-out-expo), background-color 0.3s var(--ease-out-expo),
    color 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), filter 0.3s var(--ease-out-expo);
}

.btn-hero i {
  font-size: 0.95rem;
  transition: transform 0.3s var(--ease-out-expo);
}

.btn-hero:hover i {
  transform: translate(2px, -2px);
}

.btn-hero-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-hero-primary:hover {
  color: var(--color-white);
  gap: 0.8rem;
  filter: brightness(1.08);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.btn-hero-secondary {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}

.btn-hero-secondary:hover {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
  transform: translateY(-3px);
}

@media (max-width: 575.98px) {
  .btn-hero {
    width: 100%;
  }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: var(--z-hero-content);
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.75;
}

@media (min-width: 768px) {
  .scroll-indicator {
    display: flex;
    right: var(--gutter-lg);
  }
}

.scroll-indicator i {
  animation: scroll-bounce 2s var(--ease-out-quart) infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* =============================================================
   ENTRANCE ANIMATIONS
============================================================= */

.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-up 0.8s var(--ease-out-expo) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.line-inner {
  transform: translateY(110%);
  animation: line-reveal 0.9s var(--ease-out-expo) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes line-reveal {
  to {
    transform: translateY(0);
  }
}

/* Respect reduced motion: swap reveals for an instant, accessible appearance */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-up,
  .line-inner,
  .scroll-indicator i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================
   OUR APPROACH SECTION
============================================================= */

.approach-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .approach-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.approach-container {
  max-width: 1400px;
}

.approach-label {
  margin: 0 0 50px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.approach-heading {
  margin: 0;
  max-width: 1400px;
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.15;
  color: #1E1E1E;
}

.approach-line {
  display: block;
  font-size: 27px;
  opacity: 0.15;
  filter: blur(8px);
  transform: translateY(24px);
  transition: opacity 1.2s var(--ease-out-expo), filter 1.2s var(--ease-out-expo),
    transform 1.2s var(--ease-out-expo);
  transition-delay: var(--line-delay, 0ms);
  will-change: opacity, filter, transform;
}

@media (min-width: 768px) {
  .approach-line {
    font-size: 44px;
  }
}

@media (min-width: 1200px) {
  .approach-line {
    font-size: 56px;
  }
}

.approach-heading.is-revealed .approach-line {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.approach-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.approach-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 80px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1E1E1E;
  transition: color 0.4s ease;
}

.approach-link-text {
  position: relative;
}

.approach-link-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right 0.4s ease;
}

.approach-link:hover .approach-link-text::after {
  right: 0;
}

.approach-link i {
  color: var(--color-primary);
  font-size: 1.1rem;
  transition: transform 0.4s ease;
}

.approach-link:hover i {
  transform: translate(4px, -4px);
}

@media (max-width: 575.98px) {
  .approach-link {
    margin-top: 56px;
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approach-line {
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* =============================================================
   SERVICES / WHAT WE DO SECTION
============================================================= */

.services-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .services-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .services-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.services-container {
  max-width: 1400px;
}

.services-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 80px;
}

@media (min-width: 768px) {
  .services-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

.services-label {
  margin: 0 0 30px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.services-heading {
  margin: 0;
  max-width: 700px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .services-heading {
    font-size: 44px;
  }
}

@media (min-width: 1200px) {
  .services-heading {
    font-size: 56px;
  }
}

.services-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .services-link {
    margin-bottom: 0.5rem;
  }
}

.services-link-text {
  position: relative;
}

.services-link-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right 0.4s ease;
}

.services-link:hover .services-link-text::after {
  right: 0;
}

.services-link i {
  color: var(--color-primary);
  transition: transform 0.4s ease;
}

.services-link:hover i {
  transform: translate(4px, -4px);
}

/* List */
.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(30, 30, 30, 0.12);
}

.service-row-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.services-list.is-revealed .service-row-item {
  opacity: 1;
  transform: translateY(0);
}

.service-row-item:nth-child(1) { transition-delay: 0ms; }
.service-row-item:nth-child(2) { transition-delay: 100ms; }
.service-row-item:nth-child(3) { transition-delay: 200ms; }
.service-row-item:nth-child(4) { transition-delay: 300ms; }
.service-row-item:nth-child(5) { transition-delay: 400ms; }
.service-row-item:nth-child(6) { transition-delay: 500ms; }
.service-row-item:nth-child(7) { transition-delay: 600ms; }
.service-row-item:nth-child(8) { transition-delay: 700ms; }

.service-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1.5rem;
  padding: 28px 4px;
  margin: 0;
  border: none;
  border-bottom: 1px solid rgba(30, 30, 30, 0.12);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.4s ease;
}

@media (min-width: 768px) {
  .service-row {
    gap: 2.5rem;
    padding: 34px 8px;
  }
}

.service-number {
  flex-shrink: 0;
  width: 2.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #666;
  transition: color 0.4s ease;
}

.service-title {
  flex: 1 1 auto;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.15;
  color: #1E1E1E;
  transition: color 0.4s ease;
}

@media (min-width: 768px) {
  .service-title {
    font-size: 32px;
  }
}

@media (min-width: 1200px) {
  .service-title {
    font-size: 42px;
  }
}

.service-desc {
  flex: 0 1 450px;
  max-width: 450px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  transition: color 0.4s ease;
}

@media (min-width: 768px) {
  .service-desc {
    font-size: 16px;
  }
}

.service-arrow {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.3rem;
  color: #999;
  transition: color 0.4s ease, transform 0.4s ease;
}

/* Hover + active state (shared) */
.service-row:hover,
.service-row:focus-visible,
.service-row.is-active {
  background-color: #1A1410;
  transform: translateX(5px);
}

.service-row:hover .service-title,
.service-row:focus-visible .service-title,
.service-row.is-active .service-title {
  color: #FFFFFF;
}

.service-row:hover .service-desc,
.service-row:focus-visible .service-desc,
.service-row.is-active .service-desc {
  color: #E5E5E5;
}

.service-row:hover .service-number,
.service-row:focus-visible .service-number,
.service-row.is-active .service-number {
  color: var(--color-primary);
}

.service-row:hover .service-arrow,
.service-row:focus-visible .service-arrow,
.service-row.is-active .service-arrow {
  color: var(--color-primary);
  transform: translate(4px, -4px);
}

.service-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Mobile: stack each row's content */
@media (max-width: 767.98px) {
  .service-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 24px 4px;
  }

  .service-number {
    width: auto;
  }

  .service-desc {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .service-arrow {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-row-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .service-row,
  .service-row:hover,
  .service-row:focus-visible,
  .service-row.is-active,
  .service-arrow,
  .service-row:hover .service-arrow,
  .service-row:focus-visible .service-arrow,
  .service-row.is-active .service-arrow {
    transition: background-color 0.4s ease, color 0.4s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   SELECTED WORK / PORTFOLIO SECTION
============================================================= */

.portfolio-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .portfolio-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .portfolio-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.portfolio-container {
  max-width: 1400px;
}

.portfolio-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .portfolio-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

.portfolio-label {
  margin: 0 0 25px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.portfolio-heading {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .portfolio-heading {
    font-size: 44px;
  }
}

@media (min-width: 1200px) {
  .portfolio-heading {
    font-size: 56px;
  }
}

.portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .portfolio-link {
    margin-bottom: 0.5rem;
  }
}

.portfolio-link-text {
  position: relative;
}

.portfolio-link-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right 0.4s ease;
}

.portfolio-link:hover .portfolio-link-text::after {
  right: 0;
}

.portfolio-link i {
  color: var(--color-primary);
  transition: transform 0.4s ease;
}

.portfolio-link:hover i {
  transform: translate(4px, -4px);
}

/* Grid */
.portfolio-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

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

.portfolio-item {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.portfolio-grid.is-revealed .portfolio-item {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item:nth-child(1) { transition-delay: 0ms; }
.portfolio-item:nth-child(2) { transition-delay: 150ms; }
.portfolio-item:nth-child(3) { transition-delay: 300ms; }
.portfolio-item:nth-child(4) { transition-delay: 450ms; }
.portfolio-item:nth-child(5) { transition-delay: 600ms; }
.portfolio-item:nth-child(6) { transition-delay: 750ms; }

/* Card */
.portfolio-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s ease;
}

.portfolio-card:hover,
.portfolio-card:focus-visible {
  transform: translateY(-10px);
}

.portfolio-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: 20px;
}

.portfolio-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  height: 320px;
  background: #e5ddd1;
}

@media (min-width: 768px) {
  .portfolio-media {
    height: 420px;
  }
}

@media (min-width: 1200px) {
  .portfolio-media {
    height: 500px;
  }
}

.portfolio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateY(var(--parallax-y, 0px)) scale(1);
  transition: transform 0.5s ease;
  will-change: transform;
}

.portfolio-card:hover .portfolio-media img,
.portfolio-card:focus-visible .portfolio-media img {
  transform: translateY(var(--parallax-y, 0px)) scale(1.05);
}

.portfolio-badge-category {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1E1E1E;
}

.portfolio-badge-result {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(25, 25, 25, 0.85);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.5s ease;
}

.portfolio-card:hover .portfolio-badge-result,
.portfolio-card:focus-visible .portfolio-badge-result {
  background: rgba(25, 25, 25, 0.95);
}

.portfolio-result-metric {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--color-primary);
  line-height: 1.1;
}

.portfolio-result-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.portfolio-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 25px;
}

.portfolio-body-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 90%;
}

.portfolio-title {
  display: block;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: #1E1E1E;
}

@media (min-width: 1200px) {
  .portfolio-title {
    font-size: 34px;
  }
}

.portfolio-desc {
  display: block;
  font-size: 16px;
  line-height: 1.7;
  color: #666;
}

.portfolio-arrow {
  flex-shrink: 0;
  margin-top: 0.3rem;
  font-size: 1.3rem;
  color: var(--color-primary);
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-arrow,
.portfolio-card:focus-visible .portfolio-arrow {
  transform: translate(5px, -5px);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .portfolio-card,
  .portfolio-card:hover,
  .portfolio-card:focus-visible,
  .portfolio-media img,
  .portfolio-card:hover .portfolio-media img,
  .portfolio-card:focus-visible .portfolio-media img,
  .portfolio-arrow,
  .portfolio-card:hover .portfolio-arrow,
  .portfolio-card:focus-visible .portfolio-arrow {
    transition: background-color 0.4s ease, color 0.4s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   FOUNDER'S INSIGHTS SECTION
============================================================= */

.insights-section {
  background: #1A110C;
  background: linear-gradient(180deg, #1A110C 0%, #120B08 100%);
  color: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .insights-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .insights-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.insights-container {
  max-width: 1400px;
}

.insights-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 80px;
}

@media (min-width: 768px) {
  .insights-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }
}

/* Scroll-gated reveal: label, heading, link each fade/rise once the
   section enters view (NOT the load-triggered .reveal-up utility,
   which would already have finished animating by the time a user
   scrolls this far down the page). */
.insights-label,
.insights-heading,
.insights-link {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.insights-section.is-revealed .insights-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.insights-section.is-revealed .insights-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 100ms;
}

.insights-section.is-revealed .insights-link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

.insights-label {
  margin: 0 0 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.insights-heading {
  margin: 0;
  max-width: 650px;
  font-size: 33px;
  font-weight: 300;
  line-height: 1.1;
  color: #F6F3EF;
}

@media (min-width: 768px) {
  .insights-heading {
    font-size: 47px;
  }
}

@media (min-width: 1200px) {
  .insights-heading {
    font-size: 61px;
  }
}

.insights-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 500;
  color: #F6F3EF;
}

@media (min-width: 768px) {
  .insights-link {
    margin-bottom: 0.4rem;
  }
}

.insights-link-text {
  position: relative;
}

.insights-link-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right 0.4s ease;
}

.insights-link:hover .insights-link-text::after {
  right: 0;
}

.insights-link i {
  color: var(--color-primary);
  transition: transform 0.4s ease;
}

.insights-link:hover i {
  transform: translate(4px, -4px);
}

/* Connected card container: a single bordered, rounded, clipped grid.
   The 1px gap shows the container's own translucent background through
   it, which is what creates the hairline divider between cards (and
   between stacked cards on mobile) without per-card border juggling. */
.insights-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  overflow: hidden;
}

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

.insights-item {
  background: #1A110C;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.insights-grid.is-revealed .insights-item {
  opacity: 1;
  transform: translateY(0);
}

.insights-item:nth-child(1) { transition-delay: 0ms; }
.insights-item:nth-child(2) { transition-delay: 150ms; }
.insights-item:nth-child(3) { transition-delay: 300ms; }

.insights-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 30px;
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.4s ease, transform 0.4s ease;
}

@media (min-width: 768px) {
  .insights-card {
    padding: 2.5rem;
  }
}

.insights-card:hover,
.insights-card:focus-visible {
  background: #231610;
  transform: translateY(-5px);
}

.insights-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -4px;
}

.insights-category {
  display: block;
  margin-bottom: 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.insights-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.insights-title {
  display: block;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  color: #F6F3EF;
  transition: color 0.4s ease;
}

@media (min-width: 768px) {
  .insights-title {
    font-size: 30px;
  }
}

@media (min-width: 1200px) {
  .insights-title {
    font-size: 34px;
  }
}

.insights-card:hover .insights-title,
.insights-card:focus-visible .insights-title {
  color: #FFFFFF;
}

.insights-arrow {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.4s ease;
}

.insights-card:hover .insights-arrow,
.insights-card:focus-visible .insights-arrow {
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .insights-label,
  .insights-heading,
  .insights-link,
  .insights-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .insights-card,
  .insights-card:hover,
  .insights-card:focus-visible {
    transition: background-color 0.4s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   CONTACT / START A CONVERSATION SECTION
============================================================= */

.contact-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .contact-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .contact-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.contact-container {
  max-width: 1400px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

@media (min-width: 992px) {
  .contact-grid {
    /* 9fr : 11fr === 45% : 55%, and fr units (unlike percentages)
       correctly subtract the gap instead of overflowing past it. */
    grid-template-columns: 9fr 11fr;
    gap: 80px;
  }
}

/* Scroll-gated reveal, same approach as Founder's Insights: an
   IntersectionObserver on the section toggles .is-revealed, and each
   child fades/rises with its own delay. */
.contact-label,
.contact-heading,
.contact-desc,
.contact-form-wrap {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.contact-section.is-revealed .contact-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.contact-section.is-revealed .contact-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.contact-section.is-revealed .contact-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.contact-section.is-revealed .contact-form-wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

.contact-label {
  margin: 0 0 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.contact-heading {
  margin: 0 0 60px;
  max-width: 450px;
  font-size: 37px;
  font-weight: 300;
  line-height: 1.1;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .contact-heading {
    font-size: 56px;
  }
}

@media (min-width: 1200px) {
  .contact-heading {
    font-size: 72px;
  }
}

.contact-desc {
  margin: 0;
  max-width: 450px;
  font-size: 18px;
  line-height: 1.8;
  color: #666;
}

.contact-email-link {
  color: #1E1E1E;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.contact-email-link:hover {
  color: var(--color-primary);
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 576px) {
  .contact-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.contact-field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #666;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #D8D1CB;
  padding: 0 0 15px;
  margin: 0;
  font-family: inherit;
  font-size: 18px;
  color: #1E1E1E;
  outline: none;
  transition: border-color 0.3s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #AAA;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--color-primary);
}

.contact-field textarea {
  height: 140px;
  line-height: 1.5;
  resize: none;
}

.contact-submit {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  margin-top: 40px;
  padding: 18px 36px;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.4s ease, transform 0.4s ease, gap 0.4s ease;
}

.contact-submit:hover {
  background: #B45B2D;
  transform: translateY(-3px);
  gap: 0.75rem;
}

.contact-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.contact-form-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--color-primary);
}

@media (max-width: 575.98px) {
  .contact-submit {
    width: 100%;
    justify-content: center;
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-label,
  .contact-heading,
  .contact-desc,
  .contact-form-wrap {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .contact-submit,
  .contact-submit:hover {
    transition: background-color 0.4s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   FOOTER
============================================================= */

.site-footer {
  background: #1A110C;
  color: #F6F3EF;
  padding-top: 0;
  padding-bottom: 30px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .site-footer {
    padding-bottom: 40px;
  }
}

.footer-container {
  max-width: 1400px;
}

/* Marquee */
.footer-marquee {
  width: 100%;
  overflow: hidden;
  padding: 24px 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-expo);
}

@media (min-width: 768px) {
  .footer-marquee {
    padding: 32px 0;
  }
}

.site-footer.is-revealed .footer-marquee {
  opacity: 1;
}

.footer-marquee-track {
  display: flex;
  width: max-content;
  animation: footer-marquee-scroll 30s linear infinite;
}

@keyframes footer-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Item margin is 40px on each side at every breakpoint, so the gap
   between one word's dot and the next word's text is always a flat
   80px (40 + 40) regardless of font-size scaling. */
.footer-marquee-item {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  margin: 0 40px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 33px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer-marquee-item {
    font-size: 62px;
  }
}

@media (min-width: 1200px) {
  .footer-marquee-item {
    font-size: 86px;
  }
}

.footer-marquee-dot {
  margin-left: 16px;
  color: var(--color-primary);
}

/* CTA */
.footer-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 60px;
}

@media (min-width: 768px) {
  .footer-cta {
    padding-top: 100px;
  }
}

@media (min-width: 992px) {
  .footer-cta {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: 3rem;
  }
}

.footer-cta-text,
.footer-cta-btn {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.site-footer.is-revealed .footer-cta-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 100ms;
}

.site-footer.is-revealed .footer-cta-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

.footer-cta-label {
  margin: 0 0 25px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.footer-cta-heading {
  margin: 0;
  font-size: 33px;
  font-weight: 300;
  line-height: 1.1;
  color: #F6F3EF;
}

@media (min-width: 768px) {
  .footer-cta-heading {
    font-size: 47px;
  }
}

@media (min-width: 1200px) {
  .footer-cta-heading {
    font-size: 61px;
  }
}

.footer-cta-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  padding: 18px 36px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.4s ease, transform 0.4s ease, gap 0.4s ease;
}

.footer-cta-btn:hover {
  background: #B85D2F;
  color: #FFFFFF;
  transform: translateY(-4px);
  gap: 0.75rem;
}

.footer-cta-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

@media (max-width: 767.98px) {
  .footer-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Footer content columns */
.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
  transition-delay: 300ms;
}

.site-footer.is-revealed .footer-columns {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(12, 1fr);
  }

  .footer-col-about,
  .footer-col-sitemap,
  .footer-col-legal,
  .footer-col-connect {
    grid-column: span 3;
  }
}

.footer-logo .logo-text {
  color: #F6F3EF;
}

.footer-about-text {
  margin: 1.25rem 0 0;
  max-width: 420px;
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.75);
}

.footer-col-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.footer-link-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-link-list a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-link-list a:hover,
.footer-link-list a:focus-visible {
  color: var(--color-primary);
  padding-left: 5px;
}

.footer-link-list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Social icon row — always one row; wraps only if the column
   gets too narrow to hold all icons (e.g. extreme zoom). */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-3px);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Copyright bar */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 576px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

.footer-bottom p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-marquee-track {
    animation: none !important;
  }

  .footer-marquee,
  .footer-cta-text,
  .footer-cta-btn,
  .footer-columns {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .footer-social-link:hover,
  .footer-social-link:focus-visible {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
    transform: none !important;
  }

  .footer-cta-btn,
  .footer-cta-btn:hover {
    transition: background-color 0.4s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   ABOUT HERO — "Who We Are" (about.html)
============================================================= */

.about-hero {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .about-hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .about-hero {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.about-hero-container {
  max-width: 1400px;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .about-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
}

/* Scroll-gated reveal: same IntersectionObserver pattern used by every
   other section — label, heading, description, and image each fade
   and rise in with their own stagger. */
.about-hero-label,
.about-hero-heading,
.about-hero-desc-group,
.about-hero-media {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.about-hero.is-revealed .about-hero-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.about-hero.is-revealed .about-hero-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.about-hero.is-revealed .about-hero-desc-group {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

.about-hero.is-revealed .about-hero-media {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 450ms;
}

.about-hero-label {
  margin: 0 0 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.about-hero-heading {
  margin: 0 0 40px;
  font-weight: 300;
  line-height: 1.1;
  color: #1E1E1E;
}

.about-hero-line {
  display: block;
  font-size: 37px;
}

@media (min-width: 768px) {
  .about-hero-line {
    font-size: 55px;
  }
}

@media (min-width: 1200px) {
  .about-hero-line {
    font-size: 70px;
  }
}

.about-hero-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.about-hero-desc-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-hero-desc {
  margin: 0;
  max-width: 650px;
  font-size: 18px;
  line-height: 1.8;
  color: #5A5A5A;
}

@media (min-width: 768px) {
  .about-hero-desc {
    font-size: 22px;
    line-height: 1.9;
  }
}

.about-hero-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  width: 100%;
  height: 350px;
}

@media (min-width: 768px) {
  .about-hero-media {
    border-radius: 24px;
    height: 550px;
  }
}

@media (min-width: 1200px) {
  .about-hero-media {
    height: 700px;
  }
}

.about-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.about-hero-media:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-label,
  .about-hero-heading,
  .about-hero-desc-group,
  .about-hero-media {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .about-hero-media img {
    transition: none !important;
  }

  .about-hero-media:hover img {
    transform: none !important;
  }
}

/* =============================================================
   FOUNDER STORY — "Meet Jinshina" (about.html)
============================================================= */

.founder-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .founder-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .founder-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.founder-container {
  max-width: 1400px;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .founder-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
}

/* Scroll-gated reveal: image, label+heading together, quote,
   description, and stats each fade/rise with their own delay once
   the section enters view. */
.founder-media,
.founder-label,
.founder-heading,
.founder-quote,
.founder-desc,
.founder-stats {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.founder-section.is-revealed .founder-media {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.founder-section.is-revealed .founder-label,
.founder-section.is-revealed .founder-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.founder-section.is-revealed .founder-quote {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

.founder-section.is-revealed .founder-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 450ms;
}

.founder-section.is-revealed .founder-stats {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 600ms;
}

.founder-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  width: 100%;
  height: 450px;
  box-shadow: 0 30px 60px -20px rgba(30, 20, 10, 0.25);
}

@media (min-width: 768px) {
  .founder-media {
    height: 750px;
  }
}

.founder-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.founder-media:hover img {
  transform: scale(1.04);
}

.founder-label {
  margin: 0 0 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.founder-heading {
  margin: 0 0 40px;
  font-weight: 300;
  font-size: 37px;
  line-height: 1.1;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .founder-heading {
    font-size: 50px;
  }
}

@media (min-width: 1200px) {
  .founder-heading {
    font-size: 64px;
  }
}

.founder-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.founder-quote {
  margin: 0;
  padding-left: 30px;
  border-left: 4px solid var(--color-primary);
}

.founder-quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.6;
  color: #2A2A2A;
}

@media (min-width: 768px) {
  .founder-quote p {
    font-size: 34px;
  }
}

.founder-quote p::before {
  content: "\201C";
  margin-right: 0.1em;
  color: var(--color-primary);
}

.founder-quote p::after {
  content: "\201D";
  margin-left: 0.1em;
  color: var(--color-primary);
}

.founder-desc {
  margin: 40px 0 60px;
  max-width: 650px;
  font-size: 18px;
  line-height: 1.9;
  color: #5F5F5F;
}

@media (min-width: 768px) {
  .founder-desc {
    font-size: 22px;
  }
}

.founder-desc strong {
  font-weight: 600;
  color: #1E1E1E;
}

.founder-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 0;
}

.founder-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Grid items default to min-width: auto, so an unbreakable word like
     "Hospitality" would otherwise force this column (and the whole
     page) wider than the viewport. */
  min-width: 0;
}

.founder-stat-number {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  color: var(--color-primary);
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .founder-stat-number {
    font-size: 48px;
  }
}

@media (min-width: 1200px) {
  .founder-stat-number {
    font-size: 58px;
  }
}

.founder-stat-label {
  margin: 0;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #666;
}

@media (prefers-reduced-motion: reduce) {
  .founder-media,
  .founder-label,
  .founder-heading,
  .founder-quote,
  .founder-desc,
  .founder-stats {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .founder-media img {
    transition: none !important;
  }

  .founder-media:hover img {
    transform: none !important;
  }
}

/* =============================================================
   PHILOSOPHY (about.html)
============================================================= */

.philosophy-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .philosophy-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .philosophy-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.philosophy-container {
  max-width: 1400px;
}

.philosophy-label,
.philosophy-heading,
.philosophy-desc {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.philosophy-section.is-revealed .philosophy-label,
.philosophy-section.is-revealed .philosophy-heading,
.philosophy-section.is-revealed .philosophy-desc {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-label {
  margin: 0 0 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.philosophy-heading {
  margin: 0 0 40px;
  max-width: 900px;
  font-weight: 300;
  line-height: 1.1;
  font-size: 37px;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .philosophy-heading {
    font-size: 50px;
  }
}

@media (min-width: 1200px) {
  .philosophy-heading {
    font-size: 64px;
  }
}

.philosophy-desc {
  margin: 0 0 80px;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.8;
  color: #5F5F5F;
}

@media (min-width: 768px) {
  .philosophy-desc {
    font-size: 22px;
  }
}

@media (min-width: 1200px) {
  .philosophy-desc {
    font-size: 24px;
  }
}

/* Grid */
.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .philosophy-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* Entrance reveal lives on the wrapper (.philosophy-card-item); the
   hover lift/shadow/border live on the card itself (.philosophy-card).
   Splitting them across two elements avoids both effects fighting over
   the same `transform` transition timing (one element, one property,
   one transition duration — the entrance's slow staggered 800ms would
   otherwise make the hover lift feel laggy). */
.philosophy-card-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.philosophy-grid.is-revealed .philosophy-card-item {
  opacity: 1;
  transform: translateY(0);
}

.philosophy-card-item:nth-child(1) { transition-delay: 0ms; }
.philosophy-card-item:nth-child(2) { transition-delay: 150ms; }
.philosophy-card-item:nth-child(3) { transition-delay: 300ms; }
.philosophy-card-item:nth-child(4) { transition-delay: 450ms; }

.philosophy-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 220px;
  padding: 30px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 18px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

@media (min-width: 768px) {
  .philosophy-card {
    min-height: 250px;
    padding: 40px;
    border-radius: 24px;
  }
}

.philosophy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.3);
}

.philosophy-card-title {
  position: relative;
  z-index: 2;
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .philosophy-card-title {
    font-size: 42px;
  }
}

.philosophy-card-desc {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 90%;
  font-size: 17px;
  line-height: 1.9;
  color: #5F5F5F;
}

@media (min-width: 768px) {
  .philosophy-card-desc {
    font-size: 22px;
  }
}

.philosophy-card-number {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  right: 25px;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  color: rgba(197, 107, 57, 0.1);
  pointer-events: none;
  user-select: none;
  transition: color 0.4s ease;
}

@media (min-width: 768px) {
  .philosophy-card-number {
    font-size: 90px;
  }
}

.philosophy-card:hover .philosophy-card-number {
  color: rgba(197, 107, 57, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .philosophy-label,
  .philosophy-heading,
  .philosophy-desc,
  .philosophy-card-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .philosophy-card {
    transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
  }

  .philosophy-card:hover {
    transform: none !important;
  }
}

/* =============================================================
   EXPERTISE (about.html)
============================================================= */

.expertise-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .expertise-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .expertise-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.expertise-container {
  max-width: 1400px;
}

.expertise-label,
.expertise-heading,
.expertise-desc {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.expertise-section.is-revealed .expertise-label,
.expertise-section.is-revealed .expertise-heading,
.expertise-section.is-revealed .expertise-desc {
  opacity: 1;
  transform: translateY(0);
}

.expertise-label {
  margin: 0 0 30px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.expertise-heading {
  margin: 0 0 24px;
  max-width: 900px;
  font-weight: 300;
  line-height: 1.1;
  font-size: 37px;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .expertise-heading {
    font-size: 50px;
  }
}

@media (min-width: 1200px) {
  .expertise-heading {
    font-size: 64px;
  }
}

.expertise-desc {
  margin: 0 0 80px;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.8;
  color: #5F5F5F;
}

@media (min-width: 768px) {
  .expertise-desc {
    font-size: 22px;
  }
}

@media (min-width: 1200px) {
  .expertise-desc {
    font-size: 24px;
  }
}

.expertise-desc strong {
  font-weight: 600;
  color: #1E1E1E;
}

/* Grid */
.expertise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* Entrance reveal on the wrapper, hover lift/shadow/border on the card
   itself — keeps the two transform timings independent (see the
   Philosophy section fix for why this matters). */
.expertise-card-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.expertise-grid.is-revealed .expertise-card-item {
  opacity: 1;
  transform: translateY(0);
}

.expertise-card-item:nth-child(1) { transition-delay: 0ms; }
.expertise-card-item:nth-child(2) { transition-delay: 150ms; }
.expertise-card-item:nth-child(3) { transition-delay: 300ms; }
.expertise-card-item:nth-child(4) { transition-delay: 450ms; }

.expertise-card {
  position: relative;
  height: 100%;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #FFF8F4 0%, #FDF1EA 100%);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

@media (min-width: 768px) {
  .expertise-card {
    padding: 40px;
  }
}

.expertise-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.25);
}

.expertise-card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 600;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .expertise-card-title {
    font-size: 24px;
  }
}

.expertise-card-accent {
  display: inline-block;
  flex-shrink: 0;
  width: 4px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-primary);
}

.expertise-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.expertise-card-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  transition: color 0.3s ease;
}

.expertise-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(197, 107, 57, 0.6);
}

.expertise-card:hover .expertise-card-list li {
  color: #333333;
}

@media (prefers-reduced-motion: reduce) {
  .expertise-label,
  .expertise-heading,
  .expertise-desc,
  .expertise-card-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .expertise-card {
    transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
  }

  .expertise-card:hover {
    transform: none !important;
  }
}

/* =============================================================
   JOURNEY (about.html)
============================================================= */

.journey-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .journey-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .journey-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.journey-container {
  max-width: 1400px;
}

.journey-label,
.journey-heading,
.journey-card-item,
.journey-closing {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.journey-section.is-revealed .journey-label,
.journey-section.is-revealed .journey-heading,
.journey-section.is-revealed .journey-card-item,
.journey-section.is-revealed .journey-closing {
  opacity: 1;
  transform: translateY(0);
}

.journey-card-item:nth-child(1) { transition-delay: 0ms; }
.journey-card-item:nth-child(2) { transition-delay: 100ms; }
.journey-card-item:nth-child(3) { transition-delay: 200ms; }
.journey-card-item:nth-child(4) { transition-delay: 300ms; }
.journey-card-item:nth-child(5) { transition-delay: 400ms; }
.journey-card-item:nth-child(6) { transition-delay: 500ms; }

.journey-section.is-revealed .journey-closing {
  transition-delay: 600ms;
}

.journey-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.journey-heading {
  margin: 0 0 64px;
  font-weight: 300;
  line-height: 1.1;
  font-size: 37px;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .journey-heading {
    font-size: 50px;
  }
}

@media (min-width: 1200px) {
  .journey-heading {
    font-size: 64px;
  }
}

/* Timeline list */
.journey-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Entrance reveal lives on .journey-card-item; hover border/background
   live on .journey-card — same split used by Philosophy/Expertise, kept
   independent from the start so the hover never inherits the slower
   staggered entrance timing. */
.journey-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 32px;
  background: #FFFDFB;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: border-color 0.4s ease, background-color 0.4s ease;
}

@media (min-width: 768px) {
  .journey-card {
    border-radius: 24px;
    padding: 40px;
  }
}

.journey-card:hover {
  border-color: rgba(197, 107, 57, 0.2);
}

.journey-card--accent {
  background: linear-gradient(135deg, #FFF7F2 0%, #FFF2EA 100%);
  border-color: rgba(203, 106, 55, 0.3);
}

.journey-card--accent:hover {
  border-color: rgba(203, 106, 55, 0.5);
}

.journey-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary) 60%, rgba(197, 107, 57, 0.3) 100%);
}

.journey-card-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .journey-card-inner {
    grid-template-columns: 140px 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.journey-year-col {
  display: flex;
  align-items: center;
}

.journey-year {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .journey-year {
    font-size: 36px;
  }
}

.journey-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 20px;
  font-weight: 600;
  color: #1E1E1E;
}

.journey-dot {
  display: inline-flex;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.journey-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  transition: color 0.3s ease;
}

.journey-card:hover .journey-desc {
  color: #333333;
}

.journey-closing {
  margin: 64px auto 0;
  max-width: 700px;
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
  color: #5F5F5F;
}

.journey-closing-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .journey-label,
  .journey-heading,
  .journey-card-item,
  .journey-closing {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .journey-card {
    transition: background-color 0.4s ease !important;
  }
}

/* =============================================================
   PROCESS (about.html)
============================================================= */

.process-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .process-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .process-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.process-container {
  max-width: 1400px;
}

.process-label,
.process-heading,
.process-desc,
.process-card-item,
.process-divider,
.value-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.process-section.is-revealed .process-label,
.process-section.is-revealed .process-heading,
.process-section.is-revealed .process-desc,
.process-section.is-revealed .process-card-item,
.process-section.is-revealed .process-divider,
.process-section.is-revealed .value-item {
  opacity: 1;
  transform: translateY(0);
}

.process-card-item:nth-child(1) { transition-delay: 0ms; }
.process-card-item:nth-child(2) { transition-delay: 150ms; }
.process-card-item:nth-child(3) { transition-delay: 300ms; }
.process-card-item:nth-child(4) { transition-delay: 450ms; }

.value-item:nth-child(1) { transition-delay: 0ms; }
.value-item:nth-child(2) { transition-delay: 150ms; }
.value-item:nth-child(3) { transition-delay: 300ms; }

.process-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.process-heading {
  margin: 0 0 24px;
  font-weight: 300;
  line-height: 1.1;
  font-size: 37px;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .process-heading {
    font-size: 50px;
  }
}

@media (min-width: 1200px) {
  .process-heading {
    font-size: 64px;
  }
}

.process-desc {
  margin: 0 0 64px;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.8;
  color: #5F5F5F;
}

@media (min-width: 768px) {
  .process-desc {
    font-size: 22px;
  }
}

@media (min-width: 1200px) {
  .process-desc {
    font-size: 24px;
  }
}

/* Cards grid */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

/* Entrance reveal on the wrapper, hover lift/shadow/border on the card
   itself — same independent-transform split used throughout this page. */
.process-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(215, 160, 125, 0.25);
  background: radial-gradient(circle at top right, rgba(245, 220, 205, 0.45) 0%, rgba(255, 248, 243, 1) 45%, rgba(255, 252, 249, 1) 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 768px) {
  .process-card {
    padding: 40px;
  }
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(215, 160, 125, 0.45);
}

.process-number {
  display: block;
  margin-bottom: 1rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.15;
}

.process-card-title {
  position: relative;
  z-index: 2;
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .process-card-title {
    font-size: 24px;
  }
}

.process-card-desc {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #5F5F5F;
}

/* Divider */
.process-divider {
  margin: 80px 0 48px;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1200px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1E1E1E;
}

.value-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.value-icon svg {
  width: 100%;
  height: 100%;
}

.value-desc {
  margin: 0;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.7;
  color: #666;
}

.value-desc strong {
  font-weight: 600;
  color: #1E1E1E;
}

@media (prefers-reduced-motion: reduce) {
  .process-label,
  .process-heading,
  .process-desc,
  .process-card-item,
  .process-divider,
  .value-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .process-card {
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
  }

  .process-card:hover {
    transform: none !important;
  }
}

/* =============================================================
   FINAL CTA (about.html)
============================================================= */

.final-cta-section {
  background: #F6F3EF;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .final-cta-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.final-cta-container {
  max-width: 1400px;
}

.final-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1200px) {
  .final-cta-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
  }
}

.final-cta-content,
.final-cta-actions {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.final-cta-section.is-revealed .final-cta-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.final-cta-section.is-revealed .final-cta-actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.final-cta-content {
  text-align: center;
  max-width: 700px;
}

@media (min-width: 768px) {
  .final-cta-content {
    text-align: left;
  }
}

@media (min-width: 1200px) {
  .final-cta-content {
    flex: 1 1 auto;
  }
}

.final-cta-heading {
  margin: 0 0 24px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: #1E1E1E;
}

.final-cta-accent {
  color: var(--color-primary);
}

.final-cta-text {
  margin: 0;
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.8;
  color: #5F5F5F;
}

@media (max-width: 767.98px) {
  .final-cta-text {
    margin-inline: auto;
  }
}

.final-cta-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

@media (min-width: 768px) {
  .final-cta-actions {
    flex-direction: row;
    width: auto;
    flex-shrink: 0;
  }
}

.final-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 768px) {
  .final-cta-btn {
    width: auto;
  }
}

.final-cta-btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
}

.final-cta-btn--primary:hover {
  background: #B45B2D;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(197, 107, 57, 0.5);
}

.final-cta-btn--secondary {
  background: transparent;
  color: #1E1E1E;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.final-cta-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.final-cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.final-cta-btn:hover .final-cta-arrow {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .final-cta-content,
  .final-cta-actions {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .final-cta-btn,
  .final-cta-btn:hover,
  .final-cta-arrow,
  .final-cta-btn:hover .final-cta-arrow {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   CONTACT HERO — "Let's Talk" (contact.html)
============================================================= */

.contact-hero {
  background: #F6F3EF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .contact-hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .contact-hero {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.contact-hero-container {
  max-width: 1400px;
}

/* Scroll-gated reveal: same IntersectionObserver pattern used by every
   other section — label, heading, and description each fade/rise in
   with their own stagger once the section enters view. */
.contact-hero-label,
.contact-hero-heading,
.contact-hero-desc {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.contact-hero.is-revealed .contact-hero-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.contact-hero.is-revealed .contact-hero-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.contact-hero.is-revealed .contact-hero-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

.contact-hero-label {
  margin: 0 0 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.contact-hero-heading {
  margin: 0 0 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  color: #1E1E1E;
}

.contact-hero-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.contact-hero-desc {
  margin: 0;
  /* Naturally reaches full width on mobile once the viewport is
     narrower than the cap — no separate override needed. */
  max-width: 650px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #5A5A5A;
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-label,
  .contact-hero-heading,
  .contact-hero-desc {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================
   CONTACT FORM — "Direct Lines" (contact.html)
============================================================= */

.contact-form-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .contact-form-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .contact-form-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.contact-form-container {
  max-width: 1400px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

@media (min-width: 992px) {
  .contact-form-grid {
    /* 9fr : 11fr === 45% : 55%, same split used by the homepage's
       contact section, kept here for a consistent rhythm. */
    grid-template-columns: 9fr 11fr;
    gap: 80px;
  }
}

/* -------------------------------------------------------------
   LEFT COLUMN — contact info + quote card
-------------------------------------------------------------- */

.contact-info-label {
  margin: 0 0 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.contact-info-list {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.contact-info-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--color-primary);
}

.contact-info-icon svg {
  width: 22px;
  height: 22px;
}

.contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.contact-info-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #1E1E1E;
}

.contact-info-value {
  font-size: 19px;
  line-height: 1.5;
  color: #5A5A5A;
}

.contact-info-value--link {
  color: #1E1E1E;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.contact-info-value--link:hover,
.contact-info-value--link:focus-visible {
  color: var(--color-primary);
}

/* Quote card */
.contact-quote {
  margin: 0;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #FFF8F4 0%, #FDF1EA 100%);
}

.contact-quote p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.6;
  color: #2A2A2A;
}

@media (min-width: 768px) {
  .contact-quote p {
    font-size: 26px;
  }
}

.contact-quote p::before {
  content: "\201C";
  margin-right: 0.1em;
  color: var(--color-primary);
}

.contact-quote p::after {
  content: "\201D";
  margin-left: 0.1em;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   RIGHT COLUMN — enquiry form
-------------------------------------------------------------- */

.contact-form-panel .contact-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #666;
}

/* Inquiry pills */
.inquiry-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 0.4rem;
}

.inquiry-pill {
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: transparent;
  color: #1E1E1E;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.inquiry-pill:hover {
  background: rgba(0, 0, 0, 0.04);
}

.inquiry-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.inquiry-pill.is-active:hover {
  background: var(--color-primary);
}

.inquiry-pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Inputs: bottom-border only, no boxed fields */
.form-group input,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #D8D1CB;
  padding: 0 0 16px;
  margin: 0;
  font-family: inherit;
  font-size: 18px;
  color: #1E1E1E;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #AAA;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
}

.form-group textarea {
  min-height: 160px;
  line-height: 1.6;
  resize: none;
}

@media (min-width: 768px) {
  .form-group input,
  .form-group textarea {
    font-size: 19px;
  }
}

/* Row: Name + Email */
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 576px) {
  .contact-form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Inline validation */
.form-error {
  display: none;
  min-height: 1em;
  font-size: 13px;
  color: #B3261E;
}

.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #B3261E;
}

.form-group.has-error .form-error {
  display: block;
}

/* Submit button */
.contact-form-submit {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.6rem;
  padding: 18px 40px;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, gap 0.3s ease;
}

.contact-form-submit:hover {
  background: #B45B2D;
  transform: translateY(-3px);
  gap: 0.85rem;
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.contact-form-submit:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.contact-form-submit:disabled {
  cursor: not-allowed;
  transform: none;
}

.contact-form-submit-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.contact-form-submit:hover .contact-form-submit-arrow {
  transform: translate(2px, -2px);
}

/* Loading state: swap the arrow for a spinner, keep label visible */
.contact-form-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  flex-shrink: 0;
}

.contact-form-submit.is-loading .contact-form-submit-arrow {
  display: none;
}

.contact-form-submit.is-loading .contact-form-spinner {
  display: inline-block;
  animation: contact-form-spin 0.7s linear infinite;
}

@keyframes contact-form-spin {
  to { transform: rotate(360deg); }
}

/* Success message */
.contact-form-success {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(197, 107, 57, 0.1);
  color: #8a4a28;
  font-size: 0.95rem;
}

.contact-form-success svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact-form-success.is-visible {
  display: flex;
}

@media (max-width: 575.98px) {
  .contact-form-submit {
    width: 100%;
    justify-content: center;
    align-self: stretch;
  }
}

/* -------------------------------------------------------------
   Scroll-gated reveal: contact info, quote, inquiry pills, form
   rows, and the submit button each fade/rise once the section
   enters view, same IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.contact-info-label,
.contact-info-item,
.contact-quote,
.inquiry-pills,
.contact-form-row,
.form-group--message,
.contact-form-submit {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.contact-form-section.is-revealed .contact-info-label,
.contact-form-section.is-revealed .contact-info-item,
.contact-form-section.is-revealed .contact-quote,
.contact-form-section.is-revealed .inquiry-pills,
.contact-form-section.is-revealed .contact-form-row,
.contact-form-section.is-revealed .form-group--message,
.contact-form-section.is-revealed .contact-form-submit,
.contact-section.is-revealed .contact-form-row {
  opacity: 1;
  transform: translateY(0);
}

.contact-form-section.is-revealed .contact-info-label { transition-delay: 0ms; }
.contact-form-section.is-revealed .contact-info-item:nth-child(1) { transition-delay: 100ms; }
.contact-form-section.is-revealed .contact-info-item:nth-child(2) { transition-delay: 200ms; }
.contact-form-section.is-revealed .contact-info-item:nth-child(3) { transition-delay: 300ms; }
.contact-form-section.is-revealed .contact-quote { transition-delay: 400ms; }
.contact-form-section.is-revealed .inquiry-pills { transition-delay: 100ms; }
.contact-form-section.is-revealed .contact-form-row { transition-delay: 250ms; }
.contact-form-section.is-revealed .form-group--message { transition-delay: 350ms; }
.contact-form-section.is-revealed .contact-form-submit { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .contact-info-label,
  .contact-info-item,
  .contact-quote,
  .inquiry-pills,
  .contact-form-row,
  .form-group--message,
  .contact-form-submit {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .contact-form-submit:hover {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }

  .contact-form-spinner {
    animation: none !important;
  }
}

/* =============================================================
   SERVICES HERO — "Capabilities designed for modern growth."
   (services.html)
============================================================= */

.services-hero {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .services-hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .services-hero {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.services-hero-container {
  max-width: 1400px;
}

.services-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Content first, image second in source order, so this stacking
     is already correct for mobile/tablet without an explicit order. */
  gap: 48px;
}

@media (min-width: 768px) {
  .services-hero-grid {
    gap: 60px;
  }
}

@media (min-width: 1200px) {
  .services-hero-grid {
    /* Two-column split only kicks in at the desktop tier — tablet
       intentionally stays single-column with the image below the
       content, per this page's spec. */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
  }
}

/* Scroll-gated reveal: same IntersectionObserver pattern used by every
   other section — label, heading, description, and image each fade
   and rise in with their own stagger. The image also scales slightly
   as it appears (separate from its hover-zoom, which lives on the
   inner <img> so the two transforms never fight each other). */
.services-hero-label,
.services-hero-heading,
.services-hero-desc,
.services-hero-media {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.services-hero-media {
  transform: translateY(50px) scale(0.96);
}

.services-hero.is-revealed .services-hero-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.services-hero.is-revealed .services-hero-heading {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.services-hero.is-revealed .services-hero-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

.services-hero.is-revealed .services-hero-media {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 450ms;
}

.services-hero-label {
  margin: 0 0 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.services-hero-heading {
  margin: 0 0 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3.1rem, 5.5vw, 5.3rem);
  color: #1E1E1E;
}

.services-hero-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.services-hero-desc {
  margin: 0;
  max-width: 650px;
  font-size: 1.25rem;
  line-height: 1.8;
  color: #5A5A5A;
}

@media (min-width: 768px) {
  .services-hero-desc {
    font-size: 1.375rem;
  }
}

/* Right column: premium image container */
.services-hero-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 30px 60px -20px rgba(30, 20, 10, 0.25);
  aspect-ratio: 4 / 5;
}

.services-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.services-hero-media:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .services-hero-label,
  .services-hero-heading,
  .services-hero-desc,
  .services-hero-media {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .services-hero-media img {
    transition: none !important;
  }

  .services-hero-media:hover img {
    transform: none !important;
  }
}

/* =============================================================
   SERVICES LISTING — "We Engineer" (services.html)
============================================================= */

.services-listing {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .services-listing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .services-listing {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.services-listing-container {
  max-width: 1400px;
}

.services-listing-label {
  margin: 0 0 80px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.services-listing.is-revealed .services-listing-label {
  opacity: 1;
  transform: translateY(0);
}

.services-listing-list {
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------
   Service block
-------------------------------------------------------------- */

.service-block {
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background-color 0.4s ease;
}

@media (min-width: 768px) {
  .service-block {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (min-width: 1200px) {
  .service-block {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.service-block:first-child {
  padding-top: 0;
}

/* The last service has no trailing divider. */
.service-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Very subtle whole-block hover response. A background tint (rather
   than an opacity dip) so the text never loses contrast on hover. */
.service-block:hover {
  background-color: rgba(30, 20, 10, 0.015);
}

.service-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .service-block-grid {
    /* 40% : 60% === 2fr : 3fr; fr units subtract the gap correctly
       instead of overflowing past it. Two columns from tablet up —
       only the gap grows further at desktop. */
    grid-template-columns: 2fr 3fr;
    gap: 40px;
  }
}

@media (min-width: 1200px) {
  .service-block-grid {
    gap: 64px;
  }
}

/* Left column */
.service-block-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--color-primary);
}

.service-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #1E1E1E;
}

.service-category {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #8A8A8A;
}

/* Right column */
.service-block-right {
  display: flex;
  flex-direction: column;
}

.service-headline {
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  color: #1E1E1E;
}

.service-desc {
  margin: 0 0 14px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.8;
  color: #5F5F5F;
}

@media (min-width: 768px) {
  .service-desc {
    font-size: 18px;
  }
}

.service-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.service-tag {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(197, 107, 57, 0.25);
  background: #FFF6F1;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.service-tag:hover {
  background: #FDECE0;
  transform: translateY(-2px);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: each block fades up independently as the
   user scrolls to it (the list runs long, so a single section-wide
   trigger would finish animating before the lower blocks are ever
   on screen). Tags rise in slightly after the description.
-------------------------------------------------------------- */
.service-block-left,
.service-headline,
.service-desc,
.service-tags {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.service-block.is-revealed .service-block-left,
.service-block.is-revealed .service-headline,
.service-block.is-revealed .service-desc,
.service-block.is-revealed .service-tags {
  opacity: 1;
  transform: translateY(0);
}

.service-block.is-revealed .service-block-left,
.service-block.is-revealed .service-headline {
  transition-delay: 0ms;
}

.service-block.is-revealed .service-desc {
  transition-delay: 100ms;
}

.service-block.is-revealed .service-tags {
  transition-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  .services-listing-label,
  .service-block-left,
  .service-headline,
  .service-desc,
  .service-tags {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .service-block {
    transition: background-color 0.3s ease !important;
  }

  .service-tag {
    transition: background-color 0.3s ease !important;
  }

  .service-tag:hover {
    transform: none !important;
  }
}

/* =============================================================
   STRATEGIC PILLARS — "One system, compounding." (services.html)
============================================================= */

.strategic-pillars {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .strategic-pillars {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .strategic-pillars {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.strategic-pillars-container {
  max-width: 1400px;
}

/* -------------------------------------------------------------
   Top content area
-------------------------------------------------------------- */

.strategic-pillars-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 0 0 56px;
}

@media (min-width: 768px) {
  .strategic-pillars-head {
    margin-bottom: 64px;
  }
}

@media (min-width: 1200px) {
  .strategic-pillars-head {
    /* 40% : 60% === 2fr : 3fr, same split used by the service
       blocks above and the homepage's contact section. */
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    margin-bottom: 80px;
  }
}

.strategic-pillars-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.strategic-pillars-heading {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2.75rem, 4.7vw, 4.3rem);
  color: #1E1E1E;
}

.strategic-pillars-head-right {
  display: flex;
  /* Stacked below the label/heading on mobile and tablet, this
     aligns the paragraph's first line with the heading's top once
     the two columns sit side by side at desktop. */
  align-items: flex-start;
}

@media (min-width: 1200px) {
  .strategic-pillars-head-right {
    padding-top: 0.5em;
  }
}

.strategic-pillars-desc {
  margin: 0;
  max-width: 650px;
  font-size: 20px;
  line-height: 1.8;
  color: #5A5A5A;
}

/* -------------------------------------------------------------
   Card grid
-------------------------------------------------------------- */

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Grid's default align-items: stretch already gives every card
     equal height within its row — no extra rule needed. */
  gap: 24px;
}

@media (min-width: 768px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .pillars-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.pillar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFDFB;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration covering both the scroll-in
     reveal (opacity + transform) and the hover lift (transform +
     box-shadow + border-color) at their own independent speeds —
     splitting this across two separate rules would let whichever
     rule is later in source order silently override the other's
     `transform` timing, making hover use the slow reveal easing
     once a card has already animated in. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease,
    box-shadow 0.35s ease, border-color 0.35s ease;
}

.strategic-pillars.is-revealed .pillar-card {
  opacity: 1;
  transform: translateY(0);
}

.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.25);
  /* Overrides the nth-child entrance stagger below so a card's hover
     response is always instant, never delayed by its reveal order. */
  transition-delay: 0s !important;
}

.pillar-card-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pillar-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-primary);
}

.pillar-category {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pillar-title {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #1E1E1E;
}

.pillar-desc {
  margin: 6px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: #5F5F5F;
}

/* Pushed to the bottom edge of the card regardless of how long the
   description above runs, so the divider lines up across a row of
   equal-height cards. */
.pillar-card-bottom {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pillar-outcomes-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.pillar-outcomes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pillar-outcomes-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5F5F5F;
}

.pillar-outcomes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(197, 107, 57, 0.6);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: heading and paragraph fade up together,
   then the card grid fades up with a per-card stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.strategic-pillars-label,
.strategic-pillars-heading,
.strategic-pillars-desc {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.strategic-pillars.is-revealed .strategic-pillars-label,
.strategic-pillars.is-revealed .strategic-pillars-heading,
.strategic-pillars.is-revealed .strategic-pillars-desc {
  opacity: 1;
  transform: translateY(0);
}

.strategic-pillars.is-revealed .strategic-pillars-label { transition-delay: 0ms; }
.strategic-pillars.is-revealed .strategic-pillars-heading { transition-delay: 100ms; }
.strategic-pillars.is-revealed .strategic-pillars-desc { transition-delay: 200ms; }

.pillar-card:nth-child(1) { transition-delay: 0ms; }
.pillar-card:nth-child(2) { transition-delay: 100ms; }
.pillar-card:nth-child(3) { transition-delay: 200ms; }
.pillar-card:nth-child(4) { transition-delay: 300ms; }
.pillar-card:nth-child(5) { transition-delay: 400ms; }
.pillar-card:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .strategic-pillars-label,
  .strategic-pillars-heading,
  .strategic-pillars-desc,
  .pillar-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pillar-card:hover {
    transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   PROCESS (DARK) — "How everything connects" (services.html)
   Same dark gradient + light-on-dark text tokens already used by
   the homepage's Founder's Insights section and the footer.
============================================================= */

.process-dark {
  background: #1A110C;
  background: linear-gradient(180deg, #1A110C 0%, #120B08 100%);
  color: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .process-dark {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .process-dark {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.process-dark-container {
  max-width: 1400px;
}

/* -------------------------------------------------------------
   Top content area
-------------------------------------------------------------- */

.process-dark-head {
  margin: 0 0 56px;
}

@media (min-width: 768px) {
  .process-dark-head {
    margin-bottom: 64px;
  }
}

@media (min-width: 1200px) {
  .process-dark-head {
    margin-bottom: 80px;
  }
}

.process-dark-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.process-dark-heading {
  margin: 0;
  max-width: 700px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3.1rem, 5.5vw, 5.1rem);
  color: #F6F3EF;
}

.process-dark-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: #F6F3EF;
}

/* -------------------------------------------------------------
   Process list
-------------------------------------------------------------- */

.process-dark-list {
  display: flex;
  flex-direction: column;
}

.process-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.4s ease;
}

@media (min-width: 768px) {
  .process-row {
    /* Number / title fixed widths, description takes the rest —
       kept as a 3-column row through tablet, per this section's
       spec, only the paddings/gaps shrink below desktop. */
    grid-template-columns: 90px 180px 1fr;
    align-items: baseline;
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media (min-width: 1200px) {
  .process-row {
    grid-template-columns: 120px 220px 1fr;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.process-row:first-child {
  padding-top: 0;
}

.process-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.process-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.process-row-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  font-size: 2.5rem;
  color: var(--color-primary);
  opacity: 0.35;
}

@media (min-width: 1200px) {
  .process-row-number {
    font-size: 3.5rem;
  }
}

.process-row-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #FFFFFF;
}

@media (min-width: 1200px) {
  .process-row-title {
    font-size: 2rem;
  }
}

.process-row-desc {
  margin: 0;
  max-width: 700px;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and heading fade up together, then
   each process row fades up with its own stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.process-dark-label,
.process-dark-heading,
.process-row {
  opacity: 0;
  transform: translateY(40px);
}

.process-dark-label,
.process-dark-heading {
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

/* Own transition declaration (not shared with the label/heading
   above) for the same reason as the Strategic Pillars cards: the
   hover background-tint needs an independent, snappier timing that
   a single shared `transition` shorthand couldn't give it. */
.process-row {
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo),
    background-color 0.4s ease;
}

.process-dark.is-revealed .process-dark-label,
.process-dark.is-revealed .process-dark-heading,
.process-dark.is-revealed .process-row {
  opacity: 1;
  transform: translateY(0);
}

.process-dark.is-revealed .process-dark-label { transition-delay: 0ms; }
.process-dark.is-revealed .process-dark-heading { transition-delay: 120ms; }

.process-dark.is-revealed .process-row:nth-child(1) { transition-delay: 240ms; }
.process-dark.is-revealed .process-row:nth-child(2) { transition-delay: 320ms; }
.process-dark.is-revealed .process-row:nth-child(3) { transition-delay: 400ms; }
.process-dark.is-revealed .process-row:nth-child(4) { transition-delay: 480ms; }
.process-dark.is-revealed .process-row:nth-child(5) { transition-delay: 560ms; }

.process-row:hover {
  /* Overrides the entrance stagger above so the hover tint always
     responds immediately, never delayed by reveal order. */
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .process-dark-label,
  .process-dark-heading,
  .process-row {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .process-row:hover {
    transition: background-color 0.3s ease !important;
  }
}

/* =============================================================
   WHO WE PARTNER WITH (services.html)
============================================================= */

.partner-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .partner-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .partner-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.partner-container {
  max-width: 1400px;
}

.partner-head {
  margin: 0 0 48px;
}

@media (min-width: 1200px) {
  .partner-head {
    margin-bottom: 64px;
  }
}

.partner-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.partner-heading {
  margin: 0;
  max-width: 700px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  color: #1E1E1E;
}

.partner-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Partner grid
-------------------------------------------------------------- */

.partner-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Grid's default align-items: stretch already gives every box
     equal height within its row — no extra rule needed. */
  gap: 24px;
}

@media (min-width: 768px) {
  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .partner-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.partner-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 140px;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFDFB;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for both the scroll-in
     reveal and the hover lift — see the Strategic Pillars cards
     and Process rows for why splitting this across two rules
     would let one silently override the other's `transform`
     timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease,
    box-shadow 0.35s ease, border-color 0.35s ease;
}

.partner-section.is-revealed .partner-box {
  opacity: 1;
  transform: translateY(0);
}

.partner-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.25);
  /* Overrides the nth-child entrance stagger below so hover is
     always instant, never delayed by reveal order. */
  transition-delay: 0s !important;
}

.partner-box h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1E1E1E;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and heading fade up together, then
   the partner boxes fade up with a stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.partner-label,
.partner-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.partner-section.is-revealed .partner-label,
.partner-section.is-revealed .partner-heading {
  opacity: 1;
  transform: translateY(0);
}

.partner-section.is-revealed .partner-label { transition-delay: 0ms; }
.partner-section.is-revealed .partner-heading { transition-delay: 120ms; }

.partner-section.is-revealed .partner-box:nth-child(1) { transition-delay: 200ms; }
.partner-section.is-revealed .partner-box:nth-child(2) { transition-delay: 280ms; }
.partner-section.is-revealed .partner-box:nth-child(3) { transition-delay: 360ms; }
.partner-section.is-revealed .partner-box:nth-child(4) { transition-delay: 440ms; }
.partner-section.is-revealed .partner-box:nth-child(5) { transition-delay: 520ms; }
.partner-section.is-revealed .partner-box:nth-child(6) { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .partner-label,
  .partner-heading,
  .partner-box {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .partner-box:hover {
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   SERVICES FINAL CTA — "Not looking for more marketing?"
   (services.html)
============================================================= */

.services-cta {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .services-cta {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .services-cta {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.services-cta-container {
  max-width: 1400px;
}

.services-cta-heading {
  margin: 0 0 32px;
  max-width: 900px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3.1rem, 5.5vw, 5.3rem);
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .services-cta-heading {
    margin-bottom: 48px;
  }
}

.services-cta-line {
  display: block;
}

/* Stands in for the blank line in the spec's heading copy, grouping
   the four lines into two visual stanzas. */
.services-cta-line--stanza2 {
  margin-top: 0.15em;
}

.services-cta-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  /* "Slightly larger emphasis" per spec, on top of the italic
     serif + accent color treatment used for accents site-wide. */
  font-size: 1.08em;
  color: var(--color-primary);
}

.services-cta-desc {
  margin: 0 0 40px;
  max-width: 650px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #5A5A5A;
}

@media (min-width: 768px) {
  .services-cta-desc {
    margin-bottom: 56px;
  }
}

.services-cta-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

@media (min-width: 600px) {
  .services-cta-buttons {
    flex-direction: row;
  }
}

.services-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 18px 36px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

@media (min-width: 600px) {
  .services-cta-btn {
    width: auto;
  }
}

.services-cta-btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
}

.services-cta-btn--primary:hover {
  background: #B45B2D;
  color: #FFFFFF;
  gap: 0.8rem;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.services-cta-btn--secondary {
  background: transparent;
  color: #1E1E1E;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.services-cta-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  gap: 0.8rem;
  transform: translateY(-3px);
}

.services-cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.services-cta-btn:hover .services-cta-arrow {
  transform: translate(2px, -2px);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: heading, paragraph, and the button group
   each fade up with their own stagger, same IntersectionObserver
   pattern used site-wide. The reveal animates this wrapper's own
   transform, while each button's hover lift animates the button
   element itself — different elements, so unlike the Strategic
   Pillars cards there's no shared-transition conflict to guard
   against here.
-------------------------------------------------------------- */
.services-cta-heading,
.services-cta-desc,
.services-cta-buttons {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.services-cta.is-revealed .services-cta-heading,
.services-cta.is-revealed .services-cta-desc,
.services-cta.is-revealed .services-cta-buttons {
  opacity: 1;
  transform: translateY(0);
}

.services-cta.is-revealed .services-cta-heading { transition-delay: 0ms; }
.services-cta.is-revealed .services-cta-desc { transition-delay: 150ms; }
.services-cta.is-revealed .services-cta-buttons { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .services-cta-heading,
  .services-cta-desc,
  .services-cta-buttons {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .services-cta-btn,
  .services-cta-btn:hover,
  .services-cta-arrow,
  .services-cta-btn:hover .services-cta-arrow {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   CASE STUDIES HERO — "Growth Stories That Speak Louder Than
   Promises" (case-studies.html)
   Sizing follows the site's current reduced scale (section padding
   64/80/110px, headings capped well under 6rem) rather than this
   section's original brief numbers, to stay consistent with the
   site-wide size pass already applied to every other page.
============================================================= */

.case-studies-hero {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .case-studies-hero {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .case-studies-hero {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.case-studies-hero-container {
  max-width: 1400px;
}

.case-studies-hero-heading {
  margin: 0 0 28px;
  max-width: 1200px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .case-studies-hero-heading {
    margin-bottom: 36px;
  }
}

.case-studies-hero-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.case-studies-hero-desc {
  margin: 0 0 32px;
  max-width: 700px;
  font-size: 1.25rem;
  line-height: 1.8;
  color: #5A5A5A;
}

@media (min-width: 768px) {
  .case-studies-hero-desc {
    margin-bottom: 36px;
    font-size: 1.375rem;
  }
}

.case-studies-hero-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 40px;
}

@media (min-width: 600px) {
  .case-studies-hero-buttons {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .case-studies-hero-buttons {
    margin-bottom: 52px;
  }
}

.case-studies-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 18px 38px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

@media (min-width: 600px) {
  .case-studies-hero-btn {
    width: auto;
  }
}

.case-studies-hero-btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
}

.case-studies-hero-btn--primary:hover {
  background: #B45B2D;
  color: #FFFFFF;
  gap: 0.8rem;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.case-studies-hero-btn--secondary {
  background: transparent;
  color: #1E1E1E;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.case-studies-hero-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  gap: 0.8rem;
  transform: translateY(-3px);
}

.case-studies-hero-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.case-studies-hero-btn:hover .case-studies-hero-arrow {
  transform: translate(2px, -2px);
}

.case-studies-hero-divider {
  margin: 0 0 32px;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .case-studies-hero-divider {
    margin-bottom: 38px;
  }
}

/* -------------------------------------------------------------
   Statistics
-------------------------------------------------------------- */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-value {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .stat-value {
    font-size: 36px;
  }
}

@media (min-width: 1200px) {
  .stat-value {
    font-size: 42px;
  }
}

.stat-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A8A8A;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: heading, description, buttons, and the
   stat grid each fade up with their own stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.case-studies-hero-heading,
.case-studies-hero-desc,
.case-studies-hero-buttons,
.stat-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.case-studies-hero.is-revealed .case-studies-hero-heading,
.case-studies-hero.is-revealed .case-studies-hero-desc,
.case-studies-hero.is-revealed .case-studies-hero-buttons,
.case-studies-hero.is-revealed .stat-item {
  opacity: 1;
  transform: translateY(0);
}

.case-studies-hero.is-revealed .case-studies-hero-heading { transition-delay: 0ms; }
.case-studies-hero.is-revealed .case-studies-hero-desc { transition-delay: 120ms; }
.case-studies-hero.is-revealed .case-studies-hero-buttons { transition-delay: 240ms; }

.case-studies-hero.is-revealed .stat-item:nth-child(1) { transition-delay: 360ms; }
.case-studies-hero.is-revealed .stat-item:nth-child(2) { transition-delay: 420ms; }
.case-studies-hero.is-revealed .stat-item:nth-child(3) { transition-delay: 480ms; }
.case-studies-hero.is-revealed .stat-item:nth-child(4) { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .case-studies-hero-heading,
  .case-studies-hero-desc,
  .case-studies-hero-buttons,
  .stat-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .case-studies-hero-btn,
  .case-studies-hero-btn:hover,
  .case-studies-hero-arrow,
  .case-studies-hero-btn:hover .case-studies-hero-arrow {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   FEATURED CASE STUDIES — "Growth systems that deliver."
   (case-studies.html)
============================================================= */

.case-study-list-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .case-study-list-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .case-study-list-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.case-study-list-container {
  max-width: 1400px;
}

.case-study-list-head {
  margin: 0 0 56px;
}

@media (min-width: 768px) {
  .case-study-list-head {
    margin-bottom: 64px;
  }
}

@media (min-width: 1200px) {
  .case-study-list-head {
    margin-bottom: 80px;
  }
}

.case-study-list-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.case-study-list-heading {
  margin: 0;
  max-width: 800px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2.75rem, 4.7vw, 4.3rem);
  color: #1E1E1E;
}

.case-study-list-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Case study list
-------------------------------------------------------------- */

.case-study-list {
  display: flex;
  flex-direction: column;
}

.case-study {
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .case-study {
    padding-bottom: 64px;
  }
}

.case-study:first-child {
  padding-top: 0;
}

.case-study:not(:first-child) {
  padding-top: 48px;
}

@media (min-width: 768px) {
  .case-study:not(:first-child) {
    padding-top: 64px;
  }
}

.case-study:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Top row: badge/title/year on the left, description + download
   button on the right. */
.case-study-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  .case-study-top {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: start;
    gap: 48px;
    margin-bottom: 32px;
  }
}

.case-study-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-study-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(197, 107, 57, 0.25);
  background: #FFF6F1;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 500;
}

.case-study-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .case-study-title {
    font-size: 2rem;
  }
}

.case-study-year {
  margin: 0;
  font-size: 14px;
  color: #8A8A8A;
}

.case-study-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-study-desc {
  margin: 0;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.8;
  color: #5F5F5F;
}

.case-study-download {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: #1E1E1E;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration covering the entrance
     fade-up (opacity + transform) and the hover lift (transform +
     background-color + border-color) at independent speeds — see
     the Strategic Pillars cards for why splitting this across two
     rules causes the hover lift to silently inherit the slow
     reveal easing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.3s ease,
    background-color 0.3s ease, border-color 0.3s ease;
}

.case-study.is-revealed .case-study-download {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 220ms;
}

.case-study-download svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.case-study-download:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
  /* Overrides the entrance delay above so hover is always instant. */
  transition-delay: 0s !important;
}

.case-study-download:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .case-study-download {
    width: 100%;
    justify-content: center;
  }
}

/* Bottom row: large featured image */
.case-study-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  /* Caps the image at a wide, contained ratio instead of letting it
     grow to the source photo's full natural height at full container
     width (which could exceed 900px tall on large screens). */
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 60px -20px rgba(30, 20, 10, 0.25);
}

.case-study-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.case-study-media:hover img {
  transform: scale(1.03);
}

/* Floating stat badge — only the first (featured) case study has
   one, same visual treatment as the homepage's portfolio cards. */
.case-study-stat-badge {
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(25, 25, 25, 0.85);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.case-study-stat-value {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--color-primary);
}

.case-study-stat-label {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label/heading fade up together, then each
   case study's meta column, content column, and image each fade
   up with their own stagger as the study scrolls into view.
   Per-study observation (not one shared section trigger) since
   three large image-heavy studies stacked vertically can easily
   run past a single viewport — see the Services Listing section
   for the same reasoning.
-------------------------------------------------------------- */
.case-study-list-label,
.case-study-list-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.case-study-list-section.is-revealed .case-study-list-label,
.case-study-list-section.is-revealed .case-study-list-heading {
  opacity: 1;
  transform: translateY(0);
}

.case-study-list-section.is-revealed .case-study-list-label { transition-delay: 0ms; }
.case-study-list-section.is-revealed .case-study-list-heading { transition-delay: 120ms; }

.case-study-meta,
.case-study-desc,
.case-study-media {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.case-study-media {
  transform: translateY(40px) scale(0.97);
}

.case-study.is-revealed .case-study-meta,
.case-study.is-revealed .case-study-desc,
.case-study.is-revealed .case-study-media {
  opacity: 1;
  transform: translateY(0);
}

.case-study.is-revealed .case-study-media {
  transform: translateY(0) scale(1);
}

.case-study.is-revealed .case-study-meta { transition-delay: 0ms; }
.case-study.is-revealed .case-study-desc { transition-delay: 120ms; }
.case-study.is-revealed .case-study-media { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .case-study-list-label,
  .case-study-list-heading,
  .case-study-meta,
  .case-study-desc,
  .case-study-download,
  .case-study-media {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .case-study-download:hover {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }

  .case-study-media img {
    transition: none !important;
  }

  .case-study-media:hover img {
    transform: none !important;
  }

  .case-study-download:hover {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   HOW WE WORK — "How NeoCatalyst Drives Results"
   (case-studies.html)
============================================================= */

.how-we-work {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .how-we-work {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .how-we-work {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.how-we-work-container {
  max-width: 1400px;
}

.how-we-work-head {
  margin: 0 0 48px;
}

@media (min-width: 768px) {
  .how-we-work-head {
    margin-bottom: 56px;
  }
}

@media (min-width: 1200px) {
  .how-we-work-head {
    margin-bottom: 72px;
  }
}

.how-we-work-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.how-we-work-heading {
  margin: 0;
  max-width: 1000px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  color: #1E1E1E;
}

.how-we-work-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Process list
-------------------------------------------------------------- */

.how-we-work-list {
  display: flex;
  flex-direction: column;
}

.step-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* One unified transition declaration for the entrance fade-up
     (opacity + transform) and the hover highlight (background-color
     + the title/description color shift) — see the Strategic
     Pillars cards for why splitting this across two rules lets one
     silently override the other's timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo),
    background-color 0.35s ease;
}

@media (min-width: 768px) {
  .step-row {
    grid-template-columns: 90px 220px 1fr;
    align-items: baseline;
    gap: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media (min-width: 1200px) {
  .step-row {
    grid-template-columns: 120px 280px 1fr;
    gap: 32px;
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

.step-row:first-child {
  padding-top: 0;
}

.step-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
  /* Overrides the entrance stagger below so the hover highlight is
     always instant, never delayed by reveal order. */
  transition-delay: 0s !important;
}

.step-row:hover .step-title,
.step-row:hover .step-desc {
  color: #000000;
}

.step-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  font-size: 2.5rem;
  color: var(--color-primary);
  opacity: 0.25;
}

@media (min-width: 1200px) {
  .step-number {
    font-size: 3.5rem;
  }
}

.step-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #1E1E1E;
  transition: color 0.35s ease;
}

@media (min-width: 1200px) {
  .step-title {
    font-size: 2rem;
  }
}

.step-desc {
  margin: 0;
  max-width: 650px;
  font-size: 18px;
  line-height: 1.8;
  color: #5F5F5F;
  transition: color 0.35s ease;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and heading fade up together, then
   each process row fades up with its own stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.how-we-work-label,
.how-we-work-heading,
.step-row {
  opacity: 0;
  transform: translateY(40px);
}

.how-we-work-label,
.how-we-work-heading {
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.how-we-work.is-revealed .how-we-work-label,
.how-we-work.is-revealed .how-we-work-heading,
.how-we-work.is-revealed .step-row {
  opacity: 1;
  transform: translateY(0);
}

.how-we-work.is-revealed .how-we-work-label { transition-delay: 0ms; }
.how-we-work.is-revealed .how-we-work-heading { transition-delay: 120ms; }

.how-we-work.is-revealed .step-row:nth-child(1) { transition-delay: 240ms; }
.how-we-work.is-revealed .step-row:nth-child(2) { transition-delay: 300ms; }
.how-we-work.is-revealed .step-row:nth-child(3) { transition-delay: 360ms; }
.how-we-work.is-revealed .step-row:nth-child(4) { transition-delay: 420ms; }
.how-we-work.is-revealed .step-row:nth-child(5) { transition-delay: 480ms; }
.how-we-work.is-revealed .step-row:nth-child(6) { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .how-we-work-label,
  .how-we-work-heading,
  .step-row {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .step-row:hover {
    transition: background-color 0.3s ease !important;
  }

  .step-title,
  .step-desc {
    transition: none !important;
  }
}

/* =============================================================
   CLIENT TRANSFORMATION (case-studies.html)
============================================================= */

.testimonials-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .testimonials-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .testimonials-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.testimonials-container {
  max-width: 1400px;
}

.testimonials-head {
  margin: 0 0 40px;
}

@media (min-width: 768px) {
  .testimonials-head {
    margin-bottom: 56px;
  }
}

.testimonials-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Testimonial grid
-------------------------------------------------------------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Grid's default align-items: stretch equal-heights cards within
     a row, but on mobile each card IS its own row, which is why
     .testimonial-card also gets an explicit min-height below. */
  gap: 24px;
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFDFB;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease,
    box-shadow 0.35s ease, border-color 0.35s ease;
}

.testimonials-section.is-revealed .testimonial-card {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.25);
  /* Overrides the entrance stagger below so hover is always
     instant, never delayed by reveal order. */
  transition-delay: 0s !important;
}

.testimonial-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-mark {
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1;
  font-size: 3rem;
  color: var(--color-primary);
  opacity: 0.18;
}

@media (min-width: 1200px) {
  .testimonial-mark {
    font-size: 4rem;
  }
}

.testimonial-quote {
  margin: 0;
}

.testimonial-quote p {
  margin: 0;
  max-width: 90%;
  font-weight: 700;
  line-height: 1.35;
  font-size: 1.375rem;
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .testimonial-quote p {
    font-size: 1.6rem;
  }
}

@media (min-width: 1200px) {
  .testimonial-quote p {
    font-size: 2rem;
  }
}

.testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.testimonial-client {
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A8A8A;
}

.testimonial-divider {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-primary);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and the three cards fade up with a
   stagger, same IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.testimonials-label {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.testimonials-section.is-revealed .testimonials-label {
  opacity: 1;
  transform: translateY(0);
}

.testimonials-section.is-revealed .testimonial-card:nth-child(1) { transition-delay: 120ms; }
.testimonials-section.is-revealed .testimonial-card:nth-child(2) { transition-delay: 240ms; }
.testimonials-section.is-revealed .testimonial-card:nth-child(3) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .testimonials-label,
  .testimonial-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .testimonial-card:hover {
    transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   WHY CLIENTS CHOOSE NEOCATALYST (case-studies.html)
============================================================= */

.why-choose-section {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .why-choose-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .why-choose-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.why-choose-container {
  max-width: 1400px;
}

.why-choose-head {
  margin: 0 0 48px;
}

@media (min-width: 768px) {
  .why-choose-head {
    margin-bottom: 56px;
  }
}

@media (min-width: 1200px) {
  .why-choose-head {
    margin-bottom: 72px;
  }
}

.why-choose-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.why-choose-heading {
  margin: 0;
  max-width: 900px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  color: #1E1E1E;
}

.why-choose-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Feature grid
-------------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 36px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, #FFFDFB 0%, #FDF7F1 100%);
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease,
    box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.why-choose-section.is-revealed .feature-card {
  opacity: 1;
  transform: translateY(0);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.25);
  /* Slight gradient enhancement on hover, per spec. */
  background: linear-gradient(135deg, #FFFDFB 0%, #FBEEE3 100%);
  /* Overrides the entrance stagger below so hover is always
     instant, never delayed by reveal order. */
  transition-delay: 0s !important;
}

.feature-icon {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-bottom: 24px;
  border-radius: 50%;
  border: 1px solid rgba(197, 107, 57, 0.2);
  background: rgba(197, 107, 57, 0.08);
}

.feature-title {
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.4rem;
  color: #1E1E1E;
}

@media (min-width: 1200px) {
  .feature-title {
    font-size: 2rem;
  }
}

.feature-desc {
  margin: 0;
  max-width: 95%;
  font-size: 17px;
  line-height: 1.8;
  color: #5F5F5F;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and heading fade up together, then
   the six feature cards fade up with a stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.why-choose-label,
.why-choose-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.why-choose-section.is-revealed .why-choose-label,
.why-choose-section.is-revealed .why-choose-heading {
  opacity: 1;
  transform: translateY(0);
}

.why-choose-section.is-revealed .why-choose-label { transition-delay: 0ms; }
.why-choose-section.is-revealed .why-choose-heading { transition-delay: 120ms; }

.why-choose-section.is-revealed .feature-card:nth-child(1) { transition-delay: 200ms; }
.why-choose-section.is-revealed .feature-card:nth-child(2) { transition-delay: 280ms; }
.why-choose-section.is-revealed .feature-card:nth-child(3) { transition-delay: 360ms; }
.why-choose-section.is-revealed .feature-card:nth-child(4) { transition-delay: 440ms; }
.why-choose-section.is-revealed .feature-card:nth-child(5) { transition-delay: 520ms; }
.why-choose-section.is-revealed .feature-card:nth-child(6) { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
  .why-choose-label,
  .why-choose-heading,
  .feature-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .feature-card:hover {
    transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   CASE STUDIES FINAL CTA — "Ready To Become The Next Success
   Story?" (case-studies.html)
============================================================= */

.case-studies-cta {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .case-studies-cta {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .case-studies-cta {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.case-studies-cta-container {
  max-width: 1400px;
}

.case-studies-cta-heading {
  margin: 0 0 32px;
  max-width: 1100px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3.5rem, 6.2vw, 5.5rem);
  color: #1E1E1E;
}

@media (min-width: 768px) {
  .case-studies-cta-heading {
    margin-bottom: 40px;
  }
}

.case-studies-cta-line {
  display: block;
}

.case-studies-cta-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.case-studies-cta-desc {
  margin: 0 0 40px;
  max-width: 650px;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #5A5A5A;
}

@media (min-width: 768px) {
  .case-studies-cta-desc {
    margin-bottom: 48px;
    font-size: 1.35rem;
  }
}

.case-studies-cta-buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

@media (min-width: 600px) {
  .case-studies-cta-buttons {
    flex-direction: row;
  }
}

.case-studies-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 18px 38px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.35s ease, background-color 0.35s ease,
    box-shadow 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}

@media (min-width: 600px) {
  .case-studies-cta-btn {
    width: auto;
  }
}

.case-studies-cta-btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
}

.case-studies-cta-btn--primary:hover {
  background: #B45B2D;
  color: #FFFFFF;
  gap: 0.8rem;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.case-studies-cta-btn--secondary {
  background: transparent;
  color: #1E1E1E;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.case-studies-cta-btn--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  gap: 0.8rem;
  transform: translateY(-3px);
}

.case-studies-cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.case-studies-cta-btn:hover .case-studies-cta-arrow {
  transform: translate(2px, -2px);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: heading, paragraph, and the button group
   each fade up with their own stagger, same IntersectionObserver
   pattern used site-wide. The reveal animates this wrapper's own
   transform, while each button's hover lift animates the button
   element itself — different elements, so there's no shared-
   transition conflict to guard against here (see the Services
   page final CTA for the same reasoning).
-------------------------------------------------------------- */
.case-studies-cta-heading,
.case-studies-cta-desc,
.case-studies-cta-buttons {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.case-studies-cta.is-revealed .case-studies-cta-heading,
.case-studies-cta.is-revealed .case-studies-cta-desc,
.case-studies-cta.is-revealed .case-studies-cta-buttons {
  opacity: 1;
  transform: translateY(0);
}

.case-studies-cta.is-revealed .case-studies-cta-heading { transition-delay: 0ms; }
.case-studies-cta.is-revealed .case-studies-cta-desc { transition-delay: 150ms; }
.case-studies-cta.is-revealed .case-studies-cta-buttons { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .case-studies-cta-heading,
  .case-studies-cta-desc,
  .case-studies-cta-buttons {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .case-studies-cta-btn,
  .case-studies-cta-btn:hover,
  .case-studies-cta-arrow,
  .case-studies-cta-btn:hover .case-studies-cta-arrow {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   INSIGHTS HERO — "Authority compounds faster than attention."
   (insights.html)
============================================================= */

.insights-hero-section {
  background: linear-gradient(135deg, #1F1916 0%, #2A221E 45%, #3A312C 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .insights-hero-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .insights-hero-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.insights-hero-container {
  max-width: 1400px;
  width: 100%;
}

.insights-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

@media (min-width: 768px) {
  .insights-hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
  }
}

@media (min-width: 1200px) {
  .insights-hero-grid {
    gap: 80px;
  }
}

/* -------------------------------------------------------------
   Left content
-------------------------------------------------------------- */

.insights-hero-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.insights-hero-heading {
  margin: 0 0 24px;
  max-width: 700px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(3.5rem, 6.2vw, 5.5rem);
  color: #FFFFFF;
}

.insights-hero-line {
  display: block;
}

.insights-hero-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.insights-hero-desc {
  margin: 0;
  max-width: 520px;
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 768px) {
  .insights-hero-desc {
    font-size: 1.35rem;
  }
}

.insights-hero-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.insights-hero-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.insights-hero-feature-line {
  flex-shrink: 0;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-primary);
}

.insights-hero-btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 18px 38px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules (this button's own hover
     timing vs. the reveal group below) lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease,
    background-color 0.35s ease, box-shadow 0.35s ease, gap 0.35s ease;
}

.insights-hero-section.is-revealed .insights-hero-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 420ms;
}

@media (min-width: 600px) {
  .insights-hero-btn {
    width: auto;
  }
}

.insights-hero-btn:hover {
  background: #B45B2D;
  color: #FFFFFF;
  gap: 0.8rem;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
  /* Overrides the entrance delay above so hover is always instant. */
  transition-delay: 0s !important;
}

.insights-hero-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.insights-hero-btn:hover .insights-hero-arrow {
  transform: translate(2px, -2px);
}

/* -------------------------------------------------------------
   Right media: founder image + floating info card
-------------------------------------------------------------- */

.insights-hero-media {
  position: relative;
}

.founder-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}

.founder-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

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

/* Bottom-right, partially overlapping the image's corner. The
   offset is kept modest so it never pushes past the viewport edge
   and causes horizontal scroll on narrow screens. */
.floating-card {
  position: absolute;
  bottom: -16px;
  right: -16px;
  max-width: calc(100% - 32px);
  background: rgba(25, 18, 14, 0.95);
  border-radius: 18px;
  padding: 18px 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
  .floating-card {
    bottom: -20px;
    right: -20px;
  }
}

.floating-card-name {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-primary);
}

.floating-card-role {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #FFFFFF;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: heading/description fade up together,
   then the feature list (staggered), button, image (fade + scale
   in), and floating card (delayed) — same IntersectionObserver
   pattern used site-wide.
-------------------------------------------------------------- */
.insights-hero-heading,
.insights-hero-desc,
.insights-hero-feature,
.founder-image {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.founder-image {
  transform: translateY(40px) scale(0.96);
}

.floating-card {
  opacity: 0;
  transform: translateY(20px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.6s var(--ease-out-expo), transform 0.35s ease;
}

.insights-hero-section.is-revealed .insights-hero-heading,
.insights-hero-section.is-revealed .insights-hero-desc,
.insights-hero-section.is-revealed .insights-hero-feature,
.insights-hero-section.is-revealed .founder-image,
.insights-hero-section.is-revealed .floating-card {
  opacity: 1;
  transform: translateY(0);
}

.insights-hero-section.is-revealed .founder-image {
  transform: translateY(0) scale(1);
}

.insights-hero-section.is-revealed .insights-hero-heading { transition-delay: 0ms; }
.insights-hero-section.is-revealed .insights-hero-desc { transition-delay: 120ms; }
.insights-hero-section.is-revealed .insights-hero-feature:nth-child(1) { transition-delay: 240ms; }
.insights-hero-section.is-revealed .insights-hero-feature:nth-child(2) { transition-delay: 300ms; }
.insights-hero-section.is-revealed .insights-hero-feature:nth-child(3) { transition-delay: 360ms; }
.insights-hero-section.is-revealed .founder-image { transition-delay: 150ms; }
.insights-hero-section.is-revealed .floating-card { transition-delay: 550ms; }

.floating-card:hover {
  transform: translateY(-3px);
  /* Overrides the entrance delay above so hover is always instant. */
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .insights-hero-heading,
  .insights-hero-desc,
  .insights-hero-feature,
  .insights-hero-btn,
  .founder-image,
  .floating-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .founder-image img {
    transition: none !important;
  }

  .founder-image:hover img {
    transform: none !important;
  }

  .insights-hero-btn:hover,
  .insights-hero-arrow,
  .insights-hero-btn:hover .insights-hero-arrow {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   DIGITAL PRODUCTS — "Three complete playbooks." (insights.html)
============================================================= */

.digital-products {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .digital-products {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .digital-products {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.digital-products-container {
  max-width: 1400px;
}

.digital-products-head {
  margin: 0 0 48px;
}

@media (min-width: 768px) {
  .digital-products-head {
    margin-bottom: 56px;
  }
}

@media (min-width: 1200px) {
  .digital-products-head {
    margin-bottom: 72px;
  }
}

.digital-products-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.digital-products-heading {
  margin: 0;
  max-width: 900px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  color: #1E1E1E;
}

.digital-products-line {
  display: block;
}

.digital-products-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Product grid
-------------------------------------------------------------- */

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.4s ease, box-shadow 0.4s ease;
}

.digital-products.is-revealed .product-card {
  opacity: 1;
  transform: translateY(0);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  /* Overrides the entrance stagger below so hover is always
     instant, never delayed by reveal order. */
  transition-delay: 0s !important;
}

/* Cover: a decorative gradient panel with the category + product
   name, not a photographic image — there's no real cover artwork
   to show yet, and faking one with a generic stock photo would be
   worse than a clean typographic placeholder. */
.product-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 180px;
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(135deg, #FDF6F2 0%, #F7E7DD 100%);
  transition: transform 0.4s ease;
}

.product-card:hover .product-cover {
  transform: scale(1.02);
}

.product-cover-category {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.product-cover-title {
  margin: 0;
  max-width: 85%;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #5F5F5F;
}

.product-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.25;
  color: #1E1E1E;
}

@media (min-width: 1200px) {
  .product-title {
    font-size: 2rem;
  }
}

.product-tagline {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 500;
  color: #5F5F5F;
}

.product-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #5F5F5F;
}

.product-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.product-section-heading {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.product-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3d3d3d;
}

.product-feature-list li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-primary);
}

.product-feature-more {
  padding-left: 26px;
  font-size: 13.5px;
  font-style: italic;
  color: #8A8A8A;
}

.product-bottom {
  margin-top: auto;
  padding-top: 20px;
}

.product-pricing {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.product-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1E1E1E;
}

.product-price-old {
  font-size: 0.95rem;
  text-decoration: line-through;
  color: #AAAAAA;
}

.product-duration {
  margin: 0;
  font-size: 13px;
  color: #8A8A8A;
}

.product-cta {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 18px;
  border: none;
  border-radius: 12px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.product-cta:hover {
  background: #B45B2D;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.product-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and heading fade up together, then
   the three product cards fade up with a stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.digital-products-label,
.digital-products-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.digital-products.is-revealed .digital-products-label,
.digital-products.is-revealed .digital-products-heading {
  opacity: 1;
  transform: translateY(0);
}

.digital-products.is-revealed .digital-products-label { transition-delay: 0ms; }
.digital-products.is-revealed .digital-products-heading { transition-delay: 120ms; }

.digital-products.is-revealed .product-card:nth-child(1) { transition-delay: 220ms; }
.digital-products.is-revealed .product-card:nth-child(2) { transition-delay: 320ms; }
.digital-products.is-revealed .product-card:nth-child(3) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .digital-products-label,
  .digital-products-heading,
  .product-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .product-card:hover {
    transition: box-shadow 0.3s ease !important;
    transform: none !important;
  }

  .product-cover {
    transition: none !important;
  }

  .product-card:hover .product-cover {
    transform: none !important;
  }

  .product-cta:hover {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   SPECIAL OFFER — "Get the Complete Growth System"
   (insights.html)
============================================================= */

.special-offer {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .special-offer {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .special-offer {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.special-offer-container {
  max-width: 1400px;
}

.special-offer-head {
  margin: 0 0 48px;
}

@media (min-width: 768px) {
  .special-offer-head {
    margin-bottom: 56px;
  }
}

@media (min-width: 1200px) {
  .special-offer-head {
    margin-bottom: 72px;
  }
}

.special-offer-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.special-offer-heading {
  margin: 0;
  max-width: 750px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3.1rem, 5.5vw, 4.7rem);
  color: #1E1E1E;
}

.special-offer-line {
  display: block;
}

.special-offer-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Offer container
-------------------------------------------------------------- */

.offer-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(197, 107, 57, 0.2);
  background: linear-gradient(135deg, #FFF8F4 0%, #FBEDE5 100%);
  box-shadow: 0 20px 60px rgba(30, 20, 10, 0.04);
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease, box-shadow 0.35s ease;
}

@media (min-width: 768px) {
  .offer-container {
    padding: 40px;
  }
}

@media (min-width: 1200px) {
  .offer-container {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 48px;
  }
}

.special-offer.is-revealed .offer-container {
  opacity: 1;
  transform: translateY(0);
}

.offer-container:hover {
  /* Very subtle lift, per spec. */
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(30, 20, 10, 0.06);
  transition-delay: 0s !important;
}

/* -------------------------------------------------------------
   Left column: bundle details
-------------------------------------------------------------- */

.offer-left {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.offer-title {
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1E1E1E;
}

.offer-desc {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.8;
  color: #5F5F5F;
}

.offer-product-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.offer-product-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.offer-product-list li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--color-primary);
}

.offer-product-list li > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offer-product-title {
  font-weight: 700;
  font-size: 16px;
  color: #1E1E1E;
}

.offer-product-sub {
  font-size: 14px;
  color: #5F5F5F;
}

.offer-bonus {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(197, 107, 57, 0.2);
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 0.35s ease;
}

.offer-bonus:hover {
  background: rgba(255, 255, 255, 0.8);
}

.offer-bonus-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.offer-bonus-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3d3d3d;
}

/* -------------------------------------------------------------
   Right column: pricing
-------------------------------------------------------------- */

.offer-right {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.offer-savings-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.offer-price-block {
  margin-bottom: 28px;
}

.offer-price-label {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: #8A8A8A;
}

.offer-price-original {
  text-decoration: line-through;
  color: #AAAAAA;
}

.offer-price-row {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.offer-price-main {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #1E1E1E;
}

.offer-price-note {
  font-size: 14px;
  color: #8A8A8A;
}

.offer-cta {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 20px;
  border: none;
  border-radius: 14px;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.offer-cta:hover {
  background: #B45B2D;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.offer-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.offer-guarantee {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #8A8A8A;
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label/heading fade up, then the offer
   container fades up as a frame, with the left and right columns
   staggering slightly inside it — same IntersectionObserver
   pattern used site-wide.
-------------------------------------------------------------- */
.special-offer-label,
.special-offer-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.special-offer.is-revealed .special-offer-label,
.special-offer.is-revealed .special-offer-heading,
.special-offer.is-revealed .offer-left,
.special-offer.is-revealed .offer-right {
  opacity: 1;
  transform: translateY(0);
}

.special-offer.is-revealed .special-offer-label { transition-delay: 0ms; }
.special-offer.is-revealed .special-offer-heading { transition-delay: 120ms; }
.special-offer.is-revealed .offer-left { transition-delay: 280ms; }
.special-offer.is-revealed .offer-right { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .special-offer-label,
  .special-offer-heading,
  .offer-container,
  .offer-left,
  .offer-right {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .offer-container:hover {
    transition: box-shadow 0.3s ease !important;
    transform: none !important;
  }

  .offer-cta:hover {
    transition: background-color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   LATEST INSIGHTS — the 4 most recent FounderInsight blog posts
   (insights.html)
============================================================= */

.latest-insights {
  background: #FFFFFF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .latest-insights {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .latest-insights {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.latest-insights-container {
  max-width: 1400px;
}

.latest-insights-head {
  margin: 0 0 40px;
}

@media (min-width: 768px) {
  .latest-insights-head {
    margin-bottom: 48px;
  }
}

@media (min-width: 1200px) {
  .latest-insights-head {
    margin-bottom: 56px;
  }
}

.latest-insights-label {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.latest-insights-heading {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: #1E1E1E;
}

.latest-insights-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Latest insights grid: 4 cols desktop, 2 cols tablet, 1 col
   mobile. Each card is a single clickable link.
-------------------------------------------------------------- */

.latest-insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .latest-insights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .latest-insights-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}

.latest-insights-item {
  display: flex;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.4s ease;
}

.latest-insights.is-revealed .latest-insights-item {
  opacity: 1;
  transform: translateY(0);
}

.latest-insight-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.latest-insight-card:hover,
.latest-insight-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
  border-color: rgba(197, 107, 57, 0.35);
}

.latest-insight-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.latest-insight-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F6F3EF;
}

.latest-insight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out-expo);
}

.latest-insight-card:hover .latest-insight-media img,
.latest-insight-card:focus-visible .latest-insight-media img {
  transform: scale(1.08);
}

.latest-insight-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 20px 22px 24px;
}

.latest-insight-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1E1E1E;
}

.latest-insight-date {
  margin: 0;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.latest-insights.is-revealed .latest-insights-item:nth-child(1) { transition-delay: 120ms; }
.latest-insights.is-revealed .latest-insights-item:nth-child(2) { transition-delay: 220ms; }
.latest-insights.is-revealed .latest-insights-item:nth-child(3) { transition-delay: 320ms; }
.latest-insights.is-revealed .latest-insights-item:nth-child(4) { transition-delay: 420ms; }

.latest-insights-label,
.latest-insights-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.latest-insights.is-revealed .latest-insights-label,
.latest-insights.is-revealed .latest-insights-heading {
  opacity: 1;
  transform: translateY(0);
}

.latest-insights.is-revealed .latest-insights-label { transition-delay: 0ms; }
.latest-insights.is-revealed .latest-insights-heading { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .latest-insights-label,
  .latest-insights-heading,
  .latest-insights-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .latest-insight-card:hover,
  .latest-insight-card:focus-visible {
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    transform: none !important;
  }

  .latest-insight-card:hover .latest-insight-media img,
  .latest-insight-card:focus-visible .latest-insight-media img {
    transform: none !important;
  }
}

/* =============================================================
   FOUNDER PRINCIPLES — "Principles from a decade of building"
   (insights.html)
============================================================= */

.founder-principles {
  background: #F6F3EF;
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .founder-principles {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .founder-principles {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.founder-principles-container {
  max-width: 1400px;
}

.founder-principles-head {
  margin: 0 0 48px;
  text-align: center;
}

@media (min-width: 768px) {
  .founder-principles-head {
    margin-bottom: 56px;
  }
}

@media (min-width: 1200px) {
  .founder-principles-head {
    margin-bottom: 72px;
  }
}

.founder-principles-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.founder-principles-heading {
  margin: 0 auto;
  max-width: 1000px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 5.5vw, 4.7rem);
  color: #1E1E1E;
}

.founder-principles-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

/* -------------------------------------------------------------
   Principle grid
-------------------------------------------------------------- */

.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1200px) {
  .principles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

.principle-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFFFFF;
  opacity: 0;
  transform: translateY(40px);
  /* One unified transition declaration for the entrance fade-up
     and the hover lift — see the Strategic Pillars cards for why
     splitting this across two rules lets one silently override
     the other's `transform` timing. */
  transition: opacity 0.8s var(--ease-out-expo), transform 0.35s ease,
    box-shadow 0.35s ease, border-color 0.35s ease;
}

/* The middle card carries a slightly stronger accent border, per
   spec, similar to the reference's featured-card treatment. */
.principle-card:nth-child(2) {
  border-color: rgba(197, 107, 57, 0.4);
}

.founder-principles.is-revealed .principle-card {
  opacity: 1;
  transform: translateY(0);
}

.principle-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(197, 107, 57, 0.4);
  /* Overrides the entrance stagger below so hover is always
     instant, never delayed by reveal order. */
  transition-delay: 0s !important;
}

.principle-quote {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.principle-mark {
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1;
  font-size: 3rem;
  color: var(--color-primary);
  opacity: 0.18;
}

@media (min-width: 1200px) {
  .principle-mark {
    font-size: 4rem;
  }
}

.principle-title {
  margin: 0;
  max-width: 90%;
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.4rem;
  color: #1E1E1E;
}

@media (min-width: 1200px) {
  .principle-title {
    font-size: 2rem;
  }
}

.principle-desc {
  margin: 0 0 24px;
  max-width: 95%;
  font-size: 17px;
  line-height: 1.8;
  color: #5F5F5F;
}

.principle-divider {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-primary);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: label and heading fade up together, then
   the three principle cards fade up with a stagger, same
   IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.founder-principles-label,
.founder-principles-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.founder-principles.is-revealed .founder-principles-label,
.founder-principles.is-revealed .founder-principles-heading {
  opacity: 1;
  transform: translateY(0);
}

.founder-principles.is-revealed .founder-principles-label { transition-delay: 0ms; }
.founder-principles.is-revealed .founder-principles-heading { transition-delay: 120ms; }

.founder-principles.is-revealed .principle-card:nth-child(1) { transition-delay: 220ms; }
.founder-principles.is-revealed .principle-card:nth-child(2) { transition-delay: 320ms; }
.founder-principles.is-revealed .principle-card:nth-child(3) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .founder-principles-label,
  .founder-principles-heading,
  .principle-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .principle-card:hover {
    transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   INSIGHTS FINAL CTA (DARK) — "Invest Once. Apply Repeatedly."
   (insights.html)
============================================================= */

.insights-final-cta {
  background: linear-gradient(180deg, #322720 0%, #1F1814 100%);
  padding-top: 64px;
  padding-bottom: 64px;
  text-align: center;
}

@media (min-width: 768px) {
  .insights-final-cta {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  .insights-final-cta {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}

.insights-final-cta-container {
  max-width: 1100px;
}

.insights-final-cta-head {
  margin: 0 0 48px;
}

.insights-final-cta-heading {
  margin: 0 auto 28px;
  max-width: 900px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(3.1rem, 6.2vw, 5.1rem);
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .insights-final-cta-heading {
    margin-bottom: 36px;
  }
}

.insights-final-cta-line {
  display: block;
}

.insights-final-cta-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}

.insights-final-cta-desc {
  margin: 0 auto;
  max-width: 650px;
  font-size: 1.15rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}

@media (min-width: 768px) {
  .insights-final-cta-desc {
    font-size: 1.25rem;
  }
}

/* -------------------------------------------------------------
   Feature blocks
-------------------------------------------------------------- */

.cta-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 56px 0 0;
}

@media (min-width: 768px) {
  .cta-features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 64px;
  }
}

@media (min-width: 1200px) {
  .cta-features-grid {
    gap: 48px;
    margin-top: 72px;
  }
}

.cta-feature {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.insights-final-cta.is-revealed .cta-feature {
  opacity: 1;
  transform: translateY(0);
}

.cta-feature-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

.cta-feature-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.85;
  transition: opacity 0.35s ease;
}

.cta-feature:hover .cta-feature-desc {
  opacity: 1;
}

/* -------------------------------------------------------------
   Buttons
-------------------------------------------------------------- */

.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 56px 0 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

@media (min-width: 600px) {
  .cta-buttons {
    flex-direction: row;
  }
}

@media (min-width: 1200px) {
  .cta-buttons {
    margin-top: 64px;
  }
}

.insights-final-cta.is-revealed .cta-buttons {
  opacity: 1;
  transform: translateY(0);
}

.insights-final-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 34px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s ease, background-color 0.35s ease,
    color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

@media (min-width: 600px) {
  .insights-final-cta-btn {
    width: auto;
  }
}

.insights-final-cta-btn--primary {
  background: var(--color-primary);
  border: none;
  color: #FFFFFF;
}

.insights-final-cta-btn--primary:hover {
  background: #B45B2D;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(197, 107, 57, 0.55);
}

.insights-final-cta-btn--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.insights-final-cta-btn--secondary:hover {
  background: #FFFFFF;
  color: #1E1E1E;
  border-color: #FFFFFF;
  transform: translateY(-3px);
}

.insights-final-cta-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.insights-final-cta-trust {
  margin: 36px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* -------------------------------------------------------------
   Scroll-gated reveal: heading/description fade up together,
   then the three feature blocks (staggered) and the button group
   fade up, same IntersectionObserver pattern used site-wide.
-------------------------------------------------------------- */
.insights-final-cta-heading,
.insights-final-cta-desc {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.insights-final-cta.is-revealed .insights-final-cta-heading,
.insights-final-cta.is-revealed .insights-final-cta-desc {
  opacity: 1;
  transform: translateY(0);
}

.insights-final-cta.is-revealed .insights-final-cta-heading { transition-delay: 0ms; }
.insights-final-cta.is-revealed .insights-final-cta-desc { transition-delay: 120ms; }

.insights-final-cta.is-revealed .cta-feature:nth-child(1) { transition-delay: 240ms; }
.insights-final-cta.is-revealed .cta-feature:nth-child(2) { transition-delay: 320ms; }
.insights-final-cta.is-revealed .cta-feature:nth-child(3) { transition-delay: 400ms; }
.insights-final-cta.is-revealed .cta-buttons { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .insights-final-cta-heading,
  .insights-final-cta-desc,
  .cta-feature,
  .cta-buttons {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .insights-final-cta-btn:hover {
    transition: background-color 0.3s ease, color 0.3s ease !important;
    transform: none !important;
  }
}

/* =============================================================
   ENQUIRY MESSAGES — Django messages framework display
============================================================= */

.enquiry-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.enquiry-message {
  padding: 0.875rem 1.25rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
  margin: 0;
}

.enquiry-message--success {
  background-color: #f0faf4;
  color: #1a7340;
  border: 1px solid #a7d9bc;
}

.enquiry-message--error {
  background-color: #fff5f5;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

/* =============================================================
   LEGAL PAGES — Terms, Privacy, Refund, Shipping
============================================================= */
.legal-hero {
  background: var(--color-dark);
  padding: 9rem 0 3rem;
}

.legal-hero-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.legal-hero-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.legal-hero-updated {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.legal-body {
  padding: 4rem 0 6rem;
  background: var(--color-cream);
}

.legal-content-card {
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  padding: 3rem;
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 575.98px) {
  .legal-content-card {
    padding: 1.75rem;
  }
}

.legal-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.legal-content h2,
.legal-content h3 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.legal-content h2 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); }
.legal-content h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

.legal-content h2:first-child,
.legal-content h3:first-child {
  margin-top: 0;
}

.legal-content p {
  margin-bottom: 1.1rem;
}

.legal-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content strong {
  color: var(--color-ink);
}

.legal-content ul,
.legal-content ol {
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
}

.legal-content li {
  margin-bottom: 0.4rem;
}

.legal-content hr {
  margin: 2.25rem 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* =============================================================
   FOUNDER INSIGHT DETAIL — /founder-insights/<slug>/
   (founder_insight_detail.html)
============================================================= */

.fid-hero {
  background: #0f0f0f;
  padding: 7.5rem 0 3rem;
}

.fid-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.fid-breadcrumb a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.fid-breadcrumb a:hover {
  color: #C56B39;
}

.fid-breadcrumb i {
  font-size: 0.7rem;
}

.fid-hero-image {
  border-radius: 16px;
  overflow: hidden;
  max-height: 520px;
}

.fid-hero-image img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .fid-hero-image {
    max-height: 300px;
  }
  .fid-hero-image img {
    max-height: 300px;
  }
}

.fid-hero-meta {
  margin-top: 2rem;
}

.fid-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-style: italic;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.9rem;
}

.fid-hero-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C56B39;
  margin: 0;
}

.fid-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
  margin-top: 2rem;
}

.fid-back-link:hover {
  color: #fff;
}

/* ── Body content ──────────────────────────────────────────── */
.fid-body {
  padding: 4rem 0 6rem;
  background: #fafafa;
}

.fid-content-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
  padding: 2.5rem;
}

@media (max-width: 575.98px) {
  .fid-content-card {
    padding: 1.5rem;
  }
}

/* ── CKEditor content styling — mirrors .csd-rich-content ────── */
.fid-rich-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.fid-rich-content h1,
.fid-rich-content h2,
.fid-rich-content h3,
.fid-rich-content h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #111;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.fid-rich-content h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.fid-rich-content h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.fid-rich-content h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); }
.fid-rich-content h4 { font-size: 1.1rem; }

.fid-rich-content p {
  margin-bottom: 1.25rem;
}

.fid-rich-content a {
  color: #C56B39;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fid-rich-content strong { color: #111; }

.fid-rich-content blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid #C56B39;
  background: #fafafa;
  color: #555;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

.fid-rich-content blockquote p:last-child {
  margin-bottom: 0;
}

.fid-rich-content ul,
.fid-rich-content ol {
  padding-left: 1.4rem;
  margin-bottom: 1.25rem;
}

.fid-rich-content li {
  margin-bottom: 0.5rem;
}

.fid-rich-content hr {
  margin: 2.5rem 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.fid-rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
  display: block;
}

.fid-rich-content img.image_left { float: left; margin-right: 1.5rem; }
.fid-rich-content img.image_right { float: right; margin-left: 1.5rem; }

.fid-rich-content figure {
  margin: 1.75rem 0;
  max-width: 100%;
}

.fid-rich-content figure img { margin: 0; }

.fid-rich-content figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #888;
  text-align: center;
}

.fid-rich-content .table-responsive-wrap {
  overflow-x: auto;
  margin-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.fid-rich-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 480px;
}

.fid-rich-content table th,
.fid-rich-content table td {
  padding: 0.65rem 0.9rem;
  border: 1px solid #e5e5e5;
  text-align: left;
}

.fid-rich-content table th {
  background: #f5f5f5;
  font-weight: 600;
  color: #111;
}

.fid-rich-content code {
  background: #f1f1f1;
  color: #C56B39;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88em;
}

.fid-rich-content pre {
  background: #111;
  color: #f5f5f5;
  padding: 1.25rem;
  border-radius: 10px;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.fid-rich-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.fid-rich-content iframe {
  max-width: 100%;
  border: none;
}

.fid-rich-content .iframe-responsive-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 8px;
}

.fid-rich-content .iframe-responsive-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 575.98px) {
  .fid-rich-content img.image_left,
  .fid-rich-content img.image_right {
    float: none;
    margin: 1rem 0;
  }
}