/*
Theme Name: Najmat Al Mas Luxury
Theme URI: https://najmatalmascurtains.com
Author: Najmat Al Mas
Description: White & Gold luxury theme for Najmat Al Mas Curtains — Abu Dhabi's premier curtain specialists.
Version: 1.1.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: nam-luxury
Tags: luxury, gold, white, curtains, interior, portfolio
*/

/* ============================
   CSS CUSTOM PROPERTIES
   ============================ */
:root {
  --gold:           #C9A84C;
  --gold-light:     #E2C060;
  --gold-dark:      #8B6914;
  --gold-pale:      #F9F3E3;
  --gold-gradient:  linear-gradient(135deg, #8B6914 0%, #C9A84C 40%, #E8C96B 60%, #C9A84C 80%, #8B6914 100%);
  --gold-gradient-h:linear-gradient(90deg,  #8B6914 0%, #C9A84C 45%, #E8C96B 60%, #C9A84C 80%, #8B6914 100%);
  --white:          #FFFFFF;
  --off-white:      #FAF8F3;
  --cream:          #F5F0E8;
  --cream-deep:     #EDE5D0;
  --dark:           #1A1710;
  --dark-mid:       #2C2820;
  --text-dark:      #1A1710;
  --text-mid:       #4A4030;
  --text-light:     #8C7D5C;
  --border-gold:    rgba(201,168,76,0.30);
  --border-subtle:  rgba(201,168,76,0.12);
  --shadow-gold:    0 8px 32px rgba(201,168,76,0.14);
  --shadow-card:    0 4px 24px rgba(26,23,16,0.07);
  --shadow-hover:   0 16px 48px rgba(26,23,16,0.13);
  --font-display:   'Cormorant Garamond','Times New Roman',Georgia,serif;
  --font-heading:   'Playfair Display',Georgia,serif;
  --font-body:      'Lato','Helvetica Neue',Arial,sans-serif;
  --font-accent:    'Cinzel',serif;
  --space-xs: .5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem; --space-xl:6rem;
  --radius:4px; --radius-lg:14px;
  --ease: all .38s cubic-bezier(.25,.46,.45,.94);
}

/* ============================
   RESET
   ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--text-dark);background:var(--white);line-height:1.75;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-dark);text-decoration:none;transition:var(--ease)}
a:hover{color:var(--gold)}
ul,ol{list-style:none}
p{margin-bottom:1.2rem;color:var(--text-mid);line-height:1.85}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-dark);line-height:1.2;font-weight:600}

/* ============================
   TYPOGRAPHY
   ============================ */
.section-tag{font-family:var(--font-accent);font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.9rem}
.section-title{font-family:var(--font-display);font-size:clamp(1.9rem,4vw,3.4rem);color:var(--text-dark);font-weight:400;font-style:italic;line-height:1.15}
.section-title strong{font-style:normal;font-weight:700;color:var(--gold-dark)}
.section-title.on-dark{color:var(--white)}
.section-title.on-dark strong{color:var(--gold-light)}
.section-sub{font-size:1rem;color:var(--text-light);max-width:580px;line-height:1.9;margin-top:.8rem}
.gold-bar{width:56px;height:2px;background:var(--gold-gradient-h);margin:1.4rem 0}
.gold-bar.c{margin-left:auto;margin-right:auto}

/* ============================
   LAYOUT
   ============================ */
.wrap{max-width:1280px;margin:0 auto;padding:0 2rem}
.wrap-sm{max-width:900px;margin:0 auto;padding:0 2rem}
.sec{padding:var(--space-xl) 0}
.sec-lg{padding:calc(var(--space-xl)*1.4) 0}
.text-c{text-align:center}
.sec-head{margin-bottom:3.5rem}
.sec-head.c{text-align:center}
.sec-head.c .gold-bar{margin-left:auto;margin-right:auto}
.sec-head.c .section-sub{margin-left:auto;margin-right:auto}

/* ============================
   BUTTONS
   ============================ */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.88rem 2.2rem;font-family:var(--font-accent);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;border-radius:var(--radius);border:none;cursor:pointer;transition:var(--ease);white-space:nowrap}
.btn i{font-size:.85em}
.btn-gold{background:var(--gold-gradient);color:var(--dark);box-shadow:0 4px 18px rgba(201,168,76,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,168,76,.42);color:var(--dark)}
.btn-outline{background:transparent;color:var(--gold-dark);border:1.5px solid var(--gold)}
.btn-outline:hover{background:var(--gold-gradient);color:var(--dark)}
.btn-dark{background:var(--dark);color:var(--gold-light);border:1.5px solid var(--dark)}
.btn-dark:hover{background:transparent;color:var(--dark);border-color:var(--dark)}
.btn-outline-w{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.6)}
.btn-outline-w:hover{background:var(--white);color:var(--dark)}
.btn-lg{padding:1rem 2.8rem;font-size:.75rem}
.btn-sm{padding:.5rem 1.3rem;font-size:.65rem}

/* ============================
   ANIMATIONS
   ============================ */
.f-up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.f-in{opacity:0;transition:opacity .7s ease}
.f-up.vis,.f-in.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ============================
   TOP BAR
   ============================ */
.topbar{background:var(--dark);padding:.5rem 0;border-bottom:1px solid rgba(201,168,76,.18)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar-contact{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.topbar-contact a{color:rgba(255,255,255,.6);font-family:var(--font-accent);font-size:.63rem;letter-spacing:.1em;display:flex;align-items:center;gap:.4rem}
.topbar-contact a:hover{color:var(--gold)}
.topbar-contact a i{color:var(--gold);font-size:.75rem}
.topbar-social{display:flex;gap:.8rem}
.topbar-social a{color:rgba(255,255,255,.45);font-size:.8rem}
.topbar-social a:hover{color:var(--gold)}

/* ============================
   SITE HEADER
   ============================ */
.site-header{position:fixed;left:0;right:0;z-index:1000;transition:var(--ease);padding:1rem 0;width:100%}

/* On front page before scroll — white bg already visible since hero is white */
.site-header.transparent{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}

/* Scrolled — solid white */
.site-header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);padding:.75rem 0;box-shadow:0 2px 24px rgba(26,23,16,.09);border-bottom:1px solid var(--border-subtle)}

.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}

/* Logo */
.site-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.site-logo-img{height:58px;width:auto;transition:var(--ease);object-fit:contain}
.site-header.scrolled .site-logo-img{height:42px}
.logo-name-text{font-family:var(--font-accent);font-size:.85rem;letter-spacing:.12em;color:var(--text-dark);transition:var(--ease);display:none} /* hidden when logo loads */

/* Nav — dark text on white header */
.main-nav ul{display:flex;align-items:center;gap:.3rem}
.main-nav a{font-family:var(--font-accent);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dark);padding:.5rem .9rem;position:relative;display:block}
.main-nav a::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--gold-gradient-h);transition:all .3s ease}
.main-nav a:hover::after,.main-nav li.current-menu-item a::after{left:.9rem;right:.9rem}
.main-nav a:hover{color:var(--gold-dark)}
.nav-cta-btn{background:var(--gold-gradient)!important;color:var(--dark)!important;padding:.5rem 1.2rem!important;border-radius:var(--radius)!important;white-space:nowrap}
.nav-cta-btn::after{display:none!important}
.nav-cta-btn:hover{opacity:.9;transform:translateY(-1px);color:var(--dark)!important}

/* Hamburger */
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:none;border:1.5px solid var(--border-gold);border-radius:var(--radius);cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:20px;height:1.5px;background:var(--text-dark);border-radius:2px;transition:var(--ease)}

