/* =========================================================
   Ya Madhir's Marketing | index.css  (Home)
   ========================================================= */

/* ---------- Hero: the breathing logo is the one loud thing on the page ---------- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6px var(--gutter) 88px;
  overflow-x:clip;
}
.hero::before{
  content:'';
  position:absolute;
  left:50%;
  top:42%;
  width:min(900px,120vw);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(122,15,15,.34),rgba(42,0,0,.16) 55%,transparent 100%);
  pointer-events:none;
  animation:glowPulse 4.2s ease-in-out infinite;
}

.logo-wrap{
  position:relative;
  width:min(560px,82vw);
  width:min(560px,82vw,50svh);
  aspect-ratio:1/1;
  animation:breathe 4.2s ease-in-out infinite;
}
.logo-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.tagline{
  position:relative;
  margin-top:4px;
  font-family:var(--display);
  font-size:clamp(1rem,2.4vw,1.25rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--gold-dim);
  text-shadow:none;
}

.hero-lede{
  position:relative;
  margin:18px auto 0;
  max-width:36rem;
  color:var(--bone-dim);
}

.cta-row{
  position:relative;
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}

/* scroll cue */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:24px;
  width:26px;
  height:44px;
  margin-left:-13px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  transition:opacity .4s ease;
}
.scroll-cue.is-away{ opacity:0 !important; }
.scroll-cue::after{
  content:'';
  position:absolute;
  left:50%;
  top:8px;
  width:4px;
  height:8px;
  margin-left:-2px;
  border-radius:2px;
  background:var(--ember-4);
  box-shadow:0 0 8px var(--ember-4);
  animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(16px); opacity:0; }
  100%{ transform:translateY(16px); opacity:0; }
}
@media (max-height:640px){ .scroll-cue{ display:none; } }

/* Intro sequence: the logo breathes straight away; the rest follows.
   The class .intro-go is added by index.js. */
.js body[data-intro] .nav{
  opacity:0;
  transform:translateY(-14px);
}
.js body[data-intro] [data-intro-item]{
  opacity:0;
  transform:translateY(16px);
}
.js body[data-intro].intro-go .nav{
  animation:navIn .9s ease forwards;
}
.js body[data-intro].intro-go [data-intro-item]{
  animation:fadeUp .9s var(--ease) forwards;
  animation-delay:calc(var(--d,0) * 140ms);
}

/* ---------- Intro statement + stats ---------- */
.intro-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,6vw,96px);
  align-items:start;
}
.intro-grid h2{ font-size:clamp(2.8rem,6.4vw,5.2rem); }
.intro-grid p{ padding-top:clamp(0px,1vw,12px); font-size:clamp(1.05rem,1.5vw,1.2rem); }

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(48px,7vw,88px);
  border-top:1px solid var(--line);
}
.stat{
  padding:30px clamp(14px,2vw,32px) 4px;
  border-left:1px solid var(--line);
}
.stat:first-child{ padding-left:0; border-left:0; }
.stat-num{
  font-family:var(--display);
  font-size:clamp(3.4rem,6vw,5.4rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--ember-4);
  text-shadow:0 0 30px rgba(255,77,61,.4);
  font-variant-numeric:tabular-nums;
}
.stat-label{
  margin-top:8px;
  max-width:20ch;
  color:var(--bone-dim);
  font-size:.95rem;
  line-height:1.4;
}

@media (max-width:860px){
  .intro-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ padding-left:0; border-left:0; }
  .stat:nth-child(n+3){ margin-top:28px; border-top:1px solid var(--line); }
}

/* ---------- Services preview ---------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3.2vw,48px);
}
.svc{
  position:relative;
  padding-top:30px;
}
.svc::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
}
.svc::after{
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  width:0;
  height:3px;
  background:var(--ember-4);
  box-shadow:var(--glow-sm);
  transition:width .55s var(--ease);
}
.svc:hover::after{ width:100%; }
.svc-icon{
  width:44px;
  height:44px;
  margin-bottom:22px;
  fill:none;
  stroke:var(--ember-4);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(255,77,61,.5));
}
.svc p{ margin-top:12px; color:var(--bone-dim); font-size:1rem; }

.section-more{ margin-top:clamp(36px,5vw,56px); }

@media (max-width:1000px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
}

/* ---------- Process: how a tiger hunts ---------- */
.process{
  position:relative;
  --p:0;
}
.process-line{
  position:absolute;
  left:11px;
  top:0;
  bottom:0;
  width:2px;
  background:var(--line);
}
.process-line::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(var(--p) * 100%);
  background:linear-gradient(180deg,var(--ember-4),var(--ember-3));
  box-shadow:0 0 14px rgba(255,77,61,.7);
}
.step{
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(150px,300px) 1fr;
  column-gap:clamp(20px,4vw,64px);
  align-items:start;
  padding:clamp(28px,4vw,52px) 0;
}
.step-dot{
  position:relative;
  z-index:1;
  width:24px;
  height:24px;
  margin-top:clamp(14px,1.6vw,22px);
  border:2px solid var(--line-strong);
  border-radius:50%;
  background:#000;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.step.is-lit .step-dot{
  border-color:var(--ember-4);
  background:var(--ember-4);
  box-shadow:0 0 18px rgba(255,77,61,.85);
}
.step-no{
  display:block;
  margin-bottom:4px;
  color:var(--gold-dim);
  font-size:.875rem;
  letter-spacing:.14em;
}
.step-name{
  font-family:var(--display);
  font-size:clamp(2.8rem,5.2vw,4.4rem);
  line-height:.95;
  letter-spacing:.03em;
  color:var(--bone-dim);
  transition:color .5s ease, text-shadow .5s ease;
}
.step.is-lit .step-name{
  color:var(--gold);
  text-shadow:0 0 30px rgba(255,77,61,.3);
}
.step-body h3{ margin-bottom:10px; color:var(--bone); }
.step-body p{ color:var(--bone-dim); }

@media (max-width:760px){
  .step{
    grid-template-columns:24px 1fr;
    row-gap:6px;
  }
  .step-dot{ grid-row:1; margin-top:12px; }
  .step-head{ grid-column:2; grid-row:1; }
  .step-body{ grid-column:2; grid-row:2; }
}

/* ---------- Featured work ---------- */
.featured-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,40px);
}
@media (max-width:700px){
  .featured-grid{ grid-template-columns:1fr; max-width:560px; }
}