/* ============ RESET & BASE ============ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --navy: #0e1420;
  --navy-2: #141b2b;
  --navy-3: #1b2438;
  --gold: #c8a24a;
  --gold-2: #e0c078;
  --cream: #f7f3ea;
  --white: #ffffff;
  --muted: #9aa3b5;
  --text: #2c3344;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 18px 45px rgba(14,20,32,.14);
  --ease: cubic-bezier(.22,.68,0,1);
}

html { scroll-behavior:smooth; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--cream);
  line-height: 1.65;
  overflow-x:hidden;
}

img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

.container { width:min(1200px, 92%); margin:0 auto; }

/* ============ KEYFRAMES ============ */
@keyframes fadeUp { from { opacity:0; transform:translateY(42px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes wheelMove { 0% { opacity:1; transform:translateY(0); } 70% { opacity:0; transform:translateY(14px); } 100% { opacity:0; } }
@keyframes pulseGold { 0%,100% { box-shadow:0 0 0 0 rgba(200,162,74,.45); } 50% { box-shadow:0 0 0 12px rgba(200,162,74,0); } }

.fade-up { opacity:0; animation:fadeUp .95s var(--ease) forwards; }
.fade-down { opacity:0; animation:fadeDown .95s var(--ease) forwards; }
.d1 { animation-delay:.15s; } .d2 { animation-delay:.32s; } .d3 { animation-delay:.5s; }
.d4 { animation-delay:.68s; } .d5 { animation-delay:.86s; }

/* Scroll reveal */
.reveal {
  opacity:0;
  transform:translateY(46px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ============ HEADER ============ */
.header {
  position:fixed; top:0; left:0; width:100%;
  z-index:1002;
  padding:18px 0;
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.header.scrolled {
  background:rgba(14,20,32,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:10px 0;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gold-2), var(--gold));
  color:var(--navy); font-family:var(--serif); font-weight:700; font-size:19px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(200,162,74,.35);
}
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { color:var(--white); font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.5px; }
.brand-sub { color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:2.6px; }

.nav-desktop { display:flex; align-items:center; gap:34px; }
.nav-link {
  color:rgba(255,255,255,.85);
  font-size:14.5px; font-weight:500; letter-spacing:.4px;
  position:relative; padding:6px 0;
  transition:color .3s ease;
}
.nav-link::after {
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-link:hover { color:var(--gold-2); }
.nav-link:hover::after { width:100%; }
.btn-nav {
  background:var(--gold); color:var(--navy) !important;
  padding:11px 24px !important; border-radius:8px; font-weight:600;
  transition:background .3s ease, transform .3s ease;
}
.btn-nav:hover { background:var(--gold-2); transform:translateY(-2px); }
.btn-nav::after { display:none; }

/* Burger (hidden on desktop) */
.burger {
  display:none;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px; z-index:1004;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:10px;
}
.burger-line {
  width:26px; height:2.6px; background:var(--white);
  border-radius:3px; transition:transform .4s var(--ease), opacity .3s ease, background .3s;
}
.burger:hover .burger-line { background:var(--gold-2); }
.burger.active .burger-line:nth-child(1) { transform:translateY(8.6px) rotate(45deg); }
.burger.active .burger-line:nth-child(2) { opacity:0; }
.burger.active .burger-line:nth-child(3) { transform:translateY(-8.6px) rotate(-45deg); }

/* ============ MOBILE MENU (click-only) ============ */
.backdrop {
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,11,18,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s ease;
}
.backdrop.show { opacity:1; visibility:visible; }

.mobile-menu {
  position:fixed; top:0; right:0; z-index:1001;
  width:min(84vw, 360px); height:100vh;
  background:linear-gradient(165deg, var(--navy-2), var(--navy));
  padding:22px 26px;
  display:flex; flex-direction:column;
  transform:translateX(105%);
  transition:transform .5s var(--ease);
  box-shadow:-18px 0 50px rgba(0,0,0,.35);
  overflow-y:auto;
}
.mobile-menu.open { transform:translateX(0); }

.mobile-menu-head { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); }
.close-btn {
  margin-left:auto; width:38px; height:38px;
  background:rgba(255,255,255,.06); border:none; color:var(--gold-2);
  font-size:26px; line-height:1; cursor:pointer; border-radius:8px;
  transition:background .3s, transform .3s;
}
.close-btn:hover { background:rgba(200,162,74,.2); transform:rotate(90deg); }

.mobile-links { margin-top:28px; display:flex; flex-direction:column; gap:6px; }
.mobile-links li { border-bottom:1px solid rgba(255,255,255,.07); }
.m-link {
  display:block; padding:15px 6px;
  color:rgba(255,255,255,.9); font-family:var(--serif); font-size:21px;
  transition:color .3s, padding-left .3s;
}
.m-link:hover { color:var(--gold-2); padding-left:14px; }

.mobile-menu-foot { margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:12px; }
.m-tel {
  text-align:center; background:var(--gold); color:var(--navy);
  font-weight:700; padding:14px; border-radius:10px;
  transition:background .3s, transform .3s;
}
.m-tel:hover { background:var(--gold-2); transform:translateY(-2px); }
.m-dir {
  text-align:center; border:1.5px solid rgba(255,255,255,.25); color:var(--white);
  padding:12px; border-radius:10px; transition:border .3s, color .3s;
}
.m-dir:hover { border-color:var(--gold); color:var(--gold-2); }

body.no-scroll { overflow:hidden; }

/* ============ HERO ============ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  padding:130px 0 90px;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:fadeIn 1.6s ease both;
  transform:scale(1.06);
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,22,.78) 0%, rgba(10,14,22,.55) 45%, rgba(10,14,22,.86) 100%);
}
.hero-content { position:relative; z-index:2; max-width:820px; }
.hero-badge {
  display:inline-block;
  color:var(--gold-2); font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:3.4px;
  border:1px solid rgba(200,162,74,.5); border-radius:40px;
  padding:9px 20px; margin-bottom:26px;
  background:rgba(200,162,74,.08);
}
.hero-title {
  color:var(--white); font-family:var(--serif);
  font-size:clamp(38px, 6vw, 76px);
  line-height:1.08; font-weight:700;
  margin-bottom:26px;
}
.hero-title em { font-style:italic; color:var(--gold-2); }
.hero-sub {
  color:rgba(255,255,255,.82); font-size:clamp(15.5px, 1.6vw, 19px);
  max-width:640px; margin-bottom:36px;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:44px; }

.btn {
  display:inline-block; padding:15px 32px;
  font-size:14.5px; font-weight:600; letter-spacing:.5px;
  border-radius:9px; cursor:pointer; border:none;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s;
  font-family:var(--sans);
}
.btn-gold {
  background:linear-gradient(135deg, var(--gold-2), var(--gold));
  color:var(--navy); box-shadow:0 10px 26px rgba(200,162,74,.35);
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(200,162,74,.45); }
.btn-ghost {
  background:transparent; color:var(--white);
  border:1.6px solid rgba(255,255,255,.45);
}
.btn-ghost:hover { border-color:var(--gold-2); color:var(--gold-2); transform:translateY(-3px); }
.btn-dark { background:var(--navy); color:var(--white); }
.btn-dark:hover { background:var(--navy-3); transform:translateY(-3px); box-shadow:var(--shadow); }
.btn-small { padding:10px 22px; font-size:13.5px; }
.btn-block { width:100%; }

.hero-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  color:rgba(255,255,255,.75); font-size:14px; letter-spacing:.3px;
}
.hero-meta a { color:var(--gold-2); font-weight:600; transition:color .3s; }
.hero-meta a:hover { color:var(--white); }
.hero-meta .sep { color:rgba(255,255,255,.35); }

.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; opacity:.85; animation:fadeUp 1s 1.4s both;
}
.mouse {
  width:26px; height:42px; border:2px solid rgba(255,255,255,.6);
  border-radius:14px; display:flex; justify-content:center; padding-top:7px;
}
.wheel { width:4px; height:8px; background:var(--gold-2); border-radius:3px; animation:wheelMove 1.6s infinite; }

/* ============ SECTIONS ============ */
.section { padding:110px 0; }
.section-head { text-align:center; max-width:680px; margin:0 auto 64px; }

.section-tag {
  display:inline-block; color:var(--gold); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:3.6px; margin-bottom:16px;
  position:relative; padding-left:34px;
}
.section-tag::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:26px; height:1.5px; background:var(--gold);
}
.section-title {
  font-family:var(--serif); font-size:clamp(28px, 3.6vw, 44px);
  color:var(--navy); line-height:1.15; font-weight:700; margin-bottom:18px;
}
.section-title em { font-style:italic; color:var(--gold); }
.section-sub { color:var(--muted); font-size:16.5px; }

/* ============ ABOUT ============ */
.about { background:var(--white); }
.about-grid {
  display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center;
}
.about-media { position:relative; }
.frame-frame {
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow);
}
.frame-frame::before {
  content:''; position:absolute; inset:0; z-index:2;
  border:2px solid rgba(200,162,74,.55); border-radius:20px;
  transform:translate(16px, 16px); pointer-events:none;
}
.about-img { width:100%; height:540px; object-fit:cover; }
.exp-badge {
  position:absolute; right:-18px; bottom:-22px; z-index:3;
  background:linear-gradient(135deg, var(--gold-2), var(--gold));
  color:var(--navy); border-radius:16px; padding:22px 26px;
  display:flex; align-items:center; gap:14px;
  box-shadow:0 16px 36px rgba(200,162,74,.45);
  animation:pulseGold 3.2s infinite;
}
.exp-num { font-family:var(--serif); font-size:44px; font-weight:800; line-height:1; }
.exp-txt { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; line-height:1.35; }

.about-text .section-tag { margin-bottom:14px; }
.about-text p { color:var(--muted); font-size:16px; margin-bottom:18px; }
.about-text p strong { color:var(--navy); }
.about-list { margin:26px 0 34px; display:flex; flex-direction:column; gap:14px; }
.about-list li { display:flex; align-items:center; gap:14px; font-size:15.5px; color:var(--text); font-weight:500; }
.li-mark {
  width:26px; height:26px; flex:0 0 26px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(200,162,74,.16); color:var(--gold);
  border-radius:50%; font-size:13px;
}

/* ============ SERVICES ============ */
.services { background:var(--cream); }
.cards {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.card {
  background:var(--white); border-radius:18px; padding:38px 32px;
  border:1px solid rgba(14,20,32,.07);
  box-shadow:0 10px 30px rgba(14,20,32,.06);
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s ease, border-color .45s ease;
}
.card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:4px;
  background:linear-gradient(90deg, var(--gold-2), var(--gold));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover { transform:translateY(-10px); box-shadow:0 24px 50px rgba(14,20,32,.14); border-color:rgba(200,162,74,.4); }
.card:hover::before { transform:scaleX(1); }
.card-icon {
  width:62px; height:62px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(200,162,74,.16), rgba(200,162,74,.05));
  color:var(--gold); font-size:28px; border-radius:14px;
  margin-bottom:22px;
  transition:background .4s, color .4s, transform .4s;
}
.card:hover .card-icon { background:linear-gradient(135deg, var(--gold-2), var(--gold)); color:var(--navy); transform:rotate(-6deg) scale(1.05); }
.card h3 { font-family:var(--serif); font-size:22px; color:var(--navy); margin-bottom:12px; }
.card p { color:var(--muted); font-size:15px; }

/* ============ WHY ============ */
.why { background:var(--navy); position:relative; overflow:hidden; }
.why::before {
  content:''; position:absolute; top:-140px; right:-140px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,162,74,.14), transparent 70%);
}
.why-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; position:relative; z-index:2; }
.why-text .section-tag { color:var(--gold-2); }
.why-text .section-title { color:var(--white); }
.feature {
  display:flex; gap:22px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.09);
  transition:padding-left .4s var(--ease);
}
.feature:hover { padding-left:12px; }
.feat-num {
  font-family:var(--serif); font-size:30px; font-weight:800;
  color:transparent; -webkit-text-stroke:1.3px var(--gold);
  line-height:1.2; flex:0 0 auto;
}
.feature h4 { color:var(--white); font-family:var(--serif); font-size:19px; margin-bottom:6px; }
.feature p { color:var(--muted); font-size:14.5px; }

