/* ==========================================================================
   Page: home  (site/home/index.blade.php + site/home/sections/*)
   --------------------------------------------------------------------------
   1. Hero        the «نوافذ» slider: one window morphing pill → ring → arch per path; first screen
   2. Numbers     each number in the و ring; rings draw + numbers count up
   3. Services    three arch windows (the س) with hairline service rows; swipe on phones
   4. Slogan      full-bleed sky, slogan in the thin display face
   5. Measures    groups (Measures module) as pill lists + و ring window
   6. Booking     the file: step sheets rising + sealed envelope (on aqua)
   7. Branches    hairline branch cards + tall pill window
   8. Partners    drifting partner logos (Partners module)
   Photo windows: components/window.css · motion: js/modules/reveal.js.
   ========================================================================== */

/* ── 1. Hero — the «نوافذ» slider ─────────────────────────────────────────
   One window morphs between the logo's letters per slide (data-shape on the
   section: pill م · circle و · arch س); --hero-accent follows data-accent.
   js/modules/hero-slider.js moves .is-active / .is-leaving between slides
   and photos, and adds .is-ready once the intro has played (the entrance).
   The bar of each tab is the timer: its CSS animation ending advances the
   slide, so pausing the animation (hover, focus, pause button, off screen)
   pauses the slider. The stage never changes the page's layout — the frame
   is absolutely placed inside a fixed-ratio box. */
@property --hero-ring {
    syntax: "<color>";
    inherits: true;
    initial-value: #D87F95;
}

.home-hero {
    --hero-duration: 7s;
    --hero-accent: var(--rose);
    --hero-morph: 1.1s cubic-bezier(0.65, 0, 0.35, 1);
    overflow: hidden;
}
.home-hero[data-accent="aqua"]   { --hero-accent: var(--aqua); }
.home-hero[data-accent="peach"]  { --hero-accent: var(--peach); }
.home-hero[data-accent="sage"]   { --hero-accent: var(--sage); }
.home-hero[data-accent="rose"]   { --hero-accent: var(--rose); }
.home-hero[data-accent="indigo"] { --hero-accent: var(--indigo); }

.home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    padding-block: var(--space-8) var(--space-12);
}
.home-hero__copy { display: grid; justify-items: start; gap: var(--space-5); }

/* Slides share one grid cell, so the copy is always as tall as the longest */
.home-hero__slides { display: grid; width: 100%; }
.home-hero__slide {
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--space-5);
}
.home-hero__slide:not(.is-active, .is-leaving) { visibility: hidden; pointer-events: none; }

