/* ============================================================
   VARIANT D — "SADU"
   Sadu weaving is horizontal bands: pattern, ground, pattern.
   So is this page. No card grid, no eyebrows, no section numbers.
   Photography bleeds off alternating edges; type carries the rest.

   The authored moment: a woven hairline that draws itself across
   each band boundary as it enters. One idea, one place.
   ============================================================ */

:root{
  --paper:#FFF9F3;          /* Rimal laid thin over white */
  --paper-2:#FDF3E9;
  --ink:#38250E;
  --hair:rgba(56,37,14,.14);
  --hair-2:rgba(56,37,14,.26);
  --pad:clamp(20px,5vw,80px);
  --nav-h:70px;
  --wrapd:1560px;

  /* Radius, one rule: interactive controls are pills or circles,
     imagery is the arch, everything else is square. Nothing else. */
  --r-pill:999px;
  --r-round:50%;
  --r-arch:999px 999px 0 0 / 44% 44% 0 0;
}

body{background:var(--paper);color:var(--ink);font-family:var(--font)}
::-webkit-scrollbar-thumb{border-color:var(--paper)}

.wd{max-width:var(--wrapd);margin-inline:auto;padding-inline:var(--pad)}

/* ══════════════ HEADER ══════════════ */
.hd{position:fixed;inset-inline:0;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding-inline:var(--pad);
  font-size:var(--fs-nav);color:var(--rimal);
  transition:background var(--t-enter) var(--out),height var(--t-enter) var(--out),color var(--t-enter)}
.hd.stuck{height:58px;background:rgba(56,37,14,.94);backdrop-filter:blur(16px)}
.hd-logo img{height:30px;width:auto;display:block}
.hd-nav{margin-inline-end:auto}
.hd-links{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px);list-style:none;margin:0;padding:0}
.hd-links a{position:relative;padding-block:8px;color:rgba(255,228,196,.86);
  transition:color var(--t-hover) var(--out)}
.hd-links a::after{content:"";position:absolute;bottom:2px;inset-inline:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--t-hover) var(--out)}
[dir="rtl"] .hd-links a::after{transform-origin:0 50%}
@media (hover:hover) and (pointer:fine){
  .hd-links a:hover{color:var(--rimal)}
  .hd-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  [dir="rtl"] .hd-links a:hover::after{transform-origin:100% 50%}
}
.hd-side{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.hd-tel{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding-inline:16px;
  border:1px solid rgba(255,228,196,.4);border-radius:var(--r-pill);color:var(--rimal);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--t-hover) var(--out),border-color var(--t-hover),transform var(--t-press) var(--out)}
.hd-tel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rimal);
  transform:translateY(101%);transition:transform var(--t-enter) var(--out)}
@media (hover:hover) and (pointer:fine){
  .hd-tel:hover{color:var(--ink);border-color:var(--rimal)}
  .hd-tel:hover::before{transform:none}
}
.hd-tel:active{transform:scale(.97)}
.hd-tel svg{width:13px;height:13px}
.hd-lang{position:relative;display:flex;align-items:center}
.hd-globe{display:inline-flex;align-items:center;justify-content:center;gap:3px;
  min-width:44px;min-height:44px;background:transparent;color:rgba(255,228,196,.66);
  transition:color var(--t-hover)}
.hd-globe svg.globe{width:19px;height:19px}
.hd-globe svg.chevron{width:8px;height:8px;transition:transform 200ms var(--out)}
.hd-globe[aria-expanded="true"] svg.chevron{transform:rotate(180deg)}
.hd-globe:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.hd-globe:hover,.hd-acct:hover{color:var(--rimal)}}
.hd-acct{color:rgba(255,228,196,.66);transition:color var(--t-hover)}
.hd-acct svg{width:19px;height:19px}

.hd-langmenu{list-style:none;margin:0;padding:6px 0;position:absolute;top:calc(100% + 8px);
  inset-inline-end:0;background:var(--paper);color:var(--ink);border:1px solid var(--hair-2);
  border-radius:0;min-width:150px;z-index:120;box-shadow:0 12px 30px -10px rgba(56,37,14,.34);
  transform-origin:100% 0;opacity:0;transform:scale(.97) translateY(-4px);pointer-events:none;
  transition:opacity 160ms var(--out),transform 160ms var(--out)}
[dir="rtl"] .hd-langmenu{transform-origin:0 0}
.hd-langmenu.open{opacity:1;transform:none;pointer-events:auto}
.hd-langmenu li{margin:0}
.hd-langmenu [role="menuitem"]{display:flex;align-items:center;width:100%;min-height:44px;
  padding-inline:16px;font-size:15px;text-align:start;color:var(--ink);
  transition:background var(--t-hover) var(--out),color var(--t-hover) var(--out)}
/* The current language is marked by weight and colour. No dot, no tick —
   a two-item menu does not need a marker to say which one you are on. */
.hd-langmenu [aria-current]{color:var(--ghaf);font-weight:500}
@media (hover:hover) and (pointer:fine){.hd-langmenu [role="menuitem"]:hover{background:var(--ghaf-tint)}}
@media (prefers-reduced-motion:reduce){.hd-langmenu{transition:none;transform:none}}
.no-motion .hd-langmenu{transition:none;transform:none}
.hd-burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.hd-burger span{display:block;width:20px;height:1px;background:var(--rimal);
  transition:transform var(--t-enter) var(--out)}
