*{box-sizing:border-box}

:root{
  --gold:#e9bd32;
  --white:#fff;
  --title:"Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", Arial, sans-serif;
}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#08233a;
}

body{
  font-family:var(--sans);
}

.landing{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  color:var(--white);
  background:url("assets/desktop-background.webp") center center/cover no-repeat;
  isolation:isolate;
}

/* very light readability layer; the supplied background remains visible */
.landing::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:rgba(5,31,48,.08);
}

.header{
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  right:0;
  padding:6.35vh 7.1vw 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.brand{
  display:block;
  width:154px;
  line-height:0;
}

.brand img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.contact-top{
  width:191px;
  height:54px;
  border:1.5px solid var(--gold);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px 0 37px;
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:400;
}

.arrow{
  position:relative;
  width:30px;
  height:18px;
  flex:0 0 30px;
}

.arrow::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:25px;
  height:1.5px;
  background:var(--gold);
}

.arrow::after{
  content:"";
  position:absolute;
  right:0;
  top:3px;
  width:10px;
  height:10px;
  border-top:1.5px solid var(--gold);
  border-right:1.5px solid var(--gold);
  transform:rotate(45deg);
}

.menu{
  display:none;
}

.content{
  position:absolute;
  z-index:3;
  top:29.7vh;
  left:50%;
  width:100%;
  transform:translateX(-50%);
  text-align:center;
}

.content h1{
  margin:0;
  font-family:var(--title);
  font-size:clamp(100px,8.1vw,145px);
  line-height:.82;
  font-weight:400;
  letter-spacing:.18em;
  transform:translateX(.09em);
}

.desktop-tagline{
  margin-top:43px;
  color:var(--gold);
  font-size:18px;
  line-height:1;
  font-weight:500;
  letter-spacing:.34em;
  transform:translateX(.17em);
}

.mobile-tagline,
.mobile-divider,
.contact-mobile{
  display:none;
}

.subtitle{
  margin:17px 0 0;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:400;
}

.topics{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:8.5vh;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:23px;
  white-space:nowrap;
}

.topics a{
  color:#fff;
  text-decoration:none;
  font-size:13px;
  line-height:1;
  font-weight:400;
  letter-spacing:.18em;
}

.topics i{
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--gold);
}


/* =========================
   MOBILE — Canva reference
   ========================= */

@media (max-width:800px){
  .landing{
    min-height:100svh;
    background-image:url("assets/mobile-background.webp");
    background-position:center center;
  }

  .header{
    padding:5.7vh 6.6vw 0;
    align-items:flex-start;
  }

  .brand{
    width:143px;
  }

  .contact-top{
    display:flex;
    width:191px;
    height:54px;
    font-size:15px;
  }

  .menu{
    display:none;
  }

  .content{
    top:46.7vh;
    left:6.6vw;
    width:86.8vw;
    transform:none;
    text-align:center;
  }

  .content h1{
    font-size:clamp(70px,18.6vw,118px);
    line-height:.83;
    letter-spacing:.14em;
    transform:translateX(.07em);
  }

  .mobile-divider{
    display:none;
  }

  .desktop-tagline{
    display:block;
    margin-top:39px;
    font-size:clamp(12px,2.65vw,17px);
    letter-spacing:.28em;
    transform:translateX(.14em);
  }

  .mobile-tagline{
    display:none;
  }

  .subtitle{
    margin-top:17px;
    font-size:clamp(13px,2.7vw,17px);
  }

  .contact-mobile{
    display:none;
  }

  .topics{
    left:50%;
    bottom:5.7vh;
    gap:18px;
    transform:translateX(-50%);
  }

  .topics a{
    font-size:clamp(8px,1.8vw,12px);
    letter-spacing:.13em;
  }

  .topics i{
    width:5px;
    height:5px;
    flex-basis:5px;
  }
}


/* narrow phones: matches the supplied mobile composition */
@media (max-width:600px){
  .header{
    padding:5.1vh 6.4vw 0;
  }

  .brand{
    width:145px;
  }

  .contact-top{
    width:126px;
    height:43px;
    padding:0 13px 0 20px;
    font-size:11px;
  }

  .contact-top .arrow{
    width:24px;
    height:16px;
    flex-basis:24px;
  }

  .contact-top .arrow::before{
    width:20px;
  }

  .contact-top .arrow::after{
    width:8px;
    height:8px;
    top:4px;
  }

  .content{
    top:39.0vh;
    left:5.8vw;
    width:88.4vw;
  }

  .content h1{
    font-size:18.4vw;
    line-height:.84;
    letter-spacing:.10em;
    transform:translateX(.05em);
  }

  .desktop-tagline{
    margin-top:35px;
    font-size:2.55vw;
    letter-spacing:.27em;
  }

  .subtitle{
    margin-top:14px;
    font-size:3.05vw;
  }

  .topics{
    left:50%;
    bottom:4.9vh;
    width:88vw;
    justify-content:space-between;
    gap:0;
  }

  .topics a{
    font-size:2.1vw;
    letter-spacing:.095em;
  }

  .topics i{
    width:4px;
    height:4px;
    flex-basis:4px;
  }
}


/* Extra-tall modern phones */
@media (max-width:600px) and (min-height:850px){
  .content{
    top:39.0vh;
  }
}

/* Small-height mobile screens */
@media (max-width:600px) and (max-height:760px){
  .content{
    top:39vh;
  }

  .topics{
    bottom:25px;
  }
}


/* =========================
   PAGE LOADER
   Prevents the blue/background flash while the hero image loads
   ========================= */

html,
body{
  background:#061d32;
}

.page-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#061d32;
  opacity:1;
  visibility:visible;
  transition:opacity .45s ease, visibility .45s ease;
}

.loader-inner{
  width:min(230px, 55vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  animation:loaderFloat 1.8s ease-in-out infinite;
}

.loader-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.loader-line{
  width:90px;
  height:2px;
  overflow:hidden;
  background:rgba(233,189,50,.20);
  border-radius:99px;
}

.loader-line span{
  display:block;
  width:38%;
  height:100%;
  background:var(--gold);
  border-radius:99px;
  animation:loaderProgress 1.15s ease-in-out infinite;
}

@keyframes loaderProgress{
  0%{
    transform:translateX(-140%);
    opacity:.35;
  }
  50%{
    opacity:1;
  }
  100%{
    transform:translateX(380%);
    opacity:.35;
  }
}

@keyframes loaderFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-5px);
  }
}

.page-ready .page-loader{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .loader-inner,
  .loader-line span{
    animation:none;
  }

  .page-loader{
    transition:none;
  }
}