/* ==========================================================================
   Deep Waters — layout.css
   Header, footer, wrappers, sections, the slot device, and the two
   photographic treatments: the hero and the interior page banner.
   ========================================================================== */

/* ==========================================================================
   Wrappers
   ========================================================================== */

.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-inline-size: calc(var(--wrap-narrow) + var(--gutter) * 2);
}

/* ==========================================================================
   Sections
   Dark by default. .section--light is limestone, used for logistics — prices,
   what to bring, FAQ, forms — so the shift reads as "out of the water, back to
   arrangements".
   ========================================================================== */

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--light {
  background-color: var(--bg-light);
  color: var(--text-on-light);
}

/* The seam where charcoal meets limestone. Without it the two grounds butt
   together like two unrelated pages; with it the transition reads as an edge
   you crossed. */
.section--light::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background-image: linear-gradient(
    to bottom,
    rgb(7 9 11 / 45%),
    rgb(7 9 11 / 0%)
  );
  pointer-events: none;
}

.section--light a {
  color: var(--link-on-light);
}

.section--light a:hover {
  color: var(--ink-900);
}

.section--light .muted {
  color: var(--muted-on-light);
}

.section--tight {
  padding-block: var(--sp-7);
}

/* --- Section heads ------------------------------------------------------
   A tracked label, a large heading, and a standfirst that stops well short of
   the measure. The asymmetry is deliberate: full-width headings with
   full-width body text underneath is what makes a page look like a document
   rather than a designed thing. */

.section__head {
  margin-block-end: var(--sp-8);
  max-inline-size: 46rem;
}

.section__head > p {
  margin-block-start: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-inline-size: 52ch;
}

.section--light .section__head > p {
  color: var(--muted-on-light);
}

/* Eyebrow: the label, with a short rule leading into it */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--accent);
  margin-block-end: var(--sp-4);
}

.eyebrow::before {
  content: "";
  inline-size: var(--sp-6);
  block-size: 2px;
  background-color: currentColor;
  flex: 0 0 auto;
  opacity: 0.85;
}

.section--light .eyebrow {
  color: var(--river-500);
}

/* Centred variants (hero, CTA band) get a rule on both sides — with only the
   leading one the label sits visibly off-centre from the heading below it. */
.hero .eyebrow,
.cta-band .eyebrow {
  justify-content: center;
}

.hero .eyebrow::after,
.cta-band .eyebrow::after {
  content: "";
  inline-size: var(--sp-6);
  block-size: 2px;
  background-color: currentColor;
  flex: 0 0 auto;
  opacity: 0.85;
}

.hero .eyebrow::after {
  background-color: var(--river-300);
}

/* Once the label wraps, the flanking rules end up pinned to the screen edges
   with the text stranded between them. Below that point, drop the rules. */
@media (width < 34rem) {
  .hero .eyebrow::before,
  .hero .eyebrow::after,
  .cta-band .eyebrow::before,
  .cta-band .eyebrow::after {
    display: none;
  }
}

/* ==========================================================================
   The slot — vertical shaft of light
   Nevidio is "the unseen": from above, all you see is a seam of sky. The
   device is centred and vertical, so RTL needs no mirroring.
   ========================================================================== */

/* Used instead of an <hr> between sections. It now fades at both ends like a
   real shaft of light, and it no longer floats in a void — the surrounding
   space is tightened so it reads as a join, not as an empty screen. */
.slot-rule {
  inline-size: 2px;
  block-size: var(--sp-8);
  margin-inline: auto;
  margin-block: var(--sp-2);
  background-image: linear-gradient(
    to bottom,
    rgb(111 201 194 / 0%),
    rgb(111 201 194 / 85%) 45%,
    rgb(111 201 194 / 0%)
  );
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-reveal) var(--ease-out);
}

.slot-rule.is-in {
  transform: scaleY(1);
}

.no-js .slot-rule {
  transform: scaleY(1);
}

.slot-rule--short {
  block-size: var(--sp-7);
}

/* The hero closes with its own shaft (.hero::after), so the rule that follows
   it would be a second identical line a few pixels below the first. */
