:root{
  --ink:#123D3B;
  --ink-2:#1F6762;
  --aqua:#54D4CB;
  --aqua-soft:#E9FBF9;
  --sky:#72BDEB;
  --sky-soft:#EEF8FF;
  --coral:#FF704F;
  --coral-soft:#FFF0EA;
  --sun:#FFD35C;
  --sun-soft:#FFF7D8;
  --mint:#79D8AA;
  --mint-soft:#EEFFF5;
  --paper:#FFFFFF;
  --soft:#F6FAF9;
  --line:#E4ECEA;
  --text:#173432;
  --muted:#6F807D;
  --shadow:0 18px 48px rgba(18,61,59,.10);
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img{display:block;max-width:100%}
.demo-ribbon{
  min-height:30px;
  padding:6px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:#fff;
  font-size:9px;
}
.demo-ribbon strong{
  padding:3px 6px;
  border-radius:999px;
  background:var(--coral);
  font-size:7px;
  letter-spacing:.14em;
}
.demo-ribbon span{opacity:.82}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:70px;
  padding:8px clamp(16px,4vw,58px);
  display:flex;
  align-items:center;
  gap:26px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(18,61,59,.07);
}
.brand{
  width:192px;
  min-width:192px;
  height:48px;
  display:flex;
  align-items:center;
}
.brand img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}
.desktop-nav{
  margin-left:auto;
  display:flex;
  gap:23px;
  align-items:center;
  font-size:12px;
  font-weight:760;
}
.desktop-nav a{position:relative;padding:9px 0}
.desktop-nav a:after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:4px;height:2px;
  background:var(--coral);
  transition:.18s ease;
}
.desktop-nav a:hover:after{right:0}
.header-search{
  width:38px;height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  font-size:19px;
  cursor:pointer;
}
.menu-button{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
}
.menu-button span{
  display:block;
  width:16px;height:1.5px;
  margin:5px auto;
  background:var(--ink);
}
.hero{
  position:relative;
  min-height:565px;
  max-width:1600px;
  margin:0 auto;
  overflow:hidden;
  background:#75cfd3;
}
.hero-media,.hero-shade{
  position:absolute;
  inset:0;
}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 54%;
  animation:heroDrift 20s ease-in-out infinite alternate;
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(6,38,36,.62) 0%,rgba(6,38,36,.30) 42%,rgba(6,38,36,.03) 72%),
    linear-gradient(180deg,rgba(6,38,36,.01) 45%,rgba(6,38,36,.24) 100%);
}
.hero-copy{
  position:relative;
  z-index:2;
  width:min(680px,58%);
  padding:84px 0 78px clamp(22px,6vw,92px);
  color:#fff;
}
.hero-kicker{
  margin:0 0 13px;
  font-size:9px;
  letter-spacing:.22em;
  font-weight:900;
}
.hero-copy h1{
  margin:0;
  font-size:clamp(58px,6.5vw,96px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:820;
}
.hero-copy>p:not(.hero-kicker){
  max-width:590px;
  margin:18px 0 0;
  font-size:16px;
  line-height:1.5;
  color:rgba(255,255,255,.9);
}
.search{
  margin-top:27px;
  max-width:650px;
  min-height:58px;
  padding:5px 5px 5px 14px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 40px rgba(5,36,34,.18);
}
.search>span{
  color:var(--ink);
  font-size:23px;
}
.search input{
  flex:1;
  min-width:0;
  padding:11px 4px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:14px;
}
.search button{
  width:48px;height:48px;
  border:0;border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:19px;
  cursor:pointer;
}
.hero-credit{
  position:absolute;
  right:12px;bottom:9px;z-index:2;
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:7px;
}
.live-strip{
  position:relative;
  z-index:5;
  max-width:1380px;
  margin:-28px auto 0;
  padding:0 clamp(14px,3vw,38px);
  display:grid;
  grid-template-columns:1.05fr repeat(4,1fr);
  overflow:hidden;
}
.live-title,
.live-item{
  min-height:112px;
  padding:17px 18px;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.live-title{
  border-left:1px solid var(--line);
  border-radius:18px 0 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.live-title strong,.live-title small{display:block}
.live-title strong{
  font-size:9px;
  letter-spacing:.16em;
  color:var(--ink);
}
.live-title small{
  margin-top:4px;
  font-size:8px;
  color:var(--muted);
}
.live-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--coral);
  animation:pulse 2s infinite;
}
.live-item{
  display:grid;
  align-content:center;
  border-left:1px solid var(--line);
  transition:.16s ease;
}
.live-item:last-child{
  border-right:1px solid var(--line);
  border-radius:0 18px 18px 0;
}
.live-item:hover{background:var(--soft)}
.live-item span{
  font-size:7px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--muted);
}
.live-item strong{
  margin-top:7px;
  font-size:22px;
  color:var(--ink);
  letter-spacing:-.035em;
}
.live-item small{
  margin-top:3px;
  font-size:8px;
  color:var(--muted);
}
.section{
  max-width:1380px;
  margin:0 auto;
  padding:56px clamp(16px,3.2vw,42px);
}
.section-heading{
  margin-bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}
