/* ============================================================
   HOME — page-specific layout
   ============================================================ */

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; color: var(--sand-50); padding-top: 120px; }
.hero-bg { position: absolute; inset: 0; }
.hero-scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(39,30,23,0.62) 0%, rgba(39,30,23,0.28) 40%, rgba(39,30,23,0.55) 100%),
  radial-gradient(120% 90% at 20% 30%, rgba(126,58,34,0.45), transparent 60%); }
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 { color: var(--sand-50); }
.hero h1 em { color: var(--clay-400); }
.hero-sub { max-width: 52ch; margin: 30px 0 38px; color: var(--sand-200); font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-meta { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: clamp(28px, 6vw, 80px); margin-top: clamp(50px, 9vh, 110px); padding-bottom: 40px; flex-wrap: wrap; }
.hero-meta-item { display: flex; flex-direction: column; color: var(--sand-100); }
.hero-meta-item strong { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1; }
.hero-meta-item span { font-size: 0.85rem; color: var(--sand-300); margin-top: 6px; letter-spacing: 0.03em; }
.hero-scrolldown { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sand-200); }
.hero-scrolldown .line-down { width: 1.5px; height: 46px; background: linear-gradient(var(--clay-400), transparent); position: relative; overflow: hidden; }
.hero-scrolldown .line-down::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background: var(--sand-50); animation: scrolldown 1.8s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes scrolldown { 0%{transform:translateY(0)} 100%{transform:translateY(200%)} }

/* ---------- MARQUEE ---------- */
.marquee-section { padding: clamp(28px,4vw,48px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sand-100); }

/* ---------- SECTION HEADS ---------- */
.sec-head { margin-bottom: clamp(40px, 6vw, 72px); max-width: 900px; }
.sec-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head .eyebrow { margin-bottom: 18px; }

/* ---------- WHY GRID ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card { display: flex; flex-direction: column; gap: 14px; min-height: 300px; position: relative; }
.why-card .kicker-num { position: absolute; top: 30px; right: 30px; }
.why-ico { font-size: 2rem; color: var(--terracotta); width: 60px; height: 60px; border-radius: 14px; background: var(--sand-150); display: grid; place-items: center; margin-bottom: 6px; }
.why-card h3 { margin-top: auto; }

/* ---------- ABOUT ---------- */
.about-band { background: var(--sand-100); }
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.about-media { position: relative; aspect-ratio: 4/5; border-radius: 18px; box-shadow: var(--shadow-lg); }
.about-badge { position: absolute; bottom: -26px; left: -26px; background: var(--terracotta); color: var(--sand-50); border-radius: 16px; padding: 26px 30px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-md); }
.about-badge .stat-num { color: var(--sand-50); }
.about-badge span:last-child { font-size: 0.82rem; line-height: 1.3; color: var(--sand-200); font-weight: 600; }
.about-copy h2 { margin: 16px 0 22px; max-width: 18ch; }
.about-stats { display: flex; gap: clamp(24px,4vw,48px); margin: 36px 0; flex-wrap: wrap; }
.about-stats p { font-size: 0.85rem; margin-top: 6px; }

/* ---------- SERVICES SPLIT ---------- */
.services-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 var(--pad); margin-top: clamp(20px,3vw,40px); }
.svc { position: relative; min-height: 560px; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; color: var(--sand-50); }
.svc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39,30,23,0.1), rgba(39,30,23,0.85)); transition: background .5s; }
.svc:hover .svc-scrim { background: linear-gradient(180deg, rgba(126,58,34,0.2), rgba(39,30,23,0.9)); }
.svc:hover .parallax-img { transform: scale(1.06); }
.svc .parallax-img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.svc-body { position: relative; z-index: 2; padding: clamp(30px,4vw,52px); }
.svc-tag { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay-400); font-weight: 600; }
.svc-body h3 { color: var(--sand-50); margin: 14px 0 12px; }
.svc-body p { color: var(--sand-200); max-width: 40ch; margin-bottom: 18px; }
.svc-link { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: var(--sand-50); }
.svc:hover .svc-link .arrow { transform: translateX(6px); }
.svc-link .arrow { transition: transform .4s; }

