/* Alpha: the hub page (/). */

/* hero: the brand line, then the two doors */
.hub-hero{padding-top:clamp(20px,3.2vw,44px)}
.hub-hero__intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6) clamp(24px,5vw,88px);align-items:end;margin-bottom:clamp(28px,3.4vw,48px)}
.hub-hero .eyebrow{margin-bottom:var(--s-5)}
.hub-hero .display span{display:block}
.hub-hero__side{display:grid;gap:var(--s-5);justify-items:start;padding-bottom:6px}
.hub-hero__intro>*{animation:rise .9s var(--ease) both}
.hub-hero__intro>:nth-child(2){animation-delay:.12s}

.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
.door{position:relative;--h:0;transition:--h .7s var(--ease-dusk)}
.door:hover,.door:focus-within{--h:1}
.door__shot{position:relative;aspect-ratio:16/10.4;border-radius:var(--radius);overflow:hidden;background:var(--panel);animation:open 1.3s var(--ease) both}
.door--lighting .door__shot{animation-delay:.14s}
.door__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease),opacity .2s linear}
.door--industries .door__shot img{object-position:72% 50%}
.door:hover .door__shot img{scale:1.035}
.door:has(a:focus-visible) .door__shot{outline:2px solid var(--red);outline-offset:3px}
.door__tag{position:absolute;inset-block-start:16px;inset-inline-start:16px;padding:9px 14px;border-radius:var(--pill);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 var(--fs-label)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
[dir="rtl"] .door__tag{letter-spacing:0;font:500 .8125rem/1 var(--sans)}
.door__body{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-5) 4px 0}
.door h2{font-weight:400;font-size:var(--fs-sub);letter-spacing:-.025em;line-height:1.15}
.door h2 a::after{content:"";position:absolute;inset:0;z-index:1} /* the whole card is the link */
.door__desc{font-weight:300;color:var(--soft);max-width:52ch}
.door__for{font:500 var(--fs-label)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
[dir="rtl"] .door h2{letter-spacing:0;line-height:1.4}
[dir="rtl"] .door__for{letter-spacing:0;font:400 .8125rem/1.5 var(--sans)}
.door .btn{margin-top:var(--s-3)}
.door:hover .btn--red{background:var(--red-deep)}
.door:hover .btn--line{border-color:var(--fg)}
.door:hover .btn .icon{translate:4px 0}
[dir="rtl"] .door:hover .btn .icon{translate:-4px 0}

/* chooser */
.needs{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-6) clamp(24px,5vw,88px);align-items:start;padding-top:var(--section)}
.needs__head{position:sticky;top:120px}
.needs__head .lede{margin-top:var(--s-4)}
.needs__list{border-top:1px solid var(--rule)}
.need{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s-5);min-height:78px;padding:var(--s-4) var(--s-2);border-bottom:1px solid var(--rule);transition:padding .45s var(--ease),background-color .3s}
.need__text{font-weight:300;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:-.015em;line-height:1.3}
.need__side{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.need__side::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg)}
.need--industries .need__side::before{background:var(--red)}
[dir="rtl"] .need__text{letter-spacing:0;line-height:1.6}
[dir="rtl"] .need__side{letter-spacing:0;font:400 .8125rem/1 var(--sans)}
.need .icon{color:var(--soft);transition:translate .35s var(--ease),color .25s}
.need:hover{padding-inline:var(--s-4);background:color-mix(in oklab,var(--panel) 60%,transparent)}
.need:hover .icon{translate:5px 0;color:var(--fg)}
[dir="rtl"] .need:hover .icon{translate:-5px 0}
.needs__list li:nth-child(2){--d:.05s}.needs__list li:nth-child(3){--d:.1s}.needs__list li:nth-child(4){--d:.15s}.needs__list li:nth-child(5){--d:.2s}.needs__list li:nth-child(6){--d:.25s}

