/* =========================================================================
   Rana's Pantry — مونة رنا  ·  Chef Rana Al Tahan (Um Abdallah)
   A home pâtisserie in Amman, Jordan.
   Editorial · botanical · green-dominant · bilingual EN/AR (full RTL)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Jost:wght@300;400;500;600&family=Parisienne&family=Fredoka:wght@500;600;700&family=El+Messiri:wght@500;600;700&family=Tajawal:wght@400;500;700&display=swap');

/* ------------------------------- Tokens -------------------------------- */
:root{
  /* greens (dominant) */
  --pine:        #1A2A20;   /* darkest — dark sections */
  --ink:         #22352A;   /* primary text / deep green */
  --ink-2:       #3B5343;
  --sage:        #8C9C6E;   /* brand sage (her logo) */
  --sage-deep:   #6E8050;   /* buttons / strong accents */
  --olive:       #56683C;
  --sage-tint:   #E6EBD8;   /* pale sage panels */
  --sage-tint-2: #DCE3C8;
  --sage-line:   #C4CFAC;

  /* warm neutrals + sparing warmth */
  --bone:        #F5F0E5;   /* canvas */
  --bone-2:      #EEE6D5;
  --cream:       #FCF9F1;
  --clay:        #BC6A43;   /* terracotta — used sparingly */
  --honey:       #C79A45;   /* price / warm highlight */
  --gold:        #A98C4E;   /* hairlines */

  --wa:          #20764a;   /* harmonised whatsapp green */
  --wa-2:        #155d39;

  /* semantic */
  --bg:        var(--bone);
  --surface:   var(--cream);
  --text:      var(--ink);
  --muted:     #5C6A56;
  --faint:     #8A9580;
  --line:      color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --hair:      color-mix(in srgb, var(--gold) 55%, transparent);

  /* type */
  --serif:   'Cormorant Garamond', 'Times New Roman', serif;
  --sans:    'Jost', system-ui, -apple-system, sans-serif;
  --script:  'Parisienne', cursive;
  --fun:     'Fredoka', 'Jost', sans-serif;
  --ar-disp: 'El Messiri', 'Tajawal', sans-serif;
  --ar-body: 'Tajawal', 'El Messiri', sans-serif;

  /* shape — crisp & architectural, arches for imagery */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --arch:      46% 46% var(--r-md) var(--r-md) / 20% 20% var(--r-md) var(--r-md);
  --arch-tall: 50% 50% var(--r-md) var(--r-md) / 34% 34% var(--r-md) var(--r-md);

  --shadow-s: 0 2px 14px -6px rgba(26,42,32,.18);
  --shadow-m: 0 22px 50px -28px rgba(26,42,32,.40);
  --shadow-l: 0 50px 90px -40px rgba(26,42,32,.45);
  --ring: 0 0 0 3px color-mix(in srgb, var(--sage-deep) 35%, transparent);

  --container: 1240px;
  --nav-h: 78px;
  --ease: cubic-bezier(.22,.7,.24,1);
}

/* ------------------------------- Reset --------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  font-size:clamp(15px,.5vw + 14px,16.5px);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1; font-kerning:normal;
  hanging-punctuation:first allow-end last;
}
/* editorial drop cap on the story (Latin only — disabled for connected Arabic) */
.story__body p:first-of-type::first-letter{ font-family:var(--serif); font-weight:600; font-size:3.5em; line-height:.82;
  float:left; margin-inline-end:.09em; margin-block-start:.04em; color:var(--sage-deep); }
html[lang="ar"] .story__body p:first-of-type::first-letter{ float:none; font-size:inherit; margin:0; color:inherit; }
.title em, h1 em, .amp{ font-variant-ligatures:discretionary-ligatures; }
img,video{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }
::selection{ background:var(--sage-deep); color:#fff; }

body::before{ /* fine paper grain */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* --------------------------- Arabic / RTL ------------------------------ */
html[lang="ar"] body{ font-family:var(--ar-body); line-height:1.95; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .serif,
html[lang="ar"] .eyebrow,html[lang="ar"] .title{ font-family:var(--ar-disp); }
.en{ display:inline; } .ar{ display:none; }
html[lang="ar"] .en{ display:none; } html[lang="ar"] .ar{ display:inline; }
.en-b{ display:block; } .ar-b{ display:none; }
html[lang="ar"] .en-b{ display:none; } html[lang="ar"] .ar-b{ display:block; }

/* ------------------------------ Layout --------------------------------- */
.container{ width:min(100% - 44px, var(--container)); margin-inline:auto; position:relative; z-index:2; }
.section{ padding:clamp(70px,9vw,140px) 0; position:relative; }
.section--tight{ padding:clamp(48px,6vw,90px) 0; }
.bg-sage{ background:linear-gradient(180deg,var(--sage-tint),var(--bone)); }
.bg-cream{ background:linear-gradient(180deg,var(--cream),var(--bone)); }
.bg-dark{ background:radial-gradient(120% 140% at 80% 0%, #2A4031 0%, var(--pine) 70%); color:var(--cream); }
.bg-dark .muted{ color:color-mix(in srgb,var(--cream) 66%,transparent); }

/* type */
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.01em; margin:0; color:var(--ink); }
.bg-dark h1,.bg-dark h2,.bg-dark h3{ color:var(--cream); }
.title{ font-size:clamp(2.1rem,4.6vw,3.8rem); font-weight:500; line-height:1.02; margin:.18em 0; }
html[lang="ar"] .title{ line-height:1.3; letter-spacing:0; font-weight:600; }
.title em,.amp{ font-style:italic; color:var(--sage-deep); }
.bg-dark .title em,.bg-dark .amp{ color:var(--sage); }
html[lang="ar"] .title em,html[lang="ar"] .amp{ font-style:normal; }
.lead{ color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.24rem); max-width:60ch; font-weight:400; }
.script{ font-family:var(--script); }
html[lang="ar"] .script{ font-family:var(--ar-disp); }

/* eyebrow + Nº label */
.eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--sans); font-weight:600;
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--sage-deep); }
.bg-dark .eyebrow{ color:var(--sage); }
html[lang="ar"] .eyebrow{ letter-spacing:.04em; font-size:.95rem; font-family:var(--ar-body); }
.eyebrow .no{ font-family:var(--serif); font-style:italic; font-size:1.25em; letter-spacing:0; text-transform:none; color:var(--clay); }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--sage-deep); opacity:.6; }

