/* =========================================================================
   CommfyCouch — Cinematic design layer (v3)

   Loaded AFTER premium.css on every page that opts in. Refines the v2
   palette toward the brief's warm/editorial system, adds the ambient 3D
   hero stage, custom cursor, cursor-responsive lighting, evidence/services
   preview sections, and native (CSS-only) cross-page view transitions.

   Nothing here renames or removes a v2 class — it only re-declares CSS
   custom properties (which the cascade lets win by load order) and adds
   new, additive classes for the new sections. Every page keeps working
   exactly as before if this file is removed.
   ========================================================================= */

:root{
  /* ---- Refined palette: warmer terracotta, muted olive-sage, new forest token ---- */
  --cc-terracotta: #B5623F;
  --cc-terracotta-soft: #F1E1D4;
  --cc-terracotta-ink: #8F4B30;      /* darkened, for inline links on light bg (AA) */
  --cc-sage: #6E7350;
  --cc-sage-soft: #E3E7DC;
  --cc-clay: #C17A54;
  --cc-forest: #33452F;
  --cc-forest-70: rgba(51,69,47,.82);

  /* ---- Editorial display type ---- */
  --cc-font-display: 'Fraunces', 'Plus Jakarta Sans', serif;

  /* ---- Motion ---- */
  --cc-ease-cinematic: cubic-bezier(.16,.84,.24,1);
  --cc-breath-cycle: 5200ms;
}

html{ scroll-behavior: auto; } /* Lenis (cinematic.js) owns scroll easing when active */

h1, .hero-title, .hero-brand, .hero-with, .hero-sub-blue{ font-family: var(--cc-font-display); }
.hero-title{ font-weight: 560; letter-spacing: -.015em; }

/* ---- A small, calm sign of life on every page: every eyebrow label
   carries a softly breathing dot, so motion is never dependent on WebGL
   loading successfully. ---- */
.eyebrow{ display: inline-flex; align-items: center; gap: 7px; }
.eyebrow::before{
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: none;
}
@media (prefers-reduced-motion: no-preference){
  .eyebrow::before{ animation: ccEyebrowPulse 3.4s ease-in-out infinite; }
  @keyframes ccEyebrowPulse{
    0%, 100%{ opacity: .4; transform: scale(.85); }
    50%{ opacity: 1; transform: scale(1.15); }
  }
}

.cc-curve-forest path{ fill: var(--cc-forest); }

/* ---- Deep forest green replaces the old navy on dark surfaces ---- */
.site-footer-wrap{ background: var(--cc-forest); }
.team-card-body{ background: var(--cc-forest); }
.cc-tint-charcoal{ background: var(--cc-forest); }

/* ---- Accessibility: skip link + visible focus ---- */
.cc-skip-link{
  position: absolute; left: 12px; top: -60px;
  background: var(--cc-forest); color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font-family: var(--cc-font-body); font-weight: 600; font-size: .9rem;
  z-index: 1000; transition: top .2s ease;
}
.cc-skip-link:focus{ top: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--cc-sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Custom cursor (desktop, motion-enabled only — created by cinematic.js) ---- */
.cc-has-cursor, .cc-has-cursor a, .cc-has-cursor button{ cursor: none; }
.cc-cursor-dot, .cc-cursor-ring{
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 998;
  border-radius: 50%; will-change: transform;
}
.cc-cursor-dot{
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--cc-terracotta);
  transition: opacity .2s ease;
}
.cc-cursor-ring{
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(110,115,80,.55);
  transition: width .25s var(--cc-ease-cinematic), height .25s var(--cc-ease-cinematic),
              margin .25s var(--cc-ease-cinematic), border-color .25s ease, background .25s ease;
}
.cc-cursor-ring--active{
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: rgba(110,115,80,.10);
  border-color: rgba(110,115,80,.7);
}
@media (max-width: 900px), (pointer: coarse){
  .cc-cursor-dot, .cc-cursor-ring{ display: none !important; }
  .cc-has-cursor{ cursor: auto; }
}

/* ---- Cursor-responsive lighting, dark sections only ---- */
.cc-glow-surface{ position: relative; overflow: hidden; }
.cc-glow-surface::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px 420px at var(--cc-glow-x, 50%) var(--cc-glow-y, 0%),
              rgba(197,163,120,.14), rgba(197,163,120,0) 70%);
  opacity: 0; transition: opacity .4s ease;
}
.cc-glow-surface:hover::after{ opacity: 1; }
.cc-glow-surface > *{ position: relative; z-index: 1; }

