:root {
      --navy-deep: #0A2540;
      --navy-mid: #123A5E;
      --navy-glow: #1B4D7A;
      --gold: #C6992F;
      --gold-soft: #E7C878;
      --gold-dim: rgba(198, 153, 47, 0.35);
      --sand: #F5F1E8;
      --ink: #16212E;
      --paper: #FBFAF7;
      --line: rgba(10, 37, 64, 0.12);
    }
    html {
      scroll-behavior: smooth;
    }
    ::selection {
      background: var(--gold-soft);
      color: var(--navy-deep);
    }
    body {
      font-family: 'sora', sans-serif;
      color: var(--ink);
      background: var(--paper);
      overflow-x: hidden;
    }
    h1,
    h2,
    h3,
    .display-serif {
      font-family: 'sora', sans-serif;
      letter-spacing: -0.01em;
    }
    .eyebrow {
     font-family: 'Sora', sans-serif;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-size: 0.92rem;
      color: var(--gold);
    }
    /* ---------- Reveal on scroll ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    }
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 {
      transition-delay: .08s;
    }
    .reveal-delay-2 {
      transition-delay: .16s;
    }
    .reveal-delay-3 {
      transition-delay: .24s;
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
      * {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
      }
    }
    /* =========================================================
   TOP UTILITY BAR — ledger strip with gold bullion hairline
   ========================================================= */
  .top-bar{
    background:#081C31;
    border-bottom:1px solid rgba(198,153,47,0.18);
    padding:0.62rem 0 0.42rem;
    position:relative;
    z-index:1031;
    overflow:hidden;
  }
  /* Bullion hairline — a thin gold seam along the very top edge of the page */
  .top-bar::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,
      rgba(198,153,47,0) 0%,
      var(--gold) 18%,
      var(--gold-soft) 50%,
      var(--gold) 82%,
      rgba(198,153,47,0) 100%);
  }
  /* Faint lat/long ledger texture, echoes the hero grid so the header reads as one system */
  .top-bar::after{
    content:"";
    position:absolute;
    inset:3px 0 0 0;
    background-image:
      linear-gradient(90deg, rgba(198,153,47,0.06) 1px, transparent 1px);
    background-size:64px 100%;
    pointer-events:none;
    opacity:0.5;
  }
  .top-bar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0.5rem;
    position:relative;
    z-index:1;
  }
  /* Centered strapline — positions the firm above the fold, private-bank style.
     A true flex sibling (not absolutely centered) so it never overlaps the
     contact details on the left as the viewport narrows. */
  .trade-strap{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    min-width:0;
    font-family:'Sora', sans-serif;
    font-size:0.66rem;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(231,200,120,0.78);
    white-space:nowrap;
    pointer-events:none;
  }
  .trade-strap .dot{
    width:4px; height:4px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 6px rgba(198,153,47,0.8);
    flex:none;
  }
  @media (max-width: 1399.98px){
    .trade-strap{ display:none; }
  }
  .top-bar-left{
    display:flex;
    align-items:center;
    gap:0;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
  }
  .top-bar-item{
    display:flex;
    align-items:center;
    gap:0.45rem;
    color:rgba(251,250,247,0.62);
    font-size:0.76rem;
    font-weight:600;
    white-space:nowrap;
    padding:0 1rem;
    position:relative;
  }
  /* Ledger tally dividers between utility items, instead of a plain gap */
  .top-bar-item + .top-bar-item::before{
    content:"";
    position:absolute;
    left:0; top:50%;
    transform:translateY(-50%);
    width:1px; height:12px;
    background:rgba(198,153,47,0.25);
  }
  .top-bar-item:first-child{ padding-left:0; }
  .top-bar-item i{ color:var(--gold-soft); font-size:0.72rem; }
  .top-bar-item a{ color:rgba(251,250,247,0.62); text-decoration:none; transition:color .2s ease; }
  .top-bar-item a:hover{ color:var(--gold-soft); }
  .lang-select-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }
  .lang-select-wrap i.fa-earth-europe,
  .lang-select-wrap i.fa-globe{
    position:absolute;
    left:0.55rem;
    color:var(--gold-soft);
    font-size:0.72rem;
    pointer-events:none;
  }
  .lang-select{
    appearance:none;
    -webkit-appearance:none;
    background:rgba(251,250,247,0.04);
    border:1px solid rgba(198,153,47,0.32);
    color:rgba(251,250,247,0.85);
    font-family: 'Sora', sans-serif;
    font-weight:600;
    font-size:0.74rem;
    letter-spacing:0.02em;
    padding:0.3rem 1.7rem 0.3rem 1.75rem;
    border-radius:20px;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
  }
  .lang-select-wrap::after{
    content:"\f078";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:0.55rem;
    color:var(--gold-soft);
    position:absolute;
    right:0.7rem;
    pointer-events:none;
  }
  .lang-select:hover, .lang-select:focus{
    border-color:var(--gold);
    background:rgba(251,250,247,0.08);
    outline:none;
  }
  .lang-select option{ background:var(--navy-deep); color:var(--paper); }
  .top-bar-social{
    display:flex;
    align-items:center;
    gap:0.5rem;
  }
  .top-bar-social span{
    color:rgba(251,250,247,0.5);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-right:0.15rem;
  }
  .social-dot-sm{
    width:26px; height:26px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(198,153,47,0.32);
    border-radius:50%;
    color:rgba(251,250,247,0.75);
    font-size:0.68rem;
    text-decoration:none;
    transition:all .22s ease;
  }
  .social-dot-sm:hover{
    background:var(--gold);
    color:var(--navy-deep);
    border-color:var(--gold);
    transform:translateY(-2px);
  }
  @media (max-width: 767.98px){
    .top-bar-item.d-none-mobile{ display:none; }
    .top-bar-item + .top-bar-item::before{ display:none; }
  }
  /* =========================================================
   NAVBAR
   ========================================================= */
