/* Reference-led editorial redesign: modular rounded cards, loud condensed type,
   alternating brand fields, and image-first panels. Brand colors only. */
:root {
  --bg: var(--sand-100);
  --bg-raised: #fff;
  --ink: var(--navy-900);
  --ink-soft: var(--sand-900);
  --ink-faint: var(--sand-700);
  --accent: var(--teal-500);
  --accent-bright: var(--teal-300);
  --accent-deep: var(--teal-700);
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Bricolage Grotesque", Kufam, sans-serif;
  --font-block: "Archivo Black", "Arial Black", sans-serif;
  --radius-lg: clamp(1.4rem, 2.6vw, 2.4rem);
  --radius-md: clamp(1rem, 1.8vw, 1.6rem);
  --content-max: 88rem;
  --prose-max: 58rem;
  --slide-pad-inline: clamp(1rem, 3vw, 3rem);
  --text-display: clamp(4rem, 10vw, 9rem);
  --text-title: clamp(3rem, 7vw, 6.5rem);
}

html { background: var(--sand-100); }
body { background: var(--sand-100); color: var(--navy-900); font-family: var(--font-body); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .22; background-image: radial-gradient(rgba(24,21,38,.2) .6px, transparent .6px); background-size: 7px 7px; }
h1, h2, .t-display, .t-title, .sec-title, .pull, .s09-num, .s13-num, .s16-pull { font-family: var(--font-display); font-weight: 700; line-height: .94; letter-spacing: -.025em; text-transform: uppercase; }
h3, .s03-card h3, .s05-claim, .s08-ledger__row--head, .s10-rates__row--head, .s17-faq summary { font-family: var(--font-block); font-weight: 400; }
:lang(ar) { font-family: Kufam, var(--font-body); text-transform: none; letter-spacing: 0; }