.section-head{ max-width:720px; margin-bottom:clamp(34px,4vw,60px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

/* sprig divider */
.sprig{ display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--sage-deep); margin:0 auto; }
.sprig svg{ width:30px; height:30px; }
.sprig::before,.sprig::after{ content:""; height:1px; width:min(120px,18vw); background:linear-gradient(90deg,transparent,var(--sage-line)); }
.sprig::after{ background:linear-gradient(270deg,transparent,var(--sage-line)); }
.bg-dark .sprig{ color:var(--sage); }
.bg-dark .sprig::before{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.25)); }
.bg-dark .sprig::after{ background:linear-gradient(270deg,transparent,rgba(255,255,255,.25)); }

/* ------------------------------ Buttons -------------------------------- */
.btn{ --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.6em; border-radius:999px; font-weight:500; font-size:.98rem; letter-spacing:.01em;
  background:var(--bg); color:var(--fg); position:relative; line-height:1; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s;
  box-shadow:var(--shadow-s);
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); }
.btn:active{ transform:translateY(-1px); }
.btn--primary{ --bg:linear-gradient(140deg,var(--sage-deep),var(--olive)); --fg:#fff; }
.btn--wa{ --bg:linear-gradient(140deg,var(--wa),var(--wa-2)); --fg:#fff; }
.btn--clay{ --bg:linear-gradient(140deg,var(--clay),#a4582f); --fg:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.bg-dark .btn--ghost{ --fg:var(--cream); border-color:color-mix(in srgb,var(--cream) 38%,transparent); }
.bg-dark .btn--ghost:hover{ background:var(--cream); color:var(--ink); }
.btn--lg{ padding:1.08em 2em; font-size:1.05rem; }
.btn--block{ width:100%; }

.pill{ display:inline-flex; align-items:center; gap:.5em; padding:.42em .9em; border-radius:999px;
  background:var(--cream); color:var(--olive); font-weight:500; font-size:.82rem; border:1px solid var(--sage-line); }
.bg-dark .pill{ background:rgba(255,255,255,.07); color:var(--cream); border-color:rgba(255,255,255,.16); }

/* hand-drawn line icons (replace emoji) */
.ic{ width:1.06em; height:1.06em; display:inline-block; vertical-align:-.16em; flex:none; color:inherit; }
.ic--lg{ width:1.5em; height:1.5em; }
.trustbar .ic{ color:var(--sage); }
.footer .ic{ color:var(--sage); }
.pill .ic{ color:var(--sage-deep); }
.pay-row .pi .ic{ width:21px; height:21px; color:var(--olive); }
.class-card .ic > svg{ width:28px; height:28px; color:var(--olive); }
.class-card .meta .ic{ color:var(--sage-deep); }
.mobile-menu .em .ic{ width:26px; height:26px; }
.drawer__head .ic{ color:var(--olive); }

/* ------------------------------ Header --------------------------------- */
.header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; transition:background .45s, box-shadow .45s, backdrop-filter .45s; }
.header.scrolled{ background:color-mix(in srgb,var(--bone) 85%,transparent);
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 1px 0 var(--line-soft), 0 16px 34px -28px rgba(26,42,32,.5); }
.nav{ display:flex; align-items:center; gap:1.3rem; width:100%; }

/* logo lockup */
.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand__mark{ width:42px; height:42px; border-radius:12px; background:var(--sage); display:grid; place-items:center; flex:none; box-shadow:var(--shadow-s); }
.brand__mark svg{ width:26px; height:26px; color:var(--pine); }
.brand__name{ display:flex; flex-direction:column; line-height:1; }
.brand__name .wm{ font-family:var(--script); font-size:1.55rem; color:var(--ink); line-height:.9; }
.brand__name .sub{ font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--sage-deep); margin-top:4px; }
html[lang="ar"] .brand__name .wm{ font-family:var(--ar-disp); font-size:1.3rem; font-weight:700; }
html[lang="ar"] .brand__name .sub{ font-family:var(--ar-body); letter-spacing:.05em; }
.header.scrolled .brand__name .wm{ color:var(--ink); }

.nav__links{ display:flex; align-items:center; gap:.15rem; margin-inline-start:auto; }
.nav__links a{ padding:.5em .8em; border-radius:999px; font-weight:400; font-size:.93rem; color:var(--muted); transition:color .25s,background .25s; }
.nav__links a:hover{ color:var(--ink); }
.nav__links a.active{ color:var(--olive); background:var(--sage-tint); }
.nav__actions{ display:flex; align-items:center; gap:.5rem; margin-inline-start:.5rem; }

.lang-toggle{ display:inline-flex; align-items:center; gap:.4em; padding:.5em .85em; border-radius:999px;
  border:1.5px solid var(--line); font-weight:600; font-size:.84rem; color:var(--ink); transition:.25s; }
.lang-toggle:hover{ background:var(--sage-tint); transform:translateY(-2px); }
.lang-toggle svg{ width:1.05em; height:1.05em; color:var(--sage-deep); }

.cart-btn{ position:relative; display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--cream); transition:transform .25s,box-shadow .25s; box-shadow:var(--shadow-s); }
.cart-btn:hover{ transform:translateY(-2px) rotate(-6deg); }
.cart-btn svg{ width:20px; height:20px; }
.cart-count{ position:absolute; inset-block-start:-5px; inset-inline-end:-5px; min-width:21px; height:21px; padding:0 5px;
  border-radius:999px; background:var(--clay); color:#fff; font-size:.7rem; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--bone); transform:scale(0); transition:transform .3s var(--ease); }
.cart-count.show{ transform:scale(1); }
.nav-burger{ display:none; width:46px; height:46px; border-radius:12px; border:1.5px solid var(--line); place-items:center; }
.nav-burger svg{ width:22px; height:22px; }

/* -------------------------------- Hero --------------------------------- */
.hero{ position:relative; padding-block-start:calc(var(--nav-h) + clamp(26px,5vw,64px));
  padding-block-end:clamp(40px,6vw,86px); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__bg .glow{ position:absolute; border-radius:50%; filter:blur(80px); }
.hero__bg .g1{ width:560px; height:560px; inset-block-start:-180px; inset-inline-end:-120px; background:radial-gradient(circle,#CBD6A8,transparent 70%); opacity:.55; }
.hero__bg .g2{ width:520px; height:520px; inset-block-end:-200px; inset-inline-start:-160px; background:radial-gradient(circle,#E7CFAd,transparent 70%); opacity:.5; }
.hero__inner{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(26px,4vw,64px); align-items:center; }

.hero__badge{ display:inline-flex; align-items:center; gap:.6em; background:var(--cream); border:1px solid var(--sage-line);
  padding:.5em .95em; border-radius:999px; font-weight:500; font-size:.82rem; box-shadow:var(--shadow-s); color:var(--olive); }
.hero__badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--sage-deep); box-shadow:0 0 0 4px color-mix(in srgb,var(--sage-deep) 22%,transparent); }
.hero h1{ font-size:clamp(2.9rem,6.6vw,5.6rem); font-weight:500; margin:.42em 0 .3em; letter-spacing:-.02em; }
html[lang="ar"] .hero h1{ letter-spacing:0; line-height:1.2; }
.hero h1 .script{ font-size:1.16em; color:var(--sage-deep); display:inline-block; }
.hero h1 em{ font-style:italic; color:var(--clay); }
html[lang="ar"] .hero h1 em{ font-style:normal; }
.hero__lead{ font-size:clamp(1.06rem,1.5vw,1.26rem); color:var(--muted); max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start:1.9rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.3rem 2.4rem; margin-block-start:2.2rem; padding-block-start:1.7rem; border-block-start:1px solid var(--line); }
.hero__meta .stat .n{ font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1; color:var(--olive); font-style:italic; }
.hero__meta .stat .l{ font-size:.8rem; color:var(--muted); margin-top:.4em; }

/* arched collage — 3D depth + pointer parallax */
.hero__art{ perspective:1150px; }
.collage{ position:relative; aspect-ratio:1/1.06; transform-style:preserve-3d; transition:transform .22s var(--ease); will-change:transform; }
.collage figure{ position:absolute; margin:0; overflow:hidden; box-shadow:var(--shadow-l); background:var(--cream); }
.collage figure img{ width:100%; height:100%; object-fit:cover; }
.collage figure{ will-change:transform; }
.collage .c-main{ inset-block-start:2%; inset-inline-end:0; width:66%; height:74%; z-index:2; border-radius:var(--arch-tall);
  border:6px solid var(--cream); animation:floatA 8s var(--ease) infinite; }
.collage .c-2{ inset-block-end:0; inset-inline-start:0; width:50%; height:46%; z-index:3; border-radius:var(--arch);
  border:5px solid var(--cream); animation:floatB 7s var(--ease) infinite .9s; }
.collage .c-3{ inset-block-start:0; inset-inline-start:5%; width:36%; height:30%; z-index:1; border-radius:999px;
  border:5px solid var(--cream); animation:floatC 9s var(--ease) infinite .4s; }
.collage .seal{ position:absolute; inset-block-end:3%; inset-inline-end:2%; z-index:4; width:118px; height:118px;
  display:grid; place-items:center; border-radius:50%; background:var(--pine); color:var(--cream); box-shadow:var(--shadow-m);
  transform:translateZ(120px); }
.collage .seal .ring{ position:absolute; inset:0; animation:spin 28s linear infinite; }
.collage .seal .ring text{ font-family:var(--sans); font-size:8px; font-weight:600; letter-spacing:2.4px; fill:var(--sage); text-transform:uppercase; }
.collage .seal .ic{ width:34px; height:34px; color:var(--sage); }
@keyframes floatA{ 0%,100%{ transform:translateZ(70px) translateY(0) } 50%{ transform:translateZ(70px) translateY(-14px) } }
@keyframes floatB{ 0%,100%{ transform:translateZ(38px) translateY(0) } 50%{ transform:translateZ(38px) translateY(-11px) } }
@keyframes floatC{ 0%,100%{ transform:translateZ(8px) translateY(0) } 50%{ transform:translateZ(8px) translateY(-9px) } }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ------------------------------ Marquee -------------------------------- */
.marquee{ background:var(--pine); color:var(--cream); padding:1rem 0; overflow:hidden; position:relative; z-index:2;
  border-block:1px solid rgba(255,255,255,.08); }
.marquee__track{ display:flex; gap:2.6rem; width:max-content; animation:slide 42s linear infinite; }
[dir="rtl"] .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ display:inline-flex; align-items:center; gap:1.3rem; font-family:var(--serif); font-style:italic; font-size:1.3rem; white-space:nowrap; opacity:.95; }
html[lang="ar"] .marquee span{ font-family:var(--ar-disp); font-style:normal; }
.marquee span::after{ content:"❧"; color:var(--sage); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ------------------------------- Story --------------------------------- */
.story__grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,76px); align-items:center; }
.story__photo{ position:relative; }
.story__photo .frame{ overflow:hidden; box-shadow:var(--shadow-l); border:7px solid var(--cream);
  aspect-ratio:4/5; border-radius:var(--arch-tall); }
.story__photo .frame img{ width:100%; height:100%; object-fit:cover; }
.story__photo .tag{ position:absolute; inset-block-end:-20px; inset-inline-start:-16px; background:var(--cream);
  border-radius:var(--r-md); padding:.9rem 1.1rem; box-shadow:var(--shadow-m); display:flex; align-items:center; gap:.75rem;
  max-width:78%; border:1px solid var(--sage-line); }
.story__photo .tag .av{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--sage); }
.story__photo .tag .av--mark{ background:var(--sage); display:grid; place-items:center; border-color:var(--sage-line); }
.story__photo .tag .av--mark svg{ width:27px; height:27px; color:var(--pine); }
.story__photo .tag b{ display:block; font-family:var(--serif); font-size:1.05rem; font-weight:600; }
.story__photo .tag small{ color:var(--muted); font-size:.78rem; }
.story__body p{ color:var(--muted); margin:0 0 1.05em; }
.story__body p .hl{ color:var(--ink); font-weight:500; }
.signature{ font-family:var(--script); font-size:2.3rem; color:var(--sage-deep); margin-top:.1em; line-height:1; }
html[lang="ar"] .signature{ font-family:var(--ar-disp); font-size:1.7rem; }
.story__values{ display:flex; flex-wrap:wrap; gap:.65rem; margin-block-start:1.7rem; }

/* family chips */
.family{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }
.family .fc{ display:inline-flex; align-items:center; gap:.5em; padding:.4em .7em .4em .42em; border-radius:999px; background:var(--sage-tint); border:1px solid var(--sage-line); font-size:.84rem; font-weight:500; }
.family .fc .ava{ width:26px; height:26px; border-radius:50%; background:var(--sage-deep); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.78rem; font-family:var(--serif); }

/* ------------------------------ Reels ---------------------------------- */
.reels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); max-width:880px; margin-inline:auto; }
.reel{ position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-l); border:7px solid var(--cream); background:var(--pine); aspect-ratio:9/13; }
.reel video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel__tag{ position:absolute; inset-block-start:14px; inset-inline-start:14px; z-index:3; background:color-mix(in srgb,var(--pine) 72%,transparent);
  backdrop-filter:blur(6px); color:var(--cream); padding:.4em .85em; border-radius:999px; font-size:.78rem; font-weight:500; display:flex; align-items:center; gap:.45em; }