.eyebrow{
  margin:0 0 8px;
  font-size:8px;
  letter-spacing:.20em;
  font-weight:900;
  color:var(--ink);
}
.section-heading h2{
  margin:0;
  max-width:900px;
  color:var(--ink);
  font-size:clamp(35px,4vw,58px);
  line-height:.96;
  letter-spacing:-.05em;
  font-weight:800;
}
.section-heading>a{
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
  color:var(--ink);
}
.happening-layout{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:12px;
}
.feature-story{
  position:relative;
  min-height:500px;
  overflow:hidden;
  border-radius:24px;
  background:#70cbd0;
  color:#fff;
}
.feature-story>img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.feature-story:hover>img{transform:scale(1.025)}
.feature-gradient{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,35,33,.01) 28%,rgba(6,35,33,.80) 100%);
}
.feature-copy{
  position:absolute;
  z-index:2;
  left:22px;right:22px;bottom:22px;
}
.feature-copy>span{
  display:inline-flex;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  color:var(--ink);
  font-size:7px;
  letter-spacing:.14em;
  font-weight:900;
}
.feature-copy h3{
  max-width:610px;
  margin:11px 0 8px;
  font-size:clamp(31px,3.1vw,46px);
  line-height:.98;
  letter-spacing:-.045em;
}
.feature-copy p{
  max-width:560px;
  margin:0;
  color:rgba(255,255,255,.86);
  font-size:10px;
  line-height:1.55;
}
.feature-copy a{
  display:inline-block;
  margin-top:13px;
  font-size:9px;
  font-weight:850;
}
.happening-list{
  display:grid;
  gap:8px;
}
.happening-row{
  min-height:116px;
  padding:13px 14px;
  display:grid;
  grid-template-columns:66px 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  transition:.16s ease;
}
.happening-row:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.happening-row time{
  width:58px;height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:14px;
  background:var(--soft);
}
.happening-row time strong{
  font-size:15px;
  line-height:1;
  color:var(--ink);
}
.happening-row time span{
  margin-top:5px;
  font-size:6px;
  letter-spacing:.11em;
  font-weight:900;
  color:var(--muted);
}
.row-type{
  display:block;
  margin-bottom:4px;
  font-size:6px;
  letter-spacing:.15em;
  font-weight:900;
}
.row-type.weather{color:#B56B0C}
.row-type.show{color:#B14D38}
.row-type.place{color:#16796F}
.row-type.travel{color:#34779C}
.happening-row h3{
  margin:0;
  font-size:14px;
  line-height:1.08;
  color:var(--ink);
}
.happening-row p{
  margin:5px 0 0;
  font-size:8px;
  color:var(--muted);
}
.happening-row em{
  padding:5px 7px;
  border-radius:999px;
  background:#FFF0C7;
  color:#9B680F;
  font-size:6px;
  letter-spacing:.1em;
  font-style:normal;
  font-weight:900;
}
.happening-row em.ok{
  background:#DFF7EE;
  color:#16765D;
}
.filter-chips{
  margin:0 0 15px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.filter-chips::-webkit-scrollbar{display:none}
.filter-chips button{
  min-height:34px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:9px;
  font-weight:760;
  white-space:nowrap;
}
.filter-chips button.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.things-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:10px;
}
.visual-card{
  position:relative;
  min-height:385px;
  overflow:hidden;
  border-radius:22px;
  background:#72cfd3;
  color:#fff;
}
.visual-card.wide{min-height:455px}
.visual-card img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.visual-card:hover img{transform:scale(1.035)}
.visual-card:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,33,31,.00) 30%,rgba(5,33,31,.74) 100%);
}
.visual-card>div{
  position:absolute;
  z-index:2;
  left:19px;right:19px;bottom:18px;
}
.visual-card span{
  display:block;
  margin-bottom:6px;
  font-size:7px;
  letter-spacing:.18em;
  font-weight:900;
}
.visual-card strong{
  display:block;
  font-size:27px;
  line-height:1;
  letter-spacing:-.04em;
}
.visual-card small{
  display:block;
  margin-top:5px;
  font-size:8px;
  opacity:.82;
}
.colour-band{
  max-width:1310px;
  min-height:170px;
  margin:8px auto 20px;
  padding:30px clamp(24px,5vw,60px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  border-radius:26px;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,211,92,.65),transparent 10rem),
    linear-gradient(115deg,#35BDB2,#62D8D0 54%,#A3E7D9);
  color:#083F3B;
}
.colour-band p{
  margin:0 0 8px;
  font-size:7px;
  letter-spacing:.17em;
  font-weight:900;
}
.colour-band strong{
  display:block;
  max-width:690px;
  font-size:clamp(26px,3vw,42px);
  line-height:1;
  letter-spacing:-.04em;
}
.colour-band>a{
  padding:12px 16px;
  border-radius:999px;
  background:#fff;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.area-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:3px;
}
.area-scroll::-webkit-scrollbar{display:none}
.area-card{
  min-width:300px;
  max-width:340px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  scroll-snap-align:start;
  transition:.18s ease;
}
.area-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.area-card img{
  width:100%;
  height:245px;
  object-fit:cover;
}
.area-card>div{padding:15px}
.area-card strong{
  font-size:18px;
  color:var(--ink);
}
.area-card p{
  margin:6px 0 0;
  font-size:9px;
  line-height:1.45;
  color:var(--muted);
}
.essentials{
  padding-top:35px;
}
.essential-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.essential-grid a{
  min-height:105px;
  padding:15px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  transition:.16s ease;
}
.essential-grid a:hover{
  transform:translateY(-2px);
  background:var(--soft);
}
.essential-grid a>span{
  width:38px;height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--aqua-soft);
  color:var(--ink);
  font-size:20px;
}
.essential-grid strong,.essential-grid small{display:block}
.essential-grid strong{
  font-size:10px;
  color:var(--ink);
}
.essential-grid small{
  margin-top:4px;
  font-size:7px;
  line-height:1.35;
  color:var(--muted);
}
.essential-grid b{
  font-size:13px;
  color:var(--ink);
}
.guide{
  padding-top:42px;
}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.guide-card{
  min-height:175px;
  padding:20px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 10%,rgba(84,212,203,.12),transparent 7rem),
    #fff;
  transition:.16s ease;
}
.guide-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.guide-card>span{
  font-size:11px;
  color:var(--coral);
  font-weight:850;
}
.guide-card strong{
  margin-top:auto;
  font-size:20px;
  line-height:1.03;
  letter-spacing:-.035em;
  color:var(--ink);
}
.guide-card p{
  margin:8px 0 0;
  font-size:9px;
  line-height:1.5;
  color:var(--muted);
}
.site-footer{
  margin-top:40px;
  padding:32px clamp(18px,4vw,56px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:end;
  background:#F5FAF9;
  border-top:1px solid var(--line);
}
.site-footer>div img{
  width:180px;
  height:56px;
  object-fit:contain;
  object-position:left center;
}
.site-footer>div p{
  margin:8px 0 0;
  font-size:9px;
  line-height:1.45;
  color:var(--muted);
}
.site-footer nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:9px;
  font-weight:760;
}
.credit{
  grid-column:1/-1;
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:7px;
  color:#82918E;
}
.mobile-dock{display:none}
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:80;
  transform:translate(-50%,12px);
  padding:11px 15px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:10px;
  opacity:0;
  pointer-events:none;
  transition:.18s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@keyframes heroDrift{
  0%{transform:scale(1.01) translate3d(0,0,0)}
  100%{transform:scale(1.045) translate3d(-.4%,.2%,0)}
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,112,79,.28)}
  70%{box-shadow:0 0 0 9px rgba(255,112,79,0)}
  100%{box-shadow:0 0 0 0 rgba(255,112,79,0)}
}
@media(max-width:1120px){
  .desktop-nav{display:none}
  .menu-button{display:block}
  .desktop-nav.open{
    display:flex;
    position:absolute;
    right:14px;
    top:62px;
    min-width:220px;
    flex-direction:column;
    gap:1px;
    padding:11px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow);
  }
  .desktop-nav.open a{padding:10px 8px}
  .live-strip{grid-template-columns:1.15fr repeat(2,1fr)}
  .live-title{grid-row:1/3}
  .live-item:nth-child(2),.live-item:nth-child(3){border-bottom:0}
  .live-item:last-child{border-radius:0 0 18px 0}
  .things-grid{grid-template-columns:1.25fr 1fr}
  .visual-card:last-child{grid-column:1/3;min-height:310px}
  .essential-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  body{padding-bottom:70px}
  .demo-ribbon{
    justify-content:flex-start;
    white-space:nowrap;
    overflow:hidden;
  }
  .demo-ribbon span{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .site-header{
    height:60px;
    padding:6px 11px;
  }
  .brand{
    width:150px;
    min-width:150px;
    height:42px;
  }
  .header-search{margin-left:auto}
  .hero{min-height:475px}
  .hero-media img{object-position:58% center}
  .hero-shade{
    background:linear-gradient(180deg,rgba(6,38,36,.10) 8%,rgba(6,38,36,.18) 35%,rgba(6,38,36,.62) 100%);
  }
  .hero-copy{
    width:100%;
    padding:55px 14px 42px;
  }
  .hero-copy h1{
    font-size:50px;
    line-height:.92;
  }
  .hero-copy>p:not(.hero-kicker){
    max-width:90%;
    font-size:12px;
  }
  .search{
    min-height:52px;
    margin-top:20px;
    border-radius:15px;
  }
  .search input{font-size:13px}
  .search button{
    width:42px;height:42px;
  }
  .hero-credit{display:none}
  .live-strip{
    margin:-18px 0 0;
    padding:0 10px;
    display:flex;
    overflow-x:auto;
    gap:7px;
    scroll-snap-type:x mandatory;
  }
  .live-title,
  .live-item,
  .live-item:last-child{
    min-width:46%;
    min-height:104px;
    border:1px solid var(--line);
    border-radius:15px;
    scroll-snap-align:start;
  }
  .live-title{
    min-width:52%;
  }
  .section{
    padding:38px 11px;
  }
  .section-heading{
    align-items:flex-start;
    margin-bottom:15px;
  }
  .section-heading h2{
    font-size:34px;
  }
  .section-heading>a{display:none}
  .happening-layout{
    grid-template-columns:1fr;
  }
  .feature-story{
    min-height:390px;
  }
  .feature-copy h3{
    font-size:29px;
  }
  .happening-list{
    display:flex;
    overflow-x:auto;
    gap:7px;
    scroll-snap-type:x mandatory;
  }
  .happening-row{
    min-width:85%;
    min-height:104px;
    scroll-snap-align:start;
  }
  .things-grid{
    display:flex;
    overflow-x:auto;
    gap:8px;
    scroll-snap-type:x mandatory;
  }
  .visual-card,
  .visual-card.wide,
  .visual-card:last-child{
    min-width:82%;
    min-height:350px;
    grid-column:auto;
    scroll-snap-align:start;
  }
  .colour-band{
    min-height:190px;
    margin:4px 11px 12px;
    padding:24px 18px;
    flex-direction:column;
    align-items:flex-start;
    border-radius:20px;
  }
  .colour-band strong{font-size:31px}
  .area-card{
    min-width:78%;
  }
  .area-card img{
    height:220px;
  }
  .essential-grid{
    display:flex;
    overflow-x:auto;
    gap:7px;
    scroll-snap-type:x mandatory;
  }
  .essential-grid a{
    min-width:74%;
    min-height:92px;
    scroll-snap-align:start;
  }
  .guide-grid{
    display:flex;
    overflow-x:auto;
    gap:8px;
    scroll-snap-type:x mandatory;
  }
  .guide-card{
    min-width:78%;
    min-height:165px;
    scroll-snap-align:start;
  }
  .site-footer{
    grid-template-columns:1fr;
    padding:26px 15px;
  }
  .site-footer nav{gap:13px}
  .mobile-dock{
    position:fixed;
    left:8px;right:8px;bottom:7px;
    z-index:70;
    height:58px;
    padding:4px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(18,61,59,.11);
    border-radius:18px;
    box-shadow:0 12px 32px rgba(18,61,59,.15);
    backdrop-filter:blur(14px);
  }
  .mobile-dock a,.mobile-dock button{
    height:48px;
    padding:0;
    border:0;
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:var(--muted);
    font-size:8px;
    font-weight:760;
  }
  .mobile-dock span{
    color:var(--ink);
    font-size:17px;
  }
  .dock-search{
    border-radius:13px!important;
    background:var(--ink)!important;
    color:#fff!important;
  }
  .dock-search span{color:#fff}
  .toast{bottom:76px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* V2.6 - visual energy pass: brighter, fresher, more island movement */
body{
  background:
    radial-gradient(circle at 12% 4%,rgba(84,212,203,.08),transparent 24rem),
    radial-gradient(circle at 90% 16%,rgba(255,211,92,.07),transparent 22rem),
    #fff;
}

.hero{
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  z-index:1;
  width:360px;
  height:360px;
  right:-80px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,211,92,.42) 0%,rgba(255,211,92,.10) 42%,transparent 70%);
  mix-blend-mode:screen;
  animation:islandGlow 8s ease-in-out infinite alternate;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  left:-8%;
  right:-8%;
  bottom:-86px;
  height:150px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:rgba(84,212,203,.22);
  filter:blur(3px);
  transform:rotate(-1deg);
  pointer-events:none;
}

.hero-media img{
  filter:saturate(1.18) brightness(1.06) contrast(1.035);
}

.hero-shade{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,43,40,.56) 0%,rgba(5,43,40,.24) 43%,rgba(5,43,40,.00) 74%),
    linear-gradient(180deg,rgba(5,43,40,.00) 40%,rgba(5,43,40,.24) 100%);
}

