/* ============================================================
   Bhutan Trekking Services — HOMEPAGE FUSION LAYER
   ------------------------------------------------------------
   The existing identity (paper / pine / saffron, Bricolage
   Grotesque + Inter + Space Mono) restructured with the spatial
   grammar of zoox.com: full-bleed rounded panels, pill controls,
   wide air, alternating light/deep blocks, a horizontal lineup
   rail, and display type set quiet and large rather than heavy.

   Signature: the trek rail is a bar chart made of photographs —
   panel height is real max altitude, so the row of altitude
   labels traces the ridgeline from Bumdra to the Snowman.

   Everything here is scoped to body.hz-home. No other page of
   the site is affected by this file.
   ============================================================ */

body.hz-home {
    /* Zoox-scale geometry, Bhutan colour.
       Radii and easing are taken straight off zoox.com: 3.6rem on the large
       panels, 1.8rem on thumbnails, and one hard-decelerate curve used for
       everything — motion arrives fast and settles rather than easing in. */
    --hz-r:        36px;   /* large media panels */
    --hz-r-sm:     18px;   /* rail thumbnails    */
    --hz-r-open:   68px;   /* panel radius mid-reveal, before it relaxes */
    --hz-ease:     cubic-bezier(.2, 0, 0, 1);
    --hz-edge:     clamp(18px, 3.2vw, 44px);
    --hz-max:      1320px;
    --hz-gutter:   max(var(--hz-edge), calc((100vw - var(--hz-max)) / 2 + var(--hz-edge)));
    --hz-pad:      clamp(86px, 10vw, 158px);

    /* altitude bar chart: panel height = min + normalised altitude * range */
    --hz-bar-min:   clamp(216px, 25vw, 292px);
    --hz-bar-range: clamp(56px, 9vw, 148px);

    background: var(--paper);
}

body.hz-home .hz-wrap {
    max-width: var(--hz-max);
    margin: 0 auto;
    padding: 0 var(--hz-edge);
}

/* ---------- type scale ----------
   Zoox ships two optical cuts of GT Standard — a large one for display and a
   small one for text. Bricolage Grotesque is variable on the same axis
   (opsz 12–96) and is already loaded that way, so we can do the real thing
   rather than approximate it: display sizes take the 96 cut, where the
   counters tighten and the joins thin out; anything at reading size takes a
   small cut, which opens back up and stays legible. */
body.hz-home .hz-display {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wght" 500, "opsz" 96;
    letter-spacing: -.035em;
    line-height: .96;
    color: var(--ink);
}
body.hz-home .hz-h1 { font-size: clamp(2.85rem, 7.2vw, 6.4rem); }
body.hz-home .hz-h2 { font-size: clamp(2.05rem, 4.4vw, 3.7rem); }
body.hz-home .hz-h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-variation-settings: "wght" 600, "opsz" 22;
    font-size: clamp(1.16rem, 1.5vw, 1.34rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--ink);
}
body.hz-home .hz-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
body.hz-home .hz-label--light { color: rgba(255, 255, 255, .62); }
body.hz-home .hz-label--accent { color: var(--saffron-2); }
body.hz-home .hz-lead {
    font-size: clamp(1.02rem, 1.2vw, 1.16rem);
    line-height: 1.62;
    color: var(--ink-soft);
}
body.hz-home .hz-body { font-size: 1rem; line-height: 1.68; color: var(--ink-soft); }
body.hz-home .hz-on-dark { color: rgba(255, 255, 255, .72); }
body.hz-home .hz-on-dark .hz-display,
body.hz-home .hz-on-dark .hz-h3 { color: #fff; }

/* ---------- pill controls ---------- */
body.hz-home .hz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 27px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .93rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s var(--hz-ease), border-color .25s var(--hz-ease),
                color .25s var(--hz-ease), transform .25s var(--hz-ease);
}
body.hz-home .hz-btn i { font-size: .82em; transition: transform .3s var(--hz-ease); }
body.hz-home .hz-btn:hover i { transform: translateX(4px); }
body.hz-home .hz-btn--accent { background: var(--saffron); color: var(--pine-deep); }
body.hz-home .hz-btn--accent:hover { background: var(--saffron-2); transform: translateY(-2px); }
body.hz-home .hz-btn--line { border-color: var(--stone-line); color: var(--ink); }
body.hz-home .hz-btn--line:hover { border-color: var(--pine); color: var(--pine); }
body.hz-home .hz-btn--light {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(8px);
}
body.hz-home .hz-btn--light:hover { background: #fff; border-color: #fff; color: var(--pine-deep); }

body.hz-home .hz-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: .93rem;
    color: var(--pine);
}
body.hz-home .hz-link i { font-size: .8em; transition: transform .3s var(--hz-ease); }
body.hz-home .hz-link:hover i { transform: translateX(4px); }
body.hz-home .hz-link--light { color: var(--saffron); }