.hero + .slot-rule {
  display: none;
}

/* ==========================================================================
   Reveals
   Content rises and fades as it enters. reveal.js staggers siblings, so a
   section arrives as a sequence rather than as one block.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translate3d(0, var(--sp-5), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-in,
.no-js .reveal {
  opacity: 1;
  transform: none;
}

.reveal.is-in {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .slot-rule {
    transform: scaleY(1);
    transition: none;
  }
}

/* ==========================================================================
   Header
   Byte-identical markup on all 31 pages — it carries no per-page attribute.
   Whether it floats over photography is decided by the body (`has-hero`) or,
   on interior pages, by the presence of a banner.
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: var(--rock-950);
  border-block-end: var(--border) solid var(--hairline);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}

/* A scrim behind the bar whenever it sits over an image. This is what keeps
   the nav readable over bright sky without darkening the whole photograph. */
.site-header::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 220%;
  background-image: linear-gradient(
    to bottom,
    rgb(7 9 11 / 88%) 0%,
    rgb(7 9 11 / 55%) 45%,
    rgb(7 9 11 / 0%) 100%
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
  z-index: -1;
}

.has-banner .site-header {
  background-color: transparent;
  border-block-end-color: transparent;
}

.has-banner .site-header::before {
  opacity: 1;
}

/* Scrolled past the banner: the bar becomes a solid, slightly translucent
   plate. The blur is what makes it feel like glass over rock rather than a
   flat strip. */
.has-banner .site-header.is-stuck {
  background-color: rgb(10 14 16 / 88%);
  border-block-end-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}

@supports (backdrop-filter: blur(1px)) {
  .has-banner .site-header.is-stuck {
    background-color: rgb(10 14 16 / 72%);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.has-banner .site-header.is-stuck::before {
  opacity: 0;
}

/* Note on the no-JS case: `has-banner` is added by nav.js, so without JS none
   of the transparent-header rules above can match and the bar is simply solid
   from the start — which is the correct fallback, since the scroll state that
   would make it opaque again also depends on JS. */

/* An open mobile menu needs an opaque backdrop, painted by the header rather
   than the drawer: the drawer sits inside .wrap, so its own background would
   leave the page gutters showing the photograph. */
.site-header.is-menu-open,
.has-banner .site-header.is-menu-open {
  background-color: var(--rock-980);
  border-block-end-color: var(--hairline);
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  min-block-size: var(--header-h);
}

/* --- Logo ---------------------------------------------------------------- */

.logo {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  gap: var(--sp-3);
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
  margin-inline-end: auto;
}

.logo:hover {
  color: #fff;
}

.logo__mark {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease-out);
}

.logo:hover .logo__mark {
  transform: translateY(-2px);
}

.logo__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
}

/* --- Nav ----------------------------------------------------------------
   Uppercase and tracked. At this size it reads as signage rather than as a
   list of links, which is most of the difference in feel. */

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

.site-nav li + li {
  margin-block-start: 0;
}

.site-nav a {
  position: relative;
  display: block;
  color: var(--rock-200);
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding-block: var(--sp-3);
  transition: color var(--dur-fast) var(--ease);
}

/* The underline grows from the reading edge instead of blinking on */
.site-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--sp-3) - 4px);
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background-color: var(--river-300);
  transform: scaleX(0);
  /* Grows from the centre outward: direction-agnostic, so it needs no RTL
     counterpart the way a left-anchored origin would. */
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}

.site-nav a:hover {
  color: #fff;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: #fff;
}

.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background-color: var(--ember-500);
}

/* --- Header end cluster -------------------------------------------------- */

.header-end {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
}

/* --- Language switcher --------------------------------------------------
   Full-strength white, not muted grey: over photography a grey label drops
   below 4.5:1, and "HE" / "ME" are the first thing a non-English visitor looks
   for. The current locale is marked by the plate, not by contrast. */

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 3px;
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius);
}

