/*
Theme Name: The Ark
Theme URI: https://mylmcc.id/
Author: MyLMCC
Author URI: https://mylmcc.id/
Description: One-page premium venue & event space theme for The Ark Convention & Event Hall. Features a sticky header, dark/light mode, animated scroll reveals, floating WhatsApp chat with pre-filled text, Google Maps, and a Request Quotation form that saves leads to the WordPress admin and sends an email notification. Built ACF-ready.
Version: 1.2.8
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-ark
Tags: one-column, custom-logo, custom-menu, dark-mode, light-mode, responsive-layout, sticky-header, translation-ready
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --black:#0b0b0a; --charcoal:#161513; --charcoal-2:#1e1c19;
  --ivory:#faf9f4; --gold:#b8912f; --gold-light:#d9bb74; --stone:#8b877d;
  --line:rgba(216,196,148,0.16);
  --bg:var(--black); --bg-2:var(--charcoal); --bg-3:var(--charcoal-2);
  --fg:var(--ivory); --fg-dim:var(--stone);
  --card:rgba(255,255,255,0.03); --card-border:rgba(216,196,148,0.14);
  --shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  --transition-slow: .6s cubic-bezier(.22,1,.36,1);
  --header-h: 92px;
}
html.light{
  --bg:#faf9f4; --bg-2:#f3f1e9; --bg-3:#ece8dc; --fg:#161513; --fg-dim:#6b675e;
  --card:rgba(11,11,10,0.03); --card-border:rgba(184,145,47,0.28); --line:rgba(184,145,47,0.25);
  --shadow: 0 30px 60px -20px rgba(0,0,0,0.15);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h);}
body{background:var(--bg); color:var(--fg); font-family:'Inter',system-ui,-apple-system,sans-serif; font-weight:400;
  transition:background var(--transition-slow), color var(--transition-slow); overflow-x:hidden;}
h1,h2,h3,h4,.disp{font-family:'Poppins',system-ui,sans-serif;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block; height:auto;}
button{font-family:inherit;}
.container{max-width:1240px; margin:0 auto; padding:0 32px;}
.eyebrow{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); font-weight:600; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; border-radius:2px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:all .35s ease; font-family:'Poppins',system-ui,sans-serif; white-space:nowrap;}
.btn-gold{background:var(--gold); color:#0b0b0a;}
.btn-gold:hover{background:var(--gold-light); transform:translateY(-2px);}
.btn-ghost{border-color:var(--line); color:var(--fg);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-wa{background:#25d366; color:#06210f;}
.btn-wa:hover{background:#3ee87f; transform:translateY(-2px);}
.btn-sm{padding:11px 20px; font-size:11px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}
::selection{background:var(--gold); color:#0b0b0a;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* Accessibility helpers */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute!important; width:1px; word-wrap:normal!important;}
.skip-link{position:absolute; left:-9999px; z-index:9999; padding:14px 22px; background:var(--gold); color:#0b0b0a;
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:600;}
.skip-link:focus{left:12px; top:12px;}

/* ============================================================
   3. NAVBAR
   ============================================================ */
