/*
Theme Name: Cascade Medical Research Institute
Theme URI: https://cascademedicalresearch.com/
Author: Converted from standalone export
Description: Single-page homepage for Cascade Medical Research Institute, converted from a standalone React/Babel export into a static WordPress theme. Provides a "Cascade Homepage" page template. All design tokens, custom fonts, photography and section markup are preserved 1:1 from the original export.
Version: 1.1.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: cascade-medical
*/

/* ============================================================
   Homepage styles
   ------------------------------------------------------------
   All page-specific and component styles for the Cascade
   homepage template. Design tokens, @font-face rules and
   semantic element defaults live in cascade.css (enqueued
   first); everything visual about the homepage markup is here.
   The markup carries no inline styles.

   Contents:
     1. Page base & accessibility modes
     2. Buttons (global variants 1–5)
     3. Header / primary nav
     4. Hero
     5. About
     6. Diseases we Treat (specialties)
     7. Studies & Publications splits
     8. Team
     9. Contact, map & form
    10. Newsletter
    11. Footer
    12. Shared texture / watermark layers
    13. Background images
    14. Injected interactive components

   Responsive overrides (all @media breakpoints) live in
   responsive.css, enqueued after this file.
   ============================================================ */

/* ── 1. Page base & accessibility modes ───────────────────── */
html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
  font-family: var(--font-body);
  color: var(--fg-default);
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* Accessibility modes (persist via localStorage) */
body.a11y-large {
  font-size: 20px;
}

body.a11y-large h1 {
  font-size: clamp(64px, 7vw, 104px) !important;
}

body.a11y-large h2 {
  font-size: clamp(40px, 5vw, 64px) !important;
}

body.a11y-contrast {
  filter: grayscale(1) contrast(1.45);
}

#main:focus {
  outline: none;
}

/* Section scaffolding */
.cc-section {
  padding: 90px 56px;
}

.cc-section-gray {
  background: var(--color-light-gray);
}

.cc-section-bordered {
  border-top: 1px solid rgba(16, 46, 84, 0.12);
}

.cc-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Hash navigation (e.g. /#about from another page) lands sections below
   the sticky header */
#about,
#contact,
#newsletter {
  scroll-margin-top: 100px;
}

/* Section headings — shared face, per-section scale */
.cc-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-dark-blue);
  letter-spacing: -0.025em;
  margin: 0;
}

.cc-title-about {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
}

.cc-title-spec {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1;
  margin-bottom: 48px;
}

.cc-title-xl {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
}

.cc-title-team {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  margin-bottom: 64px;
}

.cc-title-contact {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.02;
}

/* ── 2. Buttons — the five global pill variants ───────────── */
.cc-btn {
  display: inline-block;
  text-align: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-label);
  letter-spacing: 0.01em;
  font-size: 14px;
  font-weight: 700;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Button 1 — solid navy (primary nav / mobile CTA) */
.cc-btn-1 {
  background: var(--color-dark-blue);
  color: var(--color-white);
  border: none;
}

.cc-btn-1:hover {
  background: var(--color-light-blue);
  color: var(--color-dark-blue);
}

/* Button 2 — solid white on dark surfaces (hero CTA, newsletter submit) */
.cc-btn-2 {
  background: var(--color-white);
  color: var(--color-dark-blue);
  border: 2px solid var(--color-white);
}

.cc-btn-2:hover {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
  color: var(--color-dark-blue);
}

/* Button 3 — ghost outline on dark surfaces (hero secondary CTA) */
.cc-btn-3 {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.cc-btn-3:hover {
  background: #0F172A;
  border-color: #0F172A;
  color: var(--color-white);
}

/* Button 4 — navy outline on light surfaces (section CTAs) */
.cc-btn-4 {
  background: transparent;
  color: var(--color-dark-blue);
  border: 2px solid var(--color-dark-blue);
}

.cc-btn-4:hover {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
  color: var(--color-dark-blue);
}

/* Button 5 — white fill, navy outline → inverts (contact form submit) */
.cc-btn-5 {
  background: var(--color-white);
  color: var(--color-dark-blue);
  border: 2px solid var(--color-dark-blue);
}

.cc-btn-5:hover {
  background: var(--color-dark-blue);
  border-color: var(--color-dark-blue);
  color: var(--color-white);
}

/* Per-placement sizing */
/* line-height: normal on the converted pills matches the metrics these
   elements had as native <button>s */
.cc-btn-nav {
  padding: 12px 26px;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: normal;
}

.cc-btn-hero {
  padding: 17px 30px;
  line-height: normal;
}

.cc-btn-hero-ghost {
  padding: 15px 30px;
  line-height: normal;
}

.cc-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: max-content;
  gap: 10px;
  padding: 15px 28px;
}