.hero-copy,
.hero-credit{
  z-index:3;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
}

.hero-kicker::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--sun);
  box-shadow:0 0 0 6px rgba(255,211,92,.14);
}

.search{
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 42px rgba(5,36,34,.22);
}

.search button{
  background:linear-gradient(135deg,var(--coral),#FF8A56);
  box-shadow:0 7px 18px rgba(255,112,79,.26);
}

.search button:hover{
  background:linear-gradient(135deg,#F45F42,#FF8A56);
}

.live-strip{
  filter:drop-shadow(0 16px 24px rgba(18,61,59,.08));
}

.live-title{
  background:linear-gradient(145deg,#123D3B,#1D5F5B);
}

.live-title strong,
.live-title small{
  color:#fff;
}

.live-title small{
  opacity:.72;
}

.live-dot{
  background:var(--sun);
}

.live-item{
  position:relative;
  overflow:hidden;
}

.live-item::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
}

.live-item:nth-child(2){
  background:linear-gradient(180deg,#FFF9E7,#fff 72%);
}
.live-item:nth-child(2)::before{background:var(--sun)}

.live-item:nth-child(3){
  background:linear-gradient(180deg,#EDFFF6,#fff 72%);
}
.live-item:nth-child(3)::before{background:var(--mint)}

.live-item:nth-child(4){
  background:linear-gradient(180deg,#EAFBFF,#fff 72%);
}
.live-item:nth-child(4)::before{background:var(--aqua)}

.live-item:nth-child(5){
  background:linear-gradient(180deg,#FFF0EA,#fff 72%);
}
.live-item:nth-child(5)::before{background:var(--coral)}

.happening{
  margin-top:34px;
  border-radius:28px;
  background:
    radial-gradient(circle at 96% 6%,rgba(84,212,203,.13),transparent 17rem),
    linear-gradient(180deg,#F7FFFE,#fff 45%);
}

.things{
  position:relative;
}

.things::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:1.5%;
  top:15px;
  border-radius:50%;
  background:rgba(255,211,92,.16);
  pointer-events:none;
}

.eyebrow{
  color:#167A73;
}

.section-heading h2{
  position:relative;
  width:fit-content;
}

.section-heading h2::after{
  content:"";
  display:block;
  width:52px;
  height:5px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--coral),var(--sun));
}

.feature-story,
.visual-card,
.area-card{
  box-shadow:0 12px 32px rgba(18,61,59,.08);
}

.feature-story>img,
.visual-card img,
.area-card img{
  filter:saturate(1.14) brightness(1.04);
}

.happening-row:nth-child(1){background:linear-gradient(100deg,#FFF9E7,#fff 44%)}
.happening-row:nth-child(2){background:linear-gradient(100deg,#FFF0EA,#fff 44%)}
.happening-row:nth-child(3){background:linear-gradient(100deg,#EDFFF6,#fff 44%)}
.happening-row:nth-child(4){background:linear-gradient(100deg,#EEF8FF,#fff 44%)}

.filter-chips button{
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}

.filter-chips button:hover{
  transform:translateY(-2px);
  border-color:rgba(18,61,59,.22);
}

.filter-chips button.active{
  background:linear-gradient(135deg,#123D3B,#236F69);
  box-shadow:0 6px 15px rgba(18,61,59,.14);
}

.colour-band{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 16%,rgba(255,224,109,.95),transparent 9rem),
    radial-gradient(circle at 15% 130%,rgba(255,112,79,.42),transparent 15rem),
    linear-gradient(115deg,#33C8BC,#72E1D7 54%,#B7F0DE);
  box-shadow:0 18px 44px rgba(47,188,177,.18);
}

.colour-band::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  right:-40px;
  bottom:-95px;
  border:18px solid rgba(255,255,255,.26);
  border-radius:50%;
  animation:bandFloat 7s ease-in-out infinite alternate;
}

.colour-band>div,
.colour-band>a{
  position:relative;
  z-index:2;
}

.areas{
  border-radius:28px;
  background:
    radial-gradient(circle at 6% 7%,rgba(255,112,79,.08),transparent 14rem),
    linear-gradient(180deg,#FFFBF7,#fff 50%);
}

.area-card{
  border-color:rgba(18,61,59,.08);
}

.essential-grid a:nth-child(1){background:linear-gradient(145deg,#FFF0EA,#fff)}
.essential-grid a:nth-child(2){background:linear-gradient(145deg,#EAFBFF,#fff)}
.essential-grid a:nth-child(3){background:linear-gradient(145deg,#EDFFF6,#fff)}
.essential-grid a:nth-child(4){background:linear-gradient(145deg,#EEF8FF,#fff)}
.essential-grid a:nth-child(5){background:linear-gradient(145deg,#FFF7D8,#fff)}

.essential-grid a>span{
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(18,61,59,.07);
}

.guide{
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 8%,rgba(114,189,235,.10),transparent 18rem),
    linear-gradient(180deg,#FAFCFF,#fff 50%);
}

.guide-card:nth-child(1){
  background:linear-gradient(145deg,#EAFBFF,#fff 70%);
}
.guide-card:nth-child(2){
  background:linear-gradient(145deg,#FFF7D8,#fff 70%);
}
.guide-card:nth-child(3){
  background:linear-gradient(145deg,#FFF0EA,#fff 70%);
}

.energy-target{
  transition:opacity .56s ease,transform .56s cubic-bezier(.2,.7,.2,1);
}
.motion-ready .energy-target{
  opacity:.01;
  transform:translateY(15px);
}
.motion-ready .energy-target.in-view{
  opacity:1;
  transform:none;
}

@keyframes islandGlow{
  from{transform:translate3d(0,0,0) scale(.94);opacity:.72}
  to{transform:translate3d(-20px,22px,0) scale(1.08);opacity:1}
}

@keyframes bandFloat{
  from{transform:translate3d(0,0,0) rotate(-8deg)}
  to{transform:translate3d(-16px,-8px,0) rotate(8deg)}
}

@media(max-width:760px){
  .hero::before{
    width:230px;
    height:230px;
    right:-80px;
    top:-70px;
  }

  .hero::after{
    bottom:-100px;
    height:140px;
  }

  .hero-media img{
    filter:saturate(1.20) brightness(1.07) contrast(1.02);
  }

  .happening,
  .areas,
  .guide{
    margin-left:7px;
    margin-right:7px;
    border-radius:22px;
  }

  .section-heading h2::after{
    width:42px;
    height:4px;
    margin-top:10px;
  }

  .live-strip{
    filter:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero::before,
  .colour-band::after{
    animation:none!important;
  }

  .motion-ready .energy-target{
    opacity:1!important;
    transform:none!important;
  }
}


/* V2.7 - mobile energy, discovery rails, heritage and food */
.energy-ticker{
  position:relative;
  overflow:hidden;
  margin:20px 0 0;
  padding:11px 0;
  border-top:1px solid rgba(18,61,59,.08);
  border-bottom:1px solid rgba(18,61,59,.08);
  background:linear-gradient(90deg,#FFF8D9,#F1FFFB 52%,#FFF0EA);
}

.ticker-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  animation:tickerMove 30s linear infinite;
}

.ticker-track span{
  font-size:7px;
  letter-spacing:.16em;
  font-weight:900;
  color:#51706C;
}

.ticker-track b{
  font-size:9px;
  color:var(--ink);
}

.ticker-track i{
  color:var(--coral);
  font-style:normal;
}

.must-section{
  position:relative;
  padding-top:34px;
}

.must-section::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:58%;
  z-index:-1;
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 6%,rgba(255,211,92,.18),transparent 15rem),
    linear-gradient(180deg,#FFFDF5,transparent);
}

.must-rail{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:10px;
}

.must-card{
  position:relative;
  min-height:390px;
  overflow:hidden;
  border-radius:23px;
  color:#fff;
  background:#69CBD0;
  box-shadow:0 12px 30px rgba(18,61,59,.08);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,opacity .28s ease;
}

.must-card:nth-child(1){
  min-height:450px;
}

.must-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.16) brightness(1.04);
  transition:transform .5s ease;
}

.must-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,35,33,.02) 25%,rgba(5,35,33,.76) 100%);
}

.must-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(18,61,59,.13);
}

.must-card:hover img{
  transform:scale(1.035);
}

.must-no{
  position:absolute;
  z-index:3;
  top:14px;
  right:16px;
  font-size:42px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.78);
}

.must-card>div{
  position:absolute;
  z-index:3;
  left:17px;
  right:17px;
  bottom:16px;
}

.must-card strong{
  display:block;
  font-size:22px;
  line-height:1.02;
  letter-spacing:-.035em;
}

.must-card small{
  display:block;
  margin-top:6px;
  font-size:8px;
  opacity:.82;
}

.food-section{
  position:relative;
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 12%,rgba(255,112,79,.12),transparent 16rem),
    radial-gradient(circle at 8% 92%,rgba(255,211,92,.11),transparent 14rem),
    linear-gradient(180deg,#FFF9F5,#fff 52%);
}

.food-layout{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:10px;
}

.food-feature{
  position:relative;
  min-height:470px;
  overflow:hidden;
  border-radius:23px;
  color:#fff;
  background:#E08258;
  box-shadow:0 14px 34px rgba(110,67,43,.10);
}

.food-feature>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.18) brightness(1.03);
  transition:transform .55s ease;
}

.food-feature:hover>img{
  transform:scale(1.035);
}

.food-feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(50,20,8,.02) 26%,rgba(50,20,8,.78) 100%);
}

.food-copy{
  position:absolute;
  z-index:2;
  left:21px;
  right:21px;
  bottom:20px;
}

.food-copy span{
  display:inline-flex;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  color:#9B4A34;
  font-size:7px;
  letter-spacing:.15em;
  font-weight:900;
}

.food-copy strong{
  display:block;
  max-width:600px;
  margin-top:11px;
  font-size:34px;
  line-height:.98;
  letter-spacing:-.045em;
}

.food-copy p{
  max-width:580px;
  margin:9px 0 0;
  font-size:9px;
  line-height:1.5;
  color:rgba(255,255,255,.84);
}

.food-picks{
  display:grid;
  gap:9px;
}

.food-pick{
  min-height:145px;
  padding:17px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:18px;
  transition:.18s ease;
}

.food-pick:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.food-pick.coral{background:linear-gradient(135deg,#FFF0EA,#fff)}
.food-pick.aqua{background:linear-gradient(135deg,#EAFBFF,#fff)}
.food-pick.yellow{background:linear-gradient(135deg,#FFF7D8,#fff)}

.food-symbol{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(255,255,255,.86);
  font-size:22px;
  color:var(--ink);
}

.food-pick span{
  display:block;
  font-size:6px;
  letter-spacing:.15em;
  font-weight:900;
  color:var(--coral);
}

.food-pick strong{
  display:block;
  margin-top:5px;
  font-size:18px;
  color:var(--ink);
}

.food-pick small{
  display:block;
  margin-top:5px;
  font-size:8px;
  color:var(--muted);
}

.heritage-section{
  max-width:1600px;
  margin:42px auto 18px;
  padding:58px max(20px,calc((100vw - 1380px)/2 + 42px)) 62px;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,211,92,.16),transparent 18rem),
    linear-gradient(135deg,#0F3E3B,#185B56 58%,#216B65);
  color:#fff;
}

.heritage-intro{
  max-width:780px;
  margin-bottom:23px;
}

.heritage-intro .eyebrow{
  color:#8EE1D7;
}

.heritage-intro h2{
  margin:0;
  font-size:clamp(40px,5vw,70px);
  line-height:.94;
  letter-spacing:-.055em;
}

.heritage-intro>p:last-child{
  max-width:650px;
  margin:14px 0 0;
  font-size:11px;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}

.heritage-rail{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}

.heritage-rail::-webkit-scrollbar{
  display:none;
}

.heritage-card{
  position:relative;
  min-width:360px;
  min-height:460px;
  overflow:hidden;
  border-radius:23px;
  scroll-snap-align:start;
  color:#fff;
  background:#2A6E66;
  box-shadow:0 16px 32px rgba(0,0,0,.15);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}

.heritage-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) brightness(.98);
  transition:transform .5s ease;
}

.heritage-card:hover img{
  transform:scale(1.035);
}

.heritage-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,28,26,.03) 24%,rgba(6,28,26,.86) 100%);
}

.heritage-card>div{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:18px;
}

.heritage-card span{
  display:block;
  font-size:7px;
  letter-spacing:.18em;
  font-weight:900;
  color:#BDF4ED;
}

.heritage-card strong{
  display:block;
  margin-top:7px;
  font-size:26px;
  line-height:1;
  letter-spacing:-.04em;
}

.heritage-card small{
  display:block;
  margin-top:6px;
  max-width:310px;
  font-size:8px;
  line-height:1.45;
  color:rgba(255,255,255,.78);
}

@keyframes tickerMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media(max-width:1050px){
  .must-rail{
    grid-template-columns:repeat(2,1fr);
  }

  .must-card,
  .must-card:nth-child(1){
    min-height:380px;
  }

  .food-layout{
    grid-template-columns:1fr;
  }

  .food-picks{
    grid-template-columns:repeat(3,1fr);
  }

  .food-pick{
    min-height:135px;
  }
}

@media(max-width:760px){
  .energy-ticker{
    margin-top:16px;
    padding:10px 0;
  }

  .ticker-track{
    animation-duration:24s;
  }

  .must-section{
    padding-top:30px;
  }

  .must-rail{
    display:flex;
    overflow-x:auto;
    gap:10px;
    margin-left:-11px;
    margin-right:-11px;
    padding:0 11px 6px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .must-rail::-webkit-scrollbar{display:none}

  .must-card,
  .must-card:nth-child(1){
    min-width:82%;
    min-height:410px;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transform:scale(.965);
    opacity:.82;
  }

  .must-card.is-active{
    transform:scale(1);
    opacity:1;
  }

  .must-no{
    font-size:38px;
  }

  .food-section{
    margin-left:7px;
    margin-right:7px;
    border-radius:22px;
  }

  .food-feature{
    min-height:380px;
  }

  .food-copy strong{
    font-size:28px;
  }

  .food-picks{
    display:flex;
    overflow-x:auto;
    gap:8px;
    margin-left:-11px;
    margin-right:-11px;
    padding:0 11px 5px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .food-picks::-webkit-scrollbar{display:none}

  .food-pick{
    min-width:76%;
    min-height:125px;
    scroll-snap-align:center;
  }

  .heritage-section{
    margin-top:25px;
    padding:42px 0 45px;
  }

  .heritage-intro{
    padding:0 14px;
    margin-bottom:19px;
  }

  .heritage-intro h2{
    font-size:43px;
  }

  .heritage-rail{
    padding:0 12px 5px;
    gap:9px;
    -webkit-overflow-scrolling:touch;
  }

  .heritage-card{
    min-width:82%;
    min-height:430px;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transform:scale(.965);
    opacity:.78;
  }

  .heritage-card.is-active{
    transform:scale(1);
    opacity:1;
  }

  .heritage-card strong{
    font-size:28px;
  }
}

@media(prefers-reduced-motion:reduce){
  .must-card,
  .heritage-card{
    opacity:1!important;
  }
}


/* V2.8 - visible motion system */
.hero-slides{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:scale(1.07);
  transition:
    opacity 1.05s ease,
    transform 6.5s cubic-bezier(.2,.65,.2,1);
  pointer-events:none;
}

.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  filter:saturate(1.18) brightness(1.06) contrast(1.035);
}

.hero-scene{
  position:absolute;
  left:clamp(22px,6vw,92px);
  bottom:23px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

.hero-scene-count{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  background:rgba(7,44,41,.22);
  backdrop-filter:blur(8px);
  font-size:7px;
  letter-spacing:.13em;
  font-weight:900;
}

.hero-scene-label{
  font-size:8px;
  letter-spacing:.15em;
  font-weight:850;
  text-shadow:0 1px 8px rgba(0,0,0,.24);
}

.hero-controls{
  position:absolute;
  right:clamp(18px,4vw,55px);
  bottom:19px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:9px;
}

.hero-prev,
.hero-next{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(6,45,42,.30);
  color:#fff;
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}

.hero-prev:hover,
.hero-next:hover{
  transform:scale(1.07);
  background:rgba(6,45,42,.48);
}

.hero-dots{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(6,45,42,.25);
  backdrop-filter:blur(8px);
}

.hero-dots button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.46);
  cursor:pointer;
  transition:width .22s ease,background .22s ease;
}

.hero-dots button.is-active{
  width:23px;
  background:#fff;
}

.hero-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:6;
  height:3px;
  overflow:hidden;
  background:rgba(255,255,255,.18);
}

.hero-progress span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--sun),var(--coral));
  transform:scaleX(0);
  transform-origin:left center;
}

.hero-progress.is-running span{
  animation:heroProgress 6.2s linear forwards;
}

/* Clearer, visible scroll entrances */
.motion-ready .energy-target{
  opacity:0;
  transform:translateY(34px) scale(.985);
}

.energy-target{
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.18,.76,.22,1);
}

.motion-ready .energy-target.in-view{
  opacity:1;
  transform:translateY(0) scale(1);
}

.motion-ready .section-heading{
  transition:transform .7s cubic-bezier(.18,.76,.22,1),opacity .7s ease;
}

.motion-ready .energy-target:not(.in-view) .section-heading{
  opacity:0;
  transform:translateX(-22px);
}

.motion-ready .energy-target.in-view .section-heading{
  opacity:1;
  transform:none;
}

/* Give horizontal rails a one-time hint that they can move */
.rail-peek{
  animation:railPeek 1.05s cubic-bezier(.2,.72,.25,1);
}

/* Slight ongoing life in key cards */
.live-dot{
  animation:pulse 1.6s infinite;
}

.happening-row em.ok{
  position:relative;
  overflow:hidden;
}

.happening-row em.ok::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.62) 48%,transparent 74%);
  transform:translateX(-120%);
  animation:statusShine 4.8s ease-in-out infinite;
}

@keyframes heroProgress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@keyframes railPeek{
  0%{transform:translateX(0)}
  42%{transform:translateX(-28px)}
  72%{transform:translateX(8px)}
  100%{transform:translateX(0)}
}

@keyframes statusShine{
  0%,68%{transform:translateX(-120%)}
  82%,100%{transform:translateX(120%)}
}

@media(max-width:760px){
  .hero-slide img{
    object-position:58% center;
  }

  .hero-scene{
    left:14px;
    bottom:17px;
    right:132px;
    gap:7px;
  }

  .hero-scene-label{
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero-controls{
    right:11px;
    bottom:12px;
    gap:5px;
  }

  .hero-prev,
  .hero-next{
    width:35px;
    height:35px;
  }

  .hero-dots{
    gap:4px;
    padding:6px 7px;
  }

  .hero-dots button{
    width:6px;
    height:6px;
  }

  .hero-dots button.is-active{
    width:17px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-slide{
    transition:opacity .35s ease!important;
    transform:none!important;
  }

  .hero-progress{
    display:none!important;
  }

  .rail-peek,
  .happening-row em.ok::after{
    animation:none!important;
  }
}


/* V2.9 - force visible motion after mobile cache fix */
.hero-slide.is-active img{
  animation:heroKenBurns 6.2s ease-out both;
}

.hero-slide:nth-child(even).is-active img{
  animation-name:heroKenBurnsAlt;
}

.hero-copy{
  animation:heroCopyIn .75s cubic-bezier(.18,.76,.22,1) both;
}

.hero-scene-label{
  transition:opacity .22s ease,transform .22s ease;
}

@keyframes heroKenBurns{
  from{transform:scale(1.08) translate3d(1.2%,.6%,0)}
  to{transform:scale(1.015) translate3d(-.8%,-.4%,0)}
}

@keyframes heroKenBurnsAlt{
  from{transform:scale(1.07) translate3d(-1%,.4%,0)}
  to{transform:scale(1.015) translate3d(.8%,-.5%,0)}
}

@keyframes heroCopyIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

@media(max-width:760px){
  .hero{
    min-height:520px;
  }

  .hero-copy{
    padding-bottom:118px;
  }

  .hero-scene{
    bottom:76px;
  }

  .hero-controls{
    bottom:70px;
  }

  .hero-progress{
    bottom:60px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-slide.is-active img{
    animation:none!important;
    transform:none!important;
  }

  .hero-copy{
    animation:none!important;
  }
}


/* V2.10 - functional motion always works, even when iOS reports reduced motion */
.motion-on .hero-progress{
  display:block!important;
}

.motion-on .hero-progress.is-running span{
  animation:heroProgress 4s linear forwards!important;
}

.motion-on .hero-slide{
  transition:opacity .62s ease,transform 4s cubic-bezier(.2,.65,.2,1)!important;
}

.motion-on .hero-slide.is-active img{
  animation:heroKenBurns 3s ease-out both!important;
}

.motion-on .hero-slide:nth-child(even).is-active img{
  animation-name:heroKenBurnsAlt!important;
}

.motion-on .ticker-track{
  animation:tickerMove 20s linear infinite!important;
}

.motion-on .rail-peek{
  animation:railPeek 1.05s cubic-bezier(.2,.72,.25,1)!important;
}

.motion-on .energy-target{
  opacity:0;
  transform:translateY(34px) scale(.985);
}

.motion-on .energy-target.in-view{
  opacity:1;
  transform:none;
}

.motion-on .energy-target .feature-story,
.motion-on .energy-target .happening-row,
.motion-on .energy-target .visual-card,
.motion-on .energy-target .must-card,
.motion-on .energy-target .area-card,
.motion-on .energy-target .food-feature,
.motion-on .energy-target .food-pick,
.motion-on .energy-target .essential-grid a,
.motion-on .energy-target .heritage-card,
.motion-on .energy-target .guide-card{
  opacity:0;
  transform:translateY(26px) scale(.975);
  transition:
    opacity .58s ease,
    transform .68s cubic-bezier(.18,.76,.22,1),
    box-shadow .2s ease;
}

.motion-on .energy-target.in-view .feature-story,
.motion-on .energy-target.in-view .happening-row,
.motion-on .energy-target.in-view .visual-card,
.motion-on .energy-target.in-view .must-card,
.motion-on .energy-target.in-view .area-card,
.motion-on .energy-target.in-view .food-feature,
.motion-on .energy-target.in-view .food-pick,
.motion-on .energy-target.in-view .essential-grid a,
.motion-on .energy-target.in-view .heritage-card,
.motion-on .energy-target.in-view .guide-card{
  opacity:1;
  transform:none;
}

.motion-on .energy-target.in-view .happening-row:nth-child(2),
.motion-on .energy-target.in-view .visual-card:nth-child(2),
.motion-on .energy-target.in-view .must-card:nth-child(2),
.motion-on .energy-target.in-view .food-pick:nth-child(2),
.motion-on .energy-target.in-view .essential-grid a:nth-child(2),
.motion-on .energy-target.in-view .heritage-card:nth-child(2),
.motion-on .energy-target.in-view .guide-card:nth-child(2){
  transition-delay:.08s;
}

.motion-on .energy-target.in-view .happening-row:nth-child(3),
.motion-on .energy-target.in-view .visual-card:nth-child(3),
.motion-on .energy-target.in-view .must-card:nth-child(3),
.motion-on .energy-target.in-view .food-pick:nth-child(3),
.motion-on .energy-target.in-view .essential-grid a:nth-child(3),
.motion-on .energy-target.in-view .heritage-card:nth-child(3),
.motion-on .energy-target.in-view .guide-card:nth-child(3){
  transition-delay:.16s;
}

.motion-on .energy-target.in-view .happening-row:nth-child(4),
.motion-on .energy-target.in-view .must-card:nth-child(4),
.motion-on .energy-target.in-view .essential-grid a:nth-child(4){
  transition-delay:.24s;
}

.motion-on .energy-target.in-view .essential-grid a:nth-child(5){
  transition-delay:.32s;
}

/* When iOS asks for reduced motion, keep the site alive but tone down travel distance */
.motion-reduced .energy-target{
  transform:translateY(14px) scale(.995);
}

.motion-reduced .energy-target .feature-story,
.motion-reduced .energy-target .happening-row,
.motion-reduced .energy-target .visual-card,
.motion-reduced .energy-target .must-card,
.motion-reduced .energy-target .area-card,
.motion-reduced .energy-target .food-feature,
.motion-reduced .energy-target .food-pick,
.motion-reduced .energy-target .essential-grid a,
.motion-reduced .energy-target .heritage-card,
.motion-reduced .energy-target .guide-card{
  transform:translateY(12px) scale(.99);
}

@media(max-width:760px){
  .motion-on .energy-target{
    transform:translateY(28px) scale(.985);
  }

  .motion-on .hero-slide.is-active img{
    animation-duration:4s!important;
  }
}


/* V2.11 - iOS motion override and stronger visible transitions */
.motion-on.motion-ready .energy-target{
  opacity:0!important;
  transform:translateY(34px) scale(.985)!important;
}

.motion-on.motion-ready .energy-target.in-view{
  opacity:1!important;
  transform:none!important;
}

.motion-on.motion-ready .energy-target .feature-story,
.motion-on.motion-ready .energy-target .happening-row,
.motion-on.motion-ready .energy-target .visual-card,
.motion-on.motion-ready .energy-target .must-card,
.motion-on.motion-ready .energy-target .area-card,
.motion-on.motion-ready .energy-target .food-feature,
.motion-on.motion-ready .energy-target .food-pick,
.motion-on.motion-ready .energy-target .essential-grid a,
.motion-on.motion-ready .energy-target .heritage-card,
.motion-on.motion-ready .energy-target .guide-card{
  opacity:0!important;
  transform:translateY(26px) scale(.975)!important;
}

.motion-on.motion-ready .energy-target.in-view .feature-story,
.motion-on.motion-ready .energy-target.in-view .happening-row,
.motion-on.motion-ready .energy-target.in-view .visual-card,
.motion-on.motion-ready .energy-target.in-view .must-card,
.motion-on.motion-ready .energy-target.in-view .area-card,
.motion-on.motion-ready .energy-target.in-view .food-feature,
.motion-on.motion-ready .energy-target.in-view .food-pick,
.motion-on.motion-ready .energy-target.in-view .essential-grid a,
.motion-on.motion-ready .energy-target.in-view .heritage-card,
.motion-on.motion-ready .energy-target.in-view .guide-card{
  opacity:1!important;
  transform:none!important;
}

.motion-on .hero-progress.is-running span{
  animation-duration:4s!important;
}

.motion-on .hero-slide{
  transition-duration:.62s,4s!important;
}

.motion-on .hero-slide.is-active img{
  animation-duration:4s!important;
}

.motion-on .ticker-track{
  animation-duration:16s!important;
}

.motion-on .live-dot{
  animation:pulse 1.2s infinite!important;
}

@media(max-width:760px){
  .motion-on.motion-ready .energy-target{
    transform:translateY(26px) scale(.988)!important;
  }

  .motion-on .rail-peek{
    animation-duration:1.25s!important;
  }
}


/* V2.12 - confirmed mobile motion + compact live status */
.motion-on .energy-target{
  transition:
    opacity .62s ease!important,
    transform .72s cubic-bezier(.18,.76,.22,1)!important;
}

.motion-on .energy-target .feature-story,
.motion-on .energy-target .happening-row,
.motion-on .energy-target .visual-card,
.motion-on .energy-target .must-card,
.motion-on .energy-target .area-card,
.motion-on .energy-target .food-feature,
.motion-on .energy-target .food-pick,
.motion-on .energy-target .essential-grid a,
.motion-on .energy-target .heritage-card,
.motion-on .energy-target .guide-card{
  transition:
    opacity .56s ease!important,
    transform .66s cubic-bezier(.18,.76,.22,1)!important,
    box-shadow .2s ease!important;
}

.motion-on .energy-target.in-view .feature-story>img,
.motion-on .energy-target.in-view .food-feature>img{
  animation:contentDrift 8s ease-in-out infinite alternate!important;
}

.motion-on .energy-target.in-view .visual-card:first-child img{
  animation:contentDriftAlt 9s ease-in-out infinite alternate!important;
}

.motion-on .heritage-section.in-view .heritage-card.is-active img{
  animation:contentDrift 8.5s ease-in-out infinite alternate!important;
}

@keyframes contentDrift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.075) translate3d(-1.2%,-.7%,0)}
}

@keyframes contentDriftAlt{
  from{transform:scale(1.065) translate3d(-1%,.4%,0)}
  to{transform:scale(1.02) translate3d(.8%,-.5%,0)}
}

@media(max-width:760px){
  .live-strip{
    position:relative;
    margin:-18px 0 0;
    padding:34px 10px 4px;
    gap:8px;
    background:#fff;
  }

  .live-strip::before{
    content:"TRẠNG THÁI ĐẢO TRỰC TIẾP";
    position:absolute;
    left:12px;
    top:10px;
    color:var(--ink);
    font-size:7px;
    line-height:1;
    letter-spacing:.15em;
    font-weight:900;
  }

  .live-title{
    display:none!important;
  }

  .live-item,
  .live-item:last-child{
    min-width:44%;
    min-height:96px;
    padding:14px 13px;
    border:1px solid var(--line);
    border-radius:15px;
    box-shadow:0 7px 18px rgba(18,61,59,.05);
  }

  .live-item strong{
    font-size:20px;
  }

  .live-item small{
    font-size:7px;
  }
}


/* V2.13 - reliable breaking-news marquee on mobile */
.energy-ticker{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:0;
  padding:0;
  min-height:40px;
}

.ticker-label{
  position:relative;
  z-index:3;
  height:40px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--ink);
  color:#fff;
  white-space:nowrap;
}

.ticker-label>span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 0 rgba(255,112,79,.35);
  animation:tickerPulse 1.5s ease-out infinite;
}

.ticker-label strong{
  font-size:7px;
  letter-spacing:.16em;
  font-weight:900;
}

.ticker-window{
  min-width:0;
  overflow:hidden;
  height:40px;
  display:flex;
  align-items:center;
}

.ticker-track{
  flex:none;
  min-width:max-content;
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
  animation:tickerMove 16s linear infinite!important;
}

@keyframes tickerPulse{
  0%{box-shadow:0 0 0 0 rgba(255,112,79,.35)}
  70%{box-shadow:0 0 0 7px rgba(255,112,79,0)}
  100%{box-shadow:0 0 0 0 rgba(255,112,79,0)}
}

@media(max-width:760px){
  .energy-ticker{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    min-height:38px;
    margin-top:12px;
    overflow:hidden;
    border-top:1px solid rgba(18,61,59,.08);
    border-bottom:1px solid rgba(18,61,59,.08);
  }

  .ticker-label{
    height:38px;
    padding:0 10px;
  }

  .ticker-label strong{
    font-size:6px;
    letter-spacing:.13em;
  }

  .ticker-label>span{
    width:6px;
    height:6px;
  }

  .ticker-window{
    width:100%;
    height:38px;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }

  .motion-on .ticker-track,
  .ticker-track{
    animation:tickerMoveMobile 10.5s linear infinite!important;
  }
}

@keyframes tickerMoveMobile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}


/* V2.14 - approved Open Phu Quoc mobile chrome */
.site-header .brand img,
.site-footer img{
  display:block;
  opacity:1;
  visibility:visible;
}

@media(max-width:760px){
  body{
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }

  .site-header{
    min-height:64px;
    height:64px;
    padding:7px 12px 7px 14px;
    gap:9px;
  }

  .brand{
    width:170px;
    min-width:170px;
    height:44px;
    margin-right:auto;
    overflow:visible;
  }

  .brand img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:left center;
  }

  .header-search,
  .menu-button{
    width:42px;
    height:42px;
    flex:0 0 42px;
    background:#fff;
    border:1px solid rgba(18,61,59,.12);
    box-shadow:none;
  }

  .mobile-dock{
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:auto;
    min-height:64px;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    border:0;
    border-top:1px solid rgba(18,61,59,.10);
    border-radius:0;
    background:rgba(255,255,255,.985);
    box-shadow:0 -8px 24px rgba(18,61,59,.07);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .mobile-dock a,
  .mobile-dock button{
    position:relative;
    min-width:0;
    height:54px;
    padding:4px 2px 3px;
    border:0;
    border-radius:12px!important;
    background:transparent!important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#758582!important;
    font-size:9px;
    line-height:1;
    font-weight:760;
    box-shadow:none!important;
  }

  .mobile-dock span{
    color:currentColor;
    font-size:20px;
    line-height:1;
  }

  .mobile-dock a.active{
    color:var(--ink)!important;
    background:var(--aqua-soft)!important;
  }

  .mobile-dock a.active::before{
    content:"";
    position:absolute;
    top:3px;
    width:20px;
    height:3px;
    border-radius:999px;
    background:var(--coral);
  }

  .mobile-dock .dock-search{
    color:#758582!important;
  }

  .mobile-dock .dock-search:active,
  .mobile-dock a:active{
    background:var(--soft)!important;
    transform:translateY(1px);
  }

  .toast{
    bottom:calc(74px + env(safe-area-inset-bottom));
  }
}


/* V2.15 - scalable app navigation + robust approved-logo rendering */
.brand{
  background:
    url("assets/logo-master.png?v=approved-20260918-2")
    left center / contain no-repeat;
}

.brand img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  opacity:1!important;
  visibility:visible!important;
}

.more-backdrop{
  position:fixed;
  inset:0;
  z-index:89;
  background:rgba(7,35,33,.34);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .22s ease;
}

.more-backdrop.is-open{
  opacity:1;
}

.more-sheet{
  position:fixed;
  left:50%;
  bottom:0;
  z-index:90;
  width:min(680px,100%);
  max-height:min(82svh,760px);
  overflow:auto;
  padding:10px 16px calc(22px + env(safe-area-inset-bottom));
  border:1px solid rgba(18,61,59,.10);
  border-bottom:0;
  border-radius:26px 26px 0 0;
  background:#fff;
  box-shadow:0 -20px 60px rgba(18,61,59,.18);
  transform:translate(-50%,105%);
  opacity:0;
  transition:transform .32s cubic-bezier(.2,.78,.2,1),opacity .22s ease;
  overscroll-behavior:contain;
}

.more-sheet.is-open{
  transform:translate(-50%,0);
  opacity:1;
}

.more-handle{
  width:42px;
  height:4px;
  margin:0 auto 12px;
  border-radius:999px;
  background:#D8E3E1;
}

.more-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.more-head p,
.more-label{
  margin:0;
  color:#718480;
  font-size:7px;
  letter-spacing:.16em;
  font-weight:900;
}

.more-head h2{
  margin:4px 0 0;
  color:var(--ink);
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
}

.more-close{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.more-group + .more-group{
  margin-top:19px;
}

.more-label{
  margin-bottom:9px;
}

.more-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.more-grid a{
  min-height:108px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,var(--soft));
  transition:transform .16s ease,box-shadow .16s ease;
}

.more-grid a:active{
  transform:scale(.98);
}

.more-grid span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--aqua-soft);
  color:var(--ink);
  font-size:17px;
}

.more-grid strong{
  margin-top:10px;
  color:var(--ink);
  font-size:10px;
  line-height:1.1;
}

.more-grid small{
  margin-top:4px;
  color:var(--muted);
  font-size:7px;
  line-height:1.35;
}

.more-list{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
}

.more-list a{
  min-height:48px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:10px;
  color:var(--ink);
}

.more-list a:last-child{
  border-bottom:0;
}

body.sheet-open{
  overflow:hidden;
}

@media(max-width:1120px){
  .desktop-nav.open{
    display:none!important;
  }
}

@media(max-width:760px){
  .brand{
    width:176px;
    min-width:176px;
    height:45px;
  }

  .more-sheet{
    max-height:78svh;
    padding:9px 12px calc(18px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
  }

  .more-head h2{
    font-size:27px;
  }

  .more-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .more-grid a{
    min-height:96px;
    padding:11px;
  }

  .more-grid strong{
    font-size:10px;
  }

  .more-grid small{
    font-size:7px;
  }
}


/* V2.16 - logo is embedded in HTML; no secondary image request */
.brand{background:none!important}


/* VisitSingapore-inspired reading rhythm: one strong visual, then a short useful layer. */
.section{padding-top:76px;padding-bottom:76px}
.section-heading{margin-bottom:27px}
.section-heading h2{max-width:760px}
.happening-layout{grid-template-columns:minmax(0,1.35fr) minmax(360px,.82fr);gap:18px}
.feature-story{min-height:560px}
.happening-list{gap:10px}
.happening-row{min-height:126px;padding:16px}
.things-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr);
  grid-template-rows:1fr 1fr;
  gap:12px;
}
.things-grid .visual-card.wide{grid-row:1/3;min-height:610px}
.things-grid .visual-card:not(.wide){min-height:299px}
.must-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:5px}
.must-rail::-webkit-scrollbar{display:none}
.must-card,.must-card:nth-child(1){min-width:330px;min-height:430px;scroll-snap-align:start}
.must-card:nth-child(1){min-width:430px}
.area-card{min-width:330px}
.area-card img{height:270px}
.food-layout{gap:16px}
.food-feature{min-height:540px}
.food-pick{min-height:166px;padding:20px}
.essential-grid{grid-template-columns:repeat(3,1fr);gap:10px}
.essential-grid a{min-height:122px;padding:18px}
.guide-grid{gap:12px}
.guide-card{min-height:200px;padding:24px}
.heritage-section{margin-top:60px;margin-bottom:30px;padding-top:72px;padding-bottom:74px}
.heritage-intro{margin-bottom:30px}
.heritage-card{min-width:390px;min-height:500px}
.site-footer{margin-top:68px}

