/* ============================================================

   PAPER BOAT / SIXTY FEET

   Creative horizontal handoff version

============================================================ */



:root{

  --sand:#E9DCC0;

  --sand-deep:#D8C7A3;

  --husk:#8A5626;

  --frond:#2E6B33;

  --sky-low:#7CC6EE;

  --sky:#1E8FE0;

  --sky-high:#0B4E8A;

  --flesh:#FBF6E9;

  --ink:#10241C;

  --sun:#F0A92C;

  --alert:#FFAE90;



  --page-bg:var(--sand);



  --display:'Fraunces','Hoefler Text',Georgia,serif;

  --body:'Archivo',system-ui,-apple-system,sans-serif;

  --data:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;



  --edge:clamp(20px,5vw,76px);



  --handoff:0;

  --handoff-pct:0%;

  --handoff-shift:0px;

}



*,

*::before,

*::after{

  box-sizing:border-box;

}



html{

  scroll-behavior:auto;

  -webkit-text-size-adjust:100%;

}



body{

  margin:0;

  min-width:320px;

  overflow-x:hidden;



  background:var(--page-bg);

  color:var(--ink);



  font-family:var(--body);

  font-size:clamp(15px,1.05vw,17px);

  line-height:1.55;



  transition:background-color .25s linear;

}



img,

video,

canvas{

  display:block;

  max-width:100%;

}



a{

  color:inherit;

}



::selection{

  background:var(--sun);

  color:var(--ink);

}



:focus-visible{

  outline:2px solid var(--sun);

  outline-offset:4px;

}



.u-mono{

  font-family:var(--data);

  font-size:.68rem;

  font-weight:500;

  letter-spacing:.18em;

  text-transform:uppercase;

}





/* ============================================================

   MASTHEAD

============================================================ */



.masthead{

  position:fixed;

  inset:0 0 auto;

  z-index:100;



  display:flex;

  align-items:center;

  justify-content:center;



  padding:clamp(16px,2.2vw,26px) var(--edge);



  color:var(--flesh);

  text-shadow:0 1px 12px rgba(3,26,48,.55);



  pointer-events:none;

}



.masthead__mark{

  pointer-events:auto;



  font-family:var(--display);

  font-variation-settings:'SOFT' 30,'WONK' 1,'opsz' 40;

  font-size:1rem;

  font-weight:700;



  text-decoration:none;

}





/* ============================================================

   CLIMB

============================================================ */



.climb{

  position:relative;

  height:500vh;

}



.stage{

  position:sticky;

  top:0;



  height:100vh;

  height:100svh;



  overflow:hidden;



  background:var(--sky);

}



.stage__video{

  position:absolute;

  inset:0;



  width:100%;

  height:100%;

}



.stage__scrim{

  position:absolute;

  inset:0;



  background:

    radial-gradient(

      130% 90% at 50% 45%,

      rgba(0,0,0,0) 52%,

      rgba(3,26,48,.42) 100%

    );



  pointer-events:none;

}



.stage__wash{

  position:absolute;

  inset:0;



  opacity:0;



  transition:opacity .55s ease;



  pointer-events:none;

}



.stage__wash--l{

  background:

    linear-gradient(

      100deg,

      rgba(4,32,58,.62) 0%,

      rgba(4,32,58,.32) 34%,

      rgba(4,32,58,0) 62%

    );

}



.stage__wash--r{

  background:

    linear-gradient(

      260deg,

      rgba(4,32,58,.62) 0%,

      rgba(4,32,58,.32) 34%,

      rgba(4,32,58,0) 62%

    );

}



.stage__wash.is-on{

  opacity:1;

}



.stage__grain{

  position:absolute;

  inset:-50%;



  opacity:.045;

  mix-blend-mode:overlay;



  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www\.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");



  pointer-events:none;

}





/* ============================================================

   CLIMB COPY

============================================================ */



.beats{

  position:absolute;

  inset:0;



  display:grid;

  align-items:center;

  justify-items:start;



  padding:0 var(--edge);



  color:var(--flesh);

}



.beat{

  grid-area:1/1;



  max-width:32ch;



  opacity:0;

  transform:translateY(26px);



  transition:

    opacity .38s ease,

    transform .48s cubic-bezier(.16,.84,.24,1);

}



