/* Home (Signature §4.2, Wow addendum §0-§2.3, home premium II W9a), after components.css. Script: assets/js/home.js. */

/* One rhythm (W9a): 88 px between cream sections on phones, 160 px on large screens; full-bleed bands (sand steps, ink
   Network, ink footer) carry their own padding and touch each other. The hero slides under the clear 76 px header. */
.site-main--home { --home-gap: clamp(5.5rem, 3rem + 7.8vw, 10rem); margin-block-start: -4.75rem; }
/* Arabic display on the home (W9a): Noto Sans Arabic 500, calm like the Latin serif (never the Latin face). */
.home :lang(ar) { --rym-font-weight-serif: 500; }

/* Hero: slideshow (Wow §2.1) */
.home-hero { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end; min-block-size: max(45rem, 100svh); background-color: var(--rym-color-ink); color: var(--rym-color-on-ink); }
.home-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; --home-scrim-side: to right; }
:dir(rtl) .home-hero__media { --home-scrim-side: to left; }
/* One warm grade for the theme photos (W9a): a sand multiply layer (on the hero no filter, so the drift stays cheap). */
.home-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 3; background-color: #f4e3c8; mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
/* Scrim (W9a): the header's own veil at the top, a shade rising from the foot and from the text's side; the upper
   part of the photo keeps its colour. */
.home-hero__media::after {
	content: ""; position: absolute; inset: 0; z-index: 3;
	background:
		linear-gradient(180deg, rgb(15 36 56 / 55%) 0, rgb(15 36 56 / 0%) 9rem),
		linear-gradient(to top, rgb(15 36 56 / 70%) 0%, rgb(15 36 56 / 30%) 42%, rgb(15 36 56 / 0%) 68%),
		linear-gradient(var(--home-scrim-side), rgb(15 36 56 / 48%), rgb(15 36 56 / 0%) 60%);
}
.home-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--rym-dur-slide) var(--rym-ease-in-out); }
.home-hero__slide.is-current { z-index: 2; opacity: 1; }
.home-hero__slide.is-previous { z-index: 1; opacity: 1; transition: none; }
.home-hero__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.home-hero__photo img { animation: rym-hero-settle var(--rym-dur-hero-photo) var(--rym-ease-out) both; }
/* Ken Burns: each new photo drifts from 108 % to rest over its 8.2 s on screen (its own name, so it restarts on the first photo). */
.home-hero__slide.is-drifting img { animation: rym-hero-drift var(--rym-dur-drift) var(--rym-ease-out) both; }
.home-hero.is-paused .home-hero__slide img { animation-play-state: paused; }
/* RTL: the first photo mirrored, so its calmer side is under the text (the others carry signs: never mirrored). */
:dir(rtl) .home-hero__photo img { scale: -1 1; }

/* Four layers (W9a): eyebrow, title, lead, pill, then one quiet foot line; the pill's foot 120 px above the hero's. */
.home-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; padding-block: calc(4.75rem + clamp(3rem, 10vh, 7rem)) 2.75rem; }
.home-hero__eyebrow { margin: 0 0 1.75rem; color: var(--rym-color-on-ink); font-size: .8125rem; font-weight: var(--rym-font-weight-medium); letter-spacing: .16em; }
:lang(ar) .home-hero__eyebrow { font-size: .875rem; letter-spacing: 0; }
.home-hero__title { max-inline-size: 11ch; margin: 0; color: var(--rym-color-on-ink); font-size: clamp(3.5rem, 1.6rem + 5.4vw, 7.5rem); line-height: .95; letter-spacing: -.015em; text-shadow: 0 2px 32px rgb(15 36 56 / 28%); }
:lang(ar) .home-hero__title { max-inline-size: 12ch; font-size: clamp(3rem, 1.4rem + 4.4vw, 6rem); line-height: 1.25; letter-spacing: 0; }
.home-hero__lead { max-inline-size: 46ch; text-wrap: pretty; margin: 1.5rem 0 0; color: var(--rym-color-on-ink); font-size: 1.1875rem; font-weight: 400; line-height: 1.5; text-shadow: 0 1px 12px rgb(15 36 56 / 40%); }
.home-hero__search { inline-size: 100%; margin-block-start: 2.5rem; }
.home-hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; inline-size: 100%; margin-block-start: 2rem; }

