/* A full-width photographic opening, quiet text area and overlapping memories. */
html{scroll-padding-top:132px}
.site-header{
  position:fixed;
  top:20px;
  left:max(28px,calc((100vw - 1380px)/2));
  right:max(28px,calc((100vw - 1380px)/2));
  border:1px solid #ffffffb3;
  border-radius:15px;
  background:#fff;
  box-shadow:0 12px 40px #051e4130;
  transition:top .25s var(--ease),box-shadow .25s var(--ease);
}
.site-header .nav-wrap{width:calc(100% - 48px);height:82px;gap:32px}
.site-header .brand,.site-header .brand img{width:164px;height:78px}
.site-header.is-scrolled{top:12px;box-shadow:0 8px 32px #051e4120}
.site-header.is-scrolled .nav-wrap{height:72px}
.site-header.is-scrolled .brand img{height:66px}
.mobile-nav{border-radius:0 0 14px 14px;box-shadow:none}

.hero{
  min-height:850px;
  min-height:max(800px,100svh);
  background:var(--deep);
  isolation:isolate;
}
.hero:after,.rhythm:before{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/blue-grain.svg') repeat;
  background-size:180px;
  opacity:.15;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.hero:after{z-index:3}
.hero-layout{
  position:static;
  display:flex;
  align-items:center;
  min-height:850px;
  min-height:max(800px,100svh);
  gap:0;
}
.hero-copy{width:55%;padding:170px 0 122px;z-index:5}
.hero h1{font-size:clamp(80px,7.65vw,122px);line-height:.91}
.hero-location{margin-bottom:28px}
.hero-description{max-width:43ch;margin-top:29px}
.hero-actions{gap:23px;margin-top:30px}
.hero-actions .button{font-size:13px;padding:17px 22px}
.hero-foot{margin-top:40px}
.hero-visual{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:45%;
  width:auto;
  height:auto;
  margin:0;
  align-self:auto;
  z-index:1;
  animation:hero-photo-in 1s .1s var(--ease) both;
}
.hero-photo{inset:0;width:100%;height:100%;border-radius:0;transform:none}
.hero-photo img{transform:none;object-fit:cover;object-position:50% 43%;filter:saturate(.82)}
.hero-photo:after{display:none}
.hero-visual:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,var(--deep) 0%,#103b70ed 8%,#103b70b8 20%,#103b7030 43%,#103b7005 65%),linear-gradient(0deg,#103b70bf,transparent 28%,transparent 80%,#103b7040);
  pointer-events:none;
}
.photo-orbit{display:none}
.hero-watermark{top:115px;right:-10px;font-size:330px;opacity:.06;z-index:2}
.hero-arc{right:-230px;bottom:-320px;z-index:2}
.hero-sticker{left:auto;right:12%;bottom:105px;font-size:42px;z-index:4;transform:rotate(-8deg);text-shadow:0 2px 16px #09254c}
.hero-sticker svg{left:-81px;top:0;transform:rotate(160deg);width:82px}
.photo-credit{left:auto;right:8%;bottom:60px;color:#fff;z-index:4;text-shadow:0 1px 9px #00182e}
.scroll-cue{left:max(56px,calc((100% - 1264px)/2));bottom:28px;z-index:5}
.travelling-instrument{right:-28px;top:145px;opacity:.94;z-index:7}

.section-bridge{position:relative;height:0;pointer-events:none;z-index:12}
.bridge-hero>img{position:absolute;right:max(70px,calc((100vw - 1190px)/2));top:-69px;width:153px;height:auto;transform:rotate(21deg);filter:drop-shadow(8px 13px 10px #1731462b)}
.culture-ribbon{z-index:8;padding:23px 0;overflow:hidden}
.culture-ribbon>div{padding-right:210px}
.story{position:relative;z-index:9;background:white}
.story.section-space{padding:116px 0 88px}
.story-layout{gap:100px}
.story-photos{height:500px}
.story-small{bottom:-160px;right:4%;width:50%;height:294px;border:9px solid white;transform:rotate(8deg);z-index:3;box-shadow:0 16px 28px #18354d1c}
.story-date{right:0}
.classes.section-space{padding-top:148px}
.class-image{border-radius:0 0 70px 0}
.class-panel{box-shadow:0 15px 55px #1b396409}
.rhythm{isolation:isolate}
.rhythm:before{z-index:-1}
.rhythm.section-space{padding-bottom:125px}
.bridge-memory figure{
  position:absolute;
  top:-62px;
  left:max(70px,calc((100vw - 1180px)/2));
  width:245px;
  height:192px;
  padding:8px 8px 29px;
  background:white;
  border-radius:2px;
  box-shadow:0 14px 28px #12314d24;
  transform:rotate(-7deg);
}
.bridge-memory figure img{width:100%;height:100%;object-fit:cover;object-position:50% 23%}
.bridge-memory figcaption{position:absolute;bottom:8px;left:13px;font-size:9px;color:var(--deep)}
.bridge-memory>span{position:absolute;top:16px;left:max(360px,calc((100vw - 610px)/2));font-family:var(--display);color:var(--blue);font-size:27px;line-height:.96;transform:rotate(-5deg)}
.gallery.section-space{padding-top:184px}
.gallery-grid,.gallery-grid.filtered{display:block;columns:3;column-gap:20px}
.gallery-grid.filtered{columns:2}
.gallery-item,.gallery-grid.filtered .gallery-item{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  margin-bottom:20px;
  break-inside:avoid;
  border-radius:8px;
  box-shadow:0 5px 14px #102b4910;
  transform:translateZ(0);
}
.gallery-item.gallery-tall{aspect-ratio:4/5.7}
.gallery-item.gallery-collage{aspect-ratio:4/5}
.gallery-grid.filtered .gallery-item{aspect-ratio:4/5}
.gallery-item img{height:100%;width:100%;object-fit:cover}
.gallery-item>span{font-size:11px;bottom:20px}
.gallery-note,.gallery-grid.filtered+.gallery-note{margin-top:18px}
.map-frame{transform:rotate(1.5deg);border-width:9px;box-shadow:0 14px 32px #16344e14}
.map-frame>*{transform-origin:center}
.final-cta{overflow:visible;isolation:isolate}
.cta-art img{bottom:-80px;width:275px;z-index:2}
.cta-circle{bottom:-58px}
.site-footer{padding-top:62px;position:relative;z-index:0}
.floating-whatsapp{width:54px;height:54px;padding:13px;justify-content:center}
.floating-whatsapp>span{display:none}
.floating-whatsapp>.icon{width:26px;height:26px}

@media(min-width:1600px){
  .hero,.hero-layout{min-height:max(860px,100svh)}
  .hero-copy{padding-top:190px;padding-bottom:130px}
  .hero-visual{height:auto;left:47%}
  .hero-photo{height:100%}
  .hero h1{font-size:126px}
  .hero-watermark{font-size:420px}
}
@media(max-width:1200px){
  .site-header{left:24px;right:24px;top:18px}
  .site-header .nav-wrap{width:calc(100% - 36px);gap:24px}
  .site-header .brand,.site-header .brand img{width:149px}
  .site-header .desktop-nav{gap:21px}
  .hero,.hero-layout{min-height:800px}
  .hero-copy{padding-top:168px;padding-bottom:110px;width:56%}
  .hero h1{font-size:7.8vw}
  .hero-visual{left:43%;height:auto}
  .hero-photo{height:100%}
  .hero-actions{gap:18px}
  .hero-actions .button{font-size:11px;padding:16px 18px}
  .hero-sticker{bottom:95px;right:10%;font-size:36px}
  .photo-credit{bottom:55px;right:9%}
  .story-layout{gap:65px}
  .story-small{bottom:-150px;height:270px}
  .story.section-space{padding-top:108px}
  .bridge-hero>img{right:60px;width:136px;top:-60px}
  .travelling-instrument{right:-34px}
  .gallery-grid,.gallery-grid.filtered{column-gap:16px}
  .gallery-item{margin-bottom:16px}
  .cta-art img{width:245px;bottom:-71px}
}
@media(max-width:960px){
  .site-header{left:18px;right:18px;top:16px}
  .site-header .nav-wrap{gap:16px;height:76px;width:calc(100% - 28px)}
  .site-header .brand,.site-header .brand img{width:130px;height:70px}
  .site-header .desktop-nav{gap:15px}
  .hero,.hero-layout{min-height:770px}
  .hero-copy{padding-top:152px;width:55%;padding-bottom:115px}
  .hero h1{font-size:7.6vw}
  .hero-visual{left:42%;height:auto}
  .hero-photo{height:100%}
  .hero-actions .text-link{display:none}
  .hero-description{font-size:14px;max-width:35ch}
  .hero-description br{display:none}
  .hero-sticker{font-size:34px;right:13%}
  .hero-watermark{font-size:275px;top:155px}
  .story-layout{gap:45px}
  .story-photos{height:455px}
  .story-small{bottom:-142px;height:245px}
  .story.section-space{padding-bottom:80px}
  .classes.section-space{padding-top:145px}
  .gallery-grid{columns:3}
  .gallery-item>span{font-size:9px;left:12px;right:12px;bottom:15px}
  .bridge-memory figure{width:220px;height:175px;left:50px}
  .bridge-memory>span{left:305px;font-size:25px}
  .cta-art img{width:220px;bottom:-55px}
}
@media(max-width:760px){
  html{scroll-padding-top:112px}
  .site-header,.site-header.is-scrolled{top:12px;left:12px;right:12px;border-radius:11px}
  .site-header .nav-wrap,.site-header.is-scrolled .nav-wrap{height:66px;gap:12px;width:calc(100% - 24px)}
  .site-header .brand,.site-header .brand img,.site-header.is-scrolled .brand img{width:114px;height:62px}
  .site-header .nav-cta{font-size:9px;padding:11px;min-height:38px;gap:8px}
  .site-header .nav-cta .icon{width:14px;height:14px}
  .site-header .menu-toggle{width:36px;padding:7px;margin-right:-5px}
  .site-header .menu-toggle span{width:21px}
  .mobile-nav{padding:10px 20px 20px;border-radius:0 0 10px 10px}
  .mobile-nav a{font-size:14px}
  .hero,.hero-layout{min-height:0}
  .hero-layout{display:block;position:static;width:calc(100% - 44px)}
  .hero-copy{width:100%;padding:126px 0 425px}
  .hero h1{font-size:clamp(48px,15.3vw,108px);line-height:.9}
  .hero-location{font-size:10px;margin-bottom:24px}
  .hero-description{font-size:13px;max-width:37ch;margin-top:25px;line-height:1.8}
  .hero-description br{display:initial}
  .hero-actions{margin-top:24px;gap:18px}
  .hero-actions .button{font-size:11px;padding:16px 18px;min-height:51px;gap:15px}
  .hero-actions .text-link{display:inline-flex;font-size:10px}
  .hero-foot{margin-top:28px;gap:20px}
  .hero-visual{left:19%;right:0;bottom:0;top:auto;width:81%;height:405px;margin:0}
  .hero-photo{height:100%;width:100%;top:0;left:0;border-radius:0}
  .hero-photo img{object-position:50% 47%}
  .hero-visual:after{background:linear-gradient(180deg,var(--deep),#103b70b3 9%,transparent 37%,transparent 75%,#103b70a6),linear-gradient(90deg,var(--deep),#103b706e 14%,transparent 47%)}
  .hero-sticker{right:11%;left:auto;bottom:65px;font-size:30px}
  .hero-sticker svg{left:-65px;top:0;width:65px}
  .photo-credit{right:9%;left:auto;bottom:22px;font-size:8px}
  .hero-watermark{right:-25px;top:auto;bottom:90px;font-size:240px;opacity:.06}
  .hero-arc{right:-350px;bottom:-360px}
  .scroll-cue{display:none}
  .travelling-instrument{top:450px;right:-62px;opacity:.52;width:85px}
  .travelling-instrument img{height:330px}
  .culture-ribbon{padding:18px 0}
  .culture-ribbon>div{padding-right:130px}
  .bridge-hero>img{right:28px;top:-46px;width:108px}
  .story.section-space{padding:98px 0 72px}
  .story-layout{gap:36px}
  .story-photos{height:400px;max-width:480px}
  .story-main{height:380px;width:76%}
  .story-small{right:4%;bottom:-125px;height:228px;width:49%;border-width:7px}
  .story-date{top:0;right:0}
  .classes.section-space{padding-top:122px}
  .class-image{border-radius:0 0 48px 0}
  .rhythm.section-space{padding-bottom:110px}
  .bridge-memory figure{left:30px;top:-48px;width:184px;height:151px;padding:6px 6px 25px}
  .bridge-memory figcaption{font-size:7px;bottom:8px;left:10px}
  .bridge-memory>span{left:auto;right:26px;top:24px;font-size:23px}
  .gallery.section-space{padding-top:158px}
  .gallery-grid,.gallery-grid.filtered{columns:2;column-gap:12px}
  .gallery-item,.gallery-grid.filtered .gallery-item,.gallery-item:last-child{height:auto;aspect-ratio:4/5;margin-bottom:12px;border-radius:6px}
  .gallery-item.gallery-tall{aspect-ratio:4/6}
  .gallery-item>span{font-size:8px;line-height:1.5;left:10px;right:10px;bottom:12px;gap:6px}
  .gallery-item>span .icon{width:18px;height:18px}
  .gallery-note,.gallery-grid.filtered+.gallery-note{margin-top:15px;font-size:10px}
  .map-frame{transform:rotate(1deg);width:calc(100% - 8px);margin:auto}
  .final-cta{padding-bottom:45px}
  .cta-art{height:230px;margin-bottom:-44px}
  .cta-art img{right:14px;width:215px;bottom:-42px}
  .cta-circle{bottom:-18px;width:240px;height:240px}
  .cta-art>span:last-child{top:18px}
  .site-footer{padding-top:75px}
}
@media(max-width:380px){
  .site-header .nav-wrap{gap:8px;width:calc(100% - 18px)}
  .site-header .brand,.site-header .brand img,.site-header.is-scrolled .brand img{width:95px}
  .site-header .nav-cta{padding:10px 8px;font-size:8px;gap:5px}
  .hero-actions .text-link{display:none}
  .hero-copy{padding-top:123px;padding-bottom:395px}
  .hero-visual{height:375px;left:15%;width:85%}
  .hero-foot{gap:15px}
  .bridge-memory figure{left:25px;width:167px;height:140px}
  .bridge-memory>span{right:18px;font-size:20px;top:24px}
  .gallery-item>span{font-size:7px;gap:4px}
  .gallery-item>span .icon{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}.hero-visual{animation:none}}