.home-hero__title { font-size: var(--fs-hero); line-height: 1.28; }
.home-hero__title span { display: block; }
/* each line rises out of its own mask (padding keeps Arabic marks unclipped) */
.home-hero__line { overflow: hidden; padding-block: 0.06em 0.18em; margin-block: -0.06em -0.18em; }
.home-hero__text { max-width: 34rem; color: var(--ink-soft); font-size: var(--fs-lg); }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-2); }
.home-hero__points { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.home-hero__points li { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Copy motion: in = eyebrow, line, line, text (staggered); out = up and away */
.home-hero__slide .home-hero__eyebrow,
.home-hero__slide .home-hero__text  { transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
.home-hero__slide .home-hero__line > span { transition: transform 1s var(--ease-out); }
.home-hero__slide.is-active .home-hero__line:nth-child(1) > span { transition-delay: 90ms; }
.home-hero__slide.is-active .home-hero__line:nth-child(2) > span { transition-delay: 190ms; }
.home-hero__slide.is-active .home-hero__text { transition-delay: 300ms; }

.home-hero__slide:not(.is-active) .home-hero__eyebrow,
.home-hero__slide:not(.is-active) .home-hero__text { opacity: 0; transform: translateY(14px); }
.home-hero__slide:not(.is-active) .home-hero__line > span { transform: translateY(108%); }
.home-hero__slide:not(.is-active, .is-leaving) * { transition: none !important; }   /* reset unseen */
.home-hero__slide.is-leaving .home-hero__eyebrow,
.home-hero__slide.is-leaving .home-hero__text { transform: translateY(-10px); transition-duration: 0.35s; }
.home-hero__slide.is-leaving .home-hero__line > span { transform: translateY(-108%); transition: transform 0.5s cubic-bezier(0.55, 0, 0.75, 0); }

/* ── The stage: a 6:5 box the window morphs inside ── */
.home-hero__visual { display: grid; justify-items: center; min-width: 0; }

.hero-stage {
    position: relative;
    isolation: isolate;
    width: calc(100% - 14 * var(--ring-gap));       /* room for the seven lines */
    margin: calc(7 * var(--ring-gap) + 3.25rem) calc(7 * var(--ring-gap)) calc(7 * var(--ring-gap) + var(--space-2));
    aspect-ratio: 6 / 5;
    contain: layout;
    touch-action: pan-y;
}

/* a soft disc of the slide's accent, bleeding past the lines */
.hero-stage__wash {
    position: absolute;
    z-index: -1;
    inset-inline-start: -12%;
    bottom: -14%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--hero-accent) 22%, var(--paper));
    transition: background-color var(--hero-morph), transform var(--hero-morph);
}
.home-hero[data-shape="circle"] .hero-stage__wash { transform: translate(-6%, -8%) scale(1.08); }
.home-hero[data-shape="arch"]   .hero-stage__wash { transform: translate(4%, -2%) scale(0.92); }
[dir="rtl"] .home-hero[data-shape="circle"] .hero-stage__wash { transform: translate(6%, -8%) scale(1.08); }
[dir="rtl"] .home-hero[data-shape="arch"]   .hero-stage__wash { transform: translate(-4%, -2%) scale(0.92); }

/* the window: sizes as % of the 6:5 stage, so each shape keeps its ratio */
.hero-stage__frame {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 68.57%;                                  /* pill 7:4 */
    transition: width var(--hero-morph), height var(--hero-morph);
}
.home-hero[data-shape="circle"] .hero-stage__frame { width: 71.67%; height: 86%; }   /* 1:1 */
.home-hero[data-shape="arch"]   .hero-stage__frame { width: 61.33%; height: 92%; }   /* 4:5 */

.hero-stage__photo {
    --ring-grow: 1;
    --hero-ring: var(--hero-accent);
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--panel);
    box-shadow: var(--hero-shadows);
    clip-path: inset(-120px round 999px);
    transform: translateZ(0);                        /* Safari: clip the photos to the curve */
    transition: border-radius var(--hero-morph), clip-path var(--hero-morph),
                --hero-ring var(--hero-morph), --ring-grow 1.6s var(--ease-out);
}
/* the arch's bottom is open: the lines stop at its flat edge */
.home-hero[data-shape="arch"] .hero-stage__photo {
    border-radius: 999px 999px 0 0;
    clip-path: inset(-120px -120px 0 -120px round 999px 999px 0 0);
}

.hero-stage__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    clip-path: circle(0% at 50% 50%);
}
/* the new photo opens like an iris over the old one, then drifts in slowly */
.hero-stage__img.is-active  { z-index: 2; clip-path: circle(75% at 50% 50%); transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1) 0.1s; }
.hero-stage__img.is-leaving { z-index: 1; clip-path: circle(75% at 50% 50%); }
.hero-stage__img.is-active,
.hero-stage__img.is-leaving { animation: hero-drift calc(var(--hero-duration) + 2s) linear both; }
@keyframes hero-drift { from { scale: 1.12; } to { scale: 1; } }

/* the و's lines leaving the pill towards the page's end (pill only) */
.hero-stage__tail {
    position: absolute;
    z-index: -1;
    top: 100%;
    inset-inline-start: 50%;
    width: 100vw;
    height: calc(7 * var(--ring-gap));
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--ring-gap) - var(--ring-stroke)),
        var(--ring-color) calc(var(--ring-gap) - var(--ring-stroke)) var(--ring-gap)
    );
    transform-origin: right center;
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
    pointer-events: none;
}
[dir="ltr"] .hero-stage__tail { transform-origin: left center; }
.home-hero:not([data-shape="pill"]) .hero-stage__tail { transform: scaleX(0); transition-delay: 0s; transition-duration: 0.4s; }