.hd-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.hd-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:1080px){
  .hd-burger{display:flex}
  .hd-side{margin-inline-start:auto}
  .hd-nav{position:fixed;inset:var(--nav-h) 0 auto 0;background:rgba(56,37,14,.98);backdrop-filter:blur(18px);
    max-height:0;overflow:hidden;transition:max-height 420ms var(--draw)}
  .hd-nav.open{max-height:76vh}
  .hd-links{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 26px}
  .hd-links li{border-bottom:1px solid rgba(255,228,196,.14)}
  .hd-links a{display:flex;align-items:center;min-height:56px;font-size:19px;font-weight:200}
  .hd-tel .n{display:none}.hd-tel{padding-inline:12px}.hd-acct{display:none}
}
body.locked{overflow:hidden}

/* ══════════════ HERO ══════════════ */
.hero{position:relative;min-height:100svh;display:grid;place-items:end center;overflow:clip;background:var(--ink)}
.hero-m{position:absolute;inset:0}
.hero-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.04);transition:opacity 1200ms var(--out),transform 7s linear}
.hero-im.is-on{opacity:1;transform:scale(1.09)}
.hero-m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,19,7,.9),rgba(30,19,7,.34) 46%,rgba(30,19,7,.66)),
             radial-gradient(74% 58% at 50% 56%,rgba(30,19,7,.18),rgba(30,19,7,.72))}
.hero-in{position:relative;z-index:2;width:100%;max-width:1080px;text-align:center;
  padding:0 var(--pad) clamp(72px,11vh,132px);color:var(--rimal)}
.hero-s{position:absolute;inset-inline:var(--pad);bottom:clamp(72px,11vh,132px);opacity:0;
  transition:opacity 520ms var(--out);pointer-events:none}
.hero-s.is-on{position:relative;inset-inline:auto;bottom:auto;opacity:1;pointer-events:auto}
.hero-h{max-width:15ch;margin-inline:auto}
.hero-p{margin:clamp(18px,2.4vw,28px) auto 0;max-width:44ch;font-size:clamp(15px,1.2vw,18px);
  line-height:1.66;font-weight:300;color:rgba(255,228,196,.82)}
.hero-cta{margin-top:clamp(26px,3.4vw,40px)}
/* the dwell hairline — an indicator, not a control */
.hero-tick{position:absolute;inset-inline:var(--pad);bottom:34px;height:1px;
  background:rgba(255,228,196,.2);z-index:3;max-width:var(--wrapd);margin-inline:auto}
.hero-tick i{display:block;height:100%;background:var(--rimal);transform:scaleX(0);transform-origin:0 50%}
[dir="rtl"] .hero-tick i{transform-origin:100% 50%}
.hero-tick i.run{animation:tick 4s linear forwards}
@keyframes tick{to{transform:scaleX(1)}}
.hero-pause{position:absolute;inset-inline-end:var(--pad);bottom:50px;z-index:4;min-height:44px;
  padding-inline:14px;color:var(--rimal);border:1px solid rgba(255,228,196,.4);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:0;pointer-events:none}
.hero-pause:focus-visible{opacity:1;pointer-events:auto}

/* ══════════════ BUTTONS ══════════════ */
.b{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:54px;
  padding-inline:clamp(24px,2.2vw,38px);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--t-hover) var(--out),border-color var(--t-hover),transform var(--t-press) var(--out)}
html[lang="ar"] .b{letter-spacing:.03em;text-transform:none;font-size:15.5px}
.b::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform var(--t-enter) var(--out)}
@media (hover:hover) and (pointer:fine){.b:hover::before{transform:none}}
.b:active{transform:scale(.97)}
.b-sand{background:var(--rimal);color:var(--ink)}.b-sand::before{background:#fff}
.b-ghaf{background:var(--ghaf);color:#fff}.b-ghaf::before{background:var(--ghaf-deep)}
.b-line{border:1px solid var(--hair-2);color:var(--ink)}.b-line::before{background:var(--ghaf)}
@media (hover:hover) and (pointer:fine){.b-line:hover{color:#fff;border-color:var(--ghaf)}}
.b-inv{border:1px solid rgba(255,228,196,.42);color:var(--rimal)}.b-inv::before{background:var(--rimal)}
@media (hover:hover) and (pointer:fine){.b-inv:hover{color:var(--ink);border-color:var(--rimal)}}
.b .go{transition:transform var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.b:hover .go{transform:translateX(4px)}}
[dir="rtl"] .b .go{transform:scaleX(-1)}
[dir="rtl"] .b:hover .go{transform:scaleX(-1) translateX(4px)}

.tie{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ghaf);
  position:relative;transition:transform var(--t-press) var(--out)}
html[lang="ar"] .tie{letter-spacing:.03em;text-transform:none;font-size:15.5px}
.tie::after{content:"";position:absolute;bottom:8px;inset-inline:0;height:1px;background:currentColor;
  opacity:.45;transform-origin:100% 50%;transition:transform var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.tie:hover::after{transform:scaleX(0)}}
.tie:active{transform:scale(.98)}
.tie .go{transition:transform var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){.tie:hover .go{transform:translateX(4px)}}
[dir="rtl"] .tie .go{transform:scaleX(-1)}

/* ══════════════ THE WEAVE — the one authored moment ══════════════
   A sadu band draws itself across each boundary as it enters.
   Nothing else on this page animates on entry. ══════════════ */
.weave{display:block;width:100%;height:26px;color:var(--hair-2)}
.weave path{
  stroke:currentColor;stroke-width:1.25;fill:none;
  stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);
  transition:stroke-dashoffset 1400ms var(--draw);
}
.weave.drawn path{stroke-dashoffset:0}
.no-motion .weave path{stroke-dashoffset:0;transition:none}
.weave-inv{color:rgba(255,228,196,.34)}

/* ══════════════ BANDS ══════════════ */
.band{position:relative;padding-block:clamp(56px,8vh,110px)}
.band-dark{background:var(--ink);color:var(--rimal)}
.band-paper2{background:var(--paper-2)}
.lede{font-size:clamp(15px,1.25vw,19px);line-height:1.7;font-weight:300;color:var(--t80);max-width:60ch}
.band-dark .lede{color:rgba(255,228,196,.76)}

/* ── A service band: image bleeding off one edge, type on the other ── */
.svc{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;
  max-width:var(--wrapd);margin-inline:auto}
@media(max-width:900px){.svc{grid-template-columns:1fr}}
.svc-m{position:relative;overflow:hidden;aspect-ratio:5/4;background:var(--paper-2)}
.svc-m img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--out)}
@media (hover:hover) and (pointer:fine){.svc:hover .svc-m img{transform:scale(1.035)}}
.svc-t{padding:clamp(28px,4vw,72px) var(--pad)}
@media(max-width:900px){.svc-t{padding-block:clamp(26px,5vw,44px)}}
/* alternate which edge the picture bleeds off */
.svc:nth-of-type(even) .svc-m{order:2}
@media(max-width:900px){.svc:nth-of-type(even) .svc-m{order:0}}
.svc-h{margin-bottom:16px}
.svc-d{font-size:clamp(14.5px,1.15vw,17px);line-height:1.72;font-weight:300;color:var(--t80);max-width:46ch}
.band-dark .svc-d{color:rgba(255,228,196,.76)}
.svc-price{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:14px;color:var(--t60)}
.band-dark .svc-price{border-top-color:rgba(255,228,196,.22);color:rgba(255,228,196,.62)}
.svc-price b{font-weight:500;color:var(--ghaf)}
.band-dark .svc-price b{color:var(--rimal)}
.svc-go{margin-top:22px}

