/* v34 + v35 + v36 + v37. v34 (4 Oct 2026): fixes from the home page audit and Abdullah's choices, on top of the v33 build. */

/* Hero: the pause button sits beside the slide bars (it was on top of "Book a visit") */
.ph__dots[class]{align-items:center}
.ph__dots .ph__pause{position:relative;inset:auto;z-index:auto;pointer-events:auto;flex:none;margin-inline-end:.4rem}

/* The three cards stand only in the foot of the meadow, so the grass and flowers show above them */

/* "The story of our name" card: no purple on the Our name story (26 Sep ruling); burnt orange from the logo */
.spot__card--plum[class]{--band:#b5541c;--band-ink:#ffe1c7}

/* Welcome clip: the pause button back at the bottom left of the frame, above the plants */
.wb__archwrap>.wb__pause[class]{inset-inline-start:.9rem;inset-block-end:.9rem;z-index:3}


/* While a photo loads, a soft paper colour instead of a dark box */
.hs__frame[class],.hs__pic[class],.spot__photo[class],.roots__ph[class],.story__photo[class],.monte__photo[class],
.eyfs__photo[class],.name-card__photo[class],.hm__cell[class],.hr__photo[class],.hcol__photo[class],.hk__photo[class],
.trio__cell[class],.pb[class],.mo__frame[class]{background-color:#e7e1d4}


/* ---- v35 (5 Oct 2026): loading speed ---- */

/* ---- v36 (5 Oct 2026): the strategy chat's second pass ---- */

/* B2. Nothing waits to be shown. Content is visible by default; things only rise 14 px into place (400 ms)
   when 12% inside the screen. No fades from nothing, no photo wipes, words of headings there at once. */
html.sm-on [data-reveal]{transition:transform .4s cubic-bezier(.2,.7,.1,1)}
html.sm-on [data-reveal]:not(.is-in){opacity:1;transform:translateY(14px)}
html.sm-on [data-reveal] img{transition:transform .4s cubic-bezier(.2,.7,.1,1)}
html.sm-on [data-reveal]:not(.is-in) img{transform:scale(1.03)}
html.sm-on [data-inner] img{clip-path:none!important;transition:transform .4s cubic-bezier(.2,.7,.1,1)!important}
html.sm-on [data-inner]:not(.is-shown) img{clip-path:none!important}
html.sm-on [data-inner]:not(.is-shown){--is:calc(var(--is0,1.18) + .05)}
html.sm-on [data-words]:not(.is-in) .sm-w>span{transform:none}
html.sm-on [data-words][data-reveal]{transition:transform .4s cubic-bezier(.2,.7,.1,1)!important}
html.sm-on [data-words][data-reveal]:not(.is-in){transform:translateY(14px)!important}

/* B3. Header: solid the moment you scroll, with no fade (the old .3s fade let the menu sit over the meadow) */
html.js .site-header[data-header][class]{transition:none!important}
.site-header[data-header] .gnav__link[class]{transition:none}


/* C6. The snail button says what it does */
.pearl-progress__label{position:absolute;inset-inline-end:calc(100% + .55rem);top:50%;translate:0 -50%;white-space:nowrap;
  background:var(--c-white,#fff);color:var(--c-ink,#12372b);font-weight:700;font-size:.82rem;line-height:1;padding:.5rem .65rem;
  border-radius:6px;box-shadow:0 6px 16px -8px #0a1f1466,0 0 0 1px #12372b14;pointer-events:none}

/* C7. "What makes us special": the steps not in focus stay readable, in brand green (only the rule and photo change) */
html.js .hs__step[class]:not(.is-on){opacity:1}
html.js .hs__step[class]{transition:color .3s}
html.js .hs__step[class]:not(.is-on) :is(.hs__head,.hs__text,.hs__link){color:var(--c-heading,#2a7d3b)}

/* C8. Arabic and Urdu facts strip: the hours read right to left, in words */
html[dir=rtl] .wb__facts[data-astro-cid-rvpmk26q] li[data-astro-cid-rvpmk26q]:nth-child(3) b[data-astro-cid-rvpmk26q]{direction:rtl;text-align:start;font-size:var(--step-2);line-height:1.2}

/* ---- v37 (5 Oct 2026): the strategy chat's whole-site pass, and his card choice ---- */

/* Cards under the hero (his choice, look 3): three solid colour panels, the photo in an arch like the
   welcome video, the middle one raised a little. They sit below the hero now, not over its edge. */
.spot[class]{--spot-up:0px;padding-block-start:clamp(1.25rem,3vw,2.75rem)}
@media (width>=64rem){.spot__list[class]{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:normal}}
.spot__card--fern[class]{--band:#1f6b33}.spot__card--plum[class]{--band:#b5541c}.spot__card--lagoon[class]{--band:#0b6b66}
html.sm-on .spot [data-reveal]{transform:none!important}
html.sm-on .spot [data-inner] img{transform:none!important}
.spot__list[class]{gap:clamp(1rem,2vw,1.6rem);align-items:start}
@media (width>=64rem){.spot__card:nth-child(2){margin-top:-26px}}
.spot__link[class]{background:var(--band);color:#fff;border-radius:8px;padding:16px 16px 22px;box-shadow:0 26px 44px -28px #0a1f14bb}
.spot__photo[class]{order:1;aspect-ratio:4/3.5;border-radius:200px 200px 6px 6px/150px 150px 6px 6px;background:#0003;box-shadow:inset 0 0 0 3px #ffffff2e}
@media (width<64rem){.spot__photo[class]{aspect-ratio:4/3}}
.spot__band[class]{order:2;background:none;padding:16px 2px 6px}
.spot__icon[class]{border-color:#ffffff66}
.spot__title[class]{font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);color:#fff}
.spot__body[class]{order:3;padding:2px 2px 0;gap:.7rem}
.spot__text[class]{color:#fffdf5;opacity:.93}
.spot__more[class]{color:#fff;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px}

/* A1. A menu label with keyboard focus alone doesn't pop its drop-down open (Enter or a click does);
   hover still opens it with a mouse. A drop-down closed by a second click stays closed under the pointer. */
.gnav .gnav__item[data-gnav-item]:focus-within:not(.is-open):not(:hover)>.gnav__panel[class]{opacity:0;visibility:hidden;transform:translateY(-4px)}

/* A5. Book a visit: no stamp, so the heading doesn't keep room for it */
.book__soon[class] h2{padding-inline-end:0}