.backdrop { display: none; }
.deck { position: relative; z-index: 1; padding-block: 1rem; }
.slide {
  min-height: calc(100svh - 2rem);
  width: calc(100% - 2rem);
  margin: 0 auto 1rem;
  padding-block: clamp(4.5rem, 8svh, 7rem);
  background: var(--sand-100);
  border: 1px solid rgba(24,21,38,.08);
  border-radius: var(--radius-lg);
  overflow: clip;
  isolation: isolate;
  transition: border-color .45s ease, box-shadow .45s ease;
}
@media (min-width: 1100.02px) {
  .slide { padding-inline: var(--slide-pad-inline); }
}
:is(#s02, #s05, #s08, #s12, #s15) { background: var(--teal-100); }
:is(#s03, #s06, #s09, #s11, #s13, #s16) { background: var(--navy-700); color: white; }
:is(#s04, #s10, #s14, #s17) { background: var(--sand-100); color: var(--navy-900); }
:is(#s03, #s06, #s09, #s11, #s13, #s16) :is(.sec-title, .t-lead, .prose, .prose-solo) { color: white; }
:is(#s03, #s06, #s09, #s11, #s13, #s16) :is(.prose, .prose-solo) { opacity: .94; }
.sec-title { color: var(--navy-900); max-width: 15ch; }
.prose, .prose-solo { color: var(--sand-900); }
.pull { color: var(--navy-900); max-width: 15ch; }

/* Fixed chrome becomes compact editorial labels. */
.progress-bar { height: .45rem; background: rgba(255,255,255,.45); }
.progress-bar__fill { background: var(--teal-500); }
.brandmark { top: 1.7rem; left: 2rem; color: var(--navy-900); background: rgba(255,255,255,.82); padding: .55rem .8rem; border-radius: 999px; backdrop-filter: blur(10px); }
.brandmark__glyph { width: 1.5rem; }
.brandmark__caption { color: inherit; font-family: var(--font-block); font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; }
.counter { right: 2rem; bottom: 1.75rem; color: var(--navy-900); background: rgba(255,255,255,.82); padding: .55rem .8rem; border-radius: 999px; font-family: var(--font-block); backdrop-filter: blur(10px); }
.deck-shell { display: block; min-width: 0; }
.deck-shell > .deck { min-width: 0; }
.topics { display: block; position: fixed; top: 1rem; left: 1rem; inset-inline-end: auto; transform: translateX(0); width: min(var(--topics-w), calc(100vw - 2rem)); height: calc(100svh - 2rem); max-height: none; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4.4rem .8rem 1rem; background: rgba(255,255,255,.96); border: 1px solid rgba(24,21,38,.08); border-radius: 1.25rem; box-shadow: 0 24px 70px rgba(24,21,38,.22); transition: opacity .24s ease, visibility .24s ease, transform .32s var(--ease-water); }
.deck-shell:not(.is-topics-open) .topics { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(-100% - 1.5rem)); }
.topics::before { display: none; }
.topics__link { color: var(--sand-700); font-family: var(--font-body); }
.topics__link[aria-current="true"] { color: var(--navy-900); }
.topics-toggle { position: fixed; top: 1.8rem; left: 1.8rem; z-index: calc(var(--z-chrome) + 2); display: flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .65rem .9rem; border: 1px solid rgba(24,21,38,.12); border-radius: 999px; background: white; color: var(--navy-900); box-shadow: 0 10px 30px rgba(24,21,38,.12); font: 400 .72rem/1 var(--font-block); text-transform: uppercase; cursor: pointer; }
.topics-toggle__icon { display: grid; gap: 3px; width: 1rem; }
.topics-toggle__icon i { height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, width .25s ease; }
.topics-toggle__icon i:nth-child(2) { width: 70%; }
.topics-toggle[aria-expanded="false"] .topics-toggle__icon i:nth-child(2) { width: 100%; }
.brandmark { left: auto; right: 2rem; }

/* Cover: the reference's split photograph/text hero, adapted with a guided slot. */
#s01 { background: var(--navy-900); color: white; padding: 1rem; }
.s01-stage { min-height: calc(100svh - 4rem); max-width: none; width: 100%; display: grid; grid-template-columns: 1.05fr .95fr; grid-template-rows: 1fr auto auto auto 1fr; gap: 1rem; align-items: center; justify-items: start; text-align: start; }
.s01-stage::before { content: ""; display: block; grid-column: 1; grid-row: 1 / -1; align-self: stretch; justify-self: stretch; background: var(--teal-100) url("../Assets/Media/alhoot-team-huddle-hero.png") center / cover no-repeat; border-radius: var(--radius-lg); }
.s01-wordmark { grid-row: 2; width: clamp(9rem,15vw,14rem); }
.s01-title { grid-row: 3; color: var(--navy-900); font-size: clamp(4.3rem,8.3vw,9rem); max-width: 8ch; }
.s01-title .s01-x { color: var(--teal-700); }
.s01-lead { grid-row: 4; color: var(--sand-900); max-width: 30ch; }
.s01-stage > :not(.s01-trail) { grid-column: 2; position: relative; z-index: 1; margin-inline: clamp(1.5rem,4vw,4rem); }
.s01-stage::after { content: ""; grid-column: 2; grid-row: 1 / -1; align-self: stretch; justify-self: stretch; width: 100%; background: var(--sand-100); border-radius: var(--radius-lg); z-index: 0; }
.s01-footer { justify-items: end; text-align: end; right: 3rem; left: auto; color: var(--navy-900); z-index: 2; }
.s01-caption { color: var(--sand-700); }
.s01-trail, .scroll-cue { display: none; }

/* Cards and data modules share the same sturdy reference geometry. */
.s03-card, .s08-ledger, .s08-note, .s10-rates, .s13-card, .s17-faq details, .media-slot {
  border: 0; border-radius: var(--radius-md); box-shadow: none;
}
.s03-card { background: var(--sand-100); color: var(--navy-900); min-height: 20rem; align-content: space-between; }
.s03-card:nth-child(2) { background: var(--teal-500); }
.s03-card:nth-child(3) { background: var(--navy-900); }
.s03-card h3, .s03-card p { color: inherit; }
.s03-card:nth-child(3) { color: white; }
.chip { background: white; border: 0; color: var(--navy-900); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(24,21,38,.09); }
.s05-chip--rail { background: var(--navy-900); color: white; }
.flow-sep { color: var(--teal-700); }
.tbd { background: var(--teal-100); color: var(--navy-900); border-color: var(--teal-700); }
.media-slot { background: var(--navy-900); border: 2px dashed var(--teal-300); color: white; overflow: hidden; }
.media-slot::before { border: 0; color: var(--teal-300); }
.media-slot::after { content: "Suggested media  •  replace with approved photography"; background: var(--teal-500); color: var(--navy-900); font-family: var(--font-block); letter-spacing: 0; }
.s06-slot { aspect-ratio: 16 / 7; }
.s09-slot { aspect-ratio: 4 / 5; min-height: 0; }
.s09-dot--red { background: var(--teal-500); }
.s09-dot--black { background: var(--navy-900); }
.s06-set img { filter: brightness(0) saturate(100%) invert(12%) sepia(14%) saturate(1750%) hue-rotate(212deg); opacity: .8; }
.s08-ledger, .s10-rates { background: white; color: var(--navy-900); overflow: hidden; }
.s08-ledger__row, .s10-rates__row { border-color: var(--sand-100); }
.s08-ledger__row--head, .s10-rates__row--head { background: var(--teal-500); color: var(--navy-900); }
.s08-note { background: var(--teal-100); color: var(--navy-900); }
.s13-card { background: var(--teal-100); color: var(--navy-900); min-height: 23rem; align-content: space-between; }
.s13-card + .s13-card { background: var(--teal-500); }
.s13-num, .s13-unit, .s13-card p { color: inherit; }
.s12-table { border-radius: var(--radius-md); overflow: hidden; background: white; color: var(--navy-900); }
.s12-table thead th { background: var(--teal-500); color: var(--navy-900); }
.s12-table th, .s12-table td { border-color: var(--sand-100); }
.s12-wix { color: var(--sand-700); }
.s12-os { color: var(--navy-900); }
.s14-item { border-inline-start: .65rem solid var(--teal-500); padding: 1rem 1.25rem; background: white; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--navy-900); }
.s15-checklist li::before { background: var(--teal-500); color: var(--navy-900); }
.s16-pull { color: var(--navy-900); }
.s17-faq details { background: white; color: var(--navy-900); }
.s17-faq summary { color: var(--navy-900); }
.s17-faq summary::after { color: var(--teal-700); }
.s17-glyph { color: var(--teal-500); opacity: .12; }

/* Visual-audit corrections: keep every layout on the same editorial axis and
   make muted copy adapt to the panel it actually sits on. */
.s02-wrap, .s03-wrap, .s04-wrap, .s05-wrap, .s06-wrap,
.s08-wrap, .s09-wrap, .s10-wrap, .s12-wrap, .s13-wrap, .s14-wrap,
.s15-wrap, .s16-wrap, .s17-wrap {
  margin-inline: auto;
  justify-self: center;
}
.sec-title, .prose, .prose-solo, .pull, .s05-beat, .s12-after,
.s14-wrap, .s15-wrap, .s16-wrap, .s17-wrap { text-align: start; }
.s09-figures { justify-content: flex-start; }
.s10-close { justify-self: start; text-align: start; }

:is(#s03, #s06, #s09, #s11, #s13, #s16) .prose strong,
:is(#s03, #s06, #s09, #s11, #s13, #s16) .prose-solo strong { color: white; }
#s03 .s03-intro { color: var(--sand-100); }
#s03 .s03-closing { color: var(--sand-300); }
#s03 .s03-head { margin-inline: 0; text-align: start; }
#s03 .s03-card .t-lead { color: inherit; }
#s06 .pull { color: var(--teal-100); }
#s06 .s06-set img { filter: brightness(0) invert(1); opacity: .9; }
#s09 .s09-fig--wix .s09-num { color: var(--sand-100); }
#s09 .s09-fig--os .s09-num,
#s09 .s09-arrow { color: var(--teal-300); }
#s09 .s09-fig small { color: var(--sand-300); }
#s16 .s16-pull { color: var(--teal-100); }
.s05-landmark strong, .s08-emph, .s11-state--cash strong { color: var(--teal-700); }

/* S04 — key highlights, on the sand panel (dark ink, teal-700 for small type) */
.s04-highlights__title { color: var(--teal-700); }
.s04-highlights__list li { border-inline-start-color: rgba(0,78,86,.28); }
.s04-highlights__list strong { color: var(--navy-900); }
.s04-highlights__list span { color: var(--sand-900); }
.s04-highlight--new { border-inline-start-color: var(--teal-500); }

/* S06 — the dynamic Meta catalogue block, on the navy panel */
#s06 .psd__label { color: var(--teal-100); }
#s06 .psd__title { color: white; }
#s06 .psd__step-tag { border-color: var(--teal-300); color: var(--teal-100); }
#s06 .psd__step p { color: white; opacity: .94; }
#s06 .psd__step strong { color: var(--teal-100); }
#s06 .psd__tease { border-inline-start-color: var(--teal-300); color: var(--sand-100); }
.psd__media { aspect-ratio: 3 / 2; }

/* S11 — WhatsApp plan card: a white module on the navy panel */
/* S11 runs a two-column layout, so its display type is dialled back a step —
   the plan card beside it needs the room more than the headline does. */
#s11 .pull { color: var(--teal-100); max-width: 22ch; font-size: clamp(2rem, 3.6vw, 3.4rem); }
#s11 .sec-title { max-width: 12ch; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.s11-plan { background: white; color: var(--navy-900); border: 0; border-radius: var(--radius-md); }
.s11-plan__label { color: var(--teal-700); }
.s11-plan__title, .s11-group h4 { color: var(--navy-900); }
.s11-group li { color: var(--sand-900); }
.s11-group li::before { background: var(--teal-500); }
#s11 .s11-honest { color: var(--sand-300); }
.s15-timeline { background: var(--navy-700); border-color: var(--teal-300); color: var(--sand-100); }
.s15-timeline strong { color: white; }
.s15-timeline .flow-sep { color: var(--teal-300); }
.media-slot__label { color: var(--sand-100); }
/* width: 100% is load-bearing here, not decoration: a block-level <figure>
   combined with aspect-ratio + min-height (no explicit height) sizes itself
   from its OWN aspect ratio instead of stretching to its grid track's width
   — a well-known CSS quirk. Without this, .s06-slot (and every other
   .editorial-media figure) renders far wider than its container on mobile,
   where the grid track is narrow, blowing out to ~2x the slide's width. */
.editorial-media { position: relative; width: 100%; min-width: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--navy-900); }
.editorial-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s06-slot { min-height: clamp(16rem, 38svh, 24rem); aspect-ratio: 16 / 7; }
/* On a narrow mobile track (~300-360px wide) a 16:7 box only needs ~130-160px
   of height — the min-height above (256-384px) was written for a much wider
   desktop/tablet track and, left alone, overrides aspect-ratio entirely,
   turning this "wide" banner into a near-square crop on phones. Let
   aspect-ratio drive the height below 640px instead. */
@media (max-width: 640px) {
  .s06-slot { min-height: 0; }
}
.s09-slot { min-height: clamp(18rem, 54svh, 32rem); aspect-ratio: 4 / 5; }
.s10-side { display: grid; gap: .8rem; align-self: center; }
.s10-media { aspect-ratio: 3 / 2; min-height: 12rem; }
.s17-lockline .s17-x { color: var(--teal-700); }
.s17-faq details { padding-inline: clamp(1rem, 2vw, 1.4rem); }
.s17-faq { display: grid; gap: clamp(.65rem, 1.4vw, 1rem); }
.s17-faq details { border: 1px solid rgba(24,21,38,.08); }
.s17-faq summary { padding-block: clamp(1rem, 1.8vw, 1.3rem); }
.s17-faq details p { padding-block: 0 clamp(1rem, 1.8vw, 1.35rem); }
.s17-closing { margin-block-start: clamp(.5rem, 2vw, 1.5rem); padding-block-start: clamp(2rem, 5svh, 3.25rem); }

/* One restrained boundary language across every topic. */
.slide::after { content: ""; position: absolute; top: 0; left: clamp(1rem, 3vw, 3rem); width: clamp(3rem, 8vw, 7rem); height: .38rem; border-radius: 0 0 999px 999px; background: var(--teal-500); transform: scaleX(.3); transform-origin: left center; opacity: .5; transition: transform .7s var(--ease-water), opacity .45s ease; }
.slide.is-slide-active { border-color: rgba(0,157,172,.34); box-shadow: 0 22px 70px rgba(24,21,38,.1); }
.slide.is-slide-active::after { transform: scaleX(1); opacity: 1; }
.slide-topic { position: absolute; top: clamp(1.2rem, 2.5vw, 2rem); left: clamp(1rem, 3vw, 3rem); z-index: 2; display: flex; align-items: center; gap: .65rem; max-width: min(70%, 34rem); color: currentColor; font: 400 .68rem/1.25 var(--font-block); letter-spacing: .035em; text-transform: uppercase; opacity: .48; transform: translateY(-5px); transition: opacity .5s ease, transform .7s var(--ease-water); }
.slide-topic__index { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; padding-inline: .35rem; border: 1px solid currentColor; border-radius: 999px; font-variant-numeric: tabular-nums; }
.slide-topic__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide.is-slide-active .slide-topic { opacity: .82; transform: translateY(0); }
#s01 .slide-topic { display: none; }
:is(#s03, #s06, #s09, #s11, #s13, #s16) .slide-topic { color: white; }

@media (max-width: 900px) {
  .topics { width: min(19rem, calc(100vw - 1rem)); top: .5rem; left: .5rem; height: calc(100svh - 1rem); }
  .deck { padding-block: .5rem; }
  .slide { width: calc(100% - 1rem); min-height: calc(100svh - 1rem); margin-bottom: .5rem; padding-inline: 1.25rem; }
  .sec-title, .pull { max-width: 100%; }
  .s01-stage { grid-template-columns: 1fr; grid-template-rows: minmax(15rem,42svh) auto auto auto; align-content: start; padding-bottom: 1.5rem; }
  .s01-stage::before { grid-row: 1; }
  .s01-stage::after { grid-column: 1; grid-row: 2 / -1; }
  .s01-stage > :not(.s01-trail) { grid-column: 1; }
  .s01-wordmark { grid-row: 2; margin-top: 1.25rem; }
  .s01-title { grid-row: 3; }
  .s01-lead { grid-row: 4; }
  .s01-title { font-size: clamp(3.5rem,17vw,6.5rem); }
  .s01-footer { position: relative; right: auto; bottom: auto; justify-items: start; text-align: start; padding: 1rem; }
  .brandmark { left: auto; right: 1rem; top: 1rem; }
  .topics-toggle { left: 1rem; top: 1rem; }
  .counter { right: 1rem; bottom: 1rem; }
  .s03-card { min-height: 14rem; }
  .s13-card { min-height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .slide, .slide::after, .slide-topic { transition: none; }
  .slide::after { transform: scaleX(1); }
  .slide-topic { opacity: .72; transform: none; }
}