.why-media { position:relative; }
.why-img { width:100%; height:560px; object-fit:cover; border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.quote-badge {
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  width:88%; background:linear-gradient(135deg, var(--gold-2), var(--gold));
  color:var(--navy); border-radius:16px; padding:26px 30px;
  box-shadow:0 20px 44px rgba(200,162,74,.4);
}
.quote-mark { font-family:var(--serif); font-size:44px; line-height:.6; display:block; margin-bottom:8px; }
.quote-badge p { font-family:var(--serif); font-size:17px; font-style:italic; font-weight:600; line-height:1.45; }
.quote-author { display:block; margin-top:10px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1.6px; }

/* ============ CONTACT ============ */
.contact { background:var(--white); }
.contact-grid {
  display:grid; grid-template-columns:1fr 1.25fr; gap:60px; align-items:start;
}
.contact-info { display:flex; flex-direction:column; gap:20px; }
.info-card {
  display:flex; gap:18px; align-items:flex-start;
  background:var(--cream); border:1px solid rgba(14,20,32,.07);
  border-radius:16px; padding:22px;
  transition:transform .4s var(--ease), box-shadow .4s ease;
}
.info-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.info-icon {
  width:50px; height:50px; flex:0 0 50px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:var(--gold-2); font-size:22px;
  border-radius:12px;
}
.info-card h4 { font-family:var(--serif); font-size:17px; color:var(--navy); margin-bottom:4px; }
.info-card p { color:var(--muted); font-size:14.5px; margin-bottom:10px; }
.plain-link { color:var(--gold); font-weight:700; font-size:16px; }
.plain-link:hover { color:var(--navy); }
.contact-img {
  width:100%; height:190px; object-fit:cover; border-radius:16px;
  margin-top:6px; box-shadow:var(--shadow);
}

.contact-form {
  background:var(--cream); border-radius:20px; padding:38px;
  border:1px solid rgba(14,20,32,.07); box-shadow:var(--shadow);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:8px; letter-spacing:.4px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:13px 16px;
  background:var(--white); border:1.5px solid rgba(14,20,32,.12);
  border-radius:10px; font-family:var(--sans); font-size:14.5px; color:var(--text);
  transition:border-color .3s, box-shadow .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,162,74,.14);
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-note { margin-top:14px; font-size:14px; font-weight:600; min-height:20px; }
.form-note.ok { color:#1d7a3c; }
.form-note.err { color:#b02a2a; }

.form-actions { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.share-btn {
  flex:1; min-width:150px; padding:12px;
  background:transparent; border:1.5px solid rgba(14,20,32,.18);
  color:var(--navy); font-size:13.5px; font-weight:600; border-radius:10px; cursor:pointer;
  transition:border .3s, color .3s, background .3s;
}
.share-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(200,162,74,.07); }

/* ============ FOOTER ============ */
.footer { background:var(--navy); padding:70px 0 0; }
.footer-inner {
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px;
  padding-bottom:50px;
}
.footer-brand p { color:var(--muted); font-size:14.5px; margin-top:18px; max-width:320px; }
.footer-col h4 {
  color:var(--gold-2); font-size:13px; text-transform:uppercase;
  letter-spacing:2.4px; margin-bottom:20px;
}
.footer-col a, .footer-col p { display:block; color:var(--muted); font-size:14.5px; margin-bottom:10px; transition:color .3s; }
.footer-col a:hover { color:var(--gold-2); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:22px 0; }
.footer-bottom p { color:var(--muted); font-size:13px; text-align:center; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .about-grid, .why-grid { gap:50px; }
  .about-img { height:460px; }
  .why-img { height:480px; }
  .cards { grid-template-columns:repeat(2, 1fr); }
  .contact-grid { gap:40px; }
}

@media (max-width: 900px) {
  .nav-desktop { display:none; }
  .burger { display:flex; }
  .section { padding:84px 0; }
  .about-grid { grid-template-columns:1fr; }
  .about-media { max-width:560px; }
  .why-grid { grid-template-columns:1fr; }
  .why-media { max-width:560px; margin-top:30px; }
  .contact-grid { grid-template-columns:1fr; }
  .hero { min-height:92vh; padding:120px 0 80px; }
}

@media (max-width: 640px) {
  .section { padding:70px 0; }
  .cards { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .contact-form { padding:26px 20px; }
  .footer-inner { grid-template-columns:1fr; gap:34px; }
  .exp-badge { right:8px; bottom:-18px; padding:16px 20px; }
  .exp-num { font-size:34px; }
  .about-img { height:400px; }
  .why-img { height:380px; }
  .quote-badge { width:92%; padding:20px 22px; bottom:-24px; }
  .hero-actions .btn { width:100%; text-align:center; }
  .hero-meta { flex-direction:column; align-items:flex-start; gap:6px; }
  .hero-meta .sep { display:none; }
  .brand-sub { font-size:10px; letter-spacing:2px; }
  .brand-name { font-size:18px; }
}