@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

/* =========================================================
   YURU RETREAT — RADICAL HOME PREVIEW V2
   CSS-only redesign.
   Existing copy, photographs, links, ticker, video and
   JavaScript functions remain unchanged.
   ========================================================= */

:root{
  --yr-night:#101716;
  --yr-forest:#18342e;
  --yr-paper:#f3f0e8;
  --yr-white:#fffdf8;
  --yr-stone:#cdc7ba;
  --yr-muted:#726f68;
  --yr-copper:#b46f49;
  --yr-copper-light:#d5a17f;
  --yr-line:rgba(16,23,22,.16);
}

/* =========================================================
   GLOBAL
   ========================================================= */

html{
  background:var(--yr-paper);
}

body{
  margin:0;
  padding-bottom:70px;
  color:var(--yr-night);
  background:var(--yr-paper);
  font-family:"Manrope",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  letter-spacing:0;
}

body,
.section,
.panel,
.link-card,
.site-header,
footer{
  background-image:none !important;
}

a{
  text-decoration:none;
}

p,
.place-desc,
.room-note{
  color:var(--yr-muted);
}

h1,
h2,
h3,
h4,
.site-title,
.kicker{
  font-family:"Cormorant Garamond",Georgia,serif;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:1000;

  min-height:86px;
  padding:18px clamp(20px,4vw,64px);

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:linear-gradient(
    180deg,
    rgba(7,13,12,.78) 0%,
    rgba(7,13,12,.42) 58%,
    transparent 100%
  ) !important;

  border:0;
  box-shadow:none;
}

.header-left{
  gap:13px;
}

.site-logo{
  height:45px;
  width:auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
}

.site-title{
  color:#fff;
  font-size:1.65rem;
  font-weight:600;
  letter-spacing:.04em;
}

.nav-links{
  gap:24px;
}

.nav-links a{
  position:relative;
  padding:8px 0;

  color:rgba(255,255,255,.88);
  font-family:"Manrope",Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.nav-links a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:0;
  height:1px;
  background:var(--yr-copper-light);
  transition:width .2s ease;
}

.nav-links a:not(.btn):hover{
  color:#fff;
  text-decoration:none;
}

.nav-links a:not(.btn):hover::after{
  width:100%;
}

.btn{
  min-height:42px;
  padding:11px 18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.55);
  border-radius:0;

  color:#fff;
  background:transparent;
  box-shadow:none;

  font-family:"Manrope",Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.btn:hover{
  color:var(--yr-night);
  background:#fff;
  border-color:#fff;
  transform:translateY(-1px);
  text-decoration:none;
}

.btn.cta{
  color:#fff;
  background:var(--yr-copper);
  border-color:var(--yr-copper);
  box-shadow:none;
}

.btn.cta:hover{
  color:var(--yr-night);
  background:var(--yr-copper-light);
  border-color:var(--yr-copper-light);
}

.nav-toggle{
  display:none;
  width:46px;
  height:46px;

  color:#fff;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.38);
  border-radius:0;

  font-size:24px;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;

  display:flex;
  align-items:flex-end;
  justify-content:flex-start;

  padding:
    150px
    clamp(22px,7vw,110px)
    clamp(56px,9vh,100px);

  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(6,12,11,.82) 0%,
      rgba(6,12,11,.60) 35%,
      rgba(6,12,11,.18) 70%,
      rgba(6,12,11,.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,10,9,.72) 0%,
      transparent 45%
    ),
    url("https://www.yururetreat.com/background-hero.jpg")
    center 40% / cover no-repeat !important;
}

.hero-inner{
  width:min(880px,100%);
  margin:0;
  text-align:left;
}

.hero h1{
  margin:0;

  color:#fff;
  font-size:clamp(68px,10vw,138px);
  font-weight:500;
  line-height:.78;
  letter-spacing:-.035em;

  text-shadow:0 8px 34px rgba(0,0,0,.35);
}

