/* =========================================================
   SURABHYA EARTH MOVERS — design tokens
   Palette grounded in the worksite: asphalt charcoal, safety
   yellow, oxidised rust steel, quarry sand/concrete tones.
   ========================================================= */
:root{
  --charcoal:      #1C1B19;
  --charcoal-2:    #24221F;
  --charcoal-3:    #2E2B27;
  --steel:         #4A4842;
  --steel-light:   #6B675E;
  --yellow:        #F5B700;
  --yellow-dark:   #C99400;
  --rust:          #B23A20;
  --rust-light:    #C9532E;
  --sand:          #C9BFAE;
  --paper:         #EDE8DE;
  --white:         #FFFDF8;

  --display: 'Bebas Neue', Impact, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;

  --radius: 4px;
  --container: 1120px;
}

/* =========================================================
   DEVANAGARI (MARATHI) TYPOGRAPHY ADJUSTMENTS
   Devanagari characters have top matras (shirorekha vowels/dots)
   and bottom matras that extend beyond Latin baselines.
   When Marathi language is active, we use Teko & Mukta fonts
   and increase line-height to prevent dots/matras from overlapping.
   ========================================================= */
html[lang="mr"]{
  --display: 'Teko', 'Mukta', 'Bebas Neue', Impact, sans-serif;
  --body: 'Mukta', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
html[lang="mr"] .hero__title {
  line-height: 1.18;
  letter-spacing: 0;
}
html[lang="mr"] .section__title {
  line-height: 1.18;
  letter-spacing: 0;
}
html[lang="mr"] .card__title,
html[lang="mr"] .mcard__title,
html[lang="mr"] .why__item h3 {
  line-height: 1.25;
}
html[lang="mr"] .hero__sub,
html[lang="mr"] .section__sub,
html[lang="mr"] .card__desc,
html[lang="mr"] .about__text,
html[lang="mr"] .why__item p {
  line-height: 1.65;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 0.5rem;
  font-weight:600;
}

/* =========================================================
   LANGUAGE-SWITCHED ELEMENTS — layout stability
   Reserve a min-height per key text zone so that swapping
   between English and Marathi never causes reflow jumps.
   ========================================================= */
[data-i18n]{
  /* Allow the element to grow naturally; prevent collapse */
  min-height: 1em;
  /* Smooth text cross-fade on language switch */
  transition: opacity 0.18s ease;
}
body.lang-switching [data-i18n]{
  opacity: 0;
}

/* Reserve stable min-widths on text-heavy inline elements inside cards */
.card__desc[data-i18n],
.about__text[data-i18n]{
  min-height: 3.6rem;
}
.mcard__title[data-i18n],
.card__title[data-i18n]{
  min-height: 1.4rem;
}

/* =========================================================
   HAZARD STRIPE — signature element.
   ========================================================= */
.hazard{
  height:14px;
  background:repeating-linear-gradient(
    -45deg,
    var(--yellow) 0 18px,
    var(--charcoal) 18px 36px
  );
}

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--charcoal);
  border-bottom:1px solid var(--charcoal-3);
}
.topbar__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0.6rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem;
}
.brand{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.brand__mark{
  font-family:var(--display);
  font-size:1.1rem;
  letter-spacing:0.05em;
  background:var(--yellow);
  color:var(--charcoal);
  padding:0.25rem 0.5rem;
  border-radius:var(--radius);
  line-height:1;
}
.brand__name{
  font-family:var(--display);
  font-size:0.95rem;
  letter-spacing:0.03em;
  line-height:1.05;
  color:var(--white);
}
.brand__name span{ color:var(--sand); font-size:0.8em; }

.topnav{ display:none; gap:1.5rem; font-size:0.9rem; color:var(--paper); }
.topnav a:hover{ color:var(--yellow); }

/* ============================================================
   LANGUAGE TOGGLE BUTTON
   Unobtrusive pill in the header, shows the inactive language
   label so the user knows what they'll switch to.
   ============================================================ */
.lang-toggle{
  display:flex;
  align-items:center;
  gap:0.35rem;
  background:transparent;
  border:1px solid var(--steel);
  color:var(--sand);
  font-family:var(--body);
  font-size:0.78rem;
  font-weight:600;
  padding:0.35rem 0.7rem;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  line-height:1.3;
}
.lang-toggle:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}
.lang-toggle:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}
/* Active language indicator dot */
.lang-toggle::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--yellow);
  flex-shrink:0;
}

.topbar__call{
  display:flex; align-items:center; gap:0.4rem;
  background:var(--yellow);
  color:var(--charcoal);
  font-weight:700;
  font-size:0.85rem;
  padding:0.5rem 0.85rem;
  border-radius:var(--radius);
  white-space:nowrap;
  flex-shrink:0;
}