.lang-switch a {
  color: #fff;
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 1px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.lang-switch a:hover {
  color: var(--river-200);
  background-color: rgb(255 255 255 / 8%);
}

.lang-switch a[aria-current="true"] {
  background-color: var(--river-700);
  color: #fff;
}

/* --- Hamburger ----------------------------------------------------------
   Hidden unless JS is running: without JS the nav stays open, so a button that
   toggles nothing must never appear. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  background: none;
  /* No box around it: the icon is the control. */
  border: 0;
  border-radius: var(--radius-btn);
  color: #fff;
  flex: 0 0 auto;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.nav-toggle:hover {
  color: var(--river-300);
  background-color: rgb(255 255 255 / 8%);
}

.nav-toggle svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* --- Mobile header ------------------------------------------------------ */

@media (width < 62rem) {
  .js .nav-toggle {
    display: flex;
  }

  /* The bar has to hold logo + Book + burger on one row on a phone. At the
     old sizes those three plus two 24px gaps came to 340px, which overflows a
     360px screen — and Samsung's default display zoom puts an S24 Ultra right
     in that range, which is why the burger dropped to a second line. Everything
     below buys that row enough width to survive 320px. */
  .header-bar {
    gap: var(--sp-3);
  }

  /* With JS the drawer is out of flow — absolute when open, display:none when
     closed — so the bar only ever holds three items and must not wrap. Without
     JS the drawer is in flow and still needs to wrap onto its own line. */
  .js .header-bar {
    flex-wrap: nowrap;
  }

  /* Last-resort safety valve: if a huge system font still overruns the row, the
     brand truncates rather than the burger wrapping away or falling off-screen. */
  .logo {
    min-inline-size: 0;
    flex-shrink: 1;
  }

  .logo__text {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn--sm {
    padding-inline: var(--sp-4);
  }

  .nav-toggle {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  /* Bar order on mobile: logo, Book, hamburger — then the drawer takes a full
     line of its own. Without the 100% basis the drawer stays in the bar's flex
     row and shoves the Book button off the side of the screen. DOM order is
     left alone so desktop needs no overrides. */
  .logo {
    order: 1;
  }

  .header-end {
    order: 2;
  }

  .nav-toggle {
    order: 3;
  }

  .header-drawer {
    order: 4;
    flex-basis: 100%;
  }

  .js .header-drawer {
    display: none;
  }

  /* The open menu is an overlay, not a row in the header.
     Previously it was a flex item with a 100% basis, so opening it grew the
     header and shoved the hero down the page — the whole layout jumped. Taking
     it out of flow keeps the bar exactly one row tall, so nothing behind it
     moves. It hangs off the bottom edge of the sticky header, spans the full
     width, and scrolls internally if it ever outgrows the viewport. */
  .js .header-drawer[data-open="true"] {
    display: block;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding-inline: var(--gutter);
    padding-block: var(--sp-4) var(--sp-7);
    background-color: var(--rock-980);
    border-block-start: var(--border) solid var(--hairline);
    box-shadow: var(--shadow-lg);
    max-block-size: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Generous touch targets, and each row reveals in sequence when the drawer
     opens so the menu feels built rather than dumped. */
  .site-nav a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    padding-block: var(--sp-4);
    border-block-end: var(--border) solid var(--hairline);
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a[aria-current="page"] {
    color: var(--river-300);
  }

  .js .header-drawer[data-open="true"] .site-nav li {
    animation: drawer-in var(--dur-slow) var(--ease-out) backwards;
  }

  .js .header-drawer[data-open="true"] .site-nav li:nth-child(1) { animation-delay: 30ms; }
  .js .header-drawer[data-open="true"] .site-nav li:nth-child(2) { animation-delay: 65ms; }
  .js .header-drawer[data-open="true"] .site-nav li:nth-child(3) { animation-delay: 100ms; }
  .js .header-drawer[data-open="true"] .site-nav li:nth-child(4) { animation-delay: 135ms; }
  .js .header-drawer[data-open="true"] .site-nav li:nth-child(5) { animation-delay: 170ms; }
  .js .header-drawer[data-open="true"] .site-nav li:nth-child(6) { animation-delay: 205ms; }

  .header-drawer .lang-switch {
    margin-block-start: var(--sp-6);
    align-self: start;
    display: inline-flex;
  }

  .no-js .header-drawer {
    padding-block-end: var(--sp-4);
  }
}

@media (width < 26rem) {
  .header-bar {
    gap: var(--sp-2);
  }

  .logo__text {
    font-size: 0.9375rem;
  }

  .btn--sm {
    padding-inline: var(--sp-3);
  }
}

@keyframes drawer-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .header-drawer[data-open="true"] .site-nav li {
    animation: none;
  }
}

@media (width >= 62rem) {
  .header-drawer {
    display: flex;
    align-items: center;
    gap: var(--sp-7);
  }
}

/* ==========================================================================
   Hero — cinematic, edge to edge
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: min(100svh, 54rem);
  padding-block: var(--sp-10) var(--sp-9);
  background-color: var(--rock-980);
  overflow: hidden;
  isolation: isolate;
}

/* The supplied photograph is only 900px wide, so stretching it across a
   1440px viewport is visibly soft — but black bars either side are worse. So a
   heavily blurred, darkened copy fills the full width underneath, and the
   sharp image sits centred on top with its edges feathered into it. Full
   bleed, no upscaling in the part you actually look at. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../img/hero/nevidio-slot-600.webp");
  background-size: cover;
  background-position: center 60%;
  filter: blur(54px) saturate(0.65) brightness(0.4);
  transform: scale(1.2);
}

.hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  inline-size: min(100%, 68rem);
  margin-inline: auto;
  z-index: -2;
  /* Set by reveal.js for a slow parallax drift */
  transform: translate3d(0, var(--parallax, 0), 0);
  will-change: transform;
}

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* The seam of sky is at the top of the frame and the walls darken downward.
     Biasing the crop low keeps the seam visible in the upper third while the
     H1 lands on dark limestone, which is what makes white type pass contrast.
     Do not raise this without re-checking. */
  object-position: center 62%;
  /* A touch more bite in the rock without going HDR-garish */
  filter: contrast(1.08) saturate(1.06);
}

@media (width >= 68rem) {
  .hero__media {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 13%,
      #000 87%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 13%,
      #000 87%,
      transparent 100%
    );
  }
}