.cc-btn-submit {
  align-self: flex-start;
  font-size: 15px;
  padding: 16px 44px;
}

.cc-btn-subscribe {
  padding: 16px 30px;
  white-space: nowrap;
}

/* ── 3. Header / primary nav ──────────────────────────────── */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  border-bottom: 1px solid var(--border-faint);
}

.cc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 56px;
  gap: 40px;
}

.cc-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--color-dark-blue);
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.cc-brand:hover {
  color: var(--color-dark-blue);
}

.cc-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-align: left;
}

.cc-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 29px;
  letter-spacing: 0.15em;
}

.cc-brand-tag {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--color-slate-blue);
  margin-top: 6px;
  text-transform: uppercase;
  font-weight: 500;
}

.cc-desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cc-nav-link {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  line-height: normal;
  color: var(--color-dark);
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
}

.cc-rel {
  position: relative;
}

.cc-caret {
  transform: rotate(0deg);
  transition: transform 0.2s;
}

.cc-mobile-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--color-dark-blue);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--color-dark-blue);
}

/* ── 4. Hero ──────────────────────────────────────────────── */
.cc-hero {
  position: relative;
  min-height: min(92vh, 830px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-dark-blue);
}

.cc-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.cc-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 42%, rgba(15, 23, 42, 0.35) 72%, rgba(15, 23, 42, 0.18) 100%);
}

.cc-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 56px;
}

.cc-hero-copy {
  max-width: 820px;
}

.cc-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--color-white);
  margin: 0;
}

.cc-hero-title-accent {
  color: var(--color-light-blue);
  font-style: italic;
  font-weight: 400;
}

.cc-hero-lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 30px;
  max-width: 620px;
}

.cc-hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 44px;
  flex-wrap: wrap;
}

/* ── 5. About ─────────────────────────────────────────────── */
.cc-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cc-about-accent {
  position: absolute;
  left: -28px;
  top: -28px;
  width: 78%;
  height: 78%;
  background: var(--color-dark-blue);
  border-radius: 4px;
}

.cc-about-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  box-shadow: rgba(16, 46, 84, 0.4) 0px 24px 60px -20px, rgba(16, 46, 84, 0.12) 0px 8px 20px;
}

.cc-about-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.45;
  color: var(--color-dark);
  margin-top: 28px;
  letter-spacing: -0.005em;
}

.cc-about-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-dark);
  margin-top: 22px;
}

.cc-about-body--tight {
  margin-top: 18px;
}

/* ── 6. Diseases we Treat — hover-reveal image cards ──────── */
.cc-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cc-spec-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.cc-spec-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.cc-spec-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(16, 46, 84, 0.45) 0%, rgba(16, 46, 84, 0.62) 55%, rgba(16, 46, 84, 0.82) 100%);
}

.cc-spec-body {
  position: relative;
  padding: 40px 36px;
}

.cc-spec-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-white);
}

.cc-spec-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding-top: 14px;
  color: rgba(255, 255, 255, 0.92);
}

.cc-spec-card .cc-spec-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(8px);
  transition: grid-template-rows var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.cc-spec-card .cc-spec-desc>p {
  overflow: hidden;
}

.cc-spec-card:hover .cc-spec-desc,
.cc-spec-card:focus-visible .cc-spec-desc {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.cc-spec-card:hover,
.cc-spec-card:focus-visible {
  box-shadow: var(--shadow-lift);
  outline: none;
}

.cc-spec-card:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* ── 7. Studies & Publications splits ─────────────────────── */
.cc-research-grid {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.cc-research-grid--studies {
  grid-template-columns: 1.05fr 0.95fr;
}

.cc-research-grid--pubs {
  grid-template-columns: 0.95fr 1.05fr;
}

.cc-split-img {
  min-height: 460px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px -4px;
}

.cc-split-lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.6;
  color: var(--color-dark);
  margin-top: 24px;
  max-width: 460px;
}

.cc-split-lede--wide {
  max-width: 480px;
}

.cc-cta-row {
  margin-top: 40px;
}

/* Recent Publications — grey section overlaid with the brand square grid texture */
.cc-pub-section {
  background-color: #F6F6F6;
  background-image:
    linear-gradient(rgba(16, 46, 84, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 46, 84, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── 8. Team ──────────────────────────────────────────────── */
.cc-doctor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.cc-team-coords {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.cc-team-coords>a:nth-child(2)>.cc-portrait {
  background-position: center -15px;
}

.cc-scroll-target {
  scroll-margin-top: 100px;
}

.cc-coords-block {
  padding-top: 120px;
}

.cc-group-label {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 32px;
}

.cc-group-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--color-dark-blue);
  letter-spacing: -0.015em;
  margin: 0;
  white-space: nowrap;
}

.cc-group-rule {
  flex: 1 1 0%;
  height: 1px;
  background: rgba(16, 46, 84, 0.18);
}

.cc-doctor-card {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px -4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.cc-doctor-card:hover {
  border-color: var(--color-dark-blue);
  box-shadow: 0 8px 28px -6px rgba(16, 46, 84, 0.14);
}

.cc-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center top;
}

.cc-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}

.cc-card-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-dark-blue);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  line-height: 1.15;
  min-height: 1.5em; /* reserve 2 lines so specialty/role align across cards */
}