.beat.is-on{

  opacity:1;

  transform:none;

}



.beat--right{

  justify-self:end;

  text-align:right;

}



.beat__h{

  margin:0;



  max-width:11ch;



  font-family:var(--display);

  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 100;

  font-size: clamp(2.1rem, 5.4vw, 3.0rem);

  font-weight:760;

  line-height:.9;

  letter-spacing:-.04em;



  text-wrap:balance;

}





/* ============================================================

   SCROLL CUE

============================================================ */



.cue{

  position:absolute;

  z-index:20;



  left:50%;

  bottom:clamp(26px,5vh,52px);



  display:flex;

  align-items:center;

  gap:.7em;



  transform:translateX(-50%);



  color:var(--flesh);

  text-shadow:0 1px 12px rgba(3,26,48,.6);



  opacity:1;



  transition:opacity .6s ease;

}



.cue.is-gone{

  opacity:0;

}



.cue-dot{

  width:7px;

  height:7px;



  border-radius:50%;



  background:var(--sun);



  animation:cueDrop 2.2s cubic-bezier(.4,0,.2,1) infinite;

}



@keyframes cueDrop{

  0%,100%{

    transform:translateY(-5px);

    opacity:.3;

  }



  50%{

    transform:translateY(5px);

    opacity:1;

  }

}





/* ============================================================

   SUMMIT

============================================================ */



.summit{

  position:relative;



  background:var(--sky-high);

  color:var(--flesh);

}





/* ============================================================

   HORIZONTAL HANDOFF



   The section is taller than the viewport.

   The sticky viewport remains still while JS changes --handoff.

============================================================ */



.summit-transition{

  position:relative;

  height:190vh;

}



.summit-transition__sticky{

  position:sticky;

  top:0;



  height:100vh;

  height:100svh;



  overflow:hidden;



  isolation:isolate;



  background:var(--sky-high);

}



.summit-transition__film{

  position:absolute;

  inset:0;

  z-index:0;



  width:100%;

  height:100%;



  transform:scale(1);

  filter:none;

  will-change:transform;

}



.summit-transition__shade{

  position:absolute;

  inset:0;

  z-index:1;



  background:

    linear-gradient(

      90deg,

      rgba(4,28,50,.05),

      rgba(4,28,50,.18)

    ),

    radial-gradient(

      110% 100% at 50% 45%,

      transparent 35%,

      rgba(3,26,48,.4) 100%

    );



  pointer-events:none;

}





/* ------------------------------------------------------------

   Main reveal curtain.

   clip-path is controlled by JS through --handoff.

   0  => hidden

   1  => fully revealed

\------------------------------------------------------------- */



.summit-transition__reveal{

  position:absolute;

  top:0;

  left:0;

  bottom:0;

  z-index:5;



  width:var(--handoff-pct);

  overflow:hidden;



  background:

    linear-gradient(

      118deg,

      #0B4E8A 0%,

      #075994 55%,

      #064A80 100%

    );



  will-change:width;

}





/* soft edge following the horizontal reveal */

.summit-transition__reveal::before{

  content:"";



  position:absolute;

  top:0;

  right:0;

  bottom:0;



  width:clamp(80px,12vw,220px);



  transform:translateX(45%);



  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(124,198,238,.11),

      rgba(240,169,44,.08)

    );



  filter:blur(10px);



  pointer-events:none;

}





/* subtle giant decorative circle */

.summit-transition__reveal::after{

  content:"";



  position:absolute;



  width:min(60vw,760px);

  aspect-ratio:1;



  right:-22vw;

  top:50%;



  border:1px solid rgba(251,246,233,.08);

  border-radius:50%;



  transform:translateY(-50%) scale(1);



  box-shadow:

    0 0 0 70px rgba(251,246,233,.025),

    0 0 0 140px rgba(251,246,233,.018);



  pointer-events:none;

}





/* ============================================================

   SUMMIT INTRO CONTENT

============================================================ */



.summit-transition__content{

  position:relative;

  z-index:2;



  width:100vw;

  max-width:none;

  height:100%;



  margin:0;

  padding:

    clamp(92px,12vh,140px)

    var(--edge)

    clamp(48px,7vh,80px);



  display:grid;

  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);

  align-items:center;

  gap:clamp(36px,6vw,90px);



  transform:translateX(var(--handoff-shift));

  opacity:1;



  will-change:transform;

}



