/*
Theme Name: M.A Chemicals
Theme URI: https://machemicals.example
Author: M.A Chemicals
Author URI: https://machemicals.example
Description: Custom theme for M.A Chemicals — premium adhesive manufacturer, Lahore, Pakistan. Est. 1985.
Version: 1.9
Text Domain: ma-chemicals
*/

:root{
  --blue-deep:#0F1A5C;
  --blue-mid:#1E3FBF;
  --blue-bright:#3564EE;
  --red-king:#E12E24;
  --gold:#F5A623;
  --silver:#D8DEE9;
  --paper:#F5F6FA;
  --ink:#0B1233;
  --ink-soft:#4A5170;
  --r: 4px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Work Sans', sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Oswald', sans-serif; letter-spacing:0.01em; color:var(--blue-deep);}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
.urdu{font-family:'Noto Nastaliq Urdu', serif; direction:rtl;}
.kicker{font-weight:600; font-size:13px; color:var(--red-king); display:block; margin-bottom:8px;}
.section{padding:80px 0;}
.section-head{max-width:60ch; margin-bottom:44px;}
.section-head h2{font-size:32px; font-weight:600;}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:16px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- header ---------- */
header{background:var(--blue-deep); position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(255,255,255,0.06);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 32px; max-width:1200px; margin:0 auto;}
.logo{font-family:'Oswald', sans-serif; font-weight:700; font-size:21px; color:#fff; display:flex; align-items:baseline; gap:8px;}
.logo span{color:var(--red-king);}
.logo small{font-family:'Work Sans', sans-serif; font-weight:400; font-size:11px; letter-spacing:0.06em; color:var(--silver);}
.navlinks{display:flex; gap:30px; font-size:14.5px; font-weight:500; list-style:none;}
.navlinks a{position:relative; padding:6px 0; color:#DCE2F5;}
.navlinks a:hover{color:#fff;}
.navlinks a.hot, .navlinks li.hot a{color:var(--gold);}
.navlinks a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold); transition:width .25s ease;}
.navlinks a:hover::after{width:100%;}
.navcta{background:var(--red-king); color:#fff; padding:10px 20px; font-weight:600; font-size:14px; border-radius:var(--r); white-space:nowrap;}

/* ---------- trust bar ---------- */
.trustbar{background:#fff; border-bottom:1px solid #E7E9F2;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#E7E9F2;}
.trust-cell{background:#fff; padding:26px 24px; display:flex; align-items:center; gap:14px;}
.trust-icon{width:42px; height:42px; border-radius:50%; background:var(--blue-deep); flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.trust-icon svg{width:20px; height:20px; stroke:#fff; fill:none;}
.trust-cell .t1{font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; color:var(--blue-deep);}
.trust-cell .t2{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}

/* ---------- HERO: truck crossing + product pop ---------- */
.hero{position:relative; background:linear-gradient(165deg, var(--blue-deep) 0%, var(--blue-mid) 60%, var(--blue-bright) 100%); color:#fff; overflow:hidden; padding:72px 0 0;}
.hero .wrap{position:relative; z-index:3;}
.hero-copy{text-align:center; max-width:60ch; margin:0 auto;}
.hero h1{color:#fff; font-size:48px; line-height:1.08; font-weight:700;}
.hero h1 em{font-style:normal; color:var(--red-king); -webkit-text-stroke:1px rgba(255,255,255,0.3);}
.hero p.lede{margin-top:18px; font-size:16.5px; color:#D7DEFA;}
.hero .cta-row{margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn-primary{background:var(--red-king); color:#fff; padding:13px 26px; font-weight:600; font-size:14.5px; border-radius:var(--r); border:1px solid var(--red-king); display:inline-block;}
.btn-ghost{padding:13px 26px; font-weight:600; font-size:14.5px; border-radius:var(--r); border:1px solid rgba(255,255,255,0.4); color:#fff; display:inline-block;}

.road-stage{position:relative; height:400px; margin-top:56px;}
.road{position:absolute; left:0; right:0; bottom:64px; height:3px; background:repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 22px, transparent 22px 40px);}
.road-base{position:absolute; left:0; right:0; bottom:0; height:64px; background:rgba(0,0,0,0.18);}

.truck{position:absolute; bottom:56px; left:-46%; width:420px; animation: drive 4s cubic-bezier(.4,.05,.3,1) forwards; filter:drop-shadow(0 18px 20px rgba(0,0,0,0.4));}
.truck img{width:100%; display:block;}
@keyframes drive{
  0%{ left:-46%; }
  55%{ left:32%; }
  100%{ left:112%; }
}
.product-pop{
  position:absolute; bottom:70px; width:130px; height:180px;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transform:translateY(14px) scale(.6); animation: pop .55s ease forwards;
}
.product-pop img{
  max-width:100%; max-height:180px; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,0.4));
}
.product-pop.placeholder{
  background:rgba(255,255,255,0.08); border:1px dashed rgba(255,255,255,0.4); border-radius:var(--r);
  align-items:center; color:#D7DEFA; font-size:11px; text-align:center;
}
@keyframes pop{
  0%{opacity:0; transform:translateY(14px) scale(.6);}
  70%{opacity:1; transform:translateY(-4px) scale(1.06);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.asset-note{position:absolute; top:14px; right:14px; background:rgba(0,0,0,0.35); color:#D7DEFA; font-size:11px; padding:6px 10px; border-radius:var(--r); z-index:4;}

@media (prefers-reduced-motion: reduce){
  .truck{display:none;}
  .product-pop{animation:none; opacity:1; transform:none;}
}

/* ---------- about ---------- */
.about .wrap{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center;}
.about-photo{aspect-ratio:4/3; border-radius:var(--r); background:repeating-linear-gradient(135deg,#E4E8F3,#E4E8F3 14px,#DAE0EF 14px,#DAE0EF 28px); border:1px dashed #B9C1DA; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px; text-align:center; padding:20px; overflow:hidden;}
.about-photo img{width:100%; height:100%; object-fit:cover;}
.timeline{display:flex; gap:0; margin-top:34px; border-top:2px solid #E1E5F0; padding-top:0;}
.tl-item{flex:1; padding-top:20px; position:relative; padding-right:16px;}
.tl-item::before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--red-king); border:3px solid #fff; box-shadow:0 0 0 2px var(--red-king);}
.tl-item .yr{font-family:'Oswald',sans-serif; font-weight:700; font-size:20px; color:var(--blue-deep);}
.tl-item .cap{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}

/* ---------- products ---------- */
.products{background:#fff;}
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.prod-card{border:1px solid #E7E9F2; border-radius:var(--r); overflow:hidden; background:var(--paper); transition:box-shadow .2s ease, transform .2s ease;}
.prod-card:hover{box-shadow:0 16px 28px rgba(15,26,92,0.12); transform:translateY(-3px);}
.prod-photo{aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; padding:14px;}
.prod-photo img{max-height:100%; object-fit:contain;}
.prod-card.placeholder .prod-photo{background:repeating-linear-gradient(135deg,#E4E8F3,#E4E8F3 12px,#DAE0EF 12px,#DAE0EF 24px);}
.prod-info{padding:16px;}
.prod-info .name{font-family:'Oswald',sans-serif; font-weight:600; font-size:14.5px; color:var(--blue-deep); text-transform:uppercase;}
.prod-info .tag{font-size:12.5px; color:var(--ink-soft); margin-top:4px; min-height:32px;}
.prod-info .more{font-size:12.5px; font-weight:600; color:var(--red-king); margin-top:10px; display:inline-block;}

/* ---------- why choose us ---------- */
.why{background:var(--paper);}
.why-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.why-cell{background:#fff; border:1px solid #E7E9F2; border-radius:var(--r); padding:22px 16px; text-align:center;}
.why-icon{width:44px; height:44px; border-radius:50%; background:var(--blue-deep); margin:0 auto 12px; display:flex; align-items:center; justify-content:center;}
.why-icon svg{width:20px; height:20px; stroke:#fff; fill:none;}
.why-cell .cap{font-size:13px; color:var(--ink-soft); font-weight:500;}

/* ---------- lucky draw ---------- */
.luckydraw{background:linear-gradient(100deg, var(--blue-deep) 0%, #16247A 100%); position:relative; overflow:hidden;}
.luckydraw .wrap{padding:44px 32px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; z-index:2;}
.ld-badge{background:var(--gold); color:var(--blue-deep); font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; padding:8px 16px; border-radius:var(--r); display:inline-block; margin-bottom:10px; transform:rotate(-3deg);}
.luckydraw h3{color:#fff; font-size:22px; margin-top:4px;}
.luckydraw .urdu{color:var(--gold); font-size:20px; margin-top:6px;}
.luckydraw .btn-primary{background:var(--gold); border-color:var(--gold); color:var(--blue-deep);}
.ld-stripe{position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:rgba(245,166,35,0.14);}

/* ---------- factory stats ---------- */
.factory{background:#fff;}
.factory .wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;}
.factory-photo{aspect-ratio:16/10; border-radius:var(--r); background:repeating-linear-gradient(135deg,#E4E8F3,#E4E8F3 14px,#DAE0EF 14px,#DAE0EF 28px); border:1px dashed #B9C1DA; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px; overflow:hidden;}
.factory-photo img{width:100%; height:100%; object-fit:cover;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.stat-cell{background:var(--blue-deep); color:#fff; border-radius:var(--r); padding:24px; text-align:center;}
.stat-cell .num{font-family:'Oswald',sans-serif; font-weight:700; font-size:30px; color:var(--gold);}
.stat-cell .cap{font-size:12.5px; color:#C7CFEE; margin-top:4px;}

/* ---------- dealer cta ---------- */
.dealer{background:linear-gradient(100deg, var(--red-king) 0%, #C21F17 100%); color:#fff;}
.dealer .wrap{display:flex; align-items:center; justify-content:space-between; gap:36px; padding:44px 32px; flex-wrap:wrap;}
.dealer-photo{width:180px; height:120px; border-radius:var(--r); background:rgba(255,255,255,0.15); flex:0 0 auto; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,0.3);}
.dealer-photo img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.dealer-photo img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.dealer h3{color:#fff; font-size:20px;}
.dealer .urdu{color:#FFD9D6; font-size:17px; margin-top:6px;}
.dealer .btn-primary{background:#fff; border-color:#fff; color:var(--red-king);}

/* ---------- footer ---------- */
footer{background:#080D33; color:#AEB6D9; padding:56px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.08);}
footer h3{color:#fff; font-size:14.5px; margin-bottom:14px; font-weight:600;}
footer .logo{color:#fff; margin-bottom:12px;}
footer p{font-size:13.5px; max-width:34ch;}
footer ul{list-style:none;}
footer li{margin-bottom:9px; font-size:13.5px;}
footer li a:hover{color:#fff;}
.bottom-row{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

@media(max-width:960px){
  .about .wrap, .factory .wrap{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(3,1fr);}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .navcta{display:none;}
  .hero h1{font-size:34px;}
  .road-stage{transform:scale(0.72); transform-origin:top center; height:190px;}
}

/* =========================================================
   ADDITIONS — utility bar, dropdown nav, page banner,
   product detail, schemes, events, contact, scroll reveal
   ========================================================= */

.utilitybar{background:#080D33; color:#AEB6D9; font-size:12.5px;}
.utilitybar .wrap{display:flex; justify-content:flex-end; gap:26px; padding:8px 32px;}
.utilitybar a{color:#AEB6D9; display:inline-flex; align-items:center; gap:6px;}
.utilitybar a:hover{color:#fff;}
.utilitybar svg{width:13px; height:13px; stroke:currentColor; fill:none;}

.logo-mark{height:84px; width:auto; display:block;}

/* dropdown submenu */
.navlinks{position:relative;}
.navlinks li{position:relative; list-style:none; display:inline-block;}
.navlinks ul.sub-menu{
  list-style:none; position:absolute; top:100%; left:0; margin-top:10px;
  background:#fff; min-width:230px; border-radius:var(--r); box-shadow:0 18px 34px rgba(0,0,0,0.18);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:all .18s ease; z-index:60; padding:8px 0;
}
.navlinks li:hover > ul.sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.navlinks ul.sub-menu li{display:block;}
.navlinks ul.sub-menu a{color:var(--ink); padding:10px 18px; display:block; font-size:14px;}
.navlinks ul.sub-menu a:hover{background:var(--paper); color:var(--red-king);}
.navlinks ul.sub-menu a::after{display:none;}
.navlinks li.menu-item-has-children > a::after{content:"▾"; display:inline-block; margin-left:5px; font-size:10px; position:static; width:auto; height:auto; background:none;}

/* page banner (used on all non-home pages) */
.page-banner{
  background:linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-mid) 70%, var(--blue-bright) 100%);
  color:#fff; padding:64px 0 54px; position:relative; overflow:hidden;
}
.page-banner .wrap{position:relative; z-index:2;}
.page-banner h1{color:#fff; font-size:38px;}
.page-banner .crumb{font-size:13px; color:#B9C4EF; margin-bottom:10px;}
.page-banner .crumb a{color:#B9C4EF;}
.page-banner .crumb a:hover{color:#fff;}
.page-banner p{color:#D7DEFA; margin-top:10px; max-width:56ch;}

/* product detail page */
.product-hero{background:#fff;}
.product-hero .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; padding:72px 32px;}
.product-hero .stage{
  background:linear-gradient(155deg, var(--blue-deep), var(--blue-mid));
  border-radius:var(--r); padding:40px; display:flex; align-items:center; justify-content:center; min-height:420px;
}
.product-hero .stage img{max-height:420px;}
.product-hero .name{font-size:32px;}
.product-hero .tagline{color:var(--red-king); font-weight:600; font-size:15px; margin-top:6px;}
.feature-list{list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:14px;}
.feature-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft);}
.feature-list li .tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--red-king);
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.feature-list li .tick svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:3;}
.related-products{background:var(--paper); padding:64px 0;}

/* schemes */
.scheme-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.scheme-card{
  border-radius:var(--r); overflow:hidden; position:relative; min-height:280px;
  display:flex; align-items:flex-end; padding:30px; color:#fff;
  background:linear-gradient(150deg, var(--blue-deep), var(--blue-bright));
}
.scheme-card.gold{background:linear-gradient(150deg, #C21F17, var(--red-king));}
.scheme-card h3{color:#fff; font-size:22px;}
.scheme-card p{color:#E4E9FF; font-size:14px; margin-top:8px; max-width:34ch;}
.scheme-card .go{margin-top:16px; display:inline-block; font-weight:600; font-size:13px; color:var(--gold);}
.scheme-detail-banner{
  background:linear-gradient(100deg, var(--blue-deep), #16247A); color:#fff; padding:70px 0; text-align:center;
}
.scheme-detail-banner h1{color:#fff;}
.scheme-terms{background:#fff; padding:60px 0;}
.scheme-terms ul{margin-top:14px; padding-left:20px; color:var(--ink-soft); font-size:15px; display:flex; flex-direction:column; gap:10px;}

/* events */
.events-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.event-card{background:#fff; border:1px solid #E7E9F2; border-radius:var(--r); overflow:hidden;}
.event-card .date{background:var(--blue-deep); color:#fff; padding:14px 18px; font-family:'Oswald',sans-serif; font-weight:600;}
.event-card .body{padding:18px;}
.event-card .body h4{font-size:16px; color:var(--blue-deep);}
.event-card .body p{font-size:13.5px; color:var(--ink-soft); margin-top:6px;}

/* contact page */
.contact-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; padding:72px 0;}
.contact-info{display:flex; flex-direction:column; gap:22px;}
.contact-info .row{display:flex; gap:14px; align-items:flex-start;}
.contact-info .icon{
  width:42px; height:42px; border-radius:50%; background:var(--blue-deep); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.contact-info .icon svg{width:19px; height:19px; stroke:#fff; fill:none;}
.contact-info .label{font-family:'Oswald',sans-serif; font-weight:600; font-size:14.5px; color:var(--blue-deep);}
.contact-info .val{font-size:14px; color:var(--ink-soft); margin-top:3px;}
.contact-map{border-radius:var(--r); overflow:hidden; border:1px solid #E7E9F2; margin-top:8px;}
.contact-map iframe{width:100%; height:260px; border:0; display:block;}

.contact-form{background:#fff; border:1px solid #E7E9F2; border-radius:var(--r); padding:34px;}
.contact-form .field{margin-bottom:18px;}
.contact-form label{display:block; font-size:13px; font-weight:600; color:var(--blue-deep); margin-bottom:6px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid #DADFEC; border-radius:var(--r); font-family:inherit; font-size:14.5px; background:var(--paper);
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--blue-bright); outline-offset:1px;}
.contact-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-form button{
  background:var(--red-king); color:#fff; border:none; padding:14px 30px; font-weight:600; font-size:14.5px;
  border-radius:var(--r); cursor:pointer;
}
.form-notice{padding:14px 16px; border-radius:var(--r); margin-bottom:20px; font-size:14px;}
.form-notice.success{background:#E4F7EA; color:#1C7A3E; border:1px solid #BEE8CB;}
.form-notice.error{background:#FDEBEA; color:var(--red-king); border:1px solid #F6C4C0;}

/* ---------- scroll reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.94); transition:opacity .6s ease, transform .6s ease;}
.reveal-scale.in-view{opacity:1; transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{opacity:1; transform:none; transition:none;}
}

@media(max-width:960px){
  .product-hero .wrap, .contact-wrap{grid-template-columns:1fr;}
  .scheme-grid{grid-template-columns:1fr;}
  .events-grid{grid-template-columns:1fr;}
  .contact-form .row2{grid-template-columns:1fr;}
  .utilitybar .wrap{justify-content:center; flex-wrap:wrap; gap:14px;}
}

/* ---------- motion-blur "whoosh" product transition ----------
   Each product card animates independently, one at a time, the
   moment IT scrolls into view — not all six firing together. */
#motion-products .prod-card{
  opacity:0; transform:translateX(-110px) scale(1.04); filter:blur(0px);
}
#motion-products .prod-card.motion-in{
  animation: whooshIn 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes whooshIn{
  0%{opacity:0; transform:translateX(-110px) scale(1.04); filter:blur(12px);}
  55%{opacity:1; filter:blur(3px);}
  100%{opacity:1; transform:translateX(0) scale(1); filter:blur(0);}
}
@media (prefers-reduced-motion: reduce){
  #motion-products .prod-card{opacity:1; transform:none; filter:none; animation:none;}
}

/* ---------- gift scheme photo grid ---------- */
.gift-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:10px;
}
.gift-grid .g-item{
  border-radius:var(--r); overflow:hidden; aspect-ratio:1/1; background:var(--paper);
}
.gift-grid .g-item img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;
}
.gift-grid .g-item:hover img{transform:scale(1.08);}
@media(max-width:960px){
  .gift-grid{grid-template-columns:repeat(3, 1fr); gap:8px;}
}

/* ---------- mobile hamburger menu ---------- */
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:32px; background:none; border:none; cursor:pointer; padding:0;
}
.hamburger span{display:block; width:100%; height:2.5px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

@media(max-width:960px){
  .hamburger{display:flex;}
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--blue-deep); flex-direction:column; gap:0;
    box-shadow:0 18px 30px rgba(0,0,0,0.25); max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .navlinks.mobile-open{display:flex; max-height:80vh; overflow-y:auto;}
  .navlinks li{width:100%; display:block;}
  .navlinks a{display:block; padding:14px 24px; border-bottom:1px solid rgba(255,255,255,0.08);}
  .navlinks a::after{display:none;}
  .navlinks ul.sub-menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    background:rgba(0,0,0,0.18); border-radius:0; margin-top:0; padding:0;
    display:none;
  }
  .navlinks li.menu-item-has-children.mobile-expanded > ul.sub-menu{display:block;}
  .navlinks ul.sub-menu a{padding-left:40px; color:#DCE2F5;}
  header{position:relative;}
  .nav{flex-wrap:wrap;}
}

/* prevent transform-based animations (motion-blur, truck) from creating
   an unwanted horizontal scrollbar on narrow viewports */
html, body{overflow-x:hidden;}

/* ---------- Glue Experience game ---------- */
.glue-game{
  display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:start;
}
.glue-board{
  position:relative; height:520px; border-radius:var(--r);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, #E7DCC8, #D9C9A8);
  border:2px solid #C9B78C; overflow:hidden; touch-action:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.08);
}
.glue-board .guide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0.16; pointer-events:none;
}
.glue-board .guide svg{width:70%; height:70%;}
.glue-hint{
  position:absolute; top:12px; left:12px; right:12px; text-align:center;
  font-size:12.5px; color:#7A6644; background:rgba(255,255,255,0.75);
  border-radius:var(--r); padding:8px 12px; pointer-events:none; z-index:5;
}
.wood-piece{
  position:absolute; border-radius:5px; cursor:grab;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #C68642, #9C6A34);
  border:1px solid #7A4E20;
  box-shadow:0 6px 10px rgba(0,0,0,0.25);
  transition:box-shadow .2s ease;
  user-select:none; -webkit-user-select:none; touch-action:none;
}
.wood-piece.dragging{cursor:grabbing; box-shadow:0 14px 22px rgba(0,0,0,0.35); z-index:20;}
.wood-piece.glued{outline:2px solid var(--gold); outline-offset:2px;}
.wood-piece.shake{animation:pieceShake .35s ease;}
@keyframes pieceShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}

.glue-toast{
  position:absolute; top:50px; left:50%; transform:translateX(-50%) translateY(-10px);
  background:var(--blue-deep); color:#fff; font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:20px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:30; white-space:nowrap;
}
.glue-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.glue-side{display:flex; flex-direction:column; gap:18px;}
.glue-pouch-wrap{
  text-align:center; background:#fff; border:1px solid #E7E9F2; border-radius:var(--r);
  padding:18px; position:relative;
}
.glue-pouch-wrap img{
  width:96px; margin:0 auto; cursor:pointer; transition:transform .2s ease, filter .2s ease;
  touch-action:none;
}
.glue-pouch-wrap img.active{transform:rotate(-8deg) scale(1.08); filter:drop-shadow(0 0 10px rgba(245,166,35,0.7));}
.glue-pouch-wrap .label{font-family:'Oswald',sans-serif; font-weight:600; font-size:13.5px; color:var(--blue-deep); margin-top:10px;}
.glue-pouch-wrap .status{font-size:12px; color:var(--ink-soft); margin-top:4px; min-height:16px;}

.wood-tray{background:#fff; border:1px solid #E7E9F2; border-radius:var(--r); padding:16px;}
.wood-tray h4{font-family:'Oswald',sans-serif; font-size:13.5px; color:var(--blue-deep); margin-bottom:12px; text-transform:uppercase;}
.tray-item{
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r);
  cursor:grab; margin-bottom:8px; touch-action:none;
}
.tray-item:hover{background:var(--paper);}
.tray-item .swatch{
  border-radius:4px; flex:0 0 auto;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 9px), linear-gradient(180deg, #C68642, #9C6A34);
  border:1px solid #7A4E20;
}
.tray-item .tname{font-size:12.5px; color:var(--ink-soft); font-weight:500;}

.guide-buttons{display:flex; flex-wrap:wrap; gap:8px;}
.guide-buttons button{
  font-size:12px; font-weight:600; padding:7px 12px; border-radius:20px;
  border:1px solid #DADFEC; background:#fff; color:var(--blue-deep); cursor:pointer;
}
.guide-buttons button.active{background:var(--blue-deep); color:#fff; border-color:var(--blue-deep);}

.glue-reset{
  font-size:13px; font-weight:600; padding:10px; border-radius:var(--r); text-align:center;
  border:1px solid #DADFEC; background:#fff; color:var(--red-king); cursor:pointer;
}

@media(max-width:900px){
  .glue-game{grid-template-columns:1fr;}
  .glue-board{height:420px;}
}

/* ---------- Glue Experience v2: rotate/resize + glue application FX ---------- */
.wood-piece.selected{outline:2px solid var(--blue-bright); outline-offset:3px;}

.glue-cursor{
  position:fixed; width:34px; height:34px; pointer-events:none; z-index:999;
  transform:translate(-50%,-70%); opacity:0; transition:opacity .15s ease;
}
.glue-cursor.show{opacity:1;}
.glue-cursor img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.35));}
.glue-cursor svg{width:100%; height:100%; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.35));}

.glue-drip{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #EDEFF5 60%, #D8DEE9 100%);
  pointer-events:none; z-index:15;
  animation:dripFade .8s ease forwards;
}
@keyframes dripFade{
  0%{opacity:0.95; transform:scale(0.6);}
  30%{opacity:0.85; transform:scale(1);}
  100%{opacity:0; transform:scale(1.3);}
}

.piece-controls{background:#fff; border:1px solid #E7E9F2; border-radius:var(--r); padding:16px;}
.piece-controls h4{font-family:'Oswald',sans-serif; font-size:13.5px; color:var(--blue-deep); margin-bottom:10px; text-transform:uppercase;}
.piece-controls .empty-msg{font-size:12.5px; color:var(--ink-soft);}
.piece-controls .ctrl-row{display:none; flex-direction:column; gap:10px;}
.piece-controls.has-selection .ctrl-row{display:flex;}
.piece-controls.has-selection .empty-msg{display:none;}
.ctrl-group{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ctrl-group .ctrl-label{font-size:12px; color:var(--ink-soft); font-weight:600; flex:0 0 auto;}
.ctrl-btns{display:flex; gap:6px;}
.ctrl-btns button{
  width:34px; height:34px; border-radius:50%; border:1px solid #DADFEC; background:var(--paper);
  color:var(--blue-deep); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ctrl-btns button:hover{background:#E4E9FF;}
.piece-remove{
  margin-top:4px; font-size:12.5px; font-weight:600; color:var(--red-king);
  background:none; border:none; cursor:pointer; text-align:left; padding:0;
}

/* ---------- Marco Vich scheme poster gallery (4:5 portrait posters) ---------- */
.poster-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;}
.poster-grid .g-item{border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:var(--paper);}
.poster-grid .g-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.poster-grid .g-item:hover img{transform:scale(1.06);}
@media(max-width:960px){ .poster-grid{grid-template-columns:repeat(2, 1fr); gap:8px;} }

/* ---------- Events & Activity: collage cards ---------- */
.event-list{display:flex; flex-direction:column; gap:40px;}
.event-feature{background:#fff; border:1px solid #E7E9F2; border-radius:var(--r); overflow:hidden; box-shadow:0 14px 30px rgba(15,26,92,0.07);}
.event-collage{display:grid; gap:4px; height:380px; background:#E7E9F2;}
.event-collage.c3{grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr;}
.event-collage.c5{grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr;}
.event-collage .ec{overflow:hidden; position:relative; display:block;}
.event-collage .ec:first-child{grid-row:span 2;}
.event-collage .ec img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
.event-collage .ec:hover img{transform:scale(1.05);}
.event-collage .more{
  position:absolute; inset:0; background:rgba(15,26,92,0.62); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:28px; font-weight:600;
}
.event-body{padding:26px 30px 32px;}
.event-date{
  display:inline-block; background:var(--red-king); color:#fff; font-family:'Oswald',sans-serif;
  font-weight:600; font-size:13px; letter-spacing:.02em; padding:6px 12px; border-radius:var(--r); margin-bottom:12px;
}
.event-body h3{font-size:26px; font-weight:600;}
.event-body p{color:var(--ink-soft); margin-top:10px; font-size:15px; max-width:72ch;}
.event-facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.event-facts span{background:var(--paper); border:1px solid #E1E5F0; color:var(--blue-deep); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px;}
.event-body .btn-primary{margin-top:20px; background:var(--blue-deep); border-color:var(--blue-deep);}
@media(max-width:960px){
  .event-collage{height:250px;}
  .event-body{padding:20px 20px 26px;}
  .event-body h3{font-size:22px;}
  .event-collage .more{font-size:20px;}
}