/* =========================================================
   THE QUAD BUILDERS — base.css
   Core layout, colors, typography, and components.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --maroon-950:#3c0e14;
  --maroon-900:#5a1620;
  --maroon-800:#711b27;
  --maroon-700:#8a222f;
  --gold-600:#b9862f;
  --gold-500:#c79a4b;
  --gold-300:#e0c48a;
  --cream-100:#faf7f0;
  --cream-200:#f3ede1;
  --ink-900:#211a16;
  --ink-700:#4a4038;
  --ink-500:#7a6e63;
  --line:#e4dccb;
  --radius-s:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Work Sans", sans-serif;
  color:var(--ink-900);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Playfair Display", serif;margin:0;font-weight:700;color:var(--ink-900);}
p{margin:0;line-height:1.6;color:var(--ink-700);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px;}
button{font-family:inherit;cursor:pointer;}

/* ---------- Top bar ---------- */
.topbar{background:var(--maroon-950);color:#e9dcc9;font-size:13px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 32px;flex-wrap:wrap;gap:8px;}
.topbar-left,.topbar-right{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.topbar span{opacity:.92;}

/* ---------- Header ---------- */
.site-header{background:#fffdfa;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;transition:box-shadow .25s;}
.site-header.scrolled{box-shadow:0 8px 24px -18px rgba(60,14,20,.5);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-mark{width:46px;height:46px;border-radius:var(--radius-s);background:linear-gradient(155deg,var(--maroon-800),var(--maroon-950));display:flex;align-items:center;justify-content:center;flex:none;color:var(--gold-300);}
.brand-mark svg{width:24px;height:24px;}
.brand-word{line-height:1.05;}
.brand-word .t1{font-family:"Playfair Display",serif;font-weight:700;font-size:20px;letter-spacing:.3px;color:var(--maroon-900);}
.brand-word .t3{font-size:9.5px;letter-spacing:1.5px;color:var(--gold-600);margin-top:2px;}

nav.main{display:flex;gap:32px;align-items:center;}
nav.main a{font-size:14.5px;font-weight:500;color:var(--ink-700);position:relative;padding-bottom:4px;transition:color .15s;}
nav.main a:hover{color:var(--maroon-800);}
nav.main a.active{color:var(--maroon-800);}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--maroon-800);}
nav.main a.mobile-quote{display:none;}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-size:14px;font-weight:600;border-radius:var(--radius-s);border:1px solid transparent;transition:transform .2s ease, box-shadow .2s ease, background .15s;}
.btn svg{width:14px;height:14px;transition:transform .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--maroon-800);color:#fff;}
.btn-primary:hover{background:var(--maroon-900);box-shadow:0 14px 26px -14px rgba(90,22,32,.6);}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-gold{background:var(--gold-500);color:var(--maroon-950);}
.btn-gold:hover{background:var(--gold-600);box-shadow:0 14px 26px -14px rgba(199,154,75,.7);}
.btn-ghost{background:transparent;color:var(--maroon-800);border-color:var(--maroon-800);}
.btn-ghost:hover{background:var(--maroon-800);color:#fff;}

.menu-toggle{display:none;background:none;border:none;padding:6px;}
.menu-toggle svg{width:24px;height:24px;color:var(--maroon-900);}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:-4%;z-index:-2;
  background-image:url('../img/projects/hero-rooftop-aerial-twilight.jpg');
  background-size:cover;background-position:center 65%;
  animation:heroKenBurns 22s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(20,14,12,.88) 15%, rgba(20,14,12,.55) 55%, rgba(20,14,12,.22) 100%);
}
.hero .wrap{position:relative;z-index:2;padding:100px 32px;}
.eyebrow{font-size:12.5px;letter-spacing:2.2px;color:var(--gold-300);font-weight:600;margin-bottom:16px;}
.hero h1{color:#fff;font-size:52px;line-height:1.12;max-width:640px;letter-spacing:.2px;text-shadow:0 4px 24px rgba(0,0,0,.35);}
.hero h1 .accent{color:var(--gold-300);font-style:italic;font-weight:600;}
.hero p.lead{color:#e9e2d6;font-size:16.5px;max-width:460px;margin-top:20px;}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

.gst-badge{position:absolute;right:32px;bottom:34px;z-index:3;background:rgba(12,9,8,.82);backdrop-filter:blur(3px);border:1px solid rgba(224,196,138,.35);border-radius:var(--radius-s);padding:12px 16px;display:flex;gap:11px;align-items:center;color:#f1e9da;}
.gst-badge::before{
  content:"";width:26px;height:26px;flex:none;
  background:var(--gold-300);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'><path d='M12 2 4 5v6c0 5 3.4 8.7 8 11 4.6-2.3 8-6 8-11V5z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'><path d='M12 2 4 5v6c0 5 3.4 8.7 8 11 4.6-2.3 8-6 8-11V5z'/></svg>") center/contain no-repeat;
}
.gst-badge .l1{font-size:10px;letter-spacing:1px;color:#c9bda8;}
.gst-badge .l2{font-size:13px;font-weight:600;letter-spacing:.4px;}

/* ---------- Info strip ---------- */
.strip{background:var(--cream-200);border-bottom:1px solid var(--line);}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 32px;}
.strip-item{display:flex;gap:14px;align-items:flex-start;padding:0 22px;border-left:1px solid var(--line);}
.strip-item:first-child{border-left:none;padding-left:0;}
.strip-item h4{font-size:15.5px;font-family:"Work Sans",sans-serif;font-weight:600;}
.strip-item p{font-size:13px;margin-top:3px;}

/* ---------- Reference icons (used across strip / feature cards) ---------- */
.reference-icon{width:26px;height:26px;flex:none;margin-top:2px;}

/* ---------- Section shell ---------- */
section{padding:78px 0;}
.section-head{margin-bottom:40px;}
.kicker{font-size:12.5px;letter-spacing:2px;color:var(--gold-600);font-weight:700;margin-bottom:10px;}
.section-head h2{font-size:34px;}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.link-arrow{font-size:14px;font-weight:600;color:var(--maroon-800);display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--gold-500);padding-bottom:2px;transition:gap .2s;}
.link-arrow:hover{gap:10px;}

/* ---------- Why choose ---------- */
.why{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start;}
.why-copy h2{font-size:32px;line-height:1.2;margin-top:6px;}
.why-copy p{margin-top:16px;font-size:15px;}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.feature-card{background:#fffdfa;padding:28px 24px;transition:transform .3s ease, box-shadow .3s ease;}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 18px 30px -20px rgba(60,14,20,.35);position:relative;z-index:1;}
.feature-card h3{font-family:"Playfair Display",serif;font-size:17px;margin-top:14px;}
.feature-card p{font-size:13px;margin-top:8px;}
.feature-card .reference-icon{width:30px;height:30px;color:var(--gold-600);}

/* ---------- Projects ---------- */
.projects{background:var(--cream-200);}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{background:#fffdfa;border:1px solid var(--line);overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;display:block;}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 38px -22px rgba(60,14,20,.4);}
.card-media{
  position:relative;height:220px;display:flex;align-items:flex-start;padding:16px;
  background-image:url('../img/projects/haflong-facade-sunset.jpg');
  background-size:cover;background-position:center;
}
.card-media.two{background-image:url('../img/projects/umrangso-resort-daytime.jpg');}
.card-media.three{background-image:url('../img/projects/rooftop-restaurant-dusk.jpg');}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(10,6,5,.55), rgba(10,6,5,0) 55%);transition:background .3s;}
.card:hover .card-media::after{background:linear-gradient(to top, rgba(10,6,5,.68), rgba(10,6,5,.05) 60%);}
.tag{position:relative;z-index:1;background:var(--gold-500);color:var(--maroon-950);font-size:11px;font-weight:700;padding:5px 11px;letter-spacing:.4px;border-radius:2px;}
.card-body{padding:20px 22px 24px;}
.card-body h3{font-size:18px;}
.meta{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:13px;color:var(--ink-500);}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start;}
.serv-copy h2{font-size:32px;line-height:1.2;margin-top:6px;}
.serv-copy p{margin-top:16px;font-size:15px;}
.serv-list{display:flex;flex-direction:column;gap:16px;}
.serv-row{display:grid;grid-template-columns:150px 1fr;gap:0;border:1px solid var(--line);background:#fffdfa;align-items:center;transition:transform .25s ease, box-shadow .25s ease;}
.serv-row:hover{transform:translateX(6px);box-shadow:0 14px 26px -20px rgba(60,14,20,.4);}
.serv-photo{height:100px;background-size:cover;background-position:center;position:relative;}
.serv-photo.s1{background-image:url('../img/interiors/bedroom-suite.jpg');}
.serv-photo.s2{background-image:url('../img/projects/haflong-facade-daytime.jpg');}
.serv-photo.s3{background-image:url('../img/projects/rooftop-restaurant-2.jpg');}
.serv-text{padding:14px 22px;}
.serv-text h4{font-size:16px;font-family:"Work Sans",sans-serif;font-weight:600;}
.serv-text p{font-size:13px;margin-top:5px;}

/* ---------- Video tour section ---------- */
.video-section{background:var(--cream-200);}
.video-copy{max-width:640px;margin:0 auto 40px;text-align:center;}
.video-copy h2{font-size:32px;margin-top:6px;}
.video-copy p{margin-top:14px;font-size:15px;}
.video-frame{
  position:relative;max-width:920px;margin:0 auto;border-radius:6px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(60,14,20,.45);
  border:1px solid var(--line);
  aspect-ratio:16/9;background:#000;
}
.video-frame video{width:100%;height:100%;display:block;object-fit:cover;}
.video-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(10,6,5,.35), rgba(10,6,5,0) 35%);
  transition:opacity .3s;
}
.video-frame.is-playing::after{opacity:0;}
.play-btn{
  position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;
  background:rgba(199,154,75,.95);border:3px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .25s ease, opacity .3s ease, background .2s;
  animation:pulseRing 2.6s ease-out infinite;
}
.play-btn:hover{transform:scale(1.08);background:var(--gold-600);}
.play-btn svg{width:28px;height:28px;color:var(--maroon-950);margin-left:4px;}
.video-frame.is-playing .play-btn{opacity:0;pointer-events:none;transform:scale(.8);}
.video-caption{text-align:center;margin-top:18px;font-size:13px;color:var(--ink-500);}

