/* styles.css — v10 (adds address label styling + keeps everything else same) */

:root{
  --gold:#c9a25a;
  --gold-dark:#b68f45;
  --bg:#f9f7f3;
  --card:rgba(255,255,255,.95);
  --text:#2d2b2a;
  --muted:#5e5955;

  --border:rgba(255,255,255,.55);
  --border-strong:rgba(201,162,90,.25);

  --shadow:0 14px 38px rgba(0,0,0,.10);
  --shadow-hover:0 22px 60px rgba(0,0,0,.16);

  --radius:22px;
  --radius-sm:16px;
  --transition:all .32s cubic-bezier(.2,.8,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html, body{overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:88px}

body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
}

.container{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
}

img{max-width:100%;height:auto;display:block}

/* ---------- Titles ---------- */
.section-title{
  font-size:clamp(2rem,7vw,3.8rem);
  text-align:center;
  margin:0 0 2.6rem;
  font-weight:900;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--text) 0%, var(--gold) 85%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative;
}
.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  transform:translateX(-50%);
  width:70px;
  height:4px;
  border-radius:99px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  opacity:.9;
}

/* ---------- Hero ---------- */
.hero{
  padding:1.2rem 0 2.2rem;
  background:linear-gradient(135deg, rgba(249,247,243,.98), rgba(241,229,214,.85));
}

.hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
  align-items:stretch;
}

.hero__content{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.6rem 1.1rem;
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  text-align:center;
}

/* Language switch */
.lang-switch{
  display:flex;
  justify-content:flex-end;
  margin:0 0 .35rem;
}
.lang-btn{
  appearance:none;
  border:1px solid rgba(201,162,90,.35);
  background:rgba(255,255,255,.75);
  color:var(--text);
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  padding:.55rem .9rem;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.lang-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(201,162,90,.55);
  box-shadow:0 16px 34px rgba(0,0,0,.12);
}
.lang-btn:focus-visible{
  outline:3px solid rgba(201,162,90,.45);
  outline-offset:3px;
}

.hero__logo-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  margin:0 auto 1rem;
  isolation:isolate;
}
.hero__logo-wrap::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border-radius:999px;
  background:radial-gradient(circle,
    rgba(201,162,90,.40) 0%,
    rgba(201,162,90,.18) 40%,
    rgba(201,162,90,0) 72%
  );
  filter:blur(12px);
  z-index:0;
}
.hero__logo{
  width:150px;
  height:auto;
  position:relative;
  z-index:1;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.18));
}

.hero__content h1{
  font-size:clamp(2.1rem,8vw,4.2rem);
  font-weight:950;
  line-height:1.05;
  margin:0 0 .9rem;
  background:linear-gradient(135deg,var(--text),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero__content > p{
  font-size:clamp(.98rem,3.5vw,1.2rem);
  color:var(--muted);
  margin:0 0 1.3rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.hero__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
}

.btn--primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:360px;
  padding:1rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:750;
  font-size:.98rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  box-shadow:0 14px 32px rgba(201,162,90,.28);
  transition:var(--transition);
}
.btn--primary:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(201,162,90,.38)}

.hero__link{
  text-decoration:none;
  color:var(--text);
  font-weight:650;
  letter-spacing:.06em;
  transition:var(--transition);
}
.hero__link:hover{color:var(--gold)}

/* Hero image fill */
.hero__image{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-hover);
  border:1px solid var(--border);
  height:320px;
}
.hero__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* ---------- About ---------- */
.about{
  padding:3.75rem 0;
  background:var(--bg);
}

.about-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  max-width:1100px;
  margin:0 auto 2.25rem;
}
.about-copy{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  padding:1.6rem 1.25rem;
  color:var(--muted);
}
.about-copy p{margin-bottom:1rem}
.about-copy p:last-child{margin-bottom:0}

.about-highlights{
  background:linear-gradient(135deg, rgba(201,162,90,.12), rgba(255,255,255,.75));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border-strong);
  padding:1.6rem 1.25rem;
}
.about-highlights h3{
  margin:0 0 .85rem;
  font-size:1.15rem;
  font-weight:900;
  color:var(--text);
}
.about-highlights ul{
  margin:0;
  padding-left:1.2rem;
  color:var(--muted);
}
.about-highlights li{
  margin:.35rem 0;
  font-weight:650;
}