/* Entrance (W9a, final fixes): the words rise from their masks 50 ms apart from the first frame, while the eyebrow,
   the lead, the pill and the foot line come up 16 px. Nothing fades in: every text keeps its contrast at every frame,
   the lead is painted at once (it is the page's LCP element) and a fading control would read as disabled. */
.rise-word { display: inline-block; clip-path: inset(-0.4em -0.2em -0.12em -0.2em); }
.rise-word > span { display: inline-block; animation: rym-word-rise var(--rym-dur-hero) var(--rym-ease-out) calc(var(--i, 0) * 50ms) backwards; }
:is(.home-hero__eyebrow, .home-hero__lead, .home-hero__search, .home-hero__foot) { animation: rym-hero-lift var(--rym-dur-hero-rise) var(--rym-ease-out) backwards; }
.home-hero__search { animation-delay: 120ms; }
.home-hero__foot { animation-delay: 200ms; }
/* Without scripting the controls never wait. */
@media (scripting: none) { :is(.home-hero__search, .home-hero__foot, .home-hero__foot > *) { animation: none; } }
@keyframes rym-hero-lift { from { transform: translateY(16px); } }
@keyframes rym-word-rise { from { transform: translateY(115%); } }
@keyframes rym-hero-drift { from { transform: scale(1.08); } }

/* The neighbourhoods as plain links (the `.chip` hook kept): 14 px, underlined on hover only. */
.home-hero__quick { min-inline-size: 0; }
.home-hero__quick .chip-list { gap: 1.75rem; overflow: visible; }
.home-hero__quick .chip { position: relative; min-block-size: 2.75rem; padding: 0; border: 0; border-radius: 0; background: none; color: rgb(255 253 248 / 86%); font-size: .875rem; font-weight: 500; }
.home-hero__quick .chip::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: .5rem; block-size: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--rym-dur-2) var(--rym-ease-out); }
:dir(rtl) .home-hero__quick .chip::after { transform-origin: 100% 50%; }
.home-hero__quick .chip:focus-visible { outline-color: var(--rym-color-on-ink); outline-offset: 2px; }
.home-hero__quick .chip:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.home-hero__quick .chip:hover { color: var(--rym-color-on-ink); }
	.home-hero__quick .chip:hover::after { transform: scaleX(1); }
}

