/* ══════════════════════════════════════════════════════════════════
   hospitality.css — the Hospitality world (Figma frame 2:583).

   Warm and ambient: a navy-to-black gradient ground, glassmorphism over
   the footage, and Cormorant Garamond doing the talking against Schibsted
   Grotesk Black for the title. The design's own note is "gentle spring
   easing throughout", so nothing here snaps.

   Scoped to `.hs`.
   ══════════════════════════════════════════════════════════════════ */

.hs{
  --hs-ease:cubic-bezier(.34,1.2,.34,1);      /* the design's "gentle spring" */
  --hs-gutter:clamp(20px,5.5vw,80px);
  --hs-glass:rgba(255,255,255,.06);
  --hs-glass-line:rgba(255,255,255,.15);

  /* fixed so the gradient spans the page rather than repeating per section */
  background:linear-gradient(to bottom, var(--accent-2) 0%, #242e3d 22%, var(--ink-000) 70%);
  background-attachment:fixed;
  color:var(--paper-100);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.hs main{display:flex;flex-direction:column;gap:clamp(80px,10vw,160px);}
.hs-masthead, .hs-reels, .hs-pillars{
  padding-inline:var(--hs-gutter);
  max-width:1600px;margin-inline:auto;width:100%;
}

/* ── reveal ── */
[data-hs]{opacity:0;transform:translateY(40px);
  transition:opacity .9s var(--hs-ease), transform .9s var(--hs-ease);}
[data-hs].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-hs]{opacity:1;transform:none;transition:none;}
}

/* ── nav ── */
.hs-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,2.4vw,32px) var(--hs-gutter);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hs-code{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  color:var(--paper-100);margin:0;
}
.hs-code-accent{color:var(--accent);}
.hs-back{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--accent);}
.hs-back:hover{color:#fff;}

/* ── masthead ── */
.hs-masthead{padding-top:clamp(56px,8vw,120px);text-align:center;}
.hs-title{
  font-family:var(--font-display);
  font-weight:900;color:#fff;margin:0;
  /* 160px against a 1440 frame */
  font-size:clamp(40px,11vw,160px);
  line-height:1;letter-spacing:-.02em;
}
.hs-kicker{
  font-weight:600;font-size:clamp(11px,1vw,14px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:clamp(12px,1.6vw,24px) 0 0;
}

/* ── hero ── */

/* ── section heads ── */
.hs-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,48px);
}
.hs-h2{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(26px,3vw,40px);color:#fff;margin:8px 0 0;line-height:1.1;
}
.hs-lede{font-size:clamp(14px,1.3vw,16px);color:var(--paper-100);margin:0;max-width:400px;}

/* ── reels ──
   Two reels run large as bookends, the rest sit in a 2x3 between them:

       ┌─────────┬────┬────┬────┬─────────┐
       │         │ 03 │ 04 │ 05 │         │
       │   01    ├────┼────┼────┤   02    │
       │         │ 06 │ 07 │ 08 │         │
       └─────────┴────┴────┴────┴─────────┘

   The maths is what makes this fit rather than approximately fit. Every reel
   is 9:16, so a small card of width u stands 16u/9 tall and two of them plus a
   gap come to 32u/9 + gap. Each feature spans both rows, and at 2fr it is 2u
   wide — which at 9:16 is 32u/9 tall. All four columns land on the same
   baseline by construction, whatever the middle count.

   (This began as one feature beside a 2x2; each arrival threatened a stranded
   card on its own row — the dead space this page keeps running into — and the
   answer each time is a middle that stays a multiple of the two rows.) */
.hs-grid{
  display:grid;gap:clamp(16px,2.4vw,32px);
  grid-template-columns:2fr 1fr 1fr 1fr 2fr;
}
.hs-reel{display:flex;flex-direction:column;gap:14px;min-width:0;}

/* Row 1 must be EXPLICIT on the features. With only a column pinned, the
   sparse auto-placement cursor moves past the second feature's column and
   drops every small card into row 2 — row one's middle sat empty and the
   grid grew a third row. */
.hs-reel-feature{grid-column:1;grid-row:1 / span 2;}
/* the second feature takes the far column; auto-placement fills the middle */
.hs-reel-feature ~ .hs-reel-feature{grid-column:5;}
/* the feature is sized by the two rows it spans, not by its own ratio — the
   gap makes it a hair taller than 9:16, and object-fit:cover absorbs that */
.hs-reel-feature .hs-reel-media{aspect-ratio:auto;flex:1;min-height:0;}
.hs-reel-feature .hs-reel-n{font-size:clamp(17px,1.9vw,22px);}

/* Below four columns the arrangement stops being bookends-plus-grid and
   becomes a plain two-up, with each feature spanning the width. */
@media (max-width: 900px){
  .hs-grid{grid-template-columns:repeat(2,1fr);}
  .hs-reel-feature, .hs-reel-feature ~ .hs-reel-feature{grid-column:1 / -1;grid-row:auto;}
  .hs-reel-feature .hs-reel-media{aspect-ratio:16/10;}
}
@media (max-width: 560px){
  .hs-grid{grid-template-columns:1fr;}
  .hs-reel-feature .hs-reel-media{aspect-ratio:9/16;}
}
.hs-reel-media{
  position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:#1a222e;cursor:pointer;
  border:1px solid var(--hs-glass-line);
  transition:transform .4s var(--hs-ease), box-shadow .4s var(--hs-ease);
}
.hs-reel-media:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45);}
.hs-reel-media video{width:100%;height:100%;object-fit:cover;display:block;}
.hs-reel-media:focus-within{outline:2px solid var(--accent);outline-offset:3px;}

/* the design's play button: expands on hover, glass over the footage */
.hs-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(64px,7vw,100px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);
  border:2px solid var(--accent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  color:#fff;
  transition:transform .35s var(--hs-ease), background-color .35s var(--hs-ease);
}
.hs-reel-media:hover .hs-play{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,145,36,.28);}
.hs-play svg{width:38%;height:38%;}
.hs-play:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

.hs-reel-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.hs-reel-n{font-weight:600;font-size:clamp(14px,1.4vw,18px);color:#fff;margin:0;}
.hs-reel-d{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  color:rgba(229,229,229,.6);margin:0;}

/* ── pillars ── */
.hs-cards{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(20px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.hs-card{
  display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);
  padding:clamp(24px,3vw,40px);
  border-radius:24px;
  background:var(--hs-glass);
  border:1px solid var(--hs-glass-line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:transform .4s var(--hs-ease), box-shadow .4s var(--hs-ease);
}
.hs-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.4);}
.hs-icon{
  width:64px;height:64px;border-radius:32px;display:grid;place-items:center;
  background:rgba(255,145,36,.11);border:1px solid var(--accent);
  color:var(--accent);flex:0 0 auto;
}
.hs-icon svg{width:24px;height:24px;}
.hs-card-t{font-weight:600;font-size:clamp(18px,2vw,24px);color:#fff;margin:0;}
.hs-card-d{font-size:clamp(13px,1.3vw,15px);line-height:1.6;color:var(--paper-100);margin:0;}

/* ── footer ── */
.hs-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(40px,5vw,72px) var(--hs-gutter);
  margin-top:clamp(80px,10vw,140px);
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
}
.hs-foot-link{color:var(--accent);}
.hs-foot-link:hover{color:#fff;}
.hs-foot-mark{color:rgba(229,229,229,.5);margin:0;}

@media (max-width: 560px){
  .hs-foot{flex-direction:column;align-items:flex-start;gap:12px;}
}