/* ---------------- Hero ---------------- */
.hero{ position:relative; height: min(78vh, 640px); min-height:460px; overflow:hidden; background: var(--navy); }
.hero-slide{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  opacity:0; transition: opacity 1.1s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(15,20,36,0.88) 0%, rgba(15,20,36,0.35) 48%, rgba(15,20,36,0.15) 100%);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 0 32px 64px; max-width:1180px; margin:0 auto;
}
.hero-content .eyebrow{ color: var(--gold-pale); margin-bottom:18px; }
.hero-content .eyebrow::before{ background: var(--gold-pale); }
.hero-content h1{
  color: var(--white); font-size: clamp(36px, 5.6vw, 64px); max-width: 780px;
}
.hero-content h1 em{ color: var(--gold-pale); font-style:normal; }
.hero-content p{
  color: rgba(255,255,255,0.85); max-width:560px; margin-top:18px; font-size:17px;
}
.hero-ctas{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.btn-ghost-light{
  border:1px solid rgba(255,255,255,0.55); color:var(--white); background:transparent;
}
.btn-ghost-light:hover{ background: rgba(255,255,255,0.1); }

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.35);
  color:var(--white); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.hero-arrow:hover{ background: rgba(255,255,255,0.28); }
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }
@media (max-width: 640px){ .hero-arrow{ display:none; } }

/* ---------------- Intro / mission ---------------- */
.mission{ padding: 100px 0 90px; background: var(--ivory); }
.mission-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:64px; align-items:center; }
.portrait-frame{
  position:relative; border-radius: var(--radius-lg);
  padding: 14px; background: linear-gradient(160deg, var(--gold), var(--vermilion));
}
.portrait-frame img{
  border-radius: calc(var(--radius-lg) - 8px);
  width:100%; aspect-ratio: 4/5; object-fit:cover; object-position: top center;
  filter: saturate(1.02);
}
.portrait-quote{
  position:absolute; left:-18px; bottom:-24px;
  background: var(--white); border-radius: var(--radius-md);
  padding: 18px 22px; box-shadow: var(--shadow-card);
  font-family: var(--display); font-size:15px; color: var(--navy);
  max-width: 240px; line-height:1.4;
}
.mission-copy h2{ font-size: clamp(28px, 3.4vw, 40px); margin: 14px 0 8px; }
.mission-copy .subhead{ color: var(--vermilion-deep); font-family: var(--display); font-size:18px; margin-bottom:20px; }
.mission-copy p{ color: var(--ink-soft); font-size:16px; margin-bottom:22px; }
.focus-list{ display:grid; grid-template-columns: 1fr 1fr; gap:14px 22px; }
.focus-list li{
  display:flex; align-items:flex-start; gap:12px; font-size:15px; color: var(--ink);
}
.focus-list .dot{
  width:9px; height:9px; border-radius:50%; margin-top:7px; flex-shrink:0;
  background: var(--vermilion);
}

@media (max-width: 900px){
  .mission-grid{ grid-template-columns:1fr; }
  .portrait-frame{ max-width: 360px; margin: 0 auto 40px; }
}

/* ---------------- Goal / thali section ---------------- */
.goal{ background: var(--navy); color: var(--white); padding: 96px 0 100px; position:relative; }
.goal-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.goal-head .eyebrow{ color:var(--gold-pale); margin-bottom:14px; }
.goal-head .eyebrow::before{ background: var(--gold-pale); }
.goal-head h2{ color: var(--white); font-size: clamp(28px, 3.6vw, 40px); }
.goal-head .goal-title{ color: var(--gold); }
.goal-head p{ color: rgba(255,255,255,0.68); max-width:340px; font-size:15px; }

.plate-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap:30px; }
.plate-card{
  background: var(--navy-2);
  border: 1px solid rgba(231,163,62,0.22);
  border-radius: var(--radius-lg);
  padding: 38px 30px 32px;
  position:relative;
  transition: transform .35s ease, border-color .35s ease;
}
.plate-card:hover{ transform: translateY(-8px); border-color: rgba(231,163,62,0.55); }
.plate-icon{
  width:64px; height:64px; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--gold) 0deg 8deg, transparent 8deg 45deg);
  padding: 6px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.plate-icon-inner{
  width:100%; height:100%; border-radius:50%;
  background: var(--navy-2); border: 1px solid rgba(231,163,62,0.35);
  display:flex; align-items:center; justify-content:center;
}
.plate-icon-inner svg{ width:26px; height:26px; }
.plate-card h3{ color: var(--white); font-size:21px; margin-bottom:10px; }
.plate-card p{ color: rgba(255,255,255,0.65); font-size:14.5px; margin-bottom:22px; }
.plate-card .link{
  font-family: var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold-pale); display:inline-flex; align-items:center; gap:8px;
}

@media (max-width: 860px){ .plate-row{ grid-template-columns:1fr; } }

/* ---------------- Gallery preview ---------------- */
.gallery-preview{ padding: 96px 0 100px; background: var(--ivory-2); }
.gp-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:20px; }
.gp-head h2{ font-size: clamp(28px, 3.4vw, 38px); }
.gp-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.gp-item{
  border-radius: var(--radius-md); overflow:hidden; position:relative;
  aspect-ratio: 4/5; box-shadow: var(--shadow-card);
}
.gp-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gp-item:hover img{ transform: scale(1.07); }
@media (max-width: 900px){ .gp-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---------------- CTA band ---------------- */
.cta-band{
  background: linear-gradient(120deg, var(--vermilion), var(--vermilion-deep));
  color: var(--white); padding: 64px 0; text-align:center;
}
.cta-band h2{ color: var(--white); font-size: clamp(26px, 3.2vw, 36px); margin-bottom:14px; }
.cta-band p{ color: rgba(255,255,255,0.88); max-width:520px; margin: 0 auto 30px; font-size:16px; }
.btn-cream{ background: var(--ivory); color: var(--vermilion-deep); font-weight:700; }
.btn-cream:hover{ background: var(--white); }