/* Three architectural windows follow the proportions of GORAT's own mark. */
.hero-portals{--portal-gap:4.2%;height:100svh;min-height:820px;max-height:1000px;background:#17231d;color:#f5f6ee;isolation:isolate;overflow:hidden}
.hero-grid{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent calc(100% - 1px),#f6fff908 0) 0 0/16.666% 100%}
.hero-portals:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#0c151010,transparent 55%,#07130d65)}
.hero-edition{position:absolute;top:127px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.03em;color:#9aaa9d}
.hero-edition>span:last-child{font-size:9px;letter-spacing:.1em}
.hero-portals .hero-content{position:relative;z-index:3;max-width:650px;padding:clamp(193px,20vh,210px) 0 125px var(--gutter);pointer-events:none}
.hero-portals .hero-kicker{font-size:11px;letter-spacing:0;gap:10px;color:#bac8bd;margin-bottom:27px;animation:rise .8s .12s var(--ease) both}
.hero-portals .hero-kicker i{width:5px;height:5px}
.hero-portals h1{font-size:clamp(90px,8.8vw,142px);font-weight:450;line-height:.93;letter-spacing:-.065em;margin-left:-.045em;animation:none;max-width:none;position:relative}
.hero-line{display:block;overflow:hidden;padding:0 .08em .08em 0;margin-bottom:-.04em}
.hero-line>span,.hero-line>em{display:block;transform-origin:left bottom;animation:hero-type 1.2s .25s var(--ease) both}
.hero-line:nth-child(2)>span{animation-delay:.39s}
.hero-line:nth-child(3)>em{animation-delay:.53s;color:var(--green)}
.hero-portals .hero-intro{display:block;margin-top:28px;animation:rise 1s .85s var(--ease) both}
.hero-portals .hero-intro p{font-size:13px;line-height:1.6;color:#b6c5b9}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:24px;pointer-events:auto}
.hero-portals .hero-intro .button{min-width:216px;min-height:58px;font-size:13px;padding:19px 22px;gap:25px;border-radius:0}
.hero-projects-link{font-size:11px;display:inline-flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #cddcd94d}
.hero-projects-link svg{width:15px;height:15px;transform:rotate(90deg);transition:transform .3s}
.hero-projects-link:hover svg{transform:rotate(90deg) translateX(4px)}
.hero-architecture{width:63.5vw;max-width:1040px;aspect-ratio:1.686;position:absolute;right:var(--gutter);top:50%;z-index:1;transform:translateY(calc(-50% + var(--hero-drift,0px))) perspective(1800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-origin:60% 50%;transition:transform .65s var(--ease)}
.portal{position:absolute;display:block;isolation:isolate;background:#00ce7c;overflow:hidden;outline-offset:7px;animation:portal-enter 1.5s .45s var(--ease) both}
.portal-main{left:0;top:0;width:59.31%;height:100%;z-index:1}
.portal-west{right:0;top:0;width:33.91%;height:57.17%;animation-delay:.6s}
.portal-lumirage{right:0;bottom:0;width:18.24%;height:30.76%;animation-delay:.75s}
.portal-image{width:100%;height:100%;overflow:hidden;position:relative;animation:portal-reveal 1.75s .55s var(--ease) both}
.portal-west .portal-image{animation-delay:.7s}.portal-lumirage .portal-image{animation-delay:.85s}
.portal-image>img,.hero-portals .hero-image{height:100%;width:100%;object-fit:cover;max-width:none;transform:none;will-change:auto;transition:transform 1.3s var(--ease),filter .5s;object-position:62% 50%}
.portal-main .portal-image>img{object-position:64% 52%;height:108%;transform:translateY(var(--hero-shift,0px)) scale(1.01)}
.portal-west .portal-image>img{object-position:56% center}.portal-lumirage .portal-image>img{object-position:44% center;filter:brightness(.77)}
.portal:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 1px #ffffff25;background:linear-gradient(0deg,#101e12a3,transparent 42%)}
.portal-main:after{background:linear-gradient(90deg,#17231da6,transparent 40%),linear-gradient(0deg,#101e129e,transparent 30%)}
.portal:hover .portal-image>img{transform:scale(1.055)}
.portal-main:hover .portal-image>img{transform:translateY(var(--hero-shift,0px)) scale(1.055)}
.portal:hover:after{box-shadow:inset 0 0 0 2px var(--green)}
.portal-number{position:absolute;left:19px;top:18px;color:#ffffffc9;font-size:10px;z-index:2}
.portal-main .portal-number{left:auto;right:22px}
.portal-brand{position:absolute;left:21px;right:21px;bottom:21px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.portal-brand>svg{width:19px;height:19px;flex:none;opacity:.85;transition:transform .3s}
.portal:hover .portal-brand>svg{transform:translate(3px,-3px)}
.portal-brand .project-logo{max-width:100%;object-fit:contain;height:auto;display:block}
.portal-main .portal-brand{left:auto;right:25px;align-items:flex-end;gap:25px}
.portal-main .portal-brand .project-logo{width:78px}
.portal-west .portal-brand .project-logo{width:150px}
.portal-lumirage .portal-brand{inset:0;align-items:center;justify-content:center;padding:25px}
.portal-lumirage .portal-brand .project-logo{width:82px}
.portal-lumirage .portal-brand>svg{display:none}
.portal-lumirage .portal-number{left:13px;top:11px;font-size:9px}
.portal-note{position:absolute;left:66.1%;top:68%;font-size:10px;line-height:1.5;color:#a9bfaf;animation:rise 1s 1.2s var(--ease) both}
.portal-note-line{display:block;width:32px;height:2px;background:var(--green);margin-bottom:12px}
.portal-guides{position:absolute;inset:0;pointer-events:none;animation:guide-in 2s .5s var(--ease) both}
.portal-guides>i{position:absolute;border:1px solid #8dd0a624;transform:translate(11px,-11px)}
.portal-guides>i:first-child{top:0;left:0;width:59.31%;height:100%}
.portal-guides>i:nth-child(2){top:0;right:0;width:33.91%;height:57.17%}
.portal-guides>i:last-child{bottom:0;right:0;width:18.24%;height:30.76%}
.hero-portals .hero-bottom{height:89px;padding:18px var(--gutter);gap:30px;border-color:#d8f5e51c;background:none;animation:rise 1s 1.1s var(--ease) both;z-index:4}
.hero-scroll{display:flex;align-items:center;gap:17px;font-size:10px;color:#aabcad}
.hero-scroll>span:first-child{width:36px;height:36px;display:grid;place-items:center;border:1px solid #9abbac44;border-radius:50%;transition:background .2s}
.hero-scroll svg{width:16px;height:16px;transform:rotate(90deg)}
.hero-scroll:hover>span:first-child{background:var(--green);color:#12291c}
.hero-project-directory{display:flex;gap:37px;align-items:center}
.hero-project-directory a{display:flex;align-items:center;gap:11px;font-size:12px;padding:13px 0;color:#e4ede5;transition:color .2s}
.hero-project-directory a>span{font-size:9px;color:#739381}.hero-project-directory a:hover{color:var(--green)}
.hero-portals .hero-note{display:block;max-width:145px;font-size:9px;color:#738d7d;line-height:1.55;text-align:right}

/* Logos are supplied artwork, kept in their original proportions. */
.project-logo{display:block;object-fit:contain}
.project-caption .project-card-logo{height:67px;display:flex;align-items:center;margin-top:2px}
.project-card-logo .project-logo{width:auto;max-width:220px;height:auto;max-height:55px}
.project-card-logo .project-logo-soho{width:91px}.project-card-logo .project-logo-west{width:210px}.project-card-logo .project-logo-lumirage{width:220px}
.story-name .story-logo{line-height:1;width:auto;max-width:100%;margin-top:10px}
.story-logo .project-logo-soho{width:190px;height:auto}
.story-logo .project-logo-west{width:360px;height:auto}
.story-logo .project-logo-lumirage{width:240px;height:auto}
.plan-stamp>.project-logo{width:36px;height:auto;max-height:24px}
.gallery-toolbar #gallery-title{display:flex;align-items:center;min-height:44px;width:175px;max-width:48%;flex:none}
#gallery-logo{width:100%;height:35px;object-fit:contain;object-position:left center}
@keyframes hero-type{from{transform:translateY(110%) rotate(2deg);opacity:.1}to{transform:none;opacity:1}}
@keyframes portal-enter{from{transform:translateY(45px);opacity:0}to{transform:none;opacity:1}}
@keyframes portal-reveal{from{clip-path:inset(100% 0 0 0);transform:scale(1.065)}to{clip-path:inset(0);transform:scale(1)}}
@keyframes guide-in{from{opacity:0;transform:translate(-12px,12px)}to{opacity:1;transform:none}}

@media(min-width:1700px){.hero-portals .hero-content{max-width:850px;padding-top:190px}.hero-architecture{right:max(var(--gutter),calc((100vw - 1620px)/2));width:64vw}.hero-portals h1{font-size:140px}.hero-portals .hero-intro{margin-top:27px}.hero-portals .hero-intro p{font-size:14px}}
@media(max-width:1200px){.hero-portals{min-height:820px}.hero-portals h1{font-size:clamp(84px,9.6vw,118px)}.hero-portals .hero-content{max-width:600px;padding-top:190px}.hero-architecture{width:61vw;top:48%}.hero-portals .hero-kicker{font-size:10px}.hero-actions{gap:22px}.hero-portals .hero-intro p{font-size:12px}.portal-west .portal-brand .project-logo{width:125px}.portal-main .portal-brand .project-logo{width:69px}.portal-lumirage .portal-brand{padding:24px}.portal-lumirage .portal-brand .project-logo{width:66px}.portal-note{font-size:9px}.hero-project-directory{gap:24px}.hero-portals .hero-note{max-width:110px}.hero-portals .hero-bottom{gap:22px}}
@media(max-width:960px){.hero-portals{min-height:830px;max-height:1000px}.hero-portals .hero-content{max-width:500px;padding-top:190px}.hero-portals h1{font-size:clamp(74px,10.5vw,100px)}.hero-architecture{width:60vw;top:46%}.hero-edition{top:119px}.hero-actions{gap:22px}.hero-portals .hero-intro .button{min-width:202px;font-size:12px;padding:17px 19px}.hero-projects-link{font-size:10px}.hero-portals .hero-intro{margin-top:30px}.hero-portals .hero-kicker{font-size:10px;margin-bottom:29px}.portal-brand{left:14px;right:14px;bottom:14px}.portal-brand>svg{width:15px;height:15px}.portal-main .portal-brand{right:18px;bottom:18px;gap:15px}.portal-main .portal-brand .project-logo{width:56px}.portal-west .portal-brand .project-logo{width:98px}.portal-west .portal-brand>svg{display:none}.portal-lumirage .portal-brand{padding:18px}.portal-number{font-size:9px;left:12px;top:13px}.portal-note{font-size:8px;top:68%}.portal-note-line{width:20px;height:1px;margin-bottom:8px}.portal-guides>i{transform:translate(7px,-7px)}.hero-portals .hero-bottom{height:85px}.hero-scroll{font-size:10px;gap:12px}.hero-project-directory{gap:20px}.hero-project-directory a{font-size:10px;gap:7px}.hero-portals .hero-note{display:none}.project-card-logo .project-logo-west{width:176px}.project-card-logo .project-logo-lumirage{width:185px}.story-logo .project-logo-soho{width:157px}.story-logo .project-logo-west{width:300px}.story-logo .project-logo-lumirage{width:198px}}

@media(max-width:600px){
  .hero-portals{display:flex;flex-direction:column;height:auto;min-height:100svh;max-height:none;padding-bottom:0}
  .hero-portals .hero-content{display:contents;pointer-events:auto}
  .hero-grid{background-size:33.333% 100%}.hero-edition{display:none}
  .hero-portals .hero-kicker{order:1;margin:136px var(--gutter) 25px;font-size:9px;line-height:1.5;gap:8px}
  .hero-portals h1{order:2;font-size:clamp(58px,17vw,96px);line-height:.9;margin:0 var(--gutter);letter-spacing:-.06em;max-width:none;z-index:3}
  .hero-line{padding-bottom:.105em;margin-bottom:-.05em}
  .hero-architecture{order:3;position:relative;top:auto;right:auto;width:calc(100% - 2*var(--gutter));max-width:none;height:auto;aspect-ratio:1.686;transform:none;margin:31px var(--gutter) 0;transition:none}
  .portal-main:after{background:linear-gradient(0deg,#101e12a3,transparent 50%)}
  .hero-portals .hero-intro{order:4;display:flex;flex-direction:column;align-items:stretch;margin:28px var(--gutter) 29px;gap:0;animation-delay:1.1s}
  .hero-portals .hero-intro p{font-size:11px;line-height:1.6;color:#abc0b1;max-width:240px}
  .hero-actions{margin-top:20px;display:flex;gap:22px;align-items:center;justify-content:space-between}
  .hero-portals .hero-intro .button{min-width:0;min-height:51px;font-size:11px;padding:16px 17px;gap:24px}
  .hero-actions .button svg{width:18px;height:18px}.hero-projects-link{font-size:10px;gap:10px;white-space:nowrap}.hero-projects-link svg{width:13px;height:13px}
  .portal-main .portal-brand{right:13px;bottom:14px;gap:12px}.portal-main .portal-brand .project-logo{width:45px}
  .portal-main .portal-brand>svg{width:14px;height:14px}.portal-west .portal-brand{left:9px;right:9px;bottom:12px}.portal-west .portal-brand .project-logo{width:84px}
  .portal-lumirage .portal-brand{padding:12px}.portal-lumirage .portal-brand .project-logo{width:38px}
  .portal-number{font-size:8px;left:10px;top:10px}.portal-main .portal-number{right:13px}.portal-lumirage .portal-number{font-size:6px;left:6px;top:5px}
  .portal-note{font-size:6.5px;top:68%;left:66.1%;line-height:1.5}.portal-note-line{width:14px;margin-bottom:6px}
  .portal-guides>i{transform:translate(5px,-5px)}
  .hero-portals .hero-bottom{order:5;position:relative;left:auto;right:auto;bottom:auto;height:auto;min-height:64px;display:block;padding:11px var(--gutter);margin-top:auto}
  .hero-scroll{display:none}.hero-project-directory{display:flex;justify-content:space-between;gap:17px}.hero-project-directory a{font-size:10px;padding:13px 0;gap:7px}.hero-project-directory a>span{font-size:7px}
  .project-caption .project-card-logo{height:64px}.project-card-logo .project-logo-soho{width:89px}.project-card-logo .project-logo-west{width:214px}.project-card-logo .project-logo-lumirage{width:225px}
  .story-name{margin-bottom:37px}.story-name .story-logo{margin-top:3px}.story-logo .project-logo-soho{width:154px}.story-logo .project-logo-west{width:280px;max-width:100%}.story-logo .project-logo-lumirage{width:190px}
  .gallery-toolbar #gallery-title{min-height:42px;width:137px}#gallery-logo{height:31px}
}
@media(max-width:360px){.hero-portals .hero-kicker{margin-top:121px;font-size:8px}.hero-portals h1{font-size:55px}.hero-architecture{margin-top:28px}.hero-actions{gap:13px}.hero-projects-link{font-size:9px;gap:7px}.hero-portals .hero-intro .button{font-size:10px;padding:15px 13px;gap:15px}.hero-portals .hero-intro p{font-size:10px}.portal-west .portal-brand .project-logo{width:74px}.portal-lumirage .portal-brand{padding:9px}.portal-note{font-size:6px}.hero-project-directory{gap:10px}.hero-project-directory a{font-size:9px;gap:5px}}
@media(min-width:601px) and (max-width:960px){.hero-portals{max-height:900px}.hero-architecture{top:58%}.hero-actions{flex-direction:column;align-items:flex-start;gap:10px}.hero-projects-link{padding:11px 0}}
@media(prefers-reduced-motion:reduce){.hero-portals *{animation:none!important;transition:none!important}.hero-line>span,.hero-line>em{transform:none}.portal-image{clip-path:none}.hero-architecture{transform:translateY(-50%)}.hero-portals .portal-image>img{transform:none!important}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.hero-architecture{transform:none}}