/* ============================================================
   نظام التصميم المشترك — الدار البيضاء للشقق الفندقية
   نفس الهوية البصرية المستخدمة في index.php: أقواس معمارية،
   بلاطات زليج، ألوان رملية/بحرية/نحاسية، خط Cairo
   ============================================================ */

:root{
  --sand:#EFEAE0;
  --sand-dark:#E2DACB;
  --ink:#20241F;
  --sea:#1C5D5A;
  --sea-dark:#123E3C;
  --brass:#B08D57;
  --clay:#A6503B;
  --white:#FFFFFF;
  --radius-arch: 140px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:'Cairo', sans-serif;
  font-weight:400;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Cairo', sans-serif;
  font-weight:700;
  line-height:1.25;
}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}

.arch{ border-radius: var(--radius-arch) var(--radius-arch) 0 0; overflow:hidden; }
.arch-frame{
  position:relative; border:1px solid rgba(176,141,87,.5); padding:10px;
  border-radius: calc(var(--radius-arch) + 10px) calc(var(--radius-arch) + 10px) 0 0;
}

.tile-divider{
  height:26px;
  background-image: radial-gradient(circle at 50% 100%, transparent 12px, var(--sea) 13px);
  background-size: 26px 26px; background-repeat: repeat-x; background-position: bottom;
}
.tile-divider.on-dark{ background-image: radial-gradient(circle at 50% 100%, transparent 12px, var(--sand) 13px); }

/* NAV */
header{
  position:fixed; top:0; right:0; left:0; z-index:100;
  background:rgba(239,234,224,.92); backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(32,36,31,.08); transition:.3s;
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; }
.logo{ font-size:26px; color:var(--sea-dark); letter-spacing:1px; }
.logo span{ color:var(--brass); }
.nav-links{ display:flex; gap:34px; font-size:15px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; bottom:-2px; right:0; width:0; height:1px; background:var(--brass); transition:.3s; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.btn{
  display:inline-block; padding:12px 28px; border-radius:2px;
  background:var(--sea); color:var(--white); font-weight:700; font-size:14px;
  letter-spacing:.5px; border:1px solid var(--sea); transition:.3s; cursor:pointer;
}
.btn:hover{ background:var(--sea-dark); }
.btn-outline{ background:transparent; color:var(--sea); border:1px solid var(--sea); }
.btn-outline:hover{ background:var(--sea); color:var(--white); }
.menu-toggle{ display:none; font-size:26px; background:none; border:none; color:var(--sea-dark); }

/* PAGE HERO (for interior pages: about/services/offers/news) */
.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:160px 24px 70px;
  background: linear-gradient(180deg, rgba(18,62,60,.6), rgba(18,62,60,.8));
  background-size:cover; background-position:center;
}
.page-hero .hero-eyebrow{ color:var(--brass); letter-spacing:4px; font-size:13px; font-weight:700; margin-bottom:16px; }
.page-hero h1{ color:var(--white); font-size:clamp(32px,5vw,54px); margin-bottom:14px; }
.page-hero p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto; font-size:16px; line-height:1.8; }

/* Full hero (home page style, in case reused) */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 80px;
}
.hero-eyebrow{ color:var(--brass); letter-spacing:4px; font-size:13px; font-weight:700; margin-bottom:18px; }
.hero h1{ color:var(--white); font-size:clamp(38px,6vw,72px); margin-bottom:20px; }
.hero p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 34px; font-size:17px; line-height:1.9; }
.hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .btn-outline{ color:var(--white); border-color:rgba(255,255,255,.7); }
.hero .btn-outline:hover{ background:var(--white); color:var(--sea-dark); }

/* Section titles */
.section{ padding:100px 0 90px; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.eyebrow{ color:var(--brass); font-size:13px; letter-spacing:4px; font-weight:700; margin-bottom:14px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); color:var(--sea-dark); }
.section-head p{ margin-top:16px; color:#5a5f56; line-height:1.9; font-size:15.5px; }

/* FOOTER */
footer{ background:var(--ink); color:#cfd3c8; padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer-logo{ font-size:26px; color:var(--white); margin-bottom:16px; }
.footer-logo span{ color:var(--brass); }
.footer-col h4{ color:var(--white); font-size:15px; margin-bottom:18px; font-weight:700; }
.footer-col ul li{ margin-bottom:10px; font-size:14px; color:#a9ad9f; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:24px; text-align:center; font-size:13px; color:#8a8f82; }

@media (max-width:860px){
  .nav-links, header .btn{ display:none; }
  .menu-toggle{ display:block; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}