/*
  ============================================================
  NAURA GLOBAL — naura.css
  Brand system from Naura-brand-system.html

  📝 EDIT: All tokens live in :root below.
     Change once → updates everywhere.
  ============================================================
*/

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@300;400;500;600&display=swap');

/* ── Tokens ── */
:root {
  --ink:    #1a1a1a;
  --gold:   #b8892a;
  --gold-lt:#d4a94a;
  --forest: #2c4a35;
  --cream:  #f7f3ed;
  --slate:  #3d4a52;
  --grey:   #777777;
  --white:  #ffffff;
  --border: rgba(0,0,0,0.09);

  --font-d: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'Jost', system-ui, sans-serif;

  --max-w:  1040px;
  --pad-h:  40px;  /* 📝 EDIT: horizontal page padding */
  --radius: 4px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-b);
  font-weight: 300;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ── Helpers ── */
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-h); }

/* ── NAV ── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: 62px;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 var(--pad-h);
  background: rgba(26,26,26,0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184,137,42,0.14);
}
.nav-logo {
  display:flex; align-items:center; gap:13px;
  cursor:pointer;
}
.nav-wm {
  font-family: var(--font-d);
  font-size: 18px; font-weight:300;
  letter-spacing: 7px; text-transform:uppercase;
  color: var(--white); line-height:1;
  padding-left: 7px; /* offsets trailing letter-spacing */
}
.nav-wm .a { color: var(--gold-lt); }
.nav-co {
  font-size: 8px; font-weight:300;
  letter-spacing: 5px; text-transform:uppercase;
  color: rgba(255,255,255,0.28);
  display:block; margin-top:3px; padding-left:5px;
}
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-link {
  font-size: 9px; font-weight:400;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-cta {
  font-size: 9px; font-weight:500;
  letter-spacing: 3px; text-transform:uppercase;
  color: var(--gold);
  border: 1px solid rgba(184,137,42,0.36);
  padding: 7px 18px; border-radius: var(--radius);
  transition: all 0.2s;
}
.nav-cta:hover { background:var(--gold); color:var(--white); }

/* ── HERO / COMING SOON ── */
.hero {
  min-height: 100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding: 110px var(--pad-h) 100px;
  background: var(--ink);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 62% 22%, rgba(184,137,42,0.09) 0%, transparent 56%),
    radial-gradient(ellipse at 18% 78%, rgba(44,74,53,0.12) 0%, transparent 52%);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

.hero-mark { width:84px; height:84px; margin-bottom:28px; }

.hero-eye {
  font-size: 9px; font-weight:500;
  letter-spacing: 6px; text-transform:uppercase;
  color: var(--gold); margin-bottom:18px;
}
.hero-name {
  font-family: var(--font-d);
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 300; letter-spacing: 14px;
  text-transform:uppercase; color:var(--white);
  line-height:1; padding-left:14px;
}
.hero-name .a { color:var(--gold-lt); }
.hero-sub {
  font-size: 9px; font-weight:300;
  letter-spacing: 6px; text-transform:uppercase;
  color: rgba(255,255,255,0.28);
  margin-top: 8px; padding-left:6px;
}
.hero-rule {
  width:80px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-lt), transparent);
  margin: 24px 0;
}
.hero-tagline {
  font-family: var(--font-d);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  color: rgba(255,255,255,0.42);
  letter-spacing: 2px; margin-bottom:10px;
}
.hero-desc {
  font-size: 13px; font-weight:300;
  color: rgba(255,255,255,0.28);
  max-width: 380px; line-height:1.9;
  margin-bottom: 38px;
}

/* Status badge */
.badge {
  display:inline-flex; align-items:center; gap:10px;
  border: 1px solid rgba(184,137,42,0.22);
  border-radius: 30px; padding:9px 20px;
  margin-bottom: 36px;
}
.badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.25} 50%{opacity:1} }
.badge-txt {
  font-size: 9px; font-weight:500;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.42);
}
.badge-txt b { color:var(--gold); font-weight:500; }