header.site-header{position:fixed; top:0; left:0; right:0; z-index:1000; padding:26px 0; transition:padding .4s ease, background .4s ease, box-shadow .4s ease; background:transparent;}
header.site-header.scrolled{padding:16px 0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  header.site-header.scrolled{background:var(--bg);}
}
body.admin-bar header.site-header{top:32px;}
@media screen and (max-width:782px){ body.admin-bar header.site-header{top:46px;} }
nav.site-nav{display:flex; align-items:center; justify-content:space-between;}
.logo{font-family:'Poppins',sans-serif; font-size:20px; letter-spacing:.16em; font-weight:600; display:inline-flex; align-items:center; gap:10px;}
.logo span{color:var(--gold);}
.logo img{max-height:44px; width:auto;}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links li{position:relative;}
.nav-links a{font-size:13px; letter-spacing:.03em; font-weight:500; position:relative; padding:4px 0; display:inline-block;}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .3s ease;}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).is-active::after{width:100%;}
.nav-links a:not(.btn).is-active{color:var(--gold);}
.nav-right{display:flex; align-items:center; gap:20px; position:relative; z-index:1000;}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; cursor:pointer; background:none; color:var(--fg); transition:border-color .3s ease; flex-shrink:0;}
.theme-toggle:hover{border-color:var(--gold);}
.theme-toggle .icon-moon{display:none;}
html.light .theme-toggle .icon-sun{display:none;}
html.light .theme-toggle .icon-moon{display:block;}
.burger{display:none; width:26px; height:20px; position:relative; cursor:pointer; background:none; border:none; flex-shrink:0;}
.burger span{position:absolute; left:0; right:0; height:1px; background:var(--fg); transition:transform .35s ease, opacity .25s ease;}
.burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:9px;} .burger span:nth-child(3){top:18px;}
.burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.nav-backdrop{position:fixed; inset:0; background:rgba(6,6,5,.6); backdrop-filter:blur(2px); z-index:998; opacity:0; pointer-events:none; transition:opacity .35s ease;}
.nav-backdrop.show{opacity:1; pointer-events:auto;}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{position:relative; min-height:100vh; display:flex; align-items:flex-end; padding-bottom:110px; overflow:hidden;
  background:radial-gradient(ellipse 120% 80% at 50% 0%, rgba(184,145,47,0.14), transparent 60%),
  linear-gradient(180deg, #0b0b0a 0%, #141311 55%, #0b0b0a 100%);}
html.light .hero{background:radial-gradient(ellipse 120% 80% at 50% 0%, rgba(184,145,47,0.10), transparent 60%),
  linear-gradient(180deg, #f6f4ec 0%, #efece0 55%, #f6f4ec 100%);}
.hero-lines{position:absolute; inset:0; opacity:.55; pointer-events:none;}
.hero-lines svg{width:100%; height:100%;}
.blueprint-path{fill:none; stroke:var(--gold); stroke-width:1; opacity:.5; stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:draw 5.5s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes draw{ to{stroke-dashoffset:0;} }
.hero-content{position:relative; z-index:2; width:100%;}
.hero-tag{font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); margin-bottom:26px; opacity:0; animation:riseIn .9s ease .3s forwards;}
.hero h1{font-size:clamp(40px, 7vw, 92px); line-height:1.08; font-weight:600; max-width:920px; letter-spacing:-.01em; opacity:0; animation:riseIn 1s ease .5s forwards;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero p{margin-top:26px; max-width:560px; font-size:16px; line-height:1.7; color:var(--fg-dim); opacity:0; animation:riseIn 1s ease .75s forwards;}
.hero-actions{margin-top:44px; display:flex; gap:18px; flex-wrap:wrap; opacity:0; animation:riseIn 1s ease 1s forwards;}
@keyframes riseIn{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.hero-stats{position:absolute; right:32px; bottom:110px; display:flex; gap:48px; z-index:2; opacity:0; animation:riseIn 1s ease 1.2s forwards;}
.hero-stats div{text-align:right;}
.hero-stats b{display:block; font-family:'Poppins',sans-serif; font-size:26px; color:var(--gold); font-weight:600;}
.hero-stats span{font-size:11px; color:var(--fg-dim); letter-spacing:.08em; text-transform:uppercase;}
@media(max-width:900px){
  /* Bottom-aligning a 100vh hero left a screenful of dead space above the copy
     on a phone, where the header is short and the type wraps tall. Drop the
     full-screen height and let the content set it: the copy starts just below
     the fixed header, and the padding leaves exactly enough room for the scroll
     cue pinned to the bottom, with no slack either side of it. The stats then
     drop onto their own row under the copy rather than being hidden. */
  .hero{min-height:auto; padding-top:132px; padding-bottom:100px; flex-wrap:wrap;}
  .hero-stats{position:static; width:100%; padding:0 32px; margin-top:40px; border-top:1px solid var(--line); padding-top:24px;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(74px,1fr)); gap:16px;}
  .hero-stats div{text-align:left;}
  .hero-stats b{font-size:22px;}
  .hero-stats span{font-size:10px; letter-spacing:.06em;}
}
.scroll-cue{position:absolute; bottom:36px; left:32px; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-dim); opacity:0; animation:riseIn 1s ease 1.3s forwards;}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--gold), transparent);}

/* ============================================================
   5. SHOWCASE CAROUSEL
   ============================================================ */
/* Full-bleed band under the hero. The track is a real horizontal scroller with
   snap points, so a swipe, a trackpad, or the arrow keys move it on their own
   and the band still works before main.js has run. */
.showcase{position:relative; background:var(--bg);}
.sc-track{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; outline-offset:-3px;}
.sc-track::-webkit-scrollbar{display:none;}
/* The frame carries the whole band, so it runs tall. */
.sc-slide{flex:0 0 100%; scroll-snap-align:start; position:relative; margin:0; overflow:hidden;
  height:clamp(460px, 76vh, 800px); background:linear-gradient(150deg, var(--bg-3), var(--bg));}
.sc-slide img{width:100%; height:100%; object-fit:cover; display:block;}
/* A hall shot can be all pale ceiling, so the corner the pagination sits in
   carries its own scrim rather than trusting the photo to be dark there. */
.sc-slide::after{content:""; position:absolute; inset:auto 0 0 0; height:210px; pointer-events:none;
  background:linear-gradient(transparent, rgba(6,6,5,.62));}
/* Pagination is laid over the frame, in its bottom-right corner, held to the
   container's gutter by the same max-width the rest of the page uses. */
.sc-bar{position:absolute; left:0; right:0; bottom:28px; z-index:2;
  display:flex; justify-content:flex-end; align-items:center; gap:26px;}
.sc-count{font-family:'Poppins',sans-serif; font-size:12px; letter-spacing:.14em; white-space:nowrap;
  color:rgba(250,249,244,.65); text-shadow:0 1px 3px rgba(6,6,5,.5);}
.sc-count b{color:var(--gold-light); font-weight:600; margin-right:4px;}
.sc-thumbs{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding:2px;}
.sc-thumbs::-webkit-scrollbar{display:none;}
.sc-thumb{flex:0 0 auto; width:82px; height:52px; padding:0; border:1px solid rgba(250,249,244,.34); background:none; cursor:pointer;
  overflow:hidden; position:relative; box-shadow:0 2px 10px rgba(6,6,5,.35);
  transition:border-color .3s ease, opacity .3s ease;}
.sc-thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); opacity:.6;
  transition:filter .4s ease, opacity .4s ease, transform .6s cubic-bezier(.22,1,.36,1);}
