/* Plum Catering, Home v3 PREVIEW (Brian, 15 Oct 2026, Round 4). Loaded only on /home-v3/. Palette B, one gold #9b792c, taupe, Josefin Sans + Tajawal.
   This file draws the calm final state of every section (no JS, reduced motion). plum-h3.js adds html.h3-live and animates towards it. */
.pg-home{--g:#9b792c;--taupe-l:color-mix(in srgb,var(--band) 42%,var(--cream));--paper:color-mix(in srgb,var(--cream) 55%,#fff)}
.pg-home main{background:var(--cream);color:var(--ink);overflow-x:clip}
.h3 .eyebrow{color:var(--ink);opacity:.8}
.h3 .pcard-hero .eyebrow,.pcard-hero .eyebrow{color:color-mix(in srgb,#c8a34b 72%,var(--cream));opacity:1;font-weight:500;font-size:14px} /* small line on the dark opening card, gold (Chadi 19 Oct) */
.h3 .w{display:inline-block}
.h3-sec{position:relative;padding-block:clamp(44px,6vw,88px)}
/* Section rhythm (Chadi 15 Oct: "fix the huge gap, add a tiny divider"): tighter gaps, a small gold line in the middle of each gap */
.h3 > section + section:not(.h3-hero):not(.h3-proof){position:relative}
.h3 > section + section:not(.h3-hero):not(.h3-proof)::before{content:"";position:absolute;top:0;left:50%;width:40px;height:1px;background:var(--g);opacity:.7;transform:translateX(-50%)}
.h3-head{text-align:center;max-width:860px;margin-inline:auto;margin-block-end:clamp(36px,5vw,64px)}
.h3-title{font-weight:300;font-size:clamp(34px,4.6vw,66px);line-height:1.08;letter-spacing:.02em;text-transform:uppercase}
html[lang="ar"] .h3-title{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.3}
.h3-intro{margin-block-start:12px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;opacity:.9}
html[lang="ar"] .h3-intro{line-height:1.85}
.h3-more-row{text-align:center;margin-block-start:clamp(34px,5vw,56px)}
.h3-tag{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 8px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:13px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 14px 34px -18px color-mix(in srgb,var(--shade) 45%,transparent);white-space:nowrap}
html[lang="ar"] .h3-tag{letter-spacing:0;text-transform:none;font-size:15px}
.h3-tag svg.ic{width:18px;height:18px;color:var(--g)}
.h3 .ic-dir{width:14px;height:14px}
[dir="rtl"] .h3 .ic-dir{transform:scaleX(-1)}

/* 1. hero: headline, deck, sub line and buttons */
.h3-hero{padding-block:clamp(44px,6vw,88px) clamp(24px,4vh,48px);text-align:center;overflow:hidden}
.h3-h1{font-weight:300;font-size:clamp(32px,4.4vw,64px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;max-width:17ch;margin-inline:auto}
html[lang="ar"] .h3-h1{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.28;max-width:20ch}
.h3-hero-head .eyebrow{margin-block-end:16px}
/* the photo fan (Chadi 19 Oct): five kitchen photos, 3:2, thin cream frame, side cards smaller and softer so the front card leads.
   Badges sit on card edges: ISO on the left card, 1,200 sqm on the right card, HACCP on the front card (phone: top right). */
.h3-deck{--cw:clamp(250px,24vw,350px);--fx:clamp(130px,15vw,215px);--s:1;position:relative;height:calc(var(--cw) * 2 / 3 + 120px);margin-block:clamp(26px,4vh,46px) 6px}
[dir="rtl"] .h3-deck{--s:-1}
.h3-card{position:absolute;left:50%;top:0;width:var(--cw);aspect-ratio:3/2;margin:0 0 0 calc(var(--cw) / -2);padding:3px;border-radius:14px;overflow:hidden;background:#f6f4ee;
  box-shadow:0 22px 44px -22px color-mix(in srgb,var(--shade) 60%,transparent);
  transform:translateX(calc(var(--k) * var(--fx) * var(--s))) translateY(calc(var(--ak) * 22px)) rotate(calc(var(--k) * 5deg * var(--s))) scale(calc(1 - var(--ak) * .07))}
.h3-card img{width:100%;height:100%;object-fit:cover;border-radius:11px;filter:brightness(calc(1 - var(--ak) * .12)) saturate(calc(1 - var(--ak) * .1))}
.h3-deck .h3-tag{position:absolute;z-index:20;white-space:nowrap}
.h3-deck .h3-tag-1{inset-inline-start:calc(50% - var(--fx) - var(--cw) * .5 + 8px);top:calc(var(--cw) * .06)}
.h3-deck .h3-tag-2{inset-inline-end:calc(50% - var(--fx) - var(--cw) * .5 + 8px);top:calc(var(--cw) * .04)}
.h3-deck .h3-tag-3{left:0;right:0;margin-inline:auto;width:max-content;top:calc(var(--cw) * 2 / 3 - 20px)}
.h3-sub{max-width:52ch;margin-inline:auto;font-size:clamp(17px,1.4vw,19px);line-height:1.6}
html[lang="ar"] .h3-sub{line-height:1.85}
.h3-hero .actions{margin-block-start:22px}

/* 2. What we cater: expanding photo panels */
.h3-pn{flex:1 1 0;min-width:0;transition:flex-grow .8s var(--ease-o,ease)}
.h3-pn.on{flex-grow:5.5}
.h3-pn-in{position:relative;display:block;height:100%;border-radius:22px;overflow:hidden;isolation:isolate;color:var(--cream);background:var(--shade)}
.h3-pn-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;padding:0 0 22px;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:inherit;display:flex;align-items:flex-end;justify-content:center} /* the label is centred by the button's own layout (16 Oct: % offsets resolved to 0 inside the button and cut the label) */
.h3-pn.on .h3-pn-hit{pointer-events:none}
.h3-pn-hit:focus-visible{outline:2px solid var(--cream);outline-offset:-6px;border-radius:22px}
.h3-pn-ph,.h3-pn-ph img{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.h3-pn-ph img{object-fit:cover;transition:transform 1.2s var(--ease-o,ease),filter .6s}
.h3-pn:not(.on) .h3-pn-ph img{filter:brightness(.62) saturate(.9)}
.h3-pn-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--shade) 70%,transparent))}
.h3-pn-v{position:static;display:flex;align-items:center;gap:14px;max-height:calc(100% - 44px);overflow:hidden;writing-mode:vertical-rl;transform:rotate(180deg);font-size:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity .4s} /* closed categories are slim 80 px strips, label vertical and centred (Chadi 17 Oct) */
html[lang="ar"] .h3-pn-v{letter-spacing:0;text-transform:none;font-size:16px}
.h3-pn-v .ltr{font-size:12px;letter-spacing:.2em;color:color-mix(in srgb,var(--g) 50%,var(--cream))}
.h3-pn.on .h3-pn-v{opacity:0}
.h3-pn-c{position:absolute;z-index:2;inset-inline:14px;bottom:14px;display:grid;gap:8px;padding:22px 24px;border-radius:18px;background:color-mix(in srgb,var(--dark) 34%,transparent);border:1px solid color-mix(in srgb,#fff 18%,transparent);
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--ease-o,ease);pointer-events:none;max-width:520px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.h3-pn-c{-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}}
.h3-pn.on .h3-pn-c{opacity:1;transform:none;transition-delay:.25s}
.h3-pn-n{font-family:"Josefin Sans",sans-serif;font-size:12px;letter-spacing:.22em;color:color-mix(in srgb,var(--g) 50%,var(--cream))}
.h3-pn-t{font-size:clamp(24px,2.4vw,34px);font-weight:300;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
html[lang="ar"] .h3-pn-t{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.4}
.h3-pn-x{font-size:15px;line-height:1.55;opacity:.9}
@media (max-width:767px){
  .h3-pn{flex:none;height:64px;transition:height .7s var(--ease-o,ease)}
  .h3-pn.on{height:300px}
  .h3-pn-in{border-radius:16px}
  .h3-pn-hit{align-items:center;justify-content:flex-start;padding:0 18px}
  .h3-pn-v{writing-mode:horizontal-tb;transform:none;max-height:none;max-width:100%;font-size:13px}
  .h3-pn-c{inset-inline:8px;bottom:8px;padding:14px 16px;gap:4px}
  .h3-pn-t{font-size:20px;white-space:normal}
  .h3-pn-x{font-size:13.5px}
}

.h3-k{position:relative;max-width:1180px;margin-inline:auto}
.h3-k-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.h3-k-line{position:absolute;inset-inline:12.5%;top:7px;height:1px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.h3-k-line i{position:absolute;inset:0;background:var(--g);transform-origin:left center}
[dir="rtl"] .h3-k-line i{transform-origin:right center}
.h3-k-st{display:grid;justify-items:center;text-align:center;gap:12px}
.h3-k-dot{width:15px;height:15px;border-radius:50%;background:var(--cream);border:1px solid var(--g);position:relative;z-index:1}
.h3-k-n{font-family:"Josefin Sans",sans-serif;font-size:13px;letter-spacing:.22em;color:var(--g);margin-block-start:10px}
.h3 .h3-k-ic{width:44px;height:44px;stroke-width:1.5;color:var(--g)}
.h3-k-l{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
html[lang="ar"] .h3-k-l{letter-spacing:0;text-transform:none;font-size:15px}
.h3-k-t{font-size:clamp(19px,1.6vw,23px);font-weight:300;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;max-width:16ch}
html[lang="ar"] .h3-k-t{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.5}
@media (max-width:767px){
  .h3-k-row{grid-template-columns:1fr;gap:34px;padding-inline-start:34px}
  .h3-k-line{inset-inline:auto;inset-inline-start:7px;top:8px;bottom:8px;width:1px;height:auto}
  .h3-k-line i{transform-origin:center top}
  .h3-k-st{grid-template-columns:auto 1fr;justify-items:start;text-align:start;column-gap:14px;row-gap:4px;position:relative}
  .h3-k-dot{position:absolute;inset-inline-start:-34px;top:2px}
  .h3-k-n{grid-column:1/-1;margin:0}
  .h3 .h3-k-ic{grid-row:2/4;width:36px;height:36px}
  .h3-k-t{font-size:19px;max-width:none}
}

/* 4. menus: eleven cuisine cards (Chadi 17 Oct), four per row with the last row centred, two per row on a phone */
.h3-row4{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.h3-row4>.h3-mc{flex:0 0 calc((100% - 54px)/4);min-width:0}
.h3-mc .mcard{border-radius:20px;box-shadow:0 26px 54px -32px color-mix(in srgb,var(--shade) 65%,transparent)}
.h3-mc .mc-img img{filter:brightness(.62)}
@media (max-width:899px){.h3-row4{gap:10px}.h3-row4>.h3-mc{flex-basis:calc((100% - 10px)/2)}}
/* every cuisine card the same (Chadi 17 Oct): one card shape, one plate height, title on one line, line capped at two */
.h3-mc .mcard{aspect-ratio:4/5}
.h3-mc .mcard .mc-body{justify-content:center;min-height:9.2em}
.h3-mc .mcard .mc-t{font-size:clamp(21px,1.75vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.h3-mc .mcard .mc-d{-webkit-line-clamp:3;min-height:4.5em;font-size:14px}
html[lang="ar"] .h3-mc .mcard .mc-d{min-height:5.25em;font-size:15px}
.h3-mc .mcard .mc-body{min-height:0}
@media (min-width:900px) and (max-width:1279px){.h3-row4>.h3-mc{flex-basis:calc((100% - 36px)/3)}}
@media (max-width:767px){.h3-mc .mcard .mc-body{min-height:0;height:4.6em}.h3-mc .mcard .mc-t{font-size:16px;white-space:normal;line-height:1.2}}

/* 5. who we cater for: the sector names form, one per line (smaller and a bit bolder, Chadi 21 Oct) */
.h3-form{display:grid;justify-items:center;gap:clamp(4px,1vw,12px);text-align:center}
.h3-form li{font-size:clamp(22px,2.7vw,40px);font-weight:400;line-height:1.08;letter-spacing:.04em;text-transform:uppercase;color:var(--dark)}
.h3-form li:nth-child(even){color:var(--g)}
html[lang="ar"] .h3-form li{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.35}
@media (max-width:767px){.h3-form li{font-size:clamp(19px,5.6vw,24px)}}

/* 6. gallery: the gathering grid, wider than the screen, slides left and right */
.h3-slide{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;padding-block:6px 64px;margin-block-end:-54px;outline:0} /* room under the cards so the big picture's shadow is not cut (Chadi 17 Oct) */
.h3-slide::-webkit-scrollbar{display:none}
.h3-slide.is-drag{cursor:grabbing;user-select:none}
.h3-slide.is-drag img{pointer-events:none}
.h3-grid{--t:clamp(150px,15vw,230px);display:grid;grid-auto-flow:column dense;grid-template-rows:repeat(3,calc(var(--t) * 1.15));grid-auto-columns:var(--t);gap:12px;width:max-content;padding-inline:clamp(12px,3vw,40px)}
.h3-gt{margin:0;border-radius:16px;overflow:hidden;background:var(--shade)}
.h3-gt img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.h3-gf{grid-row:1/span 3;grid-column:3;border-radius:22px;box-shadow:0 16px 30px -18px color-mix(in srgb,var(--shade) 60%,transparent);z-index:2} /* smaller, ends well inside the slider (Chadi 17 Oct) */
.h3-slide:focus-visible{outline:1px solid var(--ink);outline-offset:-2px}
.h3-gal-foot{display:flex;align-items:center;justify-content:center;gap:18px;margin-block-start:clamp(26px,4vw,44px)}
.h3-arrows{display:flex;gap:10px}
.h3-arr{width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.h3-arr:hover{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.h3-arr .ic{width:20px;height:20px}
.h3 .ic-back{transform:scaleX(-1)}
[dir="rtl"] .h3 .ic-back{transform:none}
@media (max-width:767px){.h3-grid{--t:calc((100vw - 32px) / 3);gap:8px;padding-inline:8px;grid-template-rows:repeat(3,calc(var(--t) * 1.25))}.h3-gf{grid-column:2;grid-row:1/span 2}.h3-gal-foot{flex-direction:column}}

/* 7. proof banner: wide rounded photo, proof lines over it */
.h3-proof{padding-block:clamp(28px,4vw,56px)}
.h3-pb{height:calc(100svh - var(--hdr,80px) - 24px);min-height:560px;max-height:900px;padding-inline:clamp(12px,3vw,40px)}
.h3-pb-fig{position:relative;height:100%;margin:0;border-radius:28px;overflow:hidden;background:var(--shade);color:var(--cream)}
.h3-pb-fig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h3-pb-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--shade) 15%,transparent) 20%,color-mix(in srgb,var(--shade) 88%,transparent) 62%)}
.h3-pb-txt{position:absolute;inset-inline:0;bottom:0;z-index:2;padding-block:clamp(26px,5vw,60px) clamp(96px,9vw,120px)}
/* Why Plum: a full section title, same size as the others (Chadi 17 Oct) */
.h3-pb-t{font-size:clamp(34px,4.6vw,66px);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;font-weight:300;color:var(--cream);margin-block-end:clamp(20px,2.6vw,34px)}
html[lang="ar"] .h3-pb-t{letter-spacing:0;font-weight:500;line-height:1.3}
.h3-facts{display:grid;gap:16px 26px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.h3-facts li{display:grid;gap:6px;padding-block-start:14px;border-block-start:1px solid color-mix(in srgb,var(--cream) 35%,transparent)}
.h3-facts b{font-weight:300;font-size:clamp(19px,1.8vw,26px);line-height:1.2}
html[lang="ar"] .h3-facts b{font-weight:500}
.h3-facts span{font-size:15.5px;line-height:1.5;opacity:.95}
@media (max-width:767px){.h3-pb{height:auto;min-height:0;max-height:none}.h3-pb-fig{min-height:calc(100svh - var(--hdr,64px) - 24px)}.h3-pb-fig>img{position:absolute}.h3-pb-txt{position:relative;padding-block:42vh 104px}.h3-facts{grid-template-columns:1fr 1fr;gap:14px 18px}.h3-facts b{font-size:18px}.h3-facts span{font-size:14px}}

/* 8. our clients: logo tiles gather like the gallery */
.h3-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px 18px;max-width:1240px;margin-inline:auto;padding-inline:12px}
.h3-lg{aspect-ratio:2/1;display:grid;place-items:center;background:transparent}  /* the invisible card: same box for every logo */
.h3-lg-m{display:block;background:var(--dark);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@media (min-width:1100px){.h3-logos{grid-template-columns:repeat(7,1fr)}.h3-lg:nth-child(7n+1):nth-last-child(5){grid-column-start:2}}
@media (max-width:767px){.h3-logos{grid-template-columns:repeat(3,1fr);gap:14px 10px;padding-inline:8px}}

/* 9. closing line */
.h3-close{padding-block:clamp(56px,8vw,120px);text-align:center}
.h3-close-t{font-weight:300;font-size:clamp(36px,6vw,92px);line-height:1.06;letter-spacing:.01em;text-transform:uppercase;max-width:18ch;margin-inline:auto}
html[lang="ar"] .h3-close-t{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.3}
.h3-close .actions{margin-block-start:34px}

/* phone */
@media (max-width:767px){
  .h3-deck{--cw:200px;--fx:62px;height:calc(var(--cw) * 2 / 3 + 70px);margin-bottom:70px}
  .h3-deck .h3-tag{font-size:9.5px;letter-spacing:.08em;padding:5px 9px 4px;gap:5px}.h3-deck .h3-tag svg.ic{width:13px;height:13px}
  .h3-deck .h3-tag-1{inset-inline-start:calc(50% - var(--fx) - var(--cw) * .5 - 10px);top:calc(var(--cw) * .13)}
  .h3-deck .h3-tag-2{inset-inline-end:calc(50% - var(--fx) - var(--cw) * .5 + 4px);top:calc(var(--cw) * 2 / 3 + 26px)}
  .h3-deck .h3-tag-3{left:auto;right:auto;margin:0;width:auto;inset-inline-end:calc(50% - var(--fx) - var(--cw) * .5 + 4px);top:-12px}
}

/* reduced motion: panels switch without sliding */
@media (prefers-reduced-motion:reduce){.h3-pn,.h3-pn-c,.h3-pn-ph img{transition:none}}
.h3-live .h3-pb-fig{border-radius:0}

/* Facility management, coming soon: a gold "soon" pill, five glass tiles with icons (not links) */
.h3-soon{display:inline-block;margin-block-end:14px;padding:6px 14px 5px;border-radius:999px;border:1px solid var(--g);color:var(--g);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
html[lang="ar"] .h3-soon{letter-spacing:0;text-transform:none;font-size:14px}
/* sub-service cards: one row of equal cards across the full width of the category panels (same 10 px gap), so every edge lines up.
   7, 6 or 5 columns on desktop, 4 per row on tablets, 2 per row on phones (an odd last card spans the row) */
.h3-fm-list{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px;width:100%}
.h3-fm-list[data-n="7"]{--n:7}.h3-fm-list[data-n="6"]{--n:6}.h3-fm-list[data-n="5"]{--n:5}
@media (max-width:1099px){.h3-fm-list{--n:4!important}}
@media (max-width:599px){.h3-fm-list{--n:2!important}.h3-fm-it:last-child:nth-child(odd){grid-column:1/-1}}
.h3-fm-it{display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:start;gap:12px;min-height:150px;padding:26px 12px 22px;border-radius:20px;text-align:center;font-size:14px;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,#fff 40%,transparent);border:1px solid color-mix(in srgb,#fff 60%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 22px 46px -34px color-mix(in srgb,var(--shade) 50%,transparent)}
html[lang="ar"] .h3-fm-it{letter-spacing:0;text-transform:none;font-size:17px}
.h3 .h3-fm-ic{width:36px;height:36px;stroke-width:1.5;color:var(--g)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.h3-fm-it{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}


/* What we cater: three category panels (same look as the service panels). The open one is wide, its services open below.
   Desktop: a grid, categories in row 1, the open category's services across row 2. Phone: stacked, services right under their category. */
.h3-cats{display:grid;grid-template-columns:minmax(0,1fr) 80px 80px;grid-template-rows:clamp(300px,40vh,420px) auto;column-gap:10px;row-gap:22px;transition:grid-template-columns .8s var(--ease-o,ease)}
.h3-cats.a1{grid-template-columns:80px minmax(0,1fr) 80px}
.h3-cats.a2{grid-template-columns:80px 80px minmax(0,1fr)}
.h3-cat{grid-row:1;min-width:0}
.h3-cat[data-cat="0"]{grid-column:1}.h3-cat[data-cat="1"]{grid-column:2}.h3-cat[data-cat="2"]{grid-column:3}
.h3-cat-svc{grid-row:2;grid-column:1/-1;min-width:0}
.h3-cat .h3-pn-t{white-space:normal}
.h3-cat .h3-soon-s{display:table;margin:10px 0 0;font-size:10px;letter-spacing:.14em;padding:3px 8px 2px;border-radius:999px;border:1px solid currentColor;opacity:.85}
html[lang="ar"] .h3-cat .h3-soon-s{letter-spacing:0;font-size:12px}
.h3-cat-svc .h3-fm{text-align:center;padding-block:6px}
/* without JS: every category with its services, one under the other */
html:not(.js) .h3-cats{display:flex;flex-direction:column;gap:12px}
html:not(.js) .h3-cat{height:320px}
html:not(.js) .h3-cat-svc[hidden]{display:block!important}
@media (max-width:767px){
  .h3-cats{display:flex;flex-direction:column;gap:8px}
  .h3-cat-svc{margin-block:6px 16px}
  .h3-cat.on .h3-pn-hit{pointer-events:auto} /* the open category can be tapped again to close it */
}

@media (max-width:599px){.h3-fm-it{min-height:0;padding:18px 10px 16px;font-size:13px}html[lang="ar"] .h3-fm-it{font-size:15px}}


/* service cards are links to their category page (Chadi 20 Oct): the whole card is clickable */
.h3-fm-it{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.h3-fm-a{display:contents;color:inherit;text-decoration:none}
.h3-fm-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.h3-fm-it:has(.h3-fm-a):hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px color-mix(in srgb,var(--shade) 60%,transparent)}
.h3-fm-it:focus-within{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.h3-fm-it{transition:none}.h3-fm-it:has(.h3-fm-a):hover{transform:none}}

/* kitchen to table, step 2: HACCP under ISO 22000:2018 (Chadi 21 Oct) */
.h3-k-t2{display:block;margin-top:4px}

/* a line break used only on phones (Chadi 21 Oct) */
.ph-br{display:none}
@media (max-width:767px){.ph-br{display:inline}}

/* Kitchen film section (Chadi 25 Oct): full width, 16:9, cover picture with a round play button, sound on click */
/* rounded frame, full width with a small gap on the left and right only (Chadi 25 Oct) */
.h3-kf{padding-inline:clamp(10px,1.4vw,24px)}
/* the whole frame fits on screen under the menu bar (Chadi 25 Oct, MacBook 14": "can't see the full frame") */
.h3-kf-box{position:relative;width:min(100%,calc((100svh - 200px) * 16 / 9));aspect-ratio:16/9;margin-inline:auto;overflow:hidden;border-radius:clamp(14px,1.8vw,28px);background:var(--shade);isolation:isolate}
.h3-kf-v{display:block;width:100%;height:100%;object-fit:cover;background:var(--shade)}
/* play button v2 (Chadi 25 Oct: "the play button is weird"): frosted glass ring with a thin cream line, cream triangle, fills cream on hover */
.h3-kf-play{position:absolute;inset:0;margin:auto;width:clamp(64px,6vw,84px);height:clamp(64px,6vw,84px);border:1.5px solid rgba(232,230,222,.85);border-radius:50%;background:rgba(42,19,48,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:transform .35s ease,background .35s ease,color .35s ease}
.h3-kf-play svg{width:30%;height:30%;fill:currentColor;transform:translateX(7%)}.h3-kf-play:hover,.h3-kf-play:focus-visible{transform:scale(1.06);background:var(--cream);color:var(--ink)}
.h3-kf-play:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.h3-kf.is-playing .h3-kf-play{opacity:0;pointer-events:none}
.h3-kf.is-playing .h3-kf-v{object-fit:contain}
/* client logos load only when the section comes near (plum-r3.js adds .is-near) */
.h3-clients:not(.is-near) .h3-lg-m{-webkit-mask:none;mask:none;background:transparent}