:root {
  --navy:#081b31;
  --navy-2:#102b4a;
  --blue:#0d86b3;
  --sky:#8fd7ec;
  --gold:#d4b077;
  --gold-soft:#f3e4c7;
  --white:#ffffff;
  --paper:#f7f8f8;
  --text:#163047;
  --muted:#6f7f8e;
  --line:rgba(18,48,73,.10);
  --shadow:0 24px 70px rgba(6,27,48,.10);
  --font-body:"Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}

.container{width:min(1180px, calc(100% - 40px)); margin:auto}

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90; padding:16px 20px; transition:.3s ease;
}
.site-header.scrolled{padding-top:10px}
.header-shell{
  width:min(1260px, 100%); margin:auto; height:72px; padding:0 12px 0 18px;
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(6,24,42,.60), rgba(6,24,42,.32));
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 16px 46px rgba(0,13,25,.16);
}
.site-header.scrolled .header-shell{
  background:rgba(6,24,42,.86);
  border-color:rgba(255,255,255,.10);
}
.brand{display:flex; align-items:center; gap:12px; color:#fff; white-space:nowrap}
.brand img{width:42px; height:auto; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(98,212,242,.18))}
.brand-text strong{
  display:block; font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:.06em; line-height:1;
}
.brand-text small{display:block; margin-top:6px; font-size:9px; color:rgba(255,255,255,.60); letter-spacing:.24em}

.desktop-nav{display:flex; justify-content:center; align-items:center; gap:4px; min-width:0}
.desktop-nav a{
  position:relative; padding:12px 12px; font-size:13px; font-weight:500; color:rgba(255,255,255,.76); white-space:nowrap; transition:.25s ease;
}
.desktop-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px; height:1px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft)); transform:scaleX(0); transform-origin:center; transition:.25s ease;
}
.desktop-nav a:hover{color:#fff}
.desktop-nav a:hover::after{transform:scaleX(1)}

.header-actions{display:flex; align-items:center; gap:8px}
.lang-switch{display:flex; gap:2px; padding:3px; border-radius:11px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06)}
.lang-switch button{
  border:0; background:transparent; color:rgba(255,255,255,.56); font-size:11px; font-weight:700;
  padding:7px 9px; border-radius:8px; cursor:pointer;
}
.lang-switch button.active{background:#fff; color:var(--navy)}
.btn{
  border:0; cursor:pointer; border-radius:13px; padding:12px 16px; font-size:12px; font-weight:700; transition:.25s ease;
}
.btn-outline{color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14)}
.btn-outline:hover{background:rgba(255,255,255,.15)}
.btn-light{color:var(--navy); background:linear-gradient(135deg, #fff, #e5f3f8); box-shadow:0 10px 26px rgba(173,227,240,.15)}
.btn-light:hover{transform:translateY(-1px)}
.menu-toggle{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer; place-items:center;
}
.menu-toggle .lines, .menu-toggle .lines::before, .menu-toggle .lines::after{
  content:""; display:block; width:18px; height:1.7px; background:currentColor; transition:.25s ease;
}
.menu-toggle .lines::before{transform:translateY(-6px)}
.menu-toggle .lines::after{transform:translateY(4px)}
.menu-toggle.active .lines{background:transparent}
.menu-toggle.active .lines::before{transform:rotate(45deg)}
.menu-toggle.active .lines::after{transform:rotate(-45deg)}

.mobile-menu{
  display:none; position:fixed; z-index:85; top:94px; left:16px; right:16px;
  padding:10px; border-radius:20px;
  background:rgba(6,24,42,.96); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none; transition:.25s ease;
}
.mobile-menu.open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto}
.mobile-menu a, .mobile-menu .mobile-btn{
  display:flex; width:100%; padding:13px 12px; color:#fff; border-radius:11px; font-size:13px; background:transparent; border:0; cursor:pointer; text-align:left;
}
.mobile-menu a:hover, .mobile-menu .mobile-btn:hover{background:rgba(255,255,255,.08)}
.mobile-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 4px 4px}
.mobile-lang{display:flex; gap:8px; padding:12px 4px 4px; margin-top:4px; border-top:1px solid rgba(255,255,255,.10)}
.mobile-lang button{
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; border-radius:9px; padding:8px 11px; font-size:10px; font-weight:700; cursor:pointer;
}
.mobile-lang button.active{background:#fff; color:var(--navy)}

.hero{
  position:relative; min-height:100svh; overflow:hidden; background:#0f3f68; display:flex; align-items:flex-end;
}
.hero-slider{position:absolute; inset:0}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity .9s ease, transform 6s ease; transform:scale(1.02);
  background-size:cover; background-position:center;
}
.hero-slide.active{opacity:1; transform:scale(1.06)}
.hero-slide.s1{background-image:url('../images/hero-day.jpg'); background-position:68% center}
.hero-slide.s2{background-image:url('../images/hero-night.jpg'); background-position:center}
.hero-slide.s3{background-image:url('../images/hero-day.jpg'); background-position:76% center}
.hero-slide::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,24,42,.74) 0%, rgba(6,24,42,.40) 38%, rgba(6,24,42,.10) 68%, rgba(6,24,42,.18) 100%),
    linear-gradient(0deg, rgba(6,24,42,.82) 0%, rgba(6,24,42,.08) 46%, rgba(6,24,42,.26) 100%);
}
.slide-content{
  position:absolute; left:0; right:0; bottom:148px; z-index:2; pointer-events:none;
}
.slide-content .container{display:flex; justify-content:flex-end}
.activity-chip{
  width:min(380px, 100%); padding:20px; border-radius:22px; color:#fff;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(8,34,58,.56), rgba(5,24,42,.40));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 55px rgba(0,18,33,.20);
}
.activity-chip .k{font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#bfe9f2}
.activity-chip h3{margin:10px 0 10px; font-family:var(--font-display); font-size:28px; line-height:1.2; font-weight:600}
.activity-chip p{margin:0; color:rgba(255,255,255,.74); font-size:13px; line-height:1.72}

.cloud-layer{
  position:absolute; left:-40%; width:180%; height:44%; z-index:1; pointer-events:none;
  background-image:url('../images/cloud-base.png'); background-repeat:repeat-x; background-size:auto 100%; mix-blend-mode:screen;
}
.cloud-1{top:-1%; opacity:.34; animation:cloudDrift 55s linear infinite}
.cloud-2{top:12%; opacity:.18; transform:scale(.84); filter:blur(.45px); animation:cloudDriftSlow 84s linear infinite reverse}
@keyframes cloudDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(24%,0,0)}}
@keyframes cloudDriftSlow{from{transform:translate3d(-10%,0,0) scale(.84)}to{transform:translate3d(18%,0,0) scale(.84)}}

.glow{
  position:absolute; left:-10%; bottom:2%; z-index:1; width:55vw; height:55vw; max-width:860px; max-height:860px; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle, rgba(255,215,170,.38) 0%, rgba(255,215,170,.12) 36%, transparent 72%); filter:blur(14px);
}
.hero-overlay-noise{
  position:absolute; inset:0; z-index:1; opacity:.04; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-content{
  position:relative; z-index:3; width:min(1240px, calc(100% - 52px)); margin:0 auto; padding:160px 0 52px;
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.10fr) minmax(320px,.70fr); gap:42px; align-items:end}
.eyebrow{display:flex; align-items:center; gap:12px; color:#e6fbff; font-size:11px; font-weight:800; letter-spacing:.20em; text-transform:uppercase}
.eyebrow::before{content:""; width:38px; height:1px; background:linear-gradient(90deg, var(--gold), var(--gold-soft))}
.hero h1{
  margin:18px 0 16px; color:#fff; font-family:var(--font-display); font-size:clamp(54px, 7vw, 102px); line-height:.98; letter-spacing:-.04em; font-weight:600;
}
.hero h1 em{font-style:normal; color:#d7f2f9}
.hero .lead{
  max-width:640px; margin:0; color:rgba(255,255,255,.80); font-size:clamp(15px, 1.5vw, 19px); font-weight:300; line-height:1.82;
}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px}
.hero-cta .btn{padding:14px 18px}
.hero-metrics{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.metric{
  min-width:140px; padding:14px 16px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12); color:#fff;
  background:rgba(255,255,255,.06); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.metric strong{display:block; font-size:21px; font-weight:800}
.metric span{display:block; margin-top:5px; font-size:11px; color:rgba(255,255,255,.68)}

.hero-card{
  padding:24px; border-radius:26px; color:#fff;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(8,34,58,.56), rgba(5,25,44,.42));
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 24px 80px rgba(0,16,33,.22);
}
.hero-card .tag{font-size:10px; letter-spacing:.20em; text-transform:uppercase; color:#bde9f3; font-weight:800}
.hero-card h2{margin:12px 0 16px; font-family:var(--font-display); font-size:30px; line-height:1.18; font-weight:600}
.quick-links{display:grid; gap:10px}
.quick-link{
  display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center;
  width:100%; padding:11px; border-radius:16px; color:#fff; text-align:left;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.065); transition:.25s ease;
}
.quick-link:hover{background:rgba(255,255,255,.11); transform:translateX(2px)}
.quick-icon{display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.09); font-size:18px}
.quick-link b{display:block; font-size:13px}
.quick-link small{display:block; margin-top:4px; font-size:11px; color:rgba(255,255,255,.56); font-weight:300}
.quick-link .arrow{font-size:18px; color:rgba(255,255,255,.54)}

.hero-bottom{
  margin-top:36px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); color:#fff;
  display:grid; grid-template-columns:auto 1fr auto auto; gap:15px; align-items:center;
}
.hero-bottom .lb{font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#f0d7a8}
.hero-bottom .txt{font-size:12px; color:rgba(255,255,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slider-dots{display:flex; gap:7px}
.dot{
  width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.44); background:transparent; cursor:pointer; padding:0;
}
.dot.active{background:#fff}
.slider-arrows{display:flex; gap:8px}
.arrow-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
}

section.block{padding:92px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:36px}
.section-kicker{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--blue)}
.section-title{margin:10px 0 0; font-family:var(--font-display); font-size:clamp(36px, 4vw, 58px); line-height:1.08; font-weight:600; letter-spacing:-.03em}
.section-copy{max-width:520px; margin:0; color:var(--muted); font-size:14px; line-height:1.82; font-weight:300}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); transition:.28s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 26px 72px rgba(6,27,48,.12)}
.card-media{height:250px; background-size:cover; background-position:center; position:relative}
.card-media.day{background-image:url('../images/hero-day.jpg')}
.card-media.night{background-image:url('../images/hero-night.jpg')}
.card-media.alt{background-image:url('../images/hero-day.jpg'); background-position:82% center}
.card-media::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,23,41,.52), transparent 64%)}
.card-body{padding:22px}
.pill{display:inline-flex; padding:7px 10px; border-radius:999px; background:#eef8fb; color:#0b7497; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.card h3{margin:14px 0 8px; font-family:var(--font-display); font-size:25px; line-height:1.18; font-weight:600}
.card p{margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.78; font-weight:300}
.text-link{font-size:12px; font-weight:800; color:var(--blue)}

.section-dark{
  position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg, #071a30, #0d2b48);
}
.section-dark::before{
  content:""; position:absolute; right:-180px; top:-220px; width:680px; height:680px; border-radius:50%;
  background:radial-gradient(circle, rgba(76,190,217,.26), transparent 66%);
}
.dark-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.04fr .96fr; gap:38px; align-items:center}
.section-dark .section-kicker{color:#97dced}
.section-dark .section-title{color:#fff}
.section-dark .section-copy{color:rgba(255,255,255,.66)}
.portal-tools{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tool{
  min-height:132px; padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.055);
}
.tool .icon{font-size:21px}
.tool strong{display:block; margin:12px 0 5px; font-size:13px}
.tool small{display:block; color:rgba(255,255,255,.50); font-size:11px; line-height:1.65; font-weight:300}

.activity-wrap{position:relative}
.activity-slider{overflow:hidden}
.activity-track{display:flex; gap:16px; transition:transform .5s ease}
.activity-card{
  flex:0 0 calc(33.333% - 10.666px); min-width:0; position:relative; overflow:hidden;
  border-radius:24px; min-height:360px; background-size:cover; background-position:center; box-shadow:var(--shadow)
}
.activity-card.a1{background-image:linear-gradient(180deg, rgba(4,26,48,.04), rgba(4,26,48,.62)), url('../images/hero-day.jpg'); background-position:74% center}
.activity-card.a2{background-image:linear-gradient(180deg, rgba(4,26,48,.08), rgba(4,26,48,.72)), url('../images/hero-night.jpg')}
.activity-card.a3{background-image:linear-gradient(180deg, rgba(4,26,48,.08), rgba(4,26,48,.66)), url('../images/hero-day.jpg'); background-position:68% center}
.activity-card.a4{background-image:linear-gradient(180deg, rgba(4,26,48,.08), rgba(4,26,48,.66)), url('../images/hero-night.jpg'); background-position:center}
.activity-card::before{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,23,41,.86), rgba(7,23,41,.06) 56%, rgba(255,255,255,.04)); transition:.3s ease;
}
.activity-card:hover::before{background:linear-gradient(0deg, rgba(7,23,41,.90), rgba(7,23,41,.10) 60%, rgba(255,255,255,.08))}
.activity-content{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:24px; color:#fff;
}
.activity-date{display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.14); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.activity-content h3{margin:14px 0 10px; font-family:var(--font-display); font-size:30px; line-height:1.08; font-weight:600}
.activity-content p{margin:0 0 16px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.72; font-weight:300}
.activity-nav{display:flex; justify-content:flex-end; gap:8px; margin-top:16px}

