/* =========================================
   BEYOND THE BROCHURE
   THE CAR-T FAMILY GUIDE
========================================= */

:root{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --text: #1d2a38;
  --muted: #5f6f82;

  --primary: #3b5b7a;
  --primary-dark: #2d455d;

  --border: #d9e2ec;

  --shadow:
    0 10px 30px rgba(20,40,60,0.08);

  --radius: 18px;

  --max-width: 1200px;
}

/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

/* =========================================
   GLOBAL
========================================= */

a{
  text-decoration:none;
  color:inherit;
}

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

main{
  width:100%;
}

/* =========================================
   HEADER
========================================= */

.site-header{
  width:100%;
  max-width:var(--max-width);

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:24px;
}

.brand{
  display:flex;
  flex-direction:column;
}

.brand-main{
  font-size:1.5rem;
  font-weight:700;
  color:var(--primary-dark);
}

.brand-sub{
  font-size:0.9rem;
  color:var(--muted);
}

.site-nav{
  display:flex;
  gap:24px;
}

.site-nav a{
  color:var(--muted);
  transition:0.2s ease;
}

.site-nav a:hover{
  color:var(--primary-dark);
}

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

.hero{
  width:100%;
  padding:80px 24px;
}

.hero-content{
  max-width:900px;
  margin:0 auto;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:60px;

  box-shadow:var(--shadow);
}

.eyebrow{
  color:var(--primary);
  font-weight:700;
  margin-bottom:14px;
}

.hero h1{
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  line-height:1.1;

  margin-bottom:24px;
}

.hero-text{
  font-size:1.1rem;
  color:var(--muted);

  max-width:700px;

  margin-bottom:36px;
}

/* =========================================
   HOMEPAGE SIDE NOTES
========================================= */

.home-note-section{
  width:100%;
  padding:0 24px 32px;
}

.home-note-card{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  display:block;

  padding-left:18px;

  border-left:3px solid var(--primary);

  transition:0.2s ease;
}

.home-note-card:hover{
  transform:translateX(4px);
}

.home-note-card .eyebrow{
  margin-bottom:6px;
  font-size:0.8rem;
}

.home-note-card blockquote{
  max-width:420px;

  color:var(--muted);

  font-size:0.98rem;
  line-height:1.6;

  font-weight:400;

  margin:0 0 8px;
}

.home-note-card span{
  color:var(--primary-dark);

  font-size:0.9rem;
  font-weight:700;
}

/* =========================================
   HOMEPAGE TIMELINE FEATURE
========================================= */

.timeline-feature{
  width:100%;
  padding:0 24px 80px;
}

.timeline-feature-card{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  display:grid;
  grid-template-columns:0.85fr 1.15fr;

  gap:32px;
  align-items:center;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:36px;

  box-shadow:var(--shadow);
}

.timeline-feature-copy h2{
  font-size:clamp(2rem, 4vw, 3rem);

  line-height:1.1;

  margin-bottom:18px;

  color:var(--primary-dark);
}

.timeline-feature-copy p{
  color:var(--muted);

  margin-bottom:28px;
}

.timeline-preview{
  display:block;
}

.timeline-preview img{
  width:100%;

  border-radius:16px;

  border:1px solid var(--border);

  box-shadow:
    0 10px 24px rgba(20,40,60,0.12);

  transition:0.25s ease;
}

.timeline-preview img:hover{
  transform:translateY(-4px);
}

.timeline-preview span{
  display:block;

  margin-top:12px;

  text-align:center;

  color:var(--muted);

  font-size:0.95rem;
}

/* =========================================
   BUTTONS
========================================= */

.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn{
  padding:14px 24px;

  border-radius:999px;

  font-weight:700;

  transition:0.2s ease;
}

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

.btn.primary:hover{
  background:var(--primary-dark);
}

.btn.secondary{
  border:1px solid var(--border);
  background:white;
}

.btn.secondary:hover{
  background:#eef3f8;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px){

  .site-header{
    flex-direction:column;
    gap:20px;
  }

  .site-nav{
    flex-wrap:wrap;
    justify-content:center;
  }

  .hero-content{
    padding:40px 28px;
  }

  .hero h1{
    font-size:2.6rem;
  }

  .timeline-feature-card{
    grid-template-columns:1fr;

    padding:28px;
  }
}

/* =========================================
   FEATURE CARDS
========================================= */

.feature-section{
  width:100%;
  padding:0 24px 100px;
}

.feature-grid{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(2, 1fr);

  gap:24px;
}

.feature-card{
  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:36px;

  box-shadow:var(--shadow);

  transition:0.25s ease;
}

.feature-card:hover{
  transform:translateY(-4px);

  border-color:#bfd0e0;
}

.feature-card h3{
  font-size:1.4rem;

  margin-bottom:14px;

  color:var(--primary-dark);
}