.navbar-dynamo{
  background:rgba(10,37,64,0.94);
  backdrop-filter:blur(10px);
  padding-top:0.4rem;
  padding-bottom:0.4rem;
  border-bottom:1px solid rgba(198,153,47,0.22);
  transition:padding .25s ease, box-shadow .25s ease, background .25s ease;
}
.navbar-dynamo.scrolled{
  padding-top:0.55rem;
  padding-bottom:0.55rem;
  background:rgba(8,28,49,0.98);
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
}
.navbar-dynamo .container{
  align-items:center;
  flex-wrap:nowrap;
}
/* ---------- Brand — rotating trade-seal medallion ---------- */
.navbar-dynamo .navbar-brand{
  font-family: 'Sora', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  color:var(--gold-soft);
  display:flex;
  align-items:center;
  gap:0.65rem;
  white-space:nowrap;
  text-transform:uppercase;
  line-height:24px;
  margin-right:.25rem;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
/* Seal — a coin-like medallion with curved rim text, nodding to an authenticated
   letter-of-credit stamp. The rim text turns slowly; the logo stays fixed and centred. */
.brand-seal{
  position:relative;
  width:50px;
  height:50px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-seal .seal-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:sealSpin 46s linear infinite;
  transform-origin:50% 50%;
}
.brand-seal .seal-ring text{
  font-family:'Sora', sans-serif;
  font-size:8.6px;
  font-weight:700;
  letter-spacing:2px;
  fill:rgba(231,200,120,0.75);
  text-transform:uppercase;
}
.brand-seal .seal-ring circle{
  fill:none;
  stroke:rgba(198,153,47,0.28);
  stroke-width:0.75;
}
@keyframes sealSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.brand-mark{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--navy-glow), var(--navy-deep) 72%);
  box-shadow:
    0 0 0 1px rgba(198,153,47,0.5),
    0 4px 14px rgba(6,20,35,0.55),
    inset 0 0 10px rgba(198,153,47,0.12);
  color:var(--gold-soft);
  font-size:0.92rem;
  flex:none;
  position:relative;
  z-index:1;
  transition:box-shadow .3s ease;
}
.navbar-brand:hover .brand-mark{
  box-shadow:
    0 0 0 1px var(--gold),
    0 4px 18px rgba(6,20,35,0.6),
    inset 0 0 14px rgba(198,153,47,0.22);
}
.navbar-brand:hover .seal-ring{ animation-duration:12s; }
.brand-mark img{ width:62%; position:relative; z-index:1; }
.navbar-dynamo .navbar-brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.navbar-dynamo .navbar-brand-text .brand-name{
  overflow:hidden;
  text-overflow:ellipsis;
}
.navbar-dynamo .navbar-brand small{
  display:block;
  font-family: 'Sora', sans-serif;
  font-size:0.78rem;
  text-transform:uppercase;
  color:var(--paper);
  font-weight:600;
  border-top:1.5px solid var(--gold);
  padding-top:0.15rem;
  margin-top:0.15rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 420px){
  .brand-seal{ width:40px; height:40px; }
  .brand-mark{ width:30px; height:30px; }
  .navbar-dynamo .navbar-brand{ font-size:0.7rem; gap:0.5rem; }
  .navbar-dynamo .navbar-brand small{ font-size:0.62rem; }
}
/* ---------- Toggler (opens mobile offcanvas) ---------- */
.navbar-dynamo .navbar-toggler{
  border-color:rgba(198,153,47,0.4);
  padding:0.4rem 0.55rem;
  flex:none;
  margin-left:0.6rem;
}
.navbar-dynamo .navbar-toggler:focus{
  box-shadow:0 0 0 0.2rem rgba(198,153,47,0.25);
}
.navbar-dynamo .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(231,200,120,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ---------- Desktop nav items ---------- */
@media (min-width: 992px){
  .navbar-dynamo .navbar-nav{
    display:flex;
    align-items:center;
    gap:0.3rem;
  }
  .navbar-dynamo .nav-item{ display:flex; align-items:center; }
  .navbar-dynamo .nav-item.dropdown{ position:relative; }
}
.navbar-dynamo .nav-link{
  color:rgba(251,250,247,0.82) !important;
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.01em;
  white-space:nowrap;
  position:relative;
  padding:0.6rem 1rem !important;
}
.navbar-dynamo .nav-link::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem;
  bottom:0.35rem;
  height:1px;
  width:0%;
  background:var(--gold);
  transition:width .25s ease;
}
.navbar-dynamo .nav-link:hover::after{ width:calc(100% - 2rem); }
.navbar-dynamo .nav-link:hover{ color:var(--gold-soft) !important; }
.navbar-dynamo .nav-link.active{ color:var(--gold-soft) !important; }
.navbar-dynamo .nav-link.active::after{ width:calc(100% - 2rem); }
.nav-link:focus-visible{ outline:0; box-shadow:none; }
/* Contact button separated from nav links */
.navbar-dynamo .nav-item.ms-lg-2{
  margin-left:1rem !important;
  padding-left:1rem;
  border-left:1px solid rgba(198,153,47,0.18);
}
.navbar-dynamo .nav-item.ms-lg-2 .btn-gold{
  padding:0.6rem 1.4rem;
}
.navbar-dynamo .nav-item.ms-lg-2 .btn-gold .fa-arrow-right{
  font-size:0.72rem;
  margin-left:0.15rem;
  transition:transform .25s ease;
  display:inline-block;
}
.navbar-dynamo .nav-item.ms-lg-2 .btn-gold:hover .fa-arrow-right{ transform:translateX(4px); }
/* ---------- Dropdown toggle chevron ---------- */
/* Kill Bootstrap's default caret completely — we use an explicit <i> icon instead */
.navbar-dynamo .dropdown-toggle::after{
  display:none !important;
}
.navbar-dynamo .dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
}
.dropdown-caret{
  font-size:0.7rem;
  transition:transform .2s ease;
}
.navbar-dynamo .dropdown-toggle[aria-expanded="true"] .dropdown-caret{
  transform:rotate(180deg);
}
/* =========================================================
   DROPDOWN MENU (Services) — desktop, simple list
   ========================================================= */