.gallery-grid{display:grid; grid-template-columns:1.32fr .68fr .68fr; gap:12px}
.gallery-grid figure{margin:0; min-height:230px; border-radius:20px; overflow:hidden; position:relative; background-size:cover; background-position:center}
.gallery-grid figure:nth-child(1){grid-row:span 2; min-height:472px; background-image:url('../images/hero-day.jpg'); background-position:72% center}
.gallery-grid figure:nth-child(2){background-image:url('../images/hero-night.jpg')}
.gallery-grid figure:nth-child(3){background-image:url('../images/hero-day.jpg'); background-position:84% center}
.gallery-grid figure:nth-child(4){background-image:url('../images/hero-night.jpg'); background-position:74% center}
.gallery-grid figure:nth-child(5){background-image:url('../images/hero-day.jpg'); background-position:66% center}
.gallery-grid figure::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,23,41,.58), transparent 66%)}
.gallery-grid figcaption{position:absolute; left:18px; bottom:16px; z-index:1; color:#fff; font-size:12px; font-weight:700}

footer{
  padding:38px 0; background:#061523; color:#fff;
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:20px}
.footer-note{font-size:11px; color:rgba(255,255,255,.45); line-height:1.7}

.modal{
  position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:20px;
  background:rgba(2,14,26,.74); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.modal.open{display:grid}
.dialog{
  width:min(530px,100%); max-height:90svh; overflow:auto; background:#fff; border-radius:26px; padding:26px; box-shadow:0 36px 110px rgba(0,0,0,.34);
}
.dialog-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.dialog h3{margin:4px 0 6px; font-family:var(--font-display); font-size:32px; font-weight:600}
.dialog p{margin:0 0 18px; color:var(--muted); font-size:12px; line-height:1.72}
.close{
  width:36px; height:36px; border-radius:50%; border:0; background:#edf3f5; cursor:pointer; font-size:18px;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:grid; gap:6px}
.field.full{grid-column:1/-1}
label{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#42596c}
input, select{
  width:100%; border:1px solid #dce5ea; border-radius:13px; padding:12px 13px; background:#fbfcfd; color:#173047; outline:none;
}
input:focus, select:focus{border-color:#72c0d3; box-shadow:0 0 0 4px rgba(75,179,205,.11)}
.submit{width:100%; margin-top:14px; background:var(--navy); color:#fff; padding:14px}
.form-note{margin-top:12px; font-size:11px; color:#8794a0; line-height:1.65}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1; transform:none}

@media (max-width:1100px){
  .desktop-nav a{padding-left:9px; padding-right:9px; font-size:12px}
}
@media (max-width:980px){
  .desktop-nav, .header-actions .login-desktop, .header-actions .register-desktop, .header-actions .lang-desktop{display:none}
  .menu-toggle{display:grid}
  .mobile-menu{display:block}
  .hero-grid{grid-template-columns:1fr}
  .slide-content{bottom:126px}
  .cards{grid-template-columns:1fr 1fr}
  .dark-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-grid figure:nth-child(1){grid-column:1/-1; grid-row:auto; min-height:340px}
  .activity-card{flex-basis:calc(50% - 8px)}
}
@media (max-width:720px){
  .site-header{padding:10px}
  .header-shell{height:62px; padding:0 9px 0 13px; border-radius:17px}
  .brand img{width:34px}
  .brand-text strong{font-size:15px}
  .brand-text small{display:none}
  .hero-content{width:calc(100% - 28px); padding:122px 0 26px}
  .hero-grid{gap:22px}
  .hero h1{font-size:clamp(46px, 14vw, 70px)}
  .hero .lead{font-size:14px; max-width:95%; line-height:1.75}
  .hero-cta{display:grid; grid-template-columns:1fr 1fr}
  .hero-cta .btn{padding:13px 11px}
  .hero-metrics{gap:8px}
  .metric{min-width:calc(50% - 4px); padding:12px 13px}
  .hero-card{padding:18px; border-radius:22px}
  .hero-card h2{font-size:24px}
  .activity-chip{padding:16px; width:min(340px, 90vw)}
  .activity-chip h3{font-size:24px}
  .hero-bottom{grid-template-columns:1fr auto; gap:10px; margin-top:26px}
  .hero-bottom .lb{grid-column:1/-1}
  .hero-bottom .txt{font-size:11px}
  .cloud-layer{height:36%; width:230%; left:-65%}
  .cloud-1{opacity:.26}
  .cloud-2{opacity:.10}
  section.block{padding:66px 0}
  .container{width:min(100% - 28px, 1180px)}
  .section-head{display:block}
  .section-copy{margin-top:14px; max-width:none}
  .cards{grid-template-columns:1fr}
  .card-media{height:230px}
  .portal-tools{grid-template-columns:1fr 1fr}
  .activity-card{flex-basis:100%; min-height:340px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid figure, .gallery-grid figure:nth-child(1){grid-column:auto; min-height:228px}
  .footer-inner{display:block}
  .footer-note{display:block; margin-top:15px}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; animation:none !important; transition:none !important}
}

/* ===== V4: time-aware day/night atmosphere ===== */
html.theme-day .hero-slide.s1,
html.theme-day .hero-slide.s2,
html.theme-day .hero-slide.s3 {
  background-image:url('../images/hero-day.jpg') !important;
}
html.theme-day .hero-slide.s1 { background-position:68% center !important; }
html.theme-day .hero-slide.s2 { background-position:58% center !important; }
html.theme-day .hero-slide.s3 { background-position:79% center !important; }

html.theme-night .hero-slide.s1,
html.theme-night .hero-slide.s2,
html.theme-night .hero-slide.s3 {
  background-image:url('../images/hero-night.jpg') !important;
}
html.theme-night .hero-slide.s1 { background-position:48% center !important; }
html.theme-night .hero-slide.s2 { background-position:center !important; }
html.theme-night .hero-slide.s3 { background-position:62% center !important; }

.cloud-layer {
  background-image:url('../images/cloud-base.png') !important;
  background-size:auto 100% !important;
  filter:contrast(1.12) brightness(1.07) saturate(.98);
}
.cloud-1 {
  height:48% !important;
  top:-2% !important;
  opacity:.46 !important;
  animation-duration:52s !important;
}
.cloud-2 {
  height:42% !important;
  top:13% !important;
  opacity:.25 !important;
  filter:contrast(1.18) brightness(1.10) blur(.15px) !important;
  animation-duration:79s !important;
}
.cloud-3 {
  position:absolute;
  left:-55%;
  top:28%;
  width:205%;
  height:31%;
  z-index:1;
  pointer-events:none;
  background-image:url('../images/cloud-base.png');
  background-repeat:repeat-x;
  background-size:auto 100%;
  mix-blend-mode:screen;
  opacity:.15;
  filter:contrast(1.20) brightness(1.08);
  animation:cloudDriftThird 103s linear infinite;
}
@keyframes cloudDriftThird {
  from { transform:translate3d(-8%,0,0) scale(.76); }
  to { transform:translate3d(17%,0,0) scale(.76); }
}

html.theme-night .cloud-1 { opacity:.10 !important; filter:brightness(.74) saturate(.55) contrast(1.10) !important; }
html.theme-night .cloud-2 { opacity:.055 !important; filter:brightness(.70) saturate(.45) contrast(1.08) blur(.4px) !important; }
html.theme-night .cloud-3 { opacity:.035 !important; filter:brightness(.62) saturate(.35); }
html.theme-night .glow { opacity:.08; }
html.theme-day .night-sky { opacity:0; visibility:hidden; }
html.theme-night .night-sky { opacity:1; visibility:visible; }

.night-sky {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.25s ease, visibility 1.25s ease;
}
.stars {
  position:absolute;
  inset:0 0 28% 0;
}
.star {
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(207,231,255,.9);
  opacity:.55;
  animation:starTwinkle var(--twinkle,3.6s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.star.big {
  width:3px;
  height:3px;
  box-shadow:0 0 9px rgba(215,236,255,.96);
}
@keyframes starTwinkle {
  0%,100% { opacity:.24; transform:scale(.78); }
  50% { opacity:.95; transform:scale(1.24); }
}

.moon {
  position:absolute;
  top:15%;
  left:18%;
  width:clamp(74px,8vw,126px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 37% 31%, rgba(221,230,238,.52) 0 4%, transparent 5%),
    radial-gradient(circle at 68% 60%, rgba(173,188,204,.28) 0 6%, transparent 7%),
    radial-gradient(circle at 47% 72%, rgba(171,187,201,.25) 0 4%, transparent 5%),
    radial-gradient(circle at 64% 25%, rgba(171,186,201,.20) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 39% 48%, rgba(176,190,205,.18) 0 7%, transparent 8%),
    radial-gradient(circle at 35% 30%, #fffdf4 0%, #f7f4e9 47%, #dbe6ef 72%, #bacbd9 100%);
  box-shadow:
    0 0 22px rgba(215,233,248,.55),
    0 0 65px rgba(183,219,244,.28),
    0 0 115px rgba(150,205,238,.16);
  animation:moonFloat 8s ease-in-out infinite;
}
.moon::after {
  content:"";
  position:absolute;
  inset:-38%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(197,228,249,.15) 0%, rgba(197,228,249,.04) 42%, transparent 70%);
}
@keyframes moonFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}

.shooting-star {
  position:absolute;
  top:24%;
  left:63%;
  width:94px;
  height:1px;
  opacity:0;
  transform:rotate(-26deg);
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(238,248,255,.92));
  filter:drop-shadow(0 0 5px rgba(219,240,255,.85));
  animation:shootingStar 11s ease-in-out infinite;
  animation-delay:2.5s;
}
@keyframes shootingStar {
  0%,72%,100% { opacity:0; transform:translate3d(0,0,0) rotate(-26deg) scaleX(.55); }
  75% { opacity:1; }
  82% { opacity:0; transform:translate3d(230px,110px,0) rotate(-26deg) scaleX(1.1); }
}

.time-mode-badge {
  position:absolute;
  z-index:5;
  top:116px;
  right:max(26px, calc((100vw - 1240px)/2));
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:999px;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,24,42,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:10px;
  letter-spacing:.04em;
}
.time-mode-badge .mode-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffd78e;
  box-shadow:0 0 10px rgba(255,215,142,.55);
}
html.theme-night .time-mode-badge .mode-dot {
  background:#bcdcff;
  box-shadow:0 0 10px rgba(188,220,255,.75);
}

.notice-center {
  position:relative;
  z-index:8;
  margin-top:-34px;
  padding:0 0 40px;
}
.notice-shell {
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:15px;
}
.notice-main {
  position:relative;
  overflow:hidden;
  padding:24px 26px;
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff,#f7fbfc);
  border:1px solid rgba(14,73,101,.11);
  box-shadow:0 24px 70px rgba(5,31,52,.14);
}
.notice-main::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,#d4b077,#0d86b3);
}
.notice-topline {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
}
.new-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:#fff3df;
  color:#9a6417;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.new-badge::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e0a044;
  box-shadow:0 0 0 5px rgba(224,160,68,.12);
  animation:noticePulse 2s ease-in-out infinite;
}
@keyframes noticePulse {
  0%,100% { transform:scale(.92); box-shadow:0 0 0 4px rgba(224,160,68,.10); }
  50% { transform:scale(1.12); box-shadow:0 0 0 8px rgba(224,160,68,.03); }
}
.notice-main .meta {
  font-size:10px;
  color:#7e8c98;
  font-weight:600;
}
.notice-main h2 {
  margin:0 0 9px;
  font-family:var(--font-display);
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.18;
  color:var(--navy);
}
.notice-main p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.72;
}
.notice-main .notice-action {
  display:inline-flex;
  margin-top:15px;
  font-size:12px;
  font-weight:800;
  color:var(--blue);
}
.notice-list {
  padding:15px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(145deg,#071b31,#0e3150);
  box-shadow:0 24px 70px rgba(5,31,52,.14);
}
.notice-list-title {
  padding:6px 7px 12px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a6deea;
}
.notice-row {
  display:grid;
  grid-template-columns:43px 1fr auto;
  gap:11px;
  align-items:center;
  padding:12px 8px;
  border-top:1px solid rgba(255,255,255,.09);
}
.notice-date {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:13px;
  background:rgba(255,255,255,.08);
  text-align:center;
  font-size:9px;
  color:#d7ebf0;
}
.notice-date b {
  display:block;
  font-size:14px;
  color:#fff;
}
.notice-row strong {
  display:block;
  font-size:11px;
  line-height:1.45;
}
.notice-row small {
  display:block;
  margin-top:3px;
  font-size:9px;
  color:rgba(255,255,255,.49);
}
.notice-row .mini-arrow {
  color:rgba(255,255,255,.5);
  font-size:17px;
}

.hero-bottom {
  border-top-color:rgba(255,255,255,.18) !important;
}
.hero-bottom .lb {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px !important;
  color:#ffe0a9 !important;
}
.hero-bottom .lb::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f3bc5e;
  box-shadow:0 0 0 5px rgba(243,188,94,.10);
}
.hero-bottom .txt {
  color:rgba(255,255,255,.82) !important;
  font-weight:500;
}

@media (max-width:980px) {
  .time-mode-badge {
    top:96px;
    right:20px;
  }
  .notice-shell {
    grid-template-columns:1fr;
  }
}
@media (max-width:720px) {
  .time-mode-badge {
    top:82px;
    right:14px;
    padding:7px 9px;
    font-size:9px;
  }
  .moon {
    top:14%;
    left:11%;
    width:72px;
  }
  .stars {
    inset:0 0 35% 0;
  }
  .shooting-star {
    top:20%;
    left:45%;
  }
  .cloud-1 {
    height:38% !important;
    opacity:.38 !important;
  }
  .cloud-2 {
    height:34% !important;
    opacity:.20 !important;
  }
  .cloud-3 {
    width:250%;
    left:-80%;
    height:27%;
  }
  .notice-center {
    margin-top:-18px;
    padding-bottom:24px;
  }
  .notice-shell {
    width:calc(100% - 28px);
  }
  .notice-main {
    padding:20px 20px 20px 22px;
  }
  .notice-list {
    padding:12px;
  }
}


/* =====================================================================
   V5 — WEATHER-AWARE INTRO + STATIC TOWER + SPONSOR BOARD
   - No moving/cross-fading tower positions
   - Only weather layers animate
   ===================================================================== */

/* One fixed tower composition: the building no longer drifts/crossfades. */
:root{--weather-day-bg:url('../images/hero-day.jpg');--weather-night-bg:url('../images/hero-night.jpg')}
.hero-slider{display:none!important}
.weather-bg-fixed{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:68% center;
  background-repeat:no-repeat;
  transform:none!important;
  transition:filter 1.1s ease, opacity 1.1s ease;
}
html.theme-day .weather-bg-fixed{
  background-image:var(--weather-day-bg);
}
html.theme-night .weather-bg-fixed{
  background-image:var(--weather-night-bg);
  background-position:50% center;
}

/* Hide the old image-extracted moving cloud textures completely. */
.cloud-layer,
.cloud-3{display:none!important}

/* Weather atmosphere is above the static background but under content. */
.weather-atmosphere{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

/* -----------------------------------------------------------
   CSS-ONLY CLOUDS: no image content, therefore no ghost tower.
   ----------------------------------------------------------- */
.weather-clouds{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.2s ease;
}
.cloud-shape{
  --cloud-alpha:.74;
  position:absolute;
  width:430px;
  height:120px;
  border-radius:999px;
  background:
    radial-gradient(ellipse at 15% 72%, rgba(255,255,255,var(--cloud-alpha)) 0 22%, transparent 24%),
    radial-gradient(ellipse at 33% 48%, rgba(255,255,255,var(--cloud-alpha)) 0 31%, transparent 33%),
    radial-gradient(ellipse at 52% 58%, rgba(255,255,255,var(--cloud-alpha)) 0 36%, transparent 38%),
    radial-gradient(ellipse at 72% 55%, rgba(255,255,255,var(--cloud-alpha)) 0 29%, transparent 31%),
    radial-gradient(ellipse at 88% 70%, rgba(255,255,255,var(--cloud-alpha)) 0 19%, transparent 21%);
  filter:drop-shadow(0 12px 25px rgba(55,104,134,.10));
  opacity:.78;
}
.cloud-shape::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:9%;
  height:34%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(227,241,246,.34));
  filter:blur(2px);
}
.cloud-c1{top:5%;left:-440px;transform:scale(1.12);animation:cloudOnlyA 72s linear infinite}
.cloud-c2{top:18%;left:-520px;transform:scale(.78);animation:cloudOnlyB 94s linear infinite 8s}
.cloud-c3{top:32%;left:-460px;transform:scale(.60);animation:cloudOnlyA 118s linear infinite 18s}
.cloud-c4{top:10%;left:-580px;transform:scale(.52);animation:cloudOnlyB 138s linear infinite 32s}
@keyframes cloudOnlyA{
  from{translate:0 0}
  to{translate:calc(100vw + 920px) 0}
}
@keyframes cloudOnlyB{
  from{translate:0 0}
  to{translate:calc(100vw + 1050px) -10px}
}

/* -----------------------------------------------------------
   SUNLIGHT
   ----------------------------------------------------------- */
.sun-system{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.sun-disc{
  position:absolute;
  top:9%;
  left:10%;
  width:88px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#fffef0 0 24%,#ffe6a3 46%,rgba(255,218,122,.46) 67%,transparent 72%);
  filter:drop-shadow(0 0 24px rgba(255,218,130,.72));
  animation:sunPulse 5s ease-in-out infinite;
}
.sun-rays{
  position:absolute;
  top:-15%;
  left:-16%;
  width:70vw;
  height:110vh;
  transform:rotate(-13deg);
  background:
    linear-gradient(101deg,transparent 37%,rgba(255,250,211,.18) 42%,transparent 47%),
    linear-gradient(108deg,transparent 45%,rgba(255,248,209,.14) 49%,transparent 54%),
    linear-gradient(116deg,transparent 53%,rgba(255,250,215,.10) 56%,transparent 60%);
  mix-blend-mode:screen;
  filter:blur(1px);
}
.lens-flare{
  position:absolute;
  left:31%;
  top:35%;
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(255,248,213,.25);
  box-shadow:
    85px 65px 0 -5px rgba(255,232,171,.19),
    172px 126px 0 -8px rgba(168,225,246,.18),
    255px 178px 0 -10px rgba(255,238,192,.18);
  filter:blur(.3px);
  opacity:.72;
}
@keyframes sunPulse{
  0%,100%{transform:scale(.98);filter:drop-shadow(0 0 22px rgba(255,218,130,.58))}
  50%{transform:scale(1.045);filter:drop-shadow(0 0 42px rgba(255,218,130,.78))}
}

/* -----------------------------------------------------------
   RAIN
   ----------------------------------------------------------- */
.rain-system{
  position:absolute;
  inset:-20% 0 0;
  opacity:0;
  overflow:hidden;
  transition:opacity .8s ease;
}
.rain-streaks{
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(102deg,
      transparent 0 24px,
      rgba(218,236,246,.0) 24px 32px,
      rgba(218,236,246,.42) 33px 34px,
      transparent 35px 58px);
  background-size:72px 120px;
  animation:rainFall .55s linear infinite;
  transform:skewX(-5deg);
  filter:blur(.15px);
}
.rain-streaks.far{
  opacity:.48;
  background-size:96px 160px;
  animation-duration:.82s;
}
@keyframes rainFall{
  from{background-position:0 -140px}
  to{background-position:-24px 140px}
}

/* -----------------------------------------------------------
   FOG / MIST
   ----------------------------------------------------------- */
.fog-system{
  position:absolute;
  inset:0;
  opacity:0;
  overflow:hidden;
  transition:opacity 1.2s ease;
}
.fog-bank{
  position:absolute;
  left:-25%;
  width:150%;
  height:28%;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(226,237,241,.57) 24%,rgba(242,247,248,.72) 50%,rgba(221,234,238,.48) 74%,transparent);
  filter:blur(20px);
}
.fog-f1{top:20%;animation:fogMove 33s ease-in-out infinite alternate}
.fog-f2{top:42%;opacity:.72;animation:fogMove 43s ease-in-out infinite alternate-reverse}
.fog-f3{top:65%;opacity:.56;animation:fogMove 51s ease-in-out infinite alternate}
@keyframes fogMove{
  from{transform:translateX(-5%)}
  to{transform:translateX(8%)}
}

/* -----------------------------------------------------------
   STORM / LIGHTNING
   ----------------------------------------------------------- */
.lightning{
  position:absolute;
  inset:0;
  opacity:0;
  background:rgba(214,232,255,.0);
}
html.weather-storm .lightning{
  animation:lightningFlash 8s steps(1,end) infinite;
}
@keyframes lightningFlash{
  0%,72%,75%,78%,100%{background:rgba(214,232,255,0)}
  73%{background:rgba(214,232,255,.28)}
  74%{background:rgba(214,232,255,.05)}
  76%{background:rgba(214,232,255,.39)}
  77%{background:rgba(214,232,255,.08)}
}

/* -----------------------------------------------------------
   GLOBAL WEATHER FILTERS
   ----------------------------------------------------------- */
.weather-tone{
  position:absolute;
  inset:0;
  opacity:0;
  transition:background 1.2s ease,opacity 1.2s ease;
}
html.weather-sunny .weather-bg-fixed{
  filter:saturate(1.10) contrast(1.035) brightness(1.045);
}
html.weather-sunny .sun-system{opacity:1}
html.weather-sunny .weather-clouds{opacity:.18}

html.weather-partly-cloudy .weather-bg-fixed{
  filter:saturate(1.04) contrast(1.02) brightness(1.01);
}
html.weather-partly-cloudy .weather-clouds{opacity:.70}

html.weather-cloudy .weather-bg-fixed{
  filter:saturate(.90) contrast(.98) brightness(.91);
}
html.weather-cloudy .weather-clouds{opacity:.88}
html.weather-cloudy .weather-tone{
  opacity:1;
  background:linear-gradient(rgba(81,103,119,.13),rgba(69,89,105,.16));
}

html.weather-overcast .weather-bg-fixed{
  filter:saturate(.72) contrast(.95) brightness(.77);
}
html.weather-overcast .weather-clouds{opacity:1}
html.weather-overcast .cloud-shape{--cloud-alpha:.68;filter:brightness(.84) saturate(.50)}
html.weather-overcast .weather-tone{
  opacity:1;
  background:linear-gradient(rgba(57,72,85,.25),rgba(60,74,86,.29));
}

html.weather-rain .weather-bg-fixed{
  filter:saturate(.68) contrast(.95) brightness(.69);
}
html.weather-rain .weather-clouds{opacity:1}
html.weather-rain .cloud-shape{--cloud-alpha:.62;filter:brightness(.70) saturate(.36)}
html.weather-rain .rain-system{opacity:1}
html.weather-rain .weather-tone{
  opacity:1;
  background:linear-gradient(rgba(35,55,70,.24),rgba(40,60,76,.38));
}

html.weather-fog .weather-bg-fixed{
  filter:saturate(.66) contrast(.83) brightness(.91);
}
html.weather-fog .weather-clouds{opacity:.28}
html.weather-fog .fog-system{opacity:.92}
html.weather-fog .weather-tone{
  opacity:1;
  background:rgba(214,225,229,.16);
}

html.weather-storm .weather-bg-fixed{
  filter:saturate(.55) contrast(.98) brightness(.56);
}
html.weather-storm .weather-clouds{opacity:1}
html.weather-storm .cloud-shape{--cloud-alpha:.56;filter:brightness(.55) saturate(.25)}
html.weather-storm .rain-system{opacity:1}
html.weather-storm .weather-tone{
  opacity:1;
  background:linear-gradient(rgba(18,36,53,.36),rgba(18,35,52,.50));
}

/* Night weather logic */
html.theme-night .sun-system{display:none}
html.theme-night.weather-cloudy .night-sky,
html.theme-night.weather-overcast .night-sky{opacity:.30!important}
html.theme-night.weather-rain .night-sky,
html.theme-night.weather-storm .night-sky,
html.theme-night.weather-fog .night-sky{opacity:.10!important}
html.theme-night.weather-cloudy .moon{opacity:.55}
html.theme-night.weather-overcast .moon,
html.theme-night.weather-rain .moon,
html.theme-night.weather-storm .moon,
html.theme-night.weather-fog .moon{opacity:.14}
html.theme-night .weather-bg-fixed{filter:brightness(.83) saturate(.94) contrast(1.03)}
html.theme-night.weather-rain .weather-bg-fixed{filter:brightness(.56) saturate(.66) contrast(.98)}
html.theme-night.weather-storm .weather-bg-fixed{filter:brightness(.45) saturate(.55) contrast(1.02)}
html.theme-night.weather-fog .weather-bg-fixed{filter:brightness(.67) saturate(.57) contrast(.86)}

/* Live weather pill */
.weather-live{
  position:absolute;
  z-index:6;
  top:116px;
  left:max(26px,calc((100vw - 1240px)/2));
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,24,42,.34);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  color:#fff;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(0,15,28,.12);
}
.weather-live .w-icon{font-size:15px}
.weather-live strong{font-size:10px;font-weight:800}
.weather-live small{display:block;margin-top:2px;color:rgba(255,255,255,.60);font-size:8px}
.weather-live .w-temp{font-size:13px;font-weight:800;color:#fff}
.weather-live.loading .w-temp{opacity:.55}

/* Existing time badge is now secondary. */
.time-mode-badge{right:max(26px,calc((100vw - 1240px)/2))}

/* ============================================================
   SPONSOR / ADVERTISING BOARD
   ============================================================ */
.sponsor-board{
  padding:0 0 54px;
}
.sponsor-shell{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  overflow:hidden;
  border-radius:25px;
  position:relative;
  color:#fff;
  background:
    radial-gradient(circle at 90% 20%,rgba(68,173,205,.22),transparent 38%),
    linear-gradient(135deg,#061a2f,#0b2a49 58%,#123c5c);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 68px rgba(6,28,49,.15);
}
.sponsor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px 0;
}
.sponsor-label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:800;
  color:#c7e8ef;
}
.sponsor-label::before{
  content:"AD";
  display:grid;
  place-items:center;
  width:25px;
  height:18px;
  border-radius:6px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:8px;
  letter-spacing:.08em;
}
.sponsor-head .sponsor-cta{
  color:#f2d8a7;
  font-size:10px;
  font-weight:700;
}
.sponsor-viewport{overflow:hidden}
.sponsor-track{
  display:flex;
  transition:transform .58s cubic-bezier(.22,.61,.36,1);
}
.sponsor-slide{
  flex:0 0 100%;
  min-width:100%;
  display:grid;
  grid-template-columns:130px minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:23px 20px 26px;
}
.sponsor-logo-box{
  height:72px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.07);
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
}
.sponsor-copy .s-mini{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8fd8e8;
  font-weight:800;
}
.sponsor-copy h3{
  margin:7px 0 6px;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  line-height:1.17;
}
.sponsor-copy p{
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:11px;
  line-height:1.66;
}
.sponsor-button{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  padding:11px 14px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.sponsor-controls{
  position:absolute;
  right:18px;
  bottom:12px;
  display:flex;
  gap:6px;
}
.sponsor-dot{
  width:20px;
  height:3px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  cursor:pointer;
}
.sponsor-dot.active{background:#fff}

/* Simple sponsor booking modal */
.sponsor-modal-copy{
  padding:14px;
  border-radius:14px;
  background:#f4f8f9;
  color:#5f7180;
  font-size:11px;
  line-height:1.72;
  margin-bottom:14px;
}

@media(max-width:980px){
  .weather-live{top:96px;left:20px}
  .sponsor-slide{grid-template-columns:100px 1fr}
  .sponsor-slide .sponsor-button{grid-column:2}
}
@media(max-width:720px){
  .weather-live{
    top:82px;
    left:14px;
    padding:7px 9px;
  }
  .weather-live small{display:none}
  .weather-live .w-temp{font-size:11px}
  .time-mode-badge{display:none}
  .sun-disc{top:13%;left:8%;width:62px}
  .sun-rays{width:110vw;left:-35%}
  .cloud-shape{width:310px;height:90px}
  .cloud-c1{top:7%}
  .cloud-c2{top:22%}
  .cloud-c3{top:37%}
  .rain-streaks{opacity:.72}
  .sponsor-board{padding-bottom:36px}
  .sponsor-shell{width:calc(100% - 28px)}
  .sponsor-head{padding:14px 15px 0}
  .sponsor-slide{
    grid-template-columns:1fr;
    gap:13px;
    padding:18px 15px 28px;
  }
  .sponsor-logo-box{
    height:58px;
    width:118px;
  }
  .sponsor-slide .sponsor-button{grid-column:auto;justify-self:start}
  .sponsor-copy h3{font-size:21px}
}


/* =====================================================================
   V6 — REFINED WEATHER CONTROLS + CLEANER HERO + STRONGER NOTICES
   ===================================================================== */

/* Remove the two blocks requested by the user */
.hero-metrics{display:none!important}
.hero-bottom{display:none!important}

/* Let the hero breathe after removing metrics/ticker */
.hero-content{padding-bottom:58px!important}
.hero-grid{align-items:center}

/* Subtler weather: softer clouds and very light atmospheric motion */
.weather-clouds{mix-blend-mode:screen}
.cloud-shape{
  opacity:.52!important;
  filter:drop-shadow(0 10px 20px rgba(60,110,140,.07)) blur(.15px)!important;
}
.cloud-shape::after{opacity:.72}
.cloud-c1{top:7%!important;transform:scale(.96)!important;animation-duration:92s!important}
.cloud-c2{top:20%!important;transform:scale(.68)!important;animation-duration:118s!important}
.cloud-c3{top:35%!important;transform:scale(.52)!important;animation-duration:146s!important}
.cloud-c4{top:12%!important;transform:scale(.45)!important;animation-duration:168s!important}

html.weather-partly-cloudy .weather-clouds{opacity:.48!important}
html.weather-cloudy .weather-clouds{opacity:.66!important}
html.weather-overcast .weather-clouds{opacity:.76!important}
html.weather-rain .weather-clouds{opacity:.66!important}
html.weather-storm .weather-clouds{opacity:.72!important}

/* Elegant sunshine — less synthetic, more like a soft morning flare */
.sun-disc{
  width:72px!important;
  top:12%!important;
  left:9%!important;
  opacity:.78;
  filter:blur(.15px) drop-shadow(0 0 25px rgba(255,221,147,.48))!important;
}
.sun-rays{
  opacity:.55;
  filter:blur(3px)!important;
}
.lens-flare{opacity:.32!important}
html.weather-sunny .weather-bg-fixed{
  filter:saturate(1.07) contrast(1.025) brightness(1.035)!important
}

/* Much more delicate rain */
.rain-system{inset:-12% 0 0!important}
.rain-streaks{
  opacity:.32!important;
  background-image:
    repeating-linear-gradient(104deg,
      transparent 0 34px,
      rgba(220,237,246,0) 34px 48px,
      rgba(220,237,246,.28) 49px 50px,
      transparent 51px 82px)!important;
  background-size:104px 180px!important;
  animation-duration:1.05s!important;
  filter:blur(.25px)!important;
}
.rain-streaks.far{
  opacity:.18!important;
  background-size:140px 230px!important;
  animation-duration:1.55s!important;
}
html.weather-rain .weather-tone{
  background:linear-gradient(rgba(46,66,80,.12),rgba(36,57,72,.20))!important;
}
html.weather-rain .weather-bg-fixed{
  filter:saturate(.78) contrast(.97) brightness(.78)!important;
}

/* Refined fog */
.fog-bank{
  filter:blur(28px)!important;
  opacity:.52!important;
}
html.weather-fog .fog-system{opacity:.70!important}

/* Wind-only visual: subtle flowing streaks */
.wind-system{
  position:absolute;
  inset:0;
  opacity:0;
  overflow:hidden;
  transition:opacity .8s ease;
}
.wind-line{
  position:absolute;
  left:-18%;
  width:280px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(235,249,255,.52),transparent);
  filter:blur(.2px);
  animation:windFlow 5.8s linear infinite;
}
.wind-line:nth-child(1){top:22%;animation-delay:0s}
.wind-line:nth-child(2){top:36%;width:210px;animation-delay:1.4s;animation-duration:7.3s}
.wind-line:nth-child(3){top:49%;width:330px;animation-delay:2.3s;animation-duration:6.6s}
.wind-line:nth-child(4){top:62%;width:185px;animation-delay:3.1s;animation-duration:8.5s}
.wind-line:nth-child(5){top:74%;width:260px;animation-delay:4.2s;animation-duration:7.8s}
@keyframes windFlow{
  0%{transform:translateX(0) skewX(-18deg);opacity:0}
  12%{opacity:.52}
  78%{opacity:.30}
  100%{transform:translateX(calc(100vw + 500px)) skewX(-18deg);opacity:0}
}
html.weather-wind .wind-system{opacity:.72}
html.weather-wind .weather-clouds{opacity:.30!important}
html.weather-wind .weather-bg-fixed{filter:saturate(1.02) contrast(1.02) brightness(1.01)!important}

/* Weather control panel */
.weather-console{
  position:absolute;
  z-index:7;
  top:116px;
  left:max(26px,calc((100vw - 1240px)/2));
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,24,42,.34);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 30px rgba(0,13,25,.10);
}
.weather-current{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 6px;
  color:#fff;
}
.weather-current .w-icon{font-size:15px}
.weather-current strong{display:block;font-size:9px;line-height:1.2}
.weather-current small{display:block;margin-top:2px;color:rgba(255,255,255,.52);font-size:7px}
.weather-current .w-temp{font-size:12px;font-weight:800;margin-left:2px}
.weather-presets{
  display:flex;
  gap:4px;
  padding-left:6px;
  border-left:1px solid rgba(255,255,255,.10);
}
.weather-preset{
  min-width:34px;
  height:31px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  color:rgba(255,255,255,.72);
  background:transparent;
  cursor:pointer;
  font-size:14px;
  transition:.2s ease;
}
.weather-preset:hover{background:rgba(255,255,255,.08);color:#fff}
.weather-preset.active{
  background:#fff;
  color:var(--navy);
  box-shadow:0 5px 16px rgba(0,0,0,.10);
}
.weather-preset.auto{
  width:auto;
  padding:0 9px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
}

/* Old live weather badge hidden; the data is surfaced inside the new console */
.weather-live{display:none!important}

/* Notice quick-link in hero: highlight it strongly */
.quick-links .quick-link:first-child{
  border-color:rgba(246,196,103,.34)!important;
  background:linear-gradient(135deg,rgba(240,184,79,.15),rgba(255,255,255,.07))!important;
  box-shadow:inset 0 0 0 1px rgba(255,222,158,.05),0 10px 30px rgba(0,0,0,.08);
}
.quick-links .quick-link:first-child .quick-icon{
  background:linear-gradient(135deg,#f6d28c,#dba94d)!important;
  color:#173047;
  box-shadow:0 8px 20px rgba(222,170,77,.22);
}
.quick-links .quick-link:first-child b{
  color:#fff9eb;
}
.quick-links .quick-link:first-child::after{
  content:"MỚI";
  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;
  padding:4px 6px;
  border-radius:999px;
  color:#714c11;
  background:#ffe8b4;
}

/* Much more prominent notice center */
.notice-center{
  margin-top:-52px!important;
  padding-bottom:50px!important;
  position:relative;
  z-index:12;
}
.notice-shell{
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr)!important;
  gap:18px!important;
}
.notice-main{
  min-height:214px;
  padding:28px 30px 28px 33px!important;
  border-radius:28px!important;
  border:1px solid rgba(14,73,101,.13)!important;
  box-shadow:0 30px 82px rgba(5,31,52,.18)!important;
}
.notice-main::before{
  width:6px!important;
  background:linear-gradient(180deg,#f1c36f,#d5a444 42%,#0c87b3)!important;
}
.notice-main::after{
  content:"🔔";
  position:absolute;
  right:24px;
  top:22px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:23px;
  background:linear-gradient(135deg,#fff8e9,#f7dfae);
  box-shadow:0 12px 28px rgba(212,169,87,.18);
}
.notice-topline{margin-bottom:16px!important}
.new-badge{
  padding:8px 12px!important;
  font-size:9px!important;
  background:#fff2d9!important;
}
.notice-main h2{
  max-width:82%;
  font-size:clamp(27px,2.7vw,38px)!important;
  margin-bottom:11px!important;
}
.notice-main p{
  max-width:84%;
  font-size:13px!important;
  line-height:1.78!important;
}
.notice-action{
  margin-top:17px!important;
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  padding:10px 13px;
  border-radius:11px;
  background:#eef8fb;
  color:#0b7497!important;
}
.notice-list{
  border-radius:28px!important;
  padding:16px!important;
}
.notice-list-title{
  font-size:10px!important;
  color:#b5e7f0!important;
  padding:6px 8px 12px!important;
}
.notice-row{
  padding:14px 9px!important;
  border-radius:13px;
  transition:.2s ease;
}
.notice-row:hover{
  background:rgba(255,255,255,.07);
  transform:translateX(2px);
}
.notice-row strong{font-size:12px!important}
.notice-row small{font-size:9px!important}

/* Optional floating notice shortcut for easy access */
.notice-fab{
  position:fixed;
  right:20px;
  bottom:22px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 14px 11px 11px;
  border-radius:999px;
  color:#173047;
  background:linear-gradient(135deg,#fff9ed,#f2cf8c);
  border:1px solid rgba(204,157,75,.24);
  box-shadow:0 16px 40px rgba(4,25,45,.20);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  transition:.25s ease;
}
.notice-fab:hover{transform:translateY(-2px)}
.notice-fab .bell{
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  font-size:14px;
}
.notice-fab .count{
  position:absolute;
  top:-3px;left:28px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;
  display:grid;place-items:center;
  background:#d86145;color:#fff;
  font-size:8px;font-weight:900;
  border:2px solid #fff4dc;
}

/* Weather console responsive */
@media(max-width:980px){
  .weather-console{top:96px;left:20px}
}
@media(max-width:720px){
  .hero-content{padding-top:142px!important}
  .weather-console{
    top:80px;
    left:14px;
    right:14px;
    width:auto;
    justify-content:space-between;
    gap:5px;
    padding:6px;
  }
  .weather-current{padding-left:4px}
  .weather-current small{display:none}
  .weather-presets{gap:2px;padding-left:4px}
  .weather-preset{min-width:30px;height:29px;font-size:13px}
  .weather-preset.auto{padding:0 7px;font-size:7px}
  .notice-center{margin-top:-24px!important;padding-bottom:32px!important}
  .notice-shell{grid-template-columns:1fr!important}
  .notice-main{min-height:0;padding:22px 20px 22px 24px!important}
  .notice-main::after{right:16px;top:16px;width:43px;height:43px;border-radius:14px;font-size:18px}
  .notice-main h2,.notice-main p{max-width:100%}
  .notice-main h2{padding-right:45px;font-size:25px!important}
  .notice-fab{right:13px;bottom:15px;padding:8px 11px 8px 8px}
  .notice-fab .bell{width:28px;height:28px}
}


/* =====================================================================
   V7 — MORE REALISTIC WEATHER + RETURN OF IMPORTANT NOTICE STRIP
   ===================================================================== */

/* Real cloud textures from the actual sky image */
.weather-clouds {
  mix-blend-mode:screen;
  opacity:0;
}
.weather-clouds::before,
.weather-clouds::after {
  content:"";
  position:absolute;
  left:-40%;
  width:185%;
  background-repeat:repeat-x;
  background-size:auto 100%;
  pointer-events:none;
}
.weather-clouds::before {
  top:3%;
  height:34%;
  background-image:url('../images/cloud-base.png');
  opacity:.58;
  filter:contrast(1.02) brightness(1.03);
  animation:cloudRealA 110s linear infinite;
}
.weather-clouds::after {
  top:17%;
  height:28%;
  background-image:url('../images/cloud-detail.png');
  opacity:.35;
  filter:contrast(1.03) brightness(1.02) blur(.15px);
  animation:cloudRealB 150s linear infinite reverse;
}
@keyframes cloudRealA {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(18%,0,0); }
}
@keyframes cloudRealB {
  from { transform:translate3d(-8%,0,0); }
  to { transform:translate3d(12%,0,0); }
}
.cloud-shape{display:none!important} /* remove fake-tran cloud blobs completely */

html.weather-sunny .weather-clouds{opacity:.22!important}
html.weather-partly-cloudy .weather-clouds{opacity:.56!important}
html.weather-cloudy .weather-clouds{opacity:.72!important}
html.weather-overcast .weather-clouds{opacity:.84!important}
html.weather-rain .weather-clouds{opacity:.70!important}
html.weather-fog .weather-clouds{opacity:.22!important}
html.weather-storm .weather-clouds{opacity:.80!important}
html.weather-wind .weather-clouds{opacity:.38!important}

/* Sun refined again */
.sun-disc{
  width:66px!important;
  top:11%!important;
  left:10%!important;
  opacity:.74;
  background:radial-gradient(circle,#fffef5 0 22%,#ffe8ad 45%,rgba(255,222,130,.38) 67%,transparent 73%)!important;
  filter:blur(.1px) drop-shadow(0 0 22px rgba(255,224,145,.46))!important;
}
.sun-rays{
  opacity:.34!important;
  filter:blur(5px)!important;
}
.lens-flare{opacity:.20!important}

/* Rain textures from generated streak maps rather than repeated lines */
.rain-system{inset:-12% -8% 0!important}
.rain-streaks{
  background-image:url('../images/rain-near.png')!important;
  background-repeat:repeat!important;
  background-size:560px auto!important;
  animation:rainMap 1.9s linear infinite!important;
  opacity:.46!important;
  transform:skewX(-11deg);
  filter:blur(.12px)!important;
}
.rain-streaks.far{
  background-image:url('../images/rain-far.png')!important;
  background-size:720px auto!important;
  opacity:.22!important;
  animation-duration:2.6s!important;
  filter:blur(.34px)!important;
}
@keyframes rainMap{
  from{background-position:0 -120px}
  to{background-position:-42px 160px}
}
html.weather-rain .weather-tone{
  background:linear-gradient(rgba(42,61,76,.10),rgba(38,56,69,.18))!important;
}
html.weather-rain .weather-bg-fixed{
  filter:saturate(.82) contrast(.98) brightness(.80)!important;
}
html.weather-storm .rain-streaks{opacity:.52!important}
html.weather-storm .rain-streaks.far{opacity:.26!important}

/* keep fog soft and natural */
.fog-bank{opacity:.40!important;filter:blur(34px)!important}
html.weather-fog .fog-system{opacity:.78!important}

/* Notice strip restored, below notice center, but more premium */
.notice-line-wrap{
  padding:0 0 42px;
  position:relative;
  z-index:11;
}
.notice-line{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:58px;
  padding:0 18px 0 0;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(90deg,rgba(6,24,42,.96),rgba(10,41,63,.88)),
    linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.0));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 50px rgba(5,28,49,.14);
}
.notice-line-label{
  flex:0 0 auto;
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 18px;
  color:#f0d7a8;
  background:linear-gradient(90deg,rgba(240,179,73,.15),rgba(240,179,73,.04));
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.notice-line-label::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#f0bf67;
  box-shadow:0 0 0 7px rgba(240,191,103,.10);
  animation:noticeGlow 2.2s ease-in-out infinite;
}
@keyframes noticeGlow{
  0%,100%{transform:scale(.95);box-shadow:0 0 0 5px rgba(240,191,103,.08)}
  50%{transform:scale(1.08);box-shadow:0 0 0 9px rgba(240,191,103,.02)}
}
.notice-line-track{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:26px;
  min-width:0;
  color:rgba(255,255,255,.84);
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  animation:noticeTicker 26s linear infinite;
}
.notice-line-track span{display:inline-flex;align-items:center;gap:9px}
.notice-line-track span::before{
  content:"•";
  color:#78c2d6;
  font-size:14px;
}
@keyframes noticeTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-35%)}
}
.notice-line-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  margin-right:10px;
  border-radius:11px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:10px;
  font-weight:800;
}
.notice-line-cta:hover{background:rgba(255,255,255,.12)}