.cc-card-specialty {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-slate-blue);
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.4;
}

.cc-card-role {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-slate-blue);
  font-weight: 600;
  line-height: 1.4;
}

.cc-card-arrow {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  justify-content: flex-end;
}

.cc-card-arrow svg {
  transition: transform var(--dur-base) var(--ease-out);
}

.cc-doctor-card:hover .cc-card-arrow svg {
  transform: translateX(4px);
}

.cc-arrow-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1.5px solid rgba(16, 46, 84, 0.25);
  color: var(--color-dark-blue);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.cc-doctor-card:hover .cc-arrow-glyph {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
  color: #fff;
}

/* "Photo coming soon" placeholder portrait frame */
.cc-photo-soon {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-dark-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}

.cc-photo-soon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(136, 173, 217, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 173, 217, 0.14) 1px, transparent 1px);
  background-size: 30px 30px;
}

.cc-soon-mark {
  opacity: 0.9;
  position: relative;
}

.cc-soon-text {
  position: relative;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
}

/* ── 9. Contact, map & form ───────────────────────────────── */
.cc-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 4vw, 64px);
  align-items: stretch;
}

.cc-contact-left {
  display: flex;
  flex-direction: column;
}

.cc-dl {
  margin: 32px 0 0;
  display: grid;
  gap: 0;
}

.cc-dl-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid rgba(16, 46, 84, 0.18);
  align-items: baseline;
}

.cc-dl-dt {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-slate-blue);
  font-weight: 700;
}

.cc-dl-dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-dark);
  word-break: break-word;
  font-weight: 500;
}

.cc-link-dark {
  color: var(--color-dark);
  text-decoration: none;
}

/* Stylized geometric map */
.cc-map {
  position: relative;
  flex: 1 0 auto;
  min-height: 200px;
  margin-top: 24px;
  /* background: var(--color-dark-blue); */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px -4px;
}

/* Embedded Google Map fills the rounded map card. */
.cc-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* "Open in Maps" pill overlaid top-left, matching Google's embed control. */
.cc-map-open {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #1a73e8;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
  text-decoration: none;
}

.cc-map-open:hover {
  color: #1a73e8;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
}

.cc-map-open svg {
  width: 14px;
  height: 14px;
}

/* Application form on the light-blue card */
.cc-form-card {
  background: var(--color-light-blue);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px -4px;
}

.cc-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.cc-form-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 30px);
  color: var(--color-dark-blue);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1.1;
}

.cc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-field-label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-dark-blue);
  font-weight: 700;
}

.cc-field-req {
  color: var(--color-slate-blue);
}

.cc-input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 15px 18px;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(16, 46, 84, 0.25);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-dark);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.cc-input--textarea {
  resize: vertical;
}

/* ── 10. Newsletter ───────────────────────────────────────── */
.cc-news-panel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.cc-news-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
}

.cc-news-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 46, 84, 0.96) 0%, rgba(16, 46, 84, 0.82) 55%, rgba(16, 46, 84, 0.6) 100%);
}

.cc-news-inner {
  position: relative;
  padding: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}

.cc-title-news {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--color-white);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.12;
}

.cc-news-lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 20px;
}

.cc-news-label {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-light-blue);
  font-weight: 700;
  margin-bottom: 12px;
}

.cc-news-row {
  display: flex;
  gap: 12px;
}

.cc-news-input {
  flex: 1 1 0%;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 17px 18px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-dark);
  outline: none;
}

