@charset "utf-8";

html,
body{
  min-height:100%;
}

:root{
  --static-title-gradient:
    linear-gradient(
      180deg,
      #fff4d6 0%,
      #ffe8b0 32%,
      var(--gold) 68%,
      #e2b866 100%
    );
  --static-gold-pill:
    linear-gradient(
      180deg,
      #ffe0a8 0%,
      var(--gold) 28%,
      var(--gold2) 58%,
      var(--gold3) 100%
    );
  --static-panel-shadow:0 16px 34px rgba(0,0,0,.40);
  --static-panel-shadow-strong:0 18px 42px rgba(0,0,0,.50);
  --static-text-shadow:
    0 1px 0 rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.34);
  --static-focus-ring:
    0 0 0 3px rgba(240,197,111,.22),
    0 0 0 6px rgba(0,0,0,.40);
}

/* =========================
   BODY
   ========================= */

body{
  background-color:#0e0e0e;
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.92) 100%
    ),
    linear-gradient(180deg, rgba(14,14,14,.45) 0%, rgba(14,14,14,.84) 100%),
    url("../images/textures/stone_seamless.png");
  background-size:100% 100%, 100% 100%, 800px 800px;
  background-position:0 0, 0 0, center;
  background-repeat:no-repeat, no-repeat, repeat;
  background-attachment:scroll, scroll, scroll;
}

/* =========================
   MAIN WRAP
   ========================= */

.main-wr{
  position:relative;
  width:min(var(--page-max), 100%);
  margin:0 auto;
  padding:0 var(--page-pad) 0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* =========================
   FLAGS
   ========================= */

.flag::before{
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.22);
}

/* =========================
   CONTENT PILL
   ========================= */

.ct-pill{
  position:relative;
  z-index:3;
  margin-top:24px;
  padding:0;
}

.ct-pill._has-text._has-form{
  position:relative;
}

.ct-pill._is-active._has-text{
  margin-top:0;
}

.ct-pill__content{
  position:relative;
  z-index:3;
  width:100%;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:clamp(40px, 7vw, 80px);
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}

.ct-pill__info{
  width:100%;
}

.ct-pill__text{
  width:100%;
  margin-top:clamp(8px, 1.5vw, 14px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(10px, 1.8vw, 18px);
}

/* =========================
   HERO STATIC PAGES
   ========================= */

.ns-hero--form,
.ns-hero--terms{
  position:relative;
  overflow:visible;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  margin-bottom:0;
  min-height:clamp(240px, 58vw, 300px);
  height:auto;
  border-bottom:0;
  background:transparent;
}

.ns-hero--form .ns-hero__bg,
.ns-hero--terms .ns-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,0) 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,0) 100%
    );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

.ns-hero--form .ns-hero__bg::before,
.ns-hero--terms .ns-hero__bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.06) 28%,
      rgba(0,0,0,.04) 44%,
      rgba(0,0,0,.02) 56%,
      rgba(0,0,0,0) 100%
    );
  background-size:100% 100%;
  background-position:center center;
  background-repeat:no-repeat;
}

.ns-hero--form .ns-hero__bg::after,
.ns-hero--terms .ns-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.28) 0%,
      rgba(0,0,0,.08) 20%,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,.08) 80%,
      rgba(0,0,0,.28) 100%
    );
  pointer-events:none;
}

.ns-hero--form .ns-hero__bg::before{
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.06) 28%,
      rgba(0,0,0,.04) 44%,
      rgba(0,0,0,.02) 56%,
      rgba(0,0,0,0) 100%
    ),
    url("../images/textures/bg_form.png");
  background-size:100% 100%, cover;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
}

.ns-hero--terms .ns-hero__bg::before{
  background-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.06) 28%,
      rgba(0,0,0,.04) 44%,
      rgba(0,0,0,.02) 56%,
      rgba(0,0,0,0) 100%
    ),
    url("../images/textures/bg_terms.png");
  background-size:100% 100%, cover;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
}

.ns-hero--form .ns-hero__frame,
.ns-hero--terms .ns-hero__frame{
  position:relative;
  min-height:clamp(240px, 58vw, 300px);
  padding:0;
  background:transparent;
}

.ns-hero--form .ns-hero__frame::before,
.ns-hero--terms .ns-hero__frame::before{
  content:none;
}

.ns-hero--form .ns-hero__ui,
.ns-hero--terms .ns-hero__ui{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:clamp(240px, 58vw, 300px);
  padding:0 clamp(14px, 4vw, 18px);
}

.ns-hero--form .ns-hero__title,
.ns-hero--terms .ns-hero__title{
  position:relative;
  margin-bottom:0;
  text-align:center;
  font-family:"Cormorant Garamond","Zen Kaku Gothic New",serif;
  font-weight:700;
  font-size:clamp(24px, 8vw, 32px);
  line-height:1.04;
  letter-spacing:.04em;
  background:var(--static-title-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.42)) drop-shadow(0 7px 14px rgba(0,0,0,.32));
}

/* =========================
   TEXT COLUMNS
   ========================= */

.column{
  padding:14px 14px 12px;
  background:rgba(18,18,18,.62);
  border:1px solid rgba(240,197,111,.45);
  box-shadow:var(--static-panel-shadow-strong);
}

.column__title{
  margin-bottom:clamp(8px, 1.4vw, 12px);
  font-family:"Cormorant Garamond","Zen Kaku Gothic New",serif;
  font-weight:700;
  letter-spacing:.04em;
  font-size:clamp(18px, 4.8vw, 20px);
  background:var(--gold-gradient-icons);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 8px 18px rgba(0,0,0,.40);
}

.column__content{
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 1.2vw, 12px);
}