/* the logo's floating circle: over the pill's shoulder, over the apex otherwise */
.hero-stage__dot {
    position: absolute;
    top: calc(-7 * var(--ring-gap) - 46px);
    inset-inline-end: 22%;
    background: var(--paper);
    --dot-color: var(--hero-accent);
    transition: top var(--hero-morph), inset-inline-end var(--hero-morph), border-color var(--hero-morph),
                transform 0.7s var(--ease-spring) 1s, opacity 0.4s var(--ease-out) 1s;
}
.home-hero:not([data-shape="pill"]) .hero-stage__dot { top: calc(-7 * var(--ring-gap) - 50px); inset-inline-end: calc(50% - 17px); }

/* big thin counter at the top start corner */
.hero-stage__count {
    position: absolute;
    top: calc(-7 * var(--ring-gap) - 3rem);
    inset-inline-start: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-latin);
    color: var(--ink);
    direction: ltr;
}
.hero-stage__nums { display: grid; overflow: hidden; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); font-weight: 200; line-height: 1; }
.hero-stage__nums span { grid-area: 1 / 1; transform: translateY(105%); transition: transform 0.8s var(--ease-out); }
.hero-stage__nums span.is-active { transform: none; transition-delay: 0.25s; }
.hero-stage__nums span.is-leaving { transform: translateY(-105%); }
.hero-stage__total { color: var(--ink-faint); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.08em; }

/* ── Tabs (one per path) + pause ── */
.home-hero__controls {
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
    width: min(100%, 560px);
}
.home-hero__tabs { flex: 1; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-5); }
.home-hero__tab {
    position: relative;
    display: block;
    padding: var(--space-2) 0 var(--space-3);
    border: 0;
    background: none;
    color: var(--ink-faint);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease-out);
}
.home-hero__tab-label { display: flex; align-items: center; gap: var(--space-2); line-height: 1.5; }
.home-hero__tab .dot { transition: transform var(--dur) var(--ease-spring); }
.home-hero__tab:hover,
.home-hero__tab.is-current { color: var(--ink); }
.home-hero__tab.is-current .dot { transform: scale(1.3); }
/* track + fill: the fill is the slide timer */
.home-hero__tab::after,
.home-hero__progress {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
}
.home-hero__tab::after { background: var(--line); }
.home-hero__progress { z-index: 1; background: var(--ink); transform: scaleX(0); transform-origin: right center; }
[dir="ltr"] .home-hero__progress { transform-origin: left center; }
.home-hero__tab.is-current .home-hero__progress { animation: hero-progress var(--hero-duration) linear forwards; }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the timer stops while the visitor looks, reads, or asked it to */
.home-hero.is-paused .home-hero__progress,
.home-hero.is-waiting .home-hero__progress,
.home-hero.is-offscreen .home-hero__progress,
.home-hero.is-tab-hidden .home-hero__progress,
.home-hero:has(.hero-stage:hover, .home-hero__controls:hover, .home-hero__controls :focus-visible) .home-hero__progress { animation-play-state: paused; }
.home-hero.is-paused .hero-stage__img { animation-play-state: paused; }