.navbar-dynamo .dropdown-menu{
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events:none;
  background:var(--navy-deep);
  border:1px solid rgba(198,153,47,0.25);
  border-radius:10px;
  padding:0.5rem;
  min-width:260px;
  box-shadow:0 20px 50px rgba(6,20,35,0.5);
  margin-top:0.65rem;
}
.navbar-dynamo .dropdown-menu.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.navbar-dynamo .dropdown-item{
  font-family: 'Sora', sans-serif;
  font-weight:600;
  font-size:0.86rem;
  color:rgba(251,250,247,0.82);
  padding:0.65rem 0.85rem;
  border-radius:7px;
  transition:background .2s ease, color .2s ease;
}
.navbar-dynamo .dropdown-item:hover,
.navbar-dynamo .dropdown-item:focus{
  background:rgba(198,153,47,0.1);
  color:var(--gold-soft);
}
.navbar-dynamo .dropdown-divider{
  border-color:rgba(198,153,47,0.16);
  margin:0.4rem 0.2rem;
}
/* =========================================================
   MOBILE OFFCANVAS
   ========================================================= */
.offcanvas-dynamo{
  background:var(--navy-deep);
  color:var(--paper);
  width:340px;
  border-left:1px solid rgba(198,153,47,0.22);
}
.offcanvas-dynamo .offcanvas-header{
  border-bottom:1px solid rgba(198,153,47,0.16);
  padding:1.1rem 1.25rem;
}
.offcanvas-dynamo .navbar-brand{
  font-family: 'Sora', sans-serif;
  font-weight:600;
  font-size:0.9rem;
  color:var(--gold-soft);
  text-transform:uppercase;
}
.offcanvas-dynamo .offcanvas-body{
  padding:1.25rem;
  position:relative;
  overflow-x:hidden;
}
.offcanvas-nav{ width:100%; }
.offcanvas-nav .nav-item{ border-bottom:1px solid rgba(198,153,47,0.14); }
.offcanvas-nav .nav-link{
  color:rgba(251,250,247,0.88) !important;
  font-family: 'Sora', sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:0.85rem 0.2rem;
}
.offcanvas-nav .nav-link:hover{ color:var(--gold-soft) !important; }
.offcanvas-nav .nav-link .dropdown-caret{
  font-size:0.75rem;
  transition:transform .2s ease;
}
/* Flip the caret to point up while the Services panel is expanded */
.offcanvas-nav .nav-link[aria-expanded="true"] .dropdown-caret{
  transform:rotate(180deg);
}
.offcanvas-submenu{
  list-style:none;
  padding:0.3rem 0 0.6rem 0.2rem;
  margin:0;
}
.offcanvas-submenu li a{
  display:block;
  padding:0.6rem 0.2rem;
  color:rgba(251,250,247,0.7);
  font-family: 'Sora', sans-serif;
  font-size:0.9rem;
  font-weight:500;
  text-decoration:none;
}
.offcanvas-submenu li a:hover{ color:var(--gold-soft); }

/* ---------- Offcanvas header tagline ---------- */
.offcanvas-dynamo .offcanvas-header{
  flex-direction:column;
  align-items:flex-start;
  gap:0.35rem;
  position:relative;
}
.offcanvas-dynamo .offcanvas-header .btn-close{
  position:absolute;
  top:1.1rem;
  right:1.25rem;
}
.offcanvas-tagline{
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(231,200,120,0.7);
}
.offcanvas-tagline .dot{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 6px rgba(198,153,47,0.8);
  flex:none;
}

/* ---------- Faint watermark seal — echoes the navbar medallion, fills empty space ---------- */
.offcanvas-watermark{
  position:absolute;
  right:-70px;
  bottom:90px;
  width:280px;
  height:280px;
  pointer-events:none;
  opacity:0.05;
  z-index:0;
}
.offcanvas-watermark svg{ width:100%; height:100%; }
.offcanvas-watermark circle{ fill:none; stroke:var(--gold-soft); stroke-width:0.6; }
.offcanvas-watermark text{
  font-family:'Sora', sans-serif;
  font-size:6.4px;
  font-weight:700;
  letter-spacing:2px;
  fill:var(--gold-soft);
}

/* ---------- Body sections sit above the watermark ---------- */
.offcanvas-dynamo .offcanvas-body > *:not(.offcanvas-watermark){ position:relative; z-index:1; }

.offcanvas-section-title{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(231,200,120,0.72);
  margin:1.4rem 0 0.75rem;
}
.offcanvas-nav + .offcanvas-section-title{ margin-top:1.5rem; }

/* ---------- Get in touch ---------- */
.offcanvas-info{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}
.offcanvas-info-item{
  display:flex;
  align-items:center;
  gap:0.7rem;
  color:rgba(251,250,247,0.82);
  text-decoration:none;
  font-size:0.86rem;
  font-weight:500;
}
a.offcanvas-info-item:hover{ color:var(--gold-soft); }
.offcanvas-info-item .oc-icon{
  flex:none;
  width:32px; height:32px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(198,153,47,0.1);
  border:1px solid rgba(198,153,47,0.25);
  color:var(--gold-soft);
  font-size:0.78rem;
}