.column__subtitle{
  font-weight:600;
  letter-spacing:.05em;
  font-size:clamp(14px, 3.8vw, 15px);
  background:var(--gold-gradient-icons);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 8px 18px rgba(0,0,0,.40);
}

.column p{
  font-size:clamp(14px, 3.8vw, 15px);
  line-height:1.8;
  letter-spacing:.03em;
  opacity:.96;
  text-shadow:var(--static-text-shadow);
}

.column a{
  font-weight:500;
  background:var(--gold-gradient-icons);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

.column b{
  font-weight:600;
}

.column ul{
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 1.2vw, 12px);
  margin-top:2px;
  font-size:clamp(14px, 3.8vw, 15px);
  line-height:1.75;
  letter-spacing:.03em;
  opacity:.96;
  text-shadow:
    0 1px 0 rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.34);
}

.column li{
  display:flex;
  align-items:flex-start;
  gap:clamp(8px, 1.2vw, 12px);
  line-height:1.7;
}

.column li i.icon-arrow{
  position:relative;
  width:14px;
  height:14px;
  flex:0 0 14px;
  transform:translateY(3px);
}

.column li i.icon-arrow::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gold-gradient-icons);
  -webkit-mask:no-repeat center/contain;
  mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%2017l5-5-5-5%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%2017l5-5-5-5%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.42)) drop-shadow(0 7px 14px rgba(0,0,0,.32));
}

/* =========================
   BAND
   ========================= */

.ns-band__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:6px 0 12px;
}

.ns-band__line{
  flex:1 1 auto;
  max-width:320px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      var(--gold2) 0%,
      var(--gold) 30%,
      #fff4d6 50%,
      var(--gold) 70%,
      var(--gold2) 100%
    );
}

/* =========================
   MAILTO + LIGHT FONT
   ========================= */

.mailto{
  text-decoration:none;
  font-weight:200;
  font-size:clamp(13px, 1.7vw, 14px);
  letter-spacing:.06em;
}

.font--is-light{
  font-weight:300;
}

/* =========================
   INTERACTION
   ========================= */

@media (hover:hover){
  .ns-terms-link:hover{
    filter:
      drop-shadow(0 0 4px rgba(240,197,111,.22))
      drop-shadow(0 8px 16px rgba(0,0,0,.34));
    transform:translateY(-1px);
  }
}

/* =========================
   BREAKPOINTS
   ========================= */

@media (min-width: 768px){
  .ct-pill{
    margin-top:36px;
  }

  .ct-pill._is-active._has-text{
    margin-top:36px;
  }

  .ns-hero--form,	
  .ns-hero--terms{
    min-height:clamp(340px, 44vw, 420px);
  }

  .ns-hero--form .ns-hero__frame,
  .ns-hero--terms .ns-hero__frame{
    min-height:clamp(340px, 44vw, 420px);
  }

  .ns-hero--form .ns-hero__ui,
  .ns-hero--terms .ns-hero__ui{
    min-height:clamp(340px, 44vw, 420px);
    padding:0 clamp(18px, 3vw, 24px);
  }

  .ns-hero--form .ns-hero__title,
  .ns-hero--terms .ns-hero__title{
    font-size:clamp(26px, 5vw, 36px);
  }
}

@media (min-width: 1024px){
  .ct-pill{
    margin-top:48px;
  }

  .ct-pill._is-active._has-text{
    margin-top:48px;
  }

  .ct-pill__text{
    grid-template-columns:1fr;
    gap:10px;
  }

  .ns-hero--form,
  .ns-hero--terms{
    min-height:clamp(300px, 42vw, 500px);
  }

  .ns-hero--form .ns-hero__frame,
  .ns-hero--terms .ns-hero__frame{
    min-height:clamp(300px, 42vw, 500px);
  }

  .ns-hero--form .ns-hero__ui,
  .ns-hero--terms .ns-hero__ui{
    min-height:clamp(300px, 42vw, 500px);
    padding:0 clamp(14px, 3vw, 24px);
  }

  .ns-hero--form .ns-hero__title,
  .ns-hero--terms .ns-hero__title{
    font-size:clamp(28px, 8vw, 42px);
    letter-spacing:.12em;
  }

  .column{
    padding:clamp(14px, 2.2vw, 20px) clamp(14px, 2.4vw, 20px) clamp(12px, 2vw, 18px);
  }

  .column__title{
    letter-spacing:.14em;
    font-size:clamp(17px, 2.3vw, 20px);
  }

  .column__subtitle{
    letter-spacing:.08em;
    font-size:clamp(13px, 1.7vw, 15px);
  }

  .column p,
  .column ul{
    font-size:clamp(13px, 1.55vw, 15px);
  }

  .column li i.icon-arrow{
    width:16px;
    height:16px;
    flex:0 0 16px;
    transform:translateY(2px);
  }

  .form-info-error__wr{
    padding:18px 20px 16px;
  }

  .form-info-error__wr .title{
    font-size:clamp(16px, 1.7vw, 17px);
  }

  .ns-check--agree .ns-check__txt{
    font-size:clamp(13px, 2vw, 14px);
  }

  .ns-terms-link{
    font-size:clamp(14px, 2vw, 15px);
  }

  #tourForm_results .form-info-success__wr{
    padding:clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 26px) clamp(18px, 2.2vw, 22px);
  }

  #tourForm_results .form-info-success__wr p.title{
    font-size:clamp(18px, 2vw, 22px);
  }
}

@media (min-width: 1440px){
  .main-wr{
    width:min(var(--page-max), 100%);
  }

  .column__title{
    font-size:20px;
  }

  .column__subtitle{
    font-size:15px;
  }

  .column p,
  .column ul{
    font-size:15px;
  }
}