.cc-news-note {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* ── 11. Footer ───────────────────────────────────────────── */
.cc-footer {
  background: #0C2444;
  color: var(--color-white);
  padding: 56px 56px 40px;
  position: relative;
  overflow: hidden;
}

.cc-footer-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 80% 0%, rgba(136, 173, 217, 0.12) 0%, rgba(12, 36, 68, 0) 55%);
  pointer-events: none;
}

.cc-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}

.cc-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 8px;
}

.cc-footer-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-white);
  text-decoration: none;
  place-self: center start;
}

.cc-footer-brand:hover {
  color: var(--color-white);
}

.cc-footer-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 0.14em;
}

.cc-footer-brand-tag {
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
  text-transform: uppercase;
  font-weight: 500;
}

.cc-footer-heading {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: var(--color-light-blue);
  font-weight: 700;
  margin: 0 0 16px;
}

.cc-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.cc-footer-link {
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
  text-align: left;
  align-self: flex-start;
}

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

.cc-footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cc-contact-icon {
  flex-shrink: 0;
  line-height: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  color: var(--color-light-blue);
}

.cc-contact-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.cc-link-light {
  color: var(--color-white);
  text-decoration: none;
}

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

.cc-break-word {
  word-break: break-word;
}

.cc-footer-copy {
  margin-top: 48px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

/* ── 12. Shared texture / watermark layers ────────────────── */
/* Square-grid texture overlays (size / tint vary per surface) */
.cc-gridtex-64,
.cc-gridtex-56,
.cc-gridtex-52,
.cc-gridtex-34 {
  position: absolute;
  inset: 0;
}

.cc-gridtex-64 {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.cc-gridtex-56 {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

.cc-gridtex-52 {
  background-image: linear-gradient(rgba(136, 173, 217, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 173, 217, 0.16) 1px, transparent 1px);
  background-size: 52px 52px;
}

.cc-gridtex-34 {
  background-image: linear-gradient(rgba(136, 173, 217, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 173, 217, 0.18) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Cascade mountain-mark watermarks */
.cc-mark-hero {
  position: absolute;
  right: -110px;
  bottom: -180px;
  opacity: 0.07;
  pointer-events: none;
}

.cc-mark-news {
  position: absolute;
  right: -90px;
  bottom: -130px;
  opacity: 0.08;
  pointer-events: none;
}

.cc-mark-footer {
  position: absolute;
  right: -90px;
  bottom: -130px;
  opacity: 0.06;
  pointer-events: none;
}

/* ── 13. Background images ────────────────────────────────── */
/* URLs resolve relative to this stylesheet (theme root), the same
   convention cascade.css uses for its font files. */
.cc-hero-photo {
  background-image: url("assets/img/hero-eye-exam.jpg");
}

.cc-about-photo {
  background-image: url("assets/img/about-trial-frame.jpg");
}

.cc-news-photo {
  background-image: url("assets/img/research-2.jpg");
}

.cc-spec-img--cornea {
  background-image: url("assets/img/cornea.jpg");
}

.cc-spec-img--retina {
  background-image: url("assets/img/retina.jpg");
}

.cc-split-img--studies {
  background-image: url("assets/img/studies-slitlamp.jpg");
}

.cc-split-img--pubs {
  background-image: url("assets/img/publications-autorefractor.jpg");
}

.cc-portrait--hunter {
  background-image: url("assets/img/allan-hunter.jpg");
}

.cc-portrait--ambati {
  background-image: url("assets/img/balamurali-ambati.jpg");
}

.cc-portrait--beardsley {
  background-image: url("assets/img/robert-beardsley.jpg");
}

.cc-portrait--karth {
  background-image: url("assets/img/john-karth.jpg");
}

.cc-portrait--hassan {
  background-image: url("/wp-content/uploads/2026/06/Muhammad-Hassan-scaled.jpg");
}

.cc-portrait--liz {
  background-image: url("assets/img/liz-carskon.jpg");
}

.cc-portrait--lexi {
  background-image: url("assets/img/lexi-price-breeze.jpg");
}

/* Homepage only: nudge Lexi's portrait framing. */
.cascade-homepage .cc-portrait.cc-portrait--lexi {
  background-position: center -15px;
}

/* ── 14. Injected interactive components (assets/js/cascade.js) ── */
/* Active primary-nav link (scroll-spy) */
.cc-nav-link--active {
  border-bottom-color: var(--color-dark-blue);
  font-weight: 800;
  color: var(--color-dark-blue);
}

/* "Our Team" dropdown caret follows the trigger's expanded state */
[aria-expanded="true"]>.cc-caret {
  transform: rotate(180deg);
}

/* "Our Team" desktop dropdown */
.cc-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: -8px;
  background: var(--color-white);
  border: 1px solid var(--border-faint);
  border-radius: 14px;
  box-shadow: 4px 4px 80px 0 rgba(0, 0, 0, 0.12);
  padding: 14px;
  min-width: 288px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}

.cc-dropdown.is-open {
  display: flex;
}

.cc-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  line-height: normal;
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.cc-dropdown-item:hover {
  background: var(--color-light-gray);
  color: var(--color-dark-blue);
}

.cc-dropdown-arrow {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-slate-blue);
}

/* Mobile menu panel (attached/detached by JS; the 1000px media query
   below forces display:flex while it is in the document) */
.cc-mobile-panel {
  display: flex;
  flex-direction: column;
  padding: 8px 28px 24px;
  border-top: 1px solid rgba(16, 46, 84, 0.08);
}

.cc-mobile-link {
  text-align: left;
  background: none;
  border: none;
  text-decoration: none;
  line-height: normal;
  border-bottom: 1px solid rgba(16, 46, 84, 0.08);
  padding: 16px 0;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark-blue);
  cursor: pointer;
}

.cc-btn-mobile {
  margin-top: 18px;
  font-size: 15px;
  padding: 16px 22px;
  line-height: normal;
}

/* Form validation + success states */
.cc-input[aria-invalid="true"],
.cc-news-input[aria-invalid="true"] {
  border: 2px solid var(--color-dark-blue);
}

.cc-field-error {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-dark-blue);
  font-weight: 600;
}

/* Newsletter variant — sits below the input row on the navy panel.
   The contact form gets its 8px gap from the .cc-field flex column;
   margin-top matches that rhythm here. */
.cc-field-error--on-dark {
  display: block;
  margin-top: 8px;
  color: var(--color-white);
}

.cc-form-success {
  text-align: center;
  padding: 40px 0;
}

.cc-form-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}