.home-hero__pause {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.home-hero__pause:hover { border-color: var(--ink); }
.home-hero__pause:active { transform: scale(0.92); }
.home-hero__pause .icon { width: 1em; height: 1em; }
.home-hero__icon-play,
.home-hero.is-paused .home-hero__icon-pause { display: none; }
.home-hero.is-paused .home-hero__icon-play { display: block; }
.no-js .home-hero__controls { display: none; }

/* ── Entrance, once the intro has played (.is-ready) ── */
@media (prefers-reduced-motion: no-preference) {
    .js .home-hero:not(.is-ready) .hero-stage__photo { --ring-grow: 0; }
    .js .home-hero:not(.is-ready) .hero-stage__img.is-active { clip-path: circle(0% at 50% 50%); }
    .js .home-hero:not(.is-ready) .hero-stage__tail { transform: scaleX(0); }
    .js .home-hero:not(.is-ready) .hero-stage__dot { transform: translateY(-18px) scale(0.5); opacity: 0; }
    .js .home-hero:not(.is-ready) .hero-stage__wash { transform: scale(0.6); opacity: 0; }
    .js .home-hero:not(.is-ready) .hero-stage__nums span.is-active { transform: translateY(105%); }
    .js .home-hero:not(.is-ready) .home-hero__slide.is-active .home-hero__eyebrow,
    .js .home-hero:not(.is-ready) .home-hero__slide.is-active .home-hero__text { opacity: 0; transform: translateY(14px); }
    .js .home-hero:not(.is-ready) .home-hero__slide.is-active .home-hero__line > span { transform: translateY(108%); }
    .hero-stage__wash { transition: background-color var(--hero-morph), transform var(--hero-morph), opacity 1s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero *, .home-hero *::before, .home-hero *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ── 2. Numbers — each in the و ring ─────────────────────────────────────── */
.home-stats { padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); border-top: 1px solid var(--line); }
.home-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}
/* hairline divider between items, stopping short of the rings' height */
.home-stat + .home-stat::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    height: 44%;
    width: 1px;
    background: var(--line);
}
.home-stat__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(118px, 9vw + 40px, 150px);
    aspect-ratio: 1;
}
.home-stat__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.home-stat__arc {
    fill: none;
    stroke-width: 1.4;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.home-stat__arc--1 { stroke: var(--accent); stroke-width: 2.2; transition-delay: calc(var(--reveal-delay, 0ms) + 0ms); }
.home-stat__arc--2 { stroke: var(--line-strong); transition-delay: calc(var(--reveal-delay, 0ms) + 120ms); }
.home-stat__arc--3 { stroke: var(--line); transition-delay: calc(var(--reveal-delay, 0ms) + 240ms); }
@media (prefers-reduced-motion: no-preference) {
    .js .home-stat:not(.is-visible) .home-stat__arc { stroke-dashoffset: 1; }
}
.home-stat__number {
    position: relative;
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.1rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.home-stat__label { max-width: 11rem; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
.home-stat:hover .home-stat__arc--1 { stroke-width: 3; }

/* ── 3. Services — three arches ─────────────────────────────────────────── */
.home-services__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    margin-top: var(--space-12);
}
.home-services__group { display: flex; flex-direction: column; }
.home-services__window { width: min(100%, 300px); align-self: center; }
.home-services__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-3);
    font-size: var(--fs-xl);
    font-weight: 400;
}
.home-services__list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding-block: var(--space-2);
    border-top: 1px solid var(--line-strong);
    color: var(--ink);
    font-size: var(--fs-base);
    text-decoration: none;
    transition: color var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
}
.home-services__list li:last-child a { border-bottom: 1px solid var(--line-strong); }
.home-services__name { flex: 1; }
.home-services__thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent);
    transition: box-shadow var(--dur) var(--ease-out);
}
.home-services__thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-services__list a:hover .home-services__thumb { box-shadow: 0 0 0 2px var(--panel), 0 0 0 5px var(--accent); }
.home-services__list .icon { color: var(--panel-deep); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.home-services__list a:hover { color: var(--second-text); padding-inline-start: var(--space-2); }
.home-services__list a:hover .icon { color: var(--second-text); transform: translateX(-4px); }

/* ── 4. Slogan over the sky ──────────────────────────────────────────────── */
.home-slogan {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 70vh, 700px);
    color: var(--ink-deep);
    --pattern-band-h: 150px;
}
.home-slogan__sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center 70%;
    transition: transform 2.4s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
    .js .home-slogan:not(.is-visible) .home-slogan__sky { transform: scale(1.08); }
}
.home-slogan__inner { position: relative; z-index: 1; padding-block: var(--space-20) clamp(4rem, 3rem + 4vw, 7rem); }
.home-slogan__eyebrow { color: var(--ink-deep); }
.home-slogan__eyebrow::before { background: var(--ink-deep); }
.home-slogan__title {
    margin-top: var(--space-4);
    color: var(--ink-deep);
    font-weight: 200;
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
    line-height: 1.3;
}
.home-slogan__title span { display: block; }
.home-slogan__lines { display: grid; gap: var(--space-2); max-width: 44rem; margin-top: var(--space-6); font-size: var(--fs-lg); }

