:root{
  --bg:#0F0A07;
  --card:#1A1410;
  --text:#FFF6EA;
  --muted:#FFD9B3;
  --brand:#FF8A3D;
  --brand-2:#FFB66F;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%, #3B2012 10%, transparent 60%) no-repeat, var(--bg);
  line-height:1.6;
}
.container{width:min(1100px,92%);margin:auto}
.site-header{
  position:sticky;top:0;z-index:9;
  backdrop-filter: blur(8px);
  background:rgba(15,18,37,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.logo{font-weight:800;letter-spacing:.5px}
nav a{color:var(--muted);text-decoration:none;margin:0 10px}
nav a:hover{color:var(--text)}
.btn-primary,.btn-secondary,button{
  border:0;padding:12px 18px;border-radius:12px;
  text-decoration:none;display:inline-block;cursor:pointer;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0e1f;font-weight:700;box-shadow:var(--shadow)}
.btn-secondary{border:1px solid rgba(255,255,255,.15);color:var(--text)}
.burger{display:none;background:transparent;color:var(--text);font-size:20px}
.hero{
  background:linear-gradient(180deg, rgba(255,138,61,.12), transparent 60%);
  padding:80px 0 40px;
  text-align:center;
}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 24px}
.cta-row a{margin:6px}
.badges{padding:10px 0 0}
.badges-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badge{border:1px solid rgba(255,255,255,.1);padding:10px 12px;border-radius:999px;text-align:center;color:var(--muted);font-size:14px}

.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.card-img{width:100%;border-radius:16px;box-shadow:var(--shadow)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:20px;border-radius:16px;box-shadow:var(--shadow)}
.card h3{margin-top:0}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.06)}

.contact-form{
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  padding:20px;border-radius:16px;box-shadow:var(--shadow)
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:600;margin-bottom:8px}
input,textarea{
  width:100%;padding:12px;border-radius:10px;background:#0d1021;
  border:1px solid rgba(255,255,255,.12);color:var(--text)
}
.small{color:var(--muted);font-size:14px}

.site-footer{
  border-top:1px solid rgba(255,255,255,.06);padding:24px 0 40px;margin-top:30px
}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer-links a{display:block;color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}

.ticks{list-style:none;padding:0}
.ticks li{position:relative;margin:8px 0;padding-left:22px}
.ticks li:before{content:"✔";position:absolute;left:0;top:0;color:var(--brand-2)}

@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  nav{display:none;position:absolute;top:54px;right:4%;background:#0d1021;border:1px solid rgba(255,255,255,.1);padding:10px;border-radius:12px}
  nav.open{display:block}
  .burger{display:block}
}

/* Contact line link colors */
#contact .small a{
  color: #FFB66F;          /* email/phone normal color */
  font-weight: 700;
  text-decoration: none;
}
#contact .small a:visited{
  color: #FFB66F;          /* stop the purple visited color */
}
#contact .small a:hover,
#contact .small a:focus{
  color: #FF8A3D;          /* hover color */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* Floating action button (Instagram) */
.fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}

/* Warm amber theme button */
.fab-insta{
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #1A1410;               /* icon color on warm background */
  border: 1px solid rgba(0,0,0,.18);
}

.fab:hover, .fab:focus{
  transform: scale(1.06);
  filter: brightness(1.05);
  outline: none;
}

/* Keep it off tiny screens' edges */
@media (max-width: 480px){
  .fab{ right: 14px; bottom: 14px; width: 52px; height: 52px; }
}
/* WhatsApp FAB: sits to the left of Instagram */
.fab-wa{
  right: 86px;                 /* Instagram is at 18px; this offsets ~68px to the left */
  bottom: 18px;
  width: 56px; height: 56px;
  background: #25D366;         /* WhatsApp green */
  color: #0b3b26;              /* icon color */
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: var(--shadow);
  display: inline-flex; align-items:center; justify-content:center;
}

/* Small screens: keep some spacing from edges */
@media (max-width: 480px){
  .fab-wa{ right: 82px; bottom: 14px; width: 52px; height: 52px; }
}
/* ===== Typography: Inter (body) + Playfair (headings) ===== */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.1px;
  font-size: 16px;
  color: var(--text);
}

h1, h2{
  font-family: "Playfair Display", serif;
  font-weight: 700;      /* elegant bold */
  letter-spacing: 0;     
  line-height: 1.15;
}
h3{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
}

/* Responsive sizes */
h1{ font-size: clamp(34px, 5.2vw, 58px); }
h2{ font-size: clamp(22px, 3.1vw, 32px); }
h3{ font-size: clamp(18px, 2.2vw, 22px); }

/* === Make body text justified (Word-style) === */
p,
.card p,
.section p,
.small,
li {
  text-align: justify;
  text-justify: inter-word;   /* better spacing */
  hyphens: auto;              /* softer breaks where supported */
}

/* Keep headings and nav not justified */
h1, h2, h3, nav a, .btn-primary, .btn-secondary {
  text-align: left;           /* (hero subtitle stays centered separately) */
}

/* Optional: don’t justify on very small screens to avoid big gaps */
@media (max-width: 420px){
  p, .card p, .section p, .small, li { text-align: left; }
}
/* Keep the hero title & subtitle centered */
.hero h1{
  text-align: center !important;
}
.hero p{
  text-align: center !important;
  text-justify: auto;   /* cancel justify spacing */
}

/* remove the contact form everywhere */
.contact-form{ display:none !important; }