/* Features */
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  justify-items:center;
}
.feature{
  width:100%;
  max-width:520px;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.7rem 1.3rem;
  text-align:center;
  border:1px solid var(--border);
  transition:var(--transition);
}
.feature:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.feature i{font-size:2.3rem;color:var(--gold);margin:0 0 .85rem;display:block}
.feature h3{font-size:1rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Services ---------- */
.services{
  padding:3.75rem 0 4.25rem;
  background:linear-gradient(135deg, rgba(249,247,243,.85), rgba(241,229,214,.55));
}

.services-intro{
  max-width:900px;
  margin:0 auto 1.25rem;
  text-align:center;
  color:var(--muted);
  font-weight:650;
}

.services-grid{
  display:grid;
  gap:1.25rem;
  max-width:1100px;
  margin:0 auto;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.service-box{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  padding:1.55rem 1.25rem;
  transition:var(--transition);
}
.service-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(201,162,90,.35);
}
.service-box h3{
  margin:0 0 .65rem;
  font-size:1.25rem;
  font-weight:950;
  background:linear-gradient(135deg,var(--text),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.service-box p{
  margin:0 0 .9rem;
  color:var(--muted);
  font-weight:650;
  line-height:1.55;
}
.service-box ul{
  margin:0;
  padding-left:1.2rem;
  color:var(--muted);
}
.service-box li{
  margin:.35rem 0;
  font-weight:650;
}

/* ---------- Recent Works ---------- */
.recent-works{
  padding:3.75rem 0 4.25rem;
  background:var(--bg);
}

.works-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  justify-content:center;
}

.works-grid img{
  width:100%;
  height:180px;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  transition:var(--transition);
}
.works-grid img:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  border-color:rgba(201,162,90,.35);
}

/* ---------- Contact ---------- */
.contact{padding:3.75rem 0 4.25rem}

.contact-wrapper{
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.contact-details{display:flex;flex-direction:column;gap:1.05rem}

.contact-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:1.05rem;
  padding:1.15rem 1.15rem;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  transition:var(--transition);
  text-decoration:none;
  color:inherit;
}
.contact-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(201,162,90,.35);
}

/* Address cards: keep icon aligned with first line */
.contact-item--address{
  align-items:flex-start;
}

.contact-icon{
  width:56px;height:56px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 56px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  box-shadow:0 10px 22px rgba(201,162,90,.25);
}
.contact-icon i{font-size:1.15rem}

.contact-text{
  min-width:0;
  font-size:1.02rem;
  font-weight:650;
  color:var(--muted);
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.35;
}

/* Label for Main Office / UAE Office (badge-like) */
.address-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.25rem .6rem;
  margin:0 0 .45rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(45,43,42,.92);
  background:linear-gradient(135deg, rgba(201,162,90,.22), rgba(201,162,90,.10));
  border:1px solid rgba(201,162,90,.28);
}

/* ---------- Social ---------- */
.social-section{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  padding:1.6rem 1.25rem;
  text-align:center;
}
.social-section h3{
  font-size:1.12rem;
  font-weight:850;
  margin:0 0 1rem;
  color:var(--text);
}
.social-icons{
  display:flex;
  justify-content:center;
  gap:.9rem;
  flex-wrap:wrap;
}
.social-icons a{
  width:56px;height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#fff;
  font-size:1.25rem;
  text-decoration:none;
  transition:var(--transition);
  box-shadow:0 12px 28px rgba(201,162,90,.26);
}
.social-icons a:hover{
  transform:translateY(-5px) scale(1.06);
  box-shadow:0 22px 50px rgba(201,162,90,.38);
}

/* ---------- Footer ---------- */
.footer{
  width:100%;
  background:rgba(45,43,42,.96);
  color:#fff;
  text-align:center;
  padding:1.8rem 0;
}
.footer p{margin:0;opacity:.92}

/* ---------- Tablet ---------- */
@media (min-width: 640px){
  .container{padding:0 20px}
  .hero__image{height:420px}

  .about-wrap{
    grid-template-columns:1.2fr .8fr;
    gap:1.3rem;
    align-items:stretch;
  }

  .features-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature{max-width:none}

  .works-grid{
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  }
  .works-grid img{height:200px}

  .hero__logo-wrap::before{width:210px;height:210px}
}

/* ---------- Desktop / Laptop ---------- */
@media (min-width: 980px){
  .container{padding:0 24px}

  .hero{
    min-height:100vh;
    padding:2.5rem 0;
  }
  .hero__inner{
    width:80vw;
    max-width:1400px;
    margin:0 auto;
    grid-template-columns:1.05fr .95fr;
    gap:3rem;
    align-items:stretch;
  }
  .hero__content{padding:2.4rem 2.2rem}

  .hero__image{
    height:auto;
    min-height:560px;
  }
  .hero__image img{height:100%}

  .about{padding:6.5rem 0}
  .services{padding:6.5rem 0}
  .recent-works{padding:6.5rem 0}
  .contact{padding:6.5rem 0}

  .services-grid{
    gap:1.6rem;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  }

  /* Works grid: lock to 5 columns so 33 items leaves 3 on the last row */
  .works-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:14px;
  }
  .works-grid img{height:210px}

  /* Center last 3 items (31–33) in columns 2–4 (uses nth-last-child) */
  .works-grid img:nth-last-child(3){ grid-column:2; }
  .works-grid img:nth-last-child(2){ grid-column:3; }
  .works-grid img:nth-last-child(1){ grid-column:4; }

  .contact-wrapper{
    max-width:1200px;
    grid-template-columns:1fr 420px;
    gap:3.5rem;
    align-items:start;
  }

  .hero__logo-wrap::before{width:230px;height:230px;filter:blur(12px)}
}