:root{
  --gold:#cc984d;
  --gold-hi:#f3d097;
  --cream:#eee4d5;
  --ink:#060c0f;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Montserrat",system-ui,sans-serif;
  overflow:hidden;
}

.coming-soon{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#060c0f;
}

.bg-fill{
  position:absolute;
  inset:-2%;
  z-index:-8;
  background:url("assets/firstlight365-coming-soon-bg.png") center top / cover no-repeat;
  filter:saturate(.72) brightness(.22) blur(10px);
  transform:scale(1.08);
}

.bg-main{
  position:absolute;
  inset:0;
  z-index:-7;
  background:url("assets/firstlight365-coming-soon-bg.png") center top / 100% auto no-repeat;
  filter:saturate(.84) brightness(.62) contrast(1.02);
  animation:gentleFloat 18s ease-out forwards;
}

.shade{
  position:absolute;
  inset:0;
  z-index:-6;
  background:
    radial-gradient(circle at 50% 36%, rgba(246,203,118,.08), transparent 20%),
    linear-gradient(180deg, rgba(3,8,10,.18) 0%, rgba(4,8,10,.22) 18%, rgba(5,10,12,.58) 58%, rgba(4,8,10,.88) 100%),
    linear-gradient(90deg, rgba(4,8,10,.42) 0%, rgba(4,8,10,.26) 24%, rgba(4,8,10,.20) 52%, rgba(4,8,10,.42) 100%);
}

.light{
  position:absolute;
  z-index:-4;
  left:50%;
  top:12%;
  width:min(54vw,950px);
  height:min(54vw,950px);
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(247,210,133,.14) 0%, rgba(215,154,65,.08) 20%, rgba(199,131,40,.03) 42%, transparent 67%);
  filter:blur(18px);
  opacity:.46;
  animation:firstLight 5.4s ease 1s forwards;
}

.mist{
  position:absolute;
  z-index:-3;
  width:145%;
  height:40%;
  left:-22%;
  bottom:4%;
  opacity:.18;
  filter:blur(34px);
  background:
    radial-gradient(ellipse at 18% 58%, rgba(190,201,203,.50), transparent 23%),
    radial-gradient(ellipse at 52% 50%, rgba(184,194,198,.33), transparent 27%),
    radial-gradient(ellipse at 84% 58%, rgba(187,198,201,.44), transparent 23%);
  animation:mistDrift 28s linear infinite alternate;
}
.mist--two{
  bottom:22%;
  opacity:.08;
  transform:scale(.88);
  animation-duration:36s;
  animation-direction:alternate-reverse;
}

.grain{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.11;
  mix-blend-mode:soft-light;
  pointer-events:none;
  background-image:repeating-radial-gradient(circle at 20% 40%, rgba(255,255,255,.13) 0 1px, transparent 1px 4px);
  background-size:11px 11px;
}

.content{
  position:relative;
  width:min(780px, calc(100% - 42px));
  margin:0 auto;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:176px 0 88px;
  transform:translateY(-18px);
}

.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(360px, 70vw);
  margin:0 auto 20px;
  opacity:0;
}
.ornament::before,.ornament::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,166,92,.72));
}
.ornament::after{
  background:linear-gradient(90deg, rgba(212,166,92,.72), transparent);
}
.ornament span{
  width:8px;
  height:8px;
  margin:0 15px;
  border:1px solid #cc9950;
  transform:rotate(45deg);
}
.ornament--top{animation:fadeIn 1s ease .7s forwards}
.ornament--bottom{animation:fadeIn 1s ease 4.7s forwards;margin-top:22px}

.eyebrow{
  margin:0;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.36em;
  font-size:clamp(.72rem,1.22vw,.98rem);
  color:rgba(239,229,214,.86);
  opacity:0;
  transform:translateY(10px);
  animation:revealUp .9s ease .95s forwards;
}