/* Email form */
.email-form {
  display:flex; max-width:420px; width:100%;
  border: 1px solid rgba(184,137,42,0.24);
  border-radius: var(--radius); overflow:hidden;
  margin-bottom: 12px;
}
.email-input {
  flex:1; background:rgba(255,255,255,0.05);
  border:none; outline:none;
  padding: 13px 17px;
  font-family: var(--font-b);
  font-size: 13px; font-weight:300;
  color: var(--white);
}
.email-input::placeholder { color:rgba(255,255,255,0.22); }
.email-input:focus { background:rgba(255,255,255,0.08); }
.email-btn {
  background: var(--gold); border:none;
  padding: 13px 22px;
  font-family: var(--font-b);
  font-size: 9px; font-weight:500;
  letter-spacing: 3px; text-transform:uppercase;
  color: var(--white); cursor:pointer;
  transition: background 0.2s; white-space:nowrap;
}
.email-btn:hover { background:#9a7022; }
.form-note {
  font-size: 10px; font-weight:300;
  color: rgba(255,255,255,0.18);
  margin-bottom: 24px;
}

/* Or divider */
.or-divider {
  display:flex; align-items:center; gap:14px;
  max-width:420px; width:100%; margin-bottom:20px;
}
.or-line { flex:1; height:1px; background:rgba(255,255,255,0.08); }
.or-txt {
  font-size: 9px; font-weight:400;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.2);
}

/* Ghost link button */
.ghost-link {
  display:inline-flex; align-items:center; gap:9px;
  font-size: 9px; font-weight:500;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.38);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 22px; border-radius: var(--radius);
  transition: all 0.2s;
}
.ghost-link:hover { border-color:var(--gold); color:var(--gold); }

/* Bottom strip */
.hero-strip {
  position:absolute; bottom:0; left:0; right:0;
  padding: 13px var(--pad-h);
  display:flex; justify-content:space-between;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.hero-strip span {
  font-size: 9px; font-weight:400;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.17);
}
.hero-strip b { color:rgba(184,137,42,0.55); font-weight:400; }

/* Fade-up animations */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.a1 { animation:fadeUp 0.7s ease both 0.1s; }
.a2 { animation:fadeUp 0.7s ease both 0.25s; }
.a3 { animation:fadeUp 0.7s ease both 0.4s; }
.a4 { animation:fadeUp 0.7s ease both 0.55s; }
.a5 { animation:fadeUp 0.7s ease both 0.7s; }
.a6 { animation:fadeUp 0.7s ease both 0.85s; }

/* ── CONTACT PAGE ── */
.ct-hero {
  background: var(--ink);
  padding: 140px var(--pad-h) 64px;
  position:relative; overflow:hidden;
}
.ct-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 24% 62%, rgba(44,74,53,0.14), transparent 50%);
  pointer-events:none;
}
.ct-eye {
  font-size: 9px; font-weight:500;
  letter-spacing: 5px; text-transform:uppercase;
  color: var(--gold); display:block; margin-bottom:16px;
  position:relative;
}
.ct-h1 {
  font-family: var(--font-d);
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 300; color:var(--white);
  line-height: 1.15; max-width:500px;
  margin-bottom: 16px; position:relative;
}
.ct-h1 em { color:var(--gold-lt); font-style:italic; }
.ct-desc {
  font-size: 13px; font-weight:300;
  color: rgba(255,255,255,0.32);
  max-width: 360px; line-height:1.85;
  position:relative;
}

/* Coming soon note */
.cs-note {
  padding: 0 var(--pad-h) 32px;
  background: var(--ink);
}
.cs-note-inner {
  max-width: var(--max-w); margin:0 auto;
  display:flex; align-items:center; gap:12px;
  background: rgba(184,137,42,0.08);
  border: 1px solid rgba(184,137,42,0.2);
  border-radius: var(--radius);
  padding: 13px 20px;
}
.cs-note-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--gold); flex-shrink:0;
  animation: pulse 2.4s ease-in-out infinite;
}
.cs-note-txt {
  font-size: 11px; font-weight:400;
  color: rgba(255,255,255,0.48); line-height:1.6;
}
.cs-note-txt b { color:var(--gold); font-weight:500; }

/* Contact body */
.ct-body { background:var(--cream); padding: 72px var(--pad-h) 96px; }
.ct-grid {
  max-width: var(--max-w); margin:0 auto;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px; align-items:start;
}