/* ============================
   HERO — BOXED CARD LAYOUT
   ============================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--off-white);
  padding: 0; margin: 0;
}

/* ── Slideshow ── */
.hero-slideshow { position:absolute; inset:0; z-index:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.05);
  will-change:opacity,transform;
  transition:opacity 1.4s ease;
}
.hero-slide.active {
  opacity:1; transform:scale(1); z-index:1;
  transition:opacity 1.4s ease, transform 9s ease;
}
.hero-slide.leaving {
  opacity:0; z-index:2; transform:scale(1.02);
  transition:opacity 1.4s ease, transform 1.4s ease;
}
.hero-overlay {
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.20) 35%,
    rgba(0,0,0,.45) 72%,
    rgba(0,0,0,1)   100%);
}
.hero-shimmer {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(ellipse at 80% 20%, rgba(201,168,76,.06) 0%, transparent 55%);
}
.hero-deco {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  z-index:2; pointer-events:none; opacity:.55;
}
@media(max-width:900px){ .hero-deco{display:none;} }

/* ── Body wrapper ── */
.hero-body {
  position:relative; z-index:10; width:100%;
  padding:160px 0 70px;
}
.hero-inner-wrap {
  max-width:1280px; margin:0 auto; padding:0 2rem;
}

/* ── BOXED CONTENT CARD ── */
.hero-content {
  background: rgba(10,8,5,.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 20px;
  padding: 3.2rem 3.8rem;
  max-width: 720px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}
/* Gold top accent line */
.hero-content::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--gold-gradient-h);
  border-radius:20px 20px 0 0;
}
/* Soft corner glow */
.hero-content::after {
  content:'';
  position:absolute; bottom:0; right:0;
  width:140px; height:140px;
  background:radial-gradient(ellipse at 100% 100%, rgba(201,168,76,.06) 0%, transparent 70%);
  pointer-events:none;
}

/* Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.38rem 1.1rem;
  border:1.5px solid rgba(201,168,76,.4);
  background:var(--gold-pale);
  border-radius:20px;
  margin-bottom:1.5rem;
}
.hero-badge i    { color:var(--gold); font-size:.55rem; }
.hero-badge span {
  font-family:var(--font-accent); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dark);
}

/* Title */
.hero-title {
  font-family:var(--font-display); color:var(--white);
  font-weight:300; font-size:clamp(2.4rem,5vw,5rem);
  line-height:1.06; margin-bottom:1.1rem;
}
.hero-gold-word {
  background:var(--gold-gradient-h);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; font-weight:700; font-style:normal; display:inline-block;
}

/* Subtitle */
.hero-sub {
  font-size:1rem; color:rgba(255,255,255,.78);
  max-width:510px; line-height:1.85; margin-bottom:2rem;
}

/* Buttons */
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2rem; }
.btn-wa { background:#25D366; color:var(--white); border:none; }
.btn-wa:hover { background:#1DAA54; color:var(--white); transform:translateY(-2px); }

/* Trust row */
.hero-trust {
  display:flex; align-items:center; gap:0;
  flex-wrap:wrap; padding-top:1.1rem;
  border-top:1px solid rgba(201,168,76,.2);
}
.trust-item { display:flex; align-items:center; gap:.5rem; padding:0 1.3rem 0 0; }
.trust-item i    { color:var(--gold); font-size:.82rem; }
.trust-item span {
  font-family:var(--font-accent); font-size:.62rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-mid);
}
.trust-sep { width:1px; height:16px; background:rgba(201,168,76,.3); margin-right:1.3rem; }

/* Controls row outside the card */
.hero-controls {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0 0; margin-top:1rem;
  border-top:1px solid var(--border-gold);
  flex-wrap:wrap; gap:.8rem; max-width:720px;
}
.hero-dots { display:flex; gap:.5rem; align-items:center; }
.hero-dot {
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--gold); background:transparent;
  cursor:pointer; padding:0; transition:all .3s ease;
}
.hero-dot.active, .hero-dot:hover { background:var(--gold); transform:scale(1.45); }
.slide-counter {
  font-family:var(--font-accent); font-size:.6rem;
  letter-spacing:.25em; color:var(--text-light); text-transform:uppercase;
}
.hero-arrows { display:flex; gap:.5rem; }
.hero-arr {
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--border-gold); background:transparent;
  color:var(--gold-dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; transition:all .3s ease;
}
.hero-arr:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); }

/* ── Responsive ── */
@media(max-width:900px) {
  .hero-content { padding:2.4rem 2.2rem; }
}
@media(max-width:768px) {
  .hero-body  { padding:120px 0 50px; }
  .hero-title { font-size:clamp(2rem,8vw,3rem); }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .trust-sep { display:none; }
  .trust-item { padding:0 .8rem 0 0; }
}
@media(max-width:480px) {
  .hero-content { padding:2rem 1.5rem; border-radius:14px; }
}

/* ============================
   MARQUEE
   ============================ */
.marquee-strip{background:var(--dark);border-top:1px solid rgba(201,168,76,.18);padding:.8rem 0;overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-family:var(--font-accent);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:0 2.5rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.55rem}
.marquee-item i{color:var(--gold);font-size:.42rem}

/* ============================
   ABOUT SECTION
   ============================ */
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center}
.about-images{position:relative;padding-bottom:2rem}
.about-img-main{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-hover)}
.about-img-ph{width:100%;aspect-ratio:4/5;background:var(--cream);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:2px dashed var(--border-gold)}
.about-img-ph i{font-size:3rem;color:var(--gold);opacity:.35}
.about-img-ph p{font-size:.72rem;color:var(--text-light);letter-spacing:.08em;text-align:center}
.about-badge{position:absolute;bottom:0;right:-1rem;background:var(--gold-gradient);border-radius:var(--radius-lg);padding:1.4rem 1.8rem;text-align:center;box-shadow:var(--shadow-gold)}
.about-badge .n{font-family:var(--font-display);font-size:2.4rem;font-weight:700;line-height:1;display:block}
.about-badge .l{font-family:var(--font-accent);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;display:block;margin-top:.2rem}

.about-features{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.feat-item{display:flex;align-items:flex-start;gap:.85rem;padding:1rem;background:var(--off-white);border-radius:var(--radius);border-left:3px solid var(--gold)}
.feat-icon{width:38px;height:38px;background:var(--gold-gradient);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-icon i{color:var(--dark);font-size:.9rem}
.feat-text h5{font-size:.85rem;margin-bottom:.15rem}
.feat-text p{font-size:.76rem;margin:0;line-height:1.5;color:var(--text-light)}

/* ============================
   SERVICES GRID (homepage)
   ============================ */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.svc-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1.8rem 1.5rem;transition:var(--ease);position:relative;overflow:hidden}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold-gradient-h);transform:scaleX(0);transition:transform .4s ease;transform-origin:left}
.svc-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-5px);border-color:var(--border-gold)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-icon{width:58px;height:58px;background:linear-gradient(135deg,var(--gold-pale),var(--cream));border:1px solid var(--border-gold);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;transition:var(--ease)}
.svc-icon i{font-size:1.4rem;color:var(--gold-dark);transition:var(--ease)}
.svc-card:hover .svc-icon{background:var(--gold-gradient);border-color:var(--gold)}
.svc-card:hover .svc-icon i{color:var(--dark)}
.svc-card h3{font-size:.98rem;margin-bottom:.45rem;font-family:var(--font-heading)}
.svc-card p{font-size:.8rem;color:var(--text-light);line-height:1.7;margin:0}
.svc-more{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-accent);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-top:.9rem}
.svc-more i{font-size:.58rem;transition:transform .3s ease}
.svc-more:hover{color:var(--gold-dark)}
.svc-more:hover i{transform:translateX(4px)}

