/* 2.1.1: Plus Jakarta Sans is enqueued by the plugin (handle dsm-hero-font), not imported here */

/*
 * Hero v2 motion layer — dralsumait.com — v2.2.8
 *
 * Pass 1 (this stylesheet alone, no JS): the Archive Strip renders as a
 * horizontally scrollable, snap-aligned row on every viewport, with the
 * headline static above it. Complete and shippable on its own.
 *
 * Pass 2 (hero-motion.js adds .is-enhanced to the section): GSAP pins the
 * strip and converts vertical scroll into horizontal travel, and adds a
 * small HUD (progress + counter + skip) while the strip is pinned.
 *
 * Tokens only: every color, spacing and radius resolves to a theme.json
 * preset custom property.
 */

/* -------------------------------------------------------------------------
 * Archive strip: the editor's 6-column grid becomes a scrollable row.
 * The doubled class out-specifies the generated .wp-container-* layout
 * rules (including Ollie Pro's grid-breakpoint media queries) without
 * resorting to !important.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-scroll-strip.is-scroll-strip {
	/* left edge of the wide content area, measured from the viewport edge;
	   percentages resolve against the section's content box */
	--dsm-strip-edge: max(
		var(--wp--preset--spacing--medium),
		calc((100% + 2 * var(--wp--preset--spacing--medium) - var(--wp--style--global--wide-size)) / 2)
	);

	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: var(--wp--preset--spacing--small);

	/* bleed to the viewport edges: the clipped last card is the affordance
	   that tells the visitor there is more */
	max-width: none;
	width: calc(100% + 2 * var(--wp--preset--spacing--medium));
	/* !important required: core's constrained layout centers .alignwide
	   children with margin-left/right: auto !important */
	margin-left: calc(-1 * var(--wp--preset--spacing--medium)) !important;
	margin-right: 0 !important;
	padding-left: var(--dsm-strip-edge);
	padding-right: var(--wp--preset--spacing--medium);

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--dsm-strip-edge);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.wp-block-group.is-scroll-strip::-webkit-scrollbar {
	display: none;
}

.is-scroll-strip > .wp-block-cover {
	flex: 0 0 auto;
	width: min(78vw, 340px);
	scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
 * Cards are gateways (v2.1.0). Each card carries a link in its label; the
 * whole card is made clickable by hero-motion.js, and the CSS gives it the
 * affordance: pointer, a 4px lift and a lighter overlay on hover/focus.
 * ---------------------------------------------------------------------- */
.is-scroll-strip > .wp-block-cover.dsm-card {
	cursor: pointer;
	transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

.is-scroll-strip > .wp-block-cover.dsm-card > .wp-block-cover__background {
	transition: opacity 320ms ease;
}

.is-scroll-strip > .wp-block-cover.dsm-card:hover,
.is-scroll-strip > .wp-block-cover.dsm-card:focus-within {
	transform: translateY(-4px);
}

.is-scroll-strip > .wp-block-cover.dsm-card:hover > .wp-block-cover__background,
.is-scroll-strip > .wp-block-cover.dsm-card:focus-within > .wp-block-cover__background {
	opacity: 0.35 !important;
}

/* the label link should read as the card title, not as a body link */
.is-scroll-strip > .wp-block-cover p a {
	color: inherit;
	text-decoration: none;
}

.is-scroll-strip > .wp-block-cover p a:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 4px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Headline scale. The theme's largest preset (xx-large) tops out around
 * 60px, which reads as a paragraph beside a full-bleed media strip. The
 * hero needs display scale, so it fluid-scales with the viewport and is
 * capped so the two lines never break into three on wide screens.
 * Scoped to .is-hero-headline: no other heading on the site is affected.
 * ---------------------------------------------------------------------- */
/* The headline group inherits the constrained content width (~700px), which
 * forces a 25-character line to wrap at display size. Give it the theme's
 * wide measure so each sentence holds one line, and leave the portrait row's
 * children at their natural width so the image is not pushed out of view. */
.is-hero-headline {
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
}

.is-hero-headline > .wp-block-heading {
	max-width: none;
}

/* Legacy structure (v2.0.x): the portrait sits in a flex row between two
 * headings. Kept so the layer still works on the old markup. */
.is-hero-headline > .wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--small);
}