h1{
  margin:8px 0 0;
  font-family:"Cinzel",serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.055em;
  line-height:.95;
  font-size:clamp(3.8rem, 9vw, 7.7rem);
  color:#f0d29f;
  background:linear-gradient(180deg, #fff2cb 0%, #e3bb79 44%, #ba7d35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.58));
  opacity:0;
  transform:scale(.985) translateY(12px);
  animation:heroTitle 1.18s cubic-bezier(.18,.8,.2,1) 1.2s forwards;
}

.coming{
  margin:18px 0 0;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.52em;
  font-size:clamp(.7rem,1.2vw,1rem);
  color:rgba(241,232,218,.84);
  opacity:0;
  animation:fadeIn .9s ease 2s forwards;
}

.tagline{
  margin:10px 0 0;
  font-family:"Libre Baskerville",serif;
  font-style:italic;
  font-size:clamp(1.15rem,2.3vw,1.72rem);
  color:var(--gold-hi);
  text-shadow:0 2px 18px rgba(0,0,0,.58);
  opacity:0;
  animation:fadeIn .95s ease 2.25s forwards;
}

blockquote{
  margin:22px 0 0;
  font-family:"Libre Baskerville",serif;
  font-style:italic;
  font-size:1rem;
  color:#ecdab5;
  opacity:0;
  animation:fadeIn .95s ease 2.55s forwards;
}
blockquote cite{
  display:block;
  margin-top:8px;
  font-family:"Cinzel",serif;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.59rem;
  color:rgba(229,218,201,.74);
}

.loader{
  width:min(340px, 70vw);
  margin:28px auto 0;
  opacity:0;
  animation:fadeIn 1s ease 3s forwards;
}
.loader__line{
  height:1px;
  background:rgba(236,225,209,.20);
  overflow:hidden;
}
.loader__line span{
  display:block;
  width:36%;
  height:100%;
  background:linear-gradient(90deg, transparent, #e4b768, #fff0bd, #cb9245, transparent);
  animation:travel 2.8s ease-in-out infinite;
}
.loader__copy{
  margin-top:12px;
  min-height:1em;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:.63rem;
  color:rgba(233,222,206,.73);
  transition:opacity .35s ease;
}

.mission{
  margin:0;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  line-height:1.75;
  font-size:.69rem;
  color:rgba(229,217,200,.74);
  opacity:0;
  animation:fadeIn .95s ease 4.95s forwards;
}

.footer-note{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:18px;
  white-space:nowrap;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.31em;
  font-size:.58rem;
  color:rgba(236,224,207,.58);
  opacity:0;
  animation:fadeIn .95s ease 5.35s forwards;
}
.footer-note i{
  width:28px;
  height:1px;
  background:#b98543;
}

@keyframes gentleFloat{
  from{background-position:center top}
  to{background-position:center 10px}
}
@keyframes firstLight{
  0%{opacity:0;transform:translateX(-50%) scale(.8)}
  55%{opacity:.88}
  100%{opacity:.46;transform:translateX(-50%) scale(1)}
}
@keyframes mistDrift{
  from{transform:translate3d(-3%,0,0) scale(1)}
  to{transform:translate3d(5%,-2%,0) scale(1.03)}
}
@keyframes revealUp{
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroTitle{
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes fadeIn{to{opacity:1}}
@keyframes travel{
  0%{transform:translateX(-115%)}
  50%{transform:translateX(165%)}
  100%{transform:translateX(330%)}
}

@media (max-width:820px){
  .content{
    width:min(100% - 28px, 780px);
    padding:155px 0 78px;
  }
  .bg-main{
    background-size:100% auto;
    background-position:center top;
  }
  h1{font-size:clamp(3rem, 15vw, 5.7rem)}
  .footer-note{
    letter-spacing:.17em;
    font-size:.48rem;
    gap:12px;
  }
  .footer-note i{width:18px}
}
@media (max-height:760px){
  .content{padding:150px 0 72px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .light,.ornament,.eyebrow,h1,.coming,.tagline,blockquote,.loader,.mission,.footer-note{opacity:1;transform:none}
}


.actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin:24px auto 0;
  opacity:0;
  animation:fadeIn .95s ease 2.82s forwards;
}
.btn{
  appearance:none;
  border:1px solid var(--gold);
  min-width:238px;
  padding:15px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  cursor:pointer;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.70rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  outline:none;
}
.btn--gold{
  color:#17110a;
  background:
    linear-gradient(110deg,#a87531 0%,#e4bd78 53%,#ae7730 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 9px 28px rgba(0,0,0,.28);
}
.btn--gold:hover,.btn--gold:focus-visible{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 34px rgba(0,0,0,.38),0 0 22px rgba(216,169,91,.12);
}
.btn--ghost{
  color:#eee3d1;
  background:rgba(4,12,14,.64);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:rgba(13,24,26,.82);
  box-shadow:0 10px 30px rgba(0,0,0,.32);
}

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.modal.is-open{
  opacity:1;
  visibility:visible;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 40%,rgba(192,139,61,.08),transparent 34%),
    rgba(2,7,9,.82);
  backdrop-filter:blur(10px);
}
.modal__panel{
  position:relative;
  z-index:1;
  width:min(760px,calc(100vw - 42px));
  max-height:min(82svh,760px);
  overflow:auto;
  padding:46px 52px 42px;
  border:1px solid rgba(204,152,77,.58);
  background:
    linear-gradient(rgba(8,16,18,.96),rgba(5,12,14,.98)),
    radial-gradient(circle at 50% 0,rgba(213,164,85,.12),transparent 32%);
  box-shadow:0 30px 90px rgba(0,0,0,.58);
  text-align:left;
}
.modal__panel::before{
  content:"";
  position:absolute;
  left:20px;right:20px;top:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,176,105,.58),transparent);
}
.modal__panel--compact{width:min(640px,calc(100vw - 42px))}
.modal__close{
  position:absolute;
  top:12px;
  right:16px;
  width:36px;height:36px;
  border:0;background:transparent;
  color:#d7b06f;
  font-size:1.65rem;
  cursor:pointer;
}
.modal__eyebrow{
  margin:0 0 10px;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.27em;
  font-size:.64rem;
  color:#c99b54;
}
.modal h2{
  margin:0;
  font-family:"Cinzel",serif;
  font-weight:500;
  font-size:clamp(1.7rem,3vw,2.6rem);
  line-height:1.18;
  color:#edcf98;
}
.modal__rule{
  width:110px;height:1px;
  margin:20px 0 22px;
  background:linear-gradient(90deg,#d2a156,transparent);
}
.modal p{
  color:#d6c9b8;
  font-family:"Libre Baskerville",serif;
  font-size:.95rem;
  line-height:1.78;
}
.modal__quote{
  margin:24px 0 4px;
  padding:18px 0 0;
  border-top:1px solid rgba(204,152,77,.25);
  font-family:"Libre Baskerville",serif;
  font-style:italic;
  color:#e8c888;
  font-size:1.05rem;
}
.modal__link{
  margin-top:24px;
  padding:0;
  border:0;
  background:none;
  color:#d8a85e;
  cursor:pointer;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.67rem;
}
.modal__contact-btn{
  margin-top:22px;
  width:max-content;
  max-width:100%;
  padding:15px 20px;
  border:1px solid #c28c43;
  display:inline-flex;
  gap:16px;
  align-items:center;
  font-family:"Cinzel",serif;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.68rem;
  color:#17110a;
  background:linear-gradient(110deg,#ab7934,#dfb771,#aa7330);
  text-decoration:none;
}
.contact-pending{
  margin-top:22px;
  padding:16px 18px;
  border-left:2px solid rgba(202,151,76,.72);
  background:rgba(255,255,255,.025);
  font-family:"Montserrat",sans-serif!important;
  font-size:.78rem!important;
  line-height:1.6!important;
  color:#bdb2a2!important;
}

body.modal-open{overflow:hidden}

@media (max-width:820px){
  .actions{
    flex-direction:column;
    gap:12px;
    width:100%;
  }
  .btn{
    width:min(320px,100%);
    min-width:0;
  }
  .content{
    transform:translateY(-8px);
    padding-top:148px;
  }
  .modal{
    padding:18px;
  }
  .modal__panel{
    padding:40px 25px 30px;
  }
}


/* --------------------------------------------------------------------------
   v1.3.1 — Modal typography refinement
   A more devotional/editorial voice for the story panels while preserving
   Cinzel as the FirstLight365 brand accent font.
   -------------------------------------------------------------------------- */

.modal__panel{
  font-family:"Cormorant Garamond", Georgia, serif;
}

.modal__eyebrow{
  font-family:"Cinzel", serif;
  font-weight:500;
  letter-spacing:.31em;
  font-size:.61rem;
  color:#d1a45e;
}

.modal h2{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:500;
  font-size:clamp(2.05rem,3.35vw,3.15rem);
  line-height:1.02;
  letter-spacing:.015em;
  color:#edcf98;
  text-wrap:balance;
}

.modal p{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:1.14rem;
  font-weight:500;
  line-height:1.62;
  letter-spacing:.008em;
  color:#ddd0bf;
}

.modal__panel > p:not(.modal__eyebrow):first-of-type::first-letter{
  float:left;
  margin:.02em .12em -.05em 0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:3.15rem;
  line-height:.78;
  font-weight:600;
  color:#d3a45b;
}

.modal__quote{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:1.33rem;
  line-height:1.45;
  font-weight:500;
  letter-spacing:.012em;
  color:#e8c888;
}

.modal__link,
.modal__contact-btn{
  font-family:"Cinzel", serif;
  font-weight:600;
}

.contact-pending{
  font-family:"Montserrat", sans-serif !important;
  font-size:.76rem !important;
  letter-spacing:.02em;
}

@media (max-width:820px){
  .modal h2{
    font-size:clamp(1.85rem,9vw,2.6rem);
  }
  .modal p{
    font-size:1.06rem;
    line-height:1.58;
  }
}


/* --------------------------------------------------------------------------
   v1.3.2 — final polish pass
   - more intentional modal heading measure
   - more breathing room in body copy
   - refined scrollbar styling
   - softer, more integrated close button
   - slightly more right-side padding inside modal
   -------------------------------------------------------------------------- */

.modal__panel{
  padding:48px 66px 46px 52px;
  scrollbar-width:thin;
  scrollbar-color:rgba(178,129,61,.82) rgba(10,18,20,.92);
}

.modal__panel::-webkit-scrollbar{
  width:12px;
}
.modal__panel::-webkit-scrollbar-track{
  background:rgba(10,18,20,.92);
  border-left:1px solid rgba(204,152,77,.12);
}
.modal__panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(205,154,79,.92), rgba(137,96,42,.92));
  border:2px solid rgba(10,18,20,.96);
  border-radius:14px;
}
.modal__panel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(222,171,95,.96), rgba(154,109,50,.96));
}