.cc-form-success-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--color-dark-blue);
  letter-spacing: -0.02em;
  margin: 0;
}

.cc-form-success-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 16px auto 0;
  max-width: 400px;
}

.cc-btn-again {
  margin-top: 32px;
  padding: 14px 28px;
}

/* Newsletter inline confirmation (white on navy) */
.cc-news-done {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 24px 26px;
  border-radius: 12px;
}

.cc-news-done svg {
  flex-shrink: 0;
}

.cc-news-done-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
}

/* Responsive overrides (all @media breakpoints) live in responsive.css,
   enqueued after this file. */
/* ============================================================
   Our Investigators page CSS
   ------------------------------------------------------------
   Hero banner + tabbed investigator dashboard
   (page_templates/template-cascade-investigators.php). Tab
   switching is wired by assets/js/cascade.js; breakpoint
   overrides live in responsive.css alongside the rest of the
   site. The cc-page-* hero classes and cc-profile-* typography
   defined here are shared with Our Coordinators.
   ============================================================ */

/* Interior page hero banner (shared) */
.cc-page-hero {
  position: relative;
  min-height: min(50vh, 420px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-dark-blue);
}

.cc-page-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}

.cc-inv-hero-photo {
  background-image: url("assets/img/investigators-banner.jpg");
}

.cc-page-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.93) 0%, rgba(15, 23, 42, 0.8) 42%, rgba(15, 23, 42, 0.4) 72%, rgba(15, 23, 42, 0.2) 100%);
}

.cc-page-hero-mark {
  position: absolute;
  right: -90px;
  bottom: -140px;
  opacity: 0.07;
  pointer-events: none;
}

.cc-page-hero-copy {
  max-width: 860px;
}

.cc-page-eyebrow {
  display: none;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 13px;
  color: var(--color-light-blue);
  font-weight: 600;
}

.cc-page-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin: 18px 0 0;
}

.cc-page-hero-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 22px;
  max-width: 680px;
}

/* Tabbed dashboard */
.cc-inv-dashboard {
  padding: 120px 56px;
}

.cc-tabrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(16, 46, 84, 0.12);
}

.cc-tab {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-slate-blue);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.cc-tab:hover:not(.cc-tab--active) {
  background: rgba(136, 173, 217, 0.1);
}

.cc-tab--active {
  color: var(--color-dark-blue);
  background: rgba(136, 173, 217, 0.18);
  border-bottom-color: var(--color-dark-blue);
}

/* Profile panels */
.cc-profile-panel[hidden] {
  display: none;
}

.cc-profile-swap {
  animation: ccSwap var(--dur-base) var(--ease-out);
}