.summit__copy{

  position:relative;

  z-index:3;



  min-width:0;

}



.summit__eyebrow{

  display:block;



  margin-bottom:clamp(18px,3vh,32px);



  color:var(--sun);

}



.summit__h{

  margin:0 0 clamp(26px,4vh,42px);



  max-width:9ch;



  font-family:var(--display);

  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 144;

  font-size:clamp(4rem,7vw,7.2rem);

  font-weight:800;

  line-height:.84;

  letter-spacing:-.055em;



  text-indent:-.03em;

}



.summit__h > span{

  color:var(--sky-low);

}





/* ============================================================

   ONLY "EVERYDAY" TYPES

============================================================ */



.typing-word{

  display:inline-block;



  min-width:1px;



  white-space:nowrap;



  color:var(--sky-low);

}



.typing-word::after{

  content:"";



  display:inline-block;



  width:3px;

  height:.78em;



  margin-left:.07em;



  vertical-align:-.04em;



  background:currentColor;



  animation:typingCursor .65s steps(1,end) infinite;

}



.typing-word.typing-done::after{

  opacity:0;

  animation:none;

}



@keyframes typingCursor{

  0%,45%{

    opacity:1;

  }



  46%,100%{

    opacity:0;

  }

}





.summit__p{

  max-width:48ch;



  margin:0;



  color:rgba(251,246,233,.83);



  font-size:clamp(1rem,1.2vw,1.16rem);

  line-height:1.72;



  opacity:1;

  transform:none;

}



.summit__scroll-note{

  display:flex;

  align-items:center;

  gap:12px;



  margin-top:clamp(30px,5vh,50px);



  color:rgba(251,246,233,.55);

}



.summit__scroll-line{

  position:relative;



  width:46px;

  height:1px;



  overflow:hidden;



  background:rgba(251,246,233,.2);

}



.summit__scroll-line::after{

  content:"";



  position:absolute;

  inset:0;



  transform:translateX(-100%);



  background:var(--sun);



  animation:lineTravel 1.8s ease-in-out infinite;

}



@keyframes lineTravel{

  0%{

    transform:translateX(-100%);

  }



  55%,

  100%{

    transform:translateX(100%);

  }

}





/* ============================================================

   SUMMIT IMAGE

============================================================ */



.summit__image-wrap{

  position:relative;



  justify-self:end;



  width:min(100%,480px);



  transform:none;

  opacity:1;

}



.summit__image-frame{

  position:relative;



  overflow:hidden;



  aspect-ratio:4/5;



  border-radius:2px;

/* 

  background:#0A3E6B;



  box-shadow:

    0 34px 90px rgba(2,20,38,.35); */

}



.summit__image-frame::after{

  content:"";



  position:absolute;

  inset:0;



  /* border:1px solid rgba(251,246,233,.14); */



  pointer-events:none;

}



.summit__image{

  width:100%;

  height:100%;



  object-fit:cover;

  object-position:center;



  transform:scale(1);

}



.summit__image-caption{

  display:block;



  margin-top:14px;



  color:rgba(251,246,233,.55);



  text-align:right;

}





/* ============================================================

   HORIZONTAL SCAN LINE + PROGRESS

============================================================ */



.handoff-line{

  position:absolute;

  top:0;

  bottom:0;

  z-index:10;



  width:1px;



  left:var(--handoff-pct);

  transform:translateX(-1px);



  background:

    linear-gradient(

      to bottom,

      transparent 0%,

      rgba(240,169,44,.7) 18%,

      var(--sun) 50%,

      rgba(240,169,44,.7) 82%,

      transparent 100%

    );



  box-shadow:

    0 0 28px rgba(240,169,44,.35);



  opacity:.92;



  pointer-events:none;

}



.handoff-line span{

  position:absolute;

  top:50%;

  left:50%;



  width:9px;

  height:9px;



  transform:translate(-50%,-50%) rotate(45deg);



  background:var(--sun);

}



.handoff-count{

  position:absolute;

  z-index:20;



  right:var(--edge);

  bottom:clamp(22px,4vh,42px);



  display:flex;

  align-items:center;

  gap:12px;



  color:rgba(251,246,233,.55);



  mix-blend-mode:screen;

}



