/* ============================================================
   OCCASION LANDING PAGES
   One column, read top to bottom, with the booking route repeated
   at the head and the foot. Everything structural comes from
   home.css; this file only adds what these pages alone need.
   ============================================================ */

.occasion-page{background:var(--paper);color:var(--ink)}

.owrap{max-width:820px;margin-inline:auto;padding-inline:var(--pad)}

/* ── Breadcrumb ── */
.ocrumbs{max-width:820px;margin:0 auto;padding:calc(var(--nav-h) + 20px) var(--pad) 0;
  font-size:13px;color:var(--t60);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ocrumbs a{color:var(--t80);min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.ocrumbs a:hover{color:var(--ghaf)}}

/* ── Head ── */
.ohero{max-width:820px;margin-inline:auto;padding:clamp(18px,3vw,32px) var(--pad) clamp(26px,4vw,44px)}
.ohero-h{font-weight:200;font-size:clamp(32px,5.4vw,62px);letter-spacing:-.035em;line-height:1.04;
  text-wrap:balance}
html[lang="ar"] .ohero-h{font-weight:300;letter-spacing:0;line-height:1.26}
.ohero-l{margin-top:18px;max-width:58ch;font-size:clamp(16px,1.4vw,20px);line-height:1.7;
  font-weight:300;color:var(--t80)}
.ohero-b{margin-top:clamp(24px,3.2vw,36px);display:flex;gap:12px;flex-wrap:wrap}

/* ── Sections ── */
.osec{padding-block:clamp(26px,3.6vw,44px);border-top:1px solid var(--surface-line)}
.osec:first-child{border-top:0}
.osec-h{font-weight:400;font-size:clamp(19px,2vw,26px);letter-spacing:-.018em;margin-bottom:18px}
html[lang="ar"] .osec-h{letter-spacing:0}
.obody{font-size:clamp(15px,1.25vw,17.5px);line-height:1.8;font-weight:300;color:var(--t80);
  max-width:64ch}

.oinc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.oinc li{position:relative;padding-inline-start:22px;font-size:15px;line-height:1.7;
  font-weight:300;color:var(--t80)}
.oinc li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:9px;height:1px;
  background:var(--ghaf)}

/* ── The five tiers, as a price list rather than cards ── */
.otiers{list-style:none;margin:0;padding:0}
.otiers li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;
  gap:10px 16px;padding-block:14px;border-top:1px solid var(--surface-line)}
.otiers li:first-child{border-top:0}
.otier-n{font-size:clamp(16px,1.5vw,19px);font-weight:400}
.otier-g{font-size:13px;color:var(--t60);font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap}
.otier-p{font-size:clamp(17px,1.7vw,21px);font-weight:300;color:var(--ghaf);white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums}
.otier-p small{font-size:11px;letter-spacing:.1em;color:var(--t60);margin-inline-start:6px}
@media(max-width:520px){
  .otiers li{grid-template-columns:minmax(0,1fr) auto}
  .otier-g{grid-column:1/-1;order:3}
}
.oextras{margin-top:18px;font-size:13.5px;line-height:1.7;color:var(--t60)}

/* ── FAQs, open without JavaScript ── */
.ofaq{border-top:1px solid var(--surface-line)}
.ofaq:last-of-type{border-bottom:1px solid var(--surface-line)}
.ofaq summary{display:flex;align-items:center;gap:12px;min-height:56px;cursor:pointer;
  font-size:15.5px;font-weight:400;list-style:none;
  transition:color var(--t-hover) var(--out)}
.ofaq summary::-webkit-details-marker{display:none}
.ofaq summary::after{content:"";inset-inline-start:auto;margin-inline-start:auto;flex:none;
  width:9px;height:9px;border-inline-end:1.4px solid var(--ghaf);
  border-block-end:1.4px solid var(--ghaf);transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-hover) var(--out)}
.ofaq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
@media (hover:hover) and (pointer:fine){.ofaq summary:hover{color:var(--ghaf)}}
.ofaq p{padding-block:0 18px;margin:0;max-width:62ch;font-size:14.5px;line-height:1.75;
  font-weight:300;color:var(--t80)}

/* ── Close ── */
.oclose{border-top:1px solid var(--surface-line)}
.oclose-t{font-size:clamp(17px,1.8vw,23px);font-weight:300;line-height:1.5;max-width:34ch;
  text-wrap:balance}
html[lang="ar"] .oclose-t{line-height:1.7}

/* the page ends on the footer, which brings its own top border */
main{padding-bottom:clamp(40px,6vw,80px)}

/* ── The header has no hero to sit on here ──
   On the home page .hd starts transparent over a dark photograph and
   only goes solid once scrolled. These pages open on paper, so a
   transparent header renders cream-on-cream and effectively disappears.
   Hold it in its landed state from the first pixel. */
.occasion-page .hd{background:rgba(56,37,14,.94);backdrop-filter:blur(16px)}