/* ============================================================
   ABAQ AL-KUWAIT — Design tokens (Light / Champagne theme)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Tajawal:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --bg:#F7F2E6;          /* main off-white / champagne background */
  --bg-panel:#FFFFFF;    /* white-ish panel — cards, alternating sections */
  --bg-warm:#F1E3C2;     /* soft gold-wash — closing CTA, standout blocks */
  --line:#E6D9B9;        /* hairline border on light backgrounds */
  --line-soft:#EFE5CD;

  --gold:#B08A45;        /* primary gold — unchanged, from the logo */
  --gold-bright:#C6A05A; /* hover state on gold surfaces */
  --gold-deep:#8A6C38;   /* text-safe darker gold — labels, eyebrows */

  --oud:#3B2A1D;         /* deep brown — footer, the one dark accent block */
  --oud-2:#4A3521;

  --text:#241C13;        /* primary text on light backgrounds */
  --text-dim:#6E5F49;    /* secondary / body text on light backgrounds */
  --text-faint:#A0906F;  /* faint / disclaimer text on light backgrounds */

  --on-dark:#EFE4CC;     /* light text for use on dark surfaces (footer) */
  --on-dark-dim:#C9B896; /* secondary light text on dark surfaces */

  --serif-en:'Cormorant Garamond', serif;
  --sans-en:'Jost', sans-serif;
  --serif-ar:'Aref Ruqaa', serif;
  --sans-ar:'Tajawal', sans-serif;

  --container:1240px;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans-en);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lang-ar{ font-family:var(--sans-ar); }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ============================================================
   BILINGUAL TOGGLE — symmetric !important on both states
   ============================================================ */
[data-en]{ display:none !important; }
[data-ar]{ display:none !important; }
body.lang-en [data-en]{ display:inline !important; }
body.lang-ar [data-ar]{ display:inline !important; }
body.lang-en [data-en].block{ display:block !important; }
body.lang-ar [data-ar].block{ display:block !important; }

body.lang-ar{ direction:rtl; }
body.lang-en{ direction:ltr; }

h1[data-ar],h2[data-ar],h3[data-ar],p[data-ar],span[data-ar].block{ font-family:var(--serif-ar); }
body.lang-ar h1,body.lang-ar h2,body.lang-ar h3{ font-family:var(--serif-ar); }
body.lang-ar p,body.lang-ar .eyebrow,body.lang-ar .btn,body.lang-ar li{ font-family:var(--sans-ar); }
body.lang-en h1,body.lang-en h2,body.lang-en h3{ font-family:var(--serif-en); }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3{ margin:0; font-weight:500; color:var(--text); letter-spacing:.01em; }
.on-light h1,.on-light h2,.on-light h3{ color:var(--text); }
p{ line-height:1.75; color:var(--text-dim); margin:0; }
.on-light p{ color:var(--text-dim); }

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--sans-en); font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:18px;
}
body.lang-ar .eyebrow{ letter-spacing:0; font-size:13.5px; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); flex-shrink:0; }
body.lang-ar .eyebrow::before{ order:2; }

.rosette{ width:14px; height:14px; border:1px solid var(--gold); transform:rotate(45deg); margin:0 auto; }
.rosette.on-light{ border-color:var(--gold-deep); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,242,230,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:38px; width:auto; }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name .en{ font-family:var(--serif-en); font-size:19px; letter-spacing:.03em; color:var(--text); }
.brand-name .ar{ font-family:var(--serif-ar); font-size:19px; color:var(--text); }