/* ============================================================
   CLIP REVEAL — the zoox.com signature, borrowed literally
   ------------------------------------------------------------
   Their large media panels don't fade in; they open. The panel
   starts inset with an exaggerated corner radius and expands to
   full bleed as the radius relaxes to the panel's resting value,
   while the photograph inside settles out of a slight overscale.
   On a Himalayan landscape it reads as a valley widening — which
   is why it is worth stealing here and not just a tic.

   Reserved for the three full-width panels. Putting it on the
   card grids as well would turn a signature into a mannerism.

   The horizontal travel is kept well short of the vertical: two of
   these panels carry copy that starts one padding-width in, and at
   a 7% side inset the clip edge cuts through the first character.
   ============================================================ */
body.hz-home .hz-clip {
    clip-path: inset(7% 3.5% 7% 3.5% round var(--hz-r-open));
    transition: clip-path 1.15s var(--hz-ease);
    will-change: clip-path;
}
body.hz-home .hz-clip.in {
    clip-path: inset(0% 0% 0% 0% round var(--hz-r));
}
body.hz-home .hz-clip > img,
body.hz-home .hz-clip > picture > img {
    transform: scale(1.09);
    transition: transform 1.5s var(--hz-ease);
}
body.hz-home .hz-clip.in > img,
body.hz-home .hz-clip.in > picture > img { transform: none; }

/* ---------- header, homepage only ---------- */
body.hz-home .header-cta { border-radius: 999px; padding: 11px 22px; }
body.hz-home .site-header.scrolled {
    background: rgba(16, 38, 30, .78);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
body.hz-home .dropdown { border-radius: 18px; }
body.hz-home .dropdown li a { border-radius: 11px; }

/* ============================================================
   HERO — full-bleed, quiet, one thesis line
   ============================================================ */
body.hz-home .hz-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
}
body.hz-home .hz-hero .hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    animation: hz-drift 24s ease-out infinite alternate;
}
body.hz-home .hz-hero .hero-media::after {
    background:
        linear-gradient(180deg, rgba(16, 38, 30, .5) 0%, rgba(16, 38, 30, .1) 34%,
                                rgba(16, 38, 30, .52) 74%, rgba(16, 38, 30, .88) 100%);
}
@keyframes hz-drift { from { transform: scale(1.02); } to { transform: scale(1.11); } }

body.hz-home .hz-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 180px;
    padding-bottom: clamp(52px, 8vh, 92px);
}
/* Page-load sequence: the three blocks arrive in reading order on the same
   decelerate curve, close enough together to read as one movement. */
body.hz-home .hz-hero-inner > * {
    opacity: 0;
    transform: translateY(30px);
    animation: hz-rise .9s var(--hz-ease) forwards;
}
body.hz-home .hz-hero-inner > :nth-child(1) { animation-delay: .15s; }
body.hz-home .hz-hero-inner > :nth-child(2) { animation-delay: .27s; }
body.hz-home .hz-hero-inner > :nth-child(3) { animation-delay: .45s; }
@keyframes hz-rise { to { opacity: 1; transform: none; } }