/* quick-link and main notice remain strong but not overpowering */
.notice-main{
  box-shadow:0 26px 76px rgba(5,31,52,.16)!important;
}
.notice-main::after{
  opacity:.96;
}
.quick-links .quick-link:first-child{
  background:linear-gradient(135deg,rgba(236,184,84,.13),rgba(255,255,255,.06))!important;
}
.quick-links .quick-link:first-child::after{
  content:"MỚI";
  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;
  padding:4px 6px;
  border-radius:999px;
  color:#714c11;
  background:#ffe8b4;
}

@media(max-width:720px){
  .notice-line-wrap{padding-bottom:28px}
  .notice-line{
    width:calc(100% - 28px);
    min-height:50px;
    gap:10px;
    padding-right:8px;
    border-radius:15px;
  }
  .notice-line-label{
    padding:0 12px;
    font-size:8px;
    letter-spacing:.11em;
  }
  .notice-line-track{
    font-size:10px;
    gap:20px;
  }
  .notice-line-cta{
    padding:7px 9px;
    font-size:8px;
  }
}


/* =====================================================================
   V8 — HERO NOTICE TICKER + WIND LEAVES
   ===================================================================== */

/* Make room for the bottom notice line directly on the hero */
.hero-content{
  padding-bottom:88px!important;
}