.is-hero-headline > .wp-block-group > * {
	flex: 0 0 auto;
	margin: 0;
}

.is-hero-headline > .wp-block-group .wp-block-heading {
	max-width: none;
	width: auto;
}

.is-hero-headline .wp-block-heading {
	font-family: 'Plus Jakarta Sans', 'Mona Sans', system-ui, sans-serif;
	font-weight: 800;
	/* 40px floor -> 82px ceiling, matching the reference build */
	font-size: clamp(2.5rem, 5.6vw, 5.125rem) !important;
	line-height: 1.14;
	letter-spacing: normal;
	text-wrap: balance;
	color: var(--wp--preset--color--main);
}

.is-hero-headline > p {
	font-family: 'Plus Jakarta Sans', 'Mona Sans', system-ui, sans-serif;
	font-weight: 500;
	/* the subline sits one step lighter than the headline, not heavier */
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Inline portrait (v2.1.0). Lives INSIDE the h1 as an inline image, so the
 * sentence is one heading. Sized at ~1.25em of the line so the face reads
 * as a face, not as an icon; equal gaps on both sides.
 * ---------------------------------------------------------------------- */
.is-hero-headline .wp-block-heading img {
	display: inline-block;
	width: clamp(3.5rem, 7.8vw, 6.4rem) !important;
	height: clamp(3.5rem, 7.8vw, 6.4rem) !important;
	object-fit: cover;
	vertical-align: middle;
	border-radius: var(--wp--preset--border-radius--md, 0.75rem);
	margin: 0 0.1em;
	/* lift it slightly so it centres on the x-height, not the baseline */
	position: relative;
	top: -0.06em;
}

/* Legacy figure (v2.0.x markup) keeps its own sizing. */
.is-hero-headline .wp-block-image img {
	width: clamp(3rem, 6.4vw, 5.75rem) !important;
	height: clamp(3rem, 6.4vw, 5.75rem) !important;
}

/* the headline block and the subline need air between them at display scale */
.is-hero-headline > p {
	margin-top: var(--wp--preset--spacing--large);
}

/* -------------------------------------------------------------------------
 * Quiet CTA under the subline (v2.1.0): a paragraph carrying the class
 * dsm-cta with one link. Fades with the headline; JS jumps it past the pin.
 * ---------------------------------------------------------------------- */
.is-hero-headline > p.dsm-cta {
	margin-top: var(--wp--preset--spacing--small);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 800;
}

.is-hero-headline > p.dsm-cta a {
	color: var(--wp--preset--color--main);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 0.2em;
	transition: border-color 200ms ease, color 200ms ease;
}

.is-hero-headline > p.dsm-cta a:hover,
.is-hero-headline > p.dsm-cta a:focus-visible {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--main);
}