/* ---------- WORK GRID ---------- */
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(36px,5vw,60px); flex-wrap: wrap; }
.work-head .eyebrow { margin-bottom: 16px; }
.work-intro { max-width: 38ch; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 16px; }
.work-item { position: relative; border-radius: 16px; overflow: hidden; display: block; }
.work-item.tall { grid-row: span 2; }
.work-item.wide { grid-column: span 2; }
.work-item .parallax-img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.work-item:hover .parallax-img { transform: scale(1.07); }
.work-item::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(39,30,23,0.82)); }
.work-cap { position: absolute; bottom: 0; left: 0; padding: 26px; z-index: 2; color: var(--sand-50); }
.work-type { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-400); font-weight: 600; }
.work-cap h4 { color: var(--sand-50); font-size: 1.4rem; margin-top: 6px; }

/* ---------- PREMIUM ---------- */
.premium { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--sand-50); }
.premium-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39,30,23,0.7), rgba(39,30,23,0.55)); }
.premium-inner { position: relative; z-index: 2; max-width: 760px; }
.premium-title { color: var(--sand-50); margin: 22px 0; }
.premium-title .serif-accent { color: var(--clay-400); }
.premium-inner p { color: var(--sand-200); font-size: 1.2rem; max-width: 48ch; margin: 0 auto 34px; }
.premium-inner .eyebrow { margin-bottom: 8px; }

/* ---------- PROCESS ---------- */
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.process-step { padding: 40px 30px 40px 0; border-right: 1px solid var(--line); }
.process-step:last-child { border-right: none; }
.process-step .kicker-num { display: block; margin-bottom: 24px; font-size: 1.6rem; }
.process-step h3 { margin-bottom: 12px; }

/* ---------- TESTIMONIALS ---------- */
.testi-band { background: var(--espresso); color: var(--sand-100); }
.testi-band .eyebrow { color: var(--clay-400); }
.testi-band .eyebrow::before, .testi-band .eyebrow.center::after { background: var(--clay-400); }
.testi-band h2 { color: var(--sand-50); }
.slider { max-width: 880px; margin: 0 auto; }
.slider-viewport { overflow: hidden; }
.slider-track { display: flex; transition: transform .7s cubic-bezier(.5,0,.2,1); }
.slide { flex: 0 0 100%; text-align: center; padding: 0 clamp(0px, 4vw, 40px); }
.slide .quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.35; color: var(--sand-50); letter-spacing: -0.01em; }
.slide footer { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
.slide footer strong { color: var(--clay-400); font-family: var(--font-display); font-size: 1.05rem; }
.slide footer span { color: var(--sand-300); font-size: 0.9rem; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 44px; }
.slider-btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(245,238,227,0.25); background: transparent; color: var(--sand-100); font-size: 1.1rem; cursor: pointer; transition: .3s; }
.slider-btn:hover { background: var(--terracotta); border-color: var(--terracotta); transform: scale(1.08); }
.slider-dots { display: flex; gap: 10px; }
.slider-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(245,238,227,0.25); cursor: pointer; transition: .3s; padding: 0; }
.slider-dot.active { background: var(--clay-400); width: 26px; border-radius: 5px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(36px,6vw,80px); align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro h2 { margin: 16px 0 18px; }

/* ---------- CTA ---------- */
.cta-band { position: relative; min-height: 80vh; display: flex; align-items: center; color: var(--sand-50); }
.cta-scrim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(39,30,23,0.92) 30%, rgba(126,58,34,0.6)); }
.cta-inner { position: relative; z-index: 2; max-width: 620px; }
.cta-inner h2 { color: var(--sand-50); }
.cta-inner h2 .serif-accent { color: var(--clay-400); }
.cta-inner p { color: var(--sand-200); font-size: 1.2rem; margin: 26px 0 36px; max-width: 44ch; }

/* ---------- FOOTER (layout now in styles.css; brand-specific only) ---------- */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: none; }
  .process-step { border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 4/3; }
  .services-split { grid-template-columns: 1fr; }
  .svc { min-height: 440px; }
  .work-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  .work-item.tall { grid-row: span 1; }
  .work-item.wide { grid-column: span 2; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .process-step { border-right: none; }
  .work-grid { grid-template-columns: 1fr; }
  .work-item.wide { grid-column: span 1; }
  .about-badge { left: 0; padding: 20px 22px; }
}