@keyframes ccSwap {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-profile-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 56px;
  align-items: start;
}

.cc-profile-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  background: var(--color-white);
  border: 1px solid rgba(16, 46, 84, 0.08);
}

/* Portrait frame — taller than the homepage's square cards; declared after
   .cc-photo-soon so the 4/5 ratio also wins for the placeholder portrait */
.cc-profile-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center top;
}

.cc-profile-info {
  min-width: 0;
}

.cc-profile-area {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-slate-blue);
  font-weight: 700;
}

.cc-profile-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 40px);
  color: var(--color-dark-blue);
  letter-spacing: -0.02em;
  margin: 10px 0 4px;
  line-height: 1.08;
}

.cc-profile-role {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-slate-blue);
  font-weight: 600;
}

.cc-profile-bio {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cc-profile-bio p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-dark);
  margin: 0;
  max-width: 760px;
}

.cc-profile-specialties-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary, var(--color-dark));
  margin: 6px 0 0;
}

.cc-profile-specialties {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 760px;
}

.cc-profile-specialties li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-dark);
  background: var(--color-surface, #f1f4f8);
  border-radius: 999px;
  padding: 6px 14px;
}

.cc-profile-action {
  margin-top: 30px;
}

/* ============================================================
   Our Coordinators page CSS
   ------------------------------------------------------------
   Hero banner + full-width alternating profile blocks
   (page_templates/template-cascade-coordinators.php). Reuses
   the shared cc-page-* hero and cc-profile-* typography from
   the Our Investigators section above; breakpoint overrides
   live in responsive.css.
   ============================================================ */
.cc-coord-hero-photo {
  background-image: url("assets/img/coordinators-banner.jpg");
}

.cc-coord-section {
  padding: 120px 56px;
}

.cc-coord-stack {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

/* Profile block — portrait column alternates side per block */
.cc-coord-block {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
}

.cc-coord-block--flip {
  grid-template-columns: 1fr 420px;
}

.cc-coord-block--flip .cc-profile-card {
  order: 2;
}

.cc-coord-block--flip .cc-profile-info {
  order: 1;
}

/* "About Liz"-style eyebrow above the bio */
.cc-coord-subtitle {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-dark-blue);
  font-weight: 700;
  margin-top: 24px;
}

/* Coordinator bios sit a touch tighter and narrower than the
   investigator dashboard's */
.cc-coord-bio {
  margin-top: 18px;
}

.cc-coord-bio p {
  max-width: 720px;
}

/* ============================================================
   Our Ophthalmic Studies page CSS
   ------------------------------------------------------------
   Hero banner + three-tab studies directory: pill filter tabs
   with count badges, study cards (Enrolling / Active) and the
   closed-studies list (page_templates/template-cascade-studies.php).
   Reuses the shared cc-page-* hero classes; tab switching is
   wired by assets/js/cascade.js; breakpoint overrides live in
   responsive.css.
   ============================================================ */
.cc-studies-hero {
  min-height: min(52vh, 460px);
}

.cc-studies-hero-photo {
  background-image: url("assets/img/studies-banner.jpg");
}

.cc-page-hero-copy--wide {
  max-width: 880px;
}

.cc-page-hero-lede--wide {
  max-width: 720px;
}

.cc-studies-dashboard {
  background: var(--color-light-gray);
  padding: 120px 56px;
}

/* Pill filter tabs with count badges */
.cc-studies-tabs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.cc-studies-tab {
  font-family: var(--font-label);
  letter-spacing: 0.01em;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark-blue);
  background: transparent;
  border: 2px solid var(--color-dark-blue);
  padding: 13px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.cc-studies-tab:hover:not(.cc-studies-tab--active) {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
}

.cc-studies-tab--active {
  color: var(--color-white);
  background: var(--color-dark-blue);
}

.cc-count {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-dark-blue);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.6;
}

.cc-studies-tab--active .cc-count {
  color: var(--color-dark-blue);
  background: var(--color-white);
}

/* Hidden tab panels */
.cc-study-grid[hidden],
.cc-closed-card[hidden] {
  display: none;
}

/* Study cards (Enrolling / Active) */
.cc-study-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.cc-study-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--border-faint);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  padding: 40px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.cc-study-card:hover {
  border-color: var(--color-dark-blue);
  box-shadow: 0 8px 28px -6px rgba(16, 46, 84, 0.12);
}

.cc-study-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}

.cc-study-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: -0.02em;
  color: var(--color-dark-blue);
  line-height: 1.1;
}