.reel__tag .live{ width:7px; height:7px; border-radius:50%; background:var(--clay); box-shadow:0 0 0 0 rgba(188,106,67,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(188,106,67,.55)} 70%{box-shadow:0 0 0 9px rgba(188,106,67,0)} 100%{box-shadow:0 0 0 0 rgba(188,106,67,0)} }
.reel__mute{ position:absolute; inset-block-end:14px; inset-inline-end:14px; z-index:3; width:40px; height:40px; border-radius:50%;
  background:color-mix(in srgb,var(--pine) 66%,transparent); backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center; transition:.25s; }
.reel__mute:hover{ background:var(--pine); transform:scale(1.06); }
.reel__mute svg{ width:18px; height:18px; }
.reel__cap{ position:absolute; inset-block-end:0; inset-inline:0; z-index:2; padding:2.4rem 1rem .9rem; color:#fff;
  background:linear-gradient(0deg,rgba(20,30,24,.82),transparent); font-family:var(--serif); font-style:italic; font-size:1.12rem; text-align:center; }
html[lang="ar"] .reel__cap{ font-family:var(--ar-disp); font-style:normal; }

/* ------------------------------- Menu ---------------------------------- */
.filters{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-bottom:clamp(30px,3vw,46px); }
.filter{ padding:.58em 1.1em; border-radius:999px; border:1.5px solid var(--line); font-weight:500; font-size:.9rem;
  color:var(--muted); transition:.28s var(--ease); display:inline-flex; align-items:center; gap:.45em; background:transparent; }