@media(max-width:980px){
  .happening-layout{grid-template-columns:1fr}
  .things-grid{grid-template-columns:1.15fr .85fr}
  .essential-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .section{padding-top:49px;padding-bottom:49px}
  .section-heading{margin-bottom:20px}
  .section-heading h2{font-size:36px;line-height:.98}
  .feature-story{min-height:470px}
  .happening-list{padding-bottom:3px}
  .happening-row{min-width:84%;min-height:132px}
  .things-grid{
    display:flex;
    overflow-x:auto;
    gap:9px;
    scroll-snap-type:x mandatory;
    margin:0 -11px;
    padding:0 11px 3px;
  }
  .things-grid .visual-card.wide,
  .things-grid .visual-card:not(.wide){
    min-width:84%;
    min-height:470px;
    scroll-snap-align:center;
  }
  .must-card,.must-card:nth-child(1){min-width:84%;min-height:470px}
  .area-card{min-width:82%}
  .food-layout{grid-template-columns:1fr}
  .food-feature{min-height:470px}
  .food-picks{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory}
  .food-pick{min-width:82%;min-height:150px;scroll-snap-align:center}
  .essential-grid{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory}
  .essential-grid a{min-width:78%;scroll-snap-align:center}
  .guide-grid{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory}
  .guide-card{min-width:82%;scroll-snap-align:center}
  .heritage-section{margin-top:48px;padding-top:52px;padding-bottom:56px}
  .heritage-card{min-width:84%;min-height:480px}
}