/* ---------- Social row ---------- */
.offcanvas-social{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.offcanvas-social .social-dot-sm{
  width:32px; height:32px;
  font-size:0.78rem;
}

/* ---------- Divider ---------- */
.offcanvas-divider{
  height:1px;
  background:rgba(198,153,47,0.16);
  margin:1.4rem 0 0;
  border:0;
}

/* ---------- Bottom CTA group ---------- */
.offcanvas-cta-group{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  padding-top:1.4rem;
}
.offcanvas-cta-group .btn-outline-gold{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
}
/* =========================================================
   BUTTONS
   ========================================================= */
.btn-gold{
  background:var(--gold);
  border:1px solid var(--gold);
  color:var(--navy-deep);
  font-weight:700;
  letter-spacing:0.02em;
  padding:0.5rem 1.2rem;
  font-size:0.82rem;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  transition:all .25s ease;
  white-space:nowrap;
  z-index:1;
}
.btn-gold::before{
  content:"";
  position:absolute; inset:0;
  background:var(--gold-soft);
  transform:translateX(-101%);
  transition:transform .3s ease;
  z-index:-1;
}
.btn-gold:hover::before{ transform:translateX(0); }
.btn-gold:hover{ color:var(--navy-deep); border-color:var(--gold-soft); }
.btn-outline-gold{
  border:1px solid var(--gold);
  color:var(--gold-soft);
  font-weight:600;
  border-radius:2px;
  padding:0.5rem 1.3rem;
  transition:all .25s ease;
}
.btn-outline-gold:hover{ background:var(--gold); color:var(--navy-deep); }
/* =========================================================
   BUTTONS
   ========================================================= */
.btn-gold{
  background:var(--gold);
  border:1px solid var(--gold);
  color:var(--navy-deep);
  font-weight:700;
  letter-spacing:0.02em;
  padding:0.5rem 1.2rem;
  font-size:0.82rem;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  transition:all .25s ease;
  white-space:nowrap;
  z-index:1;
}
.btn-gold::before{
  content:"";
  position:absolute; inset:0;
  background:var(--gold-soft);
  transform:translateX(-101%);
  transition:transform .3s ease;
  z-index:-1;
}
.btn-gold:hover::before{ transform:translateX(0); }
.btn-gold:hover{ color:var(--navy-deep); border-color:var(--gold-soft); }
.btn-outline-gold{
  border:1px solid var(--gold);
  color:var(--gold-soft);
  font-weight:600;
  border-radius:2px;
  padding:0.5rem 1.3rem;
  transition:all .25s ease;
}
.btn-outline-gold:hover{ background:var(--gold); color:var(--navy-deep); }
/* ---------- Hero — split panel ---------- */
/* ---------- Hero — unified light background, no panel split ---------- */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 88% 8%, rgba(198,153,47,0.14), transparent 60%),
    radial-gradient(ellipse 55% 50% at 6% 95%, rgba(27,77,122,0.08), transparent 58%),
    linear-gradient(155deg, #FBFAF7 0%, #F7F4ED 22%, #F1EEE5 48%, #EEF1F6 72%, #E8EDF4 100%);
  color: var(--navy-deep);
  padding: 3.25rem 0 0;
  position: relative;
  overflow: hidden;
  min-height: 66vh;
  display: flex;
  align-items: center;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(198,153,47,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,153,47,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 70% 30%, black 10%, transparent 72%);
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.hero-watermark {
  position: absolute;
  top: 48%;
  left: 54%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: 'Sora', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: min(20vw, 240px);
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(198,153,47,0.1);
  white-space: nowrap;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Medallion — contained navy circle behind the emblem only */
.emblem-medallion {
  position: relative;
  width: 380px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--navy-glow) 0%, var(--navy-deep) 68%);
  box-shadow:
    0 30px 70px rgba(10,37,64,0.28),
    0 0 0 1px rgba(198,153,47,0.25),
    inset 0 0 40px rgba(198,153,47,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.emblem-medallion::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(198,153,47,0.3);
}
.emblem-medallion svg { position: relative; z-index: 1; }
/* Grid texture — confined to the light side only */
.hero-grid {
  position: absolute;
  inset: 0;
  width: 54%;
  background-image:
    linear-gradient(rgba(198,153,47,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,153,47,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 25% 30%, black 10%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
/* Watermark — vertical brand mark riding the seam instead of floating behind text */
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  font-family: 'Sora', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,153,47,0.4);
  white-space: nowrap;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.hero-rule {
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(198,153,47,0.25));
  margin: 0.9rem 0 1.15rem;
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(198,153,47,0.4);
}
.hero h1 {
  font-size: clamp(2.05rem, 3.5vw, 3.05rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 15ch;
  color: var(--navy-deep);
  position: relative;
  z-index: 2;
  letter-spacing: -0.025em;
}
.hero p.lead-copy {
  max-width: 42ch;
  color: rgba(10, 37, 64, 0.68);
  font-size: 1rem;
  line-height: 1.7;
  position: relative;
  z-index: 2;
  margin-top: 1rem;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.75rem;
  position: relative;
  z-index: 2;
}
.hero-badge {
  border: 1px solid rgba(198,153,47,0.32);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--navy-deep);
  font-size: 0.73rem;
  font-weight: 650;
  padding: 0.42rem 1rem;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow:
    0 2px 12px rgba(10,37,64,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-badge:hover {
  border-color: rgba(198,153,47,0.55);
  background: rgba(255,255,255,0.92);
  transform: translateY(-2px);
}
.hero-badge i { color: var(--gold); font-size: 0.68rem; }
.emblem-orbit {
  position: relative;
  width: 420px;
  max-width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Static hit-area — position never changes, so hover never loses the cursor */
.orbit-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.orbit-slot-1 { transform: translate(-50%, -50%) translate(0px, -195px); }
.orbit-slot-2 { transform: translate(-50%, -50%) translate(185px, -60px); }
.orbit-slot-3 { transform: translate(-50%, -50%) translate(115px, 158px); }
.orbit-slot-4 { transform: translate(-50%, -50%) translate(-115px, 158px); }
.orbit-slot-5 { transform: translate(-50%, -50%) translate(-185px, -60px); }
.orbit-slot:hover { z-index: 10; }
/* The visible pill — free to animate inside its static slot */
.orbit-slot .hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 0.68rem;
  padding: 0.36rem 0.85rem;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
/* Slide to center: each badge moves by the inverse of its slot offset */
.orbit-slot-1:hover .hero-badge { transform: translate(-50%, -50%) translate(0px, 195px) scale(1.18); }
.orbit-slot-2:hover .hero-badge { transform: translate(-50%, -50%) translate(-185px, 60px) scale(1.18); }
.orbit-slot-3:hover .hero-badge { transform: translate(-50%, -50%) translate(-115px, -158px) scale(1.18); }
.orbit-slot-4:hover .hero-badge { transform: translate(-50%, -50%) translate(115px, -158px) scale(1.18); }
.orbit-slot-5:hover .hero-badge { transform: translate(-50%, -50%) translate(185px, 60px) scale(1.18); }
.orbit-slot:hover .hero-badge {
  background: var(--navy-deep);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(10,37,64,0.35), 0 0 0 1px var(--gold);
}
.orbit-slot:hover .hero-badge i {
  color: var(--gold);
}
.hero-content-slider .carousel-item h2,
.hero-content-slider .carousel-item .lead-copy,
.hero-content-slider .carousel-item .d-flex {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}
.hero-content-slider .carousel-item h2.is-visible,
.hero-content-slider .carousel-item .lead-copy.is-visible,
.hero-content-slider .carousel-item .d-flex.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.hero-content-slider .carousel-item h2.is-visible        { transition-delay: 0.08s; }
.hero-content-slider .carousel-item .lead-copy.is-visible { transition-delay: 0.26s; }
.hero-content-slider .carousel-item .d-flex.is-visible    { transition-delay: 0.42s; }
.hero-content-slider .carousel-item { position: relative; }
.hero-content-slider .carousel-item::after {
  content: "";
  display: block;
  height: 2.5px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(198,153,47,0.35), transparent);
  margin-top: 0.5rem;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(198,153,47,0.35);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}
.hero-content-slider .carousel-item.active::after { width: 110px; }
.hero-content-indicators { display: flex; gap: 8px; margin-top: 1.45rem; position: relative; z-index: 2; }
.hero-content-indicators button {
  width: 20px;
  height: 3.5px;
  border: none;
  border-radius: 3px;
  background-color: rgba(198,153,47,0.22);
  padding: 0;
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s ease,
              box-shadow 0.3s ease;
}
.hero-content-indicators button.active {
  width: 36px;
  background-color: var(--gold);
  box-shadow: 0 0 12px rgba(198,153,47,0.45);
}
.hero-content-slider h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0;
  color: var(--navy-deep);
  letter-spacing: -0.02em;
}
/* Emblem — now sits on real navy, with a glow to lift it off the panel */
.emblem-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.emblem-wrap::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,153,47,0.3), transparent 70%);
  filter: blur(28px);
  z-index: -1;
}
.pulse-ring { transform-origin: center; animation: pulseRing 3.8s ease-out infinite; }
.pulse-ring.r2 { animation-delay: 1.25s; }
.pulse-ring.r3 { animation-delay: 2.5s; }
@keyframes pulseRing { 0% { opacity: 0.45; r: 56; } 100% { opacity: 0; r: 150; } }
.gear-ring     { animation: spin 26s linear infinite; transform-origin: 210px 210px; }
.gear-ring-rev { animation: spinRev 34s linear infinite; transform-origin: 210px 210px; }
@keyframes spin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.orbit-node { animation: spin 9.5s linear infinite; transform-origin: 210px 210px; }
.hero-bottom-fade {
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, rgba(251,250,247,0.6) 40%, var(--paper) 100%);
  margin-top: -1px;
  position: relative;
  z-index: 2;
}
.ticker-strip {
  background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-mid) 50%, var(--navy-deep) 100%);
  border-top: 1px solid rgba(198,153,47,0.28);
  border-bottom: 1px solid rgba(198,153,47,0.18);
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding: 0.65rem 0;
}
.ticker-track { display: flex; width: max-content; animation: scrollTicker 32s linear infinite; }
.ticker-track span {
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.ticker-track span i { font-size: 0.45rem; color: rgba(231,200,120,0.55); }
@keyframes scrollTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 991.98px) {
  .hero-diagonal-panel,
  .hero-watermark { display: none; }
}
  /* =========================================================
   INNER PAGE HERO — navy, on-brand
   ========================================================= */
.page-hero{
  background-color: #f7f5f0 !important;
  background-image: linear-gradient(160deg, #fdfcf9 0%, #f2efe6 70%);
  color: var(--ink, #1f2733);
  padding: 4.4rem 0 3.6rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(198,153,47,0.15);
}
.page-hero .why-grid-texture{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(198,153,47,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,153,47,0.10) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 60% 80% at 85% 20%, black 10%, transparent 70%);
  pointer-events:none;
}
.page-hero-rings{
  position:absolute;
  top:50%; right:-60px;
  transform:translateY(-50%);
  width:300px; height:300px;
  pointer-events:none;
  z-index:0;
}
.page-hero-rings circle{ fill:none; stroke:rgba(198,153,47,0.18); }
.page-hero-rings circle.accent{ stroke:rgba(198,153,47,0.5); }
.page-hero .container{ position:relative; z-index:1; }
.page-hero .eyebrow{ color: var(--gold-deep, #a67c1e); }
.page-hero h1{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight:600;
  line-height:1.15;
  margin-top:0.5rem;
  max-width:22ch;
  color: var(--ink, #1f2733);
}
.page-breadcrumb{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem;
  list-style:none;
  padding:0.45rem 0.9rem;
  margin:1.5rem 0 0;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:rgba(31,39,51,0.65);
  background:rgba(31,39,51,0.04);
  border:1px solid rgba(198,153,47,0.3);
  border-radius:20px;
}
.page-breadcrumb a{ color: var(--gold-deep, #a67c1e); text-decoration:none; }
.page-breadcrumb a:hover{ color: #8a6414; }
.page-breadcrumb .sep{ color: rgba(198,153,47,0.6); }
.page-breadcrumb .current{ color: rgba(31,39,51,0.85); }
  /* ---------- Inner page content ---------- */
  .check-list{ list-style:none; padding:0; margin:1.6rem 0 0; }
  .check-list li{
    display:flex;
    gap:0.7rem;
    align-items:flex-start;
    margin-bottom:1rem;
    color:#4B5A6A;
    font-size:0.96rem;
    line-height:1.55;
  }
  .check-list li i{ color:var(--gold); margin-top:0.28rem; flex:none; }
.why-strip{
  background-color: var(--navy-mid) !important;
  background-image: linear-gradient(180deg, var(--navy-mid), var(--navy-deep));
  color: var(--paper);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.why-strip .why-grid-texture{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(198,153,47,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,153,47,0.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 60% 70% at 82% 20%, black 10%, transparent 68%);
  pointer-events:none;
  z-index:0;
}
.why-strip .container{ position:relative; z-index:2; }
.why-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.why-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0 1.6rem;
  border-right:1px solid rgba(198,153,47,0.22);
}
.why-item:first-child{ padding-left:0; }
.why-item:last-child{ border-right:none; padding-right:0; }
.why-item-icon{
  width:46px; height:46px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold-soft);
  font-size:1rem;
}
.why-item h4{
  font-family: 'Sora', sans-serif;
  font-size:0.98rem;
  font-weight:600;
  color:var(--paper);
  margin-bottom:0.25rem;
  line-height:1.25;
}
.why-item p{
  font-size:0.82rem;
  line-height:1.5;
  color:rgba(251,250,247,0.58);
  margin:0;
}
@media (max-width: 991.98px){
  .why-bar{ grid-template-columns:1fr 1fr; row-gap:2rem; }
  .why-item:nth-child(odd){ border-right:1px solid rgba(198,153,47,0.22); }
  .why-item:nth-child(even){ border-right:none; padding-right:0; }
  .why-item:nth-child(3), .why-item:nth-child(4){ padding-left:1.6rem; }
}
@media (max-width: 575.98px){
  .why-bar{ grid-template-columns:1fr; row-gap:1.8rem; }
  .why-item{ border-right:none !important; padding:0 !important; }
}
  /* ---------- Service cards ---------- */
  /* =========================================================
   SERVICES — bento grid (5 tiles: 3 top / 2 bottom)
   ========================================================= */
#services{
  margin: 35px 0;
}
.service-bento{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.service-bento-row2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.4rem;
  margin-top:1.4rem;
}
/* ---- Tile base ---- */
.service-tile{
  position:relative;
  height:310px;
  border-radius:8px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.service-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 54px rgba(10,37,64,0.35);
}
/* ---- Background image ---- */
.service-tile-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  z-index:0;
}
.service-tile:hover .service-tile-img{
  transform:scale(1.06);
}
/* ---- Gradient overlay, dark on left fading toward right ---- */
.service-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(6,17,30,0.95) 0%,
    rgba(8,21,36,0.88) 30%,
    rgba(10,37,64,0.35) 58%,
    rgba(10,37,64,0.05) 80%);
  z-index:1;
}
/* ---- Gold top rule, reveals on hover ---- */
.service-tile::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s ease;
  z-index:2;
}
.service-tile:hover::after{
  transform:scaleX(1);
}
/* ---- Content block (icon + text), bottom-left ---- */
.service-tile-content{
  position:absolute;
  left:1.6rem; right:1.4rem; bottom:1.6rem;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.service-tile-icon{
  width:52px; height:52px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--gold-soft);
  border-radius:50%;
  background:rgba(10,37,64,0.55);
  color:var(--gold-soft);
  font-size:1.15rem;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.service-tile:hover .service-tile-icon{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy-deep);
}
.service-tile h3{
  font-family: 'Sora', sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-size:1.15rem;
  line-height:1.22;
  color:var(--paper);
  margin:0 0 0.5rem;
}
.service-tile p{
  font-size:0.83rem;
  line-height:1.5;
  color:rgba(251,250,247,0.72);
  margin:0;
  max-width:26ch;
}
/* ---- Row 2 tiles: wider, slightly taller, more copy room ---- */
.service-bento-row2 .service-tile{
  height:310px;
}
.service-bento-row2 .service-tile p{
  max-width:34ch;
}
/* ---- Responsive ---- */
@media (max-width: 991.98px){
  .service-bento,
  .service-bento-row2{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 575.98px){
  .service-bento,
  .service-bento-row2{
    grid-template-columns:1fr;
    margin-top:15px;
    gap:1.1rem;
  }
  .service-tile{
    height:300px;
  }
  .service-bento-row2 .service-tile{
    height:300px;
  }
}
/* ---- Know More link ---- */
.service-tile .service-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin-top:0.9rem;
  color:var(--gold-soft);
  font-weight:700;
  font-size:0.79rem;
  letter-spacing:0.02em;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease, gap .25s ease;
}
.service-tile .service-link i{
  font-size:0.7rem;
  transition:transform .25s ease;
}
.service-tile .service-link:hover{
  color:var(--gold);
  border-color:var(--gold);
  gap:0.7rem;
}
.service-tile .service-link:hover i{
  transform:translateX(4px);
}
  /* ---------- Contact CTA ---------- */
  .cta-band{
    background:linear-gradient(135deg, var(--navy-mid), var(--navy-deep) 70%);
    color:var(--paper);
    border-radius:4px;
    padding:3.4rem 2.5rem;
    position:relative;
    overflow:hidden;
    height:100%;
  }
  .cta-band::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 60%, rgba(198,153,47,0.16));
  }
  .cta-band::after{
    content:"";
    position:absolute;
    width:220px; height:220px;
    border:1px solid rgba(198,153,47,0.25);
    border-radius:50%;
    right:-70px; bottom:-90px;
  }
  .cta-band h2{
    font-size:clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight:600;
    position:relative;
  }
  .cta-band p{ color:rgba(251,250,247,0.75); position:relative; max-width:40ch;}
  /* ---------- Contact cards ---------- */