/* Slideshow group (WCAG 2.2.2): counter, a hairline filling over the 7 s turn (the page's one linear curve), pause. */
.home-hero__show { display: flex; flex: none; align-items: center; gap: 1rem; color: rgb(255 253 248 / 86%); text-shadow: 0 1px 12px rgb(15 36 56 / 40%); }
.home-hero__show[hidden] { display: none; }
.home-hero__count { font-family: var(--rym-font-display); font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; }
.home-hero__progress { position: relative; overflow: hidden; inline-size: 4rem; block-size: 1px; background-color: rgb(255 253 248 / 28%); box-shadow: 0 1px 6px rgb(15 36 56 / 45%); }
.home-hero__progress > span { position: absolute; inset: 0; background-color: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
:dir(rtl) .home-hero__progress > span { transform-origin: 100% 50%; }
.home-hero__progress > .is-running { animation: rym-hero-progress 7s linear forwards; }
.home-hero.is-paused .home-hero__progress > span { animation-play-state: paused; }
@keyframes rym-hero-progress { to { transform: scaleX(1); } }
.home-hero__play {
	display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid rgb(255 253 248 / 40%); border-radius: 50%;
	background-color: transparent; color: var(--rym-color-on-ink); cursor: pointer; transition: transform var(--rym-duration-press) var(--rym-ease-out);
}
.home-hero__play[hidden] { display: none; }
.home-hero__play:active { transform: scale(.94); }
.home-hero__play:focus-visible { outline-color: var(--rym-color-on-ink); }
.home-hero__play .icon { inline-size: 1rem; block-size: 1rem; }
.home-hero__play[aria-pressed="false"] .home-hero__play-icon, .home-hero__play[aria-pressed="true"] .home-hero__pause-icon { display: none; }
@media (hover: hover) and (pointer: fine) { .home-hero__play:hover { border-color: var(--rym-color-on-ink); } }

/* Scroll-linked depth: the photos drift slower than the page and dim into the ink as the hero leaves, the content
   rises a little (it never fades: its contrast stays AA while it is on screen); inset 0: the page's scroll padding
   for the header would start the drift before any scroll). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.home-hero__media { animation: rym-hero-depth linear both; animation-timeline: view(block 0px); animation-range: exit 0% exit 100%; }
		.home-hero__inner { animation: rym-hero-leave linear both; animation-timeline: view(block 0px); animation-range: exit 0% exit 80%; }
	}
}
@keyframes rym-hero-depth { to { opacity: .55; transform: translateY(18%); } }
@keyframes rym-hero-leave { to { transform: translateY(-2.5rem); } }

@media (max-width: 47.99rem) {
	.home-hero { min-block-size: 100svh; }
	.home-hero__photo img { object-position: 70% 40%; }
	.home-hero__media::after { background: linear-gradient(180deg, rgb(15 36 56 / 45%) 0, rgb(15 36 56 / 0%) 7rem), linear-gradient(to top, rgb(15 36 56 / 88%) 0%, rgb(15 36 56 / 62%) 45%, rgb(15 36 56 / 0%) 78%); }
	.home-hero__inner { padding-block: max(8rem, 22svh) 1.25rem; }
	.home-hero__eyebrow { margin-block-end: 1.25rem; }
	.home-hero__title { font-size: 3.25rem; }
	:lang(ar) .home-hero__title { font-size: 3rem; }
	.home-hero__lead { margin-block-start: 1rem; font-size: 1.0625rem; }
	.home-hero__search { margin-block-start: 1.75rem; }
	/* The foot line gives its two parts to the hero's grid (fix round): the links under the pill, the slideshow group
	   in flow on the eyebrow's line at the end, over the scrim (no absolute offset for the hero's transforms to move). */
	.home-hero__foot { display: contents; }
	.home-hero__foot > * { animation: rym-hero-lift var(--rym-dur-hero-rise) var(--rym-ease-out) 200ms backwards; }
	.home-hero__quick { margin-block-start: .75rem; }
	/* The slideshow group on its own row under the links (final fixes: it touched the eyebrow on its line). */
	.home-hero__show { justify-self: end; margin-block-start: .5rem; }
	.home-hero__progress { inline-size: 2.5rem; }
	.home-hero__play { background-color: rgb(15 36 56 / 36%); }
	.home-hero__quick .chip-list { flex-wrap: wrap; gap: 0 1.5rem; }
}

/* Sections: one head pattern (eyebrow, 16 px, title, 24 px, lead), 64 px to the content. */
.home-section { max-inline-size: var(--rym-container-max); margin: var(--home-gap) auto 0; padding: 0 var(--rym-gutter); }
.home-section .section-head { align-items: flex-end; gap: 2rem 3rem; margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.home-head .section-head__text { display: grid; justify-items: start; }
.home-head .section-head__eyebrow { margin-block-end: 1rem; }
:is(.home-section .section-head__title, .home-experience__title, .home-network h2) { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); }
.home-head .section-head__lead { max-inline-size: 52ch; margin: 1.5rem 0 0; color: var(--rym-color-text-muted); font-size: .9375rem; }
.home-head .section-head__text > .section-head__link { margin-block-start: 1rem; }