/* ---- Guaranteed full-corner motion — pure CSS, never depends on any CDN
   script (Three.js/Lenis/GSAP) loading successfully. Injected by
   cinematic.js as the very first child of every hero/banner section, so it
   is always present the instant the section exists. ---- */
.cc-corner-blobs{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: strict;
  will-change: transform;
}
.cc-corner-blobs::before, .cc-corner-blobs::after{
  content: ""; position: absolute; width: 46vw; height: 46vw;
  max-width: 480px; max-height: 480px; min-width: 220px; min-height: 220px;
  border-radius: 50%; filter: blur(50px); will-change: transform;
}
.cc-corner-blobs::before{
  left: -10%; top: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(181,98,63,.24), transparent 70%);
}
.cc-corner-blobs::after{
  right: -10%; bottom: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(110,115,80,.22), transparent 70%);
}
@media (prefers-reduced-motion: no-preference){
  .cc-corner-blobs::before{ animation: ccBlobDriftA 16s ease-in-out infinite; }
  .cc-corner-blobs::after{ animation: ccBlobDriftB 18s ease-in-out infinite; }
}
@keyframes ccBlobDriftA{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(6%,5%) scale(1.12); }
}
@keyframes ccBlobDriftB{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-6%,-5%) scale(1.12); }
}
/* Forest-toned sections read better with a cooler, lower-key version */
.research-banner .cc-corner-blobs::before, .cc-evidence .cc-corner-blobs::before{
  background: radial-gradient(circle at 50% 50%, rgba(197,163,120,.18), transparent 70%);
}
.research-banner .cc-corner-blobs::after, .cc-evidence .cc-corner-blobs::after{
  background: radial-gradient(circle at 50% 50%, rgba(197,163,120,.14), transparent 70%);
}
@media (max-width: 700px){
  .cc-corner-blobs::before, .cc-corner-blobs::after{ width: 60vw; height: 60vw; filter: blur(34px); }
}

/* ---- Preloader — a small, guaranteed "the page is alive" moment on every
   load, independent of any external script. Pure CSS + inline JS counter. ---- */
#ccPreloader{
  position: fixed; inset: 0; z-index: 3000;
  background: var(--cc-forest);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--cc-ease-cinematic), visibility 0s linear .6s;
}
#ccPreloader span{
  font-family: var(--cc-font-display); font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  color: #F7F2E9; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
#ccPreloader.cc-preloader-done{ opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce){
  #ccPreloader{ display: none; }
}

/* ---- Ambient 3D hero stage — big, centred, full-bleed on every banner ---- */
.cc-hero-stage{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--cc-ease-cinematic);
}
.cc-hero-stage--ready{ opacity: 1; }
.hero .container.hero-grid{ position: relative; z-index: 1; }

/* Every section that hosts a stage gets real height so the scene reads as a
   full, deliberate presence rather than a small corner decoration. */
.about-intro, .page-banner, .blog-hero, .bio-hero{
  min-height: 86vh;
  display: flex;
  align-items: center;
}
.about-intro > .container, .page-banner > .container, .blog-hero > .container{
  width: 100%;
}
@media (max-width: 900px){
  .about-intro, .page-banner, .blog-hero, .bio-hero{ min-height: 74vh; }
}

/* Every banner type that can host a .cc-hero-stage needs its real content
   lifted above the absolutely-positioned canvas (positioned descendants
   otherwise paint above static ones regardless of DOM order). */
.about-intro > .container{ position: relative; z-index: 1; }
.blog-hero > .container{ position: relative; z-index: 1; }
.post-hero > .container{ position: relative; z-index: 1; }
.bio-hero > *:not(.cc-hero-stage){ position: relative; z-index: 1; }
.service-detail{ position: relative; z-index: 1; padding: 90px 0 100px !important; }
.service-detail::before{
  content: ""; position: absolute; inset: -60px -8% auto auto; z-index: -1;
  width: 300px; height: 300px; border-radius: 50%;
  background: var(--cc-sage-soft); filter: blur(70px); opacity: .5;
}
.service-detail img{ transition: transform var(--cc-dur-base) var(--cc-ease-cinematic); }
.service-detail .cc-service-trust{ display: flex; gap: 18px; margin: 18px 0 4px; flex-wrap: wrap; }
.service-detail .cc-service-trust span{
  font-size: .82rem; color: var(--cc-charcoal-70); display: inline-flex; align-items: center; gap: 6px;
}
.service-detail .cc-service-trust svg{ width: 15px; height: 15px; color: var(--cc-sage); flex: none; }

