/* Ocean Jet Ski v4 - css/hero.css
   Header row and hero, CLAUDE-DESIGN.md sections 5.00 and 5.01 (prompt P2). Loaded after site.css.

   Phone, below 1024: the v3 composition is untouched. The only rules that reach it give the media
   band and its still the box they used to carry inline and keep the video off it.
   Desktop, 1024 and up: the split. Paper half left (name, vertical booking card, fact chips), the
   moving water right, one fixed header over both halves that compacts after 80px of scroll.

   motion.css (P1) is pulled in here: it owns .hero-media's scroll clip, the cover rules for the
   panel's img and video, and the reduced-motion switch for the panel. Nothing in it is redeclared. */
@import url("motion.css");


/* -------------------------------------------------------------------
   .hero  - the section
   Dark ground on the phone (the seam the card straddles). On desktop it
   turns to paper: it is what shows under the water once the scroll move
   clips the panel, exactly as the cream shows under Constance's video.
   ------------------------------------------------------------------- */
.hero{
  position: relative;
  background: #0e1418;
}


/* -------------------------------------------------------------------
   .hero-media  - one element on both canvases
   Phone: the 74svh media band (these are the values that were inline).
   Desktop: the right half, 100svh. The video is display:none below 1024
   and its <source> carries the same media query, so a phone never
   downloads it. The specificity (.hero-media > .hero-video) beats
   motion.css's .hero-media > video on purpose.
   ------------------------------------------------------------------- */