.sc-thumb:hover img,.sc-thumb:focus-visible img{filter:none; opacity:1;}
.sc-thumb:hover{border-color:var(--gold-light);}
.sc-thumb.active{border-color:var(--gold);}
.sc-thumb.active img{filter:none; opacity:1; transform:scale(1.06);}
@media(max-width:700px){
  .sc-slide{height:clamp(380px, 62vh, 560px);}
  .sc-slide::after{height:150px;}
  /* The strip scrolls rather than shrinking the thumbs into unusable targets;
     the script keeps the active one in view as the slides advance. */
  .sc-bar{gap:16px; bottom:18px;}
  .sc-thumb{width:64px; height:42px;}
}

/* ============================================================
   6. SECTION SHARED
   ============================================================ */
.ark-section{padding:130px 0; position:relative;}
.section-head{max-width:640px; margin-bottom:64px;}
.section-head.center{max-width:680px; margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{display:none;}
.section-head h2{font-size:clamp(30px,4vw,46px); font-weight:600; margin-top:18px; line-height:1.15;}
.section-head p{margin-top:18px; color:var(--fg-dim); font-size:15px; line-height:1.75;}
.reveal{opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============================================================
   7. ABOUT
   ============================================================ */
#about{background:var(--bg-2);}
.about-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:start;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr; gap:48px;}}
.about-lead{margin-top:22px; color:var(--fg-dim); line-height:1.8; font-size:15px; max-width:460px;}
.use-cases{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.use-case{background:var(--bg-2); padding:22px 20px; font-size:14px; display:flex; align-items:center; gap:12px; transition:background .3s ease;}
html.light .use-case{background:var(--bg);}
.use-case:hover{background:var(--card);}
.use-case .n{color:var(--gold); font-family:'Poppins',sans-serif; font-size:12px; opacity:.7;}
.about-media{aspect-ratio:3/2; border:1px solid var(--line); position:relative; overflow:hidden; background:linear-gradient(160deg, var(--bg-3), var(--bg)); margin-top:36px;}
.about-media svg{position:absolute; inset:0; width:100%; height:100%;}

/* Six-photo carousel. The frame is landscape 3:2 because the venue shots run
   1.5:1 to 2.8:1 — a portrait frame cropped the halls out of them. The dots are
   the only control, so they carry an invisible 25px hit area for thumbs. */
.about-carousel{touch-action:pan-y;}
.ac-slides{display:flex; height:100%; transition:transform .7s cubic-bezier(.22,1,.36,1);}
.ac-slide{flex:0 0 100%; margin:0; position:relative; overflow:hidden; background:linear-gradient(150deg, var(--bg-3), var(--bg));}
.ac-slide img{width:100%; height:100%; object-fit:cover; display:block;}
/* The dots sit on whatever photo is showing, and a hall shot can be all pale
   ceiling — this keeps them readable without a solid bar across the frame. */
.about-carousel::after{content:""; position:absolute; left:0; right:0; bottom:0; height:96px; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, rgba(6,6,5,.5));}
/* The button is the thumb target; the dot itself is drawn inside it, so the
   targets sit shoulder to shoulder without the dots crowding each other. */
.ac-dots{position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; justify-content:center; gap:4px;}
.ac-dot{position:relative; width:20px; height:28px; border:none; padding:0; background:none; cursor:pointer; transition:width .3s ease;}
.ac-dot::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%; background:rgba(245,242,234,.45); box-shadow:0 1px 3px rgba(6,6,5,.45);
  transition:width .3s ease, background .3s ease, border-radius .3s ease;}
.ac-dot:hover::before{background:var(--gold);}
.ac-dot.active{width:32px;}
.ac-dot.active::before{width:22px; border-radius:4px; background:var(--gold);}
.about-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:60px;}
@media(max-width:800px){.about-strip{grid-template-columns:repeat(2,1fr);}}
.about-strip div{background:var(--bg-2); padding:28px 22px;}
html.light .about-strip div{background:var(--bg);}
.about-strip b{font-family:'Poppins',sans-serif; font-size:15px; display:block; margin-bottom:6px;}
.about-strip span{font-size:13px; color:var(--fg-dim); line-height:1.5;}

/* ============================================================
   8. VENUES
   ============================================================ */
.venue-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:980px){.venue-grid{grid-template-columns:1fr;}}
/* Flex column, not block: the card is a <button>, and a button centres its own
   content vertically. Stretched to the tallest card in the row, the shorter
   cards were pushing their photo down and showing a band of card background
   above it. Flex top-aligns the children and lets the body absorb the slack. */
.venue-card{background:var(--card); border:1px solid var(--card-border); border-radius:2px; padding:0; cursor:pointer;
  overflow:hidden; position:relative; text-align:left; width:100%; display:flex; flex-direction:column;
  align-items:stretch; font:inherit; color:inherit;
  transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;}
.venue-card:hover{transform:translateY(-8px); border-color:var(--gold); box-shadow:var(--shadow);}
.venue-visual{height:220px; flex:0 0 auto; position:relative; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, rgba(184,145,47,0.18), transparent 55%), linear-gradient(135deg, var(--bg-3), var(--bg));
  overflow:hidden;}