/* ============================
   GALLERY PREVIEW
   ============================ */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.gallery-grid .gs2{grid-column:span 2}
.gallery-grid .gr2{grid-row:span 2}
.gal-item{position:relative;overflow:hidden;border-radius:var(--radius);min-height:200px;background:var(--cream);cursor:pointer}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal-item:hover img{transform:scale(1.07)}
.gal-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,23,16,.82) 0%,transparent 55%);opacity:0;transition:opacity .4s ease;display:flex;align-items:flex-end;padding:1.1rem}
.gal-item:hover .gal-overlay{opacity:1}
.gal-info h4{color:var(--white);font-size:.9rem}
.gal-info span{font-family:var(--font-accent);font-size:.58rem;letter-spacing:.2em;color:var(--gold-light);text-transform:uppercase}
.gal-ph{width:100%;height:100%;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;color:var(--text-light);background:linear-gradient(135deg,var(--cream),var(--cream-deep))}
.gal-ph i{font-size:1.6rem;color:var(--border-gold)}
.gal-ph span{font-size:.68rem;letter-spacing:.08em;opacity:.6}

/* ============================
   WHY US  (dark bg section)
   ============================ */
.why-sec{background:var(--dark)}
.why-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:center}
.why-list{display:flex;flex-direction:column;gap:1.2rem}
.why-item{display:flex;align-items:flex-start;gap:1.1rem;padding:1.4rem 1.6rem;background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.13);border-radius:var(--radius);transition:var(--ease)}
.why-item:hover{background:rgba(201,168,76,.06);border-color:rgba(201,168,76,.32)}
.why-num{font-family:var(--font-accent);font-size:1.4rem;font-weight:700;color:var(--gold);min-width:2.2rem;opacity:.65}
.why-txt h4{color:var(--white);font-size:.93rem;margin-bottom:.3rem}
.why-txt p{color:rgba(255,255,255,.5);font-size:.8rem;margin:0;line-height:1.65}

/* ============================
   TESTIMONIALS
   ============================ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.testi-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:2rem;position:relative;transition:var(--ease)}
.testi-card:hover{box-shadow:var(--shadow-gold);transform:translateY(-3px)}
.testi-q{position:absolute;top:1rem;right:1.4rem;font-size:3rem;color:var(--gold-pale);font-family:Georgia;line-height:1}
.testi-stars{display:flex;gap:.2rem;margin-bottom:.9rem}
.testi-stars i{color:var(--gold);font-size:.82rem}
.testi-txt{font-size:.88rem;color:var(--text-mid);line-height:1.85;font-style:italic;margin-bottom:1.4rem}
.testi-author{display:flex;align-items:center;gap:.85rem}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--gold-gradient);color:var(--dark);font-family:var(--font-accent);font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 3px rgba(201,168,76,.2)}
.testi-name h5{font-size:.86rem;margin-bottom:.1rem}
.testi-name span{font-size:.72rem;color:var(--text-light)}

/* ============================
   CTA BANNER
   ============================ */
.cta-banner{background:var(--gold-gradient);padding:4.5rem 0;text-align:center}
.cta-banner h2{font-family:var(--font-display);color:var(--dark);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;margin-bottom:.7rem}
.cta-banner p{color:rgba(26,23,16,.62);font-size:1rem;margin-bottom:2rem}

/* ============================
   PAGE HERO (inner pages)
   ============================ */
.pg-hero{background:var(--dark);padding:9rem 0 4.5rem;text-align:center;position:relative;overflow:hidden}
.pg-hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(201,168,76,.03) 0,rgba(201,168,76,.03) 1px,transparent 0,transparent 50%);background-size:12px 12px}
.pg-hero .wrap{position:relative;z-index:1}
.breadcrumb{font-family:var(--font-accent);font-size:.62rem;letter-spacing:.25em;color:rgba(255,255,255,.32);text-transform:uppercase;margin-bottom:.9rem}
.breadcrumb a{color:var(--gold)}

/* ============================
   SERVICES PAGE
   ============================ */
.svc-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.svc-det-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:var(--ease)}
.svc-det-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:var(--border-gold)}
.svc-det-head{padding:2.2rem 2rem 1.8rem;background:linear-gradient(135deg,var(--cream),var(--off-white));border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;gap:1.2rem}
.svc-det-icon{width:64px;height:64px;background:var(--white);border:1.5px solid var(--border-gold);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-gold)}
.svc-det-icon i{font-size:1.6rem;color:var(--gold-dark)}
.svc-det-head h3{font-size:1.15rem;margin-top:.2rem}
.svc-det-body{padding:1.7rem 2rem}
.svc-det-body p{font-size:.86rem;line-height:1.82;margin-bottom:1rem}
.svc-feats{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.5rem}
.svc-feats li{font-size:.8rem;color:var(--text-mid);display:flex;align-items:center;gap:.55rem}
.svc-feats li i{color:var(--gold);font-size:.65rem;flex-shrink:0}

/* ============================
   GALLERY PAGE
   ============================ */
.gal-filter{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.8rem}
.gfbtn{font-family:var(--font-accent);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;padding:.52rem 1.3rem;border:1.5px solid var(--border-gold);background:transparent;color:var(--text-mid);border-radius:20px;cursor:pointer;transition:var(--ease)}
.gfbtn:hover,.gfbtn.active{background:var(--gold-gradient);border-color:var(--gold);color:var(--dark)}