.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav a{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  position:relative; padding:6px 0; transition:color .25s ease;
}
body.lang-ar .main-nav a{ letter-spacing:0; text-transform:none; font-size:15px; }
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-deep);
  transition:width .3s ease;
}
.main-nav a:hover{ color:var(--text); }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:16px; }
.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.lang-toggle button{
  background:transparent; border:none; color:var(--text-dim);
  font-size:11px; letter-spacing:.1em; padding:6px 13px; transition:all .25s ease;
}
.lang-toggle button.active{ background:var(--gold); color:#fff; }

.wa-btn{
  display:flex; align-items:center; gap:8px;
  background:var(--gold); color:#fff;
  padding:9px 18px; border-radius:22px;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  transition:background .25s ease, transform .25s ease;
}
body.lang-ar .wa-btn{ letter-spacing:0; text-transform:none; font-size:14px; }
.wa-btn:hover{ background:var(--gold-bright); transform:translateY(-1px); }
.wa-btn svg{ width:15px; height:15px; flex-shrink:0; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:30px; background:none; border:none; padding:0;
}
.hamburger span{ display:block; height:1.5px; width:100%; background:var(--text); transition:all .3s ease; }
.hamburger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---- mobile full-screen nav ---- */
.mobile-menu{
  position:fixed; inset:0; z-index:70;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
body.lang-ar .mobile-menu.open{ transform:translateY(0); }
.mobile-menu.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
}
.mobile-menu a{
  font-family:var(--serif-en); font-size:26px; color:var(--text); letter-spacing:.02em;
}
body.lang-ar .mobile-menu a{ font-family:var(--serif-ar); }
.mobile-menu .lang-toggle{ margin-top:6px; }
.mobile-menu .wa-btn{ margin-top:6px; }
.mobile-menu-close{
  position:absolute; top:26px; right:28px; background:none; border:none; color:var(--text);
  font-size:28px; line-height:1; padding:6px;
}
body.lang-ar .mobile-menu-close{ right:auto; left:28px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:118px 0 104px;
  overflow:hidden;
}
.hero .container{
  display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center;
}
.hero-copy .btn-row{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }
.hero-copy h1{
  font-size:clamp(38px,4.6vw,60px); line-height:1.12; margin-bottom:24px;
}
body.lang-ar .hero-copy h1{ line-height:1.5; }
.hero-copy .sub{ max-width:440px; font-size:16.5px; }

.hero-media{ position:relative; }
.hero-media .frame{
  position:relative; border:1px solid var(--line); padding:18px; background:var(--bg-panel);
}
.hero-media img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.hero-media .frame::before{
  content:""; position:absolute; inset:-1px; border:1px solid var(--gold-deep); opacity:.4;
  transform:translate(10px,10px); pointer-events:none;
}

/* signature: ambient smoke wisp, echoing the incense flame in the logo mark */
.smoke-wisp{
  position:absolute; top:-40px; right:6%; width:70px; height:220px; opacity:.4; pointer-events:none;
  z-index:0;
}
body.lang-ar .smoke-wisp{ right:auto; left:6%; }
.smoke-wisp path{
  fill:none; stroke:var(--gold-deep); stroke-width:1; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:wisp-draw 5s ease-in-out infinite alternate, wisp-drift 9s ease-in-out infinite;
}
@keyframes wisp-draw{ from{stroke-dashoffset:340;} to{stroke-dashoffset:0;} }
@keyframes wisp-drift{ 0%,100%{ transform:translateY(0) translateX(0);} 50%{ transform:translateY(-14px) translateX(6px);} }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 30px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px; transition:all .28s ease; border:1px solid transparent; white-space:nowrap;
}
body.lang-ar .btn{ letter-spacing:0; text-transform:none; font-size:15px; }
.btn-primary{ background:var(--gold); color:#fff; }
.btn-primary:hover{ background:var(--gold-bright); }
.btn-outline{ border-color:var(--line); color:var(--text); background:var(--bg-panel); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-deep); }
.btn-outline.on-light{ border-color:var(--line); color:var(--text); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ padding:128px 0; }
.section.on-light{ background:var(--bg-panel); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.section-head h2{ font-size:clamp(28px,3.2vw,42px); }
.section-head p{ margin-top:16px; }

/* ============================================================
   PRODUCT / FEATURED GRIDS
   ============================================================ */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
}
.grid.featured-grid{ grid-template-columns:repeat(2,1fr); max-width:900px; margin:0 auto; }

.card{
  position:relative; background:var(--bg-panel); border:1px solid var(--line);
  overflow:hidden; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(60,45,20,.28); }
.card .media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bg); }
.card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .media img{ transform:scale(1.05); }

.badge{
  position:absolute; top:14px; inset-inline-start:14px;
  background:rgba(36,28,19,.78); border:1px solid var(--gold); color:var(--on-dark);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:14px;
}
body.lang-ar .badge{ letter-spacing:0; text-transform:none; font-size:12px; }

.card .body{ padding:24px 24px 26px; }
.card h3{ font-size:20px; margin-bottom:6px; }
.card .price{ color:var(--text-dim); font-size:13px; letter-spacing:.05em; margin-bottom:18px; display:block; }
.card .order-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:transparent; border:1px solid var(--line); color:var(--text);
  padding:11px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; border-radius:2px;
  transition:all .25s ease;
}
body.lang-ar .card .order-btn{ letter-spacing:0; text-transform:none; font-size:14px; }
.card .order-btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.card .order-btn svg{ width:14px; height:14px; }

.featured-grid .card .body{ text-align:center; }
.featured-grid .card p.desc{ font-size:14px; margin-top:6px; margin-bottom:0; }