/* ---- New: evidence band ---- */
.cc-evidence{
  position: relative; overflow: hidden;
  background: var(--cc-forest); color: #F7F2E9;
  padding: 88px 0; margin-top: 10px;
}
.cc-evidence h2, .cc-evidence p{ color: #F7F2E9; }
.cc-evidence p{ color: rgba(247,242,233,.78); }
.cc-evidence-grid{
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
.cc-evidence-eyebrow{
  background: rgba(247,242,233,.12); color: #EFE4D2;
}
.cc-evidence h2{ font-size: clamp(1.9rem, 3vw, 2.5rem); margin: 14px 0 0; max-width: 420px; }
.cc-evidence-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cc-evidence-list li{
  padding: 20px 22px; border-radius: var(--cc-r-md);
  background: rgba(247,242,233,.06); border: 1px solid rgba(247,242,233,.14);
}
.cc-evidence-list strong{ display: block; font-family: var(--cc-font-body); color: #fff; margin-bottom: 4px; font-size: .98rem; }
.cc-evidence-list span{ color: rgba(247,242,233,.72); font-size: .92rem; }

/* ---- New: services preview ---- */
.cc-services-preview{ padding: 100px 0; }
.cc-services-preview-head{ max-width: 620px; margin: 0 auto 48px; text-align: center; }
.cc-services-preview-head h2{ font-size: clamp(1.9rem, 3vw, 2.5rem); }
.cc-preview-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cc-preview-card{
  display: block; padding: 32px 26px; border-radius: var(--cc-r-md);
  background: rgba(255,255,255,.7); border: 1px solid var(--cc-line);
  transition: transform var(--cc-dur-base) var(--cc-ease-cinematic), box-shadow var(--cc-dur-base) ease, border-color var(--cc-dur-fast) ease;
}
.cc-preview-card:hover{ transform: translateY(-6px); box-shadow: var(--cc-shadow-md); border-color: rgba(181,98,63,.3); }
.cc-preview-card .cc-preview-eyebrow{ font-family: 'Courier Prime', monospace; font-size: .78rem; color: var(--cc-terracotta-ink); }
.cc-preview-card h3{ font-family: var(--cc-font-display); font-size: 1.3rem; margin: 10px 0 8px; }
.cc-preview-card p{ font-size: .94rem; margin-bottom: 14px; }
.cc-preview-card .cc-preview-meta{ font-family: 'Courier Prime', monospace; font-size: .82rem; color: var(--cc-sage); }
.cc-services-preview-foot{ text-align: center; margin-top: 40px; }

/* ---- New: pull-quote panel ---- */
.cc-quote-panel{
  max-width: 880px; margin: 0 auto; padding: 64px 48px; text-align: center;
  background: var(--cc-cream); border-radius: var(--cc-r-lg);
}
.cc-quote-panel blockquote{
  margin: 0; font-family: var(--cc-font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.5; color: var(--cc-charcoal);
}
.cc-quote-panel cite{ display: block; margin-top: 22px; font-style: normal; font-family: var(--cc-font-body); font-size: .86rem; color: var(--cc-charcoal-70); }

@media (max-width: 900px){
  .cc-evidence-grid{ grid-template-columns: 1fr; gap: 32px; }
  .cc-preview-grid{ grid-template-columns: 1fr; }
  .cc-evidence{ padding: 56px 0; }
  .cc-services-preview{ padding: 60px 0; }
  .cc-quote-panel{ padding: 40px 26px; }
}

/* ---- Native cross-document page transitions (progressive enhancement,
   no JS, no-op in unsupported browsers) ---- */
@view-transition{
  navigation: auto;
}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root), ::view-transition-new(root){
    animation-duration: .38s;
    animation-timing-function: cubic-bezier(.16,.84,.24,1);
  }
}