/* Legibility scrim, and the vignette that makes it feel like being down in
   the slot looking up. Both gradients are symmetric, so RTL needs no
   mirroring. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      to bottom,
      rgb(7 9 11 / 62%) 0%,
      rgb(7 9 11 / 18%) 26%,
      rgb(7 9 11 / 58%) 56%,
      rgb(7 9 11 / 90%) 82%,
      var(--rock-980) 100%
    ),
    radial-gradient(
      130% 105% at 50% 34%,
      rgb(7 9 11 / 0%) 34%,
      rgb(7 9 11 / 58%) 76%,
      rgb(7 9 11 / 92%) 100%
    );
}

/* The cramped column inside the seam */
.hero__slot {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--slot-w, var(--wrap-slot));
  margin-inline: auto;
  padding-inline: var(--sp-5);
  text-align: center;
}

.hero__slot h1 {
  text-wrap: balance;
  /* Lifts the display type off busy rock without a boxy scrim */
  text-shadow: 0 2px 30px rgb(7 9 11 / 70%), 0 1px 3px rgb(7 9 11 / 55%);
}

/* Over photography the teal accent drops under 4.5:1, so the hero eyebrow
   goes white and lets the photo carry the colour. */
.hero .eyebrow {
  color: #fff;
}

.hero .eyebrow::before {
  background-color: var(--river-300);
}

.hero__lead {
  margin-block-start: var(--sp-5);
  margin-inline: auto;
  color: #fff;
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-inline-size: 34ch;
  text-shadow: 0 1px 16px rgb(7 9 11 / 80%);
}

/* The whole offer on one line — duration, group size, gear, price — the way
   the best small adventure sites do it. Replaces three paragraphs of prose. */