.hero-media{
  position: relative;
  height: 74svh;
  min-height: 520px;
  background-color: var(--sea);
  background-image: url("../assets/img/opt/hero-sunset-1280.webp");
  background-size: cover;
  background-position: 50% 62%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero-media > .hero-video{ display: none; }

/* the still under everything (index.html <picture>): the sunset on the phone, the video's daylight
   frame on desktop. These are the values the phone img carried inline; the picture box is out of
   flow so the phone band's flex layout is exactly what it was. */
.hero-media > picture{
  position: absolute;
  inset: 0;
}
.hero-still{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  animation: clouddrift 36s ease-in-out infinite;
  will-change: transform;
}

@media (max-width: 1023.98px){
  /* P1's scroll clip belongs to the desktop half only; the phone band is never clipped */
  .hero .hero-media{ animation: none; }
}


/* -------------------------------------------------------------------
   5.01  the split, 1024 and up
   Two equal columns, no gap, both stretched to the row so the paper and
   the water each fill 100svh. Not .split: that centres its items, which
   would leave the section's dark ground showing above a shorter column.
   ------------------------------------------------------------------- */
@media (min-width: 1024px){
  .hero{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 100svh;
    background: var(--paper);
  }
  /* The panel is portrait (50vw by 100svh) and the footage is 16:9, so cover shows 38 to 50% of the
     frame's width. The riders hold 60 to 82% of it through the whole loop and Teide sits at 50%;
     object-position 76% 50% keeps both inside from 1024 up (window 47 to 85% at 1024, 42 to 87% at
     1440). The still (hero-poster.webp, the same scene) is framed identically and does not drift,
     so the video fades in over a matching picture. */
  .hero-media{
    grid-column: 2;
    grid-row: 1;
    height: auto;
    min-height: 100svh;
    background-image: url("../assets/img/opt/portrait-ocean-jetski-1920.webp");
    background-position: 76% 50%;
  }
  .hero-still{
    object-position: 50% 50%;
    animation: none;
    will-change: auto;
  }
  /* Visible in plain CSS, so it plays with JavaScript off too (the autoplay attribute needs no
     script). Until its first frame arrives a poster-less video paints nothing, so the still shows
     through; if it never loads, the cross-fade beneath shows through. Once it really plays,
     site.js adds .is-playing and the entrance runs: opacity 0 at scale 1.07 to 1 at 1 over
     --dur-slow, over a still that is the same picture, so the only thing the eye reads is the
     water starting to move. */
  .hero-media > .hero-video{
    display: block;
    object-position: 50% 50%;
  }
  .hero-media > .hero-video.is-playing{
    animation: hero-video-in var(--dur-slow) var(--ease) both;
  }

  /* paper half: content block vertically centred with auto margins, so when the viewport is
     shorter than the content it starts at the padding edge instead of sliding under the header */
  .hero-paper{
    grid-column: 1;
    grid-row: 1;
    min-height: 100svh;
    box-sizing: border-box;
    padding: 96px 64px 64px;
    background: var(--paper);
    color: var(--ink);
    display: flex;
    flex-direction: column;
  }
  /* no width cap on the block itself: the card is capped at 440 and the title at its two
     lines, and the three chips then sit on one row from 1280 up (they wrap only at 1024) */
  .hero-paper__inner{
    margin: auto 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* 56px 600 caps, .92, -.015em, exactly two lines: the <br> breaks it, nowrap keeps the
     first line whole (at 1024 it runs about 30px into the 64px padding rather than breaking) */
  .hero-paper__title{
    margin: 0;
    font-size: 56px;
    font-weight: 600;
    line-height: .92;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
  }
  .hcard{ margin-top: 24px; }
  .hero-facts{ margin-top: 16px; }
}
@keyframes hero-video-in{
  from{ opacity: 0; transform: scale(1.07); }
  to{ opacity: 1; transform: scale(1); }
}


/* -------------------------------------------------------------------
   5.00  the desktop header (index.html SECTION: header)
   One element, fixed over both halves, 72px, transparent at the top of
   the page. Left, over the paper: the logo lockup in --ink, 44px, its
   left edge on the column's 64px content edge. Right, over the water:
   one hairline rectangle, radius 0, 48px, BOOK NOW | MENU in --paper,
   14px 500 .16em caps. The menu opens from this cluster only.
   Compact state (.header-compact, added by site.js after 80px): the P1
   contract in motion.css does the paper, the hairline and the logo's
   44 to 32 scale; here the cluster turns --ink because it now sits on
   paper. Position and z-index live here, not in motion.css.
   ------------------------------------------------------------------- */
.hero-head{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  box-sizing: border-box;
  padding: 0 64px;
  justify-content: space-between;
}
.hero-head__home{ display: block; line-height: 0; }
.hero-cluster{
  display: flex;
  align-items: stretch;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.hero-cluster__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-cluster__btn + .hero-cluster__btn{ border-left: 1px solid rgba(255,255,255,.7); }
.hero-head.header-compact .hero-cluster{ border-color: var(--rule); }
.hero-head.header-compact .hero-cluster__btn{ color: var(--ink); border-color: var(--rule); }
.hero-cluster__btn:focus-visible{ outline: 2px solid var(--paper); outline-offset: 2px; }
.hero-cluster__glyph{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-cluster__glyph > span{
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}


/* -------------------------------------------------------------------
   5.01  .hcard  - the desktop booking card
   The phone card's rows, vertical, 100% of the column content (max 440),
   radius 16, the one shadow. Same hooks as every other instance.
   ------------------------------------------------------------------- */
.hcard{
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  padding: 6px 20px 20px;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.hcard__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.hcard__field{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.hcard__label{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hcard__select,
.hcard__input{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
}
.hcard__select{ cursor: pointer; }
.hcard__chev{
  flex: none;
  font-size: 14px;
  color: var(--ink-faint);
}
.hcard__err{
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--red-deep);
}
.hcard__math{
  font-size: 13px;
  color: var(--marine);
}
.hcard__steppers{
  display: flex;
  align-items: center;
}
.hcard__step{
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: inherit;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
}
.hcard__count{
  width: 44px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
}
.hcard__foot{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
}
.hcard__cta{
  min-height: 56px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  background: var(--red);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hcard__wait{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.hcard__shimmer{
  height: 13px;
  background: linear-gradient(90deg, #efece6 25%, #f7f4ef 50%, #efece6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.hcard__ready{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.hcard__wa{
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.hcard__trust{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.hcard__star{ color: var(--red); }
.hcard__sep{ color: var(--rule); }
/* Under 420px the card is too narrow for the trust line in one row (306px of content in a 302px
   row at 390), so the line is two centred rows by design and the divider goes: it only ever
   separated things on the same row. Same rule for the phone card, whose separator carries the class. */
@media (max-width: 419.98px){
  .hcard__sep{ display: none; }
  .hcard__sep + span{ flex-basis: 100%; text-align: center; }
}


/* -------------------------------------------------------------------
   5.01  .hero-facts  - the three fact chips under the card
   13px 500, --marine on --marine-soft, radius 0 (decision 5).
   ------------------------------------------------------------------- */
.hero-facts{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-facts > li{
  padding: 6px 12px;
  background: var(--marine-soft);
  color: var(--marine);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0;
}


/* -------------------------------------------------------------------
   6.3  hover, pointer devices only
   ------------------------------------------------------------------- */
@media (hover: hover){
  .hero-cluster__btn:hover{ background-color: rgba(255,255,255,.1); }
  .hero-cluster__btn:active{ background-color: rgba(255,255,255,.16); }
  .hero-head.header-compact .hero-cluster__btn:hover{ background-color: rgba(17,19,21,.04); }
  .hero-head.header-compact .hero-cluster__btn:active{ background-color: rgba(17,19,21,.08); }
  .hcard__cta:hover{ opacity: .9; }
  .hcard__cta:active{ opacity: 1; background-color: var(--red-deep); }
  .hcard__wa:hover{ background-color: rgba(17,19,21,.04); }
}


/* -------------------------------------------------------------------
   6, principle 5  - reduced motion
   The water stands still: the video stays off and the still under it
   shows. The panel's own animation is switched off in motion.css.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero-media > .hero-video{ display: none; }
  /* the still's drift and the five-slide cross-fade (site.css heroFade, kenburns, kenburnsMobile)
     stop too: the slides then sit at their plain-CSS opacity 0 and the still alone shows */
  .hero-still,
  .hero-media .hs-img,
  .hero-media > .hero-video.is-playing{ animation: none; }
  .hero-cluster,
  .hero-cluster__btn,
  .hcard__cta{ transition: none; }
}

/* ------------------------------------------------------------------
   Best moments grid. Two columns on the phone, three from 1024.
   The tiles are .frame (css/motion.css): each opens from its top edge
   and the picture settles 1.15 to 1.0 as it crosses the viewport.
   Brief section 5.05 and 6.1. Full P3 layout (pinned title, staggered
   columns) is still to come; this is the reveal on the real images.
   ------------------------------------------------------------------ */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.gallery-grid > video{ grid-column:1/-1; }
@media (min-width:1024px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
}

/* ==================================================================
   P3, 2 September. The hero loses the booking card and the chips: the
   paper half is now mark, name, one line, the way Constance holds its
   half. Booking becomes its own table in the band below (SECTION: book).
   Desktop only. The phone is untouched: there the card stays pulled up
   over the seam, because the fold gate rules that canvas.
   ================================================================== */
@media (min-width:1024px){
  /* the hero gives up the height the table needs, so both sit in the first screen */
  .hero{ min-height:calc(100svh - 208px); }
  .hero-paper{ min-height:calc(100svh - 208px); }
  .hero-media{ min-height:calc(100svh - 208px); }
}
.hero-sub{
  margin:26px 0 0; max-width:34ch;
  font-size:18px; line-height:1.6; color:var(--ink-soft);
}

/* the table ------------------------------------------------------- */
/* the table's left edge is the headline's left edge: the hero paper half is padded 64px, so the
   band is too, at every width. A centred max-width looked right at 1440 and drifted everywhere else. */
.bookbar-band{ background:var(--paper); padding:28px 64px 44px; }
@media (max-width:1023.98px){ .bookbar-band{ display:none; } }

.bookbar{
  display:grid; grid-template-columns:1.25fr 1fr 1.15fr auto;
  border:1px solid var(--rule); border-radius:0; background:var(--paper);
}
.bookbar__cell{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:18px 26px; min-height:96px; position:relative; cursor:pointer;
}
.bookbar__cell + .bookbar__cell{ border-left:1px solid var(--rule); }
.bookbar__label{
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.bookbar__value{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bookbar__select, .bookbar__cell input[type=date]{
  appearance:none; border:0; background:transparent; padding:0; width:100%;
  font-family:inherit; font-size:17px; color:var(--ink); cursor:pointer;
}
.bookbar__chev{ color:var(--ink-faint); font-size:13px; flex:none; }
.bookbar__math{ font-size:13px; color:var(--marine); white-space:nowrap; }
.bookbar__steppers{ display:flex; align-items:center; gap:2px; flex:none; }
.bookbar__step{
  width:44px; height:44px; border:1px solid var(--rule); background:transparent;
  font-family:inherit; font-size:20px; color:var(--ink); cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease);
}
.bookbar__count{ min-width:34px; text-align:center; font-size:17px; font-weight:500; }
.bookbar__err{ display:block; margin-top:4px; font-size:15px; line-height:1.4; color:var(--red-deep); }
.bookbar__cta{
  border:0; background:var(--red); color:var(--paper); cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; padding:0 44px; min-width:260px;
  transition:background-color var(--dur) var(--ease);
}
@media (hover:hover){
  .bookbar__step:hover{ background:rgba(17,19,21,.05); }
  .bookbar__cta:hover{ background:var(--red-deep); }
}
.bookbar__cta:active{ background:var(--red-deep); }

.bookbar__foot{
  margin:18px 0 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.bookbar__foot .hero-facts{ display:flex; gap:10px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.bookbar__foot .hero-facts li{
  background:var(--marine-soft); color:var(--marine); font-size:13px; font-weight:500;
  padding:7px 14px;
}
.bookbar__trust{ margin:0; font-size:13px; color:var(--ink-soft); }
.bookbar__star{ color:var(--red); }
.bookbar__sep{ color:var(--rule); margin:0 6px; }
.bookbar__foot .hcard__wait, .bookbar__foot .hcard__ready{ flex-basis:100%; }

/* ------------------------------------------------------------------
   P3b, 2 September (Tino): booking is its own page. The hero no longer
   carries a form on either canvas. The phone keeps a full width action
   inside the fold, which is what the fold gate was ever protecting; the
   desktop keeps BOOK NOW in the fixed header, always present.
   ------------------------------------------------------------------ */
.herocta{ max-width:440px; margin:0 auto; background:var(--paper);
          box-shadow:var(--shadow-card); padding:22px 20px 20px;
          display:flex; flex-direction:column; gap:10px; text-align:center; }
.herocta__btn{ display:flex; align-items:center; justify-content:center;
               min-height:56px; background:var(--red); color:var(--paper);
               font-size:14px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.herocta__trust{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.herocta__star{ color:var(--red); }

/* the picture that straddles the split, Constance frame 01 */
.hero-over{ display:none; }
@media (min-width:1024px){
  .hero-over{
    display:block; position:absolute; z-index:3;
    left:calc(50% - 150px); bottom:-72px; width:300px; aspect-ratio:3/4;
    object-fit:cover; box-shadow:0 24px 60px rgba(17,19,21,.18);
  }
  /* the band it used to overlap is gone, so the hero takes its height back */
  .hero, .hero-paper, .hero-media{ min-height:100svh; }
}

/* The floating picture. It sits ON the page rather than cut into it, it lengthens over the first
   stretch of scroll, and the photograph inside drifts within it, which together is the floating
   Constance feeling Tino pointed at. The growing and the drift are written by js/lag.js. */
@media (min-width:1024px){
  /* Specificity matters here. .frame--travel in sections.css sets position:relative and is loaded
     later, so a single-class rule lost and the picture fell out of its placement into normal flow,
     which is why it sat in white space far below the panel. Scoped to .hero it wins. */
  .hero .hero-over{
    position:absolute; z-index:6; overflow:hidden;
    /* bigger, and landscape so the photographs show whole rather than a sky crop (Tino, 2 Sep) */
    left:calc(50% - 270px); bottom:-96px; width:540px; aspect-ratio:4/3;
    box-shadow:0 30px 70px rgba(17,19,21,.26);
    background:var(--paper-deep);
  }
  .hero .hero-over > .rideshow{ position:absolute; inset:0; width:100%; height:100%; }
  .hero .hero-over > .rideshow > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
}
/* it is decorative, so it never appears on a phone and never costs a phone a download */
@media (max-width:1023.98px){ .hero-over{ display:none; } }


/* The panel used to clip its own bottom away as you scrolled, which left a white band under it and
   made the split look broken (Tino, 2 Sep). The reference does not do that on its home page either:
   the panel simply scrolls. The clip is off. */
.hero-media{ animation:none !important; clip-path:none !important; }

/* ==================================================================
   Proportions taken from the reference at its own window (Tino, 2 Sep,
   "same needs to be translated"). Measured off constancehotels.com at
   1440 x 830: headline 84px with its top 38% down the screen, one short
   paragraph under it, logo 56px, header box 40px tall, media panel the
   full height, and the small picture 19% of the width, portrait, starting
   85% down and hanging below the fold, centred on the seam.
   ================================================================== */
@media (min-width:1024px){
  .hero-paper__title{ font-size:clamp(56px,5.3vw,84px); line-height:.92; }
  .hero-paper__inner{ max-width:560px; }
  .hero-sub{ margin-top:30px; max-width:36ch; font-size:17px; line-height:1.6; }

  .site-header__logo{ height:56px; }
  .hero-cluster{ height:40px; }
  .hero-cluster__btn{ min-height:40px; font-size:13px; }

  .hero .hero-over{
    width:19.5vw; max-width:300px; aspect-ratio:3/4;
    left:calc(50% - 9.75vw); top:85%; bottom:auto;
    background:var(--paper-deep);
  }
}
@media (min-width:1024px){
  /* the reference starts its text 8% in from the left edge; ours started at 4% */
  .hero-paper{ padding-left:8vw; padding-right:6vw; }
}

/* Performance (2 Sep): five 2048px slides kept cross-fading and zooming UNDER the playing video, which
   nobody could see and every frame paid for. Once the video really plays they stand still. */
.hero-media:has(.hero-video.is-playing) .hs-img{ animation-play-state:paused; }

/* Book now in the header is RED (Tino, 2 Sep 22:00): filled brand red, white type, on the transparent
   header, on the compact header and on the asset pages alike. The specificity (an element in the chain)
   beats the compact and page recolours of the cluster buttons. */
.hero-head .hero-cluster a.hero-cluster__btn{ background:var(--red); color:#fff; border-color:var(--red); }
.hero-head .hero-cluster a.hero-cluster__btn + .hero-cluster__btn{ border-left-color:rgba(255,255,255,.7); }
.hero-head.header-compact .hero-cluster a.hero-cluster__btn + .hero-cluster__btn{ border-left-color:var(--rule); }
@media (hover:hover){ .hero-head .hero-cluster a.hero-cluster__btn:hover{ background:var(--red-deep); color:#fff; } }
.hero-head .hero-cluster a.hero-cluster__btn:focus-visible{ outline:2px solid var(--ink); }

/* 3 Sep 2026: the desktop hero panel is one still (assets/img/brand/portrait-ocean-jetski.png). The five
   cross-fade slides stay for the phone band only. */
@media (min-width:1024px){ .hero-media .hslide{ display:none; } }

/* The floating picture: one photograph, no cross-fade, and about a quarter bigger and wider than it was
   (Tino, 3 Sep 10:10). 25vw wide at 4:5 gives 360 x 450 at 1440, against 281 x 374 before. */
@media (min-width:1024px){
  /* Size taken from the box Tino drew on 3 Sep: about 45% wider than the 25vw version and a little
     taller, so the frame turns landscape (10:9). 605 x 544 at 1440. */
  .hero .hero-over{
    width:42vw; max-width:660px; aspect-ratio:10/9;
    left:calc(50% - 21vw); top:85%; bottom:auto;
  }
  .hero .hero-over > .hero-over__img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
}


/* ==================================================================
   THE PHONE HERO, 3 September 2026 (phone pass, step 2)
   Tino, third pass: "the two images that are on the desktop, those exact
   same images for the phone, reduced, smaller, with the white background
   as in the entire phone. On the left side the logo, on the right side
   the menu. Below on the phone you have the book now or call. On the main
   page you have the two images, and the type in of Ocean Jet Ski coming
   in below in black on the white background, and a little text."

   So the phone hero is the desktop composition, reduced: the panel
   photograph with rider-sunset overlapping its lower left, both smaller,
   white all around, and the name typing itself in underneath. Nothing
   here escapes the media query; the desktop split above is untouched.
   ================================================================== */
@media (max-width:1023.98px){

  /* white, top to bottom, and only as tall as it needs to be. `min-height:100svh` plus a 58px dock
     allowance left a dead band under the review count that Tino circled on 3 Sep: the hero was
     padded out to a full screen whether it had the content for one or not. The dock is fixed to the
     viewport, so the clearance belongs at the END of the page, not here. */
  .hero{
    display:flex; flex-direction:column; background:var(--paper); padding-bottom:18px;
  }

  /* --- the bar: the mark on the left, the menu on the right ------------ */
  .phero-bar{ display:flex; align-items:center; justify-content:space-between;
              height:64px; margin:0 -4px; flex:none; }
  .phero-bar__home{ display:flex; align-items:center; min-height:44px; padding:0 4px; }
  .phero-bar__logo{ height:36px; width:auto; display:block; }
  .phero-bar__menu{ width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
                    display:flex; flex-direction:column; justify-content:center; gap:6px; }
  .phero-bar__menu span{ display:block; width:22px; height:1.5px; background:var(--ink); }

  /* --- the two photographs, first, reduced, on white ------------------- */
  /* The desktop move at phone scale: the panel photograph to the right, the sunset overlapping its
     lower left corner. Both inside the page margin, so white runs all the way round them. */
  .hero-media{
    position:relative; flex:none; overflow:visible;
    /* min-height:520px from the base rule was holding the block open, which left a hole between
       the two photographs. It has to be cancelled, not just overridden by height. */
    height:min(calc(56vw + 140px), 360px); min-height:0; margin:34px 0 0;
    background:none; background-image:none;
  }
  /* the two frames' resting heights, named so the scroll-driven lengthening in enter.css can grow
     them from exactly here (Tino, 3 Sep: "the photos are getting a little bit longer") */
  .hero-media{ --ph-a:min(calc(48vw + 68px), 262px); --ph-b:min(calc(36vw + 12px), 142px); }
  .hero-media > picture{ position:absolute; top:0; right:24px; left:96px; height:var(--ph-a);
                         overflow:hidden; box-shadow:0 18px 40px rgba(17,19,21,.20); }
  /* futuregoals.com, measured in ../RESEARCH-REFERENCES.md section 4: the picture inside a card is
     TALLER than the card and rides against the page at data-scroll-speed -1, so as the card climbs
     the screen you see a different, and more, part of the photograph. That is the lengthening Tino
     pointed at. 124% tall, hung 12% above the frame, so it can travel 12% either way and never show
     an edge. */
  .hero-media picture > .hero-still{
    position:absolute; top:-12%; left:0; width:100%; height:124%; object-fit:cover; object-position:50% 46%;
    animation:none; will-change:auto;
  }
  /* motion.css sets .hero-media > img to inset:0 at 100% x 100%, and it is @imported at the top of
     this file, so the second photograph has to match that specificity to win on source order. */
  .hero-media > .phero-frame{
    position:absolute; inset:auto auto 0 24px; width:min(48vw,190px); height:var(--ph-b);
    overflow:hidden; box-shadow:0 18px 40px rgba(17,19,21,.24);
  }
  .phero-frame > .phero-slide{
    position:absolute; top:-12%; left:0; width:100%; height:124%; object-fit:cover; object-position:50% 50%;
  }

  /* --- the running order -----------------------------------------------
     Tino's own drawing, 3 Sep: the name at the top, then the two photographs, and the line and the
     review count MOVED DOWN under them. The paper block and its inner box become display:contents
     so their children join .hero's flex column directly and can be ordered against .hero-media.
     Desktop keeps both boxes: it is a two-column grid up there, not a column. */
  .hero-paper, .hero-paper__inner{ display:contents; }
  .phero-bar{ order:1; }
  .hero-paper__title{ order:2; }
  .hero-media{ order:3; }
  .hero-sub{ order:4; }
  .hero .hero-trust{ order:5; }
  .hero-paper__title{
    margin:0; font-size:clamp(34px,10.4vw,46px); font-weight:600; line-height:.94;
    letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
  }
  .hero-sub{ margin:26px 0 0; max-width:38ch; font-size:16px; line-height:1.5; }
  /* one line, not two: the name already carries the weight, and at 34px the score pushed the count
     onto a second line with a 12px gap under it, which read as a broken paragraph */
  .hero .hero-trust{ margin:14px 0 0; gap:8px; flex-wrap:nowrap; align-items:center; }
  .hero .hero-trust .trust__score{ font-size:20px; }
  .hero .hero-trust .trust__stars{ font-size:15px; }
  .hero .hero-trust .trust__count{ font-size:13px; white-space:nowrap; }

  /* the page margin is carried by the hero itself so the photographs can sit against it */
  .hero{ padding-left:24px; padding-right:24px; }
  .hero-media{ margin-left:-24px; margin-right:-24px; }
  .hero-media > picture{ right:48px; left:120px; }
  .hero-media > .phero-frame{ left:48px; }

  /* the desktop's floating frame is the second photograph here, so the frame itself is not used */
  .hero .hero-over{ display:none; }
}
@media (min-width:1024px){ .phero-slide{ display:none; } }