@media (min-width:860px){
  .topnav{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(245,183,0,0.10), transparent 55%),
    var(--charcoal);
  color:var(--white);
  padding:3.5rem 1.25rem 3rem;
  overflow:hidden;
}
.hero__stripe{
  position:absolute; top:0; right:-10%; bottom:0; width:55%;
  background:repeating-linear-gradient(
    -45deg, transparent 0 22px, rgba(245,183,0,0.05) 22px 44px
  );
  pointer-events:none;
}
.hero__inner{ max-width:var(--container); margin:0 auto; position:relative; }
.hero__title{
  font-family:var(--display);
  font-size:clamp(3.2rem, 15vw, 6.5rem);
  line-height:0.88;
  letter-spacing:0.01em;
  margin:0 0 1rem;
  color:var(--white);
}
.hero__title br{ display:block; }
.hero__sub{
  max-width:38rem;
  font-size:1.05rem;
  color:var(--sand);
  margin:0 0 1.75rem;
  /* Prevent layout shift when Marathi text is longer */
  min-height:4rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.5rem; }
.hero__area{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--steel-light);
  letter-spacing:0.02em;
  margin:0;
}

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:700; font-size:0.95rem;
  padding:0.85rem 1.4rem;
  border-radius:var(--radius);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  min-height:44px;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{
  background:var(--yellow);
  color:var(--charcoal);
  box-shadow:0 4px 0 var(--yellow-dark);
}
.btn--primary:hover{ box-shadow:0 5px 0 var(--yellow-dark); }
.btn--ghost{
  background:transparent;
  color:var(--white);
  border:2px solid var(--steel);
}
.btn--ghost:hover{ border-color:var(--yellow); color:var(--yellow); }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{
  max-width:var(--container);
  margin:0 auto;
  padding:3.5rem 1.25rem;
}
.section--alt{ background:var(--white); max-width:none; }
.section--alt > *{ max-width:var(--container); margin-left:auto; margin-right:auto; }
.section--dark{
  background:var(--charcoal); color:var(--white); max-width:none; padding:3.5rem 1.25rem;
}
.section--dark > *{ max-width:var(--container); margin-left:auto; margin-right:auto; }
.section--dark .eyebrow{ color:var(--yellow); }

.section__head{ margin-bottom:2rem; max-width:38rem; }
.section__title{
  font-family:var(--display);
  font-size:clamp(2.1rem, 6vw, 3rem);
  letter-spacing:0.01em;
  margin:0 0 0.5rem;
  line-height:0.95;
}
.section__sub{ color:var(--steel); margin:0; font-size:0.98rem; }
.section--dark .section__sub{ color:var(--sand); }

/* =========================================================
   EQUIPMENT CARDS
   ========================================================= */
.cardgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:640px){ .cardgrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cardgrid{ grid-template-columns:repeat(4,1fr); } }