.gal-full{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.gf-item{position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;aspect-ratio:1;background:var(--cream)}
.gf-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.gf-item:hover img{transform:scale(1.08)}
.gf-ov{position:absolute;inset:0;background:rgba(26,23,16,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}
.gf-item:hover .gf-ov{opacity:1}
.gf-ov i{color:var(--white);font-size:1.5rem}

/* ============================
   LIGHTBOX
   ============================ */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lb-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--white);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.lb-close{top:1.5rem;right:1.5rem}
.lb-prev{left:1.5rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.5rem;top:50%;transform:translateY(-50%)}
.lb-caption{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-family:var(--font-accent);font-size:.65rem;letter-spacing:.2em;text-align:center}

/* ============================
   CONTACT PAGE
   ============================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:4rem;align-items:start}
.cinfo-stack{display:flex;flex-direction:column;gap:1.1rem}
.cinfo-card{display:flex;align-items:flex-start;gap:.95rem;padding:1.3rem;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:var(--ease)}
.cinfo-card:hover{border-color:var(--border-gold);box-shadow:var(--shadow-gold)}
.cinfo-icon{width:44px;height:44px;background:var(--gold-gradient);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cinfo-icon i{color:var(--dark);font-size:.95rem}
.cinfo-body h5{font-size:.73rem;font-family:var(--font-accent);letter-spacing:.15em;text-transform:uppercase;color:var(--text-light);margin-bottom:.22rem}
.cinfo-body a,.cinfo-body p{font-size:.88rem;color:var(--text-dark);margin:0;line-height:1.5}
.cinfo-body a:hover{color:var(--gold)}
.csocial{display:flex;gap:.6rem;margin-top:.8rem}
.csocial a{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border-gold);color:var(--text-mid);display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:var(--ease)}
.csocial a:hover{background:var(--gold-gradient);color:var(--dark);border-color:var(--gold)}
.cform-wrap{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:2.4rem}
.cform-wrap h3{font-size:1.4rem;margin-bottom:.5rem}
.shortcode-ph{background:var(--off-white);border:2px dashed var(--border-gold);border-radius:var(--radius);padding:2.8rem 2rem;text-align:center;color:var(--text-light);font-size:.85rem;line-height:1.9}
.shortcode-ph strong{color:var(--gold-dark)}
.shortcode-ph code{display:block;margin-top:.9rem;font-size:.78rem;background:rgba(201,168,76,.08);border:1px solid var(--border-gold);padding:.5rem 1rem;border-radius:3px;color:var(--gold-dark)}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);height:380px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-top:2rem}
.map-wrap iframe{width:100%;height:100%;border:none;display:block}
.map-ph{text-align:center;color:var(--text-light)}
.map-ph i{font-size:2.5rem;color:var(--gold);display:block;margin-bottom:.7rem}

/* ============================
   FOOTER
   ============================ */
.site-footer{background:var(--dark);color:rgba(255,255,255,.55)}
.footer-top{padding:4.5rem 0 3rem;border-bottom:1px solid rgba(201,168,76,.14)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem}
.fbrand-name{font-family:var(--font-accent);font-size:1rem;letter-spacing:.12em;color:var(--white);display:block;margin-bottom:.2rem}
.fbrand-tag{font-family:var(--font-display);font-size:.75rem;color:var(--gold);font-style:italic;letter-spacing:.1em;display:block;margin-bottom:1rem}
.footer-brand p{font-size:.8rem;line-height:1.8;color:rgba(255,255,255,.4)}
.fcol h4{font-family:var(--font-accent);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.fcol ul{display:flex;flex-direction:column;gap:.55rem}
.fcol ul li a{font-size:.8rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:.5rem;transition:var(--ease)}
.fcol ul li a:hover{color:var(--gold);padding-left:3px}
.fcol ul li a i{font-size:.62rem;color:var(--gold);opacity:.5}
.fcontact-item{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:.85rem;font-size:.8rem;color:rgba(255,255,255,.45)}
.fcontact-item i{color:var(--gold);font-size:.82rem;margin-top:.15rem}
.fcontact-item a{color:rgba(255,255,255,.45)}
.fcontact-item a:hover{color:var(--gold)}
.fsocial{display:flex;gap:.55rem;margin-top:1.1rem}
.fsocial a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(201,168,76,.28);color:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:.78rem;transition:var(--ease)}
.fsocial a:hover{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.footer-bot{padding:1.3rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-bot p{font-size:.7rem;color:rgba(255,255,255,.25);margin:0}
.footer-bot .flname{font-family:var(--font-accent);font-size:.68rem;letter-spacing:.2em;color:var(--gold);opacity:.5}

/* ============================
   FLOATING
   ============================ */
.wa-float{position:fixed;bottom:2rem;right:2rem;z-index:888;width:52px;height:52px;background:#25D366;color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:var(--ease);text-decoration:none}
.wa-float:hover{transform:scale(1.12) translateY(-3px);color:var(--white);box-shadow:0 8px 28px rgba(37,211,102,.5)}
.btt{position:fixed;bottom:6.2rem;right:2rem;z-index:888;width:40px;height:40px;background:var(--dark);color:var(--gold);border:1px solid rgba(201,168,76,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;cursor:pointer;opacity:0;pointer-events:none;transition:var(--ease)}
.btt.show{opacity:1;pointer-events:all}
.btt:hover{background:var(--gold);color:var(--dark)}

/* Admin bar offset */
body.admin-bar .site-header{top:32px}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:1100px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .svc-detail-grid,.svc-det-grid{grid-template-columns:repeat(2,1fr)}
  .gal-full{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .about-grid,.why-grid,.contact-grid{grid-template-columns:1fr;gap:3rem}
  .testi-grid{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid .gs2,.gallery-grid .gr2{grid-column:span 1;grid-row:span 1}
  .about-badge{right:0;bottom:-.5rem}
}
@media(max-width:768px){
  :root{--space-xl:4rem}
  .menu-toggle{display:flex}
  .main-nav{display:none;position:fixed;inset:0;background:rgba(255,255,255,.98);z-index:999;flex-direction:column;justify-content:center;align-items:center;backdrop-filter:blur(16px)}
  .main-nav.open{display:flex}
  .main-nav ul{flex-direction:column;gap:1.6rem;text-align:center}
  .main-nav a{font-size:.9rem;letter-spacing:.3em;color:var(--text-dark)!important}
  .topbar{display:none}
  .hero-title{font-size:clamp(2.2rem,8vw,3.5rem)}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .svc-grid{grid-template-columns:1fr 1fr}
  .gal-full{grid-template-columns:repeat(2,1fr)}
  .svc-det-grid,.svc-detail-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bot{flex-direction:column;text-align:center}
  .testi-grid{grid-template-columns:1fr}
  .about-features{grid-template-columns:1fr}
}
@media(max-width:480px){
  .svc-grid{grid-template-columns:1fr}
  .gal-full{grid-template-columns:1fr 1fr}
  .hero-controls{flex-direction:column;gap:.8rem}
}
@media print{
  .site-header,.wa-float,.btt,.marquee-strip{display:none!important}
  body{font-size:12pt;color:#000}
}

/* ============================
   LOGO IMAGE SIZING
   ============================ */
.site-logo-img {
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  transition: var(--ease);
}
.site-header.scrolled .site-logo-img { height: 44px; }

/* If logo fails, show text fallback */
.logo-name-text {
  font-family: var(--font-accent);
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--text-dark);
}

/* ============================
   HERO FULL-WIDTH GUARANTEE
   ============================ */
/* Ensure nothing wraps the hero */
body.is-front .hero,
.hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
}

/* Ensure hero sits flush under fixed header */
body.is-front > .hero,
body.home > .hero {
  margin-top: 0;
}

/* ============================
   FONT AWESOME ICON FIX
   ============================ */
/* Ensure FA icons display correctly */
.fa-solid, .fa-brands, .fa-regular {
  font-style: normal !important;
  display: inline-block !important;
}
/* Force webfont rendering */
[class*="fa-"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================
   ANIMATION ALIAS (fade-up / fade-in)
   ============================ */
.fade-up  { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.fade-in  { opacity:0; transition:opacity .7s ease; }
.fade-up.visible,.fade-up.vis { opacity:1; transform:translateY(0); }
.fade-in.visible,.fade-in.vis { opacity:1; }

/* ============================
   HERO DECO (decorative SVG circle)
   ============================ */
.hero-deco {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
}
@media(max-width:900px){ .hero-deco{display:none} }

/* ============================
   ABOUT — IMPROVED
   ============================ */
.about-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:5rem; align-items:center; }
.about-images { position:relative; padding-bottom:2.5rem; }
.about-img-main { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-hover); }
.about-img-ph {
  width:100%; aspect-ratio:4/5; background:var(--cream); border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  border:2px dashed var(--border-gold);
}
.about-img-ph i { font-size:3rem; color:var(--gold); opacity:.35; }
.about-img-ph span { font-size:.78rem; color:var(--text-light); text-align:center; letter-spacing:.05em; }
.about-badge {
  position:absolute; bottom:0; right:-1rem;
  background:var(--gold-gradient); border-radius:var(--radius-lg);
  padding:1.3rem 1.7rem; text-align:center; box-shadow:var(--shadow-gold);
}
.about-badge .n { font-family:var(--font-display); font-size:2.3rem; font-weight:700; line-height:1; display:block; color:var(--dark); }
.about-badge .l { font-family:var(--font-accent); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; display:block; margin-top:.2rem; color:rgba(26,23,16,.7); }
.about-float-stat {
  position:absolute; top:2rem; left:-1.5rem;
  background:var(--white); border:1px solid var(--border-gold);
  border-radius:var(--radius-lg); padding:.9rem 1.2rem;
  display:flex; align-items:center; gap:.7rem;
  box-shadow:var(--shadow-card);
}
.about-float-stat i { color:var(--gold); font-size:1.1rem; }
.about-float-stat strong { display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--text-dark); line-height:1; }
.about-float-stat span  { font-family:var(--font-accent); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-light); }
.about-content { }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.feat-item { display:flex; align-items:flex-start; gap:.85rem; padding:1rem 1.1rem; background:var(--off-white); border-radius:var(--radius); border-left:3px solid var(--gold); transition:var(--ease); }
.feat-item:hover { box-shadow:var(--shadow-card); transform:translateY(-2px); }
.feat-icon { width:38px; height:38px; background:var(--gold-gradient); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feat-icon i { color:var(--dark); font-size:.9rem; }
.feat-text h5 { font-size:.85rem; margin-bottom:.15rem; }
.feat-text p  { font-size:.76rem; margin:0; line-height:1.55; color:var(--text-light); }
.about-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; }
@media(max-width:900px){
  .about-grid { grid-template-columns:1fr; gap:3rem; }
  .about-float-stat { left:0; top:1rem; }
  .about-badge { right:0; }
}
@media(max-width:768px){ .about-features{ grid-template-columns:1fr; } }

/* ============================
   PROCESS SECTION
   ============================ */
.process-sec { background:var(--dark); padding:var(--space-xl) 0; }
.process-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:1rem;
  border:1px solid rgba(201,168,76,.15); border-radius:var(--radius-lg); overflow:hidden;
}
.process-step {
  padding:2.5rem 2rem; text-align:center; position:relative;
  border-right:1px solid rgba(201,168,76,.12);
  background:rgba(255,255,255,.025);
  transition:var(--ease);
}
.process-step:last-child { border-right:none; }
.process-step:hover { background:rgba(201,168,76,.06); }
.process-num {
  font-family:var(--font-accent); font-size:2.5rem; font-weight:700;
  color:rgba(201,168,76,.15); line-height:1; margin-bottom:.8rem; display:block;
}
.process-icon {
  width:56px; height:56px;
  background:var(--gold-gradient); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.2rem;
  box-shadow:0 4px 20px rgba(201,168,76,.3);
}
.process-icon i { color:var(--dark); font-size:1.2rem; }
.process-step h4 { color:var(--white); font-size:1rem; margin-bottom:.5rem; }
.process-step p  { color:rgba(255,255,255,.5); font-size:.8rem; line-height:1.7; margin:0; }
.process-arrow {
  position:absolute; right:-.85rem; top:50%; transform:translateY(-50%);
  width:1.7rem; height:1.7rem; background:var(--gold-gradient);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  z-index:1; box-shadow:var(--shadow-gold);
}
.process-arrow i { color:var(--dark); font-size:.6rem; }
@media(max-width:768px){
  .process-grid { grid-template-columns:1fr 1fr; }
  .process-arrow { display:none; }
  .process-step { border-right:1px solid rgba(201,168,76,.12); border-bottom:1px solid rgba(201,168,76,.12); }
}
@media(max-width:480px){ .process-grid{ grid-template-columns:1fr; } }

/* ============================
   STATS BAR
   ============================ */
.stats-bar { background:var(--gold-gradient); padding:3rem 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(26,23,16,.1); }
.stat-item {
  background:rgba(255,255,255,.06); padding:2rem 1.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.stat-item i { font-size:1.6rem; color:rgba(26,23,16,.55); margin-bottom:.2rem; }
.stat-num { line-height:1; }
.counter-num { font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--dark); }
.stat-lbl { font-family:var(--font-accent); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(26,23,16,.6); }
@media(max-width:768px){ .stats-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .stats-grid{ grid-template-columns:1fr 1fr; } }

/* ============================
   WHY SECTION — ICON UPDATE
   ============================ */
.why-item { display:flex; align-items:flex-start; gap:1.1rem; padding:1.3rem 1.5rem; background:rgba(255,255,255,.04); border:1px solid rgba(201,168,76,.13); border-radius:var(--radius); transition:var(--ease); }
.why-item:hover { background:rgba(201,168,76,.07); border-color:rgba(201,168,76,.32); }
.why-icon { width:42px; height:42px; background:rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.3); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--ease); }
.why-icon i { color:var(--gold); font-size:.95rem; }
.why-item:hover .why-icon { background:var(--gold-gradient); border-color:var(--gold); }
.why-item:hover .why-icon i { color:var(--dark); }
.why-txt h4 { color:var(--white); font-size:.92rem; margin-bottom:.3rem; }
.why-txt p  { color:rgba(255,255,255,.5); font-size:.8rem; margin:0; line-height:1.65; }