.handoff-count span:nth-child(2){

  min-width:2.3em;



  color:var(--sun);

  text-align:center;

}





/* ============================================================

   CONTENT BELOW HORIZONTAL TRANSITION

============================================================ */



.summit-content{

  position:relative;



  padding:

    clamp(80px,12vh,150px)

    var(--edge)

    clamp(90px,14vh,170px);



  background:

    radial-gradient(

      80% 70% at 50% 0%,

      rgba(30,143,224,.12),

      transparent 70%

    ),

    #073E6D;

}



.summit-content__inner{

  width:min(1180px,100%);

  margin-inline:auto;

}





/* ============================================================

   OFFERS

============================================================ */



.summit__offers{

  margin-bottom:clamp(60px,10vh,110px);

}



.summit__offers-title{

  display:flex;

  align-items:center;

  gap:18px;



  margin:0 0 26px;



  font-family:var(--display);

  font-size:clamp(1.8rem,3vw,2.6rem);

  line-height:1;



  color:var(--flesh);

}



.summit__offers-title::after{

  content:"";



  flex:1;



  height:1px;



  background:rgba(251,246,233,.18);

}



.summit__ul{

  list-style:none;



  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:0 34px;



  margin:0;

  padding:0;

}



.summit__ul li{

  position:relative;



  padding:17px 0 17px 24px;



  border-bottom:1px solid rgba(251,246,233,.14);



  color:rgba(251,246,233,.84);



  line-height:1.55;

}



.summit__ul li::before{

  content:"";



  position:absolute;

  top:25px;

  left:0;



  width:7px;

  height:7px;



  border-radius:50%;



  background:var(--sun);

}





/* ============================================================

   BOOKING CARD

============================================================ */



.book-card{

  position:relative;

  isolation:isolate;



  display:grid;

  grid-template-columns:minmax(0,1.22fr) minmax(280px,.78fr);

  gap:clamp(40px,7vw,90px);



  padding:clamp(32px,5vw,58px);



  overflow:hidden;



  border:1px solid rgba(251,246,233,.14);



  background:

    linear-gradient(

      100deg,

      rgba(5,37,68,.97),

      rgba(7,48,83,.92)

    ),

    url("../images/Fresh-Coconuts.jpg") center/cover no-repeat;



  box-shadow:0 30px 80px rgba(2,20,38,.2);

}



.book-card::before{

  content:"";



  position:absolute;

  inset:0;

  z-index:-1;



  background:

    linear-gradient(

      135deg,

      rgba(240,169,44,.09),

      transparent 40%

    );



  pointer-events:none;

}



.book__eyebrow{

  display:block;



  margin-bottom:14px;



  color:var(--sun);

}



.book h3{

  margin:0 0 34px;



  max-width:14ch;



  font-family:var(--display);

  font-size:clamp(2rem,3.4vw,3.2rem);

  font-weight:700;

  line-height:1.05;



  color:var(--flesh);

}



.book__grid{

  display:grid;

  grid-template-columns:1fr;

  gap:25px;

}



.field{

  display:flex;

  flex-direction:column;

  gap:8px;



  min-width:0;

}



.field label{

  color:rgba(251,246,233,.56);

}



.field input{

  width:100%;



  padding:12px 0;



  border:0;

  border-bottom:1px solid rgba(251,246,233,.32);

  border-radius:0;

  outline:none;



  background:transparent;

  color:var(--flesh);



  font:inherit;

  font-size:1rem;



  transition:border-color .25s ease;

}



.field input::placeholder{

  color:rgba(251,246,233,.34);

}



.field input:focus{

  border-bottom-color:var(--sun);

}



.field.has-error input{

  border-bottom-color:var(--alert);

}



.field__err{

  min-height:1em;



  color:var(--alert);



  font-size:.62rem;

}



.book__btn{

  width:100%;

  min-height:56px;



  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;



  padding:16px 20px;



  border:0;



  background:var(--sun);

  color:var(--ink);



  font-family:var(--data);

  font-size:.7rem;

  font-weight:600;

  letter-spacing:.16em;

  text-transform:uppercase;



  cursor:pointer;



  transition:

    transform .25s ease,

    *background* .25s ease;

}



.book__btn:hover{

  transform:translateY(-2px);



  background:var(--flesh);

}