/* Form */
.form-eye {
  font-size: 9px; font-weight:500;
  letter-spacing: 4px; text-transform:uppercase;
  color: var(--gold); display:block; margin-bottom:26px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grp { margin-bottom:16px; }
.form-lbl {
  display:block; font-size: 9px; font-weight:500;
  letter-spacing: 3px; text-transform:uppercase;
  color: #555; margin-bottom:7px;
}
.form-field {
  width:100%; background:var(--white);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--font-b);
  font-size: 13px; font-weight:300;
  color: var(--ink); outline:none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-field:focus { border-color:var(--gold); }
.form-field::placeholder { color:rgba(0,0,0,0.22); }
textarea.form-field { min-height:108px; resize:vertical; }
.form-btn {
  width:100%; padding:13px;
  background: var(--ink); color:var(--white);
  border:none; border-radius: var(--radius);
  font-family: var(--font-b);
  font-size: 9px; font-weight:500;
  letter-spacing: 4px; text-transform:uppercase;
  cursor:pointer; margin-top:4px;
  transition: background 0.2s;
}
.form-btn:hover { background:var(--gold); }
.form-sub-note {
  font-size: 11px; font-weight:300;
  color: rgba(0,0,0,0.28);
  text-align:center; margin-top:9px;
}

/* Form status messages */
.form-success, .form-error {
  padding: 14px 18px; border-radius:var(--radius);
  font-size: 13px; font-weight:300; margin-top:12px;
  display:none;
}
.form-success { background:rgba(44,74,53,0.1); border:1px solid rgba(44,74,53,0.25); color:var(--forest); }
.form-error   { background:rgba(192,57,43,0.07); border:1px solid rgba(192,57,43,0.2); color:#c0392b; }

/* Info panel */
.info-panel h3 {
  font-family: var(--font-d);
  font-size: 24px; font-weight:300;
  color: var(--ink); margin-bottom:24px; line-height:1.3;
}
.info-row {
  display:flex; gap:14px; align-items:flex-start;
  padding: 14px 0; border-bottom:1px solid var(--border);
}
.info-row:last-of-type { border-bottom:none; }
.info-ico {
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%; border:1px solid rgba(184,137,42,0.26);
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.info-lbl {
  font-size: 8px; font-weight:600;
  letter-spacing: 3px; text-transform:uppercase;
  color: var(--gold); margin-bottom:3px;
}
.info-val  { font-size:13px; font-weight:300; color:var(--ink); line-height:1.5; }
.info-hint { font-size:11px; font-weight:300; color:var(--grey); margin-top:1px; }

/* Enquiry box */
.enq-box {
  background: var(--ink); border-radius:var(--radius);
  padding: 22px 24px; margin-top:20px;
}
.enq-box h4 {
  font-size: 9px; font-weight:500;
  letter-spacing: 3px; text-transform:uppercase;
  color: var(--gold); margin-bottom:12px;
}
.enq-row {
  font-size: 13px; font-weight:300;
  color: rgba(255,255,255,0.42);
  padding: 5px 0; display:flex; align-items:center; gap:9px;
}
.enq-dot { width:3px; height:3px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* ── FOOTER ── */
.footer {
  background: var(--ink);
  padding: 36px var(--pad-h) 22px;
  border-top: 1px solid rgba(184,137,42,0.11);
}
.footer-inner {
  max-width: var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-brand {
  font-family: var(--font-d);
  font-size: 17px; font-weight:300;
  letter-spacing: 6px; color:var(--white);
  text-transform:uppercase; padding-left:6px;
}
.footer-brand .a { color:var(--gold-lt); }
.footer-links { display:flex; gap:20px; }
.footer-links a {
  font-size: 9px; font-weight:400;
  letter-spacing: 3px; text-transform:uppercase;
  color: rgba(255,255,255,0.3); transition:color 0.2s;
}
.footer-links a:hover { color:var(--gold); }
.footer-copy {
  width:100%; font-size:10px; font-weight:300;
  color: rgba(255,255,255,0.15);
  padding-top:18px;
  border-top: 1px solid rgba(255,255,255,0.04);
  display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:7px;
}

/* ── TOAST ── */
.toast {
  position:fixed; bottom:26px; left:50%;
  transform: translateX(-50%) translateY(56px);
  background:var(--forest); color:var(--white);
  padding: 11px 22px; border-radius:var(--radius);
  font-size:12px; z-index:999; opacity:0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events:none; white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .ct-grid { grid-template-columns:1fr; gap:44px; }
}
@media (max-width: 640px) {
  :root { --pad-h: 22px; }
  .form-row { grid-template-columns:1fr; }
  .email-form { flex-direction:column; }
  .hero-strip { display:none; }
  .nav-link { display:none; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}