/* ============ Site-wide non-inlineable styles ============ */
html { scroll-behavior: smooth; }
html, body { margin:0; padding:0; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
a:hover { color:#c8a15a; }
::selection { background:#c8a15a; color:#0a0908; }

/* Nav active state */
.nav-link { position:relative; padding-bottom:4px; transition: color .25s ease; }
.nav-link.active { color:#c8a15a; }
.nav-link.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:#c8a15a;
}

/* Reveal animation */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }

/* Card hover */
.card { transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.card:hover {
  transform: translateY(-4px);
  border-color:#c8a15a !important;
  background:#12100e !important;
  box-shadow: 0 24px 60px -30px rgba(200,161,90,0.35), 0 0 0 1px rgba(200,161,90,0.15);
}

/* Golden button hover */
.btn-gold { transition: filter .25s ease, transform .25s ease; }
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-ghost { transition: border-color .25s ease, background .25s ease, color .25s ease; }
.btn-ghost:hover { border-color:#c8a15a; color:#c8a15a; background:rgba(200,161,90,0.06); }

/* Mobile menu button */
html, body { overflow-x: hidden; max-width: 100%; }
.menu-toggle { display:none; background:none; border:1px solid rgba(200,161,90,0.3); color:#c8a15a;
  width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .hero-portrait { height: 70vh !important; min-height: 520px !important; max-height:720px; }
  .hero-portrait-photo { object-position: center 28% !important; }
  .grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-5-process { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 24px !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .section-header-2col { grid-template-columns: 1fr !important; gap: 32px !important; }
  .service-row { grid-template-columns: 80px 1fr !important; gap: 24px !important; }
  .service-row > *:nth-child(3), .service-row > *:nth-child(4) { grid-column: 1 / -1 !important; }
  .service-row > *:nth-child(4) { justify-self: start !important; }
  .compare-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}
@media (max-width: 1000px) {
  .nav-links { display:none !important; }
  .menu-toggle { display:flex; }
  .nav-cta-desktop { display:none !important; }
  .nav-cta-phone { display:none !important; }
}
@media (max-width: 780px) {
  .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr !important; }
  .service-fields { grid-template-columns: 1fr !important; }
  .grid-5-process { grid-template-columns: 1fr !important; }
  .grid-5-process .process-line { display:none !important; }
  .hero-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  section { padding-left: 24px !important; padding-right: 24px !important; }
  header .header-inner { padding-left:20px !important; padding-right:20px !important; }
  .h-hero { font-size: clamp(38px, 10vw, 60px) !important; }
  .h-section { font-size: clamp(30px, 7vw, 44px) !important; }
  .h-contact { font-size: clamp(32px, 9vw, 60px) !important; word-break: break-word; }
}
@media (max-width: 480px) {
  .card { padding: 28px 20px !important; word-wrap: break-word; overflow-wrap: break-word; }
  .card [style*="Playfair Display"] { font-size: clamp(20px, 6vw, 32px) !important; }
  body { overflow-x: hidden; }
  .service-row { grid-template-columns: 1fr !important; padding: 28px 22px !important; }
  .service-num { font-size: 32px !important; }
  .hero-portrait { height: 74vh !important; min-height: 560px !important; }
  .hero-portrait-photo { object-position: center 20% !important; }
  .hero-quote-box { left: 16px !important; right: 16px !important; bottom: 16px !important; padding: 14px 18px !important; }
  .hero-quote-box div { font-size: 14px !important; line-height: 1.35 !important; }
  .about-stats { grid-template-columns: 1fr !important; }
  .brand-sub { display:none; }
  section { padding-top: 80px !important; padding-bottom: 80px !important; }
  .hero-section { padding-top: 56px !important; }
}
@media (max-width: 480px) {
  .nav-cta-phone { display:none !important; }
  .hero-stats { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* Mobile menu drawer */
.mobile-menu {
  position:fixed; inset:0; z-index:100; background:rgba(10,9,8,0.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu a {
  font-family:'Playfair Display', serif; font-size:32px; color:#f4efe6; letter-spacing:0.02em;
}
.mobile-menu a:hover, .mobile-menu a.active { color:#c8a15a; }
.mobile-menu-close {
  position:absolute; top:24px; right:24px; background:none; border:1px solid rgba(200,161,90,0.35);
  color:#c8a15a; width:48px; height:48px; cursor:pointer;
  font-size:20px; display:flex; align-items:center; justify-content:center;
}

/* ============ Custom cursor (desktop only) ============ */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'><path d='M3 2.2 L3 21.6 L8.2 16.8 L11.4 23.6 L14.4 22.2 L11.1 15.6 L17.8 15.1 Z' fill='%23000' stroke='%23C9A15A' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>") 3 2, auto;
  }
  a, button, [role="button"], .card, .btn-gold, .btn-ghost, .menu-toggle, .mobile-menu-close, .nav-link, label, summary, select, [data-nav] {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 26 28'><path d='M3 2.2 L3 21.6 L8.2 16.8 L11.4 23.6 L14.4 22.2 L11.1 15.6 L17.8 15.1 Z' fill='%23C9A15A' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/><circle cx='21' cy='7' r='2.4' fill='%23C9A15A' stroke='%23000' stroke-width='1'/></svg>") 3 2, pointer;
  }
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea {
    cursor: text;
  }
}

/* FAQ accordion */
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary { transition: background .25s ease; }
.faq-item:hover summary { background: rgba(200,161,90,0.04); }
.faq-plus { transition: transform .35s cubic-bezier(.22,.61,.36,1); user-select: none; -webkit-user-select: none; -moz-user-select: none; pointer-events: none; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
@media (max-width: 780px) {
  .faq-compare { grid-template-columns: 1fr !important; }
  .faq-item summary { gap: 16px !important; padding: 22px 4px !important; }
  .faq-item summary > span:nth-child(2) { font-size: 16px !important; }
  .faq-item > div { padding-left: 4px !important; padding-right: 4px !important; }
  .faq-item > div[style*="padding:0 8px 32px 84px"] { padding-left: 4px !important; }
}

/* Anchor offset for sticky header */
section[id] { scroll-margin-top: 90px; }

/* Contact form */
.contact-form input:focus,
.contact-form textarea:focus { border-color: #c8a15a !important; }
.contact-form input.cf-invalid,
.contact-form textarea.cf-invalid { border-color: #d46a5a !important; }
.contact-form [data-cf-submit]:not([disabled]) { opacity: 1 !important; pointer-events: auto !important; }
@media (max-width: 780px) {
  .contact-form .cf-row { grid-template-columns: 1fr !important; }
}

/* Prevent motion for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .card { transition:none; }
}