.card{
  background:var(--white);
  border:1px solid #E3DDCD;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(28,27,25,0.08); }

.photo-slot{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(45deg, #EAE4D5 0 2px, transparent 2px 14px),
    var(--paper);
  border-bottom:1px dashed var(--sand);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.4rem;
  color:var(--steel);
  overflow:hidden;
  position:relative;
}
.photo-slot span{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.02em; text-align:center; padding:0 0.5rem; }
.photo-slot img{
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; top:0; left:0;
  transition:transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index:2;
}
.card:hover .photo-slot img,
.photo-slot:hover img{
  transform:scale(1.06);
}

.card__body{ padding:1.1rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.card__title{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:0.01em;
  margin:0;
  color:var(--charcoal);
}
.card__title span{ color:var(--steel-light); font-size:0.75em; }
.card__desc{ font-size:0.88rem; color:var(--steel); margin:0; flex:1; }
.card__rate{
  font-family:var(--mono);
  font-size:0.95rem;
  font-weight:600;
  color:var(--rust);
  margin:0.25rem 0 0;
}
.card__rate-note{ font-size:0.68rem; color:var(--steel-light); font-weight:500; }
.card__cta{
  margin-top:0.4rem;
  font-size:0.85rem;
  font-weight:700;
  color:var(--charcoal);
  border-top:1px solid #EAE4D5;
  padding-top:0.6rem;
}
.card__cta:hover{ color:var(--rust); }

/* =========================================================
   MATERIAL CARDS — paint-chip style swatches
   ========================================================= */
.cardgrid--material{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .cardgrid--material{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .cardgrid--material{ grid-template-columns:repeat(6,1fr); } }

.mcard{
  background:var(--paper);
  border:1px solid #E3DDCD;
  border-radius:var(--radius);
  padding:1rem;
  display:flex; flex-direction:column; gap:0.5rem;
}
.swatch{
  display:block; width:100%; height:2.75rem;
  border-radius:var(--radius);
  background:var(--swatch);
  border:1px solid rgba(0,0,0,0.12);
}
.mcard__title{
  font-family:var(--display);
  font-size:1.05rem;
  margin:0;
  line-height:1.05;
}
.mcard__title span{ display:block; font-family:var(--mono); font-size:0.65rem; color:var(--steel-light); font-weight:600; letter-spacing:0.02em; text-transform:uppercase; margin-top:0.15rem; }
.mcard__rate{ font-family:var(--mono); font-size:0.85rem; color:var(--rust); font-weight:600; margin:0; }
.mcard__rate-note{ font-size:0.65rem; color:var(--steel-light); font-weight:500; }
.mcard__cta{ font-size:0.78rem; font-weight:700; color:var(--charcoal); margin-top:auto; }
.mcard__cta:hover{ color:var(--rust); }

/* =========================================================
   WHY
   ========================================================= */
.whygrid{
  display:grid; grid-template-columns:1fr; gap:1.5rem;
}
@media (min-width:640px){ .whygrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .whygrid{ grid-template-columns:repeat(4,1fr); } }
.why__item{ border-top:3px solid var(--yellow); padding-top:0.85rem; }
.why__item h3{ font-family:var(--display); font-size:1.15rem; letter-spacing:0.01em; margin:0 0 0.4rem; }
.why__item p{ font-size:0.9rem; color:var(--steel); margin:0; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallerygrid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem;
}
@media (min-width:640px){ .gallerygrid{ grid-template-columns:repeat(3,1fr); } }
.photo-slot--tall{ aspect-ratio:1/1; border-radius:var(--radius); border:1px dashed var(--sand); }

/* =========================================================
   ABOUT
   ========================================================= */
.about__inner{ max-width:42rem; }
.about__text{ font-size:1.02rem; color:var(--steel); }

/* =========================================================
   CONTACT
   ========================================================= */
.contactgrid{
  display:grid; grid-template-columns:1fr; gap:1.75rem;
}
@media (min-width:800px){ .contactgrid{ grid-template-columns:1fr 1.2fr; } }

.contact__card h3{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--yellow);
  margin:1.25rem 0 0.35rem;
}
.contact__card h3:first-child{ margin-top:0; }
.contact__link{ font-size:1.05rem; font-weight:600; }
.contact__link:hover{ color:var(--yellow); }
.contact__text{ font-size:0.95rem; color:var(--sand); margin:0; }
.todo{ color:var(--rust-light); font-family:var(--mono); font-size:0.65rem; text-transform:uppercase; }

.social{ display:flex; gap:0.6rem; }
.social__icon{
  width:2.5rem; height:2.5rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--steel); border-radius:50%;
  color:var(--paper);
}
.social__icon:hover{ border-color:var(--yellow); color:var(--yellow); }

.contact__map{ display:flex; flex-direction:column; gap:0.5rem; }
.contact__map iframe{
  width:100%; height:280px; border:0; border-radius:var(--radius);
  filter:grayscale(0.15) contrast(1.05);
}
.map__note{ font-family:var(--mono); font-size:0.7rem; color:var(--steel-light); margin:0; }

/* =========================================================
   FOOTER — mandatory legal footer, simplified
   ========================================================= */
.footer{ background:var(--charcoal-2); color:var(--sand); padding:1.5rem 1.25rem; }
.footer__inner--simple{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
.footer__legal{
  font-size:0.78rem;
  color:var(--steel-light);
  margin:0;
  letter-spacing:0.02em;
}
.footer__legal--center{ text-align:center; }

/* =========================================================
   FLOATING ACTION BAR
   ========================================================= */
.fab{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; gap:1px;
  background:var(--charcoal-3);
}
.fab__btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.9rem 1rem;
  font-weight:700; font-size:0.9rem;
  min-height:52px;
}
.fab__btn--call{ background:var(--steel); color:var(--white); }
.fab__btn--whatsapp{ background:#25D366; color:#08341B; }

@media (min-width:860px){
  .fab{
    left:auto; right:1.5rem; bottom:1.5rem;
    border-radius:999px; overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    width:auto;
  }
  .fab__btn{ padding:0.9rem 1.4rem; }
}

/* =========================================================
   SCROLL REVEAL — one orchestrated, restrained motion
   ========================================================= */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }