:root{
  /* Brand palette */
  --navy:#002147;            /* Deep Blue */
  --gold:#C09F50;            /* Prestige Gold */
  --paper:#F5F0E1;           /* Cream Paper */
  --charcoal:#333333;

  /* Theme tokens (light) */
  --bg:var(--paper);
  --surface:#FFFFFF;
  --text:#1A2B45;
  --muted:#4C5A73;

  --primary:var(--navy);
  --primary2:#0B2F63;
  --accent:var(--gold);

  --border:rgba(0,33,71,.14);
  --shadow:0 10px 30px rgba(0,33,71,.14);

  --header-bg:rgba(245,240,225,.78);

  --radius:18px;
  --radius2:26px;

  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";
  --font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
}
[data-theme="dark"]{
  /* Theme tokens (dark) */
  --bg:#0B1220;
  --surface:#101a2e;
  --text:#F6F2EA;
  --muted:#C8D1DF;

  --primary:var(--gold);
  --primary2:#E1C17A;
  --accent:var(--gold);

  --border:rgba(255,255,255,.14);
  --shadow:0 12px 40px rgba(0,0,0,.45);

  --header-bg:rgba(5,10,20,.72);
}


*{box-sizing:border-box}
html,body{height:100%
  display:flex; flex-direction:column; min-height:100vh;
  transition:background-color .25s ease, color .25s ease;
}
body{
  margin:0; font-family:var(--font-body); background:
  radial-gradient(1100px 540px at 12% -10%, rgba(192,159,80,.18), transparent 60%),
  radial-gradient(900px 520px at 92% 8%, rgba(0,33,71,.16), transparent 55%),
  var(--bg);
  color:var(--text);
  display:flex; flex-direction:column; min-height:100vh;
  transition:background-color .25s ease, color .25s ease;
}
a{color:inherit; text-decoration:none}
.container{width:min(1140px, 92vw); margin:0 auto}
.header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px); background:var(--header-bg); border-bottom:1px solid var(--border)}
[data-theme="dark"] .header{background:rgba(5,10,20,.72)}
.header-inner{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; min-width:0; max-width:100%}
.brand-logo{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(192,159,80,.18), rgba(26,43,69,.06)); border:1px solid var(--border)}
.brand-logo img{width:34px; height:34px; object-fit:contain}
.brand-title{display:flex; flex-direction:column; line-height:1.1}
.brand-title strong{font-size:15px; letter-spacing:.2px}
.brand-title span{font-size:12px; color:var(--muted)}
.nav{display:flex; gap:14px; align-items:center; flex:1; justify-content:center}
.nav a{font-size:13px; color:var(--muted); padding:8px 10px; border-radius:12px}
.nav a.active, .nav a:hover{color:var(--text); background:rgba(197,160,89,.16)}
[data-theme="dark"] .nav a.active,[data-theme="dark"] .nav a:hover{background:rgba(197,160,89,.20)}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.6); color:var(--text); font-weight:600; font-size:13px;
  box-shadow:0 1px 0 rgba(2,6,23,.04);
}
[data-theme="dark"] .btn{background:rgba(11,20,38,.6)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary2)); color:white; border-color:transparent}
.btn:hover{transform:translateY(-1px)}
.icon-btn{
  width:40px; height:40px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.55); display:grid; place-items:center; cursor:pointer
}
[data-theme="dark"] .icon-btn{background:rgba(11,20,38,.6)}
.burger{display:none}
.pill{display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.45); font-size:12px}
.pill.small{padding:6px 9px; font-size:11px}
[data-theme="dark"] .pill{background:rgba(11,20,38,.55)}
.pill.is-active{color:var(--text); border-color:rgba(192,159,80,.55); background:rgba(192,159,80,.16); font-weight:700}
[data-theme="dark"] .pill.is-active{color:#0B1220; border-color:rgba(192,159,80,.95); background:rgba(192,159,80,.92)}

.hero{padding:28px 0 8px}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center}
.kicker{display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:13px}
.kicker .dot{width:8px; height:8px; border-radius:99px; background:linear-gradient(135deg, var(--primary), var(--primary2))}
.h1{font-family:var(--font-display); font-size:44px; line-height:1.05; margin:12px 0 12px}
.hero p{color:var(--muted); font-size:16px; line-height:1.6; margin:0 0 14px}
.hero-ctas{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.bullets{display:grid; gap:10px; margin:18px 0 18px}
.item{display:flex; gap:10px; align-items:flex-start}
.check{width:22px; height:22px; border-radius:8px; display:grid; place-items:center; font-weight:900;
  background:rgba(192,159,80,.18); color:var(--primary); border:1px solid var(--border)}
[data-theme="dark"] .check{background:rgba(197,160,89,.20); color:var(--primary)}
.hero-media{border-radius:var(--radius2); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface)}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block}
.section{padding:34px 0}
.section h2{font-family:var(--font-display); margin:0 0 10px; font-size:28px}
.section-title-row{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.btn.sm{padding:8px 12px; border-radius:12px; font-size:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:rgba(255,255,255,.65); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:0 1px 0 rgba(2,6,23,.04);
}
[data-theme="dark"] .card{background:rgba(11,20,38,.65)}
.card h3{font-family:var(--font-display); margin:0 0 8px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted); line-height:1.6}
.more{color:var(--primary); font-weight:700; font-size:13px}

/* Blog cards (dedicated blog page) */
.post-card{
  background:rgba(255,255,255,.65);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 1px 0 rgba(2,6,23,.04);
  display:flex;
  flex-direction:column;
  gap:10px;
}
[data-theme="dark"] .post-card{background:rgba(11,20,38,.65)}
.post-card h3{margin:0; font-family:var(--font-display); font-size:18px; line-height:1.25}
.post-card h3 a{color:inherit; text-decoration:none}
.post-card h3 a:hover{text-decoration:underline}
.post-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.post-meta .dot{opacity:.7}
.post-card .more{margin-top:auto}
.split{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center}
.media, .map{border-radius:var(--radius2); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface)}
.media img{width:100%; height:100%; object-fit:cover; display:block}
.steps{display:grid; gap:14px}
.step{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,.55)}
[data-theme="dark"] .step{background:rgba(11,20,38,.55)}
.badge{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:rgba(192,159,80,.18); color:var(--primary); font-weight:800}
.callout{border-radius:var(--radius); padding:16px; border:1px dashed rgba(197,160,89,.45); background:linear-gradient(135deg, rgba(192,159,80,.18), rgba(26,43,69,.06))}
[data-theme="dark"] .callout{border-color:rgba(197,160,89,.36); background:linear-gradient(135deg, rgba(197,160,89,.20), rgba(11,20,38,.6))}
.footer{margin-top:auto; padding:28px 0; border-top:1px solid var(--border); background:rgba(255,255,255,.55)}
[data-theme="dark"] .footer{background:rgba(11,20,38,.6)}
.footer .row{display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:stretch}
label{display:block; font-weight:700; font-size:12px; margin:10px 0 6px}
.input{width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.75); color:var(--text)}
[data-theme="dark"] .input{background:rgba(5,10,20,.55)}
textarea.input{min-height:120px; resize:vertical}
.faq details{border:1px solid var(--border); border-radius:14px; padding:12px; background:rgba(255,255,255,.55); margin:10px 0}
[data-theme="dark"] .faq details{background:rgba(11,20,38,.55)}
.faq summary{cursor:pointer; font-weight:800}
.mobile-panel{display:none; border-top:1px solid var(--border); padding:8px 0}
.mobile-panel a{display:block; padding:10px 12px; color:var(--muted); border-radius:14px}
.mobile-panel a:hover{background:rgba(197,160,89,.16); color:var(--text)}
.reveal{opacity:0; transform:translateY(8px); transition:all .7s ease}
.reveal.in{opacity:1; transform:translateY(0)}
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr; }
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .grid.cols-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:grid}
  .mobile-panel{display:block}
}