.venue-visual svg{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.gauge{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;}
.gauge svg{width:118px; height:118px; position:static; opacity:1;}
/* The gauge always sits on the dark scrim over the venue photo, in both colour
   schemes, so it must NOT follow --fg / --line: in light mode those turn dark
   and the capacity number disappears into the photo. Fixed light values here
   match what dark mode already rendered. */
.gauge-ring-bg{fill:none; stroke:rgba(250,249,244,0.20); stroke-width:4;}
.gauge-ring{fill:none; stroke:var(--gold-light); stroke-width:4; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1);}
.gauge-num{font-family:'Poppins',sans-serif; font-size:26px; font-weight:600; fill:var(--ivory);
  paint-order:stroke; stroke:rgba(11,11,10,0.45); stroke-width:3px; stroke-linejoin:round;}
.gauge-lbl{position:absolute; bottom:-6px; font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(250,249,244,0.72); text-shadow:0 1px 3px rgba(11,11,10,0.55);}
.venue-body{padding:28px 26px 30px; flex:1 1 auto;}
.venue-body h3{font-size:21px; font-weight:600; margin-bottom:6px;}
.venue-dim{font-size:12px; color:var(--fg-dim); letter-spacing:.03em; margin-bottom:18px;}
.venue-dim b{color:var(--gold); font-weight:600;}
.venue-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.venue-tags span{font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line); color:var(--fg-dim);}
.venue-cta{display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line);}
.venue-cta .from{font-size:12px; color:var(--gold); font-weight:600; letter-spacing:.03em;}
.venue-cta .arrow{color:var(--gold); font-size:18px; transition:transform .3s ease;}
.venue-card:hover .arrow{transform:translateX(6px);}
.venue-visual.photo{background-size:cover; background-position:center;}
.venue-visual.photo::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,10,.25) 0%, rgba(11,11,10,.65) 100%); z-index:1;}

/* ============================================================
   9. OVERLAY / MODAL
   ============================================================ */
.overlay{position:fixed; inset:0; z-index:2000; background:rgba(6,6,5,0.72); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto;}
.overlay.open{display:flex;}
.modal{background:var(--bg); border:1px solid var(--card-border); max-width:920px; width:100%; border-radius:3px;
  box-shadow:var(--shadow); animation:modalIn .45s cubic-bezier(.22,1,.36,1); margin-bottom:60px;}
@keyframes modalIn{from{opacity:0; transform:translateY(30px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal-head{padding:40px 44px 28px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:20px;}
.modal-head h3{font-size:30px; font-weight:600;}
.modal-head .venue-dim{margin:10px 0 0;}
.modal-close{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--fg);
  cursor:pointer; flex-shrink:0; font-size:16px; transition:all .3s ease; line-height:1;}
.modal-close:hover{border-color:var(--gold); color:var(--gold); transform:rotate(90deg);}
.modal-body{padding:32px 44px 44px;}
@media(max-width:640px){.modal-body{padding:28px 24px 36px;} .modal-head{padding:32px 24px 24px;}}
.event-type-chips{display:flex; flex-wrap:wrap; gap:10px;}
.event-type-chips span{font-size:12px; letter-spacing:.03em; padding:9px 16px; border:1px solid var(--line); color:var(--fg);}

/* ============================================================
   10. GALLERY
   ============================================================ */
#gallery{background:var(--bg-2);}
.gallery-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.gfilter{padding:10px 20px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; border:1px solid var(--line);
  background:none; color:var(--fg-dim); font-family:'Poppins',sans-serif; transition:all .3s ease;}
.gfilter.active, .gfilter:hover{border-color:var(--gold); color:var(--gold);}
.masonry{column-count:3; column-gap:20px;}
@media(max-width:900px){.masonry{column-count:2;}}
@media(max-width:560px){.masonry{column-count:1;}}
.g-item{break-inside:avoid; margin-bottom:20px; position:relative; cursor:pointer; overflow:hidden; border:1px solid var(--line);
  opacity:0; transform:translateY(20px) scale(.98); transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease, box-shadow .4s ease;
  display:block; width:100%; padding:0; background:none; text-align:left; color:inherit;}
.g-item.in{opacity:1; transform:translateY(0) scale(1);}
.g-item.is-hidden{display:none;}
.g-item:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.g-visual{width:100%; display:flex; align-items:center; justify-content:center; position:relative; color:rgba(255,255,255,.75); font-family:'Poppins',sans-serif; overflow:hidden;
  /* Solid base: the gradient's middle stop is translucent, so without this the light
     theme shows through and the white titles lose contrast. */
  background-color:#211d18;}
.g-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));}
.g-visual > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.g-cat{position:absolute; bottom:14px; left:16px; z-index:2; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-light);}
.g-title{position:absolute; bottom:32px; left:16px; z-index:2; font-size:15px; font-weight:500; color:#fff;}
.g-icon{position:relative; z-index:1; opacity:.35;}
.gallery-empty{color:var(--fg-dim); font-size:14px; padding:30px 0;}
.lightbox{position:fixed; inset:0; z-index:2100; background:rgba(4,4,4,.94); display:none; align-items:center; justify-content:center; padding:40px;}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:820px; width:100%; text-align:center;}
.lightbox .g-visual{height:56vh; margin:0 auto 20px; max-width:820px;}
.lightbox-cap{color:var(--stone); font-size:13px; letter-spacing:.05em;}
.lightbox-close{position:absolute; top:30px; right:36px; color:#fff; font-size:28px; cursor:pointer; background:none; border:none; line-height:1;}
.lightbox .g-visual.photo-visual{background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#000;}
.lightbox .g-visual.photo-visual::after{display:none;}

/* ============================================================
   11. WHY CHOOSE US
   ============================================================ */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr;}}
