/* ── INDEX PAGE ── */

/* HERO */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('images/hero-bg.jpg');background-size:cover;background-position:center 40%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,22,38,.85) 0%,rgba(10,22,38,.55) 55%,rgba(10,22,38,.2) 100%)}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 5%;width:100%}
.hero-eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--gold)}
.hero-h1{font-family:var(--serif);font-size:clamp(38px,6.5vw,78px);font-weight:300;color:var(--white);line-height:1.05;margin-bottom:24px;max-width:700px}
.hero-h1 em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:16px;color:rgba(255,255,255,.65);line-height:1.7;max-width:480px;margin-bottom:40px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.4);font-size:9px;letter-spacing:3px;text-transform:uppercase}
.hero-scroll-line{width:1px;height:40px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.hero-scroll-line::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;background:var(--gold);animation:scrolldown 2s ease infinite}
@keyframes scrolldown{0%{top:-100%}100%{top:100%}}

/* STATS BAND */
.stats-band{background:var(--navy);padding:40px 5%}
.stats-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stat-item{text-align:center;padding:16px 0;border-right:1px solid rgba(255,255,255,.06)}
.stat-item:last-child{border-right:none}
.stat-num{font-family:var(--serif);font-size:42px;font-weight:300;color:var(--gold);line-height:1}
.stat-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:8px}

/* INTRO */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.intro-img{position:relative}
.intro-img img{width:100%;height:520px;object-fit:cover;border-radius:4px}
.intro-badge{position:absolute;bottom:-20px;right:-20px;background:var(--gold);color:var(--navy);padding:24px 28px;border-radius:4px;text-align:center}
.intro-badge-num{font-family:var(--serif);font-size:36px;font-weight:600;line-height:1}
.intro-badge-text{font-size:10px;letter-spacing:1.5px;margin-top:4px;text-transform:uppercase}

/* SERVICES PREVIEW */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px}
.service-card{position:relative;overflow:hidden;aspect-ratio:3/4}
.service-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.service-card:hover img{transform:scale(1.04)}
.service-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,38,0) 30%,rgba(10,22,38,.92) 100%)}
.service-card-content{position:absolute;bottom:0;left:0;right:0;padding:32px 28px}
.service-card-num{font-size:10px;letter-spacing:3px;color:var(--gold);margin-bottom:8px}
.service-card-title{font-family:var(--serif);font-size:22px;color:var(--white);margin-bottom:8px;line-height:1.2}
.service-card-desc{font-size:12px;color:rgba(255,255,255,.6);line-height:1.6;max-height:0;overflow:hidden;transition:max-height .4s}
.service-card:hover .service-card-desc{max-height:80px}

/* WHY YUMAS */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;margin-top:56px}
.why-item{display:flex;gap:24px;align-items:flex-start;padding:32px;border:1px solid var(--border);border-radius:4px;transition:border-color .2s,box-shadow .2s}
.why-item:hover{border-color:var(--gold);box-shadow:0 8px 32px rgba(12,28,48,.08)}
.why-icon{width:48px;height:48px;flex-shrink:0;background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.25);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:20px}
.why-body h3{font-family:var(--serif);font-size:20px;margin-bottom:8px;color:var(--navy)}
.why-body p{font-size:13px;color:var(--muted);line-height:1.7}

/* CTA SECTION */
.cta-section{position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;background-image:url('images/cta-bg.jpg');background-size:cover;background-position:center}
.cta-overlay{position:absolute;inset:0;background:rgba(10,22,38,.82)}
.cta-content{position:relative;z-index:2;text-align:center;padding:96px 5%}
.cta-content .ym-h2{color:var(--white);margin-bottom:16px}
.cta-content p{color:rgba(255,255,255,.6);font-size:15px;max-width:520px;margin:0 auto 36px;line-height:1.7}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* PROCESS */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px;position:relative}
.process-steps::before{content:'';position:absolute;top:32px;left:calc(12.5%);right:calc(12.5%);height:1px;background:var(--border)}
.process-step{text-align:center;position:relative}
.step-num{width:64px;height:64px;border-radius:50%;background:var(--white);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--serif);font-size:22px;color:var(--gold);position:relative;z-index:1;transition:all .3s}
.process-step:hover .step-num{background:var(--navy);border-color:var(--navy);color:var(--gold)}
.step-title{font-family:var(--serif);font-size:16px;color:var(--navy);margin-bottom:8px}
.step-desc{font-size:12px;color:var(--muted);line-height:1.6}

/* AREA */
.area-section{background:var(--cream)}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.area-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.area-imgs img{width:100%;object-fit:cover;border-radius:4px}
.area-imgs img:first-child{grid-column:1/-1;height:240px}
.area-imgs img:not(:first-child){height:160px}

@media(max-width:900px){
  .intro-grid,.area-grid{grid-template-columns:1fr}
  .intro-badge{right:20px;bottom:20px}
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-steps::before{display:none}
}