@media (max-width: 620px){
  .grid.cols-3{grid-template-columns:1fr}
}

@media (max-width: 620px){
  .grid.cols-3{grid-template-columns:1fr}
}


.hero-title-row{display:flex; align-items:center; gap:14px; margin:12px 0 12px}
.hero-portrait{width:74px; height:74px; border-radius:22px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface)}
.hero-portrait img{width:100%; height:100%; object-fit:cover; display:block}
.hero-sub{margin:-6px 0 0; color:var(--muted); font-size:13px}

.logo-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.logo-pill{padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.55); color:var(--text); font-size:12px; font-weight:700}
[data-theme="dark"] .logo-pill{background:rgba(11,20,38,.55)}

.footer .row{align-items:flex-start}
.footer-social .socials{display:flex; gap:10px; flex-wrap:wrap}
.social{display:inline-flex; gap:8px; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.55); color:var(--text); font-weight:700; font-size:12px}
[data-theme="dark"] .social{background:rgba(11,20,38,.55)}
.social svg{width:16px; height:16px}
.lang-row{display:flex; gap:10px; justify-content:flex-end; padding-bottom:10px}

@media (max-width: 680px){
  .footer .row{flex-direction:column}
  .hero-title-row{gap:12px}
  .hero-portrait{width:64px; height:64px; border-radius:20px}
  .lang-row{display:none}
}


main{flex:1 0 auto}

.hero-media{position:relative}
.hero-media-overlay{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; gap:12px; align-items:center;
  padding:12px 14px; border-radius:18px;
  background:rgba(255,255,255,.72); border:1px solid var(--border);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:0 12px 30px rgba(2,6,23,.14);
}
[data-theme="dark"] .hero-media-overlay{background:rgba(11,18,32,.68)}
.hero-media-avatar{
  width:62px; height:62px; border-radius:18px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface);
  box-shadow:0 10px 22px rgba(2,6,23,.12);
}
.hero-media-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.hero-media-title{font-family:var(--font-display); font-size:18px; line-height:1.1; margin:0}
.hero-media-sub{font-size:12px; color:var(--muted); margin-top:2px}
@media (max-width: 920px){
  .hero-media-overlay{left:14px; right:14px; bottom:14px}
  .hero-media-avatar{width:56px; height:56px; border-radius:16px}
}


/* Footer links */
.footer-link{color:var(--muted); text-decoration:none; border-bottom:1px dotted transparent}
.footer-link:hover{color:var(--text); border-bottom-color:var(--accent)}
.footer .sep{opacity:.75}


/* Clients section */
.clients-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:center}
.client-card{display:flex; align-items:center; justify-content:center; padding:14px 12px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.55); box-shadow:0 8px 18px rgba(0,33,71,.08); transition:transform .15s ease, box-shadow .15s ease}
.client-card img{max-height:26px; max-width:100%; filter:grayscale(100%); opacity:.85}
.client-card:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,33,71,.14)}
.client-card:hover img{filter:grayscale(0%); opacity:1}
[data-theme="dark"] .client-card{background:rgba(16,26,46,.65)}
[data-theme="dark"] .client-card img{filter:grayscale(100%); opacity:.9}
@media(max-width:980px){.clients-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.clients-grid{grid-template-columns:repeat(2,1fr)}}

/* Utility */
.hidden{display:none !important}

/* Floating WhatsApp */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  text-decoration:none;
  font-weight:600;
}
.whatsapp-float:hover{transform: translateY(-1px);}
.whatsapp-float .wa-ic{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:999px;
  background: rgba(34,197,94,.16);
  color: rgb(34,197,94);
  font-size:16px;
  line-height:1;
}
.whatsapp-float .wa-text{font-size:14px;}
@media (max-width: 520px){
  .whatsapp-float{right:12px;bottom:12px;padding:12px;}
  .whatsapp-float .wa-text{display:none;}
}