.filter:hover{ color:var(--ink); border-color:var(--ink); }
.filter.active{ background:var(--ink); color:var(--cream); border-color:var(--ink); box-shadow:var(--shadow-s); }
.filter .em{ font-size:1.02em; }

.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,38px) clamp(18px,2vw,30px); }
.card{ display:flex; flex-direction:column; position:relative; transition:transform .5s var(--ease); }
.card:hover{ transform:translateY(-6px); }
.card__media{ position:relative; aspect-ratio:4/4.4; overflow:hidden; border-radius:var(--arch);
  box-shadow:var(--shadow-m); border:1px solid var(--sage-line); background:var(--sage-tint); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
/* badges sit at the BOTTOM of the media: the arched top corners would clip them */
.card__badges{ position:absolute; inset-block-end:14px; inset-inline:14px; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.tagchip{ background:color-mix(in srgb,var(--cream) 92%,transparent); backdrop-filter:blur(4px); color:var(--olive);
  font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.34em .7em; border-radius:999px; box-shadow:var(--shadow-s); }
.tagchip.hot{ color:var(--clay); } .tagchip.veg{ color:var(--sage-deep); }
.card__zoom{ pointer-events:auto; width:34px; height:34px; border-radius:50%; background:color-mix(in srgb,var(--cream) 90%,transparent);
  display:grid; place-items:center; opacity:0; transform:scale(.7); transition:.3s var(--ease); margin-inline-start:auto; }
.card:hover .card__zoom{ opacity:1; transform:scale(1); }
.card__zoom svg{ width:16px; height:16px; color:var(--ink); }
.card__body{ padding:1.05rem .3rem .2rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.card__title{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.card__title h3{ font-size:1.42rem; font-weight:600; line-height:1.05; }
html[lang="ar"] .card__title h3{ font-size:1.28rem; }
.card__title .price{ font-family:var(--serif); font-weight:600; font-style:italic; color:var(--honey); font-size:1.3rem; white-space:nowrap; }
.card__title .price.quote{ font-size:.92rem; font-style:normal; font-family:var(--sans); color:var(--clay); font-weight:600; }
.card__desc{ color:var(--muted); font-size:.92rem; flex:1; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:.35rem; padding-top:.7rem; border-top:1px solid var(--line-soft); }
.card__unit{ font-size:.76rem; color:var(--faint); }
.add-btn{ display:inline-flex; align-items:center; gap:.4em; padding:.55em 1em; border-radius:999px; background:var(--sage-tint);
  color:var(--olive); font-weight:600; font-size:.84rem; border:1px solid var(--sage-line); transition:.28s var(--ease); }
.add-btn:hover{ background:var(--sage-deep); color:#fff; border-color:var(--sage-deep); transform:translateY(-2px); }
.add-btn svg{ width:1.05em; height:1.05em; }
.add-btn.added{ background:var(--olive); color:#fff; border-color:var(--olive); }
.add-btn.quote{ background:transparent; color:var(--clay); border-color:color-mix(in srgb,var(--clay) 45%,transparent); }
.add-btn.quote:hover{ background:var(--clay); color:#fff; }

.menu-note{ text-align:center; margin-top:2.6rem; color:var(--muted); font-size:.92rem; }

/* --------------------------- Occasions band ---------------------------- */
.occasion{ display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-l); }
.occasion__text{ background:radial-gradient(120% 130% at 0% 0%, #2C4233, var(--pine)); color:var(--cream); padding:clamp(32px,4vw,56px); }
.occasion__text h2{ color:var(--cream); }
.occasion__media{ position:relative; min-height:300px; }
.occasion__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.occasion__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 1.6rem; }

/* ------------------------------ Classes -------------------------------- */
.class-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); }
.class-card{ background:var(--cream); border:1px solid var(--sage-line); border-radius:var(--r-md); padding:1.7rem;
  box-shadow:var(--shadow-s); transition:transform .4s var(--ease),box-shadow .4s var(--ease); position:relative; }
.class-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.class-card .ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:1.55rem; background:var(--sage-tint); margin-bottom:1rem; }
.class-card h3{ font-size:1.5rem; font-weight:600; margin-bottom:.35rem; }
.class-card p{ color:var(--muted); font-size:.92rem; min-height:3em; }
.class-card .meta{ display:flex; gap:1rem; margin:1rem 0 1.1rem; flex-wrap:wrap; }
.class-card .meta span{ font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:.35em; }
.class-card .price-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; border-top:1px solid var(--line-soft); }
.class-card .price-row .p{ font-family:var(--serif); font-style:italic; font-size:1.6rem; font-weight:600; color:var(--honey); }

/* ------------------------------ Awards --------------------------------- */
.awards-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.award{ text-align:center; background:var(--cream); border:1px solid var(--sage-line); border-radius:var(--r-md);
  padding:1.7rem 1.1rem; position:relative; box-shadow:var(--shadow-s); transition:transform .4s var(--ease); }
.award:hover{ transform:translateY(-4px); }
.award .medal{ width:50px; height:50px; margin:0 auto .8rem; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 35%, #E7D7A6, var(--honey)); color:var(--pine); font-size:1.4rem; box-shadow:var(--shadow-s); }
.award b{ display:block; font-family:var(--serif); font-size:1.2rem; font-weight:600; }
.award small{ color:var(--muted); font-size:.82rem; }
.award .soon{ position:absolute; inset-block-start:10px; inset-inline-end:10px; font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }

/* ------------------------------ Process -------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); counter-reset:step; }
.step{ position:relative; padding-top:1.2rem; border-top:2px solid var(--sage-line); }
.step .n{ counter-increment:step; font-family:var(--serif); font-style:italic; font-size:2.4rem; color:var(--sage-deep); line-height:1; }
.step .n::before{ content:"0" counter(step); }
.step h3{ font-size:1.3rem; font-weight:600; margin:.45rem 0 .35rem; }
.step p{ color:var(--muted); font-size:.9rem; }

/* --------------------------- Payment + zones --------------------------- */
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,34px); align-items:start; }
.pay-card{ background:var(--cream); border:1px solid var(--sage-line); border-radius:var(--r-md); padding:1.7rem; box-shadow:var(--shadow-s); }
.pay-card h3{ font-size:1.5rem; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.pay-row{ display:flex; align-items:center; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line-soft); }
.pay-row:last-child{ border-bottom:none; }
.pay-row .pi{ width:42px; height:42px; border-radius:11px; background:var(--sage-tint); display:grid; place-items:center; flex:none; font-size:1.2rem; }
.pay-row b{ display:block; font-weight:600; }
.pay-row small{ color:var(--muted); font-size:.84rem; }
.cliq{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:.5rem; }
.cliq code{ font-family:var(--sans); font-weight:600; background:var(--sage-tint); padding:.35em .7em; border-radius:8px; color:var(--olive); letter-spacing:.02em; }
.copy-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--sage-line); display:grid; place-items:center; transition:.2s; }
.copy-btn:hover{ background:var(--sage-tint); }
.copy-btn svg{ width:16px; height:16px; color:var(--olive); }
.zones{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.zones .z{ padding:.4em .8em; border-radius:999px; background:var(--sage-tint); border:1px solid var(--sage-line); font-size:.84rem; color:var(--olive); font-weight:500; }
.map-frame{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--sage-line); box-shadow:var(--shadow-s); height:100%; min-height:280px; }
.map-frame iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; filter:saturate(.9); }