.why-item{background:var(--bg); padding:36px 28px;}
html.light .why-item{background:var(--bg-2);}
.why-item svg{color:var(--gold); margin-bottom:18px;}
.why-item h4{font-size:15px; font-weight:600; margin-bottom:8px;}
.why-item p{font-size:13px; color:var(--fg-dim); line-height:1.6;}

/* ============================================================
   12. TESTIMONIALS
   ============================================================ */
#testimonials{background:var(--bg-2);}
.testi-wrap{position:relative; max-width:760px; margin:0 auto;}
.testi-track{overflow:hidden;}
.testi-slides{display:flex; transition:transform .6s cubic-bezier(.22,1,.36,1);}
.testi-slide{flex:0 0 100%; padding:0 10px; text-align:center;}
.testi-quote{font-family:'Poppins',sans-serif; font-size:clamp(18px,2.4vw,24px); font-weight:400; line-height:1.6; color:var(--fg);}
.testi-quote::before{content:"\201C"; color:var(--gold); font-size:1.3em;}
.testi-quote::after{content:"\201D"; color:var(--gold); font-size:1.3em;}
.testi-person{margin-top:28px;}
.testi-avatar{width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, var(--gold), #6b5220); margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:600; color:#0b0b0a; font-size:17px; overflow:hidden;}
.testi-avatar img{width:100%; height:100%; object-fit:cover;}
.testi-name{font-weight:600; font-size:14px;}
.testi-role{font-size:12px; color:var(--fg-dim); margin-top:2px;}
.testi-nav{display:flex; justify-content:center; gap:20px; margin-top:44px; align-items:center;}
.testi-arrow{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--fg); cursor:pointer; transition:all .3s ease;}
.testi-arrow:hover{border-color:var(--gold); color:var(--gold);}
.testi-dots{display:flex; gap:8px;}
.testi-dot{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .3s ease; border:none; padding:0;}
.testi-dot.active{background:var(--gold); width:22px; border-radius:4px;}
.trusted-strip{margin-top:90px; padding-top:56px; border-top:1px solid var(--line); text-align:center;}
.trusted-label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:32px;}
.trusted-logos{display:flex; justify-content:center; flex-wrap:wrap; gap:44px; align-items:center;}
.trusted-logos span{font-family:'Poppins',sans-serif; font-weight:600; font-size:18px; letter-spacing:.04em; color:var(--fg-dim); opacity:.6; transition:opacity .3s ease;}
.trusted-logos span:hover{opacity:1; color:var(--gold);}
.trusted-logos img{max-height:38px; width:auto; opacity:.6; filter:grayscale(1); transition:all .3s ease;}
.trusted-logos img:hover{opacity:1; filter:none;}

/* ============================================================
   13. FAQ
   ============================================================ */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; color:var(--fg); padding:26px 0; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:'Poppins',sans-serif; font-size:16px; font-weight:500;}
