/* === Tokens & Base === */
:root{
  --blue-coral:#5a7d7c; --sea-foam:#a8c4b3; --reef:#2e4a47;
  --sand:#d9cbbf; --pearl:#f4f6f5; --coral:#e9896a; --ink:#0f172a;
  --shadow-sm:0 6px 14px rgba(15,23,42,.12);
  --shadow-md:0 14px 30px rgba(15,23,42,.14);
  --shadow-lg:0 28px 54px rgba(15,23,42,.18);
  --pill:999px; --radius-xl:20px; --anchor-offset:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background: radial-gradient(900px 600px at 10% -10%, rgba(232,137,106,.10), transparent),
              radial-gradient(800px 500px at 90% -20%, rgba(90,125,124,.14), transparent),
              radial-gradient(circle at top left, #e4ece9 0, #f4f6f5 38%, #f8f5f1 100%);
  color:#1f2933; line-height:1.6; min-height:100vh; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1160px,100% - 2rem); margin-inline:auto}
section{padding:clamp(1.4rem,1vw,2rem) 0; position:relative; scroll-margin-top:var(--anchor-offset)}
h1{font-size:clamp(2rem,6vw,2.8rem); color:var(--reef); letter-spacing:.01em; margin-bottom:.55rem; line-height:1.15; max-width:20ch}
h2{font-size:clamp(1.6rem,4vw,2.2rem); color:var(--reef); margin-bottom:.9rem}
h3{font-size:1.06rem; color:var(--reef); margin-bottom:.5rem}
p{margin-bottom:.6rem}
ul{margin:.2rem 0 .6rem 1.1rem}

/* === Header & Nav === */
.site-header{position:sticky; top:0; z-index:70}
.nav-shell{backdrop-filter:saturate(140%) blur(18px); background:linear-gradient(120deg, rgba(90,125,124,.10), rgba(244,246,245,.92)); border-bottom:1px solid rgba(90,125,124,.12)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.5rem 0}
.logo-wrap{display:flex; align-items:center; gap:.6rem; min-height:44px}
.logo-img{width: clamp(120px, 22vw, 200px); height:auto; filter:drop-shadow(0 8px 18px rgba(15,23,42,.18))}
.nav-links{display:flex; align-items:center; gap:1rem; font-size:.95rem}
.nav-links a{position:relative; padding:.46rem .18rem; color:#0f172a}
.nav-links a::before{content:""; position:absolute; inset-inline:0; bottom:-.2rem; height:2px; border-radius:var(--pill); transform:scaleX(0); transform-origin:center; background:linear-gradient(90deg,var(--coral),var(--sea-foam)); transition:transform .18s ease}
.nav-links a:hover::before{transform:scaleX(1)}
.nav-cta-link{padding:.6rem 1.05rem; border-radius:var(--pill); border:1px solid rgba(46,74,71,.18); background: radial-gradient(120% 120% at 0% 0%, #a8c4b3 0, #5a7d7c 40%, #2e4a47 100%); color:#fff; box-shadow:0 12px 26px rgba(46,74,71,.28), inset 0 0 0 1px rgba(255,255,255,.24); font-weight:600}

/* Burger */
.nav-toggle{display:none; position:relative; width:42px; height:42px; border:none; background:transparent; cursor:pointer; border-radius:12px}
.burger, .burger::before, .burger::after{
  content:""; position:absolute; left:10px; right:10px; height:2px; background:var(--reef);
  transition:transform .24s cubic-bezier(.22,.61,.36,1), opacity .2s, top .24s, bottom .24s;
}
.burger{top:20px}
.burger::before{top:-8px}
.burger::after{bottom:-8px}
.nav-toggle.active .burger{transform:rotate(45deg)}
.nav-toggle.active .burger::before{top:0; transform:rotate(90deg)}
.nav-toggle.active .burger::after{bottom:0; opacity:0}
.menu-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.35); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:65}
.menu-backdrop.show{opacity:1; pointer-events:auto}

@media (max-width:768px){
  .container{width:min(100%, 100% - 1.2rem)}
  .nav{padding:.4rem 0}
  .nav-links{position:absolute; inset-inline:0; top:100%; background:rgba(244,246,245,.97); flex-direction:column; align-items:center; padding:.7rem 1rem 1rem; border-bottom:1px solid rgba(90,125,124,.18); display:none}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex}
}

/* === Hero === */
.hero{padding:clamp(2.1rem, 6vw, 3.2rem) 0 2.1rem}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1.2fr); gap:clamp(.8rem,2vw,1.8rem); align-items:center}
.hero-subtitle{font-size:clamp(.98rem, 1.8vw, 1.05rem); color:#4b5563; margin-bottom:.9rem; max-width:42ch}
.hero-cta-row{display:flex; flex-wrap:wrap; gap:.6rem}
.hero-meta{font-size:.88rem;color:#6b7280;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.4rem}
.badge-soft{padding:.16rem .6rem;border-radius:var(--pill);background:rgba(15,23,42,.04);border:1px solid rgba(90,125,124,.22);font-size:.78rem;color:#111827}
@media (max-width:992px){ .hero-grid{grid-template-columns:1fr} }
@media (max-width:768px){
  .hero .container, .hero-grid > div, .hero-grid > aside{ text-align:center }
  h1{ margin-inline:auto; max-width: 18ch }
  .hero-cta-row{ justify-content:center }
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:var(--pill); padding:.78rem 1.05rem; font-size:1rem; border:1px solid transparent; cursor:pointer; transition:transform .12s, box-shadow .12s; position:relative; overflow:hidden; white-space:nowrap}
.btn-primary{background:radial-gradient(120% 120% at 0% 0%, #a8c4b3 0, #5a7d7c 40%, #2e4a47 100%); color:#fff; box-shadow:var(--shadow-md)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn-ghost{border-color:rgba(90,125,124,.36); color:var(--reef); background:rgba(244,246,245,.92)}

/* Cards & grids (base) */
.card{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62)); border:1px solid rgba(148,163,184,.45); border-radius:28px; padding:1rem; box-shadow:var(--shadow-md); backdrop-filter:blur(14px)}
.two-col{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(.9rem,2vw,1.8rem); align-items:flex-start}
.list-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem}
.split-col{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem}
@media (max-width:992px){ .two-col{grid-template-columns:1fr} }

.card-header-label{display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#9ca3af; margin-bottom:.35rem}
.card-header-label::before{content:""; width:7px; height:7px; border-radius:50%; background:linear-gradient(90deg,var(--coral),var(--sea-foam))}

.pill-header{display:inline-flex; align-items:center; gap:.5rem; padding:.26rem .8rem; border-radius:var(--pill); font-size:.8rem; text-transform:uppercase; letter-spacing:.14em}
.pill-green{background:rgba(90,125,124,.1); color:var(--reef); border:1px solid rgba(90,125,124,.4)}
.pill-red{background:rgba(232,137,106,.14); color:var(--coral); border:1px solid rgba(232,137,106,.5)}
.situ-list{margin-top:.6rem}
.situ-list li+li{margin-top:.2rem}
.situ-list li::marker{color:rgba(46,74,71,.9)}
.situ-list.neg li::marker{color:rgba(232,137,106,1)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr); gap:clamp(.9rem,2vw,1.8rem)}
@media (max-width:992px){ .contact-grid{grid-template-columns:1fr} }
.contact-badge{display:inline-flex; align-items:center; gap:.45rem; padding:.24rem .8rem; border-radius:var(--pill); background:rgba(15,23,42,.04); border:1px solid rgba(148,163,184,.75); font-size:.8rem; margin:.5rem 0}
.contact-badge .dot{width:7px;height:7px;border-radius:999px;background:var(--sea-foam);display:inline-block}
.contact-form label{display:block; font-size:.9rem; color:#4b5563; margin-bottom:.25rem}
.contact-form input,.contact-form textarea{width:100%; padding:.64rem .9rem; border-radius:14px; border:1px solid rgba(148,163,184,.9); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue-coral); box-shadow:0 0 0 2px rgba(90,125,124,.25)}
.contact-form textarea{min-height:130px}
.honeypot{position:absolute; left:-9999px; opacity:0}
.contact-form{ padding: 22px;}
/* Footer */
footer{border-top:1px solid rgba(148,163,184,.3); padding:1rem 0 1.2rem; font-size:.86rem; color:#6b7280; background:rgba(244,246,245,.96); backdrop-filter:blur(10px)}
.footer-bar{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center}
.footer-links{display:flex; gap:1rem; flex-wrap:wrap}
.credit{opacity:.9}

/* Reveal animation */
/* .reveal{opacity:0; transform:translateY(12px) scale(.995); transition:opacity .56s cubic-bezier(.22,.61,.36,1), transform .56s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:translateY(0) scale(1)} */

/* ===== PATCH v6.1 — Contact form polish ===== */
.card.card--fenced .card-body { padding: 1rem 1rem 1.1rem; }
.contact-form .field { margin-bottom: .8rem; }
.contact-form input,
.contact-form textarea {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  font-size: 16px;
  padding: .7rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(46,74,71,.22);
  background: #fff;
  box-shadow:
    0 1px 0 rgba(15,23,42,.04) inset,
    0 8px 18px rgba(15,23,42,.06);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 0;
  border-color: rgba(90,125,124,.55);
  box-shadow:
    0 0 0 3px rgba(90,125,124,.18),
    0 1px 0 rgba(15,23,42,.04) inset,
    0 10px 24px rgba(15,23,42,.08);
}
.contact-form label { margin-bottom: .28rem; color: #374151; }
::placeholder { color: #98a1ab; }
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-out 0s;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
#submitBtn { margin-top: .6rem; }
@media (max-width: 480px){ #submitBtn { width: 100%; } }
#submitBtn .btn-loader { display: none; vertical-align: -2px; }
/* small-screen bottom padding fix */
@media (max-width: 420px){
  .card.card--fenced .card-body { padding-bottom: 1.3rem; }
}

.nav-cta-link{
    padding: 2px 7px !important;
    color: #fff !important;
    background: #0f766e;
}
/* Popup Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 9999;
}
.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.modal-box {
  background: #fff;
  padding: 2rem 2.4rem;
  border-radius: 1.5rem;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  animation: fadeUp .3s ease;
}
.modal-box h2 {
  margin-top: 0;
  color: #214b3b;
  font-weight: 600;
}
.modal-box p {
  color: #444;
  margin: .5rem 0;
}
.modal-box p.small {
  font-size: 0.9rem;
  color: #666;
}
.modal-box button {
  margin-top: 1.2rem;
  padding: .6rem 1.4rem;
  border: none;
  background: linear-gradient(120deg, #2e4a47, #1d8e6b);
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: background .3s ease;
}
.modal-box button:hover {
  background: linear-gradient(120deg, #1f6850, #145a42);
}
@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* === Patch: logo smaller & proportional === */
.logo-wrap { display:inline-flex; align-items:center; }
.logo-img { height: 40px; max-height: 40px; width: auto; object-fit: contain; }

/* === Patch: mobile slide-in (ensures working animation & backdrop) === */
@media (max-width:768px){
  .nav-links {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: min(78%, 380px);
    background: #ffffff;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 88px 24px 24px;
    box-shadow: -20px 0 60px rgba(0,0,0,.16);
    transform: translateX(100%);
    opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
    z-index: 1000;
  }
  .nav-links.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .nav-links a { display:block; width:100%; padding: 12px 2px; font-size: 16px; }
}

.menu-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,32,.42);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 999;
}
.menu-backdrop.show { opacity: 1; pointer-events: auto; }

/* === Reveal animation (if not present already) === */
.reveal{opacity:0; transform:translateY(12px) scale(.995); transition:opacity .56s cubic-bezier(.22,.61,.36,1), transform .56s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:translateY(0) scale(1)}
/* ===== MOBILE MENU HARD FIX (always last) ===== */

/* Make the toggle always clickable and above everything */
.nav-toggle{
  position: relative;
  z-index: 1101;           /* above backdrop (999) and panel (1000) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .burger,
.nav-toggle .burger::before,
.nav-toggle .burger::after{
  display:block;
  width: 24px; height: 2px; background:#0b3b37; content:"";
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .burger{ position:relative }
.nav-toggle .burger::before{ position:absolute; top:-7px }
.nav-toggle .burger::after{ position:absolute; top:7px }

/* Backdrop and panel */
.menu-backdrop{
  position: fixed; inset: 0; background: rgba(16,24,32,.42);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1099;
}
.menu-backdrop.show{ opacity: 1; pointer-events: auto; }

@media (max-width: 900px){
  /* Ensure the panel exists and can open even if prior CSS hid it */
  .nav-links{
    position: fixed !important;
    right: 0; top: 0; bottom: 0;
    width: min(78%, 380px);
    background:#fff;
    display: flex !important;       /* override any display:none */
    flex-direction: column; align-items: flex-start;
    padding: 88px 24px 24px;
    gap: 2px;
    box-shadow: -20px 0 60px rgba(0,0,0,.16);
    transform: translateX(100%);
    opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
    z-index: 1100;
  }
  .nav-links.open{
    transform: translateX(0);
    opacity: 1; pointer-events: auto;
  }
  .nav-links a{
    display:block; width:100%; padding: 12px 2px; font-size: 16px;
  }
}

/* Optional: animate burger to an "X" */
.nav-toggle.active .burger{ background: transparent; }
.nav-toggle.active .burger::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active .burger::after{  transform: translateY(-7px) rotate(-45deg); }
/* ===== Off-canvas hard overrides ===== */
#bt-offcanvas{ will-change: transform, opacity; }
#bt-backdrop{ backdrop-filter: none; } /* keep background readable */
.nav-toggle{ z-index: 1103; }          /* ensure button is always above */
/* ===== Off-canvas visual polish ===== */
#bt-offcanvas { will-change: transform, opacity; }
#bt-backdrop { backdrop-filter: blur(0px); } /* keep content readable */

/* Header */
.bt-nav-head{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(#fff, rgba(255,255,255,.94));
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.bt-head-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: calc(20px + env(safe-area-inset-top)) 18px 14px 18px;
}
.bt-head-logo{ height: 40px; width: auto; object-fit: contain; }
.bt-close{
  display:inline-grid; place-items:center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10); background:#fff; color:#111827;
  font-size: 18px; line-height: 1; cursor: pointer;
}

/* Body / items */
.bt-nav-body{ padding: 10px 14px 28px 14px; }
.bt-nav-item{
  display:block; padding: 13px 12px; margin: 2px 0;
  border-radius: 12px; font-size: 16px; color:#0f172a; text-decoration:none;
  border: 1px solid transparent;
}
.bt-nav-item:hover{ background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.06); }

/* CTA button style (full width pill) */
.bt-nav-item.is-cta{
  margin-top: 10px;
  background: #0f766e; color:#fff; font-weight:600; text-align:center;
  border: 1px solid rgba(15,118,110,.85);
  box-shadow: 0 12px 30px rgba(15,118,110,.25);
  padding: 14px 14px; border-radius: 999px;
}
.bt-nav-item.is-cta:hover{ filter: brightness(1.02); }

/* Ensure the burger stays above */
.nav-toggle{ z-index: 1103; -webkit-tap-highlight-color: transparent; }