/* ============================
   CTA BANNER — IMPROVED
   ============================ */
.cta-banner { background:var(--gold-gradient); padding:5rem 0; }
.cta-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:3rem; flex-wrap:wrap; }
.cta-banner-inner h2 { font-family:var(--font-display); color:var(--dark); font-size:clamp(1.8rem,4vw,3rem); font-weight:700; margin-bottom:.5rem; }
.cta-banner-inner p  { color:rgba(26,23,16,.62); font-size:1rem; margin:0; }
.cta-banner-actions { display:flex; gap:.8rem; flex-wrap:wrap; flex-shrink:0; }
@media(max-width:768px){ .cta-banner-inner{ flex-direction:column; text-align:center; } .cta-banner-actions{ justify-content:center; } }

/* ============================
   GALLERY PLACEHOLDER (updated)
   ============================ */
.gal-ph small { font-size:.6rem; opacity:.45; letter-spacing:.06em; }

/* ============================
   SERVICE CARD — extra polish
   ============================ */
.svc-card { background:var(--white); }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:3rem; } .why-grid{ grid-template-columns:1fr; gap:3rem; } }

/* ============================
   SERVICES GRID — section bg override
   ============================ */
/* Services section has off-white bg; cards stay pure white */
#services .svc-card,
.svc-card { background:var(--white) !important; }

/* d1-d5 delay classes */
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ============================
   ABOUT FLOAT STAT — mobile
   ============================ */
@media(max-width:500px){ .about-float-stat{display:none;} }

/* ============================
   SERVICES DETAIL PAGE GRID
   ============================ */
.svc-det-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.svc-det-card { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; transition:var(--ease); }
.svc-det-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); border-color:var(--border-gold); }
.svc-det-head {
  padding:2rem; background:linear-gradient(135deg,var(--cream),var(--off-white));
  border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:1.1rem;
}
.svc-det-icon { width:60px; height:60px; background:var(--white); border:1.5px solid var(--border-gold); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-gold); }
.svc-det-icon i { font-size:1.55rem; color:var(--gold-dark); }
.svc-det-head h3 { font-size:1.1rem; color:var(--text-dark); }
.svc-det-body { padding:1.7rem 2rem; }
.svc-det-body p { font-size:.88rem; line-height:1.82; margin-bottom:1rem; }
.svc-feats { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.5rem; }
.svc-feats li { font-size:.82rem; color:var(--text-mid); display:flex; align-items:center; gap:.6rem; }
.svc-feats li i { color:var(--gold); font-size:.65rem; flex-shrink:0; }
@media(max-width:1100px){ .svc-det-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .svc-det-grid{ grid-template-columns:1fr; } }