.hero-sub{
  margin:28px 0 0;
  max-width:700px;

  color:rgba(255,255,255,.78);

  font-family:"Manrope",Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.hero-box{
  max-width:660px;
  margin:30px 0 0;
  padding:0;

  color:rgba(255,255,255,.94);
  background:transparent;
  border:0;
  border-radius:0;

  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(25px,3vw,38px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.01em;

  text-shadow:0 4px 20px rgba(0,0,0,.42);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.highlights{
  margin:34px 0 0;
  max-width:840px;

  display:flex;
  justify-content:flex-start;
  gap:0;
}

.chip{
  position:relative;
  padding:0 18px;

  color:rgba(255,255,255,.78);
  background:transparent;
  border:0;
  border-radius:0;

  font-family:"Manrope",Arial,sans-serif;
  font-size:10px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.11em;
  text-transform:uppercase;

  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.chip:first-child{
  padding-left:0;
}

.chip:not(:last-child)::after{
  content:"";
  position:absolute;
  top:4px;
  right:0;
  width:1px;
  height:12px;
  background:rgba(255,255,255,.4);
}

.hero-actions{
  margin:34px 0 0;

  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:9px;
}

.hero-actions .btn{
  min-height:46px;
  padding:13px 19px;

  color:#fff;
  background:rgba(7,16,14,.24);
  border-color:rgba(255,255,255,.48);
}

.hero-actions .btn:hover{
  color:var(--yr-night);
  background:#fff;
  border-color:#fff;
}

.hero-actions .btn.cta{
  color:#fff;
  background:var(--yr-copper);
  border-color:var(--yr-copper);
}

.hero-actions .btn.cta:hover{
  color:var(--yr-night);
  background:var(--yr-copper-light);
  border-color:var(--yr-copper-light);
}

/* =========================================================
   EXPLORE SECTION
   ========================================================= */

.section{
  padding:
    clamp(74px,10vw,140px)
    clamp(18px,5vw,80px)
    clamp(90px,11vw,150px);

  background:var(--yr-paper) !important;
  border-top:0;
}

.container{
  max-width:1320px;
  margin:0 auto;
}

.panel{
  display:grid;
  grid-template-columns:minmax(240px,.65fr) minmax(540px,1.35fr);
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(50px,8vw,120px);
  align-items:start;

  padding:0;

  background:transparent !important;
  border:0;
  border-radius:0;
  box-shadow:none;

  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.panel h2{
  grid-column:1;
  grid-row:1;

  margin:0;

  color:var(--yr-night);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(64px,8vw,112px);
  font-weight:500;
  line-height:.8;
  letter-spacing:-.04em;
}

.panel > p{
  grid-column:1;
  grid-row:2;

  margin:30px 0 0;
  max-width:280px;

  color:var(--yr-muted);
  font-size:14px;
  font-weight:400;
  line-height:1.8;
}

.cards{
  grid-column:2;
  grid-row:1 / span 3;

  margin:0;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;

  background:transparent;
  border-top:1px solid var(--yr-line);
  border-left:0;
  border-right:0;
  border-bottom:0;
}

.link-card{
  position:relative;
  min-height:190px;
  padding:34px 56px 34px 28px;

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

  background:transparent !important;
  border:0;
  border-right:1px solid var(--yr-line);
  border-bottom:1px solid var(--yr-line);
  border-radius:0;
  box-shadow:none;

  transition:
    background .22s ease,
    color .22s ease;
}

.link-card:nth-child(even){
  border-right:0;
}

.link-card::before{
  position:absolute;
  top:31px;
  right:25px;

  color:var(--yr-copper);
  font-family:"Manrope",Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}

.link-card:nth-child(1)::before{content:"01";}
.link-card:nth-child(2)::before{content:"02";}
.link-card:nth-child(3)::before{content:"03";}
.link-card:nth-child(4)::before{content:"04";}
.link-card:nth-child(5)::before{content:"05";}
.link-card:nth-child(6)::before{content:"06";}

.link-card:hover{
  color:#fff;
  background:var(--yr-forest) !important;
  border-color:var(--yr-forest);
  box-shadow:none;
  transform:none;
  text-decoration:none;
}

.link-card:hover .kicker,
.link-card:hover .desc,
.link-card:hover .arrow{
  color:#fff;
}

.link-card:hover::before{
  color:var(--yr-copper-light);
}

.kicker{
  color:var(--yr-night);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(26px,2.5vw,38px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.015em;
}

.arrow{
  color:var(--yr-copper);
  font-family:"Manrope",Arial,sans-serif;
  font-size:23px;
  font-weight:400;
}

.desc{
  margin-top:30px;
  max-width:320px;

  color:var(--yr-muted);
  font-size:12px;
  font-weight:400;
  line-height:1.65;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{
  margin:0;
  padding:54px 22px 120px;

  color:rgba(255,255,255,.86);
  background:var(--yr-night) !important;
  border-top:0;

  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;
  letter-spacing:.02em;
}

.footer-links{
  margin-top:20px;

  color:rgba(255,255,255,.48);

  font-family:"Manrope",Arial,sans-serif;
  font-size:9px;
  line-height:2.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer-links a{
  margin:0 8px;
  color:rgba(255,255,255,.65);
}

.footer-links a:hover{
  color:var(--yr-copper-light);
}

/* =========================================================
   TICKER
   ========================================================= */

.yuru-ticker{
  background:var(--yr-copper);
  color:#fff;
  border-top:0;

  font-family:"Manrope",Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
}

.yuru-ticker .wrap{
  min-height:46px;
  padding:9px 18px;
}

.yuru-ticker .label{
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.yuru-ticker .track{
  height:18px;
}

.yuru-ticker a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.yuru-ticker .ctrl{
  width:29px;
  height:29px;

  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  border-radius:0;
}

/* =========================================================
   MOUNTAIN VIDEO
   ========================================================= */

.mountain-video-card{
  right:22px;
  bottom:82px;

  padding:12px 16px;

  color:#fff;
  background:rgba(16,23,22,.92);
  border:1px solid rgba(255,255,255,.18);
  border-radius:0;
  box-shadow:0 12px 38px rgba(0,0,0,.25);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.mountain-video-card .play-icon{
  color:var(--yr-copper-light);
}

.mountain-video-card .card-text{
  color:#fff;
  font-family:"Manrope",Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.video-box{
  border-radius:0;
}

.video-close{
  border-radius:0;
}

#rotateNotice .box{
  border-radius:0;
}

/* =========================================================
   TABLET NAVIGATION
   ========================================================= */

@media (max-width:980px){

  .nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .nav-links{
    display:none;
    position:fixed;
    top:14px;
    right:14px;
    z-index:10000;

    width:min(330px,calc(100vw - 28px));
    padding:76px 22px 22px;

    flex-direction:column;
    align-items:stretch;
    gap:0;

    background:rgba(16,23,22,.98);
    border:1px solid rgba(255,255,255,.16);
    border-radius:0;
    box-shadow:0 25px 70px rgba(0,0,0,.4);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  body.nav-open #navLinks{
    display:flex;
  }

  .nav-links a{
    width:100%;
    padding:15px 4px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12);
  }

  .nav-links .btn{
    margin-top:10px;
    border:1px solid rgba(255,255,255,.45);
  }

  .nav-links .btn.cta{
    border-color:var(--yr-copper);
  }

  .nav-toggle{
    position:relative;
    z-index:10001;
  }

  .panel{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .panel h2,
  .panel > p,
  .cards{
    grid-column:1;
    grid-row:auto;
  }

  .panel > p{
    max-width:480px;
  }

  .cards{
    margin-top:50px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  body{
    padding-bottom:65px;
  }

  .site-header{
    min-height:72px;
    padding:13px 14px;
  }

  .site-logo{
    height:39px;
  }

  .site-title{
    font-size:1.42rem;
  }

  .nav-toggle{
    width:43px;
    height:43px;
  }

  .hero{
    min-height:100svh;
    padding:
      120px
      18px
      34px;

    align-items:flex-end;

    background:
      linear-gradient(
        180deg,
        rgba(6,12,11,.26) 0%,
        rgba(6,12,11,.14) 25%,
        rgba(6,12,11,.54) 62%,
        rgba(6,12,11,.92) 100%
      ),
      url("https://www.yururetreat.com/background-hero.jpg")
      center 34% / cover no-repeat !important;
  }

  .hero-inner{
    width:100%;
  }

  .hero h1{
    font-size:clamp(61px,20vw,84px);
    line-height:.79;
  }

  .hero-sub{
    margin-top:22px;
    font-size:9px;
    line-height:1.65;
    letter-spacing:.17em;
  }

  .hero-box{
    max-width:95%;
    margin-top:21px;
    font-size:24px;
    line-height:1.15;
  }

  .highlights{
    margin-top:23px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
  }

  .chip{
    padding:0;
    font-size:8px;
    line-height:1.5;
    letter-spacing:.08em;
  }

  .chip:not(:last-child)::after{
    display:none;
  }

  .hero-actions{
    margin-top:25px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:42px;
    padding:10px 7px;
    font-size:8px;
    letter-spacing:.075em;
  }

  .hero-actions .btn.cta{
    grid-column:1 / -1;
    grid-row:1;
  }

  .section{
    padding:74px 15px 92px;
  }

  .panel h2{
    font-size:70px;
    line-height:.8;
  }

  .panel > p{
    margin-top:28px;
    max-width:300px;
    font-size:13px;
  }

  .cards{
    margin-top:45px;
    grid-template-columns:1fr;
  }

  .link-card{
    min-height:150px;
    padding:27px 48px 27px 20px;
    border-right:0;
  }

  .link-card::before{
    top:25px;
    right:19px;
  }

  .kicker{
    font-size:31px;
  }

  .desc{
    margin-top:24px;
    font-size:11px;
  }

  footer{
    padding:40px 15px 105px;
  }

  .mountain-video-card{
    right:10px;
    bottom:75px;
    padding:10px 12px;
  }

  .mountain-video-card .card-text{
    font-size:8px;
  }

  .yuru-ticker .wrap{
    min-height:42px;
    padding:8px 11px;
  }

  .yuru-ticker .label{
    font-size:8px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}
/* ===== Desktop hero proportion correction ===== */
@media (min-width:981px){

  .hero{
    min-height:680px;
    height:78vh;
    max-height:820px;

    padding:
      125px
      clamp(32px,6vw,92px)
      48px;

    background:
      linear-gradient(
        90deg,
        rgba(6,12,11,.78) 0%,
        rgba(6,12,11,.54) 34%,
        rgba(6,12,11,.15) 72%,
        rgba(6,12,11,.05) 100%
      ),
      linear-gradient(
        0deg,
        rgba(5,10,9,.68) 0%,
        transparent 48%
      ),
      url("https://www.yururetreat.com/background-hero.jpg")
      center 46% / cover no-repeat !important;
  }

  .hero-inner{
    width:min(760px,68vw);
  }

  .hero h1{
    font-size:clamp(64px,7.2vw,104px);
    line-height:.84;
  }

  .hero-sub{
    margin-top:20px;
  }

  .hero-box{
    max-width:580px;
    margin-top:22px;
    font-size:clamp(23px,2.2vw,32px);
  }

  .highlights{
    margin-top:25px;
  }

  .hero-actions{
    margin-top:25px;
  }
}
/* ===== Final desktop hero refinement ===== */
@media (min-width:981px){

  .hero{
    min-height:620px;
    height:72vh;
    max-height:740px;
    padding-bottom:40px;

    background:
      linear-gradient(
        90deg,
        rgba(6,12,11,.76) 0%,
        rgba(6,12,11,.50) 34%,
        rgba(6,12,11,.13) 72%,
        rgba(6,12,11,.04) 100%
      ),
      linear-gradient(
        0deg,
        rgba(5,10,9,.67) 0%,
        transparent 48%
      ),
      url("https://www.yururetreat.com/background-hero.jpg")
      center 43% / cover no-repeat !important;
  }

  .hero-inner{
    width:min(720px,64vw);
  }

  .hero h1{
    font-size:clamp(60px,6.4vw,92px);
  }

  .hero-box{
    max-width:540px;
    font-size:clamp(22px,2vw,29px);
  }

  .highlights{
    margin-top:21px;
  }

  .hero-actions{
    margin-top:21px;
  }
}
/* ===== Desktop spacing and scale correction ===== */
@media (min-width:981px){

  .hero{
    min-height:590px;
    height:68vh;
    max-height:700px;
    padding-bottom:34px;
  }

  .hero-inner{
    width:min(670px,60vw);
  }

  .hero h1{
    font-size:clamp(54px,5.7vw,82px);
  }

  .hero-sub{
    margin-top:16px;
  }

  .hero-box{
    max-width:500px;
    margin-top:16px;
    font-size:clamp(20px,1.8vw,26px);
  }

  .highlights{
    margin-top:17px;
  }

  .hero-actions{
    margin-top:17px;
  }

  .hero-actions .btn{
    min-height:40px;
    padding:10px 14px;
    font-size:9px;
  }
}
/* ===== Move desktop hero content upward ===== */
@media (min-width:981px){
  .hero-inner{
    transform:translateY(-42px);
  }
}
/* ===== Cross-browser desktop viewport fitting ===== */
@media (min-width:981px){

  .hero{
    height:calc(100dvh - 46px);
    min-height:0;
    max-height:none;
    align-items:center;
    padding-top:96px;
    padding-bottom:28px;
  }

  .hero-inner{
    transform:translateY(12px);
  }
}

/* Fallback for older browsers */
@supports not (height:100dvh){
  @media (min-width:981px){
    .hero{
      height:calc(100vh - 46px);
    }
  }
}
/* ===== Mobile landing-page correction ===== */
@media (max-width:640px){

  body{
    padding-bottom:46px;
  }

  .hero{
    min-height:calc(100svh - 44px);
    height:auto;
    padding:94px 16px 72px;
    align-items:center;

    background:
      linear-gradient(
        180deg,
        rgba(6,12,11,.20) 0%,
        rgba(6,12,11,.18) 28%,
        rgba(6,12,11,.58) 66%,
        rgba(6,12,11,.92) 100%
      ),
      url("https://www.yururetreat.com/background-hero.jpg")
      center 35% / cover no-repeat !important;
  }

  .hero-inner{
    transform:none;
  }

  .hero h1{
    max-width:330px;
    font-size:clamp(54px,17vw,68px);
    line-height:.82;
  }

  .hero-sub{
    margin-top:14px;
    font-size:8px;
    line-height:1.55;
    letter-spacing:.14em;
  }

  .hero-box{
    max-width:320px;
    margin-top:14px;
    font-size:20px;
    line-height:1.18;
  }

  .highlights{
    margin-top:16px;
    gap:7px 10px;
  }

  .chip{
    font-size:7.5px;
  }

  .hero-actions{
    margin-top:16px;
    gap:6px;
  }

  .hero-actions .btn{
    min-height:38px;
    padding:8px 6px;
    font-size:7.5px;
  }

  .mountain-video-card{
    position:absolute;
    top:82px;
    right:10px;
    bottom:auto;
    padding:8px 10px;
  }

  .mountain-video-card .card-text{
    font-size:7px;
  }

  .yuru-ticker{
    font-size:10px;
  }

  .yuru-ticker .wrap{
    min-height:38px;
    padding:6px 9px;
  }

  .yuru-ticker .label{
    font-size:7px;
  }

  .yuru-ticker .ctrl{
    width:26px;
    height:26px;
    font-size:16px;
    line-height:24px;
  }
}
/* ===== Final mobile scale and overlap correction ===== */
@media (max-width:640px){

  .hero{
    min-height:calc(100svh - 38px);
    padding:88px 14px 58px;
  }

  .hero h1{
    max-width:290px;
    font-size:52px;
    line-height:.84;
  }

  .hero-sub{
    margin-top:11px;
    font-size:7.5px;
  }

  .hero-box{
    max-width:290px;
    margin-top:11px;
    font-size:18px;
    line-height:1.16;
  }

  .highlights{
    margin-top:13px;
    gap:5px 8px;
  }

  .chip{
    font-size:7px;
  }

  .hero-actions{
    margin-top:13px;
    gap:5px;
  }

  .hero-actions .btn{
    min-height:35px;
    padding:7px 5px;
    font-size:7px;
  }

  .mountain-video-card{
    position:fixed;
    top:230px;
    right:8px;
    bottom:auto;

    width:44px;
    height:44px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
  }

  .mountain-video-card .card-text{
    display:none;
  }

  .mountain-video-card .play-icon{
    font-size:16px;
  }

  .yuru-ticker{
    font-size:9px;
  }

  .yuru-ticker .wrap{
    min-height:34px;
    padding:4px 8px;
    gap:6px;
  }

  .yuru-ticker .label{
    font-size:6.5px;
  }

  .yuru-ticker .track{
    height:16px;
  }

  .yuru-ticker .ctrl{
    width:24px;
    height:24px;
    font-size:15px;
    line-height:22px;
  }
}
/* ===== Mobile size and empty-space correction ===== */
@media (max-width:640px){

  .hero{
    min-height:0;
    height:auto;
    padding:
      92px
      14px
      34px;
  }

  .hero h1{
    max-width:330px;
    font-size:58px;
    line-height:.84;
  }

  .hero-box{
    max-width:310px;
    font-size:20px;
  }

  .hero-actions{
    margin-bottom:0;
  }
}
/* ===== Place mobile video button neatly in header ===== */
@media (max-width:640px){

  .mountain-video-card{
    position:fixed;
    top:14px;
    right:72px;
    bottom:auto;

    width:42px;
    height:42px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(16,23,22,.82);
    border:1px solid rgba(255,255,255,.36);
    border-radius:0;
    box-shadow:none;

    z-index:10002;
  }

  .mountain-video-card .play-icon{
    font-size:15px;
  }

  .mountain-video-card .card-text{
    display:none;
  }
}
/* ===== Make mobile video button full width ===== */
@media (max-width:640px){
  #openMountainVideo{
    grid-column:1 / -1;
    width:100%;
  }
}
/* ===== Slightly enlarge mobile white text ===== */
@media (max-width:640px){

  .hero-sub{
    font-size:8.5px;
    line-height:1.6;
  }

  .hero-box{
    font-size:21px;
    line-height:1.18;
  }

  .chip{
    font-size:8px;
  }

  .hero-actions .btn{
    font-size:8px;
    letter-spacing:.08em;
  }
}
/* ===== Compact mobile Explore section ===== */
@media (max-width:640px){

  .section{
    padding:
      54px
      15px
      76px;
  }

  .panel h2{
    font-size:58px;
    line-height:.86;
  }

  .panel > p{
    margin-top:20px;
    font-size:13px;
    line-height:1.6;
  }

  .cards{
    margin-top:30px;
  }

  .link-card{
    min-height:0;
    padding:
      22px
      46px
      22px
      18px;
  }

  .link-card::before{
    top:20px;
    right:17px;
  }

  .kicker{
    font-size:28px;
  }

  .desc{
    margin-top:14px;
    font-size:11px;
    line-height:1.55;
  }
}
/* ===== Stronger mobile typography ===== */
@media (max-width:640px){

  /* Landing-page supporting text */
  .hero-sub{
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.15em;
  }

  .hero-box{
    font-size:22px;
    line-height:1.2;
  }

  .chip{
    font-size:8.8px;
    font-weight:700;
  }

  .hero-actions .btn{
    font-size:8.8px;
    font-weight:700;
    letter-spacing:.085em;
  }

  /* Explore section */
  .panel > p{
    font-size:14px;
  }

  .kicker{
    font-size:32px;
    line-height:1.05;
  }

  .desc{
    margin-top:16px;
    font-size:12.5px;
    line-height:1.6;
  }

  .link-card{
    padding-top:25px;
    padding-bottom:25px;
  }
}
/* ===== Restore stronger desktop presence ===== */
@media (min-width:981px){

  .hero-inner{
    width:min(820px,72vw);
    transform:translateY(6px);
  }

  .hero h1{
    font-size:clamp(72px,7.4vw,104px);
    line-height:.84;
  }

  .hero-sub{
    margin-top:18px;
    font-size:11px;
  }

  .hero-box{
    max-width:650px;
    margin-top:19px;
    font-size:clamp(25px,2.25vw,32px);
    line-height:1.2;
  }

  .highlights{
    margin-top:21px;
  }

  .chip{
    font-size:10px;
  }

  .hero-actions{
    width:min(800px,100%);
    margin-top:21px;
    gap:8px;
  }

  .hero-actions .btn{
    min-height:42px;
    padding:11px 15px;
    font-size:9.5px;
  }
}
/* ===== Desktop Explore emphasis + centred video button ===== */
@media (min-width:981px){

  /* Stronger Explore typography */
  .section{
    padding-top:90px;
    padding-bottom:105px;
  }

  .link-card{
    min-height:165px;
    padding:28px 54px 28px 28px;
  }

  .kicker{
    font-size:clamp(30px,2.8vw,40px);
  }

  .desc{
    margin-top:20px;
    font-size:14px;
    line-height:1.6;
  }

  /* First five actions on one row;
     Mountains from Yuru centred below */
  .hero-actions{
    display:grid;
    grid-template-columns:repeat(5,max-content);
    justify-content:start;
  }

  #openMountainVideo{
    grid-column:1 / -1;
    justify-self:center;
    min-width:230px;
  }
}
/* ===== Refine Explore ending and footer ===== */

/* Reduce empty space below Explore */
@media (min-width:981px){
  .section{
    padding-bottom:58px;
  }
}

/* Deeper copper glass-style footer */
footer{
  padding:38px 20px 82px;

  background:
    linear-gradient(
      135deg,
      rgba(78,38,25,.97),
      rgba(112,56,34,.94)
    ) !important;

  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 -12px 40px rgba(45,23,15,.12);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.footer-links{
  font-size:10.5px;
  line-height:2;
  color:rgba(255,255,255,.68);
}

.footer-links a{
  color:rgba(255,255,255,.84);
}

@media (max-width:640px){
  .section{
    padding-bottom:52px;
  }

  footer{
    padding:34px 15px 76px;
  }
}
/* ===== Tighten Explore ending and footer height ===== */

@media (min-width:981px){

  .section{
    padding-bottom:12px;
  }

  .panel,
  .cards{
    margin-bottom:0;
  }

  footer{
    padding:
      24px
      20px
      54px;
  }

  .footer-links{
    margin-top:12px;
    line-height:1.8;
  }
}

@media (max-width:640px){

  .section{
    padding-bottom:20px;
  }

  footer{
    padding:
      26px
      15px
      58px;
  }
}
/* ===== Remove gap above fixed ticker ===== */
@media (min-width:641px){
  body{
    padding-bottom:46px;
  }
}

@media (max-width:640px){
  body{
    padding-bottom:38px;
  }
}
/* ===== Final mobile spacing refinement ===== */
@media (max-width:640px){

  /* Bring Explore closer to the hero */
  .section{
    padding-top:34px;
    padding-bottom:12px;
  }

  /* Make the copper footer shallower */
  footer{
    padding:22px 14px 42px;
    font-size:16px;
  }

  .footer-links{
    margin-top:11px;
    font-size:9.5px;
    line-height:1.75;
  }
}