/* Linked study/closed headings: inherit color, underline on hover only.
   Non-linked headings render no anchor, so stay plain text. */
.cc-study-link,
.cc-closed-link {
  color: inherit;
  text-decoration: none;
}

/* Studies AJAX pagination / loading / view-more */
.cc-studies-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.cc-studies-pager:empty {
  margin-top: 0;
}

.cc-studies-page {
  min-width: 42px;
  padding: 10px 14px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark-blue);
  background: var(--color-white);
  border: 2px solid var(--color-dark-blue);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.cc-studies-page:hover:not(:disabled):not(.is-active) {
  background: var(--color-light-blue);
}

.cc-studies-page.is-active {
  background: var(--color-dark-blue);
  color: var(--color-white);
  cursor: default;
}

/* Active page is visually stable — no hover/transition change. */
.cc-studies-page.is-active:hover {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.cc-studies-page:disabled {
  opacity: 0.4;
  cursor: default;
}

.cc-studies-page i {
  font-size: 11px;
}

.cc-studies-more {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* Loading state while a batch is being fetched. */
.cc-studies-more-btn:disabled {
  opacity: 0.55;
  cursor: default;
  background: transparent;
  border-color: var(--color-dark-blue);
  color: var(--color-dark-blue);
}

/* The hidden attribute must win over the display:flex rules above so the
   loader/view-more only appear when JS un-hides them during a fetch. */
.cc-studies-loading[hidden],
.cc-studies-more[hidden] {
  display: none;
}

.cc-studies-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 0;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-slate-blue);
}

.cc-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(16, 46, 84, 0.18);
  border-top-color: var(--color-dark-blue);
  border-radius: 50%;
  animation: cc-spin 0.7s linear infinite;
}

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

.cc-closed-sentinel {
  height: 1px;
}

/* Sponsor logos: grayscale and dim until the card is hovered */
.cc-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  min-width: 120px;
  height: 48px;
}

.cc-sponsor-logo {
  height: 2.5rem;
  max-width: 190px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.cc-study-card:hover .cc-sponsor-logo,
.cc-sponsor-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

.cc-study-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-dark);
  margin: 18px 0 0;
}

.cc-study-objective {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-slate-blue);
  margin: 14px 0 0;
}

.cc-study-objective-label {
  font-weight: 700;
  color: var(--color-dark-blue);
}

.cc-study-meta {
  margin: 24px 0 0;
}

.cc-meta-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-faint);
  align-items: baseline;
}

.cc-meta-dt {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-slate-blue);
  font-weight: 700;
}

.cc-meta-dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-dark);
  font-weight: 500;
}

.cc-participate-wrap {
  margin-top: auto;
  padding-top: 28px;
}

/* Closed studies — single white card with a divided list */
.cc-closed-card {
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--border-faint);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  padding: clamp(24px, 3vw, 48px);
}

.cc-closed-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(16, 46, 84, 0.12);
}

.cc-closed-row:last-child {
  border-bottom: none;
}

.cc-closed-info {
  min-width: 0;
  flex: 1;
}

.cc-closed-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.6vw, 24px);
  letter-spacing: -0.015em;
  color: var(--color-dark-blue);
  line-height: 1.15;
}

.cc-closed-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 12px 0 0;
  max-width: 780px;
}

.cc-closed-meta {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-slate-blue);
  margin-top: 16px;
}

.cc-closed-sponsor {
  font-weight: 700;
  color: var(--color-dark-blue);
}

.cc-closed-sep {
  color: rgba(16, 46, 84, 0.35);
  margin: 0 8px;
}

.cc-closed-nct {
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.cc-closed-cta {
  flex-shrink: 0;
  padding-top: 4px;
}

/* Compact pill for closed-study result links */
.cc-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 12px 22px;
  white-space: nowrap;
  min-width: max-content;
}

/* ============================================================
   Recent Publications page CSS
   ------------------------------------------------------------
   Hero banner, featured publication band, and the filterable
   publication card grid
   (page_templates/template-cascade-publications.php). Reuses
   the shared cc-page-* hero classes; category filtering is
   wired by assets/js/cascade.js; breakpoint overrides live in
   responsive.css.
   ============================================================ */
.cc-pubs-hero {
  min-height: min(52vh, 440px);
}

.cc-pubs-hero-photo {
  background-image: url("assets/img/publications-banner.jpg");
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* This banner uses the homepage hero's slightly softer scrim */
.cc-pubs-hero-scrim {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.78) 42%, rgba(15, 23, 42, 0.35) 72%, rgba(15, 23, 42, 0.18) 100%);
}