/* -------------------------------------------------------------------------
 * Mobile (< 768px): smaller, left-aligned headline. Nothing pins here.
 * ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* the preset utility class uses !important, so the override must too */
	.is-hero-headline .wp-block-heading {
		text-align: left;
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	.is-hero-headline > .wp-block-group {
		justify-content: flex-start;
	}

	.is-hero-headline p.has-text-align-center {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
 * Enhanced state — set by hero-motion.js, never by markup. Without JS this
 * entire block is inert and pass 1 above is what ships.
 * ---------------------------------------------------------------------- */
.is-hero-motion.is-enhanced {
	/* clips the translated track while leaving vertical sticky/pin intact */
	overflow-x: clip;
}

/* GSAP's pin-spacer wrapper does not carry the section's alignfull class;
   hero-motion.js copies it over so core's own layout rules size the spacer.
   The pinned section itself must always fill the spacer — !important beats
   the inline width lock ScrollTrigger writes from its own measurement. */
.pin-spacer > .is-hero-motion {
	width: 100% !important;
	max-width: none !important;
}

.is-hero-motion.is-enhanced .wp-block-group.is-scroll-strip.is-scroll-strip {
	overflow: visible;
	scroll-snap-type: none;
	will-change: transform;
}

.is-hero-motion.is-enhanced .is-hero-headline {
	transform-origin: 50% 0;
	will-change: transform, opacity;
	/* held in place by the browser while the cards rise past it and it fades;
	   the offset is written by hero-motion.js from the real header height */
	position: sticky;
	top: var(--dsm-head-top, 0px);
	z-index: 2;
}

/* ScrollTrigger's pin-spacer replaces the strip in the flow; it must keep the
   same full-bleed geometry or the row snaps back to the content width. */
.is-hero-motion.is-enhanced .pin-spacer {
	max-width: none !important;
	width: calc(100% + 2 * var(--wp--preset--spacing--medium)) !important;
	margin-left: calc(-1 * var(--wp--preset--spacing--medium)) !important;
	margin-right: 0 !important;
}

/* Entrance masks: these classes are added by JS at enhancement time, so no
 * above-the-fold content can ever be stuck at opacity 0 if JS fails. */
.is-hero-motion.is-enhanced .dsm-mask {
	/* No clipping. A mask that hides the line while it rises is only safe when
	   the mask is guaranteed taller than the glyphs — at display sizes, across
	   two typefaces and a fluid font-size, it is not. Every clipped-headline
	   bug in this section came from that assumption, so the entrance rises and
	   fades instead of being revealed through a window. */
	overflow: visible;
	padding: 0;
	margin: 0;
}

/* The line must be a block: as an inline-block it is laid out inside the
 * heading's line box, which at display sizes is shorter than the glyphs
 * themselves — the overflow then gets clipped by the mask. */
.is-hero-motion.is-enhanced .dsm-line {
	display: block;
}

.is-hero-motion.is-enhanced .dsm-word {
	display: inline-block;
}

/* the portrait's slot: clips the image while its width animates from 0 */
.is-hero-motion.is-enhanced .dsm-portrait {
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	white-space: nowrap;
}

/* legacy figure (v2.0.x markup) */
.is-hero-motion.is-enhanced .is-hero-headline .wp-block-image {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Pin HUD (v2.1.0): progress track, "n / N" counter and a Skip link, fixed
 * just below the resting strip. Injected by hero-motion.js, visible only
 * while the strip is pinned (section.is-pinned). Position is written by JS
 * from the measured rest height (--dsm-hud-top).
 * ---------------------------------------------------------------------- */
.dsm-hud {
	position: fixed;
	left: 50%;
	top: var(--dsm-hud-top, 80vh);
	transform: translate(-50%, 8px);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--small);
	font-family: 'Plus Jakarta Sans', 'Mona Sans', system-ui, sans-serif;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--main);
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms ease, transform 240ms ease;
}

.is-hero-motion.is-pinned ~ .dsm-hud,
.pin-spacer.is-pinned ~ .dsm-hud,
body.dsm-hero-pinned .dsm-hud {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.dsm-hud__track {
	position: relative;
	width: clamp(6rem, 12vw, 10rem);
	height: 3px;
	border-radius: 999px;
	background: var(--wp--preset--color--border-light, var(--wp--preset--color--tertiary));
	overflow: hidden;
}

.dsm-hud__fill {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	transform-origin: 0 50%;
	transform: scaleX(var(--dsm-p, 0));
}

.dsm-hud__count {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	min-width: 3.2em;
}

.dsm-hud__skip {
	color: var(--wp--preset--color--main);
	text-decoration: none;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	padding-bottom: 0.15em;
	transition: border-color 200ms ease;
}

.dsm-hud__skip:hover,
.dsm-hud__skip:focus-visible {
	border-color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Reduced motion: hard stop, independent of the JS opt-out.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.is-hero-motion .is-hero-headline,
	.is-hero-motion .is-scroll-strip,
	.is-hero-motion .dsm-line,
	.is-hero-motion .dsm-word,
	.is-hero-motion .dsm-portrait,
	.is-hero-motion .wp-block-image,
	.is-hero-motion .wp-block-image img,
	.is-hero-motion .wp-block-heading img {
		transform: none !important;
		opacity: 1 !important;
	}

	.is-scroll-strip > .wp-block-cover.dsm-card,
	.is-scroll-strip > .wp-block-cover.dsm-card > .wp-block-cover__background {
		transition: none;
	}

	.dsm-hud {
		display: none;
	}
}


/* =========================================================================
 * 2.2.0 · Mobile vertical story — Arabic front page, ≤781px
 * Work order: claude/WORK-ORDER-home-mobile.md §2 · reference mockup:
 * mockup-home-full-v2.html · decisions: DECISIONS-mobile-home.md (1)
 *
 * Progressive: this stylesheet alone turns the nine cards into full-height
 * panels under a full-bleed opening panel. hero-motion.js (mobile module)
 * adds html.dsm-snap (snapping while the story is on screen), the progress
 * bars, the skip pill, the "read the chapter" buttons, the fixed header
 * states and the drawer. Without JS nothing is hidden and nothing snaps.
 * Scoped to html[lang]: every locale (2.3.0, session 61 — was Arabic-only).
 * ====================================================================== */
@media (max-width: 781px) {

  html[lang] {
    --dsm-top: 0px;                 /* admin bar offset, see below */
    --dsm-hdr: 56px;
    --dsm-deep: #00635C;
    --dsm-deeper: #00504A;
    --dsm-ink: #0F1C1C;
    --dsm-mint: #8FE3DA;
    --dsm-night: #06201F;
  }
  html[lang] body.admin-bar { --dsm-top: 46px; }

  /* the page is the scroll container: snap only while the story is on
     screen — hero-motion.js toggles html.dsm-snap from the last panel's
     own position (never from the next section: work order §2.3) */
  html[lang].dsm-snap { scroll-snap-type: y mandatory; }
  html[lang].dsm-snap body { overscroll-behavior-y: none; }

  /* ---- the section: no padding, night background ---- */
  html[lang] body.home .is-hero-motion {
    padding: 0 !important;
    margin-block: 0 !important;
    /* 2.2.8: no inline-margin override — WP's own .alignfull negative margins give the full bleed
       (calc(50% - 50vw) overflowed by the scrollbar width where scrollbars take space) */
    background: var(--dsm-night) !important;
    overflow: visible !important;
    counter-reset: dsm-ch;
  }
  html[lang] body.home .is-hero-motion > * {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ---- opening panel: full-bleed dark portrait behind a scrim (§2.4) ---- */
  html[lang] body.home .is-hero-motion .is-hero-headline {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    isolation: isolate;
    box-sizing: border-box;
    height: 100dvh;
    min-height: 560px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    text-align: center;
    padding: 0 26px calc(112px + env(safe-area-inset-bottom)) !important;
    background: var(--dsm-night);
    overflow: hidden;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  /* the portrait itself — full opacity, no grayscale; contrast comes from the scrim */
  html[lang] body.home .is-hero-headline::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--dsm-night) url("https://dralsumait.com/wp-content/uploads/2026/08/hero-headline-portrait.webp") 50% 18% / cover no-repeat;
  }
  html[lang] body.home .is-hero-headline::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
      rgba(4,16,16,.93) 0%, rgba(4,16,16,.64) 34%,
      rgba(4,16,16,.32) 64%, rgba(4,16,16,.50) 100%);
  }
  html[lang] body.home .is-hero-headline .wp-block-heading {
    font-family: var(--ds-ar-display, "Aref Ruqaa", "Amiri", serif) !important;
    font-weight: 400 !important;
    font-size: 38px !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    text-align: center !important;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
    margin: 0 !important;
    max-width: none !important;
  }
  /* reveal state is the visible state: no line or word is ever held at 0 */
  html[lang] body.home .is-hero-headline .dsm-line,
  html[lang] body.home .is-hero-headline .dsm-word {
    opacity: 1 !important;
    transform: none !important;
    display: inline;
  }
  html[lang] body.home .is-hero-headline .dsm-line { display: block; }
  /* the inline portrait leaves the sentence on a phone (it is the panel's background) */
  html[lang] body.home .is-hero-headline .dsm-portrait,
  html[lang] body.home .is-hero-headline .wp-block-heading img { display: none !important; }
  html[lang] body.home .is-hero-headline > p {
    font-family: var(--ds-ar-body, "Tajawal", sans-serif) !important;
    text-align: center !important;
    max-width: none !important;
  }
  html[lang] body.home .is-hero-headline > p.has-primary-color {
    color: var(--dsm-mint) !important;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.7;
    margin: 16px 0 0 !important;
  }
  /* the CTA paragraph becomes the scroll cue pill at the bottom of the panel */
  html[lang] body.home .is-hero-headline > p.dsm-cta {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(30px + env(safe-area-inset-bottom));
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: flex;
    justify-content: center;
  }
  html[lang] body.home .is-hero-headline > p.dsm-cta a {
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    border-radius: 999px;
    background: rgba(4,16,16,.42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    min-height: 44px;
    padding: 0 18px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* ---- the strip becomes a column of full-height panels (§2.2) ---- */
  html[lang] body.home .is-hero-motion .pin-spacer,
  html[lang] body.home .is-hero-motion .is-scroll-strip-spacer {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
  }
  html[lang] body.home .is-hero-motion .wp-block-group.is-scroll-strip.is-scroll-strip {
    display: block;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
    will-change: auto;
  }
  html[lang] body.home .is-scroll-strip > .wp-block-cover {
    position: relative;
    box-sizing: border-box;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 560px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: none !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: var(--dsm-night);
    counter-increment: dsm-ch;
    cursor: default;
  }
  html[lang] body.home .is-scroll-strip > .wp-block-cover > img,
  html[lang] body.home .is-scroll-strip > .wp-block-cover > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  /* the theme's flat overlay becomes the mockup's scrim */
  html[lang] body.home .is-scroll-strip > .wp-block-cover > .wp-block-cover__background {
    opacity: 1 !important;
    background-color: transparent !important;
    background-image:
      linear-gradient(to top, rgba(4,16,16,.94) 0%, rgba(4,16,16,.78) 22%, rgba(4,16,16,.34) 52%, rgba(4,16,16,.10) 78%),
      linear-gradient(to bottom, rgba(4,16,16,.52), transparent 26%) !important;
  }
  html[lang] body.home .is-scroll-strip > .wp-block-cover > .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 22px calc(30px + env(safe-area-inset-bottom)) !important;
    text-align: start;
  }
  /* chapter index: written by CSS, so it can never fall out of step with the panels */
  html[lang] body.home .is-scroll-strip > .wp-block-cover > .wp-block-cover__inner-container::before {
    content: counter(dsm-ch, decimal-leading-zero) " / 07";
    display: block;
    font-family: var(--ds-ar-display, "Aref Ruqaa", serif);
    font-size: 14px;
    letter-spacing: .14em;
    color: var(--dsm-mint);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
    margin-bottom: 14px;
  }


  /* 2.3.0: the counter is forced direction:ltr, so its alignment must follow the page, not the element */
  html[lang]:not([dir="rtl"]) body.home .is-scroll-strip > .wp-block-cover > .wp-block-cover__inner-container::before { text-align: left; }
  html[lang] body.home .is-scroll-strip > .wp-block-cover .wp-block-cover__inner-container > p:first-of-type {
    font-family: var(--ds-ar-body, "Tajawal", sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dsm-mint) !important;
    margin: 0 0 8px !important;
  }
  html[lang] body.home .is-scroll-strip > .wp-block-cover .wp-block-cover__inner-container > p:nth-of-type(2) {
    font-family: var(--ds-ar-display, "Aref Ruqaa", serif) !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    margin: 0 0 16px !important;
  }
  html[lang] body.home .is-scroll-strip > .wp-block-cover .wp-block-cover__inner-container > p a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
  }
  /* "read the chapter" — added by hero-motion.js from the title's own href */
  html[lang] body.home .dsm-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: #fff !important;
    color: var(--dsm-deep) !important;
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
  }
  html[lang] body.home .dsm-go:active { transform: scale(.985); }
  html[lang] body.home .is-scroll-strip > .wp-block-cover.dsm-card:hover,
  html[lang] body.home .is-scroll-strip > .wp-block-cover.dsm-card:focus-within { transform: none !important; }
  html[lang] body.home .is-scroll-strip > .wp-block-cover.dsm-card:hover > .wp-block-cover__background { opacity: 1 !important; }

  /* the desktop HUD never appears on a phone */
  html[lang] body.home .dsm-hud { display: none !important; }

  /* ---- story chrome: progress bars + skip pill (§2.3) ---- */
  html[lang] body.home .dsm-bars {
    position: fixed;
    top: calc(var(--dsm-top) + var(--dsm-hdr));
    right: 0; left: 0;
    z-index: 60;
    display: flex;
    gap: 4px;
    padding: 0 12px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  html[lang] body.home.dsm-in-story .dsm-bars { opacity: 1; pointer-events: auto; }
  html[lang] body.home .dsm-bar {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    padding: 6px 0 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
  }
  html[lang] body.home .dsm-bar i {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.28);
    transition: background .25s;
  }
  html[lang] body.home .dsm-bar.done i { background: rgba(255,255,255,.62); }
  html[lang] body.home .dsm-bar[aria-current="true"] i { background: #fff; }
  html[lang] body.home .dsm-skip {
    position: fixed;
    z-index: 55;
    bottom: calc(28px + env(safe-area-inset-bottom));
    inset-inline-end: 22px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(4,16,16,.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 7px;
  }
  /* visible from chapter 1 — never on the opening panel (§2.3) */
  html[lang] body.home.dsm-in-story:not(.dsm-at-open) .dsm-skip { display: flex; }

  /* ---- header (§2.5): an independent fixed layer, built by hero-motion.js
     while the story chrome is on; the theme header is hidden meanwhile.
     2.2.8: the restyled theme header painted inverted (light band, dark
     title) on iOS Safari and Chrome; the trigger was text-overflow:ellipsis
     on the overflowing wordmark (see .dsm-hwm). Kept as its own layer: no
     theme-header restyling, no dependence on the header block's markup. ---- */
  html[lang] body.home.dsm-story-on .site-header { display: none !important; }
  html[lang] body.home .dsm-hdr {
    position: fixed;
    top: var(--dsm-top);
    left: 0; right: 0;
    z-index: 70;
    height: var(--dsm-hdr);
    box-sizing: border-box;
    padding: 0 10px 0 6px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(to bottom, rgba(4,16,16,.80), rgba(4,16,16,.22) 72%, rgba(4,16,16,0));
    transform: translateZ(0);
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
  }
  html[lang] body.home.dsm-solid .dsm-hdr {
    background: #fff;
    box-shadow: 0 1px 0 #DCE9E7;
    color: var(--dsm-ink);
    transition: background .3s, box-shadow .3s, color .3s;
  }
  html[lang] body.home .dsm-hwm {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: auto;
    padding: 11px 4px;
    font-family: var(--ds-ar-display, "Aref Ruqaa"), "Amiri", serif;   /* §3.8 (2.2.8): the Arabic wordmark, read from the header's site-title block */
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    overflow: clip;                 /* trap 173 (session 60c): with overflow:hidden on this overflowing wordmark,
                                       Chrome (and the iPhone) painted the whole header layer inverted — light band,
                                       dark title; overflow:clip (no scroll container) paints correctly */
    text-overflow: clip;
  }

  /* 2.3.2 (session 61): §3.8 gives Aref Ruqaa to the Arabic wordmark only. The Latin
     locales keep the theme's own display face; hero-motion.js also shortens the name on
     this 56px layer, because "Dr. Abdul Rahman Al-Sumait" (203px at 16px) cannot sit beside
     a 200px English CTA and a 44px menu button in 399px — it was clipped mid-word. */
  html[lang]:not([dir="rtl"]) body.home .dsm-hwm {
    font-family: "Mona Sans", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
  }
  html[lang] body.home .dsm-hcta {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--dsm-deep);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  html[lang] body.home.dsm-solid .dsm-hcta {
    background: #00786F;
    color: #fff;
    transition: background .3s, color .3s;
  }
  html[lang] body.home .dsm-menu-btn {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
  }
  html[lang] body.home.dsm-solid .dsm-hdr .dsm-menu-btn { color: var(--dsm-ink); transition: color .3s; }
  html[lang] body.home .dsm-menu-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }

  /* ---- the drawer: fixed top bar · scrolling accordion · fixed bottom bar (§2.6) ---- */
  html[lang] body.home .dsm-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--dsm-deeper);
    color: #fff;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }
  html[lang] body.home .dsm-drawer.open { transform: translateX(0); visibility: visible; }
  html[lang] body.home.dsm-drawer-open { overflow: hidden; }
  html[lang] body.home .dsm-dtop {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.14);
    background: var(--dsm-deeper);
    margin-top: var(--dsm-top);
  }
  html[lang] body.home .dsm-dtop .dsm-wm {
    font-family: var(--ds-ar-display, "Aref Ruqaa", serif);
    font-size: 18px;
    margin-inline-end: auto;
    color: #fff;
    text-decoration: none;
  }
  html[lang] body.home .dsm-dtop .dsm-menu-btn { color: #fff; }
  html[lang] body.home .dsm-dbody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 18px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html[lang] body.home .dsm-dbody::-webkit-scrollbar { display: none; }
  html[lang] body.home .dsm-dfoot {
    flex: 0 0 auto;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.14);
    background: var(--dsm-deeper);
  }
  html[lang] body.home .dsm-acc details { border-bottom: 1px solid rgba(255,255,255,.16); }
  html[lang] body.home .dsm-acc summary {
    list-style: none;
    cursor: pointer;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: #fff;
  }
  html[lang] body.home .dsm-acc summary::-webkit-details-marker { display: none; }
  html[lang] body.home .dsm-acc summary::after { content: "＋"; font-size: 18px; color: var(--dsm-mint); font-weight: 400; }
  html[lang] body.home .dsm-acc details[open] summary::after { content: "−"; }
  html[lang] body.home .dsm-acc .dsm-list { padding-bottom: 10px; }
  html[lang] body.home .dsm-acc .dsm-list a,
  html[lang] body.home .dsm-acc .dsm-direct {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
    font-size: 16px;
    color: rgba(255,255,255,.92);
    text-decoration: none;
  }
  html[lang] body.home .dsm-acc .dsm-direct {
    min-height: 56px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  html[lang] body.home .dsm-acc .dsm-cn {
    font-family: var(--ds-ar-display, "Aref Ruqaa", serif);
    font-size: 14px;
    color: var(--dsm-mint);
    direction: ltr;
    unicode-bidi: isolate;
    min-width: 24px;
    flex: 0 0 auto;
  }
  html[lang] body.home .dsm-langs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html[lang] body.home .dsm-langs::-webkit-scrollbar { display: none; }
  html[lang] body.home .dsm-langs a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.34);
    color: #fff;
    text-decoration: none;
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
    font-size: 15px;
  }
  html[lang] body.home .dsm-langs a[aria-current] {
    background: #fff;
    color: var(--dsm-deeper);
    border-color: #fff;
    font-weight: 700;
  }
  html[lang] body.home .dsm-dfoot .dsm-dcta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    border-radius: 999px;
    background: #fff;
    color: var(--dsm-deeper);
    font-family: var(--ds-ar-body, "Tajawal", sans-serif);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  /* the first section after the story is a snap target too (hero-motion.js marks it):
     with mandatory snapping and no target below the last panel, Chrome would never let
     the reader leave the story — landing on it flips the story off and frees the page */
  html[lang] body.home .dsm-exit { scroll-snap-align: start; }
  /* anchors after the story clear the fixed header */
  html[lang] body.home.dsm-story-on .is-hero-motion ~ * { scroll-margin-top: calc(var(--dsm-top) + var(--dsm-hdr)); }
}

/* reduced motion: no snapping, no transitions, no drawer slide — the chrome stays usable */
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
  html[lang].dsm-snap { scroll-snap-type: none; }
  html[lang] body.home .dsm-drawer { transition: none; }
  html[lang] body.home .site-header,
  html[lang] body.home .dsm-bars,
  html[lang] body.home .dsm-bar i { transition: none; }
}