/* Real numbers in the neighbourhoods head (Wow §2.3, W9a): three serif numerals on the end side, labels in tracked caps. */
.home-figures { display: flex; gap: clamp(1.5rem, .5rem + 2.5vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.home-figure { display: grid; gap: .5rem; }
.home-figure__number { font-family: var(--rym-font-display); font-size: clamp(2.5rem, 1.75rem + 1.6vw, 3.5rem); font-weight: var(--rym-font-weight-serif); font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.home-figure__label { color: var(--rym-color-text-muted); font-size: .75rem; font-weight: var(--rym-font-weight-medium); letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
:lang(ar) .home-figure__label { font-size: .8125rem; letter-spacing: 0; text-transform: none; }
@media (max-width: 47.99rem) {
	.home-figures { inline-size: 100%; justify-content: space-between; }
	.home-figure__label { max-inline-size: 9rem; font-size: .6875rem; }
}

/* Neighbourhoods bento: three make a tall feature tile and two smaller ones; other counts a plain grid. */
.neighborhood-grid--bento { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.neighborhood-grid--bento > * { min-block-size: 22rem; }
/* Copy rhythm (final fixes): one tile only had a sentence, so the trio shows names and counts only. */
.neighborhood-grid--trio .neighborhood-card__description { display: none; }
@media (min-width: 40rem) and (max-width: 63.99rem) {
	.neighborhood-grid--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.neighborhood-grid--trio > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
	.neighborhood-grid--trio { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.neighborhood-grid--trio > * { min-block-size: 19rem; }
	.neighborhood-grid--trio > :first-child { grid-row: span 2; }
	.neighborhood-grid--trio > :first-child .neighborhood-card__name { font-size: 3.5rem; }
}
/* Phones: the feature tile at 4:5, the two others side by side, square. */
@media (max-width: 39.99rem) {
	.neighborhood-grid--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.neighborhood-grid--trio > * { min-block-size: 0; aspect-ratio: 1; padding: 1rem; }
	.neighborhood-grid--trio > :first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; padding: 1.5rem; }
	.neighborhood-grid--trio .neighborhood-card__name { font-size: 1.75rem; }
	.neighborhood-grid--trio > :not(:first-child) .neighborhood-card__name { font-size: 1.375rem; }
	.neighborhood-grid--trio > :not(:first-child) .neighborhood-card__count { font-size: .8125rem; }
}

/* Featured listings: three wide cards from 64 rem, two below, a snapping rail on phones. */
.listing-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 1.5rem + 2vw, 3.5rem) 2rem; }
@media (min-width: 64rem) { .listing-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) {
	.listing-rail { grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); grid-template-columns: none; gap: var(--rym-space-4); margin-inline: calc(-1 * var(--rym-gutter)); padding: var(--rym-space-3) var(--rym-gutter) var(--rym-space-4); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rym-gutter); scrollbar-width: none; }
	.listing-rail::-webkit-scrollbar { display: none; }
	.listing-rail > * { scroll-snap-align: start; }
}
/* The home card (W9a): a one-line title, one meta line, then who offers it and its facts. */
.home-featured .listing-card__title { -webkit-line-clamp: 1; line-clamp: 1; }
.home-featured :is(.listing-card__supplier, .listing-card__traits) { font-size: .875rem; }

/* How booking works: the title and the sticky photo at the start, three steps at the end; the current step shows its photo. */
.home-experience { position: relative; isolation: isolate; margin-block-start: calc(var(--home-gap) / 2); padding-block: var(--home-gap); background: var(--rym-gradient-sun); }
.home-experience a { color: var(--rym-color-link-on-warm); }
.home-experience__inner { display: grid; gap: var(--rym-space-7); }
.home-experience__title { max-inline-size: 12ch; margin: 0; }
.home-experience__photo { position: relative; margin-block-start: 3rem; overflow: hidden; border-radius: var(--rym-radius-photo); aspect-ratio: 4 / 5; background-color: var(--rym-color-surface-strong); }
.home-experience__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background-color: #f4e3c8; mix-blend-mode: multiply; opacity: .12; box-shadow: inset 0 0 0 1px rgb(15 36 56 / 6%); pointer-events: none; }
.home-experience__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms var(--rym-ease-out); }
.home-experience__frame.is-current { opacity: 1; }
.home-experience__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: saturate(.88) contrast(1.03); }
/* The night arch, quieter (W9a: no other light photo of an arrival in the theme set yet). */
.home-experience__frame:nth-child(3) img { filter: saturate(.62) contrast(.96) brightness(1.06); }
/* Below 64 rem the photo docks full width under the header and the steps pass beneath it (the title scrolls away). */
@media (max-width: 63.99rem) {
	.home-experience__aside { display: contents; }
	.home-experience__photo { position: sticky; z-index: 1; inset-block-start: 4.75rem; margin: 0 calc(-1 * var(--rym-gutter)); border-radius: 0; aspect-ratio: auto; block-size: clamp(13rem, 34svh, 22rem); }
}
@media (min-width: 64rem) {
	.home-experience__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: 2rem; }
	.home-experience__aside { position: sticky; inset-block-start: 7rem; grid-column: 1 / span 5; }
	.home-experience__photo { max-block-size: calc(100svh - 21rem); min-block-size: 22rem; aspect-ratio: 4 / 5; }
	.home-steps { grid-column: 7 / -1; }
}
.home-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.home-step { counter-increment: step; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.5rem, .5rem + 2.5vw, 3rem); padding-block: 3.5rem; border-block-start: 1px solid var(--rym-hairline); }
.home-step:last-child { border-block-end: 1px solid var(--rym-hairline); }
.home-step > * { grid-column: 2; }
.home-step::before { content: counter(step, decimal-leading-zero) / ""; grid-column: 1; grid-row: 1 / span 2; min-inline-size: 1.1em; font-family: var(--rym-font-display); font-size: 4.5rem; font-weight: var(--rym-font-weight-serif); font-variant-numeric: lining-nums tabular-nums; line-height: .9; transition: opacity 300ms var(--rym-ease-out); }
.home-experience.is-scrolly .home-step:not(.is-current)::before { opacity: .22; }
.home-step__title { margin: 0 0 .75rem; font-family: var(--rym-font-display); font-size: 2rem; font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: 1.15; text-wrap: balance; }
:lang(ar) .home-step__title { font-size: 1.625rem; line-height: 1.45; }
.home-step__text { max-inline-size: 44ch; margin: 0; color: var(--rym-color-text-muted); }
@media (max-width: 47.99rem) {
	.home-step { grid-template-columns: minmax(0, 1fr); padding-block: 2.5rem; }
	.home-step > *, .home-step::before { grid-column: 1; grid-row: auto; }
	.home-step::before { margin-block-end: 1rem; font-size: 3rem; }
	.home-step__title { font-size: 1.75rem; }
}