.hero__spec {
  margin-block-start: var(--sp-5);
  color: var(--river-200);
  text-shadow: 0 1px 12px rgb(7 9 11 / 85%);
  /* Looser tracking than a label, because this is a whole sentence of specs and
     at 0.17em it needed more width than the slot has. */
  letter-spacing: 0.09em;
  line-height: 1.7;
  max-inline-size: none;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

/* A thin shaft at the foot of the hero, with light travelling down it. The
   only animation on the page that loops, and it is 2px wide. */
.hero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 2px;
  block-size: var(--sp-8);
  background-color: rgb(111 201 194 / 22%);
  z-index: 1;
  background-image: linear-gradient(
    to bottom,
    rgb(111 201 194 / 0%) 0%,
    rgb(111 201 194 / 95%) 50%,
    rgb(111 201 194 / 0%) 100%
  );
  background-size: 100% 60%;
  background-repeat: no-repeat;
  animation: shaft 3.4s var(--ease-in-out) infinite;
}

@keyframes shaft {
  0% {
    background-position: 0 -60%;
  }

  60%,
  100% {
    background-position: 0 160%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
    background-image: none;
    background-color: rgb(111 201 194 / 45%);
  }

  .hero__media {
    transform: none;
  }
}

@media (width >= 48rem) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }

  .hero__slot {
    --slot-w: 36rem;
  }
}

@media (width >= 62rem) {
  .hero__slot {
    --slot-w: 48rem;
  }
}

/* ==========================================================================
   Interior page banner
   Every page except the four with a hero opens with its head block. It used to
   be text on flat charcoal, which is the single biggest reason the site felt
   like a document rather than an expedition. It is now a photographic banner —
   same markup, same content, same order.
   ========================================================================== */

main > .section--tight:first-child {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: min(72svh, 30rem);
  padding-block: var(--sp-8);
  background-color: var(--rock-980);
  background-image: url("../img/hero/canyon-banner.webp");
  background-size: cover;
  background-position: center 46%;
  overflow: hidden;
  isolation: isolate;
}

/* Scrim: heavy enough that the crumbs, the h1 and a three-line standfirst all
   sit comfortably above 4.5:1, while the wet rock still reads as wet rock. */
main > .section--tight:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      to bottom,
      rgb(7 9 11 / 72%) 0%,
      rgb(7 9 11 / 42%) 38%,
      rgb(7 9 11 / 72%) 72%,
      var(--rock-950) 100%
    ),
    radial-gradient(
      120% 130% at 50% 25%,
      rgb(7 9 11 / 0%) 0%,
      rgb(7 9 11 / 62%) 100%
    );
}

/* Only pull the banner up under the bar when the bar is actually transparent.
   `has-banner` is set by nav.js, so with JS off nothing tucks under a solid
   header and no content is ever hidden behind it. */
.has-banner .hero {
  margin-block-start: calc(var(--header-h) * -1);
}

.has-banner main > .section--tight:first-child {
  margin-block-start: calc(var(--header-h) * -1);
  padding-block-start: calc(var(--header-h) + var(--sp-8));
}

main > .section--tight:first-child .lead {
  color: #fff;
  text-shadow: 0 1px 14px rgb(7 9 11 / 75%);
}

main > .section--tight:first-child h1 {
  text-shadow: 0 2px 26px rgb(7 9 11 / 65%);
}

/* A banner immediately followed by the slot-rule left a large dead band. The
   rule now sits tight against the banner, and the section after it drops its
   own top padding, so the join reads as one move instead of three. */
main > .section--tight:first-child + .slot-rule {
  margin-block-start: calc(var(--sp-7) * -1);
  margin-block-end: 0;
  position: relative;
  z-index: 2;
}

main > .section--tight:first-child + .slot-rule + .section,
main > .section--tight:first-child + .section {
  padding-block-start: var(--sp-7);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rock-400);
  margin-block-end: var(--sp-5);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  list-style: none;
  padding-inline-start: 0;
}

.crumbs li {
  margin-block-start: 0;
}

.crumbs li + li::before {
  content: "/";
  color: var(--river-400);
  margin-inline-end: var(--sp-3);
}

.crumbs a {
  color: var(--rock-200);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--river-300);
  text-decoration: underline;
}