.contact-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:2.4rem 1.6rem 2.2rem;
  text-align:center;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(10,37,64,0.12);
  border-color:var(--gold-dim);
}
.contact-card::before,
.contact-card::after{
  content:"";
  position:absolute;
  width:64px; height:64px;
  background:var(--gold-soft);
  z-index:-1;
  transition:width .35s ease, height .35s ease, background .35s ease;
}
.contact-card::before{
  top:0; right:0;
  clip-path:polygon(100% 0, 100% 100%, 0 0);
}
.contact-card::after{
  bottom:0; left:0;
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}
.contact-card:hover::before,
.contact-card:hover::after{
  width:88px; height:88px;
  background:var(--gold);
}
.contact-card > *{
  position:relative;
  z-index:1;
}
.contact-icon{
  width:50px; height:50px;
  margin:0 auto 1.2rem;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gold);
  border-radius:50%;
  background:#fff;
  color:var(--navy-deep);
  font-size:1.1rem;
}
  /* ---------- Footer ---------- */
  footer{
    background:var(--navy-deep);
    color:rgba(251,250,247,0.72);
    padding:3.6rem 0 1.6rem;
    border-top:1px solid rgba(198,153,47,0.2);
  }
  footer h5{
    font-family: 'Sora', sans-serif;
    color:var(--paper);
    font-weight:600;
    margin-bottom:0.2rem;
  }
    footer h4{
    color:var(--gold-soft);
    font-size: 1.3rem;
    font-weight:600;
    margin-bottom:0.2rem;
  }
  footer small{
    display:block;
    color:var(--gold-soft);
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-size:0.62rem;
    font-weight:700;
    margin-bottom:0.9rem;
  }
  footer a{
    color:rgba(251,250,247,0.72);
    text-decoration:none;
  }
  footer a:hover{ color:var(--gold-soft); }
  footer ul{ list-style:none; padding:0; margin:0; }
  footer ul li{ margin-bottom:0.55rem; font-size:0.92rem; }
  .footer-divider{ border-color:rgba(198,153,47,0.2); margin:2.4rem 0 1.4rem; }
  .social-dot{
    width:38px; height:38px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(198,153,47,0.35);
    border-radius:50%;
    color:var(--gold-soft);
    margin-right:0.5rem;
    transition:all .25s ease;
  }
  .social-dot:hover{ background:var(--gold); color:var(--navy-deep); border-color:var(--gold); transform:translateY(-3px); }
  /* Back to top */
  .back-to-top{
    position:fixed;
    right:22px; bottom:22px;
    width:44px; height:44px;
    border-radius:50%;
    background:var(--gold);
    color:var(--navy-deep);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(10,37,64,0.35);
    opacity:0; visibility:hidden;
    transform:translateY(10px);
    transition:all .3s ease;
    z-index:1000;
    text-decoration:none;
  }
  .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed;
  left:22px; bottom:22px;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem;
  box-shadow:0 10px 26px rgba(37,211,102,0.45);
  text-decoration:none;
  z-index:1000;
  transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 32px rgba(37,211,102,0.55);
  color:#fff;
}
.whatsapp-ping{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  opacity:0.6;
  animation:whatsappPulse 2.2s ease-out infinite;
  z-index:-1;
}
@keyframes whatsappPulse{
  0%{ transform:scale(1); opacity:0.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
/* ---------- Greeting bubble ---------- */
.whatsapp-bubble{
  position:fixed;
  left:22px; bottom:22px;
  width:302px;
  background:var(--paper);
  border-radius:12px;
  box-shadow:0 20px 48px rgba(10,37,64,0.22);
  padding:1.1rem 1.2rem 1.2rem;
  z-index:1001;
  opacity:0;
  visibility:hidden;
  max-height:min(440px, calc(100vh - 150px));
  overflow-y:auto;
  transform:translateY(16px) scale(0.96);
  transform-origin:bottom left;
  transition:opacity .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1), visibility .3s ease;
}
.whatsapp-bubble.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.whatsapp-bubble-close{
  position:absolute;
  top:8px; right:10px;
  background:none;
  border:none;
  font-size:1.1rem;
  line-height:1;
  color:#98a5b3;
  cursor:pointer;
}
.whatsapp-bubble-close:hover{ color:var(--navy-deep); }
.whatsapp-bubble-head{
  display:flex;
  align-items:center;
  gap:0.65rem;
  margin-bottom:0.7rem;
}
.whatsapp-bubble-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  flex:none;
}
.whatsapp-bubble-head strong{
  display:block;
  font-family: 'Sora', sans-serif;
  font-size:0.92rem;
  color:var(--navy-deep);
}
.whatsapp-bubble-head small{
  color:#7a8794;
  font-size:0.72rem;
}
.whatsapp-bubble p{
  font-size:0.85rem;
  color:#4B5A6A;
  line-height:1.5;
  margin-bottom:0.9rem;
}
.whatsapp-service-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.whatsapp-service-list button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  background:rgba(37,211,102,0.08);
  border:1px solid rgba(37,211,102,0.18);
  color:var(--navy-deep);
  font-family: 'Sora', sans-serif;
  font-weight:600;
  font-size:0.82rem;
  text-align:left;
  padding:0.55rem 0.75rem;
  border-radius:9px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.whatsapp-service-list button i{
  font-size:0.66rem;
  color:#25D366;
  flex:none;
  transition:color .18s ease;
}
.whatsapp-service-list button:hover,
.whatsapp-service-list button:focus-visible{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
  outline:none;
}
.whatsapp-service-list button:hover i,
.whatsapp-service-list button:focus-visible i{ color:#fff; }
.whatsapp-bubble-cta{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:#25D366;
  color:#fff;
  font-weight:700;
  font-size:0.82rem;
  padding:0.5rem 0.9rem;
  border-radius:20px;
  text-decoration:none;
  transition:background .2s ease;
}
.whatsapp-bubble-cta:hover{ background:#1fb955; color:#fff; }
@media (max-width: 480px){
  .whatsapp-bubble{ width:calc(100vw - 44px); left:22px; }
}
/* =========================================================
   ABOUT PAGE CONTENT
   ========================================================= */
.about-intro{ padding: 4rem 0 0.5rem; }
.about-founded{
  display:inline-flex;
  align-items:center;
  gap:0.9rem;
  padding:0.6rem 1.1rem 0.6rem 0.7rem;
  border:1px solid var(--line);
  border-radius:100px;
  margin-bottom:1.8rem;
}
.about-founded-year{
  width:44px; height:44px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep);
  color:var(--gold-soft);
  border-radius:50%;
  font-family: 'Sora', sans-serif;
  font-weight:600;
  font-size:0.8rem;
}
.about-founded span{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#5B6A7A;
}
.about-lead{
  font-family: 'Sora', sans-serif;
  font-weight:500;
  font-size:clamp(1.35rem, 2.1vw, 1.75rem);
  line-height:1.5;
  color:var(--navy-deep) !important;
  max-width:56ch;
  opacity:1 !important;
}
.about-body{ padding:3rem 0 1rem; }
.about-body p{
  color:#4B5A6A !important;
  font-size:0.98rem;
  line-height:1.8;
  margin-bottom:1.4rem;
  opacity:1 !important;
}
.about-sidebar{
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:12px;
  padding:2.2rem 1.8rem;
}
.about-sidebar-eyebrow{
  font-family: 'Sora', sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
  display:block;
}
.about-sidebar h4{
  font-family: 'Sora', sans-serif;
  font-size:1.15rem;
  font-weight:600;
  color:var(--navy-deep);
  margin-bottom:1.3rem;
}
.about-banner{
  background-color: var(--navy-mid) !important;
  background-image: linear-gradient(180deg, var(--navy-mid), var(--navy-deep));
  color: var(--paper);
  padding: 3.6rem 0;
  position: relative;
  overflow: hidden;
}
.about-banner .why-grid-texture{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(198,153,47,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,153,47,0.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 60% 70% at 82% 20%, black 10%, transparent 68%);
  pointer-events:none;
}
.about-banner .container{ position:relative; z-index:1; }
.about-banner-inner{
  display:flex;
  align-items:center;
  gap:2.2rem;
  flex-wrap:wrap;
}
.about-banner-badge{
  width:64px; height:64px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gold);
  border-radius:50%;
  color:var(--gold-soft);
  font-size:1.4rem;
}
.about-banner p{
  font-family: 'Sora', sans-serif;
  font-weight:500;
  font-size:clamp(1.1rem, 1.8vw, 1.4rem);
  line-height:1.6;
  color:var(--paper) !important;
  margin:0;
  max-width:70ch;
  opacity:1 !important;
}
.about-banner strong{ color:var(--gold-soft); }
.about-closing{ padding:4.5rem 0 5rem; text-align:center; }
.about-closing-mark{
  font-family: 'Sora', sans-serif;
  font-style:italic;
  font-size:3.5rem;
  color:var(--gold-dim);
  line-height:1;
  margin-bottom:0.5rem;
}
.about-closing p{
  font-family: 'Sora', sans-serif;
  font-weight:500;
  font-size:clamp(1.3rem, 2.4vw, 1.85rem);
  line-height:1.55;
  color:var(--navy-deep) !important;
  max-width:44ch;
  margin:0 auto 2rem;
  opacity:1 !important;
}
.about-closing strong{ color: var(--gold); }
@media (max-width: 991.98px){
  .about-sidebar{ margin-top:2rem; }
}
/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-page{ padding: 4rem 0 5rem; }
.contact-info-card{
  background: var(--navy-deep);
  color: var(--paper);
  border-radius:12px;
  padding: 2.6rem 2.2rem;
  height:100%;
  position:relative;
  overflow:hidden;
}
.contact-info-card::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(198,153,47,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,153,47,0.06) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 70% 60% at 15% 10%, black 10%, transparent 68%);
  pointer-events:none;
}
.contact-info-card > *{ position:relative; z-index:1; }
.contact-info-card h3{
  font-family: 'Sora', sans-serif;
  font-size:1.35rem;
  font-weight:600;
  color:var(--paper);
  margin-bottom:1.6rem;
}
.contact-info-row{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.6rem;
}
.contact-info-icon{
  width:44px; height:44px;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gold);
  border-radius:50%;
  color:var(--gold-soft);
  font-size:1rem;
}
.contact-info-row h5{
  font-family: 'Sora', sans-serif;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:0.35rem;
}
.contact-info-row p,
.contact-info-row a{
  font-size:0.92rem;
  line-height:1.55;
  color:rgba(251,250,247,0.78);
  margin:0;
  text-decoration:none;
}
.contact-info-row a:hover{ color:var(--gold-soft); }
.contact-info-social{
  margin-top:2.2rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(198,153,47,0.2);
}
.contact-info-social h5{
  font-family: 'Sora', sans-serif;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:0.9rem;
}
/* ---- Form panel ---- */
.contact-form-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:2.8rem 2.4rem;
  height:100%;
}
.contact-form-panel h3{
  font-family: 'Sora', sans-serif;
  font-size:1.35rem;
  font-weight:600;
  color:var(--navy-deep);
  margin-bottom:0.4rem;
}
.contact-form-panel .form-sub{
  color:#6B7A8A;
  font-size:0.9rem;
  margin-bottom:1.8rem;
}
.form-floating{ margin-bottom:1.1rem; }
.contact-form-panel .form-control,
.contact-form-panel .form-select{
  border:1px solid var(--line);
  border-radius:6px;
  font-size:0.92rem;
  padding:0.85rem 1rem;
  height:auto;
}
.contact-form-panel textarea.form-control{
  min-height:120px;
}
.contact-form-panel .form-control:focus,
.contact-form-panel .form-select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,153,47,0.15);
}
.contact-form-panel label{
  font-size:0.85rem;
  font-weight:600;
  color:var(--navy-deep);
  margin-bottom:0.4rem;
  display:block;
}
.contact-submit-btn{
  width:100%;
  justify-content:center;
  padding:0.75rem 1.5rem;
  font-size:0.9rem;
}
.contact-submit-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.form-alert{
  display:none;
  padding:0.85rem 1.1rem;
  border-radius:6px;
  font-size:0.88rem;
  margin-bottom:1.3rem;
}
.form-alert.show{ display:block; }
.form-alert.success{
  background:rgba(37,211,102,0.1);
  border:1px solid rgba(37,211,102,0.35);
  color:#146c3d;
}
.form-alert.error{
  background:rgba(220,53,69,0.08);
  border:1px solid rgba(220,53,69,0.3);
  color:#a3202f;
}
/* honeypot field — hidden from real users */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
/* ---- Map ---- */
.contact-map{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  height:340px;
  margin-top:2rem;
  overflow:hidden;
}
.contact-map iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width: 991.98px){
  .contact-info-card{ margin-bottom:1.6rem; }
}
.g-recaptcha{
  margin-bottom:1.3rem;
  transform-origin:left top;
}
@media (max-width: 380px){
  .g-recaptcha{ transform:scale(0.9); }
}
/* Hide Google's default translate banner + tooltip clutter */
.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
body {
  top: 0 !important;
  position: static !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}
/* Google Translate widget itself is driven by our own #langSelect
   dropdown in the top bar, so keep the default Google UI invisible */
.goog-lang-hidden,
#google_translate_element {
  display: none !important;
}