/* ---- mobile carousel (applies only to .carousel-mobile grids) ---- */
@media (max-width:768px){
  .grid.carousel-mobile{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding:4px 5vw 10px;
    scroll-padding-inline:5vw;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .grid.carousel-mobile::-webkit-scrollbar{ display:none; }
  .grid.carousel-mobile .card{
    flex:0 0 45%; scroll-snap-align:start;
  }
  .grid.carousel-mobile .card .body{ padding:14px 14px 16px; }
  .grid.carousel-mobile .card h3{ font-size:15px; }
  .grid.carousel-mobile .card .price{ font-size:11px; margin-bottom:10px; }
  .grid.carousel-mobile .card .order-btn{ padding:8px; font-size:9.5px; }
  body.lang-ar .grid.carousel-mobile .card .order-btn{ font-size:11.5px; }
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing-cta{
  text-align:center; padding:130px 0;
  background:linear-gradient(180deg,var(--bg-warm) 0%, var(--bg) 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.closing-cta h2{ font-size:clamp(26px,3.6vw,40px); max-width:620px; margin:0 auto 32px; color:var(--text); }

/* ============================================================
   FOOTER — the one deep-brown accent block on the page
   ============================================================ */
.site-footer{ background:var(--oud); padding:56px 0 32px; }
.footer-top{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid rgba(239,228,204,.16);
}
.footer-brand{ font-family:var(--serif-en); font-size:21px; color:var(--on-dark); }
body.lang-ar .footer-brand{ font-family:var(--serif-ar); }
.footer-links{ display:flex; gap:30px; }
.footer-links a{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-dim); }
body.lang-ar .footer-links a{ letter-spacing:0; text-transform:none; font-size:14px; }
.footer-links a:hover{ color:var(--gold-bright); }
.footer-note{ padding-top:24px; font-size:12px; color:#a99c85; text-align:center; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero{
  padding:130px 0 90px; text-align:center;
}
.about-hero .rosette{ margin-bottom:28px; }
.about-hero blockquote{
  margin:0 auto; max-width:760px; font-size:clamp(24px,3.4vw,38px);
  font-family:var(--serif-en); font-style:italic; line-height:1.5; color:var(--text);
}
body.lang-ar .about-hero blockquote{ font-family:var(--serif-ar); font-style:normal; line-height:1.8; }

.story-block{ padding:68px 0; }
.story-block .container{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.story-block.reverse .container{ direction:ltr; }
.story-block.reverse .container > *:first-child{ order:2; }
body.lang-ar .story-block .container{ direction:rtl; }
body.lang-ar .story-block.reverse .container{ direction:rtl; }
body.lang-ar .story-block.reverse .container > *:first-child{ order:0; }
.story-block .media{ border:1px solid var(--line); padding:14px; background:var(--bg-panel); }
.story-block .media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.story-block h3{ font-size:clamp(22px,2.6vw,30px); margin-bottom:16px; }
.story-block p{ font-size:15.5px; }

.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center;
}
.pillar{ padding:42px 26px; border:1px solid var(--line); background:var(--bg); }
.pillar .rosette{ margin-bottom:20px; }
.pillar h4{ font-size:19px; color:var(--text); margin-bottom:10px; font-family:var(--serif-en); }
body.lang-ar .pillar h4{ font-family:var(--serif-ar); }
.pillar p{ font-size:14px; }

.details-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.detail-item{ background:var(--bg-panel); padding:32px 20px; text-align:center; }
.detail-item .ar-word{ font-family:var(--serif-ar); font-size:26px; color:var(--gold-deep); margin-bottom:10px; display:block; }
.detail-item h5{ font-size:14.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text); margin-bottom:6px; }
body.lang-ar .detail-item h5{ letter-spacing:0; text-transform:none; font-size:16px; }
.detail-item p{ font-size:12.5px; }

.about-cta{ text-align:center; padding:120px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .main-nav,.header-actions .lang-toggle,.header-actions .wa-btn{ display:none; }
  .hamburger{ display:flex; }
  .hero .container{ grid-template-columns:1fr; gap:48px; }
  .hero-copy{ order:2; }
  .hero-media{ order:1; }
  .story-block .container{ grid-template-columns:1fr; gap:28px; }
  .story-block.reverse .container > *:first-child{ order:0 !important; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .grid.featured-grid{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:1fr; gap:18px; }
  .details-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ flex-direction:column; text-align:center; }
}
@media (max-width:560px){
  .section{ padding:80px 0; }
  .hero{ padding:72px 0 60px; }
  .grid:not(.carousel-mobile){ grid-template-columns:1fr; }
  .details-grid{ grid-template-columns:1fr 1fr; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ justify-content:center; }
}