/* story: always night, whatever the page is doing */
.story{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(88vh,780px);margin-top:var(--section);overflow:hidden;color:#F4F1EB}
.story__media{position:absolute;inset:0;z-index:-1}
.story__media img{width:100%;height:100%;object-fit:cover;object-position:72% 38%}
.story__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,11,22,.96) 0%,rgba(7,11,22,.8) 40%,rgba(7,11,22,.12) 76%),linear-gradient(90deg,rgba(7,11,22,.62),rgba(7,11,22,0) 62%)}
[dir="rtl"] .story__media{transform:scaleX(-1)}
.story__in{padding-block:clamp(120px,24vh,280px) clamp(44px,6vw,84px)}
.story .title{max-width:17ch;margin-bottom:clamp(40px,5vw,68px)}
.story__line{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);padding-top:30px}
.story__line::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,var(--lamp),rgba(255,215,160,.45));box-shadow:0 0 14px rgba(255,215,160,.8);transform-origin:left;transition:transform 1.9s var(--ease) .25s}
[dir="rtl"] .story__line::before{background:linear-gradient(270deg,var(--lamp),rgba(255,215,160,.45));transform-origin:right}
.js .story__line:not(.is-in)::before{transform:scaleX(0)}
.story__line li{position:relative;display:grid;gap:var(--s-2);align-content:start;max-width:40ch}
.story__line li::before{content:"";position:absolute;inset-block-start:-34.5px;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--lamp);box-shadow:0 0 12px var(--lamp)}
.story__year{font-weight:300;font-size:clamp(2rem,4.4vw,4rem);letter-spacing:-.04em;line-height:1}
[dir="rtl"] .story__year{letter-spacing:0;line-height:1.3}
.story__text{font-weight:300;font-size:var(--fs-lede);color:rgba(244,241,235,.84)}

/* facts */
.facts{padding-top:clamp(40px,5vw,72px)}
.facts__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-5);margin-bottom:var(--s-3)}
.facts__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.facts__row>div{padding:var(--s-5);border-inline-start:1px solid var(--rule)}
.facts__row>div:first-child{border-inline-start:0;padding-inline-start:0}
.facts__row dt{font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:var(--s-2)}
.facts__row dd{font-weight:300;font-size:clamp(1.3rem,2.3vw,2rem);letter-spacing:-.03em;line-height:1.15}
[dir="rtl"] .facts__row dt{letter-spacing:0;font:400 .8125rem/1.4 var(--sans)}
[dir="rtl"] .facts__row dd{letter-spacing:0;line-height:1.4}

/* places */
.places{padding-top:var(--section)}
.places .title{margin-bottom:clamp(28px,4vw,48px)}
.places__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,26px)}
.place{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding:clamp(24px,3vw,40px);border-radius:var(--radius);background:var(--panel)}
.place:nth-child(2){--d:.1s}
.place h3{font-weight:400;font-size:var(--fs-sub);letter-spacing:-.025em;line-height:1.15}
[dir="rtl"] .place h3{letter-spacing:0;line-height:1.4}
.place__addr{display:flex;align-items:flex-start;gap:10px;font-weight:300;color:var(--soft)}
.place__addr .icon{margin-top:3px}
.place__acts{display:flex;flex-wrap:wrap;gap:10px;margin-block:var(--s-2)}
.place .btn{min-height:48px;padding:0 20px}
.place>.link{margin-top:auto}

@keyframes rise{from{opacity:0;translate:0 22px}}
@keyframes open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

@media (max-width:1000px){
  .hub-hero__intro,.needs{grid-template-columns:1fr}
  .needs__head{position:static}
  .facts__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts__row>div:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .facts__row>div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:760px){
  .doors,.places__grid{grid-template-columns:1fr}
  .doors{gap:var(--s-7)}
  .door__shot{aspect-ratio:4/3}
  .hub-hero__side{justify-items:stretch}
  .need{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-2);padding-block:var(--s-4)}
  .need__side{grid-row:2;grid-column:1}
  .need .icon{grid-row:1/3;grid-column:2}
  .story__line{grid-template-columns:1fr;gap:var(--s-7);padding-top:0;padding-inline-start:28px}
  .story__line::before{inset:6px auto 0 0;width:1px;height:auto;transform-origin:top;background:linear-gradient(180deg,var(--lamp),rgba(255,215,160,.45))}
  [dir="rtl"] .story__line::before{inset:6px 0 0 auto;transform-origin:top;background:linear-gradient(180deg,var(--lamp),rgba(255,215,160,.45))}
  .js .story__line:not(.is-in)::before{transform:scaleY(0)}
  .story__line li::before{inset-block-start:6px;inset-inline-start:-32.5px}
  .place .btn{flex:1 1 100%}
}