/* ------------------------------ Gallery -------------------------------- */
.gallery{ columns:4 210px; column-gap:14px; }
.gallery figure{ margin:0 0 14px; overflow:hidden; break-inside:avoid; box-shadow:var(--shadow-s); cursor:zoom-in; position:relative; border-radius:var(--r-md); border:1px solid var(--sage-line); }
.gallery figure:nth-child(3n+1){ border-radius:var(--arch); }
.gallery img{ width:100%; transition:transform .8s var(--ease); }
.gallery figure::after{ content:"⌕"; position:absolute; inset-block-end:10px; inset-inline-end:12px; color:#fff; font-size:1.2rem; opacity:0; transform:translateY(6px); transition:.35s var(--ease); text-shadow:0 1px 6px rgba(0,0,0,.5); }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figure:hover::after{ opacity:1; transform:translateY(0); }

.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(20,30,24,.93); backdrop-filter:blur(7px); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .35s; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:90vw; max-height:82vh; border-radius:var(--r-md); box-shadow:var(--shadow-l); transform:scale(.94); transition:transform .35s var(--ease); }
.lightbox.open img{ transform:scale(1); }
.lightbox .lb-cap{ position:absolute; inset-block-end:5%; inset-inline:0; text-align:center; color:var(--cream); font-family:var(--serif); font-style:italic; font-size:1.2rem; }
html[lang="ar"] .lightbox .lb-cap{ font-family:var(--ar-disp); font-style:normal; }
.lightbox .lb-x,.lightbox .lb-nav{ position:absolute; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); transition:.25s; }
.lightbox .lb-x:hover,.lightbox .lb-nav:hover{ background:rgba(255,255,255,.28); transform:scale(1.08); }
.lightbox .lb-x{ inset-block-start:4%; inset-inline-end:4%; }
.lightbox .lb-nav{ inset-block-start:50%; transform:translateY(-50%); }
.lightbox .lb-prev{ inset-inline-start:3%; } .lightbox .lb-next{ inset-inline-end:3%; }
.lightbox svg{ width:22px; height:22px; }