.faq-q:hover{color:var(--gold);}
.faq-icon{flex-shrink:0; width:22px; height:22px; position:relative;}
.faq-icon::before, .faq-icon::after{content:""; position:absolute; background:var(--gold); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-icon::before{width:14px; height:1px;}
.faq-icon::after{width:1px; height:14px; transition:transform .3s ease;}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{padding:0 0 26px; color:var(--fg-dim); font-size:14px; line-height:1.75; max-width:640px;}

/* ============================================================
   14. CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.field{margin-bottom:20px;}
.field label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); display:block; margin-bottom:8px;}
.field input, .field select, .field textarea{width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--fg); padding:12px 2px; font-family:'Inter',sans-serif; font-size:14px; transition:border-color .3s ease; border-radius:0;}
.field textarea{resize:vertical; min-height:90px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.field input::placeholder, .field textarea::placeholder{color:var(--fg-dim); opacity:.65;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(max-width:520px){.field-row{grid-template-columns:1fr;}}
select option{background:var(--bg-2); color:var(--fg);}
.ark-hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-msg{margin-top:16px; font-size:13px; line-height:1.6; padding:12px 14px; border:1px solid var(--line); display:none;}
.form-msg.show{display:block;}
.form-msg.is-error{border-color:#c76b6b; color:#e08b8b;}
.form-msg.is-success{border-color:var(--gold); color:var(--gold);}
.contact-info{margin-bottom:36px;}
.contact-info-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.contact-info-row svg{color:var(--gold); flex-shrink:0; margin-top:2px;}
.contact-info-row b{display:block; font-size:13px; margin-bottom:3px;}
.contact-info-row span, .contact-info-row a{font-size:13px; color:var(--fg-dim); line-height:1.6;}
.contact-info-row a:hover{color:var(--gold);}
.map-box{border:1px solid var(--line); height:280px; overflow:hidden;}
.map-box iframe{width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.05); display:block;}

/* ============================================================
   15. FOOTER
   ============================================================ */
footer.site-footer{background:var(--black); color:var(--ivory); padding:80px 0 30px; border-top:1px solid var(--line);}
html.light footer.site-footer{background:#111; color:#f4f2ea;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px;}
.footer-grid p, .footer-grid a{font-size:13px; color:#a9a59a; line-height:2;}
.footer-grid a:hover{color:var(--gold-light);}
.footer-grid .logo{color:var(--ivory);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:12px; color:#8b877d;}
.socials{display:flex; gap:14px;}
.socials a{width:34px; height:34px; border:1px solid rgba(255,255,255,.12); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#e9e6db;}
.socials a:hover{border-color:var(--gold); color:var(--gold-light);}
/* MyLMCC credit */
.site-credit{display:inline-flex; align-items:center; gap:9px; color:#8b877d; transition:color .3s ease;}
.site-credit:hover{color:var(--gold-light);}
.site-credit img, .site-credit svg{height:20px; width:auto; display:block; opacity:.85; transition:opacity .3s ease;}
.site-credit:hover img, .site-credit:hover svg{opacity:1;}

/* ============================================================
   16. FLOATING WHATSAPP
   ============================================================ */
.wa-float{position:fixed; bottom:26px; right:26px; z-index:900; width:58px; height:58px; border-radius:50%; background:#25d366;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; transition:transform .3s ease;
  animation:waPulse 2.4s ease-in-out infinite; border:none;}
.wa-float:hover{transform:scale(1.08);}
@keyframes waPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45), var(--shadow);} 50%{box-shadow:0 0 0 10px rgba(37,211,102,0), var(--shadow);}}
.wa-bubble{position:fixed; bottom:96px; right:26px; z-index:900; width:min(300px,calc(100vw - 52px)); background:var(--bg-2);
  border:1px solid var(--card-border); box-shadow:var(--shadow); padding:18px 20px 20px; border-radius:3px;
  opacity:0; transform:translateY(14px) scale(.96); transform-origin:bottom right; pointer-events:none;
  transition:all .35s cubic-bezier(.22,1,.36,1);}
.wa-bubble.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.wa-bubble b{display:block; font-family:'Poppins',sans-serif; font-size:14px; margin-bottom:6px; color:var(--fg);}
.wa-bubble p{font-size:13px; line-height:1.6; color:var(--fg-dim); margin-bottom:14px;}
.wa-bubble-close{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--fg-dim); cursor:pointer; font-size:15px; line-height:1;}

/* ============================================================
   17. TOAST
   ============================================================ */
.toast-panel{position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(30px); z-index:3000; width:min(420px, 90vw);
  background:var(--bg-2); border:1px solid var(--card-border); padding:24px 26px; opacity:0; pointer-events:none;
  transition:all .4s cubic-bezier(.22,1,.36,1); box-shadow:var(--shadow); border-radius:2px;}
.toast-panel.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast-panel h6{font-family:'Poppins',sans-serif; font-size:15px; margin-bottom:6px; color:var(--gold);}
.toast-panel p{font-size:13px; color:var(--fg-dim); margin-bottom:16px; line-height:1.5;}
.toast-close{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--fg-dim); cursor:pointer; font-size:16px; line-height:1;}

/* ============================================================
   18. VENUE DETAIL MODAL
   ============================================================ */
.modal.detail{max-width:1120px;}
.detail-body{padding:0 0 50px;}
.vd-topbar{position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
@supports not (background: color-mix(in srgb, red 50%, transparent)){ .vd-topbar{background:var(--bg);} }
@media(max-width:640px){.vd-topbar{padding:16px 20px;}}
.vd-topbar .name-block h3{font-size:22px; font-weight:600;}
.vd-topbar .venue-dim{margin-top:4px; margin-bottom:0;}
.vd-hero{position:relative; padding:28px 40px 0;}
@media(max-width:640px){.vd-hero{padding:20px 20px 0;}}
.vd-hero-main{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); background:var(--bg-3);}
.vd-hero-main img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .5s ease, transform .8s cubic-bezier(.22,1,.36,1);}
.vd-hero-main:hover img{transform:scale(1.03);}
.vd-hero-controls{position:absolute; bottom:16px; right:16px; display:flex; gap:8px; z-index:2;}
.vd-icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(10,10,9,.5);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px); transition:all .3s ease;}
.vd-icon-btn:hover{background:var(--gold); border-color:var(--gold); color:#0b0b0a;}
.vd-viewall{position:absolute; bottom:16px; left:16px; z-index:2; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 18px; background:rgba(10,10,9,.5); border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(6px); cursor:pointer; transition:all .3s ease;}
.vd-viewall:hover{background:var(--gold); border-color:var(--gold); color:#0b0b0a;}
.vd-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px;}
@media(max-width:640px){.vd-thumbs{grid-template-columns:repeat(3,1fr);}}
.vd-thumb{aspect-ratio:4/3; overflow:hidden; cursor:pointer; border:1.5px solid transparent; opacity:.6; transition:all .3s ease; position:relative; padding:0; background:none;}
.vd-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.vd-thumb:hover{opacity:.9;}
.vd-thumb.active{opacity:1; border-color:var(--gold);}
.vd-thumb span{position:absolute; bottom:6px; left:8px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8);}
.vd-info-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:36px 40px 0;}
@media(max-width:640px){.vd-info-row{grid-template-columns:1fr; margin:28px 20px 0;}}
.vd-info-card{background:var(--bg); padding:24px 26px; display:flex; gap:16px; align-items:flex-start;}
html.light .vd-info-card{background:var(--bg-2);}
.vd-info-card svg{color:var(--gold); flex-shrink:0; margin-top:2px;}
.vd-info-card b{display:block; font-family:'Poppins',sans-serif; font-size:15px; margin-bottom:4px;}
.vd-info-card span{font-size:12px; color:var(--fg-dim); line-height:1.5;}
.vd-section{padding:44px 40px 0;}
@media(max-width:640px){.vd-section{padding:34px 20px 0;}}
.vd-section h5{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.vd-section h5::before{content:""; width:16px; height:1px; background:var(--gold);}
.vd-section h5 .sub{text-transform:none; letter-spacing:0; color:var(--fg-dim); font-weight:400;}
.vd-about-text{font-size:14.5px; line-height:1.85; color:var(--fg-dim); max-width:760px;}
.vd-facility-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:760px){.vd-facility-grid{grid-template-columns:repeat(2,1fr);}}
.vd-facility-card{border:1px solid var(--line); padding:20px 18px; display:flex; flex-direction:column; gap:12px; transition:border-color .3s ease, transform .3s ease;}
.vd-facility-card:hover{border-color:var(--gold); transform:translateY(-3px);}
.vd-facility-card svg{color:var(--gold);}
.vd-facility-card span{font-size:13px; line-height:1.4;}
.vd-facility-card.additional{border-style:dashed;}
.vd-quickfacts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){.vd-quickfacts{grid-template-columns:repeat(2,1fr);}}
.vd-qf-card{background:var(--bg); padding:26px 22px; text-align:center;}
html.light .vd-qf-card{background:var(--bg-2);}
.vd-qf-card b{display:block; font-family:'Poppins',sans-serif; font-size:17px; color:var(--gold); font-weight:600; margin-bottom:6px;}
.vd-qf-card span{font-size:11.5px; color:var(--fg-dim); letter-spacing:.03em; line-height:1.4;}
.vd-gallery-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.vd-gfilter{padding:9px 16px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; border:1px solid var(--line);
  background:none; color:var(--fg-dim); font-family:'Poppins',sans-serif; transition:all .3s ease;}