.book-address{

  align-self:stretch;



  padding-left:clamp(26px,4vw,46px);



  border-left:1px solid rgba(251,246,233,.18);

}



.book-address p{

  margin:0 0 24px;



  color:rgba(251,246,233,.82);



  line-height:1.85;

}



.book-address strong{

  color:var(--flesh);

}



.book-address p + p{

  padding-top:22px;



  border-top:1px solid rgba(251,246,233,.16);



  font-size:.92rem;

}



.book__done{

  margin-top:35px;

  padding:28px;



  border:1px solid rgba(251,246,233,.16);



  color:var(--flesh);

}



.book__done[hidden]{

  display:none;

}





/* ============================================================

   FOOTER

============================================================ */



.colophon{

  padding:

    clamp(30px,6vh,56px)

    var(--edge);



  border-top:1px solid rgba(251,246,233,.12);



  background:#06365E;

  color:rgba(251,246,233,.55);

}



.colophon__inner{

  width:min(1180px,100%);

  margin-inline:auto;



  display:flex;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;

}





/* ============================================================

   LOADER

============================================================ */



.loader{

  position:fixed;

  right:var(--edge);

  bottom:clamp(34px,6vh,72px);

  z-index:150;



  display:flex;

  align-items:center;

  gap:.8em;



  color:var(--flesh);

  text-shadow:0 1px 12px rgba(3,26,48,.6);



  transition:opacity .5s ease;

}



.loader.is-done{

  opacity:0;

  pointer-events:none;

}



.loader.is-fail{

  max-width:min(90vw,42ch);



  color:var(--alert);



  text-align:right;

}



.loader__track{

  width:74px;

  height:2px;



  overflow:hidden;



  background:rgba(251,246,233,.25);

}



.loader__fill{

  display:block;



  width:0;

  height:100%;



  background:var(--sun);



  transition:width .3s ease;

}





/* ============================================================

   TABLET

============================================================ */



@media (max-width:1024px){



  .climb{

    height:430vh;

  }



  .summit-transition{

    height:175vh;

  }



  .summit-transition__content{

    grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);

    gap:36px;

  }



  .summit__h{

    font-size:clamp(3.5rem,7.8vw,5.8rem);

  }



  .summit__ul{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .book-card{

    grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);

    gap:34px;

  }



}





/* ============================================================

   MOBILE

============================================================ */



@media (max-width:767px){



  .climb{

    height:380vh;

  }



  .beats{

    align-items:end;

    justify-items:start;



    padding:

      0

      20px

      clamp(110px,18vh,160px);

  }



  .beat,

  .beat--right{

    justify-self:start;



    max-width:90%;



    text-align:left;

  }



  .beat__h{

    max-width:11ch;



    font-size:clamp(2.1rem,10.5vw,3.4rem);

  }



  .stage__scrim{

    background:

      linear-gradient(

        to top,

        rgba(4,32,58,.75) 0%,

        rgba(4,32,58,.35) 36%,

        rgba(4,32,58,0) 65%

      ),

      radial-gradient(

        140% 90% at 50% 40%,

        transparent 52%,

        rgba(3,26,48,.34) 100%

      );

  }





  /* horizontal reveal still works on mobile */

  .summit-transition{

    height:165vh;

  }



  .summit-transition__content{

    display:block;



    padding:

      90px

      20px

      48px;



    transform:translateX(var(--handoff-shift));

  }



  .summit__copy{

    position:relative;

    z-index:4;



    max-width:100%;

  }



  .summit__eyebrow{

    margin-bottom:14px;

  }



  .summit__h{

    max-width:9ch;



    margin-bottom:22px;



    font-size:clamp(3rem,13.5vw,4.7rem);

  }



  .summit__p{

    max-width:34ch;



    font-size:.94rem;

    line-height:1.62;

  }



  .summit__scroll-note{

    display:none;

  }



  .summit__image-wrap{

    position:absolute;

    right:-12%;

    bottom:-4%;



    width:min(64vw,330px);



    opacity:.58;

  }



  .summit__image-frame{

    aspect-ratio:4/5;



    box-shadow:none;

  }



  .summit__image-caption{

    display:none;

  }



  .handoff-count{

    right:20px;

    bottom:24px;



    font-size:.56rem;

  }



  .handoff-line span{

    width:7px;

    height:7px;

  }



  .typing-word::after{

    width:2px;

  }





  .summit-content{

    padding:

      72px

      20px

      90px;

  }



  .summit__ul{

    grid-template-columns:1fr;

  }



  .book-card{

    grid-template-columns:1fr;

    gap:36px;



    padding:28px 22px;

  }



  .book h3{

    max-width:13ch;



    font-size:clamp(1.9rem,9vw,2.7rem);

  }



  .book-address{

    padding:

      28px

      0

      0;



    border-left:0;

    border-top:1px solid rgba(251,246,233,.18);

  }



}