/* ============================
   PAGE HERO (inner pages)
   ============================ */
.pg-hero {
  background:var(--dark); padding:9rem 0 5rem;
  text-align:center; position:relative; overflow:hidden;
}
.pg-hero::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(201,168,76,.03) 0,rgba(201,168,76,.03) 1px,transparent 0,transparent 50%);
  background-size:12px 12px;
}
.pg-hero .wrap { position:relative; z-index:1; }
.pg-hero .section-sub { margin:0 auto; }
.breadcrumb { font-family:var(--font-accent); font-size:.62rem; letter-spacing:.25em; color:rgba(255,255,255,.32); text-transform:uppercase; margin-bottom:.9rem; }
.breadcrumb a { color:var(--gold); }
.breadcrumb a:hover { color:var(--gold-light); }

/* ============================
   CONTACT PAGE
   ============================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.65fr; gap:4rem; align-items:start; }
.cinfo-stack  { display:flex; flex-direction:column; gap:1rem; }
.cinfo-card   { display:flex; align-items:flex-start; gap:.95rem; padding:1.2rem; background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); transition:var(--ease); }
.cinfo-card:hover { border-color:var(--border-gold); box-shadow:var(--shadow-gold); }
.cinfo-icon   { width:42px; height:42px; background:var(--gold-gradient); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinfo-icon i { color:var(--dark); font-size:.9rem; }
.cinfo-body h5 { font-size:.72rem; font-family:var(--font-accent); letter-spacing:.15em; text-transform:uppercase; color:var(--text-light); margin-bottom:.2rem; }
.cinfo-body a, .cinfo-body p { font-size:.88rem; color:var(--text-dark); margin:0; line-height:1.5; }
.cinfo-body a:hover { color:var(--gold); }
.csocial { display:flex; gap:.6rem; }
.csocial a { width:36px; height:36px; border-radius:50%; border:1.5px solid var(--border-gold); color:var(--text-mid); display:flex; align-items:center; justify-content:center; font-size:.82rem; transition:var(--ease); }
.csocial a:hover { background:var(--gold-gradient); color:var(--dark); border-color:var(--gold); }
.cform-wrap { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:2.4rem; margin-bottom:2rem; }
.cform-wrap h3 { font-size:1.4rem; margin-bottom:.4rem; }
.shortcode-ph { background:var(--off-white); border:2px dashed var(--border-gold); border-radius:var(--radius); padding:2.5rem 2rem; text-align:center; color:var(--text-light); font-size:.85rem; line-height:1.9; }
.shortcode-ph strong { color:var(--gold-dark); }
.shortcode-ph code { display:block; margin-top:.8rem; font-size:.78rem; background:rgba(201,168,76,.08); border:1px solid var(--border-gold); padding:.5rem 1rem; border-radius:3px; color:var(--gold-dark); }
.map-wrap { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-subtle); height:360px; background:var(--cream); display:flex; align-items:center; justify-content:center; }
.map-wrap iframe { width:100%; height:100%; border:none; display:block; }
.map-ph { text-align:center; color:var(--text-light); padding:2rem; }
.map-ph i { font-size:2.5rem; color:var(--gold); display:block; margin-bottom:.7rem; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================
   GALLERY FULL PAGE GRID
   ============================ */
.gal-filter { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; }
.gfbtn { font-family:var(--font-accent); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; padding:.5rem 1.3rem; border:1.5px solid var(--border-gold); background:transparent; color:var(--text-mid); border-radius:20px; cursor:pointer; transition:var(--ease); }
.gfbtn:hover,.gfbtn.active { background:var(--gold-gradient); border-color:var(--gold); color:var(--dark); }
.gal-full { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.gf-item { position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; aspect-ratio:1; background:var(--cream); }
.gf-item img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; display:block; }
.gf-item:hover img { transform:scale(1.08); }
.gf-ov { position:absolute; inset:0; background:rgba(26,23,16,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.gf-item:hover .gf-ov { opacity:1; }
.gf-ov i { color:var(--white); font-size:1.5rem; }
@media(max-width:1100px){ .gal-full{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px) { .gal-full{ grid-template-columns:repeat(2,1fr); } }

/* ============================
   LIGHTBOX
   ============================ */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lb-img { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:var(--radius); }
.lb-close,.lb-prev,.lb-next { position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:var(--white); width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:var(--ease); }
.lb-close:hover,.lb-prev:hover,.lb-next:hover { background:var(--gold); border-color:var(--gold); color:var(--dark); }
.lb-close { top:1.5rem; right:1.5rem; }
.lb-prev  { left:1.5rem; top:50%; transform:translateY(-50%); }
.lb-next  { right:1.5rem; top:50%; transform:translateY(-50%); }
.lb-caption { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.55); font-family:var(--font-accent); font-size:.65rem; letter-spacing:.2em; text-align:center; white-space:nowrap; }

/* ============================
   STICKY TOPBAR + HEADER
   ============================ */
/* Topbar: always fixed at very top */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1002;
  background: var(--dark);
  padding: .5rem 0;
  border-bottom: 1px solid rgba(201,168,76,.18);
  transition: transform .35s ease;
  height: 42px;
  display: flex;
  align-items: center;
}
.topbar.hidden { transform: translateY(-100%); }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:nowrap; }
.topbar-contact { display:flex; align-items:center; gap:1.2rem; flex-wrap:nowrap; overflow:hidden; }
.topbar-contact a {
  color:rgba(255,255,255,.65); font-family:var(--font-accent);
  font-size:.62rem; letter-spacing:.08em;
  display:flex; align-items:center; gap:.38rem; white-space:nowrap;
  transition:color .3s;
}
.topbar-contact a:hover { color:var(--gold); }
.topbar-contact a i { color:var(--gold); font-size:.72rem; }
.topbar-right { display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.topbar-social { display:flex; gap:.7rem; }
.topbar-social a { color:rgba(255,255,255,.4); font-size:.75rem; transition:color .3s; }
.topbar-social a:hover { color:var(--gold); }
@media(max-width:768px){
  .topbar-hide-mobile { display:none; }
  .topbar-contact { gap:.7rem; }
}

/* Main header: fixed below topbar */
.site-header {
  position: fixed;
  top: 42px; left: 0; right: 0;
  z-index: 1001;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .85rem 0;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 20px rgba(26,23,16,.07);
  transition: top .35s ease, padding .3s ease, box-shadow .3s ease;
}
/* When topbar hides, header rises to top:0 */
.site-header.topbar-hidden { top: 0; }

/* Offset body content — topbar 42px + header 72px */
body { padding-top: 114px; }

/* Offset hero so content isn't under header */
.hero-body { padding-top: calc(42px + 72px + 60px); }  /* topbar + header + breathing room */

.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

/* Logo */
.site-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.site-logo-img { height:58px; width:auto; max-width:210px; object-fit:contain; display:block; transition:height .3s; }

/* Nav links */
.main-nav ul { display:flex; align-items:center; gap:.2rem; list-style:none; }
.main-nav a {
  font-family:var(--font-accent); font-size:.67rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dark); padding:.5rem .85rem;
  position:relative; display:block; transition:color .3s;
}
.main-nav a::after {
  content:''; position:absolute; bottom:0; left:.85rem; right:.85rem;
  height:2px; background:var(--gold-gradient-h); transform:scaleX(0); transition:transform .3s ease;
}
.main-nav a:hover::after,
.main-nav li.current-menu-item > a::after { transform:scaleX(1); }
.main-nav a:hover { color:var(--gold-dark); }