.vd-gfilter.active, .vd-gfilter:hover{border-color:var(--gold); color:var(--gold);}
.vd-gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:640px){.vd-gallery-grid{grid-template-columns:repeat(2,1fr);}}
.vd-gitem{aspect-ratio:4/3; overflow:hidden; cursor:pointer; position:relative; border:1px solid var(--line); padding:0; background:none; display:block;}
.vd-gitem.is-hidden{display:none;}
.vd-gitem img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1);}
.vd-gitem:hover img{transform:scale(1.08);}
.vd-gitem .gcap{position:absolute; bottom:0; left:0; right:0; padding:16px 12px 10px; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent); text-align:left;}
.vd-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:16px;}
.vd-cta-note{margin-top:16px; font-size:12px; color:var(--fg-dim);}

/* ============================================================
   19. MOBILE NAV
   ============================================================ */
@media(max-width:860px){
  .nav-links{position:fixed; top:0; right:-100%; width:78%; max-width:340px; height:100vh; background:var(--bg-2);
    flex-direction:column; align-items:flex-start; padding:110px 36px; gap:26px; transition:right .45s cubic-bezier(.22,1,.36,1);
    border-left:1px solid var(--line); z-index:999; overflow-y:auto;}
  .nav-links.open{right:0;}
  /* Keep the burger (and its close state) above the open drawer. */
  .burger{display:block;}
  .nav-links a.btn{margin-top:10px;}
}

/* ============================================================
   20. BLOG — listing cards, pagination, article page
   ============================================================ */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr;}}

.post-card{background:var(--card); border:1px solid var(--card-border); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;}
.post-card:hover{transform:translateY(-8px); border-color:var(--gold); box-shadow:var(--shadow);}

.post-card-visual{display:flex; align-items:center; justify-content:center; height:200px; position:relative;
  border-bottom:1px solid var(--line); overflow:hidden; color:var(--gold); opacity:.9;
  background:radial-gradient(circle at 30% 20%, rgba(184,145,47,0.18), transparent 55%), linear-gradient(135deg, var(--bg-3), var(--bg));}
.post-card-visual.photo{background-size:cover; background-position:center;}
.post-card-visual.photo::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,10,.05) 0%, rgba(11,11,10,.35) 100%);}

.post-card-body{padding:26px 26px 30px; display:flex; flex-direction:column; flex:1;}
.post-card-title{font-size:19px; font-weight:600; line-height:1.35; margin-bottom:12px;}
.post-card-title a{color:inherit;}
.post-card-title a:hover{color:var(--gold);}
.post-card-date{font-size:12px; letter-spacing:.03em; color:var(--gold); font-weight:600; margin-bottom:14px;}
.post-card-excerpt{font-size:14px; color:var(--fg-dim); line-height:1.7; margin-bottom:22px;}

.post-more{display:inline-flex; align-items:center; gap:8px; margin-top:auto; align-self:flex-start;
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--gold);
  border-bottom:1px solid var(--line); padding-bottom:4px; transition:border-color .3s ease, gap .3s ease;}