body.hz-home .hz-hero h1 {
    color: #fff;
    margin-top: 22px;
    max-width: 14ch;
    text-wrap: balance;
}
body.hz-home .hz-hero-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 60px);
    flex-wrap: wrap;
    margin-top: clamp(38px, 5vw, 62px);
    padding-top: clamp(24px, 2.6vw, 34px);
    border-top: 1px solid rgba(255, 255, 255, .24);
}
body.hz-home .hz-hero-foot p {
    max-width: 42ch;
    font-size: clamp(1rem, 1.15vw, 1.14rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}
body.hz-home .hz-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* The "Scroll" cue that used to live here has been removed. It was pinned to
   the hero's bottom-right on the same baseline as the second hero button and
   overlapped it at every width above 860px. Zoox doesn't use one either — the
   fact band showing above the fold does the same job honestly. */

/* ============================================================
   FACT BAND — hairline row directly under the hero
   ============================================================ */
body.hz-home .hz-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--stone-line);
}
body.hz-home .hz-fact {
    padding: clamp(26px, 3.2vw, 44px) 0 clamp(26px, 3.2vw, 44px) clamp(16px, 2vw, 28px);
    border-left: 1px solid var(--stone-line);
}
body.hz-home .hz-fact:first-child { border-left: 0; padding-left: 0; }
body.hz-home .hz-fact .n {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wght" 500, "opsz" 96;
    font-size: clamp(1.75rem, 3.1vw, 2.8rem);
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--ink);
}
body.hz-home .hz-fact .k { margin-top: 12px; }

/* ============================================================
   STATEMENT
   ============================================================ */
body.hz-home .hz-statement { padding: var(--hz-pad) 0; }
body.hz-home .hz-statement-grid {
    display: grid;
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
    gap: clamp(22px, 5vw, 76px);
    align-items: start;
}
body.hz-home .hz-statement-grid > .hz-label { padding-top: .7em; }
body.hz-home .hz-statement h2 { max-width: 24ch; text-wrap: balance; }
body.hz-home .hz-statement-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3.4vw, 52px);
    margin-top: clamp(34px, 4vw, 58px);
    max-width: 900px;
}
body.hz-home .hz-statement-cols .hz-link { margin-top: 20px; }

/* ============================================================
   TREK RAIL — altitude bar chart made of photographs
   ============================================================ */
body.hz-home .hz-rail-sec {
    background: var(--pine-deep);
    padding: var(--hz-pad) 0 clamp(64px, 7vw, 104px);
    overflow: hidden;
}
body.hz-home .hz-rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
body.hz-home .hz-rail-head h2 { max-width: 17ch; margin-top: 20px; }
body.hz-home .hz-rail-head p { max-width: 34ch; margin-top: 16px; color: rgba(255, 255, 255, .66); font-size: .98rem; }
body.hz-home .hz-rail-nav { display: flex; gap: 10px; align-items: center; }
body.hz-home .hz-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .28);
    background: none;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .25s var(--hz-ease), border-color .25s var(--hz-ease), opacity .25s;
}
body.hz-home .hz-arrow:hover { background: var(--saffron); border-color: var(--saffron); color: var(--pine-deep); }
body.hz-home .hz-arrow[disabled] { opacity: .3; pointer-events: none; }