/* ── 5. Measures — groups of pills from the Measures module ─────────────── */
.home-measures__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.home-measures__aside { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
.home-measures__window { width: min(78%, 320px); margin-inline: auto; margin-top: var(--space-12); }

.home-measures__groups { display: grid; gap: var(--space-5); }
.mgroup {
    padding: var(--space-6);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    background: var(--card);
    border-top: 4px solid var(--accent);
}
.mgroup__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.mgroup__title { font-size: var(--fs-xl); font-weight: 400; }
.mgroup__count {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    margin-inline-start: auto;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.mgroup__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mpill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35em 1em 0.35em 0.4em;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--paper);
    font-size: var(--fs-sm);
    line-height: 1.5;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
[dir="rtl"] .mpill { padding: 0.35em 0.4em 0.35em 1em; }
.mpill:not(:has(.mpill__code)) { padding-inline: 1em; }
.mpill:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.mpill__code {
    padding: 0.2em 0.65em;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 28%, #fff);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
/* ── 6. Booking — the file ───────────────────────────────────────────────── */
.home-booking { --pattern-band-h: 130px; overflow: hidden; }
.home-booking__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    padding-bottom: var(--space-12);
}
.home-booking__copy { display: grid; justify-items: start; gap: var(--space-5); }
.home-booking__title { font-size: var(--fs-3xl); font-weight: 300; }
.home-booking__text { max-width: 34rem; font-size: var(--fs-lg); }

.home-booking__steps {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-2);
    padding: 0;
    list-style: none;
}
.home-booking__step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: clamp(88px, 8vw, 116px);
    height: calc(128px + var(--i) * 20px);
    padding: var(--space-4) var(--space-3);
    border-top: 8px solid var(--tab);
    border-radius: 4px 4px 0 0;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 18px 30px -24px rgb(0 0 0 / 0.5);
}
.home-booking__step-num { color: var(--ink-faint); font-size: 0.72rem; font-weight: 600; }
.home-booking__step-label { font-size: var(--fs-base); font-weight: 500; }
/* sheets rise into the file one after another */
@media (prefers-reduced-motion: no-preference) {
    .js .home-booking__step[data-reveal]:not(.is-visible) { transform: translateY(40px); }
}

.home-booking__envelope {
    position: relative;
    aspect-ratio: 520 / 300;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.55);
}
.home-booking__flap { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-booking__flap path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.home-booking__seal {
    position: absolute;
    top: 53%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--indigo);
    translate: -50% -50%;
    transition: scale 0.6s var(--ease-spring) calc(var(--reveal-delay, 0ms) + 500ms);
}
.home-booking__seal span { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
    .js .home-booking__envelope:not(.is-visible) .home-booking__seal { scale: 1.6; }
}
.home-booking__meta { position: absolute; inset-inline-start: 7%; bottom: 10%; display: grid; gap: var(--space-1); }
.home-booking__ref-label { color: var(--ink-faint); font-size: var(--fs-xs); }
.home-booking__ref { color: var(--ink); font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); font-weight: 500; letter-spacing: 0.08em; }
.home-booking__note { position: absolute; inset-inline-end: 7%; bottom: 10%; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-faint); font-size: var(--fs-xs); }

/* ── 7. Branches ─────────────────────────────────────────────────────────── */
.home-branches__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.home-branch {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.home-branch:hover { color: var(--ink); border-color: var(--ink); }
.home-branch__photo { display: block; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2); aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--panel); }
.home-branch__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.home-branch:hover .home-branch__photo img { scale: 1.06; }
.home-branch { overflow: hidden; }
.home-branch__head { display: flex; align-items: center; gap: var(--space-3); }
.home-branch__city { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 400; }
.home-branch__country { margin-inline-start: auto; color: var(--ink-faint); font-size: var(--fs-xs); }
.home-branch__address { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; }
.home-branch__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.home-branch__arrow { color: var(--panel-deep); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.home-branch:hover .home-branch__arrow { color: var(--ink); transform: translateX(-4px); }

/* ── 8. Partners — drifting logos ────────────────────────────────────────── */
.home-partners { padding-block: var(--space-16) var(--space-6); overflow: hidden; }
.home-partners__head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-8); }
.home-partners__title { flex-shrink: 0; font-size: var(--fs-2xl); }
.home-partners__rule { flex: 1; }
.home-partners__all { flex-shrink: 0; font-size: var(--fs-sm); }
.home-partners__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
}
.home-partners__track { display: flex; width: max-content; }
.home-partners__row { display: flex; flex-shrink: 0; align-items: center; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.home-partners__row li:last-child { margin-inline-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }   /* (ul[role=list] resets padding) */
.home-partners__row img {
    width: auto;
    height: 64px;
    max-width: 170px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.home-partners__row img:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .home-partners__track { animation: partners-drift 60s linear infinite; }
    .home-partners__viewport:hover .home-partners__track { animation-play-state: paused; }
}
@keyframes partners-drift { to { transform: translateX(50%); } }     /* RTL: logos run towards the right */
[dir="ltr"] .home-partners__track { animation-name: partners-drift-ltr; }
@keyframes partners-drift-ltr { to { transform: translateX(-50%); } }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
    .home-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-4) var(--space-10); }
    .home-hero__visual { order: -1; width: min(100%, 540px); justify-self: center; }
    .hero-stage { margin-top: calc(7 * var(--ring-gap) + 2.75rem); }
    .hero-stage__count { top: calc(-7 * var(--ring-gap) - 2.5rem); }
    .hero-stage__dot { --dot-size: 24px; top: calc(-7 * var(--ring-gap) - 34px); }
    .home-hero:not([data-shape="pill"]) .hero-stage__dot { top: calc(-7 * var(--ring-gap) - 36px); inset-inline-end: calc(50% - 12px); }
    .home-hero__controls { width: 100%; }
    .home-hero__tabs { gap: var(--space-3); }
    .home-hero__tab { font-size: var(--fs-xs); }

    .home-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-10); }
    .home-stat:nth-child(odd)::before { display: none; }
    .home-stat__ring { width: 120px; }

    /* Services: the three arches swipe sideways */
    .home-services__groups {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: var(--space-6);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-top: var(--space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .home-services__groups::-webkit-scrollbar { display: none; }
    .home-services__group { scroll-snap-align: start; }
    .home-services__window { width: min(100%, 250px); }

    .home-measures__grid { grid-template-columns: 1fr; }
    .home-measures__aside { position: static; }
    .home-measures__window { display: none; }
    .home-partners__row img { height: 48px; filter: none; opacity: 1; }
    .home-partners__all { display: none; }

    .home-booking__grid { grid-template-columns: 1fr; }
    .home-booking__steps { width: 100%; }
    .home-booking__step { flex: 1; width: auto; height: calc(96px + var(--i) * 14px); padding: var(--space-3) var(--space-2); }
    .home-booking__step-label { font-size: var(--fs-sm); }

    .home-branches__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .home-hero__actions { width: 100%; }
    .home-hero__actions .btn { flex: 1; }
    .mgroup { padding: var(--space-5) var(--space-4); }
    .home-branches__list { grid-template-columns: 1fr; }
    .home-booking__seal { width: 48px; height: 48px; }
    .home-booking__seal span { width: 20px; height: 20px; }
    .home-booking__note { display: none; }
}

/* Arch titles link to their path on the services page */
.home-services__title a { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.home-services__title a:hover { color: var(--second-text); }

/* Service finder teaser under the services heading */
.home-services__finder { margin-top: var(--space-6); }

/* ── Packages — compact cards (css/components/package-card.css) on the panel ── */
.home-packages { background: var(--panel); }
.home-packages__grid { margin-top: var(--space-8); padding-top: var(--space-3); }
@media (min-width: 900px) { .pkg-grid.home-packages__grid { grid-template-columns: repeat(3, 1fr); } }