/* ── The tier ladder: one woven row, not five cards ── */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hair-2);
  max-width:var(--wrapd);margin-inline:auto}
@media(max-width:900px){.ladder{grid-template-columns:1fr}}
.rung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:baseline;
  gap:10px;padding:clamp(20px,2.4vw,30px) clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--hair-2);position:relative;text-align:start;
  transition:background var(--t-hover) var(--out),transform var(--t-press) var(--out)}
@media(min-width:901px){
  .ladder{border-bottom:1px solid var(--hair-2)}
  .rung{grid-template-columns:1fr;border-bottom:0;border-inline-end:1px solid var(--hair-2);
    align-content:start;min-height:210px}
  .rung:last-child{border-inline-end:0}
}
@media (hover:hover) and (pointer:fine){.rung:hover{background:rgba(0,96,57,.05)}}
.rung:active{transform:scale(.99)}
.rung-n{font-size:clamp(19px,1.7vw,24px);font-weight:400;letter-spacing:-.015em}
.rung-p{font-size:clamp(24px,2.6vw,38px);font-weight:200;letter-spacing:-.04em;color:var(--ghaf)}
@media(min-width:901px){.rung-p{margin-top:14px}}
.rung-p sup{font-size:11.5px;letter-spacing:.12em;margin-inline-start:7px;color:var(--t60);vertical-align:super}
.rung-meta{grid-column:1/-1;font-size:13px;color:var(--t60);line-height:1.6;padding-top:6px}
@media(min-width:901px){.rung-meta{padding-top:14px;margin-top:auto}}
.ladder-note{max-width:var(--wrapd);margin:22px auto 0;padding-inline:var(--pad);
  font-size:13.5px;color:var(--t60);line-height:1.7}
/* ── The ladder extras: separate lines, not one dotted run ── */
.ladder-extras{max-width:var(--wrapd);margin:22px auto 0;padding-inline:var(--pad);
  list-style:none;display:flex;flex-wrap:wrap;row-gap:10px;column-gap:clamp(20px,3vw,40px);
  font-size:13px;color:var(--t60);line-height:1.7}
@media(max-width:700px){.ladder-extras{flex-direction:column;gap:8px}}

/* ── Per-person row ── */
.pax{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--wrapd);margin-inline:auto;
  border-top:1px solid rgba(255,228,196,.24)}
@media(max-width:860px){.pax{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pax{grid-template-columns:1fr}}
.pax-c{padding:clamp(20px,2.4vw,32px) clamp(14px,1.6vw,22px);
  border-bottom:1px solid rgba(255,228,196,.24);border-inline-end:1px solid rgba(255,228,196,.24)}
.pax-c:last-child{border-inline-end:0}
.pax-n{font-size:15px;font-weight:400;color:var(--rimal)}
.pax-p{margin-top:12px;font-size:clamp(26px,2.8vw,40px);font-weight:200;letter-spacing:-.04em;color:var(--rimal)}
.pax-p sup{font-size:11px;letter-spacing:.12em;margin-inline-start:6px;color:rgba(255,228,196,.6);vertical-align:super}
.pax-l{margin-top:4px;font-size:13px;color:rgba(255,228,196,.62)}

/* ── Protocol lines ── */
.proto{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,44px);
  max-width:var(--wrapd);margin:clamp(30px,4vw,52px) auto 0;padding-inline:var(--pad)}