body.hz-home .hz-rail {
    display: flex;
    /* flex-start, not flex-end. The bar below is a fixed-height track for every
       trek, so aligning the tops puts every photograph's bottom edge on one
       baseline — which is the whole premise of reading these as bars. Aligning
       the bottoms instead lines up the cards, and any trek whose title or
       tagline wraps to an extra line then lifts its photograph off the
       baseline by that line's height. */
    align-items: flex-start;
    gap: clamp(14px, 1.5vw, 22px);
    margin-top: clamp(44px, 5vw, 72px);
    padding: 0 var(--hz-gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
body.hz-home .hz-rail::-webkit-scrollbar { display: none; }

body.hz-home .hz-trek {
    flex: 0 0 clamp(230px, 24vw, 300px);
    scroll-snap-align: start;
}
/* --alt is the trek's altitude normalised 0–1; it drives panel height.

   The bar draws itself in when the rail is reached: every panel starts flat at
   the minimum and rises to its own altitude, left to right, so the ridgeline
   is built in front of you rather than arriving finished.

   It grows by shedding padding, not by growing its own height. The track is
   always the full --hz-bar-min + --hz-bar-range tall and the photograph is
   pushed down inside it; animating the height directly would grow the rail
   itself and shove everything below it down the page for the length of the
   animation. --hz-grow is the 0→1 switch, held on the rail. */
body.hz-home .hz-trek-bar {
    display: flex;
    flex-direction: column;
    height: calc(var(--hz-bar-min) + var(--hz-bar-range));
    padding-top: calc((1 - var(--alt) * var(--hz-grow, 1)) * var(--hz-bar-range));
    /* Longhands, not the shorthand: a shorthand carrying a var() becomes a
       pending-substitution value, and the later transition-delay then can't be
       reasoned about from the CSSOM. */
    transition-property: padding-top;
    transition-duration: 1.05s;
    transition-timing-function: var(--hz-ease);
    transition-delay: calc(var(--i, 0) * 65ms);
}
body.hz-home .hz-rail.is-armed { --hz-grow: 0; }
body.hz-home .hz-rail.is-armed.is-drawn { --hz-grow: 1; }
/* Arming happens after first layout, so the drop to the flat state would
   itself animate — the bars would sink and then climb back. This lets the
   script apply the starting state without a transition. */
body.hz-home .hz-rail.no-anim .hz-trek-bar { transition-property: none; }
body.hz-home .hz-trek-alt {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--saffron);
    padding-bottom: 10px;
}
body.hz-home .hz-trek-media {
    position: relative;
    flex: 1;
    border-radius: var(--hz-r-sm);
    overflow: hidden;
    display: block;
    background: var(--pine-2);
}
body.hz-home .hz-trek-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--hz-ease);
}
body.hz-home .hz-trek:hover .hz-trek-media img { transform: scale(1.06); }
body.hz-home .hz-trek-grade {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(16, 38, 30, .62);
    backdrop-filter: blur(6px);
    padding: 6px 11px;
    border-radius: 999px;
}
body.hz-home .hz-trek-info {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
body.hz-home .hz-trek-info h3 { color: #fff; }
body.hz-home .hz-trek-info h3 a:hover { color: var(--saffron); }
body.hz-home .hz-trek-info p {
    margin-top: 9px;
    font-size: .88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .58);
}
body.hz-home .hz-trek-meta {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .48);
}
/* the baseline every trek stands on */
body.hz-home .hz-rail-base {
    height: 1px;
    background: rgba(255, 255, 255, .16);
    margin: 0 var(--hz-gutter);
}
body.hz-home .hz-rail-key {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* ============================================================
   FLOW — a real sequence, so it is numbered
   ============================================================ */
body.hz-home .hz-flow { padding: var(--hz-pad) 0; }
body.hz-home .hz-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
    margin-top: clamp(40px, 5vw, 70px);
}
body.hz-home .hz-flow-media {
    position: sticky;
    top: 108px;
    border-radius: var(--hz-r);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
/* Landscape photo in a 4:5 frame — a centre crop would cut the summit, so bias
   the crop right where the peak and the meltwater pools sit. */
body.hz-home .hz-flow-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
/* Pinned sequence. The photograph holds while the four steps travel past it,
   and the step currently level with it is marked — its rule and its number go
   saffron. Nothing is dimmed: this is body copy people are mid-way through
   reading, so the marking is additive rather than subtractive.
   The numbers earn their place here — this is the real booking order. */
body.hz-home .hz-steps li {
    padding: clamp(26px, 3vw, 40px) 0;
    border-top: 1px solid var(--stone-line);
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    transition: border-top-color .55s var(--hz-ease);
}
body.hz-home .hz-steps li:last-child { border-bottom: 1px solid var(--stone-line); }
body.hz-home .hz-steps li.is-active { border-top-color: var(--saffron); }
body.hz-home .hz-steps .n {
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ink-faint);
    padding-top: .35em;
    transition: color .45s var(--hz-ease);
}
body.hz-home .hz-steps li.is-active .n { color: var(--saffron-2); }
body.hz-home .hz-steps p { margin-top: 10px; font-size: .98rem; line-height: 1.62; color: var(--ink-soft); }