/* Honeypot field */
.hp{display:none !important;}

/* Contact form alert */
.form-alert{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--card);
  font-weight:600;
}
.form-alert[data-type="success"]{border-color: rgba(34,197,94,.35);}
.form-alert[data-type="error"]{border-color: rgba(239,68,68,.35);}

/* Anchor offset for fixed header */
.anchor{position:relative; top:-90px; display:block; height:0; visibility:hidden;}


/* Related posts */
.post-card{transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.post-card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.08)}
[data-theme="dark"] .post-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.35)}
.lead{font-size:18px; color:var(--muted); margin-top:8px; margin-bottom:14px}
.split{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start}
@media (max-width: 980px){ .split{grid-template-columns:1fr} }
.media-card{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.6)}
[data-theme="dark"] .media-card{background:rgba(11,20,38,.55)}
.media-card img{width:100%; height:260px; object-fit:cover; display:block}
.media-cap{padding:12px 14px; color:var(--muted); font-size:13px; border-top:1px solid var(--border)}

/* Screen reader only - visually hidden but accessible */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Contact form styles */
.contact-form{display:flex; flex-direction:column; gap:8px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px}
.form-grid label{margin:0}
.form-grid label.full{grid-column:1/-1}
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  margin-top:6px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .form-grid textarea{background:rgba(5,10,20,.55)}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(192,159,80,.18);
}
.form-grid textarea{min-height:140px; resize:vertical}
.form-grid select{cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234C5A73' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}

@media (max-width: 620px){
  .form-grid{grid-template-columns:1fr}
  .form-grid label.full{grid-column:1}
}

/* Form submit button */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  color:white;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  margin-top:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,33,71,.2);
}
[data-theme="dark"] .btn-primary{
  background:linear-gradient(135deg, var(--gold), #D4B366);
  color:#0B1220;
}

/* Form success message */
.form-success{
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.08);
  color:var(--text);
  margin-bottom:16px;
}
.form-success strong{
  color:rgb(22,163,74);
  display:block;
  margin-bottom:4px;
}
[data-theme="dark"] .form-success{
  background:rgba(34,197,94,.12);
}
[data-theme="dark"] .form-success strong{
  color:rgb(74,222,128);
}



/* Contact (redirect-based) */
.label-row{display:flex;align-items:baseline;gap:8px}
.req{color:var(--accent);font-weight:700}
.opt{color:var(--muted);font-size:12px;font-weight:500}
.form-alert{margin:0 0 14px;border-radius:14px;padding:12px 14px;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.7)}
.form-alert.is-success{border-color:rgba(50,160,110,.35)}
.form-alert.is-error{border-color:rgba(220,70,70,.35)}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn-ghost{appearance:none;border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.6);color:var(--text);padding:12px 16px;border-radius:999px;font-weight:700;cursor:pointer}
.btn-ghost:hover{background:rgba(255,255,255,.85)}
.btn-outline{appearance:none;border:1px solid rgba(0,0,0,.18);background:transparent;color:var(--text);padding:12px 16px;border-radius:999px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-outline:hover{background:rgba(255,255,255,.55)}
.form-note{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.45}

/* Contact page layout helpers */
.contact-card{border-radius:28px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 60px rgba(0,0,0,.08);backdrop-filter:blur(10px)}
.contact-card__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;padding:22px}
.contact-side__box{padding:18px;border-radius:20px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.08)}
.contact-side__box h3{margin:0 0 8px}
.contact-side__box p{margin:0 0 12px;color:var(--muted)}
@media (max-width: 920px){
  .contact-card__inner{grid-template-columns:1fr}
}

/* Contact map section */
.section--map .section-head { margin-bottom: 16px; }
.map-card { padding: 16px; }
.map-embed { position: relative; width: 100%; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); }
.map-embed::before { content: ""; display: block; padding-top: 56.25%; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }