/* ==================================================================
   ROYALLIV — DARK LUXURY THEME  (CodeIgniter 4 front views)
   File location:  public/front/css/dark-theme.css
   Loaded by:      app/Views/front/header.php
   ------------------------------------------------------------------
   Palette (from approved mockup):
     Black bg .... #0A0A0A / #0E0E0E / #141414 / #1A1611
     Gold ........ #CCA86C → #B48448 (accents, buttons, headings)
     Bronze/wood . #603C24 / #543C24
     Text ........ #F5F1E8 · muted #A9A296
   Fonts: Playfair Display (headings) + Space Grotesk (body)
   ================================================================== */
:root{
  --bg-0:#0A0A0A; --bg-1:#0E0E0E; --bg-2:#141414; --bg-3:#1A1611;
  --gold:#CCA86C; --gold-2:#CC9C60; --gold-deep:#B48448; --gold-light:#E5C689;
  --bronze:#603C24; --wood:#543C24;
  --text:#F5F1E8; --muted:#A9A296; --line:rgba(204,168,108,.18);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk','Segoe UI',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-0);color:var(--text);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.38em;color:var(--gold);text-transform:uppercase;font-weight:600}
.eyebrow::before{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head{max-width:660px;margin-bottom:52px}
.sec-head.center{margin:0 auto 52px;text-align:center}
.sec-head.center .eyebrow{justify-content:center}.sec-head.center .eyebrow::before{display:none}
.sec-head h2{font-size:clamp(30px,4vw,46px);margin-top:16px}
.sec-head h2 span{color:var(--gold)}
.sec-head p{color:var(--muted);margin-top:14px;font-size:15px}
section{padding:96px 0}
.imgfx{filter:saturate(.82) contrast(1.05) brightness(.86);transition:.6s}

/* buttons & links */
.btn-gold{display:inline-block;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:#120D06!important;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:14px 28px;border:none;transition:.25s;cursor:pointer}
.btn-gold:hover{filter:brightness(1.12);transform:translateY(-1px);color:#120D06}
.btn-ghost{display:inline-block;border:1px solid var(--gold);color:var(--gold)!important;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:13px 28px;transition:.25s;background:transparent;cursor:pointer}
.btn-ghost:hover{background:var(--gold);color:#120D06!important}
.link-gold{color:var(--gold);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:.25s}
.link-gold:hover{gap:14px;color:var(--gold-light)}

/* ---------------- header / nav ---------------- */
header{position:sticky;top:0;z-index:100;background:rgba(10,10,10,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{font-family:var(--serif);font-size:26px;letter-spacing:.14em;font-weight:700;flex:none}
.logo em{font-style:normal;color:var(--gold)}
.logo small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.4em;color:var(--muted);font-weight:400;margin-top:2px}
.menu{display:flex;gap:6px}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;padding:10px 12px;transition:.25s}
.menu>li>a:hover,.menu>li>a.on{color:var(--gold)}
.caret{font-size:8px;color:var(--gold)}
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:min(860px,90vw);background:var(--bg-1);border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;opacity:0;visibility:hidden;transition:.28s;box-shadow:0 30px 60px rgba(0,0,0,.6);max-height:70vh;overflow:auto}
.menu>li:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega h6{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;font-family:var(--sans)}
.mega a{display:block;font-size:12.5px;color:var(--muted);padding:5px 0;transition:.2s}
.mega a:hover{color:var(--gold);padding-left:6px}
.nav-cta{display:flex;align-items:center;gap:16px;flex:none}
.login-link{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.login-link:hover{color:var(--gold)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--gold);font-size:16px;padding:8px 12px;cursor:pointer}
.mobile-nav{display:none;background:var(--bg-1);border-bottom:1px solid var(--line);padding:18px 24px 26px;max-height:70vh;overflow:auto}
.mobile-nav a{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:9px 0;border-bottom:1px solid rgba(204,168,108,.08)}
.mobile-nav a:hover{color:var(--gold)}
.mobile-nav h6{margin:16px 0 6px;font-size:10px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.mobile-nav.open{display:block}

/* ---------------- hero slider ---------------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover}
.hero .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 45%,rgba(96,60,36,.25) 100%)}
.hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 24px;width:100%}
.hero .eyebrow{animation:up .8s .1s both}
.hero h1{font-size:clamp(42px,6vw,78px);margin:22px 0 20px;max-width:820px;animation:up .8s .25s both}
.hero h1 span{color:transparent;background:linear-gradient(120deg,var(--gold-light),var(--gold) 45%,var(--gold-deep));-webkit-background-clip:text;background-clip:text}
.hero p{color:#CFC8BB;max-width:520px;font-size:16px;animation:up .8s .4s both}
.hero-btns{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;animation:up .8s .55s both}
.hero-dots{position:absolute;right:40px;bottom:44px;z-index:3;display:flex;gap:20px}
.hero-dots button{background:none;border:none;color:var(--muted);font-size:11px;letter-spacing:.2em;cursor:pointer;padding:6px 2px;border-bottom:1px solid transparent;font-family:var(--sans)}
.hero-dots button.on{color:var(--gold);border-color:var(--gold)}
.scroll-hint{position:absolute;left:40px;bottom:44px;z-index:3;color:var(--muted);font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.scroll-hint::after{content:"";width:1px;height:38px;background:linear-gradient(var(--gold),transparent)}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------------- feature strip ---------------- */
.features{border-bottom:1px solid var(--line);background:var(--bg-1)}
.features .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.feat{background:var(--bg-1);padding:30px 18px;text-align:center;transition:.3s}
.feat:hover{background:var(--bg-3)}
.feat .ic{font-size:24px;color:var(--gold)}
.feat h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:12px;font-weight:600}

/* ---------------- about ---------------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-imgs{position:relative}
.img-main{border:1px solid var(--line);padding:12px;background:var(--bg-2)}
.img-main img{width:100%;height:440px;object-fit:cover}
.img-float{position:absolute;right:-28px;bottom:-42px;width:52%;border:1px solid var(--line);padding:10px;background:var(--bg-2)}
.img-float img{width:100%;height:170px;object-fit:cover}
.badge-exp{position:absolute;left:-18px;top:-18px;width:98px;height:98px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#120D06;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;box-shadow:0 12px 34px rgba(204,168,108,.3);z-index:2}
.badge-exp b{font-family:var(--serif);font-size:26px;line-height:1}
.badge-exp i{font-style:normal;font-size:8px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.about-copy p{color:var(--muted);font-size:15px;margin:18px 0 14px}
.about-badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 30px}
.about-badges span{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.06em;color:var(--text);border:1px solid var(--line);padding:11px 14px;background:var(--bg-1)}
.about-badges b{color:var(--gold)}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:88px}
.stat{background:var(--bg-1);padding:36px 20px;text-align:center;transition:.3s}
.stat:hover{background:var(--bg-3)}
.stat b{display:block;font-family:var(--serif);font-size:40px;color:var(--gold);font-weight:600}
.stat i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:8px}

/* ---------------- process ---------------- */
.process{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.proc{border:1px solid var(--line);background:var(--bg-2);padding:34px 26px;position:relative;transition:.35s}
.proc:hover{transform:translateY(-6px);border-color:rgba(204,168,108,.45)}
.proc .num{font-family:var(--serif);font-size:44px;color:transparent;-webkit-text-stroke:1px var(--gold);line-height:1}
.proc h4{font-size:19px;margin:18px 0 10px}
.proc p{font-size:13.5px;color:var(--muted)}
.proc::after{content:"→";position:absolute;right:-18px;top:50%;color:var(--gold);font-size:16px}
.proc:last-child::after{display:none}

/* ---------------- cards (collections / products) ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{position:relative;border:1px solid var(--line);background:var(--bg-2);overflow:hidden;transition:.35s;display:block}
.card:hover{transform:translateY(-6px);border-color:rgba(204,168,108,.45)}
.card .ph{height:240px;overflow:hidden;position:relative;background:linear-gradient(135deg,#241A10,#3A2A18 55%,#603C24)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.85))}
.card:hover .ph img{transform:scale(1.07)}
.card-body{padding:20px 22px;display:flex;align-items:center;justify-content:space-between}
.card-body h3{font-size:21px}
.card-body small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:5px}
.card-body small.clamp1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;text-transform:none;letter-spacing:.04em}
.arrow{width:42px;height:42px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);transition:.3s;flex:none}
.card:hover .arrow{background:var(--gold);color:#120D06;border-color:var(--gold)}

/* ---------------- projects ---------------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{position:relative;height:330px;overflow:hidden;border:1px solid var(--line);display:block;background:linear-gradient(135deg,#241A10,#603C24)}
.proj img{width:100%;height:100%;object-fit:cover;transition:.6s}
.proj:hover img{transform:scale(1.07)}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.92))}
.proj .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;display:flex;justify-content:space-between;align-items:center}
.proj .cap h4{font-size:19px}
.proj .cap small{font-size:10px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px;gap:20px;flex-wrap:wrap}
.head-row .sec-head{margin-bottom:0}

/* ---------------- services ---------------- */
.svc{background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.svc-card{border:1px solid var(--line);background:var(--bg-2);overflow:hidden;transition:.35s;display:block}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(204,168,108,.45)}
.svc-card .ph{height:210px;overflow:hidden;background:linear-gradient(135deg,#241A10,#603C24)}
.svc-card .ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
.svc-card:hover .ph img{transform:scale(1.07)}
.svc-card .bd{padding:22px}
.svc-card h4{font-size:19px}
.svc-card p{font-size:13px;color:var(--muted);margin-top:8px}
.call-band{margin-top:64px;border:1px solid var(--line);background:radial-gradient(600px 200px at 50% 130%,rgba(204,168,108,.14),transparent 70%),var(--bg-2);padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.call-band h3{font-size:clamp(22px,3vw,32px)}
.call-band h3 b{color:var(--gold);font-family:var(--serif)}
.call-band p{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* ---------------- inner page hero ---------------- */
.page-hero{position:relative;padding:120px 0 84px;border-bottom:1px solid var(--line);overflow:hidden;background:
  radial-gradient(800px 400px at 80% 10%,rgba(96,60,36,.45),transparent 60%),
  radial-gradient(600px 300px at 15% 90%,rgba(204,168,108,.08),transparent 60%),var(--bg-1)}
.page-hero h1{font-size:clamp(34px,5vw,58px);margin-top:18px}
.page-hero h1 span{color:var(--gold)}
.page-hero p{color:var(--muted);max-width:560px;margin-top:14px}
.crumb{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:22px}
.crumb a{color:var(--gold)}
.crumb i{font-style:normal;color:#5C564B}

/* ---------------- contact ---------------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.c-info .row{display:flex;gap:16px;margin-bottom:22px}
.c-info .ic{width:48px;height:48px;flex:none;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;background:var(--bg-1)}
.c-info h5{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.c-info p{color:var(--muted);font-size:14px;margin-top:4px}
form .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{margin-bottom:16px}
.f-field input,.f-field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--text);padding:16px;font-size:14px;font-family:var(--sans);outline:none;transition:.25s}
.f-field textarea{min-height:130px;resize:vertical}
.f-field input:focus,.f-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(204,168,108,.12)}
.f-field input::placeholder,.f-field textarea::placeholder{color:#6E685D}
.form-note{color:var(--gold);font-size:13px;margin-top:14px}
.form-note.err{color:#E0908A}

/* ---------------- detail pages (service / product) ---------------- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.detail-grid .frame{border:1px solid var(--line);padding:12px;background:var(--bg-2)}
.detail-grid .frame img{width:100%;height:460px;object-fit:cover}
.detail-copy p{color:var(--muted);margin:18px 0}
.detail-meta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 30px}
.detail-meta span{border:1px solid var(--line);background:var(--bg-1);color:var(--gold);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 16px}

/* ---------------- team / architects / carpenters ---------------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.team-card{border:1px solid var(--line);background:var(--bg-2);overflow:hidden;transition:.35s}
.team-card:hover{transform:translateY(-6px);border-color:rgba(204,168,108,.45)}
.team-card .ph{height:260px;overflow:hidden;background:linear-gradient(135deg,#241A10,#603C24)}
.team-card .ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
.team-card:hover .ph img{transform:scale(1.06)}
.team-card .bd{padding:18px 20px;text-align:center}
.team-card h4{font-size:18px}
.team-card small{display:block;font-size:10px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-top:6px}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);background:var(--bg-0);padding-top:64px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:48px}
.foot-grid h5{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-family:var(--sans)}
.foot-grid p,.foot-grid a{color:var(--muted);font-size:13.5px;display:block;margin-bottom:10px;transition:.25s}
.foot-grid a:hover{color:var(--gold);padding-left:4px}
.foot-bar{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:10px}
.soc{display:flex;gap:12px;margin-top:16px}
.soc a{width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);margin:0;font-size:13px}
.soc a:hover{background:var(--gold);color:#120D06;padding:0}

/* ---------------- gallery grid (projects / service portfolio / products) ---------------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g-item{position:relative;display:block;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,#241A10,#603C24);aspect-ratio:4/3}
.g-item img{width:100%;height:100%;object-fit:cover;transition:.6s}
.g-item:hover img{transform:scale(1.08)}
.g-item .g-cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.55);opacity:0;transition:.3s;color:var(--gold);font-size:22px}
.g-item:hover .g-cap{opacity:1}
@media(max-width:1060px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------- team socials ---------------- */
.t-soc{display:flex;gap:8px;justify-content:center;margin-top:12px}
.t-soc a{width:32px;height:32px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:12px;transition:.25s}
.t-soc a:hover{background:var(--gold);color:#120D06}

/* ---------------- floating WhatsApp ---------------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#120D06!important;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 12px 30px rgba(204,168,108,.35);transition:.25s}
.wa-float:hover{transform:scale(1.08)}

/* ---------------- responsive ---------------- */
@media(max-width:1060px){
  .menu{display:none}.burger{display:block}
  .features .wrap{grid-template-columns:repeat(2,1fr)}
  .proc-grid,.svc-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
  .cards,.proj-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid,.detail-grid{grid-template-columns:1fr}
  .img-float{display:none}
  .proc::after{display:none}
}
@media(max-width:640px){
  .cards,.proj-grid,.features .wrap,.proc-grid,.svc-grid,.team-grid,form .frow{grid-template-columns:1fr}
  section{padding:64px 0}
  .page-hero{padding:84px 0 60px}
  .hero-dots{right:24px;bottom:28px}
  .foot-grid{grid-template-columns:1fr}
}