/* ============================================================
   BIG PANEL — full-width rounded media with overlaid caption
   ============================================================ */
body.hz-home .hz-panel-sec { padding: 0 0 var(--hz-pad); }
body.hz-home .hz-panel {
    position: relative;
    border-radius: var(--hz-r);
    overflow: hidden;
    min-height: clamp(430px, 64vh, 660px);
    display: flex;
    align-items: flex-end;
}
body.hz-home .hz-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.hz-home .hz-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg, rgba(16, 38, 30, .1) 30%, rgba(16, 38, 30, .86) 100%);
}
body.hz-home .hz-panel-body {
    position: relative;
    z-index: 2;
    padding: clamp(30px, 4vw, 62px);
    max-width: 680px;
    color: rgba(255, 255, 255, .82);
}
body.hz-home .hz-panel-body h2 { color: #fff; margin-top: 18px; }
body.hz-home .hz-panel-body p { margin-top: 18px; font-size: 1.04rem; line-height: 1.6; }
body.hz-home .hz-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 46px);
    margin-top: clamp(38px, 4vw, 60px);
}
body.hz-home .hz-point { padding-top: 22px; border-top: 1px solid var(--stone-line); }
body.hz-home .hz-point p { margin-top: 10px; font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }

/* ============================================================
   STATS — company counters, counted up on first sight
   ------------------------------------------------------------
   Deliberately unlike the fact band under the hero: that one is
   hairlines on paper and states trek numbers, this one is a deep
   block and states the company. Numerals are tabular so a figure
   does not jitter sideways while it counts.
   ============================================================ */
body.hz-home .hz-stats-sec {
    background: var(--pine-deep);
    padding: clamp(58px, 7vw, 100px) 0;
}
body.hz-home .hz-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(30px, 3.4vw, 48px);
}
body.hz-home .hz-stat {
    padding-left: clamp(16px, 2vw, 28px);
    border-left: 1px solid rgba(255, 255, 255, .17);
}
body.hz-home .hz-stat:first-child { border-left: 0; padding-left: 0; }
body.hz-home .hz-stat .n {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wght" 500, "opsz" 96;
    font-size: clamp(2.3rem, 4.4vw, 3.9rem);
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--saffron);
}
body.hz-home .hz-stat .hz-label { margin-top: 14px; }

/* ============================================================
   CREDENTIALS — the tourism licence and the two airlines
   ------------------------------------------------------------
   Both airline marks carry their own colour and one of them is
   drawn on white, so each sits on a white tile rather than
   straight on the paper. That reads as a logo board instead of
   an image that failed to cut out.
   ============================================================ */
body.hz-home .hz-cred {
    padding: clamp(40px, 5vw, 64px) 0;
    border-bottom: 1px solid var(--stone-line);
}
body.hz-home .hz-cred-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
body.hz-home .hz-cred-link {
    display: block;
    margin-top: 14px;
    color: var(--ink);
}
body.hz-home .hz-cred-link .hz-h3 { display: block; transition: color .25s var(--hz-ease); }
body.hz-home .hz-cred-link i { font-size: .62em; margin-left: 6px; vertical-align: middle; color: var(--ink-faint); }
body.hz-home .hz-cred-link:hover .hz-h3 { color: var(--pine); }
body.hz-home .hz-cred-link:hover i { color: var(--pine); }
body.hz-home .hz-cred-meta {
    display: block;
    margin-top: 7px;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
body.hz-home .hz-cred-logos {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: clamp(12px, 1.6vw, 20px);
    margin-top: 14px;
}
body.hz-home .hz-cred-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 14px 22px;
    background: #fff;
    border: 1px solid var(--stone-line);
    border-radius: var(--hz-r-sm);
    transition: border-color .25s var(--hz-ease), transform .25s var(--hz-ease);
}
body.hz-home .hz-cred-logo:hover { border-color: var(--pine); transform: translateY(-2px); }
body.hz-home .hz-cred-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    /* Both marks are wordmarks, so they are matched on the height of their
       letters rather than on overall box height: Drukair sets two lines in the
       same space Bhutan Airlines sets one. */
    max-height: 34px;
}
body.hz-home .hz-cred-logo:nth-child(2) img { max-height: 20px; }

/* ============================================================
   NOT-A-TREK — cultural tours
   ============================================================ */
body.hz-home .hz-alt-sec { background: var(--paper-2); padding: var(--hz-pad) 0; }
body.hz-home .hz-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
body.hz-home .hz-head-row h2 { max-width: 18ch; margin-top: 20px; }
body.hz-home .hz-head-row p { max-width: 40ch; margin-top: 16px; }

body.hz-home .hz-tours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    margin-top: clamp(40px, 4.6vw, 64px);
}
body.hz-home .hz-tour-media {
    display: block;
    border-radius: var(--hz-r-sm);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
body.hz-home .hz-tour-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hz-ease); }
body.hz-home .hz-tour:hover .hz-tour-media img { transform: scale(1.06); }
body.hz-home .hz-tour h3 { margin-top: 18px; }
body.hz-home .hz-tour h3 a:hover { color: var(--pine); }
body.hz-home .hz-tour .hz-label { margin-top: 10px; }

body.hz-home .hz-alt-foot { margin-top: clamp(28px, 3vw, 40px); display: flex; gap: 26px; flex-wrap: wrap; }

/* ============================================================
   VOICES — hairlines, no card chrome
   ============================================================ */
body.hz-home .hz-voices { padding: var(--hz-pad) 0; }
body.hz-home .hz-voice-lead {
    max-width: 26ch;
    margin-top: clamp(30px, 3.4vw, 48px);
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "wght" 500, "opsz" 72;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -.03em;
    line-height: 1.16;
    color: var(--ink);
}
body.hz-home .hz-voice-who {
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
body.hz-home .hz-voice-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
    margin-top: clamp(48px, 6vw, 84px);
    max-width: 940px;
    margin-left: auto;
}
body.hz-home .hz-voice { padding-top: 24px; border-top: 1px solid var(--stone-line); }
body.hz-home .hz-voice p { font-size: 1rem; line-height: 1.66; color: var(--ink-soft); }
body.hz-home .hz-voice .hz-voice-who { margin-top: 18px; }

/* ============================================================
   CLOSING PANEL
   ============================================================ */
body.hz-home .hz-close { padding: 0 0 clamp(70px, 8vw, 120px); }
body.hz-home .hz-close-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--hz-r);
    background: var(--pine-deep);
    padding: clamp(56px, 8vw, 118px) clamp(28px, 5vw, 80px);
    text-align: center;
    color: rgba(255, 255, 255, .88);
}
body.hz-home .hz-close-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Both panels lay their photo behind the copy and are flex containers, so the
   wrapper is pinned rather than left in flow beside the text column. */
body.hz-home .hz-panel > picture,
body.hz-home .hz-close-panel > picture {
    position: absolute;
    inset: 0;
}
body.hz-home .hz-panel > picture > img,
body.hz-home .hz-close-panel > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The photo carries this panel, so it runs at full opacity and the scrim does
   all the contrast work. Kept dense enough that white text clears 4.5:1 even
   over the brightest cloud in the frame. */