@media(max-width:900px){.proto{grid-template-columns:1fr}}
.proto div{padding-top:16px;border-top:1px solid rgba(255,228,196,.24)}
.proto b{display:block;font-weight:500;font-size:clamp(15px,1.3vw,17.5px);color:var(--rimal)}
.proto span{display:block;margin-top:8px;font-size:14px;line-height:1.7;font-weight:300;color:rgba(255,228,196,.72)}

/* ── Gallery: one continuous strip, no grid of squares ── */
.strip{display:flex;gap:clamp(6px,.8vw,12px);overflow-x:auto;padding-inline:var(--pad);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 auto;margin:0;width:clamp(200px,24vw,340px);aspect-ratio:4/5;
  overflow:hidden;background:var(--paper-2);scroll-snap-align:start;cursor:pointer;
  transition:transform var(--t-press) var(--out)}
.strip figure:nth-child(3n){aspect-ratio:4/6}
.strip figure:nth-child(4n){aspect-ratio:4/4}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--out)}
@media (hover:hover) and (pointer:fine){.strip figure:hover img{transform:scale(1.05)}}
.strip figure:active{transform:scale(.99)}

/* ── Client names: a woven marquee ── */
.names{overflow:hidden;display:flex;border-block:1px solid var(--hair);padding-block:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.names ul{display:flex;gap:clamp(34px,5vw,74px);flex:0 0 auto;list-style:none;margin:0;
  padding-inline-end:clamp(34px,5vw,74px);animation:slide 44s linear infinite}
[dir="rtl"] .names ul{animation-direction:reverse}
@media (hover:hover) and (pointer:fine){.names:hover ul{animation-play-state:paused}}
.names li{font-size:clamp(13.5px,1.05vw,16px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t40);white-space:nowrap;font-weight:500}
@keyframes slide{to{transform:translateX(-100%)}}
.no-motion .names ul{animation:none}

/* ── Reels ── */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,32px);
  max-width:1180px;margin-inline:auto;padding-inline:var(--pad);list-style:none}
@media(max-width:700px){.reels{grid-template-columns:1fr;max-width:520px}
  .reels li:not(:first-child){display:none}}
.reel{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000;margin:0}
.reel video{width:100%;height:100%;object-fit:cover}
.reel-i{position:absolute;inset:0;opacity:0;transition:opacity 420ms var(--out)}
.reel-i.is-on{opacity:1}
.reel::after{content:"";position:absolute;inset-inline:0;bottom:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(20,13,5,.72),transparent)}
.reel-tag{position:absolute;top:14px;inset-inline-start:14px;z-index:3;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:5px 11px;
  border:1px solid rgba(255,255,255,.36);backdrop-filter:blur(6px)}
.reel-ui{position:absolute;bottom:14px;inset-inline:14px;z-index:3;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.reel-dots{display:flex;gap:8px}
.reel-dots button{width:44px;height:44px;display:grid;place-items:center}
.reel-dots button::after{content:"";width:22px;height:2px;background:rgba(255,255,255,.36)}
.reel-dots button.is-on::after{background:#fff}
.reel-next{width:44px;height:44px;display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--r-round);backdrop-filter:blur(6px)}
.reel-next svg{width:11px;height:11px}
[dir="rtl"] .reel-next svg{transform:scaleX(-1)}

/* ── Quote ── */
.quote{max-width:1000px;margin-inline:auto;padding-inline:var(--pad);text-align:center}
.quote p{font-size:clamp(20px,2.7vw,38px);font-weight:200;line-height:1.36;letter-spacing:-.028em;
  text-wrap:balance}
html[lang="ar"] .quote p{font-weight:300;letter-spacing:0;line-height:1.58}
.quote cite{display:block;margin-top:24px;font-style:normal;font-size:13.5px;color:var(--t60)}

/* ── Condolence band: quiet, and it looks it ── */
.rest{background:#566250;color:#FFF4E6}
.rest .lede{color:rgba(255,244,230,.92)}
.rest-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,80px);align-items:center;
  max-width:var(--wrapd);margin-inline:auto;padding-inline:var(--pad)}
@media(max-width:860px){.rest-in{grid-template-columns:1fr;gap:32px}}
.rest ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.rest li{font-size:14.5px;color:rgba(255,244,230,.92);font-weight:300;
  padding-inline-start:20px;position:relative}
.rest li::before{content:"";position:absolute;inset-inline-start:0;top:.68em;width:8px;height:1px;
  background:rgba(255,244,230,.72)}
/* siteupgrade.md 8: the closing line sits between the list and the
   buttons. Formal MSA register, so it is set quietly - no emphasis. */
.rest-ready{margin-top:clamp(20px,2.6vw,30px);font-size:clamp(15px,1.3vw,17px);
  line-height:1.7;color:var(--t80,var(--ink))}