/* Restore the notice line inside the hero, but keep it subtle and premium */
.hero-bottom{
  display:flex!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:14px!important;
  margin:0!important;
  padding:0!important;
  height:54px;
  align-items:center!important;
  gap:0!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:17px!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(5,24,42,.84),rgba(7,31,50,.72)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent)!important;
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 16px 42px rgba(0,15,28,.14);
  z-index:7;
}

.hero-bottom .lb{
  align-self:stretch;
  flex:0 0 auto;
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:0 17px!important;
  color:#f1d5a0!important;
  background:linear-gradient(90deg,rgba(219,168,73,.15),rgba(219,168,73,.03));
  border-right:1px solid rgba(255,255,255,.07);
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
  text-transform:uppercase;
  white-space:nowrap;
  grid-column:auto!important;
}
.hero-bottom .lb::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#efbc61;
  box-shadow:0 0 0 5px rgba(239,188,97,.10);
  animation:heroNoticePulse 2.4s ease-in-out infinite;
}
@keyframes heroNoticePulse{
  0%,100%{transform:scale(.94);box-shadow:0 0 0 4px rgba(239,188,97,.08)}
  50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(239,188,97,.02)}
}

/* Real continuous ticker: two identical groups, so the loop never jumps */
.hero-news-marquee{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  height:100%;
  display:flex;
  align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
}
.hero-news-marquee-inner{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
  animation:heroNewsMarquee var(--ticker-speed,22s) linear infinite;
  will-change:transform;
}
.hero-news-group{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:25px;
  padding-right:25px;
  white-space:nowrap;
}
.hero-news-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.86);
  font-size:11px;
  font-weight:500;
  transition:color .2s ease;
}
.hero-news-item:hover{color:#fff}
.hero-news-item::before{
  content:"•";
  color:#78c9dc;
  font-size:14px;
  line-height:1;
}
.hero-news-item.important::before{
  content:"NEW";
  padding:3px 5px;
  border-radius:6px;
  background:rgba(236,185,85,.14);
  color:#efc573;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
@keyframes heroNewsMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.hero-news-marquee:hover .hero-news-marquee-inner{
  animation-play-state:paused;
}

/* Hero slider JS controls remain in DOM but are not visually shown */
.hero-slider-compat{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Hide the old duplicated notice line below hero */
.notice-line-wrap{display:none!important}

/* Remove the floating notification button on the right */
.notice-fab{display:none!important}

/* ================= WIND LEAVES ================= */
.wind-leaves{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  overflow:hidden;
  transition:opacity .6s ease;
  pointer-events:none;
}
html.weather-wind .wind-leaves{opacity:1}

.leaf{
  --leaf-size:12px;
  --leaf-color:#55733d;
  position:absolute;
  left:-9%;
  width:var(--leaf-size);
  height:calc(var(--leaf-size) * .62);
  border-radius:100% 0 100% 0;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.14) 0 18%,
      var(--leaf-color) 20% 72%,
      rgba(43,70,35,.88) 100%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.10));
  opacity:.84;
  transform-origin:center;
}
.leaf::after{
  content:"";
  position:absolute;
  left:48%;
  top:8%;
  width:1px;
  height:84%;
  background:rgba(225,235,201,.40);
  transform:rotate(37deg);
  transform-origin:center;
}
.leaf.l1{top:29%;--leaf-size:13px;--leaf-color:#587844;animation:leafWind1 7.8s linear infinite}
.leaf.l2{top:42%;--leaf-size:9px;--leaf-color:#77904d;animation:leafWind2 9.4s linear infinite 1.1s}
.leaf.l3{top:55%;--leaf-size:15px;--leaf-color:#496a3d;animation:leafWind3 8.8s linear infinite 2.5s}
.leaf.l4{top:67%;--leaf-size:10px;--leaf-color:#8b7840;animation:leafWind1 10.6s linear infinite 4s}
.leaf.l5{top:35%;--leaf-size:8px;--leaf-color:#6e8c4b;animation:leafWind2 11.5s linear infinite 5.4s}
.leaf.l6{top:76%;--leaf-size:14px;--leaf-color:#5f7040;animation:leafWind3 9.7s linear infinite 6.6s}
.leaf.l7{top:49%;--leaf-size:11px;--leaf-color:#927845;animation:leafWind1 12.2s linear infinite 7.7s}
.leaf.l8{top:61%;--leaf-size:7px;--leaf-color:#6c8745;animation:leafWind2 8.9s linear infinite 3.3s}

@keyframes leafWind1{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(.82);opacity:0}
  7%{opacity:.72}
  28%{transform:translate3d(28vw,-14px,0) rotate(150deg) scale(.95)}
  58%{transform:translate3d(64vw,18px,0) rotate(330deg) scale(.82)}
  82%{opacity:.68}
  100%{transform:translate3d(118vw,-7px,0) rotate(590deg) scale(.74);opacity:0}
}
@keyframes leafWind2{
  0%{transform:translate3d(0,0,0) rotate(35deg) scale(.72);opacity:0}
  8%{opacity:.60}
  35%{transform:translate3d(37vw,22px,0) rotate(-170deg) scale(.88)}
  70%{transform:translate3d(78vw,-20px,0) rotate(-405deg) scale(.70)}
  100%{transform:translate3d(119vw,9px,0) rotate(-620deg) scale(.62);opacity:0}
}
@keyframes leafWind3{
  0%{transform:translate3d(0,0,0) rotate(-20deg) scale(.85);opacity:0}
  9%{opacity:.78}
  31%{transform:translate3d(31vw,-25px,0) rotate(190deg) scale(1)}
  63%{transform:translate3d(69vw,10px,0) rotate(420deg) scale(.86)}
  100%{transform:translate3d(121vw,-18px,0) rotate(690deg) scale(.68);opacity:0}
}

/* Wind feels stronger when leaves appear, but remains elegant */
html.weather-wind .wind-system{opacity:.52!important}
html.weather-wind .weather-clouds::before{animation-duration:72s!important}
html.weather-wind .weather-clouds::after{animation-duration:96s!important}

@media(max-width:720px){
  .hero-content{padding-bottom:76px!important}
  .hero-bottom{
    left:0!important;
    right:0!important;
    bottom:9px!important;
    height:48px;
    border-radius:14px!important;
  }
  .hero-bottom .lb{
    padding:0 10px!important;
    font-size:7px!important;
    letter-spacing:.11em!important;
  }
  .hero-news-item{
    font-size:9px;
  }
  .hero-news-group{
    gap:19px;
    padding-right:19px;
  }
  .hero-news-marquee-inner{
    animation-duration:26s;
  }
  .leaf.l1,.leaf.l4,.leaf.l7{display:none}
}


/* =====================================================================
   V10 — WEATHER EFFECTS ONLY
   Layout intentionally unchanged from V8.
   ===================================================================== */

/* Particle canvas sits above background and below hero content. */
.weather-particle-canvas{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* ---------- SUN: realistic time-positioned glow ---------- */
.sun-system{
  --sun-x:18%;
  --sun-y:16%;
  --sun-strength:.72;
}
.sun-disc{
  left:var(--sun-x)!important;
  top:var(--sun-y)!important;
  width:62px!important;
  opacity:calc(.68 * var(--sun-strength))!important;
  background:
    radial-gradient(circle,
      rgba(255,255,247,.98) 0 16%,
      rgba(255,239,188,.90) 29%,
      rgba(255,220,135,.48) 49%,
      rgba(255,213,116,.14) 67%,
      transparent 73%)!important;
  box-shadow:
    0 0 28px rgba(255,224,150,.32),
    0 0 76px rgba(255,221,139,.18)!important;
  filter:blur(.2px)!important;
  animation:sunBreath 7s ease-in-out infinite!important;
}
.sun-disc::after{
  content:"";
  position:absolute;
  inset:-125%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,232,167,.11),rgba(255,226,149,.03) 48%,transparent 70%);
}
@keyframes sunBreath{
  0%,100%{transform:scale(.98)}
  50%{transform:scale(1.035)}
}
.sun-rays{
  left:calc(var(--sun-x) - 34%)!important;
  top:calc(var(--sun-y) - 38%)!important;
  width:76vw!important;
  height:115vh!important;
  opacity:calc(.32 * var(--sun-strength))!important;
  background:
    linear-gradient(101deg,transparent 39%,rgba(255,246,209,.12) 42%,transparent 46%),
    linear-gradient(108deg,transparent 47%,rgba(255,246,211,.085) 50%,transparent 54%),
    linear-gradient(115deg,transparent 54%,rgba(255,248,220,.065) 57%,transparent 61%)!important;
  filter:blur(6px)!important;
}
.lens-flare{
  left:calc(var(--sun-x) + 10%)!important;
  top:calc(var(--sun-y) + 24%)!important;
  opacity:calc(.18 * var(--sun-strength))!important;
  transform:scale(.85);
}

/* Warmer daylight, but never enough to wash out the building */
html.weather-sunny .weather-bg-fixed{
  filter:saturate(1.07) contrast(1.025) brightness(1.025)!important;
}
html.weather-sunny .weather-tone{
  opacity:1!important;
  background:
    linear-gradient(180deg,rgba(255,224,158,.045),rgba(255,236,194,.018) 35%,transparent 68%)!important;
}

/* ---------- CLOUDS: real sky texture, slower and lighter ---------- */
.weather-clouds::before{
  opacity:.46!important;
  animation-duration:132s!important;
  filter:contrast(1.015) brightness(1.025) blur(.12px)!important;
}
.weather-clouds::after{
  opacity:.27!important;
  animation-duration:176s!important;
  filter:contrast(1.02) brightness(1.015) blur(.25px)!important;
}
html.weather-sunny .weather-clouds{opacity:.16!important}
html.weather-partly-cloudy .weather-clouds{opacity:.48!important}
html.weather-cloudy .weather-clouds{opacity:.67!important}
html.weather-overcast .weather-clouds{opacity:.78!important}
html.weather-rain .weather-clouds{opacity:.64!important}
html.weather-storm .weather-clouds{opacity:.73!important}
html.weather-wind .weather-clouds{opacity:.34!important}

/* ---------- RAIN: old tiled CSS rain is disabled.
   Canvas handles the visible rainfall naturally. ---------- */
.rain-streaks{display:none!important}
.rain-system{opacity:0!important}

/* Rain scene should darken very gently */
html.weather-rain .weather-bg-fixed{
  filter:saturate(.82) contrast(.985) brightness(.82)!important;
}
html.weather-rain .weather-tone{
  opacity:1!important;
  background:
    linear-gradient(180deg,rgba(37,54,70,.10),rgba(35,52,67,.16))!important;
}
html.weather-storm .weather-bg-fixed{
  filter:saturate(.68) contrast(.99) brightness(.67)!important;
}
html.weather-storm .weather-tone{
  opacity:1!important;
  background:linear-gradient(180deg,rgba(24,39,54,.18),rgba(23,39,55,.27))!important;
}

/* ---------- FOG: softer real-world mist ---------- */
.fog-bank{
  opacity:.34!important;
  filter:blur(38px)!important;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(229,237,240,.42) 25%,
    rgba(243,247,248,.54) 52%,
    rgba(225,235,239,.38) 76%,
    transparent
  )!important;
}
html.weather-fog .fog-system{opacity:.68!important}
html.weather-fog .weather-bg-fixed{
  filter:saturate(.74) contrast(.88) brightness(.91)!important;
}

/* ---------- WIND: CSS line effect becomes very subtle.
   Canvas renders organic leaves at irregular intervals. ---------- */
.wind-line{
  opacity:.26!important;
  filter:blur(.5px)!important;
}
html.weather-wind .wind-system{opacity:.38!important}

/* Disable old looping CSS leaves; canvas now produces organic leaves */
.wind-leaves{display:none!important}

/* Slight moving light over the foreground when sunny, very subtle */
.weather-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:
    linear-gradient(112deg,
      transparent 15%,
      rgba(255,250,226,.08) 34%,
      rgba(255,250,226,.03) 47%,
      transparent 63%);
  transform:translateX(-25%);
}
html.weather-sunny .weather-atmosphere::after{
  opacity:.50;
  animation:sunSweep 16s ease-in-out infinite alternate;
}
@keyframes sunSweep{
  from{transform:translateX(-28%)}
  to{transform:translateX(11%)}
}

@media(max-width:720px){
  .sun-disc{width:48px!important}
  .sun-rays{width:118vw!important}
  .weather-clouds::before{opacity:.38!important}
  .weather-clouds::after{opacity:.20!important}
}


/* =====================================================================
   V11 — BUG FIX + ADAPTIVE TEXT + STRONGER WEATHER
   IMPORTANT: layout stays the same as V10/V8.
   ===================================================================== */

/* 1) FIX the scroll overlap shown in the screenshot.
      Only spacing/z-index is corrected; section layout is unchanged. */
.notice-center{
  margin-top:0!important;
  padding-top:34px!important;
  position:relative!important;
  z-index:9!important;
  background:linear-gradient(180deg,#f3f7f8 0%,#ffffff 100%)!important;
}
.notice-shell{
  position:relative;
  z-index:2;
}
.notice-main,
.notice-list{
  position:relative;
  z-index:2;
}
.notice-center::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(1180px,calc(100% - 40px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(12,80,107,.13),transparent);
}

/* Keep the ticker entirely inside the hero and above weather layers */
.hero-bottom{
  z-index:12!important;
}

/* 2) READABILITY changes by weather.
      Sunny / bright weather = dark navy copy.
      Rain / storm / night = white copy. */
html.theme-day.weather-sunny .hero-grid > div:first-child h1,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child h1,
html.theme-day.weather-cloudy .hero-grid > div:first-child h1,
html.theme-day.weather-wind .hero-grid > div:first-child h1,
html.theme-day.weather-fog .hero-grid > div:first-child h1{
  color:#08283f!important;
  text-shadow:0 2px 18px rgba(255,255,255,.42)!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child h1 em,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child h1 em,
html.theme-day.weather-cloudy .hero-grid > div:first-child h1 em,
html.theme-day.weather-wind .hero-grid > div:first-child h1 em,
html.theme-day.weather-fog .hero-grid > div:first-child h1 em{
  color:#087da4!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child .lead,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .lead,
html.theme-day.weather-cloudy .hero-grid > div:first-child .lead,
html.theme-day.weather-wind .hero-grid > div:first-child .lead,
html.theme-day.weather-fog .hero-grid > div:first-child .lead{
  color:rgba(6,39,61,.80)!important;
  text-shadow:0 1px 12px rgba(255,255,255,.35)!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-cloudy .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-wind .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-fog .hero-grid > div:first-child .eyebrow{
  color:#0a6683!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child .eyebrow::before,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .eyebrow::before,
html.theme-day.weather-cloudy .hero-grid > div:first-child .eyebrow::before,
html.theme-day.weather-wind .hero-grid > div:first-child .eyebrow::before,
html.theme-day.weather-fog .hero-grid > div:first-child .eyebrow::before{
  background:linear-gradient(90deg,#bd8d42,#0b84ac)!important;
}

/* Bright-weather buttons */
html.theme-day.weather-sunny .hero-grid > div:first-child .btn-light,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .btn-light,
html.theme-day.weather-cloudy .hero-grid > div:first-child .btn-light,
html.theme-day.weather-wind .hero-grid > div:first-child .btn-light,
html.theme-day.weather-fog .hero-grid > div:first-child .btn-light{
  color:#fff!important;
  background:linear-gradient(135deg,#082b46,#0a5476)!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child .btn-outline,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .btn-outline,
html.theme-day.weather-cloudy .hero-grid > div:first-child .btn-outline,
html.theme-day.weather-wind .hero-grid > div:first-child .btn-outline,
html.theme-day.weather-fog .hero-grid > div:first-child .btn-outline{
  color:#092f4a!important;
  background:rgba(255,255,255,.56)!important;
  border-color:rgba(8,48,74,.18)!important;
}

/* Dark weather / night */
html.theme-night .hero-grid > div:first-child h1,
html.weather-overcast .hero-grid > div:first-child h1,
html.weather-rain .hero-grid > div:first-child h1,
html.weather-storm .hero-grid > div:first-child h1{
  color:#fff!important;
  text-shadow:0 2px 20px rgba(0,0,0,.22)!important;
}
html.theme-night .hero-grid > div:first-child h1 em,
html.weather-overcast .hero-grid > div:first-child h1 em,
html.weather-rain .hero-grid > div:first-child h1 em,
html.weather-storm .hero-grid > div:first-child h1 em{
  color:#d7f2f8!important;
}
html.theme-night .hero-grid > div:first-child .lead,
html.weather-overcast .hero-grid > div:first-child .lead,
html.weather-rain .hero-grid > div:first-child .lead,
html.weather-storm .hero-grid > div:first-child .lead{
  color:rgba(255,255,255,.82)!important;
}
html.theme-night .hero-grid > div:first-child .eyebrow,
html.weather-overcast .hero-grid > div:first-child .eyebrow,
html.weather-rain .hero-grid > div:first-child .eyebrow,
html.weather-storm .hero-grid > div:first-child .eyebrow{
  color:#e8fbff!important;
}

/* A very local reading veil behind the LEFT copy only.
   It never covers the building on the right. */
.hero-grid > div:first-child{
  position:relative;
  z-index:5;
}
.hero-grid > div:first-child::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-28px;
  top:-26px;
  right:-36px;
  bottom:-26px;
  border-radius:30px;
  pointer-events:none;
  opacity:0;
  transition:opacity .7s ease,background .7s ease;
}
html.theme-day.weather-sunny .hero-grid > div:first-child::before,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child::before,
html.theme-day.weather-cloudy .hero-grid > div:first-child::before,
html.theme-day.weather-wind .hero-grid > div:first-child::before,
html.theme-day.weather-fog .hero-grid > div:first-child::before{
  opacity:.72;
  background:linear-gradient(90deg,rgba(247,250,249,.86),rgba(247,250,249,.54) 58%,transparent 100%);
}
html.theme-night .hero-grid > div:first-child::before,
html.weather-overcast .hero-grid > div:first-child::before,
html.weather-rain .hero-grid > div:first-child::before,
html.weather-storm .hero-grid > div:first-child::before{
  opacity:.72;
  background:linear-gradient(90deg,rgba(5,22,39,.70),rgba(5,22,39,.38) 58%,transparent 100%);
}

/* Weather console readability follows the scene too */
html.theme-day.weather-sunny .weather-console,
html.theme-day.weather-partly-cloudy .weather-console,
html.theme-day.weather-cloudy .weather-console,
html.theme-day.weather-wind .weather-console,
html.theme-day.weather-fog .weather-console{
  background:rgba(248,251,251,.78)!important;
  border-color:rgba(9,58,87,.12)!important;
}
html.theme-day.weather-sunny .weather-current,
html.theme-day.weather-partly-cloudy .weather-current,
html.theme-day.weather-cloudy .weather-current,
html.theme-day.weather-wind .weather-current,
html.theme-day.weather-fog .weather-current{
  color:#0a2d47!important;
}
html.theme-day.weather-sunny .weather-current small,
html.theme-day.weather-partly-cloudy .weather-current small,
html.theme-day.weather-cloudy .weather-current small,
html.theme-day.weather-wind .weather-current small,
html.theme-day.weather-fog .weather-current small{
  color:rgba(8,42,66,.55)!important;
}
html.theme-day.weather-sunny .weather-preset,
html.theme-day.weather-partly-cloudy .weather-preset,
html.theme-day.weather-cloudy .weather-preset,
html.theme-day.weather-wind .weather-preset,
html.theme-day.weather-fog .weather-preset{
  color:rgba(8,45,70,.68)!important;
}
html.theme-day.weather-sunny .weather-preset.active,
html.theme-day.weather-partly-cloudy .weather-preset.active,
html.theme-day.weather-cloudy .weather-preset.active,
html.theme-day.weather-wind .weather-preset.active,
html.theme-day.weather-fog .weather-preset.active{
  color:#fff!important;
  background:#0a3654!important;
}

/* 3) WEATHER BEHAVIOR requested:
      SUNNY = visible moving clouds
      WIND = clouds + organic leaves
      RAIN = heavy rain + thunder/lightning
      NIGHT = moon + stars + multiple shooting stars */

/* Sunny still has clouds clearly visible, but not fake/dense */
html.weather-sunny .weather-clouds{
  opacity:.31!important;
}
html.weather-sunny .weather-clouds::before{
  opacity:.52!important;
}
html.weather-sunny .weather-clouds::after{
  opacity:.28!important;
}

/* Wind: cloud movement is faster than normal */
html.weather-wind .weather-clouds{
  opacity:.52!important;
}
html.weather-wind .weather-clouds::before{
  animation-duration:78s!important;
  opacity:.56!important;
}
html.weather-wind .weather-clouds::after{
  animation-duration:104s!important;
  opacity:.31!important;
}
html.weather-wind .wind-system{
  opacity:.46!important;
}

/* Rain means real storm-like atmosphere as requested */
html.weather-rain .weather-bg-fixed{
  filter:saturate(.72) contrast(.99) brightness(.69)!important;
}
html.weather-rain .weather-clouds{
  opacity:.82!important;
}
html.weather-rain .weather-tone{
  opacity:1!important;
  background:linear-gradient(180deg,rgba(24,40,55,.17),rgba(22,39,55,.28))!important;
}
html.weather-rain .lightning{
  animation:rainLightning 10.5s steps(1,end) infinite!important;
}
@keyframes rainLightning{
  0%,61%,64%,68%,85%,88%,100%{background:rgba(212,232,255,0)}
  62%{background:rgba(218,235,255,.18)}
  63%{background:rgba(218,235,255,.04)}
  65%{background:rgba(222,238,255,.28)}
  66%{background:rgba(222,238,255,.05)}
  86%{background:rgba(215,234,255,.14)}
  87%{background:rgba(215,234,255,.02)}
}
html.weather-rain .weather-particle-canvas{
  filter:drop-shadow(0 0 1px rgba(225,241,250,.10));
}

/* Existing storm remains even more dramatic */
html.weather-storm .lightning{
  animation:lightningFlash 7.4s steps(1,end) infinite!important;
}

/* Night sky — slightly richer but still elegant */
html.theme-night .night-sky{
  opacity:1!important;
  visibility:visible!important;
}
html.theme-night .stars{
  opacity:.92;
}
html.theme-night.weather-cloudy .night-sky{opacity:.58!important}
html.theme-night.weather-overcast .night-sky{opacity:.30!important}
html.theme-night.weather-rain .night-sky{opacity:.18!important}
html.theme-night.weather-storm .night-sky{opacity:.13!important}
html.theme-night.weather-fog .night-sky{opacity:.22!important}

html.theme-night .moon{
  opacity:.92;
  filter:drop-shadow(0 0 10px rgba(215,232,246,.15));
}
html.theme-night.weather-rain .moon,
html.theme-night.weather-storm .moon,
html.theme-night.weather-overcast .moon{
  opacity:.28!important;
}

/* Second shooting star */
.shooting-star-2{
  top:36%!important;
  left:43%!important;
  width:74px!important;
  animation:shootingStarTwo 15s ease-in-out infinite!important;
  animation-delay:7s!important;
  transform:rotate(-18deg)!important;
}
@keyframes shootingStarTwo{
  0%,78%,100%{opacity:0;transform:translate3d(0,0,0) rotate(-18deg) scaleX(.48)}
  80%{opacity:.78}
  86%{opacity:0;transform:translate3d(190px,62px,0) rotate(-18deg) scaleX(1.05)}
}

/* Mobile: fix overlap there too */
@media(max-width:720px){
  .notice-center{
    margin-top:0!important;
    padding-top:24px!important;
  }
  .notice-center::before{
    width:calc(100% - 28px);
  }
  .hero-grid > div:first-child::before{
    left:-14px;
    right:-14px;
    top:-16px;
    bottom:-16px;
    border-radius:22px;
  }
}


/* =====================================================================
   V12 — THREE.JS 3D CLOUDS
   Layout is unchanged. Only weather rendering/readability is adjusted.
   ===================================================================== */

/* Remove the blurred/translucent panel behind hero text completely. */
.hero-grid > div:first-child::before{
  display:none!important;
  content:none!important;
}

/* No extra large background veil behind the copy. Text color alone adapts. */
.hero::after{
  display:none!important;
  content:none!important;
}

/* Existing 2D cloud texture remains as fallback only. */
.weather-clouds{
  transition:opacity .5s ease;
}
html.three-clouds-ready .weather-clouds{
  opacity:0!important;
}

/* Three.js transparent WebGL layer */
.three-weather-clouds{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .8s ease;
}
html.three-clouds-ready .three-weather-clouds{
  opacity:1;
}
.three-weather-clouds canvas{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  display:block;
  background:transparent!important;
}

/* Keep weather particles above the 3D clouds, below content. */
.weather-particle-canvas{
  z-index:2!important;
}
.night-sky,
.wind-system,
.wind-leaves,
.rain-system,
.fog-system,
.sun-system,
.lightning,
.weather-tone{
  z-index:2;
}

/* Adaptive text colors only — no blurred box */
html.theme-day.weather-sunny .hero-grid > div:first-child h1,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child h1,
html.theme-day.weather-cloudy .hero-grid > div:first-child h1,
html.theme-day.weather-wind .hero-grid > div:first-child h1,
html.theme-day.weather-fog .hero-grid > div:first-child h1{
  color:#08283f!important;
  text-shadow:0 1px 10px rgba(255,255,255,.30)!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child h1 em,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child h1 em,
html.theme-day.weather-cloudy .hero-grid > div:first-child h1 em,
html.theme-day.weather-wind .hero-grid > div:first-child h1 em,
html.theme-day.weather-fog .hero-grid > div:first-child h1 em{
  color:#087da4!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child .lead,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .lead,
html.theme-day.weather-cloudy .hero-grid > div:first-child .lead,
html.theme-day.weather-wind .hero-grid > div:first-child .lead,
html.theme-day.weather-fog .hero-grid > div:first-child .lead{
  color:rgba(6,39,61,.82)!important;
  text-shadow:0 1px 7px rgba(255,255,255,.22)!important;
}
html.theme-day.weather-sunny .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-partly-cloudy .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-cloudy .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-wind .hero-grid > div:first-child .eyebrow,
html.theme-day.weather-fog .hero-grid > div:first-child .eyebrow{
  color:#0a6683!important;
}

/* Night / rain / storm / overcast stay white */
html.theme-night .hero-grid > div:first-child h1,
html.weather-overcast .hero-grid > div:first-child h1,
html.weather-rain .hero-grid > div:first-child h1,
html.weather-storm .hero-grid > div:first-child h1{
  color:#fff!important;
  text-shadow:0 2px 18px rgba(0,0,0,.24)!important;
}
html.theme-night .hero-grid > div:first-child .lead,
html.weather-overcast .hero-grid > div:first-child .lead,
html.weather-rain .hero-grid > div:first-child .lead,
html.weather-storm .hero-grid > div:first-child .lead{
  color:rgba(255,255,255,.84)!important;
  text-shadow:0 1px 10px rgba(0,0,0,.18)!important;
}
html.theme-night .hero-grid > div:first-child .eyebrow,
html.weather-overcast .hero-grid > div:first-child .eyebrow,
html.weather-rain .hero-grid > div:first-child .eyebrow,
html.weather-storm .hero-grid > div:first-child .eyebrow{
  color:#e8fbff!important;
}

/* Ensure the building remains the focal point. */
.weather-bg-fixed{
  transition:filter 1.1s ease!important;
}

/* 3D cloud states */
html.weather-sunny .three-weather-clouds{opacity:.34}
html.weather-partly-cloudy .three-weather-clouds{opacity:.52}
html.weather-cloudy .three-weather-clouds{opacity:.66}
html.weather-overcast .three-weather-clouds{opacity:.76}
html.weather-rain .three-weather-clouds{opacity:.72}
html.weather-storm .three-weather-clouds{opacity:.78}
html.weather-fog .three-weather-clouds{opacity:.23}
html.weather-wind .three-weather-clouds{opacity:.56}

/* Weather controls remain crisp over bright weather. */
html.theme-day.weather-sunny .weather-console,
html.theme-day.weather-partly-cloudy .weather-console,
html.theme-day.weather-cloudy .weather-console,
html.theme-day.weather-wind .weather-console,
html.theme-day.weather-fog .weather-console{
  background:rgba(250,252,252,.86)!important;
  color:#0a2e48!important;
}
html.theme-day.weather-sunny .weather-current,
html.theme-day.weather-partly-cloudy .weather-current,
html.theme-day.weather-cloudy .weather-current,
html.theme-day.weather-wind .weather-current,
html.theme-day.weather-fog .weather-current{
  color:#0a2e48!important;
}

@media(max-width:720px){
  .three-weather-clouds{
    opacity:.88;
  }
}


/* =====================================================================
   V13 — THREE.JS SUN DUST + MOUSE PARALLAX
   Layout is unchanged. Enhances only depth and realism.
   ===================================================================== */

.three-weather-clouds{
  perspective:1200px;
  transform-style:preserve-3d;
}

/* Slightly clearer sunbeams in bright weather so the floating dust is visible */
html.theme-day.weather-sunny .sun-rays,
html.theme-day.weather-partly-cloudy .sun-rays{
  opacity:.42!important;
  filter:blur(5px)!important;
}
html.theme-day.weather-sunny .sun-disc,
html.theme-day.weather-partly-cloudy .sun-disc{
  opacity:.76!important;
}

/* When bright daylight is active, keep clouds visible but elegant */
html.theme-day.weather-sunny .three-weather-clouds{opacity:.40!important}
html.theme-day.weather-partly-cloudy .three-weather-clouds{opacity:.56!important}


/* Laravel integration */
.community-flash{position:fixed;z-index:180;left:50%;top:100px;transform:translateX(-50%);max-width:min(560px,calc(100% - 28px));padding:12px 16px;border-radius:14px;font:600 12px/1.5 var(--font-body);box-shadow:0 18px 50px rgba(0,0,0,.2);animation:communityFlashIn .35s ease both}
.community-flash-success{background:#e7f6ef;color:#155a3f;border:1px solid #bce5d3}
.community-flash-error{background:#fff0ed;color:#8b3528;border:1px solid #f0c7bf}
@keyframes communityFlashIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.auth-user-chip{display:flex;align-items:center;gap:8px;color:#fff;font-size:11px;font-weight:700;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.auth-user-chip form{margin:0}
.auth-user-chip button{border:0;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;padding:0}
.resident-status{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.resident-status.pending{background:#fff3da;color:#8b621d}.resident-status.verified{background:#e5f6ee;color:#176043}
.account-shell{min-height:100svh;background:linear-gradient(180deg,#071b31,#0d3150);padding:140px 20px 70px;color:#fff}
.account-card{width:min(900px,100%);margin:auto;border-radius:28px;padding:28px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);backdrop-filter:blur(16px);box-shadow:0 28px 90px rgba(0,0,0,.2)}
.account-card h1{font:600 clamp(34px,5vw,56px)/1.05 var(--font-display);margin:0 0 12px}.account-card p{color:rgba(255,255,255,.68);line-height:1.7}
.account-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.account-item{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.account-item small{display:block;color:rgba(255,255,255,.45);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.account-item strong{display:block;margin-top:6px;font-size:13px}
@media(max-width:720px){.account-grid{grid-template-columns:1fr}.community-flash{top:82px}}


/* V14 cloud artifact fix */
.three-weather-clouds,
.three-weather-clouds canvas{
  background:transparent!important;
}
.three-weather-clouds canvas{
  mix-blend-mode:normal!important;
  filter:none!important;
}


/* =====================================================================
   V15 — CLOUD MOTION ENHANCEMENT
   Make clouds clearer, more visible and more lively.
   ===================================================================== */

/* Keep a very light real-sky cloud texture behind the Three.js sprites
   so the sky feels richer instead of completely flat. */
html.three-clouds-ready .weather-clouds{
  opacity:.10!important;
}
html.three-clouds-ready.weather-sunny .weather-clouds{opacity:.08!important}
html.three-clouds-ready.weather-partly-cloudy .weather-clouds{opacity:.14!important}
html.three-clouds-ready.weather-cloudy .weather-clouds{opacity:.16!important}
html.three-clouds-ready.weather-overcast .weather-clouds{opacity:.18!important}
html.three-clouds-ready.weather-rain .weather-clouds{opacity:.14!important}
html.three-clouds-ready.weather-storm .weather-clouds{opacity:.12!important}
html.three-clouds-ready.weather-wind .weather-clouds{opacity:.12!important}
html.three-clouds-ready.weather-fog .weather-clouds{opacity:.07!important}

/* Three.js cloud layer more present by weather state */
html.weather-sunny .three-weather-clouds{opacity:.48!important}
html.weather-partly-cloudy .three-weather-clouds{opacity:.66!important}
html.weather-cloudy .three-weather-clouds{opacity:.78!important}
html.weather-overcast .three-weather-clouds{opacity:.84!important}
html.weather-rain .three-weather-clouds{opacity:.80!important}
html.weather-storm .three-weather-clouds{opacity:.84!important}
html.weather-fog .three-weather-clouds{opacity:.28!important}
html.weather-wind .three-weather-clouds{opacity:.72!important}

/* Mobile remains visible but not too heavy */
@media(max-width:720px){
  html.weather-sunny .three-weather-clouds{opacity:.54!important}
  html.weather-partly-cloudy .three-weather-clouds{opacity:.70!important}
  html.weather-cloudy .three-weather-clouds{opacity:.80!important}
  html.weather-wind .three-weather-clouds{opacity:.76!important}
}


/* =====================================================================
   V16 — HOVER / DETAIL PAGES / EVENT ALBUM GALLERY
   ===================================================================== */
.desktop-nav a{position:relative;transition:color .22s ease,opacity .22s ease}
.desktop-nav a::after{content:"";position:absolute;left:10%;right:10%;bottom:-8px;height:1px;transform:scaleX(0);background:linear-gradient(90deg,transparent,#d8b56f,transparent);transition:transform .26s ease}
.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}
.desktop-nav a:hover{color:#fff}
.card,.quick-link,.tool,.notice-row,.activity-card,.home-album-card,.sponsor-slide,.resident-feature-card,.editorial-card,.album-card{transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s ease,border-color .32s ease}
.card:hover,.home-album-card:hover,.editorial-card:hover,.album-card:hover{transform:translateY(-7px);box-shadow:0 24px 58px rgba(6,33,53,.14)}
.quick-link:hover,.tool:hover,.notice-row:hover{transform:translateY(-3px)}
.activity-card{overflow:hidden}
.activity-card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.11) 48%,transparent 69%);transform:translateX(-130%);transition:transform .8s ease}
.activity-card:hover::before{transform:translateX(130%)}
.activity-card:hover{transform:translateY(-5px) scale(1.012)}
.btn{transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(5,29,47,.12)}

.home-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-album-card{border:1px solid rgba(9,65,92,.10);border-radius:23px;overflow:hidden;background:#fff}
.home-album-cover{position:relative;display:block;height:270px;background-size:cover;background-position:center;overflow:hidden}
.home-album-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(4,26,45,.58));transition:.3s ease}
.home-album-card:hover .home-album-cover::after{background:linear-gradient(180deg,rgba(9,68,94,.04),rgba(4,26,45,.70))}
.home-album-cover>span,.home-album-cover>b{position:absolute;z-index:2;bottom:14px}
.home-album-cover>span{left:15px;padding:6px 9px;border-radius:999px;font-size:9px;color:#fff;background:rgba(5,25,42,.52);backdrop-filter:blur(8px)}
.home-album-cover>span i{font-style:normal}
.home-album-cover>b{right:15px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.90);color:#092b43;transition:transform .3s ease}
.home-album-card:hover .home-album-cover>b{transform:rotate(45deg)}
.home-album-info{padding:16px 18px 19px}.home-album-info small{font-size:9px;letter-spacing:.12em;color:#a47a37;font-weight:800}
.home-album-info h3{font-family:"Playfair Display",serif;font-size:20px;margin:6px 0 4px;color:#09243b}.home-album-info h3 a{color:inherit;text-decoration:none}
.home-album-info p{font-size:10px;color:#73838d;margin:0}.gallery-all-link{display:flex;justify-content:center;margin-top:24px}
.fallback-album .home-album-cover{background:linear-gradient(135deg,#0d3c59,#97b8bd)}

.inner-site{background:#f7faf9;color:#102c43}.inner-main{padding-top:96px;min-height:70vh}
.inner-header .header-shell{background:rgba(6,29,48,.90);border-color:rgba(255,255,255,.09);box-shadow:0 15px 40px rgba(0,18,31,.12)}
.inner-header.scrolled .header-shell{background:rgba(5,24,42,.97)}
.inner-header .lang-switch a,.mobile-lang a{display:grid;place-items:center;min-width:31px;height:30px;padding:0 7px;border-radius:8px;color:rgba(255,255,255,.60);text-decoration:none;font-size:9px;font-weight:800}
.inner-header .lang-switch a.active,.mobile-lang a.active{background:#fff;color:#0a2d46}
.inner-hero,.page-heading{position:relative;overflow:hidden;padding:80px 0 62px;background:radial-gradient(circle at 82% 20%,rgba(86,151,166,.15),transparent 32%),linear-gradient(180deg,#edf4f3,#f7faf9)}
.inner-hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:54px;align-items:center}
.inner-hero h1,.page-heading h1,.detail-hero h1,.album-detail-hero h1{margin:10px 0 16px;max-width:820px;font-family:"Playfair Display",serif;font-size:clamp(42px,5.1vw,76px);line-height:.98;letter-spacing:-.035em;color:#08263e}
.inner-hero p,.page-heading p{max-width:700px;color:#647985;line-height:1.8;font-size:13px}
.inner-hero-image{min-height:420px;border-radius:32px;background-size:cover;background-position:center;box-shadow:0 30px 70px rgba(7,42,64,.16);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.inner-hero-image:hover{transform:scale(1.015) rotate(.2deg)}
.inner-content-section{padding:64px 0 84px}.content-prose-wrap,.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start}
.content-prose{max-width:900px;font-size:14px;line-height:1.9;color:#405b69}.content-prose h2,.content-prose h3{font-family:"Playfair Display",serif;color:#092a43;line-height:1.15}.content-prose h2{font-size:34px}.content-prose img{max-width:100%;height:auto;border-radius:20px}.content-prose a{color:#087ca5}
.inner-side-card,.related-sidebar{position:sticky;top:120px;padding:22px;border-radius:23px;background:#092d49;box-shadow:0 22px 55px rgba(5,34,55,.16)}
.inner-side-card>span,.related-title{display:block;margin-bottom:11px;color:#89c6d6;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.inner-side-card a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:700}.inner-side-card a b{transition:transform .2s ease}.inner-side-card a:hover b{transform:translateX(4px)}
.page-heading{padding-bottom:52px}.page-heading h1{font-size:clamp(46px,5vw,68px)}
.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.editorial-card{overflow:hidden;border-radius:23px;background:#fff;border:1px solid rgba(9,63,91,.09)}
.editorial-image{position:relative;display:block;height:240px;background-size:cover;background-position:center;overflow:hidden}.editorial-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(4,28,48,.50))}
.editorial-image span{position:absolute;z-index:2;left:14px;bottom:14px;padding:6px 9px;border-radius:999px;color:#fff;background:rgba(4,26,44,.56);font-size:9px}
.editorial-body{padding:18px 18px 20px}.editorial-meta{font-size:8px;font-weight:900;letter-spacing:.14em;color:#b28743}.editorial-body h2{font-family:"Playfair Display",serif;font-size:22px;line-height:1.15;margin:8px 0}.editorial-body h2 a{color:#092942;text-decoration:none}.editorial-body p{font-size:11px;line-height:1.7;color:#70818b;min-height:56px}
.simple-pagination{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:34px}.simple-pagination a,.simple-pagination>span:not(.disabled){color:#18374c;text-decoration:none;font-size:10px;font-weight:700}.simple-pagination a,.simple-pagination .disabled{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(8,51,78,.13);background:#fff}.simple-pagination .disabled{opacity:.34}
.detail-hero,.album-detail-hero{position:relative;min-height:520px;display:flex;align-items:flex-end;background-image:linear-gradient(90deg,rgba(4,23,40,.84),rgba(4,23,40,.52) 50%,rgba(4,23,40,.12)),var(--detail-bg);background-size:cover;background-position:center}
.detail-hero-content,.album-detail-hero-content{position:relative;z-index:2;padding-top:95px;padding-bottom:66px;color:#fff}.detail-hero h1,.album-detail-hero h1{color:#fff;max-width:900px}
.detail-back{display:inline-flex;margin-bottom:24px;color:rgba(255,255,255,.76);font-size:10px;text-decoration:none}.detail-back:hover{color:#fff}.detail-meta,.album-detail-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:rgba(255,255,255,.70)}
.article-lead{font-size:18px!important;line-height:1.7!important;color:#183f56!important;padding-bottom:20px;border-bottom:1px solid rgba(8,64,91,.10)}
.related-item{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:13px 0;border-top:1px solid rgba(255,255,255,.09);color:#fff;text-decoration:none}.related-item span{color:#87c7d7;font-size:9px}.related-item strong{font-size:10px;line-height:1.45}
.inner-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.resident-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.resident-feature-card{padding:25px;border-radius:23px;background:#fff;border:1px solid rgba(9,62,89,.08)}.resident-feature-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(5,34,55,.10)}
.feature-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:#eaf5f6;color:#0b718e;font-size:17px;margin-bottom:18px}.resident-feature-card h3{font-family:"Playfair Display",serif;font-size:21px;color:#092a43;margin:0 0 8px}.resident-feature-card p{font-size:11px;line-height:1.7;color:#74858f;margin:0}.resident-prose{margin-top:50px}
.gallery-heading-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}.album-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px}.album-filter button{border:1px solid rgba(8,56,83,.12);background:#fff;color:#365366;border-radius:999px;padding:8px 14px;font-size:9px;font-weight:800;cursor:pointer;transition:.2s ease}.album-filter button:hover,.album-filter button.active{background:#0a3553;color:#fff;border-color:#0a3553}
.album-timeline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.album-card{display:grid;grid-template-columns:52% 48%;min-height:310px;overflow:hidden;border-radius:27px;background:#fff;border:1px solid rgba(9,63,91,.08)}.album-card.is-hidden{display:none}
.album-cover{position:relative;display:block;background-size:cover;background-position:center;overflow:hidden}.album-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(4,27,46,.55))}.album-count{position:absolute;z-index:2;left:14px;bottom:14px;color:#fff;font-size:9px;background:rgba(4,24,41,.50);padding:6px 9px;border-radius:999px}.album-view-icon{position:absolute;z-index:2;right:14px;top:14px;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#092b43;transition:transform .3s ease}.album-card:hover .album-view-icon{transform:rotate(45deg)}
.album-card-body{display:grid;grid-template-columns:58px 1fr;gap:13px;padding:22px 20px;align-content:center}.album-date{border-right:1px solid rgba(8,62,90,.10);padding-right:12px}.album-date strong{display:block;font-family:"Playfair Display",serif;font-size:30px;color:#0a304a}.album-date span{font-size:8px;color:#8a9aa3;font-weight:800}.album-category{font-size:8px;letter-spacing:.13em;color:#ad8444;font-weight:900;text-transform:uppercase}.album-card-body h2{font-family:"Playfair Display",serif;font-size:23px;line-height:1.14;margin:7px 0 9px}.album-card-body h2 a{color:#092b44;text-decoration:none}.album-card-body p{font-size:9px;color:#7b8b94;margin:0}
.album-detail-hero{--detail-bg:var(--album-cover);background-image:linear-gradient(90deg,rgba(4,23,40,.88),rgba(4,23,40,.48) 58%,rgba(4,23,40,.08)),var(--album-cover)}.album-detail-hero-content p{max-width:700px;color:rgba(255,255,255,.75);line-height:1.75}.album-intro{margin-bottom:48px}
.album-gallery-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:22px}.album-gallery-head h2{font-family:"Playfair Display",serif;font-size:32px;margin:6px 0 0;color:#092a43}.album-gallery-head>span{font-size:9px;color:#8c9aa2}
.masonry-gallery{columns:3 300px;column-gap:13px}.masonry-item{position:relative;display:block;width:100%;margin:0 0 13px;padding:0;border:0;border-radius:18px;overflow:hidden;background:#dbe6e8;cursor:zoom-in;break-inside:avoid}.masonry-item img{display:block;width:100%;height:auto;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s ease}.masonry-item:hover img{transform:scale(1.045);filter:saturate(1.06)}.masonry-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;background:rgba(5,36,56,.12);opacity:0;transition:opacity .3s ease}.masonry-item:hover .masonry-overlay{opacity:1}.masonry-overlay b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.90);color:#082b43;font-size:20px;font-weight:400}.masonry-overlay small{font-size:9px;font-weight:800;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.gallery-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(2,14,25,.92);opacity:0;visibility:hidden;transition:.25s ease}.gallery-lightbox.open{opacity:1;visibility:visible}.gallery-lightbox figure{width:min(1120px,88vw);height:min(80vh,850px);margin:0;display:flex;flex-direction:column;align-items:center}.gallery-lightbox figure img{max-width:100%;max-height:calc(100% - 54px);object-fit:contain;border-radius:12px}.gallery-lightbox figcaption{width:100%;display:flex;justify-content:space-between;gap:20px;padding-top:14px;color:#fff;font-size:10px}.gallery-lightbox figcaption small{color:rgba(255,255,255,.55)}
.lightbox-close,.lightbox-nav{position:absolute;border:0;color:#fff;background:rgba(255,255,255,.09);cursor:pointer;backdrop-filter:blur(12px);transition:.2s ease}.lightbox-close{top:24px;right:28px;width:42px;height:42px;border-radius:50%;font-size:23px}.lightbox-nav{top:50%;width:47px;height:62px;border-radius:14px;font-size:30px}.lightbox-nav.prev{left:24px}.lightbox-nav.next{right:24px}.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.16);transform:scale(1.04)}
.related-albums{margin-top:66px}.related-album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:14px}.related-album-grid a{min-height:190px;display:flex;align-items:flex-end;padding:17px;border-radius:19px;background-size:cover;background-position:center;color:#fff;text-decoration:none;position:relative;overflow:hidden}.related-album-grid a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(4,26,44,.66))}.related-album-grid a span{position:relative;z-index:2;font-family:"Playfair Display",serif;font-size:19px}.empty-state{grid-column:1/-1;padding:48px;border:1px dashed rgba(8,56,83,.18);border-radius:22px;text-align:center;color:#78909b}
@media(max-width:980px){.home-album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.inner-hero-grid{grid-template-columns:1fr;gap:30px}.inner-hero-image{min-height:360px}.editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-prose-wrap,.detail-layout{grid-template-columns:1fr}.inner-side-card,.related-sidebar{position:static}.resident-feature-grid{grid-template-columns:repeat(2,1fr)}.album-timeline-grid{grid-template-columns:1fr}.gallery-heading-grid{grid-template-columns:1fr;gap:15px}}
@media(max-width:720px){.inner-main{padding-top:76px}.inner-hero,.page-heading{padding:50px 0 38px}.inner-hero h1,.page-heading h1,.detail-hero h1,.album-detail-hero h1{font-size:40px}.inner-hero-image{min-height:280px;border-radius:23px}.inner-content-section{padding:42px 0 58px}.home-album-grid,.editorial-grid,.resident-feature-grid{grid-template-columns:1fr}.home-album-cover{height:245px}.album-card{grid-template-columns:1fr;min-height:0}.album-cover{min-height:245px}.album-card-body{grid-template-columns:52px 1fr}.detail-hero,.album-detail-hero{min-height:480px}.detail-hero-content,.album-detail-hero-content{padding-bottom:45px}.album-gallery-head{display:block}.album-gallery-head>span{display:block;margin-top:8px}.masonry-gallery{columns:2 140px;column-gap:8px}.masonry-item{margin-bottom:8px;border-radius:12px}.lightbox-nav{width:38px;height:54px}.lightbox-nav.prev{left:8px}.lightbox-nav.next{right:8px}.gallery-lightbox figure{width:82vw}.related-album-grid{grid-template-columns:1fr}}


/* Tulip Tower V17 refinements: larger navigation, featured album composition, sticky footer, member interactions */
html,body{min-height:100%}body{min-height:100vh;display:flex;flex-direction:column}body>main,.inner-main{flex:1 0 auto}footer{margin-top:auto}
.desktop-nav a{font-size:14px}
.home-album-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.72fr);grid-template-rows:repeat(3,minmax(150px,1fr));gap:14px}
.home-album-card{min-width:0}.home-album-card.featured-album{grid-row:1/4}.featured-album .home-album-cover{height:100%;min-height:510px}.secondary-album{display:grid;grid-template-columns:42% 1fr;gap:14px;align-items:center}.secondary-album .home-album-cover{height:100%;min-height:150px}.secondary-album .home-album-info{padding:8px 6px}.home-album-cover{overflow:hidden}.home-album-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,28,45,.38));opacity:.35;transition:.35s ease}.home-album-card:hover .home-album-cover:after{opacity:.7}.home-album-card:hover .home-album-cover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(7,37,57,.16)}
.member-dashboard-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:24px}.member-panel{padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px)}.member-panel h2{font-size:24px;margin:7px 0 18px}.member-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.member-form-grid label span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;color:rgba(255,255,255,.62)}.member-form-grid input,.member-form-grid select,.member-feedback-form input,.member-feedback-form textarea{width:100%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:11px 13px;outline:none}.member-form-grid select option{color:#132d40}.member-form-grid .btn{grid-column:1/-1}.member-service-links{display:grid;gap:8px}.member-service-links a{display:grid;grid-template-columns:32px 1fr 24px;align-items:center;gap:8px;padding:12px;border-radius:13px;background:rgba(255,255,255,.06);color:#fff;transition:.22s ease}.member-service-links a:hover{transform:translateX(4px);background:rgba(255,255,255,.11)}.member-service-links i{font-style:normal;text-align:right}.member-feedback-form{display:grid;gap:9px;margin-top:20px}.member-feedback-form h3{font-size:16px;margin:0 0 2px}
@media(max-width:900px){.home-album-grid{grid-template-columns:1fr;grid-template-rows:auto}.home-album-card.featured-album{grid-row:auto}.featured-album .home-album-cover{min-height:360px}.secondary-album{grid-template-columns:40% 1fr}.member-dashboard-grid{grid-template-columns:1fr}}
@media(max-width:600px){.secondary-album{grid-template-columns:1fr}.secondary-album .home-album-cover{min-height:220px}.member-form-grid{grid-template-columns:1fr}.desktop-nav a{font-size:13px}}


/* V18: activity carousel, upcoming event, attachments, mobile polish */
.upcoming-event-feature{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:18px;margin:0 0 20px;padding:16px 18px;border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(120deg,#0b3553,#0c5570);box-shadow:0 16px 42px rgba(5,43,66,.16);overflow:hidden;position:relative}
.upcoming-event-feature:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 0,rgba(255,210,117,.2),transparent 34%);pointer-events:none}
.upcoming-label{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;border-radius:999px;background:#f1c66d;color:#173248}
.upcoming-date{display:flex;align-items:center;gap:8px;border-left:1px solid rgba(255,255,255,.15);padding-left:18px}.upcoming-date b{font:600 30px/1 "Playfair Display",serif}.upcoming-date small,.upcoming-copy small{display:block;color:rgba(255,255,255,.64);font-size:9px}.upcoming-copy strong{display:block;font-size:15px;margin-bottom:4px}.upcoming-arrow{font-size:23px}
.activity-card{cursor:grab;user-select:none}.activity-card:active{cursor:grabbing}.activity-meta-line{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px;color:rgba(255,255,255,.68);font-size:9px}.activity-slider{touch-action:pan-y}
.attachment-panel{margin-top:30px;padding:20px;border-radius:18px;background:#f7fafb;border:1px solid rgba(8,56,83,.08)}.attachment-panel h3{margin:0 0 14px;color:#0b3553;font-size:16px}.attachment-list{display:grid;gap:10px}.attachment-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid rgba(8,56,83,.08);text-decoration:none;color:#17384c;transition:.25s ease}.attachment-item:hover{transform:translateY(-2px);border-color:rgba(13,92,120,.24);box-shadow:0 10px 24px rgba(13,64,86,.08)}.attachment-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e8f2f5;font-size:20px}.attachment-info strong{display:block;font-size:12px}.attachment-info small{display:block;margin-top:3px;color:#7b8d97;font-size:9px}.attachment-open{font-size:18px;color:#0d607c}
@media(max-width:720px){.weather-console,.time-mode-badge,.weather-live{display:none!important}.mobile-menu{top:74px;left:10px;right:10px;border-radius:18px;padding:8px}.mobile-menu a,.mobile-menu .mobile-btn{padding:14px 13px;font-size:14px}.mobile-actions{grid-template-columns:1fr}.upcoming-event-feature{grid-template-columns:auto 1fr auto;gap:12px}.upcoming-label{grid-column:1/-1;width:max-content}.upcoming-date{padding-left:0;border-left:0}.upcoming-copy strong{font-size:13px}.attachment-item{grid-template-columns:40px 1fr auto}}

/* =====================================================================
   V20 — ABOUT PAGE TYPOGRAPHY / ALIGNMENT
   ===================================================================== */
.static-page-about .inner-hero-grid h1{
  font-size:clamp(34px,4.1vw,58px);
  line-height:1.08;
  max-width:760px;
  letter-spacing:-.025em;
}
.static-page-about .static-lead{
  max-width:690px;
  margin-top:18px;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.9;
  font-weight:400;
  text-align:justify;
  text-justify:inter-word;
}
.static-page-about .static-lead p{margin:0 0 10px}
.static-page-about .static-lead p:last-child{margin-bottom:0}
.static-body-about .content-prose{
  font-size:16px;
  line-height:1.9;
  text-align:justify;
  text-justify:inter-word;
}
.static-body-about .content-prose p,
.static-body-about .content-prose li{
  text-align:justify;
  text-justify:inter-word;
}
.static-body-about .content-prose h2,
.static-body-about .content-prose h3{
  text-align:left;
  line-height:1.28;
}
.static-quick-access > span{
  font-size:12px;
  letter-spacing:.13em;
  font-weight:800;
}
.static-quick-access a{
  font-size:15px;
  line-height:1.5;
  padding-top:15px;
  padding-bottom:15px;
}
.static-quick-access a b{font-size:18px}
@media(max-width:720px){
  .static-page-about .inner-hero-grid h1{font-size:34px}
  .static-page-about .static-lead,
  .static-body-about .content-prose{font-size:15px;line-height:1.82;text-align:left}
  .static-body-about .content-prose p,
  .static-body-about .content-prose li{text-align:left}
  .static-quick-access a{font-size:14px}
}

/* =========================================================
   V21 LUXURY COMMUNITY POLISH
   Homepage after hero + notices/activities listing/detail
   ========================================================= */
:root{--lux-navy:#08263e;--lux-navy-deep:#061c2d;--lux-teal:#2e7d91;--lux-gold:#bd9560;--lux-gold-soft:#e6d5b6;--lux-ivory:#f7f3eb;--lux-pearl:#fbfaf7;--lux-line:rgba(8,54,78,.10)}

/* Home: visually elevate everything immediately below the hero */
.notice-center{position:relative;padding:68px 0 54px;background:radial-gradient(circle at 12% 10%,rgba(189,149,96,.10),transparent 27%),radial-gradient(circle at 88% 72%,rgba(56,131,147,.10),transparent 30%),linear-gradient(180deg,#f7f5ef 0%,#fbfaf7 100%);overflow:hidden}
.notice-center::after{content:"";position:absolute;left:50%;top:0;width:min(1180px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(171,133,81,.38),transparent)}
.notice-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(360px,.93fr);gap:0;width:min(1180px,calc(100% - 40px));margin:auto;border:1px solid rgba(12,60,82,.09);border-radius:34px;overflow:hidden;background:#fff;box-shadow:0 35px 85px rgba(7,42,61,.11)}
.notice-main{position:relative;padding:52px 54px 48px;background:radial-gradient(circle at 90% 0,rgba(76,151,165,.16),transparent 31%),linear-gradient(145deg,#071f33 0%,#0b344d 100%);color:#fff;overflow:hidden}
.notice-main::after{content:"";position:absolute;right:-72px;bottom:-100px;width:260px;height:260px;border:1px solid rgba(255,255,255,.10);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.018)}
.notice-topline{position:relative;z-index:2}.notice-main .new-badge{background:rgba(224,195,143,.15);border:1px solid rgba(224,195,143,.35);color:#f0d9ad}.notice-main .meta{color:rgba(255,255,255,.56)}
.notice-main h2{position:relative;z-index:2;max-width:690px;margin:22px 0 17px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(31px,3.4vw,49px);line-height:1.04;letter-spacing:-.03em;color:#fff}.notice-main p{position:relative;z-index:2;max-width:650px;margin:0;color:rgba(255,255,255,.68);font-size:12px;line-height:1.85}.notice-action{position:relative;z-index:2;display:inline-flex;align-items:center;margin-top:29px;padding:12px 18px;border:1px solid rgba(230,213,182,.28);border-radius:999px;color:#f0d8a8;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.04em;transition:.25s ease}.notice-action:hover{transform:translateY(-2px);background:#f3e2c2;color:#09283e;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.notice-list{padding:34px 34px 28px;background:linear-gradient(180deg,#fff,#fbfaf7)}.notice-list-title{display:flex;align-items:center;gap:11px;margin:0 0 15px;color:#9b774b;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.notice-list-title::before{content:"";width:28px;height:1px;background:#bd9560}.notice-row{display:grid;grid-template-columns:58px minmax(0,1fr) 28px;gap:15px;align-items:center;padding:18px 4px;border-top:1px solid rgba(8,54,78,.08);text-decoration:none;transition:.3s ease}.notice-row:hover{transform:translateX(5px);background:linear-gradient(90deg,rgba(232,241,242,.55),transparent)}.notice-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:58px;border-radius:15px;background:#f4f0e8;color:#a87f4c;font-size:8px;font-weight:900;letter-spacing:.06em}.notice-date b{font-family:"Playfair Display",Georgia,serif;font-size:24px;line-height:1;color:#0c3852}.notice-row strong{display:block;color:#12374e;font-family:"Playfair Display",Georgia,serif;font-size:17px;line-height:1.2;font-weight:600}.notice-row small{display:block;margin-top:5px;color:#87949c;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.notice-row .mini-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(9,61,84,.11);color:#987244;transition:.25s ease}.notice-row:hover .mini-arrow{transform:rotate(45deg);background:#0b344d;color:#fff;border-color:#0b344d}

.sponsor-board{padding:0 0 64px;background:linear-gradient(180deg,#fbfaf7,#f5f1e9)}.sponsor-shell{border:1px solid rgba(154,119,74,.14);border-radius:28px;background:rgba(255,255,255,.84);box-shadow:0 24px 65px rgba(10,51,71,.07);backdrop-filter:blur(8px)}.sponsor-head{border-bottom:1px solid rgba(8,54,78,.08)}.sponsor-label{color:#967044;letter-spacing:.14em}.sponsor-slide{background:linear-gradient(135deg,#fff,#fbf7f0)}.sponsor-logo-box{border-color:rgba(174,137,87,.18);background:#fffaf2}.sponsor-button{border-radius:999px;background:#0a344c;color:#fff;border-color:#0a344c}.sponsor-button:hover{background:#b48a56;border-color:#b48a56}

#about.block{padding-top:78px;background:linear-gradient(180deg,#f5f1e9,#fff)}#about .section-title,#news .card h3{color:#0a2e46}#about .section-copy{font-size:12px;line-height:1.9;color:#6f8089}
#news.block{padding-bottom:82px;background:#fff}.cards{gap:22px}.cards>.card{border-radius:27px;border:1px solid rgba(8,58,81,.08);box-shadow:0 20px 55px rgba(6,38,57,.07);overflow:hidden;background:linear-gradient(180deg,#fff,#fcfbf8)}.cards>.card:hover{box-shadow:0 30px 70px rgba(6,38,57,.12)}.cards .card-media{min-height:210px;position:relative}.cards .card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,25,40,.28))}.cards .card-body{padding:26px 28px 30px}.cards .pill{background:#f2eadf;color:#9c7747;border:1px solid #e9dcc8}.cards .card-body h3{font-family:"Playfair Display",Georgia,serif;font-size:26px;line-height:1.08;letter-spacing:-.02em}.cards .card-body p{font-size:11px;line-height:1.8;color:#74858f}.cards .text-link{color:#986f3e;font-weight:800}

/* Luxury list heading */
.luxury-news-heading{position:relative;min-height:360px;padding:92px 0 70px;background:radial-gradient(circle at 82% 25%,rgba(84,158,174,.18),transparent 27%),linear-gradient(145deg,#eaf1f1,#f8f6f0);overflow:hidden}.luxury-news-heading.is-activity{background:radial-gradient(circle at 82% 25%,rgba(187,148,91,.17),transparent 30%),linear-gradient(145deg,#eef2f1,#f7f2e9)}.luxury-news-heading::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,147,94,.4),transparent)}.luxury-heading-orb{position:absolute;border-radius:50%;border:1px solid rgba(10,63,87,.08);pointer-events:none}.luxury-heading-orb.orb-a{width:330px;height:330px;right:-110px;top:-130px;box-shadow:0 0 0 50px rgba(255,255,255,.15)}.luxury-heading-orb.orb-b{width:160px;height:160px;left:6%;bottom:-110px}.luxury-heading-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:50px;align-items:end}.luxury-news-heading h1{max-width:800px;margin:12px 0 18px;font-family:"Playfair Display",Georgia,serif;font-size:clamp(47px,6vw,80px);line-height:.96;letter-spacing:-.045em;color:#08283f}.luxury-news-heading p{max-width:740px;margin:0;color:#667b87;font-size:13px;line-height:1.85}.luxury-heading-stat{display:flex;flex-direction:column;align-items:flex-start;padding-left:26px;border-left:1px solid rgba(8,55,79,.13)}.luxury-heading-stat span{font-family:"Playfair Display",Georgia,serif;font-size:63px;line-height:.9;color:#b48955}.luxury-heading-stat small{max-width:120px;margin-top:10px;color:#6f818c;font-size:9px;font-weight:900;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}

.luxury-news-section{position:relative;padding:62px 0 92px;background:linear-gradient(180deg,#fbfaf7,#f4f2ed)}.luxury-news-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;color:#89979f;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.luxury-news-toolbar>div{display:flex;align-items:center;gap:10px;color:#183d54;font-size:10px}.gold-line{display:inline-block;width:33px;height:1px;background:#b88c55}.luxury-editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.luxury-editorial-card{display:grid;grid-template-columns:43% 57%;min-height:286px;overflow:hidden;border:1px solid rgba(9,59,81,.08);border-radius:27px;background:#fff;box-shadow:0 18px 50px rgba(6,39,58,.07);transition:.35s cubic-bezier(.2,.7,.2,1)}.luxury-editorial-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(6,39,58,.13)}.luxury-editorial-card.is-featured{grid-column:1/-1;grid-template-columns:54% 46%;min-height:390px}.luxury-editorial-image{position:relative;display:block;min-height:100%;background-size:cover;background-position:center;overflow:hidden}.luxury-editorial-image::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(4,24,39,.03),rgba(4,24,39,.44));transition:.45s ease}.luxury-editorial-card:hover .luxury-editorial-image::after{background:linear-gradient(140deg,rgba(4,24,39,0),rgba(4,24,39,.27))}.luxury-editorial-card:hover .luxury-editorial-image{background-size:cover}.luxury-card-badge,.luxury-card-featured{position:absolute;z-index:3;left:18px;top:18px;padding:7px 10px;border-radius:999px;background:rgba(7,31,51,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff;font-size:8px;font-weight:900;letter-spacing:.11em}.luxury-card-featured{left:auto;right:18px;background:rgba(189,149,96,.86);color:#fff}.luxury-editorial-body{display:grid;grid-template-columns:65px 1fr;gap:18px;padding:28px 26px}.luxury-card-date{padding-right:15px;border-right:1px solid rgba(9,59,81,.08)}.luxury-card-date b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:35px;line-height:1;color:#0b324a}.luxury-card-date span{display:block;margin-top:6px;color:#ad8350;font-size:8px;font-weight:900;letter-spacing:.06em}.luxury-card-date small{display:block;margin-top:4px;color:#8a989f;font-size:8px}.luxury-card-copy{align-self:center}.luxury-card-meta{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:9px;color:#88969e;font-size:8px;font-weight:800;letter-spacing:.03em}.luxury-card-copy h2{margin:0 0 11px;font-family:"Playfair Display",Georgia,serif;font-size:25px;line-height:1.08;letter-spacing:-.02em}.is-featured .luxury-card-copy h2{font-size:clamp(31px,3vw,43px)}.luxury-card-copy h2 a{color:#0a2c43;text-decoration:none}.luxury-card-copy p{margin:0;color:#74858e;font-size:10px;line-height:1.8}.luxury-readmore{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:#a27846;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.luxury-readmore b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;border:1px solid rgba(166,123,68,.22);transition:.25s}.luxury-editorial-card:hover .luxury-readmore b{background:#0b344d;color:#fff;border-color:#0b344d;transform:rotate(45deg)}.luxury-empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:290px;padding:30px;border:1px dashed rgba(9,59,81,.15);border-radius:27px;background:#fff;text-align:center}.luxury-empty-state>span{font-size:26px;color:#bd9560}.luxury-empty-state strong{margin-top:10px;font-family:"Playfair Display",Georgia,serif;font-size:25px;color:#0a2c43}.luxury-empty-state small{margin-top:7px;color:#88969f}.luxury-pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:38px}.luxury-pagination>a,.luxury-pagination>span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 14px;border:1px solid rgba(9,59,81,.1);border-radius:999px;background:#fff;color:#0d3951;text-decoration:none;font-size:10px}.luxury-pagination>span:nth-child(2){display:flex}.luxury-pagination .disabled{opacity:.4}

/* Detail page */
.luxury-detail-hero{min-height:590px}.luxury-detail-hero::before{background:linear-gradient(180deg,rgba(3,17,29,.16),rgba(3,19,32,.82)),var(--detail-bg) center/cover no-repeat}.luxury-detail-glow{position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(210,175,116,.18),transparent 24%);pointer-events:none}.luxury-detail-meta{gap:11px}.luxury-detail-section{padding-top:72px;background:linear-gradient(180deg,#fbfaf7,#f3f1ec)}.luxury-detail-layout{grid-template-columns:minmax(0,1fr) 330px;gap:44px}.luxury-article{padding:44px 48px;border:1px solid rgba(9,59,81,.08);border-radius:29px;background:#fff;box-shadow:0 25px 65px rgba(6,39,58,.07)}.luxury-article .article-lead{margin-top:0;padding-bottom:26px;border-bottom:1px solid rgba(9,59,81,.09);font-family:"Playfair Display",Georgia,serif;font-size:24px;line-height:1.55;color:#183e54;text-align:justify}.luxury-article-content{color:#425e6e;font-size:13px;line-height:1.95;text-align:justify}.luxury-article-content p{text-align:justify}.luxury-article-content img{max-width:100%;height:auto;border-radius:18px}.luxury-article-content h2,.luxury-article-content h3{font-family:"Playfair Display",Georgia,serif;color:#0b3048}.luxury-attachment-panel{margin-top:40px;padding:26px;border-radius:23px;background:linear-gradient(145deg,#f7f1e7,#fff);border:1px solid rgba(178,137,81,.17)}.attachment-heading{display:flex;align-items:center;gap:13px;margin-bottom:17px}.attachment-heading-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#0b344d;color:#e6c88f;font-size:19px}.attachment-heading small{display:block;color:#a37b49;font-size:8px;font-weight:900;letter-spacing:.13em}.attachment-heading h3{margin:2px 0 0;font-family:"Playfair Display",Georgia,serif;font-size:23px;color:#0b3048}.luxury-attachment-item{border:1px solid rgba(8,58,81,.08)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 9px 24px rgba(8,47,66,.04);transition:.25s ease}.luxury-attachment-item:hover{transform:translateY(-3px);border-color:rgba(183,140,83,.28)!important;box-shadow:0 15px 34px rgba(8,47,66,.09)}.luxury-attachment-item .attachment-icon{display:grid;place-items:center;min-width:48px;height:48px;border-radius:13px;background:#0b344d;color:#f0d5a2;font-size:9px;font-weight:900;letter-spacing:.05em}.luxury-attachment-item .attachment-open{color:#a57946}.luxury-related-sidebar{padding:27px!important;border-radius:25px!important;background:linear-gradient(155deg,#071f33,#0d3c55)!important}.luxury-related-sidebar .related-title{color:#e0bc80!important}.luxury-related-sidebar .related-item{position:relative;padding-right:28px}.luxury-related-sidebar .related-item b{position:absolute;right:0;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.35);font-size:10px;transition:.25s}.luxury-related-sidebar .related-item:hover b{color:#e0bc80;transform:translateY(-50%) rotate(45deg)}.luxury-related-all{display:inline-flex;margin-top:17px;padding-top:17px;border-top:1px solid rgba(255,255,255,.08);width:100%;color:#e7c58f;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

@media(max-width:980px){.notice-shell{grid-template-columns:1fr}.notice-main{padding:42px}.notice-list{padding:28px}.luxury-heading-grid{grid-template-columns:1fr}.luxury-heading-stat{display:none}.luxury-editorial-grid{grid-template-columns:1fr}.luxury-editorial-card,.luxury-editorial-card.is-featured{grid-column:auto;grid-template-columns:43% 57%;min-height:300px}.luxury-detail-layout{grid-template-columns:1fr}.luxury-related-sidebar{position:static!important}}
@media(max-width:720px){.notice-center{padding:42px 0 38px}.notice-shell{width:min(100% - 24px,1180px);border-radius:24px}.notice-main{padding:32px 26px}.notice-main h2{font-size:32px}.notice-list{padding:22px 20px}.notice-row{grid-template-columns:50px 1fr 25px;gap:11px;padding:15px 0}.notice-date{width:48px;height:52px}.notice-date b{font-size:21px}.notice-row strong{font-size:15px}.sponsor-board{padding-bottom:44px}.luxury-news-heading{min-height:auto;padding:62px 0 48px}.luxury-news-heading h1{font-size:45px}.luxury-news-heading p{font-size:12px}.luxury-news-section{padding:42px 0 62px}.luxury-news-toolbar{align-items:flex-start}.luxury-news-toolbar>span{display:none}.luxury-editorial-card,.luxury-editorial-card.is-featured{display:block;min-height:0;border-radius:23px}.luxury-editorial-image{min-height:245px}.luxury-editorial-body{grid-template-columns:55px 1fr;padding:24px 20px}.luxury-card-date b{font-size:29px}.luxury-card-copy h2,.is-featured .luxury-card-copy h2{font-size:24px}.luxury-article{padding:28px 22px;border-radius:23px}.luxury-article .article-lead{font-size:20px}.luxury-article-content{font-size:12px;line-height:1.9}.luxury-detail-hero{min-height:500px}.luxury-attachment-panel{padding:18px}.luxury-attachment-item{padding:12px!important}.attachment-heading h3{font-size:20px}}

/* =========================================================
   V22 — VISUAL HARMONY / CONTRAST / CLEAN SUMMARY TEXT
   Tuned from browser screenshot review at 1400px and mobile.
   ========================================================= */
:root{
  --v22-navy:#0a3048;
  --v22-navy-2:#0d3c55;
  --v22-teal:#2f8192;
  --v22-gold:#b9894e;
  --v22-gold-soft:#ead8b8;
  --v22-ivory:#f5f0e6;
  --v22-paper:#fffdf9;
  --v22-ink:#17384a;
  --v22-muted:#657b87;
}

/* Homepage below hero: one coherent warm-luxury surface instead of isolated blocks */
.notice-center{
  padding:64px 0 48px;
  background:
    radial-gradient(circle at 9% 5%,rgba(183,137,78,.10),transparent 28%),
    radial-gradient(circle at 91% 70%,rgba(47,129,146,.075),transparent 31%),
    linear-gradient(180deg,#f5f1e8 0%,#faf8f3 100%);
}
.notice-shell{
  width:min(1200px,calc(100% - 44px));
  border-color:rgba(19,67,89,.10);
  border-radius:30px;
  box-shadow:0 28px 72px rgba(8,42,61,.10);
}
.notice-main{
  padding:48px 52px 46px;
  background:
    radial-gradient(circle at 94% 6%,rgba(210,179,123,.16),transparent 30%),
    linear-gradient(142deg,#08273d 0%,#0b344b 63%,#0f4055 100%);
}
.notice-main::after{border-color:rgba(235,215,178,.12);box-shadow:0 0 0 28px rgba(235,215,178,.025),0 0 0 58px rgba(235,215,178,.015)}
.notice-main .new-badge{background:#f7ead0;border-color:#f7ead0;color:#8a5f2d;box-shadow:0 7px 20px rgba(0,0,0,.08)}
.notice-main .meta{color:rgba(238,246,248,.74)}
.notice-main h2{font-size:clamp(30px,3.1vw,46px);line-height:1.07;color:#fffdf8}
.notice-main p{max-width:670px;color:rgba(242,247,248,.80);font-size:12.5px;line-height:1.8}
.notice-action{border-color:rgba(237,216,179,.34);color:#f1d4a0;background:rgba(255,255,255,.035)}
.notice-list{background:linear-gradient(180deg,#fffdf9 0%,#f8f4ec 100%)}
.notice-list-title{color:#a7783f}
.notice-row{padding:17px 5px;border-top-color:rgba(13,62,83,.09)}
.notice-row:hover{background:linear-gradient(90deg,rgba(229,239,239,.64),rgba(255,255,255,0))}
.notice-date{background:#efe8dc;color:#9b6a34}
.notice-date b{color:#123d54}
.notice-row strong{color:#173d52}
.notice-row small{color:#748792}

/* Sponsor block: restore text contrast and make it visually belong to the same palette */
.sponsor-board{padding:0 0 66px;background:linear-gradient(180deg,#faf8f3 0%,#f3eee4 100%)}
.sponsor-shell{
  color:var(--v22-ink);
  border-color:rgba(161,116,61,.16);
  background:
    radial-gradient(circle at 88% 25%,rgba(47,129,146,.07),transparent 31%),
    linear-gradient(135deg,#fffdf9 0%,#f5eee2 100%);
  box-shadow:0 24px 62px rgba(11,50,69,.08);
}
.sponsor-head{padding-top:15px;border-bottom-color:rgba(17,61,82,.09)}
.sponsor-label{color:#8e6537}
.sponsor-label::before{background:#0d3c55;color:#f0d7a6;border:0}
.sponsor-head .sponsor-cta{color:#946a39!important}
.sponsor-head .sponsor-cta:hover{color:#0d5870!important}
.sponsor-slide{background:transparent!important}
.sponsor-logo-box{
  border-color:rgba(162,116,62,.20)!important;
  background:rgba(255,255,255,.72)!important;
  color:#9a7041!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.sponsor-copy .s-mini{color:#2e8194!important}
.sponsor-copy h3{color:#17384a!important;font-size:23px}
.sponsor-copy p{color:#667985!important;font-size:11px;line-height:1.68}
.sponsor-button{background:#0b344d!important;border-color:#0b344d!important;color:#fff!important;box-shadow:0 10px 24px rgba(8,48,69,.14)}
.sponsor-button:hover{background:#a67942!important;border-color:#a67942!important;transform:translateY(-2px)}
.sponsor-dot{background:rgba(13,60,85,.18)}
.sponsor-dot.active{background:#0d3c55}

/* Keep the section transition smooth */
#about.block{padding-top:74px;background:linear-gradient(180deg,#f3eee4 0%,#faf8f4 42%,#fff 100%)}

/* Notice / activity list pages: calmer typography and stronger contrast */
.luxury-news-heading{
  background:
    radial-gradient(circle at 84% 22%,rgba(51,132,148,.12),transparent 29%),
    radial-gradient(circle at 12% 80%,rgba(185,137,78,.075),transparent 25%),
    linear-gradient(145deg,#eef3f2,#f8f4eb);
}
.luxury-news-heading.is-activity{
  background:
    radial-gradient(circle at 83% 23%,rgba(184,137,78,.11),transparent 30%),
    linear-gradient(145deg,#eef2f0,#f7f1e7);
}
.luxury-news-heading h1{font-size:clamp(44px,5.3vw,70px);color:#0b3048}
.luxury-news-heading p{color:#536f7d;font-size:12.5px}
.luxury-heading-stat span{color:#a87840}
.luxury-news-section{background:linear-gradient(180deg,#fbf9f4,#f2eee6)}
.luxury-editorial-card{border-color:rgba(12,61,82,.10);box-shadow:0 17px 45px rgba(8,43,61,.075)}
.luxury-card-copy p{color:#607985;font-size:10.5px}
.luxury-news-toolbar{color:#718791}

/* Detail summaries created by rich editors should read as normal text */
.luxury-article .article-lead{color:#173e54}
.album-detail-hero p,.resident-inner-hero p{white-space:normal}

@media(max-width:720px){
  .notice-center{padding:38px 0 32px}
  .notice-shell{width:calc(100% - 24px);border-radius:23px}
  .notice-main{padding:30px 24px}
  .notice-main h2{font-size:30px;line-height:1.12}
  .notice-main p{font-size:12px;line-height:1.72}
  .notice-list{padding:20px 18px}
  .sponsor-board{padding-bottom:42px}
  .sponsor-copy h3{font-size:20px}
  .luxury-news-heading h1{font-size:40px}
}