.post-more:hover{border-color:var(--gold); gap:12px;}

.post-empty{color:var(--fg-dim); font-size:15px;}

/* Pagination. The .nav-links reset matters: the mobile drawer styles the same
   class name, and without it the pager becomes a fixed off-screen panel. */
.pagination{margin-top:60px;}
.pagination .nav-links{display:flex; flex-wrap:wrap; flex-direction:row; gap:8px; align-items:center; justify-content:center;
  position:static; width:auto; max-width:none; height:auto; background:none; padding:0; transform:none;
  right:auto; top:auto; z-index:auto; border-left:0; overflow:visible;}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  padding:0 14px; border:1px solid var(--line); border-radius:2px; font-size:13px; font-weight:600; color:var(--fg-dim);
  transition:border-color .3s ease, color .3s ease, background .3s ease;}
.pagination .page-numbers:hover{border-color:var(--gold); color:var(--gold);}
.pagination .page-numbers.current{background:var(--gold); border-color:var(--gold); color:var(--black);}
.pagination .page-numbers.dots{border-color:transparent;}

/* Article ----------------------------------------------------- */
.single-head{margin-bottom:44px;}
.single-back{display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:22px; transition:gap .3s ease;}
.single-back:hover{gap:13px;}
.single-head h1{font-size:clamp(30px,4.4vw,46px); line-height:1.15; font-weight:600; letter-spacing:-.01em;}
.single-meta{margin-top:18px; font-size:13px; color:var(--gold); font-weight:600; letter-spacing:.03em;}

.single-content{font-size:16px; line-height:1.85; color:var(--fg-dim);}
.single-content > * + *{margin-top:22px;}
.single-content h2,.single-content h3,.single-content h4{color:var(--fg); font-family:'Poppins',sans-serif;
  font-weight:600; line-height:1.3; margin-top:44px;}
.single-content h2{font-size:26px;}
.single-content h3{font-size:21px;}
.single-content h4{font-size:17px;}
.single-content a{color:var(--gold); border-bottom:1px solid var(--line);}
.single-content a:hover{border-color:var(--gold);}
.single-content strong,.single-content b{color:var(--fg); font-weight:600;}
/* The global reset strips ul bullets for the nav; article prose wants them back. */
.single-content ul{list-style:disc; padding-left:20px;}
.single-content ol{list-style:decimal; padding-left:24px;}
/* Lists sit closer to the line that introduces them than two paragraphs do. */
.single-content > * + ul,.single-content > * + ol{margin-top:14px;}
/* Items carry no spacing of their own — the line-height alone separates them. */
.single-content li{margin:0; padding:0;}
.single-content li > p{margin:0;}
.single-content li > ul,.single-content li > ol{margin-top:0; padding-left:18px;}
.single-content ul li::marker,.single-content ol li::marker{color:var(--gold);}
.single-content img{max-width:100%; height:auto; border-radius:2px;}
.single-content figure{margin:34px 0;}
.single-content figcaption{font-size:12px; color:var(--fg-dim); margin-top:10px; text-align:center;}
.single-content blockquote{border-left:2px solid var(--gold); padding:6px 0 6px 22px; color:var(--fg); font-size:18px;}
.single-content table{width:100%; border-collapse:collapse; font-size:14px;}
.single-content th,.single-content td{border:1px solid var(--line); padding:10px 14px; text-align:left;}
.single-pagelinks{margin-top:34px; font-size:13px; color:var(--fg-dim);}

.single-cta{margin-top:72px; padding:44px 40px; border:1px solid var(--card-border); background:var(--card); border-radius:2px;}
.single-cta h2{font-size:24px; font-weight:600; margin-bottom:12px;}
.single-cta p{font-size:14px; color:var(--fg-dim); line-height:1.7; max-width:560px;}
.single-cta-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}

.single-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:60px;}
@media(max-width:640px){.single-nav{grid-template-columns:1fr;}}
.single-nav-item{background:var(--bg-2); padding:24px 26px; display:block;}
html.light .single-nav-item{background:var(--bg);}
.single-nav-item.is-next{text-align:right;}
.single-nav-item span{display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:8px;}
.single-nav-item b{font-size:15px; font-weight:600; line-height:1.4; color:var(--fg);}
.single-nav-item:hover b{color:var(--gold);}

/* ============================================================
   21. WORDPRESS CORE CLASSES
   ============================================================ */
.alignleft{float:left; margin:0 1.5em 1em 0;}
.alignright{float:right; margin:0 0 1em 1.5em;}
.aligncenter{display:block; margin-left:auto; margin-right:auto;}
.alignwide{max-width:1400px;}
.alignfull{max-width:100%;}
.wp-caption{max-width:100%;}
.wp-caption-text, .wp-block-image figcaption{font-size:12px; color:var(--fg-dim); margin-top:8px;}
.sticky, .bypostauthor{}
.gallery-caption{font-size:12px; color:var(--fg-dim);}

/* ============================================================
   22. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html,.sc-track{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
  .reveal{opacity:1; transform:none;}
  .g-item{opacity:1; transform:none;}
}

/* ============================================================
   23. PRINT
   ============================================================ */
@media print{
  header.site-header,.wa-float,.wa-bubble,.overlay,.lightbox,.toast-panel,.scroll-cue{display:none!important;}
  body{background:#fff; color:#000;}
}