/* ============================================================

   SMALL MOBILE

============================================================ */



@media (max-width:420px){



  .summit__h{

    font-size:clamp(2.65rem,13vw,3.65rem);

  }



  .summit__p{

    max-width:31ch;

  }



  .summit__image-wrap{

    width:61vw;

  }



}





/* ============================================================

   REDUCED MOTION

============================================================ */



@media (prefers-reduced-motion:reduce){



  .cue-dot,

  .summit__scroll-line::after,

  .typing-word::after{

    animation:none;

  }



  .beat{

    transition:none;

  }



  .summit-transition__content,

  .summit__image-wrap,

  .summit__image,

  .summit-transition__film{

    transition:none;

  }



}





/* ============================================================

   FIXED HORIZONTAL REVEAL LAYOUT

============================================================ */



.summit-transition__content{

  padding-left:max(var(--edge), calc((100vw - 1000px)/3 + var(--edge)));

  padding-right:max(var(--edge), calc((100vw - 1000px)/3 + var(--edge)));

      /* width: min(1300px, 100%);

    margin-inline: auto; */

}



.summit-transition__reveal{

  box-shadow:18px 0 55px rgba(4,24,43,.18);

}



/* Keep the final frame under the transition without looking like

   a second stacked image section. */

.summit-transition__film{

  object-fit:cover;

}



.summit-transition{

  margin-top:0;

}



/* Horizontal section heading */

.summit__h{

  font-size:clamp(4.6rem,7.4vw,7.8rem);

  line-height:.82;

  letter-spacing:-.055em;

}



@media (max-width:1024px){

  .beat__h{

    font-size:clamp(2.8rem,6.5vw,4.8rem);

  }



  .summit__h{

    font-size:clamp(4rem,8.2vw,6rem);

  }

}



@media (max-width:767px){

  .beat__h{

    font-size:clamp(2.2rem,10.8vw,3.6rem);

    max-width:10ch;

  }



  .summit-transition__content{

    width:100vw;

    padding-left:20px;

    padding-right:20px;

  }



  .summit__h{

    font-size:clamp(3.15rem,13vw,4.8rem);

  }

}





.summit-transition__image{

    position:absolute;

    inset:0;

    z-index:0;



    width:10%;

    height:100%;



    object-fit:cover;

    object-position:center;



    display:block;

}

/* ============================================================
   CREATIVE FRAME TRANSITION
   Added on top of your adjusted font sizes / padding.
============================================================ */

.frame-motion{
  position:absolute;
  inset:0;
  z-index:1;

  overflow:hidden;
  pointer-events:none;

  background:
    radial-gradient(
      48% 58% at 76% 44%,
      rgba(124,198,238,.20),
      transparent 72%
    ),
    linear-gradient(
      120deg,
      rgba(10,77,133,.96) 0%,
      rgba(11,78,138,.98) 48%,
      rgba(6,54,94,1) 100%
    );
}

.frame-orbit{
  position:absolute;
  left:72%;
  top:50%;

  aspect-ratio:1;
  border:1px solid rgba(251,246,233,.12);
  border-radius:50%;

  transform:
    translate(-50%,-50%)
    scale(var(--orbit-scale));

  opacity:var(--orbit-opacity);

  will-change:transform,opacity;
}

.frame-orbit--1{
  width:min(66vw,900px);

  box-shadow:
    0 0 0 72px rgba(251,246,233,.025),
    0 0 0 145px rgba(251,246,233,.016);
}

.frame-orbit--2{
  width:min(40vw,560px);
  border-color:rgba(240,169,44,.18);
}

