/* index.html only (home.html keeps the old tabs): the five sections in the hero's foot and as a grid of cards */
.hero{padding-bottom:150px}
.hero-photo{object-position:center 40%}
.hero-sections{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:0 6% 0 8%;background:rgba(10,16,12,.82);border-top:1px solid rgba(255,255,255,.14)}
.hero-sections>*{display:flex;align-items:center;gap:14px;padding:22px 20px;border-right:1px solid rgba(255,255,255,.1);font-size:13px;color:#b6beb8;transition:background .2s}
.hero-sections>:first-child{padding-left:0}
.hero-sections>:last-child{border-right:0}
.hero-sections strong{display:block;font-size:16px;font-weight:600;color:#f7f8f5;margin-bottom:3px;transition:color .2s}
.hero-sections svg{color:var(--lime);width:24px;height:24px}
.hero-sections a:hover strong{color:var(--lime)}
.hero-sections .soon{opacity:.7}

.areas-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:35px}
.areas-heading h2{font-size:48px}
.areas-heading p{max-width:360px;font-size:16px;line-height:1.7;color:var(--muted)}
.areas-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.area{grid-column:span 2;position:relative;isolation:isolate;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;background:#151c17;border-radius:6px}
.area-wide{grid-column:span 3;min-height:460px}
.area>img{position:absolute;left:0;right:0;top:-9%;width:100%;height:118%;object-fit:cover;z-index:-2;transition:scale .8s cubic-bezier(.16,1,.3,1)}
.area:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0a100bf5 0%,#0a100bd9 34%,#0a100b66 62%,#0a100b14 100%)}
.area>img{object-position:center 28%}
a.area:hover>img{scale:1.04}
.area-copy{padding:34px}
.area-name{display:flex;align-items:center;gap:10px;font-size:14px;color:#d1dcd1}
.area-name svg{color:var(--lime);width:20px;height:20px}
.area h3{font-size:30px;line-height:1.12;font-weight:600;margin:16px 0 12px}
.area-wide h3{font-size:38px}
.area p{font-size:15px;line-height:1.65;color:#e0e6e0;max-width:480px}
.area-cta{display:inline-flex;align-items:center;gap:14px;margin-top:20px;font-size:14px;border-bottom:1px solid var(--lime);padding-bottom:8px;transition:color .2s}
.area-cta svg{width:18px;height:18px}
a.area:hover .area-cta{color:var(--lime)}
.area-soon{display:block;margin-top:20px;font-size:14px;color:var(--lime)}
a.area:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

@media(max-width:1100px){
  .hero-sections>*{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 14px}
  .areas-grid{grid-template-columns:1fr 1fr}
  .area,.area-wide{grid-column:span 1;min-height:380px}
  .area:first-child{grid-column:span 2}
}
@media(max-width:700px){
  .hero{padding-bottom:120px}
  .header-actions>.header-link{display:flex}
  .hero-sections{padding:0 8px}
  .hero-sections>*{align-items:center;text-align:center;gap:6px;padding:14px 2px;font-size:0;border-right:0}
  .hero-sections>:first-child{padding-left:2px}
  .hero-sections strong{font-size:12px;font-weight:500;margin:0}
  .hero-sections svg{width:20px;height:20px}
  .hero-sections .long{display:none}
  .areas-heading{display:block;margin-bottom:25px}
  .areas-heading h2{font-size:36px}
  .areas-heading p{margin-top:14px;font-size:15px}
  .areas-grid{grid-template-columns:1fr;gap:12px}
  .area,.area-wide,.area:first-child{grid-column:auto;min-height:360px}
  .area-copy{padding:26px 22px}
  .area h3,.area-wide h3{font-size:28px}
}


/* Motion (landing-motion.js + GSAP). Images get overscan so the parallax never shows an edge. */
.hero-photo{top:-8%;bottom:auto;height:116%}
.photo-block img{top:-9%;height:118%;transition:scale .8s cubic-bezier(.16,1,.3,1)}
.photo-block:hover img{scale:1.04}
.m-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.m-char{display:inline-block;will-change:transform}
.m-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.m-line-in{display:block;will-change:transform}
html.motion .hero-photo,html.motion .hero-content{visibility:hidden;animation:none}

/* The band: a wide crowd shot on a deep parallax layer between the intro and the experience. */
.band{position:relative;isolation:isolate;overflow:hidden;height:min(64vh,620px);min-height:380px;display:grid;place-items:center;text-align:center;padding:0 6%}
.band-media{position:absolute;inset:-16% 0;z-index:-2}
.band-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.band:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#101512 0%,rgba(16,21,18,.4) 28%,rgba(16,21,18,.4) 72%,#101512 100%)}
.band-line{font-size:clamp(40px,6vw,84px);font-weight:600;line-height:1.05;max-width:13ch;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.band+.experience{padding-top:100px}
@media(max-width:700px){.band{height:56vh;min-height:340px}.band+.experience{padding-top:65px}}
/* the photos can't be long-pressed or dragged to save (right click: landing-motion.js) */
img{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}