/* =============================================
   EPIC CABINETS — Global Stylesheet
   Brand: Dark charcoal, warm gold, cream white
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  --gold:        #B5912A;
  --gold-light:  #D4AF5A;
  --gold-pale:   #F5EDD6;
  --charcoal:    #1C1A18;
  --charcoal-mid:#2E2B27;
  --stone:       #3D3933;
  --warm-grey:   #8C8680;
  --cream:       #FAF8F4;
  --white:       #FFFFFF;
  --text-dark:   #1C1A18;
  --text-mid:    #4A4540;
  --text-light:  #8C8680;
  --border:      rgba(181,145,42,0.18);
  --shadow-sm:   0 2px 12px rgba(28,26,24,0.08);
  --shadow-md:   0 8px 40px rgba(28,26,24,0.14);
  --shadow-lg:   0 20px 60px rgba(28,26,24,0.18);
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --transition:  all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  --nav-height:  76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a  { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  line-height: 1.15;
  color: var(--charcoal);
}
h1 { font-size: clamp(2.2rem, 5.5vw, 4.8rem); font-weight: 400; }
h2 { font-size: clamp(1.7rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.85rem); }
h4 { font-size: clamp(1rem, 1.8vw, 1.25rem); }
p  { line-height: 1.78; color: var(--text-mid); }

.section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.6rem;
}

/* Utility */
.container      { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.text-center    { text-align: center; }
.text-gold      { color: var(--gold); }

.gold-line { width: 56px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); display: block; margin: 1rem 0 1.6rem; }
.gold-line.center { margin: 1rem auto 1.6rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-sm); transition: var(--transition);
  white-space: nowrap;
}
.btn-gold    { background: linear-gradient(135deg,var(--gold),var(--gold-light)); color:#fff; box-shadow:0 4px 20px rgba(181,145,42,.35); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(181,145,42,.45); }
.btn-outline { border:1.5px solid var(--gold); color:var(--gold); background:transparent; }
.btn-outline:hover { background:var(--gold); color:#fff; transform:translateY(-2px); }
.btn-white  { background:#fff; color:var(--charcoal); }
.btn-white:hover  { background:var(--gold-pale); transform:translateY(-2px); }
.btn-dark   { background:var(--charcoal); color:#fff; }
.btn-dark:hover   { background:var(--stone); transform:translateY(-2px); }

/* Sections */
.section    { padding: clamp(60px,8vw,110px) 0; }
.section-sm { padding: clamp(40px,5vw,70px) 0; }
.section-lg { padding: clamp(80px,10vw,140px) 0; }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }
.reveal-delay-5 { transition-delay:.5s; }

/* ============ NAVIGATION ============ */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; height:var(--nav-height); transition:var(--transition);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 clamp(16px,4vw,40px);
}
.nav.scrolled    { background:rgba(28,26,24,.97); backdrop-filter:blur(12px); box-shadow:0 2px 30px rgba(0,0,0,.25); }
.nav.transparent { background:transparent; }
.nav.light-nav   { background:rgba(250,248,244,.97); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm); }

.nav-logo img { height:38px; width:auto; transition:var(--transition); }
/* Dark background: show logo as white */
.nav.transparent .nav-logo img,
.nav.scrolled .nav-logo img { filter:brightness(0) invert(1); }
/* Light nav: show natural colours */
.nav.light-nav .nav-logo img { filter:none; }

.nav-links { display:flex; align-items:center; gap:2.2rem; }
.nav-links a {
  font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82); transition:color .25s; position:relative;
}
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1.5px; background:var(--gold); transition:width .3s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav.light-nav .nav-links a { color:var(--text-dark); }
.nav.light-nav .nav-links a:hover { color:var(--gold); }
.nav-cta { margin-left:.8rem; }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:6px; z-index:10; }
.nav-toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:var(--transition); display:block; }
.nav.light-nav .nav-toggle span { background:var(--charcoal); }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Nav Overlay */
.nav-mobile {
  display:none; position:fixed; inset:0;
  background:var(--charcoal); z-index:999;
  flex-direction:column; align-items:center; justify-content:center; gap:2rem;
}
.nav-mobile.open { display:flex; }
.nav-mobile a { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:#fff; transition:color .25s; }
.nav-mobile a:hover { color:var(--gold); }
.nav-mobile .nav-mobile-btn { margin-top:.5rem; font-size:.8rem !important; font-family:'DM Sans',sans-serif !important; }
.nav-mobile-close { position:absolute; top:20px; right:24px; font-size:2rem; color:#fff; cursor:pointer; line-height:1; }
.nav-mobile-logo  { position:absolute; top:22px; left:24px; }
.nav-mobile-logo img { height:34px; filter:brightness(0) invert(1); }

/* ============ FOOTER ============ */
.footer { background:var(--charcoal); color:rgba(255,255,255,.75); padding:clamp(50px,7vw,80px) 0 0; }
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(1.5rem,3vw,3rem); padding-bottom:clamp(40px,5vw,60px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand img { height:40px; filter:brightness(0) invert(1); margin-bottom:1.2rem; }
.footer-brand p { font-size:.87rem; color:rgba(255,255,255,.55); line-height:1.8; max-width:270px; }
.footer-stars { display:flex; align-items:center; gap:4px; margin-top:1.2rem; }
.footer-stars .star { color:var(--gold); font-size:.95rem; }
.footer-stars span { font-size:.78rem; color:rgba(255,255,255,.5); margin-left:6px; }
.footer-col h5 { font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.footer-col ul li { margin-bottom:.6rem; }
.footer-col ul li a { font-size:.86rem; color:rgba(255,255,255,.6); transition:color .25s; }
.footer-col ul li a:hover { color:var(--gold-light); }
.footer-contact-item { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.8rem; font-size:.86rem; color:rgba(255,255,255,.6); }
.footer-contact-item .icon { color:var(--gold); font-size:.95rem; margin-top:2px; flex-shrink:0; }
.footer-bottom { padding:20px 0; display:flex; align-items:center; justify-content:space-between; font-size:.76rem; color:rgba(255,255,255,.3); flex-wrap:wrap; gap:.5rem; }
.footer-bottom a { color:rgba(255,255,255,.4); transition:color .25s; }
.footer-bottom a:hover { color:var(--gold); }

/* ============ TRUST BAR ============ */
.trust-bar { background:var(--charcoal-mid); padding:14px 0; border-top:1px solid rgba(181,145,42,.18); border-bottom:1px solid rgba(181,145,42,.18); }
.trust-bar-inner { display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,2vw,2.5rem); flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:500; color:rgba(255,255,255,.72); letter-spacing:.03em; }
.trust-item .icon { color:var(--gold); font-size:1rem; }
.trust-divider { width:1px; height:16px; background:rgba(255,255,255,.12); }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero { position:relative; padding:clamp(120px,15vw,170px) 0 clamp(60px,8vw,110px); background:var(--charcoal); overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23B5912A' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.page-hero-deco { position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(181,145,42,.08) 0%,transparent 70%); pointer-events:none; }
.page-hero-content { position:relative; z-index:2; }
.page-hero h1 { color:#fff; margin-bottom:.8rem; }
.page-hero p  { color:rgba(255,255,255,.62); font-size:clamp(.95rem,1.5vw,1.1rem); max-width:560px; }

.breadcrumb { display:flex; align-items:center; gap:.5rem; margin-bottom:1.2rem; font-size:.76rem; color:rgba(255,255,255,.38); flex-wrap:wrap; }
.breadcrumb a { color:rgba(255,255,255,.48); transition:color .25s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb .sep { color:rgba(255,255,255,.2); }

/* ============ REVIEW BADGE ============ */
.review-badge { display:inline-flex; align-items:center; gap:10px; background:rgba(181,145,42,.1); border:1px solid rgba(181,145,42,.3); border-radius:40px; padding:8px 18px; }
.review-badge .stars { display:flex; gap:3px; }
.review-badge .stars span { color:var(--gold); font-size:.9rem; }
.review-badge .label { font-size:.76rem; font-weight:500; color:rgba(255,255,255,.78); letter-spacing:.04em; }
.review-badge.dark .label { color:var(--text-mid); }
.review-badge.dark { background:rgba(181,145,42,.07); border-color:rgba(181,145,42,.22); }

/* ============ CARDS ============ */
.card { background:#fff; border-radius:var(--radius-md); overflow:hidden; transition:var(--transition); box-shadow:var(--shadow-sm); }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card-img { position:relative; overflow:hidden; aspect-ratio:4/3; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.card:hover .card-img img { transform:scale(1.05); }
.card-body { padding:1.5rem; }
.card-tag { font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.card-title { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:500; color:var(--charcoal); margin-bottom:.5rem; line-height:1.3; }
.card-text { font-size:.86rem; color:var(--text-mid); line-height:1.72; }

/* ============ FORMS ============ */
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mid); margin-bottom:.45rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.82rem 1rem;
  background:var(--cream); border:1.5px solid rgba(28,26,24,.12);
  border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif; font-size:.95rem; color:var(--text-dark);
  transition:border-color .25s,box-shadow .25s; outline:none;
  -webkit-appearance:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(181,145,42,.1); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }

/* ============ RESPONSIVE BREAKPOINTS ============ */

/* Tablet */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
}

/* Mobile */
@media (max-width:768px) {
  :root { --nav-height:64px; }

  body { font-size:15px; }

  .section    { padding:60px 0; }
  .section-sm { padding:40px 0; }
  .section-lg { padding:70px 0; }

  h1 { font-size:2.1rem; line-height:1.15; }
  h2 { font-size:1.7rem; }
  h3 { font-size:1.3rem; }
  p  { font-size:.92rem; }

  .footer-grid { grid-template-columns:1fr; gap:1.8rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .footer-brand p { max-width:100%; }

  .page-hero { padding:120px 0 60px; }
  .page-hero h1 { font-size:2rem; }
  .page-hero p  { font-size:.92rem; }

  .trust-bar-inner { gap:.8rem; }
  .trust-item { font-size:.72rem; }
  .trust-divider { display:none; }

  .form-row { grid-template-columns:1fr; gap:0; }

  .btn { padding:.75rem 1.4rem; font-size:.76rem; }

  .gold-line { margin-bottom:1.2rem; }
}

/* Small mobile */
@media (max-width:480px) {
  h1 { font-size:1.85rem; }
  h2 { font-size:1.55rem; }
  .section-label { font-size:.65rem; }
  .nav-mobile a { font-size:1.75rem; }
}