/* Header CTA button */
.header-actions { display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.nav-cta-btn {
  background:var(--gold-gradient) !important; color:var(--dark) !important;
  padding:.5rem 1.2rem !important; border-radius:var(--radius) !important;
  white-space:nowrap; font-size:.65rem !important;
}
.nav-cta-btn::after { display:none !important; }
.nav-cta-btn:hover { opacity:.9; transform:translateY(-1px); }

/* ============================
   MOBILE HEADER — PERFECT WHITE
   ============================ */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: var(--white);
  border: 1.5px solid var(--border-gold);
  border-radius: 8px;
  cursor: pointer; padding: 8px;
}
.menu-toggle .bar {
  display: block; width: 20px; height: 2px;
  background: var(--gold-dark); border-radius: 2px; transition: var(--ease);
}

/* Mobile nav overlay */
@media(max-width:768px) {
  .menu-toggle { display:flex; }
  .nav-cta-btn span { display:none; }  /* hide text, show icon only */

  .main-nav {
    display: flex !important;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 85vw);
    background: var(--white);
    z-index: 1003;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 2.5rem;
    box-shadow: -4px 0 40px rgba(26,23,16,.15);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction:column; gap:0; width:100%; }
  .main-nav a {
    font-size:.82rem; letter-spacing:.22em;
    color:var(--text-dark) !important;
    padding:.95rem 0;
    border-bottom:1px solid var(--border-subtle);
    width:100%;
  }
  .main-nav a::after { left:0; right:0; bottom:0; transform-origin:left; }
  .main-nav a:hover { color:var(--gold) !important; }

  /* Close button inside nav */
  .nav-close {
    display: flex;
    position: absolute; top:1.2rem; right:1.2rem;
    width:36px; height:36px; border-radius:50%;
    background:var(--cream); border:1px solid var(--border-subtle);
    color:var(--text-dark); cursor:pointer; font-size:1rem;
    align-items:center; justify-content:center; transition:var(--ease);
  }
  .nav-close:hover { background:var(--gold); color:var(--dark); }
}
@media(min-width:769px){ .nav-close{ display:none; } }

/* Backdrop */
.nav-backdrop {
  display: none;
  position: fixed; inset:0; z-index:1002;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.nav-backdrop.show { display:block; }

/* Hamburger animation */
.menu-toggle.open .bar:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.open .bar:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-toggle.open .bar:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ============================
   SERVICES PAGE — IMAGE ROWS
   ============================ */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.svc-row:last-child { border-bottom: none; }
.svc-row-reverse { direction: rtl; }
.svc-row-reverse > * { direction: ltr; }

.svc-row-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.svc-row-img img {
  width: 100%; height: 360px;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
  border-radius: var(--radius-lg);
}
.svc-row:hover .svc-row-img img { transform: scale(1.04); }

.svc-row-img-badge {
  position: absolute;
  bottom: -1px; left: 2rem;
  background: var(--gold-gradient);
  border-radius: 12px 12px 0 0;
  padding: .8rem 1rem;
}
.svc-row-img-badge .svc-det-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  box-shadow: none;
}
.svc-row-img-badge .svc-det-icon i { color: var(--dark); font-size: 1.2rem; }

.svc-row-content h3 { font-size: clamp(1.2rem,2vw,1.7rem); margin-bottom: .3rem; }
.svc-row-desc { font-size: .9rem; color: var(--text-mid); line-height: 1.82; margin-bottom: 1.2rem; }

@media(max-width:900px) {
  .svc-row { grid-template-columns:1fr; gap:2rem; direction:ltr; }
  .svc-row-reverse { direction:ltr; }
  .svc-row-img img { height:260px; }
}

/* ============================
   HERO BADGE + TRUST FOR DARK CARD
   ============================ */
.hero-badge span { color: var(--gold-light); }
.trust-item span { color: rgba(255,255,255,.78); }
.trust-sep { background: rgba(201,168,76,.35); }
.hero-trust { border-top: 1px solid rgba(201,168,76,.22); }
.hero-controls { border-top: 1px solid rgba(201,168,76,.25); }
.hero-dot { border-color: rgba(201,168,76,.7); }

/* ============================
   ADMIN BAR OFFSET
   ============================ */
body.admin-bar .topbar      { top: 32px; }
body.admin-bar .site-header { top: calc(42px + 32px); }
body.admin-bar              { padding-top: calc(114px + 32px); }
@media(max-width:782px) {
  body.admin-bar .topbar      { top: 46px; }
  body.admin-bar .site-header { top: calc(42px + 46px); }
  body.admin-bar              { padding-top: calc(114px + 46px); }
}

/* ============================================================
   HEADER + MOBILE — REFINED FIXES
   ============================================================ */

/* ── Hero bottom-fade to pure black (blends into marquee) ── */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 100%);
  z-index: 6;
  pointer-events: none;
}

/* ── Header — always white, always sharp ── */
.site-header {
  background: rgba(255,255,255,1) !important;
  backdrop-filter: blur(0) !important;
}

/* ── Logo — consistent sizing ── */
.site-logo-img {
  height: 58px !important;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

/* ── Nav — better spacing & active state ── */
.main-nav > ul > li > a {
  font-size: .68rem;
  padding: .55rem 1rem;
}
.main-nav > ul > li.current-menu-item > a {
  color: var(--gold-dark);
}
.main-nav > ul > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* ── CTA button always visible ── */
.nav-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
}

/* ── Hamburger — always visible on mobile ── */
@media (max-width: 900px) {
  .menu-toggle { display: flex !important; }
  .main-nav:not(.open) { transform: translateX(110%) !important; }
}

/* ============================================================
   MOBILE HEADER — CLEAN REDESIGN
   ============================================================ */
@media (max-width: 900px) {

  /* Hide the CTA text on small screens, show icon only */
  .nav-cta-btn span { display: none; }
  .nav-cta-btn { padding: .5rem .7rem !important; }

  /* Header inner — tighter on mobile */
  .header-inner { gap: .8rem; padding: 0 1rem; }

  /* Logo on mobile */
  .site-logo-img { height: 46px !important; }

  /* Mobile nav panel — full height slide-in from right */
  .main-nav {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(300px, 80vw) !important;
    background: #ffffff !important;
    z-index: 2000 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    box-shadow: -4px 0 50px rgba(0,0,0,.18) !important;
    transform: translateX(110%) !important;
    transition: transform .38s cubic-bezier(.25,.46,.45,.94) !important;
    overflow-y: auto !important;
  }

  .main-nav.open {
    transform: translateX(0) !important;
  }

  /* Nav header inside panel — brand + close */
  .main-nav::before {
    content: 'NAJMAT AL MAS';
    display: block;
    font-family: var(--font-accent);
    font-size: .7rem;
    letter-spacing: .22em;
    color: var(--gold-dark);
    padding: 1.4rem 1.8rem 1.2rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--off-white);
    flex-shrink: 0;
  }

  /* Nav links */
  .main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: .8rem 0 !important;
    flex: 1;
  }

  .main-nav ul li a {
    display: flex !important;
    align-items: center !important;
    gap: .7rem;
    font-size: .75rem !important;
    letter-spacing: .18em !important;
    color: var(--text-dark) !important;
    padding: 1rem 1.8rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    width: 100% !important;
    transition: all .2s ease !important;
  }

  .main-nav ul li a::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--border-gold);
    flex-shrink: 0;
    transition: background .2s;
  }

  .main-nav ul li a::after { display: none !important; }

  .main-nav ul li a:hover,
  .main-nav ul li.current-menu-item > a {
    color: var(--gold-dark) !important;
    background: var(--gold-pale) !important;
    padding-left: 2.2rem !important;
  }

  .main-nav ul li a:hover::before,
  .main-nav ul li.current-menu-item > a::before {
    background: var(--gold) !important;
  }

  /* Close button */
  .nav-close {
    display: flex !important;
    position: absolute !important;
    top: .9rem !important;
    right: 1.2rem !important;
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important;
    background: var(--cream) !important;
    border: 1px solid var(--border-gold) !important;
    color: var(--text-dark) !important;
    cursor: pointer !important;
    font-size: .95rem !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--ease) !important;
    z-index: 2001 !important;
  }
  .nav-close:hover { background: var(--gold) !important; color: var(--dark) !important; }

  /* WhatsApp footer inside mobile nav */
  .main-nav ul::after {
    content: '';
    display: block;
    flex: 1;
  }

  /* Backdrop */
  .nav-backdrop {
    z-index: 1999 !important;
  }
}