/* ---------- CTA ---------- */
.cta{
  position:relative;padding:80px 0;color:#fff;
  background:
    linear-gradient(100deg, rgba(15,10,9,.9) 20%, rgba(15,10,9,.6) 65%, rgba(15,10,9,.3) 100%),
    url('../img/projects/haflong-street-dusk.jpg');
  background-size:cover;background-position:center;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--maroon-950);color:#cbb99e;padding:52px 0 0;}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(224,196,138,.18);}
.foot-brand{display:flex;align-items:center;gap:12px;}
.foot-brand .brand-mark{background:linear-gradient(155deg,var(--gold-500),var(--gold-600));color:var(--maroon-950);width:38px;height:38px;}
.foot-brand .brand-mark svg{width:20px;height:20px;}
.foot-brand .t1{font-family:"Playfair Display",serif;color:#fff;font-size:18px;font-weight:700;}
.foot-brand .t2{font-size:10px;letter-spacing:1.5px;color:#a99a83;}
.site-footer nav{display:flex;gap:26px;flex-wrap:wrap;}
.site-footer nav a{font-size:13.5px;color:#d8cbb4;transition:color .2s;}
.site-footer nav a:hover{color:var(--gold-300);}
.foot-social{display:flex;gap:12px;}
.foot-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(224,196,138,.3);display:flex;align-items:center;justify-content:center;font-size:13px;transition:transform .25s ease, background .2s;}
.foot-social a:hover{transform:translateY(-4px);background:rgba(224,196,138,.12);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0 26px;font-size:12.5px;color:#a99a83;}
.foot-bottom .mid{display:flex;gap:24px;flex-wrap:wrap;}
.foot-bottom .tagline{color:var(--gold-300);font-weight:600;}

/* ---------- Generic page hero (for subpages) ---------- */
.hero.page-hero{min-height:320px;}
.hero.page-hero h1{font-size:38px;}
.breadcrumb{margin-top:18px;font-size:13px;color:#cdbfa9;display:flex;gap:8px;align-items:center;}
.breadcrumb a{color:var(--gold-300);}

@keyframes heroKenBurns{
  from{transform:scale(1) translate(0,0);}
  to{transform:scale(1.1) translate(-1%, -1%);}
}