.motion-card{
  position:absolute;
  top:50%;
  left:0;

  width:clamp(230px,22vw,390px);
  height:clamp(150px,28vh,250px);

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:clamp(18px,2.2vw,30px);

  border:1px solid rgba(251,246,233,.24);

  background:
    linear-gradient(
      145deg,
      rgba(251,246,233,.07),
      rgba(251,246,233,.018)
    );

  box-shadow:
    0 30px 70px rgba(2,20,38,.18),
    inset 0 0 0 1px rgba(255,255,255,.025);

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  opacity:var(--frame-opacity);

  will-change:transform,opacity;
}

.motion-card::before,
.motion-card::after{
  content:"";
  position:absolute;

  width:18px;
  height:18px;

  border-color:var(--sun);
  border-style:solid;

  opacity:.9;
}

.motion-card::before{
  top:-1px;
  left:-1px;
  border-width:2px 0 0 2px;
}

.motion-card::after{
  right:-1px;
  bottom:-1px;
  border-width:0 2px 2px 0;
}

.motion-card--1{
  transform:
    translate3d(var(--frame1-x),var(--frame1-y),0)
    translateY(-50%)
    rotate(var(--frame1-r));
}

.motion-card--2{
  transform:
    translate3d(var(--frame2-x),var(--frame2-y),0)
    translateY(-50%)
    rotate(var(--frame2-r));
}

.motion-card--3{
  transform:
    translate3d(var(--frame3-x),var(--frame3-y),0)
    translateY(-50%)
    rotate(var(--frame3-r));
}

.motion-card__no{
  color:var(--sun);
}

.motion-card__word{
  max-width:8ch;

  font-family:var(--display);
  font-size:clamp(2rem,3.4vw,4.2rem);
  font-weight:760;
  line-height:.88;
  letter-spacing:-.045em;

  color:var(--flesh);
}

.motion-track{
  position:absolute;
  left:var(--edge);
  right:var(--edge);
  bottom:clamp(30px,6vh,60px);

  height:1px;
  overflow:hidden;

  background:rgba(251,246,233,.14);
}

.motion-track__fill{
  display:block;

  width:var(--track-progress);
  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--sun),
      var(--sky-low)
    );

  box-shadow:
    0 0 18px rgba(240,169,44,.35);
}

.frame-motion::after{
  content:"";

  position:absolute;
  inset:0;

  opacity:.18;

  background-image:
    radial-gradient(
      circle,
      rgba(251,246,233,.7) 1px,
      transparent 1px
    );

  background-size:34px 34px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 25%,
      #000 80%,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 25%,
      #000 80%,
      transparent
    );
}

/* Keep transition layers ordered correctly */
.summit-transition__shade{
  z-index:2;
}

.summit-transition__reveal{
  z-index:6;
}

.handoff-line{
  z-index:12;
}

.handoff-count{
  z-index:14;
}


/* ============================================================
   RESPONSIVE FRAME MOTION
============================================================ */

@media (max-width:1024px){

  .motion-card{
    width:clamp(210px,29vw,330px);
    height:clamp(140px,24vh,215px);
  }

  .motion-card__word{
    font-size:clamp(1.8rem,4.5vw,3.2rem);
  }

  .frame-orbit{
    left:76%;
  }
}

@media (max-width:767px){

  .frame-motion{
    background:
      radial-gradient(
        70% 54% at 82% 42%,
        rgba(124,198,238,.17),
        transparent 72%
      ),
      linear-gradient(
        120deg,
        #0A4D85,
        #073E6D
      );
  }

  .motion-card{
    width:min(68vw,270px);
    height:150px;
    padding:18px;
  }

  .motion-card__word{
    font-size:clamp(1.65rem,8vw,2.5rem);
  }

  .frame-orbit{
    left:83%;
  }

  .frame-orbit--1{
    width:92vw;
  }

  .frame-orbit--2{
    width:58vw;
  }

  .motion-track{
    left:20px;
    right:20px;
    bottom:28px;
  }
}

@media (prefers-reduced-motion:reduce){

  .motion-card,
  .frame-orbit,
  .motion-track__fill{
    transition:none;
  }
}

/* HEADER LOGO */
.masthead__mark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.masthead__logo {
    width: 150px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* TABLET */
@media (max-width: 1024px) {
    .masthead__logo {
        width: 130px;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .masthead__logo {
        width: 110px;
    }
}