/* ── Topbar on mobile — compact ── */
@media (max-width: 600px) {
  .topbar { height: 38px; }
  .topbar-contact a span { display: none; }
  .topbar-contact a { gap: 0; }
  .topbar-contact a i { font-size: .88rem; }
  body { padding-top: 110px; }
  .site-header { top: 38px !important; }
  .hero-body { padding-top: calc(38px + 72px + 50px); }
}

/* ── Inner pages — prevent content hiding under fixed header ── */
.pg-hero { padding-top: 10rem; }
@media (max-width: 768px) { .pg-hero { padding-top: 8rem; } }

/* ── About values grid responsive ── */
@media (max-width: 768px) {
  .values-grid,
  [class*="values"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .values-grid,
  [class*="values"] { grid-template-columns: 1fr !important; }
}

/* ── General small screen fixes ── */
@media (max-width: 480px) {
  .hero-title  { font-size: 2.2rem !important; }
  .hero-sub    { font-size: .92rem !important; }
  .hero-content { padding: 1.8rem 1.4rem !important; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .trust-sep { display: none; }
  .trust-item { padding: 0 .8rem 0 0; }
  .wrap { padding: 0 1rem; }
  .sec { padding: 3rem 0; }
}

/* ============================================================
   ABOUT PAGE — VALUES GRID
   ============================================================ */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: .5rem;
}
.about-value-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem;
  text-align: center;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
}
.about-value-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-gradient-h);
  transform: scaleX(0);
  transition: transform .4s ease;
  transform-origin: left;
}
.about-value-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
  border-color: var(--border-gold);
}
.about-value-card:hover::before { transform: scaleX(1); }

.about-value-icon {
  width: 64px; height: 64px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.4rem;
  box-shadow: 0 4px 20px rgba(201,168,76,.25);
}
.about-value-icon i { color: var(--dark); font-size: 1.4rem; }
.about-value-card h4 { font-size: 1.05rem; margin-bottom: .5rem; color: var(--text-dark); }
.about-value-card p  { font-size: .82rem; color: var(--text-light); line-height: 1.75; margin: 0; }

/* About content actions */
.about-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }

@media (max-width: 900px) { .about-values-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .about-values-grid { grid-template-columns: 1fr; } }

/* ── About float stat fix ── */
.about-float-stat {
  position: absolute;
  top: 2rem; left: -1rem;
  background: var(--white);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: .85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  box-shadow: var(--shadow-card);
  z-index: 2;
}
.about-float-stat i      { color: var(--gold); font-size: 1.05rem; }
.about-float-stat strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--text-dark); line-height: 1; }
.about-float-stat span   { font-family: var(--font-accent); font-size: .56rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-light); }

@media (max-width: 500px) { .about-float-stat { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   DESKTOP NAV — re-positioned after being moved outside <header>
   to fix the backdrop-filter stacking context z-index bug.
   On desktop it overlays the header area as a fixed bar.
   On mobile the existing slide-in rules below 901px still apply.
   ═══════════════════════════════════════════════════════════════ */
/* ── DESKTOP NAV — inline in header flex row ──────────────────────
   JS teleports <nav> INSIDE .header-inner on desktop (≥900px).
   These rules make it behave as a centred flex item.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .main-nav {
    flex: 1;                        /* fill space between logo & CTA */
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: static !important;   /* normal flow — NOT fixed */
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  .main-nav ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .2rem !important;
    width: auto !important;
    padding: 0 !important;
    flex-direction: row !important;
  }

  .main-nav .nav-close { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   CATALOGUES SECTION
═══════════════════════════════════════════════════ */

.catalogues-sec { padding: 5rem 0; }

/* Grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}

/* Card */
.cat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}
.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  border-color: var(--gold);
}

/* Cover image area */
.cat-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--dark-2, #111);
  overflow: hidden;
}
.cat-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.cat-card:hover .cat-cover img { transform: scale(1.04); }

.cat-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1710, #2c2710);
}
.cat-cover-placeholder i {
  font-size: 4rem;
  color: var(--border-gold);
}

/* Hover overlay */
.cat-hover-ov {
  position: absolute;
  inset: 0;
  background: rgba(26,23,16,.65);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .6rem;
  opacity: 0;
  transition: opacity .3s ease;
  color: var(--white);
}
.cat-card:hover .cat-hover-ov { opacity: 1; }
.cat-hover-ov i { font-size: 2rem; color: var(--gold); }
.cat-hover-ov span {
  font-family: var(--font-accent);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
}

/* Info below cover */
.cat-info {
  padding: 1.2rem;
}
.cat-info h4 {
  font-size: 1rem;
  color: var(--white);
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
}
.cat-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.cat-actions .btn {
  flex: 1;
  justify-content: center;
  font-size: .62rem;
  padding: .45rem .7rem;
}

/* ── PDF Popup ── */
.cat-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cat-popup.open { display: flex; }

.cat-popup-inner {
  background: var(--white);
  border-radius: 14px;
  width: min(900px, 96vw);
  height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  position: relative;
  z-index: 9001;
}

/* Popup header */
.cat-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--dark);
  border-bottom: 1px solid rgba(201,168,76,.2);
  flex-shrink: 0;
}
.cat-popup-head h3 {
  color: var(--white);
  font-size: 1rem;
  margin: 0;
  font-family: var(--font-serif);
}
.cat-popup-controls {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}
.cat-popup-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background .2s;
}
.cat-popup-close:hover { background: var(--gold); color: var(--dark); }

/* Popup body */
.cat-popup-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
}
#cat-popup-iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
}

/* Fallback (when iframe blocked) */
.cat-popup-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--off-white);
  text-align: center;
  padding: 2rem;
}
.cat-popup-fallback i {
  font-size: 4rem;
  color: var(--border-gold);
}
.cat-popup-fallback p {
  color: var(--text-light);
  font-size: .95rem;
}
.cat-popup-fallback.show { display: flex; }
#cat-popup-iframe.hidden { display: none; }

/* Backdrop */
.cat-popup-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}
.cat-popup-backdrop.show { display: block; }

/* Responsive */
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .cat-popup-head h3 { font-size: .85rem; }
  .cat-actions { flex-direction: column; }
}
@media (max-width: 380px) {
  .cat-grid { grid-template-columns: 1fr; }
}