.cc-pubs-hero .cc-page-hero-copy {
  max-width: 820px;
}

.cc-pubs-hero .cc-page-hero-lede {
  max-width: 620px;
}

/* Featured publication band */
.cc-featured-section {
  padding: 120px 56px 64px;
}

.cc-title-featured {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1;
  margin-bottom: 40px;
}

.cc-featured-band {
  position: relative;
  background: linear-gradient(180deg, rgba(136, 173, 217, 0.16) 0%, rgba(136, 173, 217, 0.07) 100%);
  border: 1px solid rgba(136, 173, 217, 0.35);
  border-radius: 16px;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  padding: clamp(36px, 4.5vw, 64px);
  overflow: hidden;
}

.cc-featured-mark {
  position: absolute;
  right: -70px;
  bottom: -110px;
  opacity: 0.05;
  pointer-events: none;
}

.cc-featured-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.cc-featured-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-dark-blue);
  margin: 20px 0 0;
}

.cc-featured-journal {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--color-slate-blue);
  margin: 18px 0 0;
  font-weight: 500;
}

.cc-featured-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cc-featured-purpose {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

.cc-featured-cta {
  margin-top: 32px;
}

/* Category pills */
.cc-pub-tag {
  align-self: flex-start;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-dark-blue);
  background: rgba(136, 173, 217, 0.18);
  padding: 7px 14px;
  border-radius: 999px;
}

.cc-pub-tag--featured {
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 13px;
}

/* Filter bar */
.cc-pubs-index {
  background: var(--color-light-gray);
  padding: 56px 56px 120px;
}

.cc-pub-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.cc-pub-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cc-pub-filter {
  font-family: var(--font-label);
  letter-spacing: 0.01em;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark-blue);
  background: transparent;
  border: 2px solid var(--color-dark-blue);
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.cc-pub-filter:hover:not(.cc-pub-filter--active) {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
}

.cc-pub-filter--active {
  color: var(--color-white);
  background: var(--color-dark-blue);
}

.cc-pub-count {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-slate-blue);
}

/* Publication cards */
.cc-pub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.cc-pub-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--border-faint);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
  padding: 40px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.cc-pub-card:hover {
  border-color: var(--color-dark-blue);
  box-shadow: 0 8px 28px -6px rgba(16, 46, 84, 0.12);
}

.cc-pub-card[hidden] {
  display: none;
}

.cc-pub-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--color-dark-blue);
  margin: 22px 0 0;
}

.cc-pub-journal {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-slate-blue);
  margin: 14px 0 0;
  font-weight: 500;
}

.cc-pub-divider {
  height: 1px;
  background: rgba(16, 46, 84, 0.12);
  margin: 24px 0;
}

.cc-pub-purpose {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--color-dark);
  margin: 0;
}

.cc-pub-cta {
  margin-top: auto;
  padding-top: 30px;
}

/* ============================================================
   IBC Meeting Minutes page (template-cascade-ibc.php)
   ============================================================ */
.cc-ibc-section {
  padding: 120px 56px;
  background: var(--bg-page);
}

.cc-ibc-panel {
  max-width: 900px;
}

.cc-ibc-eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-slate-blue);
  margin: 0;
}

.cc-ibc-title {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-dark-blue);
  margin: 16px 0 0;
}

.cc-ibc-desc {
  font-family: var(--font-body);
  font-size: var(--size-body-md);
  line-height: var(--leading-loose);
  color: var(--color-slate-blue);
  max-width: 800px;
  margin: 24px 0 0;
}

.cc-ibc-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.cc-ibc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 26px 0;
  border-top: 1px solid var(--border-faint);
}

.cc-ibc-row-title {
  font-family: var(--font-body);
  font-size: var(--size-body-md);
  font-weight: var(--weight-bold);
  color: var(--color-dark-blue);
}

.cc-ibc-row-link {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-dark-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.cc-ibc-row-link:hover,
.cc-ibc-row-link:focus-visible {
  color: var(--color-light-blue);
}

/* Placeholder rows (no PDF yet) render grayed and non-interactive. */
.cc-ibc-row--placeholder .cc-ibc-row-title,
.cc-ibc-row-link--disabled {
  color: rgba(16, 46, 84, 0.32);
}

.cc-ibc-row-link--disabled {
  cursor: default;
  font-weight: var(--weight-medium);
}



/* .cc-doctor-card:nth-child(2) .cc-portrait {
    background-position: center 25%;
    background-repeat: no-repeat;
} */