.feature-card p{
  color:var(--muted);
}

/* =========================================
   FEATURE CARDS MOBILE
========================================= */

@media (max-width: 900px){

  .feature-grid{
    grid-template-columns:1fr;
  }

}

/* =========================================
   INNER PAGES
========================================= */

.inner-page{
  width:100%;
  padding:80px 24px 120px;
}

.inner-page-content{
  width:100%;
  max-width:900px;

  margin:0 auto;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:60px;

  box-shadow:var(--shadow);
}

.inner-page h1{
  font-size:clamp(2.5rem, 6vw, 4rem);

  line-height:1.1;

  margin-bottom:24px;
}

.inner-lead{
  font-size:1.1rem;

  color:var(--muted);

  max-width:700px;
}

/* =========================================
   INNER PAGE MOBILE
========================================= */

@media (max-width: 900px){

  .inner-page-content{
    padding:40px 28px;
  }

}

/* =========================================
   CAREGIVER GUIDE
========================================= */

.caregiver-section{
  width:100%;
  padding:0 24px 120px;
}

.caregiver-content{
  width:100%;
  max-width:900px;

  margin:0 auto;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:50px 60px;

  box-shadow:var(--shadow);
}

.caregiver-content h2{
  font-size:clamp(2rem, 5vw, 3rem);

  line-height:1.15;

  margin-bottom:24px;

  color:var(--primary-dark);
}

.caregiver-content p{
  color:var(--muted);

  font-size:1.05rem;

  line-height:1.75;

  margin-bottom:20px;
}

.caregiver-content p:last-child{
  margin-bottom:0;
}
.caregiver-product-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;

  margin:30px 0;
}

.caregiver-product-card{
  width:160px;

  display:block;

  background:#f7f9fc;

  border:1px solid var(--border);
  border-radius:14px;

  padding:12px;

  transition:0.2s ease;
}
.caregiver-card-label{
  display:block;
  margin-bottom:10px;

  color:var(--primary);

  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.2;
}
.caregiver-product-card:hover{
  transform:translateY(-3px);
  border-color:#bfd0e0;
}

.caregiver-product-card img{
  width:100%;
  height:110px;

  object-fit:contain;

  background:white;

  border-radius:10px;

  margin-bottom:10px;
}

.caregiver-product-card span{
  display:block;

  color:var(--primary-dark);

  font-size:0.88rem;
  font-weight:700;
  line-height:1.35;
}

/* =========================================
   CAREGIVER GUIDE MOBILE
========================================= */

@media (max-width: 900px){

  .caregiver-content{
    padding:40px 28px;
  }

}

/* =========================================
   TIMELINE
========================================= */

.timeline-section{
  width:100%;
  padding:0 24px 120px;
}

.timeline-content{
  width:100%;
  max-width:900px;

  margin:0 auto;
}

.timeline-content h2{
  font-size:clamp(2rem, 5vw, 3rem);

  margin:16px 0 18px;
}

.section-lead{
  color:var(--muted);

  max-width:700px;

  margin-bottom:50px;
}

.timeline-list{
  display:flex;
  flex-direction:column;

  gap:24px;
}

.timeline-item{
  display:flex;
  align-items:flex-start;

  gap:24px;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:30px;

  box-shadow:var(--shadow);
}

.timeline-item span{
  min-width:52px;
  height:52px;

  border-radius:50%;

  background:var(--primary);

  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:700;

  font-size:1.1rem;
}

.timeline-item h3{
  font-size:1.3rem;

  margin-bottom:10px;

  color:var(--primary-dark);
}

.timeline-item p{
  color:var(--muted);
}

/* =========================================
   JOURNEY COLLAPSIBLE PHOTO SECTION
========================================= */

.journey-photo-details {
  margin-top: 1rem;
}

.journey-photo-details summary {
  display: inline-block;
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  list-style: none;
}

.journey-photo-details summary::-webkit-details-marker {
  display: none;
}

.journey-photo-details summary::before {
  content: "+ ";
  text-decoration: none;
}

.journey-photo-details[open] summary::before {
  content: "– ";
}

.journey-photo-details[open] summary {
  margin-bottom: 1rem;
}

/* =========================================
   JOURNEY PHOTO BLOCK
========================================= */

.journey-photo-block {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.journey-photo-intro {
  margin-bottom: 1rem;
}

.journey-photo-intro h4 {
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 1.05rem;
}

.journey-photo-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.journey-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.journey-photo-grid figure {
  margin: 0;
}

.journey-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.journey-photo-grid figcaption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 900px) {
  .journey-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .journey-photo-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   TIMELINE MOBILE
========================================= */

@media (max-width: 700px){

  .timeline-item{
    flex-direction:column;
  }

}