.modal h2{
  max-width:13ch;
  margin-right:24px;
  line-height:1.00;
  letter-spacing:.01em;
}

.modal__rule{
  margin:22px 0 24px;
}

.modal p{
  max-width:34em;
  font-size:1.16rem;
  line-height:1.72;
  margin:0 0 20px;
}

.modal p + p{
  margin-top:8px;
}

.modal__quote{
  max-width:30em;
  margin:28px 0 2px;
  padding:20px 0 0;
  line-height:1.5;
}

.modal__close{
  top:14px;
  right:18px;
  width:40px;
  height:40px;
  border:1px solid rgba(204,152,77,.22);
  border-radius:999px;
  color:#ddb36d;
  background:rgba(8,16,18,.38);
  line-height:1;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.modal__close:hover,
.modal__close:focus-visible{
  background:rgba(18,29,31,.82);
  color:#f0cd91;
  border-color:rgba(224,177,99,.44);
  transform:scale(1.03);
  outline:none;
}

.modal__link{
  margin-top:26px;
}

.contact-pending{
  max-width:36em;
}

@media (max-width:820px){
  .modal__panel{
    padding:42px 38px 32px 28px;
  }

  .modal h2{
    max-width:100%;
    margin-right:0;
    line-height:1.02;
  }

  .modal p,
  .modal__quote,
  .contact-pending{
    max-width:none;
  }
}

/* Respect the HTML hidden attribute on every screen size */
.modal__contact-btn[hidden] {
  display: none !important;
}