.rest-b{margin-top:clamp(20px,2.4vw,30px);display:flex;gap:12px;flex-wrap:wrap}
.b-rest{background:#FFF4E6;color:#3A4435}.b-rest::before{background:#fff}
.b-restline{border:1px solid rgba(255,244,230,.52);color:#FFF4E6}.b-restline::before{background:#FFF4E6}
@media (hover:hover) and (pointer:fine){.b-restline:hover{color:#3A4435;border-color:#FFF4E6}}
.rest-m{overflow:hidden;aspect-ratio:4/5;margin:0}
.rest-m img{width:100%;height:100%;object-fit:cover;filter:saturate(.86)}

/* ── Close ── */
.close{background:var(--ink);color:var(--rimal);text-align:center}
.close-b{margin-top:clamp(26px,3.4vw,42px);display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ── Footer ── */
.ft{background:var(--ink);color:var(--rimal);border-top:1px solid rgba(255,228,196,.16)}
.ft-in{max-width:var(--wrapd);margin-inline:auto;padding:clamp(28px,3.6vw,44px) var(--pad) clamp(18px,2.2vw,26px);
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(18px,2.4vw,34px)}
@media(max-width:900px){.ft-in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-in{grid-template-columns:1fr}}
.ft-brand img{height:32px;width:auto;margin-bottom:12px}
.ft-brand p{font-size:13px;line-height:1.6;font-weight:300;color:rgba(255,228,196,.6);max-width:34ch}
.ft h3{font-size:13px;font-weight:500;color:rgba(255,228,196,.5);margin-bottom:10px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{font-size:13.5px}
.ft li a,.ft li span{display:flex;align-items:center;min-height:40px;color:rgba(255,228,196,.8);
  transition:color var(--t-hover)}
.ft li span{color:rgba(255,228,196,.55)}
@media (hover:hover) and (pointer:fine){.ft li a:hover{color:var(--rimal)}}
.ft-soc{display:flex;gap:8px;margin-top:10px}
.ft-soc a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,228,196,.22);
  border-radius:var(--r-round);color:rgba(255,228,196,.72);
  transition:color var(--t-hover),border-color var(--t-hover),transform var(--t-press) var(--out)}
@media (hover:hover) and (pointer:fine){.ft-soc a:hover{color:var(--rimal);border-color:rgba(255,228,196,.5)}}
.ft-soc a:active{transform:scale(.94)}
.ft-soc svg{width:18px;height:18px}
.ft-btm{max-width:var(--wrapd);margin-inline:auto;padding:14px var(--pad);
  border-top:1px solid rgba(255,228,196,.16);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,228,196,.46)}

/* ── Float ── */
.wa{position:fixed;bottom:24px;inset-inline-end:24px;z-index:95;width:54px;height:54px;
  display:grid;place-items:center;border-radius:var(--r-round);background:var(--ghaf);color:#fff;
  box-shadow:0 10px 30px rgba(56,37,14,.3);
  transition:transform var(--t-hover) var(--out),background var(--t-hover)}
@media (hover:hover) and (pointer:fine){.wa:hover{transform:translateY(-3px);background:var(--ghaf-deep)}}
.wa:active{transform:scale(.94)}
.wa svg{width:27px;height:27px}
@media(max-width:560px){.wa{width:50px;height:50px;bottom:17px;inset-inline-end:17px}}

/* ── Sheet + lightbox ── */
.sheet{position:fixed;inset:0;z-index:200;background:rgba(30,19,7,.66);backdrop-filter:blur(5px);
  display:none;align-items:flex-end;justify-content:center;padding:17px}
.sheet[open]{display:flex}
.sheet-c{background:var(--paper);width:min(420px,100%);padding:30px 22px 20px;text-align:center}
.sheet-c p{font-size:17px;margin-bottom:20px}
.sheet-b{display:flex;align-items:center;justify-content:center;gap:11px;min-height:54px;
  margin-bottom:11px;border:1px solid var(--hair-2);font-weight:500}
.sheet-wa{background:var(--ghaf);border-color:var(--ghaf);color:#fff}
.sheet-x{width:100%;min-height:46px;color:var(--t60);font-size:13.5px}
.lb{position:fixed;inset:0;z-index:240;background:rgba(30,19,7,.95);display:none;
  align-items:center;justify-content:center;padding:32px}
.lb[open]{display:flex}
.lb img{max-width:min(92vw,960px);max-height:88vh;object-fit:contain}
.lb-x{position:absolute;top:24px;inset-inline-end:24px;width:46px;height:46px;display:grid;
  place-items:center;color:var(--rimal);border:1px solid rgba(255,228,196,.34);border-radius:var(--r-round)}
.lb-x svg{width:16px;height:16px}

/* ══════════════ HIT AREAS + LEGIBILITY FLOOR ══════════════
   Every pressable clears 44px, including the ones that read as
   plain text. Informational small type clears 12.5px; tracked
   uppercase labels stay where they are, they are labels not copy. */
.hd-logo{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;margin-inline-start:-8px}
.hd-acct{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.hd-tel{min-height:44px}
.hd-lang [role="menuitem"],.hd-lang button{min-height:44px}
.hd-burger{width:44px;height:44px}
@media(min-width:1041px){
  .hd-links a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .hd-links a::after{bottom:10px}
}
.ft li a,.ft li span{min-height:44px}
@media (hover:hover) and (pointer:fine){.ft li a,.ft li span{min-height:32px}}
.reel-tag{font-size:12px}
.ft-btm{font-size:13px}

/* ══════════════════════════════════════════════════════════════
   MOTION + GHAF PASS
   Motion is added where it answers a question — depth, arrival,
   state, or "how much of this is there". Nothing here animates
   because it looked nice on its own. Every hover is gated to a
   fine pointer, every entrance is ease-out, and reduced-motion
   keeps the meaning and drops the movement.
   ══════════════════════════════════════════════════════════════ */

/* ── Ghaf, pushed harder — still accent, never a ground ── */
.weave{color:rgba(0,96,57,.36)}
.tie{color:var(--ghaf)}
.band-dark .tie,.rest .tie{color:inherit}
.names{border-block-color:rgba(0,96,57,.2)}
.ladder{border-top-color:rgba(0,96,57,.24)}
.rung-p sup{color:var(--ghaf);opacity:.7}
@media (hover:hover) and (pointer:fine){
  .rung:hover{background:rgba(0,96,57,.07)}
  .strip figure:hover{outline:1px solid rgba(0,96,57,.4);outline-offset:-1px}
}
.svc-price{border-top-color:rgba(0,96,57,.22)}
.sheet-b{border-color:rgba(0,96,57,.3)}

/* ── Hero: the headline arrives a word at a time ──
   720ms is long for UI, but this is the marketing frame and it
   only ever plays four times. The stagger stays at 55ms so the
   line still reads as one sentence, not as six events. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.04em}
.w-i{display:inline-block;transform:translateY(106%);
  transition:transform 720ms var(--draw);transition-delay:calc(var(--i,0) * 55ms)}
.hero-s.is-on .w-i{transform:none}
.no-motion .w-i{transform:none;transition:none}

/* film grain — static. Animated grain is noise you pay for every frame. */
.grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;background-repeat:repeat;background-size:150px 150px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>")}

/* ── Magnetic primary CTA ──
   Decorative, so it is desktop-only and it lives on a wrapper —
   the button keeps its own :active scale underneath. */
.mag{display:inline-block;transition:transform 300ms var(--out)}
@media (hover:hover) and (pointer:fine){
  .mag{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
}

/* ── Service bands: the image drifts against the scroll ──
   Six percent of travel. Enough to read as depth, not enough to
   notice as an effect. Driven by --p, so it only ever composites. */
.svc-m img{transform:translate3d(0,calc((var(--p,.5) - .5) * -6%),0) scale(1.09);
  transition:none;will-change:transform}
@media (hover:hover) and (pointer:fine){
  /* The parallax owns this transform now. The old hover zoom would win
     on specificity and kill the drift, so it is retired here rather
     than left to fight every frame. */
  .svc:hover .svc-m img{transform:translate3d(0,calc((var(--p,.5) - .5) * -6%),0) scale(1.09)}
}
.no-motion .svc-m img{transform:scale(1.04)}

/* ── The ladder: each rung's rule draws toward its price ── */
.rung{position:relative}
.rung::after{content:"";position:absolute;top:-1px;inset-inline:0;height:1px;
  background:var(--ghaf);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 620ms var(--draw);transition-delay:calc(var(--i,0) * 60ms)}
[dir="rtl"] .rung::after{transform-origin:100% 50%}
.ladder.on .rung::after{transform:scaleX(1)}
.rung:nth-child(1){--i:0}.rung:nth-child(2){--i:1}.rung:nth-child(3){--i:2}
.rung:nth-child(4){--i:3}.rung:nth-child(5){--i:4}
.no-motion .rung::after{transform:scaleX(1);transition:none}

/* ── Stagger, kept inside one list at 55ms ── */
.pax-c,.proto div{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--out),transform 420ms var(--out);
  transition-delay:calc(var(--i,0) * 55ms)}
.pax.on .pax-c,.proto.on div{opacity:1;transform:none}
.pax-c:nth-child(1),.proto div:nth-child(1){--i:0}
.pax-c:nth-child(2),.proto div:nth-child(2){--i:1}
.pax-c:nth-child(3),.proto div:nth-child(3){--i:2}
.pax-c:nth-child(4),.proto div:nth-child(4){--i:3}
.no-motion .pax-c,.no-motion .proto div{opacity:1;transform:none;transition:none}

/* ── Condolence portrait, cut to an arch ── */
.rest-m{border-radius:var(--r-arch);overflow:hidden}

/* ── The gallery, pinned and pulled sideways by the scroll ──
   Desktop and fine pointer only. On touch it stays what it already
   was: a rail you can flick. No scroll hijack on a phone, ever. */
.pinwrap{position:relative}
.pinstage{display:grid;gap:clamp(20px,3vw,40px)}
@media(min-width:1000px) and (hover:hover) and (pointer:fine){
  .pinwrap{height:250vh}
  .pinstage{position:sticky;top:0;height:100svh;align-content:center;overflow:hidden}
  .pinstage .strip{overflow:visible;scroll-snap-type:none;will-change:transform;
    transform:translate3d(calc(-1 * var(--pin,0) * max(0px, var(--rail,0px) - 100vw + var(--pad) * 2)),0,0)}
  [dir="rtl"] .pinstage .strip{
    transform:translate3d(calc(var(--pin,0) * max(0px, var(--rail,0px) - 100vw + var(--pad) * 2)),0,0)}
}
.no-motion .pinwrap{height:auto}
.no-motion .pinstage{position:static;height:auto}
.no-motion .pinstage .strip{overflow-x:auto;transform:none}

/* ── Reviews: an arrow-stepped carousel, three at a time ──
   Cropped from the top in the card so the sender line is always
   the part you see, and the whole thing opens in the lightbox. */
/* padding lives on the non-scrolling wrapper, not on .revs itself — a
   scroll-snap container with its own padding-inline settles on an
   off-by-the-gutter resting position instead of scrollLeft:0. */
.revs-wrap{position:relative;max-width:1180px;margin:clamp(30px,4vw,52px) auto 0;
  padding-inline:var(--pad)}
.revs{--revgap:clamp(14px,1.8vw,28px);display:flex;gap:var(--revgap);list-style:none;margin:0;
  scroll-behavior:smooth;scroll-snap-type:x mandatory;
  overflow-x:auto;scrollbar-width:none}
.revs::-webkit-scrollbar{display:none}
.revs > li{flex:0 0 calc((100% - 2 * var(--revgap)) / 3);scroll-snap-align:start}
@media(max-width:1000px){.revs > li{flex-basis:calc((100% - 1 * var(--revgap)) / 2)}}
@media(max-width:700px){.revs > li{flex-basis:100%}}
.no-motion .revs{scroll-behavior:auto}

.revs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;
  border-radius:var(--r-round);border:1px solid rgba(0,96,57,.34);color:var(--ghaf);
  background:var(--paper);
  transition:color var(--t-hover) var(--out),background var(--t-hover) var(--out),
    border-color var(--t-hover) var(--out),transform var(--t-press) var(--out)}
.revs-arrow svg{width:11px;height:11px}
.revs-prev{inset-inline-start:max(2px,calc(var(--pad) - 22px))}
.revs-next{inset-inline-end:max(2px,calc(var(--pad) - 22px))}
.revs-prev svg{transform:scaleX(-1)}
[dir="rtl"] .revs-next svg{transform:scaleX(-1)}
[dir="rtl"] .revs-prev svg{transform:none}
@media (hover:hover) and (pointer:fine){
  .revs-arrow:not(:disabled):hover{background:var(--ghaf);color:#fff;border-color:var(--ghaf)}
}
.revs-arrow:active{transform:translateY(-50%) scale(.94)}
.revs-arrow:disabled{opacity:.3;cursor:default}

.rev{position:relative;margin:0;background:var(--paper-2);overflow:hidden;
  aspect-ratio:3/4;cursor:pointer;isolation:isolate;
  border:1px solid rgba(0,96,57,.18);
  transition:transform 220ms var(--out),border-color 220ms var(--out),box-shadow 220ms var(--out)}
.rev img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.rev::after{content:"";position:absolute;inset-inline:0;bottom:0;height:26%;pointer-events:none;
  background:linear-gradient(to top,rgba(56,37,14,.62),rgba(56,37,14,.34) 42%,transparent)}
.rev-c{position:absolute;inset-inline:14px;bottom:12px;z-index:2;color:#FFF4E6;
  display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.02em}
.rev-c svg{width:13px;height:13px;flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .rev:hover{transform:translateY(-4px);border-color:rgba(0,96,57,.5);
    box-shadow:0 14px 34px -14px rgba(56,37,14,.4)}
}
.rev:active{transform:scale(.985)}
.rev:focus-visible{outline:2px solid var(--ghaf);outline-offset:3px}
.revs-note{max-width:1180px;margin:18px auto 0;padding-inline:var(--pad);
  font-size:13px;color:var(--t60)}
.no-motion .rev{transition:none}


/* ══════════════ OCCASIONS DROPDOWN ══════════════
   A wide panel that drops out of the header rather than a narrow list
   beside it: nine occasions read as a set that way, not as a queue.

   It carries the header's own brown, one shade deeper, so it reads as the
   header extending downward instead of a white card floating on top of a
   dark bar.

   The chevron is a mobile affordance. On a fine pointer the panel opens on
   hover and the arrow only adds clutter; on touch there is no hover, so the
   row has to say it opens. Shown there, hidden here. */
.hd-drop{position:static}
.hd-droptrig{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  color:var(--hdmute,rgba(255,228,196,.86));font-size:inherit;
  transition:color var(--t-hover) var(--out)}
.hd-droptrig::after{content:"";width:6px;height:6px;flex:none;display:none;
  border-inline-end:1.3px solid currentColor;border-block-end:1.3px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);
  transition:transform var(--t-hover) var(--out)}
.hd-droptrig:active{transform:scale(.97)}

.hd-dropmenu{position:absolute;inset-inline:0;top:calc(100% - 8px);z-index:120;
  list-style:none;margin:0;
  /* the first column lines up with the word Occasions above it: the
     header pad plus the logo's own width and gap */
  padding:clamp(10px,1.1vw,14px) var(--pad) clamp(10px,1.1vw,14px)
    calc(var(--pad) + 54px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(16px,2.4vw,40px);
  /* three columns spread across 1440px would put a metre between
     neighbours, so the grid keeps its own measure and sits under the
     nav item it belongs to rather than stretching to the viewport */
  max-inline-size:min(790px,100%);
  /* Light enough that the photograph carries through, held together by a
     heavy blur rather than by opacity. The blur is what keeps the labels
     readable over whatever slide happens to be underneath. */
  background:rgba(56,37,14,.5);
  backdrop-filter:blur(30px) saturate(135%);
  -webkit-backdrop-filter:blur(30px) saturate(135%);
  color:var(--rimal);
  border-block-start:1px solid rgba(255,228,196,.22);
  border-block-end:1px solid rgba(255,228,196,.1);
  box-shadow:0 18px 36px -22px rgba(20,13,5,.4);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity 180ms var(--out),transform 180ms var(--out)}
.hd-drop[data-open] .hd-dropmenu{opacity:1;transform:none;pointer-events:auto}
/* the <li> wrappers would otherwise be the grid items, leaving the links
   unable to span or align; letting them pass through fixes both */
.hd-dropmenu > li{display:contents}
.hd-dropmenu a{display:flex;align-items:center;min-height:36px;
  font-size:15.5px;color:rgba(255,228,196,.92);
  border-block-end:1px solid transparent;
  transition:color var(--t-hover) var(--out),border-color var(--t-hover) var(--out)}
@media (hover:hover) and (pointer:fine){
  .hd-droptrig:hover{color:var(--rimal)}
  .hd-dropmenu a:hover{color:var(--rimal);border-block-end-color:var(--rimal)}
}
@media (prefers-reduced-motion:reduce){.hd-dropmenu{transition:none;transform:none}}
.no-motion .hd-dropmenu{transition:none;transform:none}

/* Inside the burger there is nowhere to float a panel and no hover to open
   one, so the list expands in place and the chevron earns its keep. */
@media(max-width:1080px){
  .hd-drop{display:block}
  .hd-droptrig{display:flex;width:100%;min-height:56px;font-size:19px;font-weight:200;
    justify-content:space-between}
  .hd-droptrig::after{display:block}
  .hd-drop[data-open] .hd-droptrig::after{transform:rotate(-135deg) translate(-2px,-1px)}
  .hd-dropmenu > li{display:block}
  .hd-dropmenu{position:static;display:block;opacity:1;transform:none;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:0;
    max-height:0;overflow:hidden;transition:max-height 300ms var(--draw)}
  .hd-drop[data-open] .hd-dropmenu{max-height:70vh}
  .hd-dropmenu a{padding-inline-start:16px;min-height:48px;font-size:16px;
    border-block-end:1px solid rgba(255,228,196,.1)}
}

/* the wide panel positions against the header */
.hd{position:fixed}

/* No blur support means no scrim, so fall back to the solid panel. */
@supports not (backdrop-filter: blur(1px)){
  .hd-dropmenu{background:rgba(56,37,14,.94)}
}


/* The dropdown links live inside .hd-links, so they were picking up the
   nav's own ::after underline on top of their border, giving two lines. */
.hd-dropmenu a::after{display:none}

/* ══════════════ THE PLAIN PARAGRAPH, AND THE QUESTIONS ══════════════
   Both are here for the same reason: a search engine and an AI assistant
   read the page to decide what this business is, and neither can read the
   hero. They are set quietly so they inform without competing with it. */

.about-band{padding-block:clamp(38px,5vw,68px)}
.about-p{max-width:74ch;margin-inline:auto;margin-block-end:clamp(14px,1.8vw,20px);
  padding-inline:var(--pad,clamp(20px,5vw,80px));
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.85;font-weight:300;
  color:var(--t80);text-wrap:pretty}
html[lang="ar"] .about-p{line-height:2;max-width:64ch}

.faq-band{padding-block:clamp(44px,6vw,84px)}
.faq-in{max-width:820px;margin-inline:auto;
  padding-inline:var(--pad,clamp(20px,5vw,80px))}
.faq-in h2{margin-block-end:clamp(18px,2.4vw,30px)}

/* <details> so the answers exist in the HTML whether or not anyone opens
   them, and the whole thing works with JavaScript switched off. */
.faq-in .faq{border-block-start:1px solid var(--hair-2,rgba(56,37,14,.14))}
.faq-in .faq:last-of-type{border-block-end:1px solid var(--hair-2,rgba(56,37,14,.14))}
.faq-in .faq summary{display:flex;align-items:center;gap:14px;
  min-height:60px;cursor:pointer;list-style:none;
  font-size:clamp(15px,1.3vw,17px);font-weight:400;
  transition:color var(--t-hover,200ms) var(--out,ease)}
.faq-in .faq summary::-webkit-details-marker{display:none}
.faq-in .faq summary::after{content:"";margin-inline-start:auto;flex:none;
  width:9px;height:9px;
  /* Physical sides on purpose. This is a drawn shape, not text: with
     border-inline-end it mirrors in RTL and the chevron ends up pointing
     sideways instead of down. */
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);
  transition:transform 220ms var(--out,ease)}
.faq-in .faq[open] summary::after{transform:rotate(-135deg)}
.faq-in .faq[open] summary{color:var(--ghaf)}
@media (hover:hover) and (pointer:fine){
  .faq-in .faq summary:hover{color:var(--ghaf)}
}
.faq-in .faq p{padding-block:0 20px;max-width:68ch;
  font-size:clamp(14.5px,1.15vw,16px);line-height:1.8;font-weight:300;
  color:var(--t80)}
/* Latin numerals inside Arabic answers must not be reordered by bidi. */
html[lang="ar"] .faq-in .faq p{line-height:1.95}
@media (prefers-reduced-motion:reduce){
  .faq-in .faq summary::after{transition:none}
}

/* ══════════════ THE TWO BOX ROUTES, UNDER SLIDE 4 ══════════════
   siteupgrade.md §1: side by side on BOTH desktop and mobile, never
   stacked. In RTL the primary reads first, so it sits on the right - which
   flex-direction:row gives for free once the container is RTL, no override
   needed. Widths 55/45, and when space runs out the padding gives way, not
   the height and not the font size. */
.hero-forks{display:flex;gap:10px;align-items:stretch;
  max-width:520px;margin:clamp(18px,2.4vw,28px) auto 0;
  padding-inline:var(--pad,clamp(20px,5vw,80px))}
/* The pair uses the same .b / .b-sand / .b-inv system as every other hero
   slide - .btn/.btn-primary live in blog.css, which this page never loads,
   so those class names rendered as unstyled text. */
.hero-forks .b{min-height:48px;white-space:nowrap;gap:8px;
  padding-inline:clamp(8px,2.4vw,26px);font-size:clamp(14px,1.5vw,16px)}
html[lang="ar"] .hero-forks .b{font-size:clamp(14px,1.5vw,16px)}
.hero-fork-a{flex:0 1 55%}
.hero-fork-b{flex:0 1 45%}
@media(max-width:420px){
  .hero-forks{gap:7px;padding-inline:16px}
  .hero-forks .b{padding-inline:6px;font-size:14px;letter-spacing:0;gap:6px}
}