/* ---------------------------- Testimonials ----------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.quote{ background:var(--cream); border:1px solid var(--sage-line); border-radius:var(--r-md); padding:1.9rem; box-shadow:var(--shadow-s); position:relative; }
.quote.feature{ grid-column:span 1; background:radial-gradient(120% 130% at 0 0,#2C4233,var(--pine)); color:var(--cream); border-color:transparent; }
.quote .stars{ color:var(--honey); letter-spacing:3px; font-size:.95rem; margin-bottom:.7rem; }
.quote p{ font-family:var(--serif); font-size:1.24rem; line-height:1.42; color:var(--ink); margin:0 0 1.2rem; font-weight:500; }
.quote.feature p{ color:var(--cream); }
html[lang="ar"] .quote p{ font-family:var(--ar-body); font-weight:500; font-size:1.08rem; line-height:1.7; }
.quote .who{ display:flex; align-items:center; gap:.7rem; }
.quote .who .av{ width:44px; height:44px; border-radius:50%; background:var(--sage-deep); color:#fff; display:grid; place-items:center; font-weight:600; font-family:var(--serif); }
.quote.feature .who .av{ background:var(--sage); color:var(--pine); }
.quote .who b{ font-size:.96rem; font-weight:600; } .quote .who small{ display:block; color:var(--muted); font-size:.8rem; }
.quote.feature .who small{ color:color-mix(in srgb,var(--cream) 66%,transparent); }
.quote .mark{ position:absolute; inset-block-start:.7rem; inset-inline-end:1.4rem; font-family:var(--serif); font-size:4rem; color:var(--sage-tint-2); line-height:1; }
.quote.feature .mark{ color:rgba(255,255,255,.14); }

/* ------------------------------- FAQ ----------------------------------- */
.faq{ max-width:780px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); padding:.4rem 0; }
.faq summary{ list-style:none; cursor:pointer; padding:1.05rem .2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink); }
html[lang="ar"] .faq summary{ font-family:var(--ar-disp); font-size:1.15rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--sage-line); display:grid; place-items:center; transition:.3s var(--ease); color:var(--sage-deep); }
.faq details[open] summary .pm{ transform:rotate(45deg); background:var(--sage-deep); color:#fff; border-color:var(--sage-deep); }
.faq summary .pm svg{ width:15px; height:15px; }
.faq p{ color:var(--muted); padding:0 .2rem 1.1rem; margin:0; max-width:64ch; }

/* ------------------------------- CTA ----------------------------------- */
.cta-band{ position:relative; overflow:hidden; border-radius:30px; padding:clamp(44px,6vw,86px); text-align:center; box-shadow:var(--shadow-l);
  background:radial-gradient(120% 150% at 80% 0%, #2E4634, var(--pine)); color:var(--cream); }
.cta-band .glow{ position:absolute; border-radius:50%; filter:blur(70px); }
.cta-band .ga{ width:380px; height:380px; background:#5C6B41; opacity:.5; inset-block-start:-150px; inset-inline-start:-90px; }
.cta-band .gb{ width:360px; height:360px; background:var(--honey); opacity:.3; inset-block-end:-160px; inset-inline-end:-100px; }
.cta-band h2{ color:#fff; font-size:clamp(2.1rem,4.6vw,3.6rem); margin-bottom:.35em; }
.cta-band p{ color:color-mix(in srgb,#fff 84%,transparent); max-width:54ch; margin:0 auto 1.9em; font-size:1.1rem; }

/* ------------------------------ Footer --------------------------------- */
.footer{ background:var(--pine); color:color-mix(in srgb,var(--cream) 84%,transparent); padding-block:clamp(56px,7vw,86px) 2rem; position:relative; z-index:2; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px); }
.footer h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sage); margin:0 0 1.1rem; font-weight:600; }
html[lang="ar"] .footer h4{ letter-spacing:.04em; font-family:var(--ar-body); }
.footer .brand__name .wm{ color:var(--cream); }
.footer p{ color:color-mix(in srgb,var(--cream) 62%,transparent); font-size:.92rem; max-width:34ch; }
.footer a{ color:color-mix(in srgb,var(--cream) 76%,transparent); transition:color .25s; display:inline-flex; align-items:center; gap:.5em; }
.footer li{ margin-bottom:.65rem; }
.footer a:hover{ color:var(--sage); }
.footer .socials{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer .socials a{ width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.25s; }
.footer .socials a:hover{ background:var(--sage); color:var(--pine); transform:translateY(-3px); }
.footer .socials svg{ width:19px; height:19px; }
.footer__bottom{ margin-top:clamp(34px,4vw,54px); padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; align-items:center; font-size:.84rem; color:color-mix(in srgb,var(--cream) 52%,transparent); }
.footer__bottom .heart{ color:var(--clay); }

/* ------------------------- Drawer / overlay ---------------------------- */
.overlay{ position:fixed; inset:0; z-index:90; background:rgba(20,30,24,.5); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s; }
.overlay.show{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; inset-block:0; inset-inline-end:0; z-index:100; width:min(430px,100%); background:var(--bone);
  box-shadow:var(--shadow-l); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .45s var(--ease); }
[dir="rtl"] .drawer{ transform:translateX(-100%); }
.drawer.open{ transform:translateX(0) !important; }
.drawer__head{ padding:1.4rem 1.5rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.drawer__head h3{ font-size:1.6rem; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.drawer__close{ width:40px; height:40px; border-radius:50%; background:var(--sage-tint); display:grid; place-items:center; transition:.25s; }
.drawer__close:hover{ background:var(--sage-tint-2); transform:rotate(90deg); }
.drawer__items{ flex:1; overflow-y:auto; padding:1.2rem 1.5rem; display:flex; flex-direction:column; gap:1rem; }
.drawer__empty{ text-align:center; color:var(--muted); margin:auto; padding:2rem 1rem; }
.drawer__empty .em{ font-size:2.6rem; display:block; margin-bottom:.6rem; opacity:.7; }
.line-item{ display:flex; gap:.9rem; align-items:center; }
.line-item img{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex:none; box-shadow:var(--shadow-s); }
.line-item .li-info{ flex:1; min-width:0; }
.line-item .li-info b{ font-size:.95rem; font-weight:600; display:block; }
.line-item .li-info .li-price{ color:var(--olive); font-weight:600; font-size:.85rem; }
.qty{ display:inline-flex; align-items:center; gap:.2rem; background:var(--cream); border:1px solid var(--sage-line); border-radius:999px; padding:.15rem; }
.qty button{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:var(--olive); transition:background .2s; }
.qty button:hover{ background:var(--sage-tint); }
.qty span{ min-width:22px; text-align:center; font-weight:600; font-size:.9rem; }
.drawer__foot{ padding:1.3rem 1.5rem 1.6rem; border-top:1px solid var(--line); background:var(--cream); }
.drawer__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.3rem; }
.drawer__total .t-label{ font-weight:500; } .drawer__total .t-val{ font-family:var(--serif); font-style:italic; font-size:1.7rem; font-weight:600; color:var(--olive); }
.drawer__note{ font-size:.78rem; color:var(--muted); margin-bottom:1rem; }

/* ----------------------- Modal (custom order) -------------------------- */
.modal{ position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s; }
.modal.open{ opacity:1; pointer-events:auto; }
.modal__card{ background:var(--bone); border-radius:20px; box-shadow:var(--shadow-l); width:min(560px,100%); max-height:90vh; overflow-y:auto;
  transform:translateY(20px) scale(.98); transition:transform .4s var(--ease); border:1px solid var(--sage-line); }
.modal.open .modal__card{ transform:none; }
.modal__head{ padding:1.6rem 1.7rem 0; }
.modal__head .eyebrow{ margin-bottom:.4rem; }
.modal__head h3{ font-size:1.9rem; font-weight:600; }
.modal__head p{ color:var(--muted); font-size:.92rem; margin:.4rem 0 0; }
.modal__body{ padding:1.3rem 1.7rem 1.7rem; display:grid; gap:.9rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.field label{ font-size:.8rem; font-weight:600; color:var(--olive); }
.field input,.field select,.field textarea{ font:inherit; font-size:.95rem; padding:.7em .9em; border-radius:10px; border:1.5px solid var(--sage-line);
  background:var(--cream); color:var(--ink); transition:border-color .2s, box-shadow .2s; width:100%; }
.field textarea{ resize:vertical; min-height:74px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--sage-deep); box-shadow:var(--ring); }
.modal__close{ position:absolute; inset-block-start:14px; inset-inline-end:14px; width:38px; height:38px; border-radius:50%; background:var(--sage-tint); display:grid; place-items:center; transition:.25s; }
.modal__close:hover{ transform:rotate(90deg); }

/* ------------------------------ Toast ---------------------------------- */
.toast-wrap{ position:fixed; inset-block-end:24px; inset-inline:0; z-index:130; display:flex; flex-direction:column; align-items:center; gap:.6rem; pointer-events:none; }
.toast{ background:var(--pine); color:var(--cream); padding:.85rem 1.3rem; border-radius:999px; box-shadow:var(--shadow-l); font-weight:500; font-size:.92rem; display:flex; align-items:center; gap:.6rem; transform:translateY(20px); opacity:0; transition:.4s var(--ease); }
.toast.show{ transform:translateY(0); opacity:1; }
.toast .em{ color:var(--sage); }

/* ------------------------------ FAB ------------------------------------ */
.fab{ position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:80; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.2rem; border-radius:999px; background:linear-gradient(140deg,var(--wa),var(--wa-2)); color:#fff; font-weight:600;
  box-shadow:var(--shadow-m); transform:translateY(120px); transition:transform .5s var(--ease), box-shadow .3s; }
.fab.show{ transform:translateY(0); }
.fab:hover{ box-shadow:var(--shadow-l); transform:translateY(-3px); }
.fab svg{ width:22px; height:22px; }
.fab .fab-txt{ max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .4s var(--ease); }
.fab:hover .fab-txt{ max-width:170px; }

/* --------------------------- Mobile menu ------------------------------- */
.mobile-menu{ position:fixed; inset:0; z-index:70; background:var(--bone); transform:translateY(-100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; padding:calc(var(--nav-h) + 18px) 28px 28px; overflow-y:auto; }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--serif); font-size:1.9rem; font-weight:600; padding:.5rem 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
html[lang="ar"] .mobile-menu a{ font-family:var(--ar-disp); }
.mobile-menu a .em{ opacity:.55; }

/* --------------------------- Reveal anim ------------------------------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } }

/* ---------------------------- Trust bar -------------------------------- */
.trustbar{ background:var(--pine); color:var(--cream); position:relative; z-index:2; border-block:1px solid rgba(255,255,255,.08); }
.trustbar__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 2rem; padding:1rem 0; }
.trustbar .ti{ display:inline-flex; align-items:center; gap:.5em; font-size:.92rem; font-weight:400; color:color-mix(in srgb,var(--cream) 88%,transparent); white-space:nowrap; }
.trustbar .ti svg{ width:1.05em; height:1.05em; color:var(--sage); }
.trustbar .ti .stars{ color:var(--honey); letter-spacing:1px; }
.trustbar .ti b{ font-weight:600; color:var(--cream); }
.trustbar .sep{ width:5px; height:5px; border-radius:50%; background:var(--sage); opacity:.6; }

/* --------------------- Animated brand wordmark ------------------------- */
.brandplay{ position:relative; overflow:hidden; text-align:center; padding:clamp(54px,7vw,96px) 0;
  background:radial-gradient(120% 130% at 50% 0%, var(--sage-tint), var(--bone)); }
.brandplay .bp-word{ font-family:var(--fun); font-weight:700; font-size:clamp(3.2rem,12vw,8rem); line-height:1; letter-spacing:-.01em;
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:0; color:var(--sage-deep); }
.brandplay .bp-l{ display:inline-block; will-change:transform; animation:bpwave 2.8s var(--ease) infinite; animation-delay:calc(var(--i,0) * .07s);
  background:linear-gradient(180deg,var(--sage-deep),var(--olive)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brandplay .bp-sp{ width:.32em; }
.brandplay .bp-sprig{ width:clamp(40px,7vw,76px); height:clamp(40px,7vw,76px); color:var(--sage-deep); vertical-align:middle; margin-inline-end:.1em;
  display:inline-block; animation:bpsprig 3.4s var(--ease) infinite; transform-origin:bottom center; }
.brandplay .bp-tag{ margin-top:1rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,2vw,1.5rem); color:var(--ink-2); }
.brandplay .bp-word.ar{ display:none; }                              /* language toggle for inline-flex wordmark */
html[lang="ar"] .brandplay .bp-word.en{ display:none; }
html[lang="ar"] .brandplay .bp-word.ar{ display:inline-flex; }
html[lang="ar"] .brandplay .bp-word{ font-family:var(--ar-disp); font-weight:700; }
html[lang="ar"] .brandplay .bp-tag{ font-family:var(--ar-disp); font-style:normal; }
.brandplay .bp-cta{ margin-top:1.7rem; }
.brandplay .spark{ position:absolute; width:12px; height:12px; color:var(--honey); opacity:.0; animation:twinkle 4s ease-in-out infinite; }
.brandplay .spark svg{ width:100%; height:100%; }
.brandplay .s1{ inset-block-start:22%; inset-inline-start:14%; animation-delay:.2s }
.brandplay .s2{ inset-block-start:30%; inset-inline-end:16%; animation-delay:1.1s; width:16px; height:16px }
.brandplay .s3{ inset-block-end:24%; inset-inline-start:24%; animation-delay:2.1s; width:9px; height:9px }
.brandplay .s4{ inset-block-end:28%; inset-inline-end:26%; animation-delay:1.6s }
@keyframes bpwave{ 0%,72%,100%{ transform:translateY(0) rotate(0) } 36%{ transform:translateY(-16px) rotate(-2deg) } }
@keyframes bpsprig{ 0%,100%{ transform:rotate(-6deg) translateY(0) } 50%{ transform:rotate(6deg) translateY(-8px) } }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(.5) } 50%{ opacity:.9; transform:scale(1) } }

/* ------------------------ Sticky mobile order bar ---------------------- */
.orderbar{ position:fixed; inset-block-end:0; inset-inline:0; z-index:85; display:none; align-items:center; gap:.7rem;
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom,0)); background:color-mix(in srgb,var(--pine) 94%,transparent);
  backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 -10px 30px -16px rgba(0,0,0,.5); }
.orderbar__basket{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-radius:14px; background:rgba(255,255,255,.1); color:var(--cream); font-weight:500; flex:none; }
.orderbar__basket svg{ width:20px; height:20px; }
.orderbar__basket .ob-count{ min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--clay); color:#fff; font-size:.72rem; font-weight:700; display:grid; place-items:center; }
.orderbar__cta{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem 1rem; border-radius:14px;
  background:linear-gradient(140deg,var(--wa),var(--wa-2)); color:#fff; font-weight:600; font-size:1rem; }
.orderbar__cta svg{ width:20px; height:20px; }
.orderbar__cta .ob-total{ font-weight:700; }

/* --------------------------- Scroll progress --------------------------- */
.scroll-progress{ position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0; z-index:65;
  background:linear-gradient(90deg, var(--sage-deep), var(--honey)); box-shadow:0 0 10px rgba(110,128,80,.45); transition:width .08s linear; }
/* 3D tilt — interactive cards lift in perspective (set via JS, fine pointers only) */
.tilt{ transition:transform .4s var(--ease); transform-style:preserve-3d; }

/* ----------------------------- Responsive ------------------------------ */
@media (max-width:1080px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  .class-grid,.quotes{ grid-template-columns:repeat(2,1fr); }
  .quote.feature{ grid-column:span 2; }
  .steps,.awards-wrap{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .hero__inner,.story__grid,.info-grid,.occasion{ grid-template-columns:1fr; }
  .collage{ max-width:520px; margin-inline:auto; width:100%; }
  .story__photo{ max-width:440px; }
  .occasion__media{ min-height:240px; order:-1; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav-burger{ display:grid; }
  .nav__actions{ margin-inline-start:auto; }
  .menu-grid,.class-grid,.quotes,.steps,.awards-wrap{ grid-template-columns:1fr; }
  .reels{ grid-template-columns:1fr; max-width:340px; }
  .quote.feature{ grid-column:span 1; }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .gallery{ columns:2 140px; }
  .collage .seal{ width:92px; height:92px; }
  .menu-grid{ gap:30px; }
  .card__media{ aspect-ratio:4/3.6; }
  .field.row2{ grid-template-columns:1fr; }
  .orderbar{ display:flex; }       /* sticky order bar on phones */
  .fab{ display:none; }            /* replaced by the order bar on mobile */
  body{ padding-bottom:76px; }     /* room for the sticky order bar */
  .drawer{ width:100%; }
  .trustbar__row{ gap:.4rem 1.1rem; padding:.85rem 0; }
  .trustbar .ti{ font-size:.82rem; }
  .cta-band,.occasion{ border-radius:20px; }
}
@media (max-width:420px){
  .container{ width:min(100% - 30px,var(--container)); }
  .hero h1{ font-size:2.8rem; }
}