/* Rymotel Network (Wow §2.3): the text on an ink panel at the start, the photo in full colour at the end; it follows
   the sand band directly (W9a: no strip of cream between two bands). */
.home-network { position: relative; display: grid; background-color: var(--rym-color-ink); color: var(--rym-color-on-ink); }
.home-network__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.home-network__photo::after { content: ""; position: absolute; inset: 0; background-color: #f4e3c8; mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
.home-network__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.88) contrast(1.03); }
.home-network__inner { position: relative; isolation: isolate; display: grid; align-content: center; gap: 3rem; padding: var(--home-gap) var(--rym-gutter); }
.home-network__text { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1rem; max-inline-size: 30rem; }
.home-network__text > * { margin: 0; }
.home-network__eyebrow { color: var(--rym-color-on-ink-muted); }
.home-network h2 { color: inherit; }
.home-network__lead { max-inline-size: 34ch; color: var(--rym-color-on-ink-muted); font-size: 1.1875rem; line-height: 1.5; }
.home-network__cta { margin-block-start: 1rem; }
.home-services { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rym-color-ink-line); }
.home-service { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; padding-block: 1.5rem; border-block-end: 1px solid var(--rym-color-ink-line); }
.home-service > * { grid-column: 2; margin: 0; }
.home-service__icon { grid-column: 1; grid-row: 1 / span 2; padding-block-start: .125rem; color: var(--rym-color-on-ink-muted); }
.home-service__icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.home-service__title { font-family: var(--rym-font-body); font-size: 1.0625rem; font-weight: var(--rym-font-weight-medium); line-height: 1.4; }
.home-service__text { color: rgb(255 253 248 / 72%); font-size: .9375rem; line-height: 1.5; }
.home-network__label { display: flex; align-items: flex-start; gap: .75rem; max-inline-size: 46ch; margin: 0; color: var(--rym-color-on-ink-muted); font-size: .875rem; }
.home-network__label .icon { flex: none; margin-block-start: .15em; color: var(--rym-color-label-bg); }
@media (min-width: 64rem) {
	.home-network { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-network__photo { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-block-size: 44rem; }
	.home-network__inner { grid-column: 1; grid-row: 1; padding-inline: max(var(--rym-gutter), 100% - var(--rym-container-max) / 2 + var(--rym-gutter)) clamp(3rem, 1rem + 5vw, 7rem); }
	.home-network h2 { max-inline-size: 12ch; }
}
/* Wide screens: the three services in a row under the call to action. */
@media (min-width: 80rem) {
	.home-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block-start: 2rem; border-block-start: 1px solid var(--rym-color-ink-line); }
	.home-service { grid-template-columns: minmax(0, 1fr); align-content: start; gap: .5rem; padding-block: 0; border: 0; }
	.home-service > *, .home-service__icon { grid-column: 1; grid-row: auto; }
	.home-service__icon { margin-block-end: .5rem; }
}