body.hz-home .hz-close-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 38, 30, .62), rgba(16, 38, 30, .8));
}
body.hz-home .hz-close-inner { position: relative; z-index: 2; }
body.hz-home .hz-close-inner h2 { color: #fff; margin-top: 20px; max-width: 16ch; margin-inline: auto; }
body.hz-home .hz-close-inner p {
    margin: 20px auto 0;
    max-width: 52ch;
    font-size: 1.05rem;
    line-height: 1.6;
}
body.hz-home .hz-close-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(30px, 3.4vw, 44px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    body.hz-home .hz-tours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.hz-home .hz-flow-grid { grid-template-columns: minmax(0, 1fr); }
    body.hz-home .hz-flow-media { position: static; aspect-ratio: 16 / 10; }
    body.hz-home .hz-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
    body.hz-home .hz-point { padding: 20px 0; }
    body.hz-home .hz-point:last-child { border-bottom: 1px solid var(--stone-line); }
}
@media (max-width: 860px) {
    body.hz-home { --hz-bar-range: clamp(34px, 6vw, 70px); }
    body.hz-home .hz-statement-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    body.hz-home .hz-statement-grid > .hz-label { padding-top: 0; }
    body.hz-home .hz-statement-cols { grid-template-columns: minmax(0, 1fr); }
    body.hz-home .hz-facts { grid-template-columns: repeat(2, 1fr); }
    body.hz-home .hz-fact:nth-child(3) { border-left: 0; padding-left: 0; }
    body.hz-home .hz-fact:nth-child(-n+2) { border-bottom: 1px solid var(--stone-line); }
    body.hz-home .hz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(26px, 5vw, 40px); }
    body.hz-home .hz-stat:nth-child(3) { border-left: 0; padding-left: 0; }
    body.hz-home .hz-cred-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    body.hz-home .hz-rail-nav { display: none; }
    body.hz-home .hz-voice-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    body.hz-home .hz-voice { padding: 24px 0; }
    body.hz-home .hz-voice:last-child { border-bottom: 1px solid var(--stone-line); }
}
@media (max-width: 860px) {
    /* A narrow panel can't afford an 8% inset — it reads as a mistake rather
       than an opening. Shrink the travel and the mid-reveal radius with it. */
    body.hz-home .hz-clip { clip-path: inset(4% 3% 4% 3% round 34px); }
}
@media (max-width: 640px) {
    body.hz-home { --hz-r: 22px; --hz-r-sm: 14px; --hz-bar-range: 30px; }
    body.hz-home .hz-hero-inner { padding-top: 150px; }
    body.hz-home .hz-hero h1 { max-width: 100%; }
    body.hz-home .hz-hero-actions { width: 100%; }
    body.hz-home .hz-hero-actions .hz-btn { flex: 1; }
    body.hz-home .hz-tours { grid-template-columns: minmax(0, 1fr); }
    body.hz-home .hz-tour-media { aspect-ratio: 4 / 3; }
    body.hz-home .hz-steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    body.hz-home .hz-steps .n { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.hz-home .hz-hero .hero-media img { animation: none; transform: none; }
    body.hz-home .hz-rail { scroll-behavior: auto; }

    /* Everything added for the zoox pass resolves to its finished state. */
    body.hz-home .hz-hero-inner > * { animation: none; opacity: 1; transform: none; }
    body.hz-home .hz-clip,
    body.hz-home .hz-clip.in { clip-path: none; transition: none; }
    body.hz-home .hz-clip > img,
    body.hz-home .hz-clip.in > img,
    body.hz-home .hz-clip > picture > img,
    body.hz-home .hz-clip.in > picture > img { transform: none; transition: none; }
    body.hz-home .hz-trek-bar { transition: none; }
}