/* ==========================================================================
   Grids
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--sp-5);
}

/* Exactly two columns from tablet up, so the four safety cards read as a 2x2
   block rather than stretching into a single thin row on a wide screen. */
.grid--2 {
  grid-template-columns: 1fr;
}

@media (width >= 48rem) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--rock-980);
  border-block-start: var(--border) solid var(--hairline);
  /* The extra end padding keeps the floating WhatsApp button clear of footer
     text on short pages. */
  padding-block: var(--sp-9) var(--sp-9);
  font-size: var(--fs-small);
  color: var(--rock-400);
  position: relative;
}

/* A hairline of river light along the top edge */
.site-footer::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  block-size: 1px;
  background-image: linear-gradient(
    to right,
    rgb(111 201 194 / 0%),
    rgb(111 201 194 / 40%) 50%,
    rgb(111 201 194 / 0%)
  );
}

.footer-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (width >= 48rem) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-7);
  }
}

.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: #fff;
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-3);
  border-block-end: var(--border) solid var(--hairline);
}

.footer-brand h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  border-block-end: 0;
  padding-block-end: 0;
  margin-block-end: var(--sp-4);
}

.footer-brand p {
  max-inline-size: 36ch;
  line-height: 1.65;
}

.footer-col ul {
  list-style: none;
  padding-inline-start: 0;
}

.footer-col li + li {
  margin-block-start: var(--sp-3);
}

.footer-col a {
  color: var(--rock-200);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--river-300);
  text-decoration: underline;
}

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 2.5rem;
}

.footer-contact svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
  color: var(--river-400);
  transition: color var(--dur-fast) var(--ease);
}

.footer-contact a:hover svg {
  color: var(--river-300);
}

.footer-legal {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border) solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  align-items: baseline;
  justify-content: space-between;
}

.footer-legal p {
  max-inline-size: 62ch;
}

.footer-legal nav ul {
  display: flex;
  gap: var(--sp-5);
  list-style: none;
  padding-inline-start: 0;
}

.footer-legal li + li {
  margin-block-start: 0;
}

.footer-legal a {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Floating WhatsApp button
   Bottom inline-end on every page in every locale. For the Hebrew audience
   this is the primary conversion path, so it is never buried.
   ========================================================================== */

.wa-float {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 999px;
  background-color: var(--forest-700);
  border: var(--border) solid rgb(123 168 131 / 45%);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition:
    transform var(--dur) var(--ease-out),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.wa-float:hover {
  color: #fff;
  background-color: var(--forest-500);
  border-color: var(--forest-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.wa-float:active {
  transform: translateY(0);
}

.wa-float svg {
  inline-size: 1.625rem;
  block-size: 1.625rem;
  flex: 0 0 auto;
}

.wa-float__label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  padding-inline-end: var(--sp-2);
}

@media (width < 30rem) {
  .wa-float__label {
    display: none;
  }

  .wa-float {
    padding: var(--sp-3);
    inset-block-end: var(--sp-4);
    inset-inline-end: var(--sp-4);
  }
}


/* ==========================================================================
   Video band
   Three short looping clips, muted, no audio track at all. They are the
   argument for coming, so they get real space: a wide gutter between frames and
   breathing room above and below, rather than butting together.
   ========================================================================== */

.band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-inline: var(--gutter);
  padding-block: var(--sp-6) var(--sp-8);
  max-inline-size: var(--wrap);
  margin-inline: auto;
}

@media (width >= 48rem) {
  .band {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    padding-block: var(--sp-7) var(--sp-9);
  }
}

.band__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--rock-900);
  box-shadow: var(--shadow);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease);
}

.band__item:hover,
.band__item:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.band__video {
  inline-size: 100%;
  /* A tall, cinematic crop: the canyon is vertical, so the frames are too */
  aspect-ratio: 478 / 700;
  object-fit: cover;
  display: block;
  filter: contrast(1.06) saturate(1.05);
  background-color: var(--rock-900);
}

.band__link {
  grid-column: 1 / -1;
  margin-block-start: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  .band__item:hover,
  .band__item:focus-visible {
    transform: none;
  }
}

}