/* ============================================================
   Saadeddin Catering — marketing site
   Reuses the builder's design tokens so brand stays consistent.
   ============================================================ */

:root{
  --bg:#F6EFE2; --panel:#FCF7EC; --band:#EFE5D2; --dark:#2A1D18;
  --ink:#3B2A23; --muted:#6E5E50; --faint:#8C7C6C;
  --border:#E6DAC6;
  --accent:#1A604A; --accent-dark:#124434;
  --gold:#C0973A;
  /* Darker than the app's #9A7A1E: the kicker and tier tag are 10-11px, and
     the original only reached 3.25:1 on the band. #7F6316 clears 4.5:1 on
     cream, panel and band alike. */
  --gold-ink:#7F6316;
  --font-head:'Cormorant Garamond', Georgia, serif;
  --font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --wrap:1180px;
  --r:14px;
}
[dir="rtl"]{
  --font-head:'El Messiri', serif;
  --font-body:'Tajawal', system-ui, sans-serif;
}
[dir="rtl"] *{ letter-spacing:normal !important; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.15; margin:0; }
h1{ font-size:clamp(38px, 6vw, 68px); }
h2{ font-size:clamp(28px, 4vw, 44px); }
h3{ font-size:clamp(20px, 2.4vw, 27px); }
p{ margin:0 0 1em; }
.lede{ font-size:clamp(17px,1.9vw,21px); color:var(--muted); line-height:1.75; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.narrow{ max-width:760px; }
section{ padding:clamp(56px, 8vw, 104px) 0; }
.band{ background:var(--band); }
.panel-bg{ background:var(--panel); }

.kicker{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:700; margin:0 0 14px;
}
[dir="rtl"] .kicker{ font-size:12px; letter-spacing:normal; }

.rule{ width:54px; height:2px; background:var(--gold); margin:20px 0 26px; border:0; }
.center{ text-align:center; }
.center .rule{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; border-radius:999px; font-weight:600; font-size:15px;
  padding:14px 30px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background .18s, color .18s, transform .18s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#F6EFE2; box-shadow:0 12px 26px -12px rgba(26,96,74,.55); }
.btn-primary:hover{ background:var(--accent-dark); box-shadow:0 16px 32px -12px rgba(26,96,74,.65); }
.btn-ghost{ border-color:#D8C8A8; color:var(--ink); background:transparent; }
.btn-ghost:hover{ background:#EFE4CF; }

/* On dark surfaces the green primary sits at ~1.7:1 against the backdrop and
   disappears, while the WhatsApp green reads at ~6:1 — which inverts the
   hierarchy and makes the secondary action look like the primary one.
   Invert the primary to cream so it leads again. */
.hero .btn-primary, .cta .btn-primary{ background:#F6EFE2; color:var(--accent-dark); }
.hero .btn-primary:hover, .cta .btn-primary:hover{ background:#fff; color:#0E3327; }

/* Same problem for the outline button if it ever lands on a dark surface. */
.hero .btn-ghost, .cta .btn-ghost{ border-color:rgba(246,239,226,.5); color:#F6EFE2; }
.hero .btn-ghost:hover, .cta .btn-ghost:hover{ background:rgba(246,239,226,.14); }
.btn-wa{ background:#25D366; color:#0B3D22; }
.btn-wa:hover{ background:#1EBE5A; }
.btn-lg{ padding:16px 36px; font-size:16px; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(246,239,226,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border);
}
.head-in{ display:flex; align-items:center; gap:18px; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.brand img{ height:38px; width:auto; }
.brand span{ font-family:var(--font-head); font-size:20px; font-weight:600; }
.nav{ display:flex; gap:22px; margin-inline-start:auto; align-items:center; }
.nav a{ text-decoration:none; font-size:14.5px; color:var(--muted); font-weight:500; }
.nav a:hover, .nav a[aria-current]{ color:var(--accent); }
.nav .btn{ padding:10px 20px; font-size:14px; }
/* .nav a{ color:var(--muted) } outranks .btn-primary{ color:#F6EFE2 } on
   specificity alone, since both are one-class selectors on the same <a> and
   ".nav a" adds an element to the chain. Without this the header CTA rendered
   with dark, barely-legible text on its green fill. */
.nav a.btn{ color:#F6EFE2; }
.nav a.btn:hover{ color:#fff; }
.lang{
  border:1px solid var(--border); border-radius:999px; padding:7px 15px;
  font-size:13px; text-decoration:none; color:var(--muted); font-weight:600;
}
.lang:hover{ background:var(--panel); }
.burger{ display:none; margin-inline-start:auto; background:none; border:1px solid var(--border);
  border-radius:10px; width:42px; height:38px; font-size:17px; cursor:pointer; }

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    display:none; position:absolute; inset-inline:0; top:70px; background:var(--panel);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 22px 20px;
    border-bottom:1px solid var(--border); box-shadow:0 14px 30px rgba(59,42,35,.09);
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--border); font-size:16px; }
  .nav .btn, .nav .lang{ margin-top:14px; text-align:center; border-bottom:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:clamp(440px, 70vh, 660px); display:grid; align-items:center;
  color:#F8F2E6; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,20,15,.34) 0%, rgba(30,20,15,.62) 62%, rgba(30,20,15,.78) 100%);
}
.hero-in{ position:relative; z-index:2; padding:70px 0; }
.hero h1{ color:#FCF7EC; max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.34); }
.hero .kicker{ color:#E7C87A; }
.hero .lede{ color:#EFE3D2; max-width:56ch; margin-top:18px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero-stats{
  display:flex; flex-wrap:wrap; gap:0; margin-top:44px; max-width:600px;
  background:rgba(252,247,236,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(252,247,236,.18); border-radius:18px; padding:20px 8px;
}
.hero-stats div{ flex:1; min-width:120px; text-align:center; padding:4px 14px; border-inline-end:1px solid rgba(252,247,236,.16); }
.hero-stats div:last-child{ border-inline-end:0; }
.hero-stats b{ display:block; font-family:var(--font-head); font-size:32px; font-weight:600; color:#E7C87A; }
.hero-stats span{ font-size:12.5px; color:#DBCDBA; letter-spacing:.04em; }
@media (max-width:560px){ .hero-stats{ padding:14px 4px; } .hero-stats div{ min-width:88px; } }

/* page hero (interior, shorter) */
.phero{ min-height:clamp(300px, 44vh, 420px); }
.phero h1{ max-width:22ch; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:26px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:940px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
a.card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -16px rgba(59,42,35,.28); }
.card-img{ aspect-ratio:4/3; background:var(--band); overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
a.card:hover .card-img img{ transform:scale(1.045); }
.card-body{ padding:22px 22px 26px; flex:1; }
.card-body h3{ margin-bottom:9px; }
.card-body p{ color:var(--muted); font-size:15px; margin:0; }
.card-more{ color:var(--accent); font-weight:600; font-size:14px; margin-top:14px; display:inline-block; }

/* ---------- Gallery ---------- */
.gal{ columns:3; column-gap:16px; }
@media (max-width:900px){ .gal{ columns:2; } }
@media (max-width:560px){ .gal{ columns:1; } }
.gal figure{ margin:0 0 16px; break-inside:avoid; border-radius:12px; overflow:hidden;
  background:var(--band); position:relative; }
.gal img{ width:100%; height:auto; transition:transform .5s; }
.gal figure:hover img{ transform:scale(1.04); }
.gal figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:26px 16px 13px; color:#fff; font-size:13.5px;
  background:linear-gradient(transparent, rgba(25,16,12,.72)); opacity:0; transition:opacity .25s;
}
.gal figure:hover figcaption{ opacity:1; }

/* ---------- Client logos ---------- */
.trust-label{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 30px; }
.trust-label::before, .trust-label::after{ content:''; height:1px; width:64px; background:var(--border); }
.trust-label span{ color:var(--faint); font-size:13px; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.marquee{
  overflow:hidden; direction:ltr;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{ display:flex; align-items:center; gap:56px; width:max-content; animation:marquee-scroll 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }
.marquee-track img{
  height:40px; width:auto; max-width:126px; object-fit:contain; flex:none;
  filter:grayscale(1) opacity(.5); transition:filter .25s ease, opacity .25s ease;
}
.marquee-track img:hover{ filter:grayscale(0) opacity(1); }
.marquee-track img.dark-chip{ height:40px; padding:9px 14px; background:var(--dark); border-radius:8px; box-sizing:content-box; filter:opacity(.85); }
.marquee-track img.dark-chip:hover{ filter:opacity(1); }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* full logo wall, used on the dedicated clients page */
.logo-wall{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:900px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .logo-wall{ grid-template-columns:repeat(2,1fr); } }
.logo-tile{
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:22px 16px; min-height:96px; display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.logo-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(59,42,35,.25); }
.logo-tile img{ max-height:42px; max-width:100%; width:auto; object-fit:contain; filter:grayscale(1) opacity(.7); transition:filter .2s ease; }
.logo-tile:hover img{ filter:grayscale(0) opacity(1); }
.logo-tile.dark{ background:var(--dark); }
.logo-tile.dark img{ filter:opacity(.9); }
.logo-tile.dark:hover img{ filter:opacity(1); }

/* ---------- Process steps ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }
.process-grid::before{
  content:''; position:absolute; top:34px; inset-inline:8%; height:1px;
  background:repeating-linear-gradient(90deg, var(--border) 0 10px, transparent 10px 18px);
}
@media (max-width:820px){ .process-grid{ grid-template-columns:1fr; gap:36px; } .process-grid::before{ display:none; } }
.process-step{ position:relative; padding-inline-end:32px; }
.process-step:last-child{ padding-inline-end:0; }
.process-num{
  display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  background:var(--panel); border:1.5px solid var(--border); color:var(--accent); position:relative; z-index:1;
  font-family:var(--font-head); font-size:23px; font-weight:700; margin-bottom:20px;
}
.process-step h3{ font-size:19px; margin-bottom:8px; }
.process-step p{ color:var(--muted); font-size:14.5px; line-height:1.75; max-width:34ch; margin:0; }

/* ---------- Menu list ---------- */
.dishes{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; }
@media (max-width:780px){ .dishes{ grid-template-columns:1fr; } }
.dish{ padding:17px 0; border-bottom:1px dashed var(--border); }
.dish h4{ font-size:19px; margin-bottom:3px; }
.dish p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.6; }
.tier-tag{
  display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink); border:1px solid #E3D3AE; border-radius:999px;
  padding:2px 9px; margin-inline-start:9px; vertical-align:middle; font-weight:700;
}
[dir="rtl"] .tier-tag{ letter-spacing:normal; font-size:11px; }

/* ---------- Feature list ---------- */
.ticks{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.ticks li{ padding-inline-start:32px; position:relative; color:var(--muted); }
.ticks li::before{
  content:'✓'; position:absolute; inset-inline-start:0; top:-1px;
  color:var(--accent); font-weight:700;
}

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split img{ border-radius:var(--r); width:100%; box-shadow:0 26px 54px -22px rgba(59,42,35,.32); }

/* ---------- CTA band ---------- */
.cta{ background:var(--dark); color:#F3E9DA; text-align:center; position:relative; overflow:hidden; }
.cta::before{
  content:''; position:absolute; inset:0; opacity:.14;
  background:radial-gradient(circle at 18% 25%, var(--gold) 0, transparent 45%),
             radial-gradient(circle at 85% 80%, var(--accent) 0, transparent 50%);
}
.cta .wrap{ position:relative; }
.cta h2{ color:#FCF7EC; }
.cta p{ color:#CBB9A6; max-width:52ch; margin-inline:auto; }
.cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* ---------- FAQ ---------- */
.faq details{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:18px 22px; margin-bottom:13px;
}
.faq summary{ cursor:pointer; font-weight:600; font-size:17px; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; float:inline-end; color:var(--accent); font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:'−'; }
.faq details p{ margin:13px 0 0; color:var(--muted); font-size:15.5px; }

/* ---------- Footer ---------- */
.site-foot{ background:var(--dark); color:#C9B8A6; padding:64px 0 30px; font-size:14.5px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot h4{ color:#F3E9DA; font-size:17px; margin-bottom:14px; }
.site-foot a{ color:#C9B8A6; text-decoration:none; display:block; padding:5px 0; }
.site-foot a:hover{ color:#F3E9DA; }
.site-foot img.flogo{ height:44px; margin-bottom:16px; }
.foot-bot{
  border-top:1px solid rgba(255,255,255,.11); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#9C8B7B;
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:80;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.22);
  text-decoration:none; transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.07); }
/* Dark glyph, matching the .btn-wa / .pill-wa convention. White on #25D366 is
   only 1.98:1 — under the 3:1 minimum for icons, and inconsistent with the
   WhatsApp buttons elsewhere on the page. */
.wa-float svg{ width:30px; height:30px; fill:#0B3D22; }

@media print{ .site-head,.wa-float,.cta{ display:none; } }