/* Tactile grain on the sand and ink grounds (inline SVG noise, no request). */
:is(.home-experience, .home-network__inner)::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--rym-grain); opacity: .05; pointer-events: none; }

/* The page's closing statement (W9a; final fixes: centred on the middle 8 of the 12 columns): the first paragraph of
   the editorial content in the display face; the service status follows as a footnote (main.css). */
.home-editorial { padding-block-start: var(--home-gap); }
.home-editorial .entry { margin: 0 0 var(--home-gap); }
.home-editorial .entry__content { max-inline-size: calc((100% + 2rem) * 8 / 12 - 2rem); margin-inline: auto; text-align: center; }
.home-editorial .entry__content > * { margin-inline: auto; }
.home-editorial .entry__content > p:first-child { max-inline-size: 36ch; font-family: var(--rym-font-display); font-size: clamp(1.75rem, 1rem + 1.8vw, 2.5rem); font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: 1.2; text-wrap: balance; }
:lang(ar) .home-editorial .entry__content > p:first-child { line-height: 1.6; }
@media (max-width: 47.99rem) { .home-editorial .entry__content { max-inline-size: none; } }

/* Phones: the search dock (Wow §2.3), shown by home.js once the hero search is off screen. */
.home-dock { display: none; }
@media (max-width: 47.99rem) {
	/* Room under the last section for the dock. */
	.site-main--home:has(.home-dock:not([hidden])) { padding-block-end: 6rem; }
	.home-dock:not([hidden]) {
		position: fixed; z-index: var(--rym-z-booking-bar); inset-inline: 0; inset-block-end: calc(var(--rym-space-4) + env(safe-area-inset-bottom, 0px));
		display: inline-flex; align-items: center; gap: var(--rym-space-2); inline-size: max-content; max-inline-size: calc(100% - 2 * var(--rym-gutter)); min-block-size: 3.25rem; margin-inline: auto; padding-inline: var(--rym-space-5);
		border: 1px solid var(--rym-hairline); border-radius: var(--rym-radius-pill); background-color: var(--rym-glass-solid); box-shadow: var(--rym-shadow-4);
		color: var(--rym-color-text); font: inherit; font-weight: var(--rym-font-weight-medium); cursor: pointer;
		opacity: 0; transform: translateY(1rem); visibility: hidden;
		transition: opacity var(--rym-dur-2) var(--rym-ease-out), transform var(--rym-dur-2) var(--rym-ease-out), visibility 0s linear var(--rym-dur-2);
	}
	.home-dock.is-shown { opacity: 1; transform: none; visibility: visible; transition: opacity var(--rym-dur-2) var(--rym-ease-out), transform var(--rym-dur-2) var(--rym-ease-out); }
	.home-dock:active { transform: scale(.97); }
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .home-dock:not([hidden]) { background-color: var(--rym-glass); -webkit-backdrop-filter: var(--rym-glass-blur); backdrop-filter: var(--rym-glass-blur); } }
}