/* ===== Brand foundation ===== */
:root{
  --rose:#EC5D55;
  --rose-600:#d94c44;
  --beige:#FAF0E6;
  --teal:#2C7A7B;
  --aqua:#7FDBDA;

  --ink:#0f0f0f;
  --muted:#4b5563; /* slightly darker for better contrast on beige */
  --border:#eee;
  --surface:#ffffff;
  --shadow: 0 14px 40px rgba(17,17,17,.08);
  --radius: 18px;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink); background:#fff; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Playfair Display", Georgia, serif; line-height:1.25; margin:.2rem 0 .7rem}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(24px,3.5vw,32px)}
h3{font-size:clamp(18px,2.6vw,22px)}
a{color:var(--rose); text-decoration:none}
a:hover, a:focus-visible{color:var(--rose-600); text-decoration:underline}
.lead{color:#333; max-width:62ch}
.muted{color:var(--muted)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ===== Global UI ===== */
.topbar {
  background: var(--beige);
  color: var(--teal);
  text-align: center;
  padding: 8px 10px;
  font-weight: 600;
}
.topbar strong {
  color: var(--rose);
}
/* .topbar {
  background: var(--rose);
  color: #fff;
  text-align: center;
  padding: 8px 10px;
  font-weight: 600;
}
.topbar strong {
  color: var(--beige);
} */

.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--teal);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--border);
}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand img{height:54px}

/* Desktop nav over teal needs light links for contrast */
.navlinks a{
  margin-left:18px; color:#ffffff; font-weight:600
}
.navlinks a:hover, .navlinks a:focus-visible{opacity:.9; text-decoration:underline}

/* Mobile menu toggle */
.menu-toggle{
  display:none;
  font-size:24px; line-height:1; padding:8px 10px; border-radius:10px; border:1px solid var(--border);
  background:#fff; cursor:pointer;
}

/* Buttons */
.btn{
  display:inline-block; background:var(--rose); color:#fff; padding:12px 18px;
  border-radius:999px; font-weight:700; box-shadow:var(--shadow); transition:.2s ease;
}
.btn:hover, .btn:focus-visible{background:var(--rose-600)}
.btn:focus-visible{outline:3px solid var(--aqua); outline-offset:2px}

.btn-small{padding:10px 14px; font-weight:700}
.btn.light{background:#fff; color:var(--rose); border:2px solid var(--rose)}
.btn.outline{background:transparent; color:#fff; border:2px solid #fff}
.link{font-weight:700}

/* Make “light” buttons pop over teal header */
.site-header .btn.light{background:var(--beige); color:var(--rose); border-color:var(--rose)}

/* ===== Sections ===== */
.section{padding:72px 0}
.section-alt{padding:72px 0; background:#fafafa; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-accent{padding:72px 0; background:var(--beige)}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  color: #111; /* stronger than black-on-beige perception */
  text-align: center;
  padding: 24px;

  /* subtle brand gradient overlay + beige base for depth */
  background:
    linear-gradient(180deg, rgba(44,122,123,.06), rgba(236,93,85,.04)),
    var(--beige);
}

.hero .overlay { display: none; }

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  padding: 40px 16px;
  background-image: url("assets/Logo - Hi-Res No Background.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 480px auto; /* Large like original */
  text-align: center;
}
.hero-content .lead { margin-top: 520px; } /* space for large logo */

/* Hero buttons */
.buttons .btn {
  padding: 10px 20px;
  margin: 6px;
  font-weight: bold;
}

/* ===== Cards & tiles ===== */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:22px}
.tile-img{overflow:hidden; border-radius:14px}
.tile-img img{width:100%; height:auto; display:block}
.tile-img.placeholder{display:grid; place-items:center; aspect-ratio:4/3; background:#f7f7f8; color:#b6b6b6; font-weight:800; letter-spacing:.5px}
.tile-body h3{margin:.2rem 0 .4rem}

/* ===== Layout helpers ===== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* ===== Map placeholder / embed styling ===== */
.map-placeholder{
  height:260px; border-radius:14px; background:
  linear-gradient(180deg,#f7f7f8,#f0f0f1); border:1px solid var(--border);
  display:grid; place-items:center; color:#a0a0a0; font-weight:700;
}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); padding:32px 0 50px}
.footer-grid{display:grid; gap:24px}
.footer-links{display:flex; gap:16px; align-items:start; flex-wrap:wrap}
.footer-links a:hover, .footer-links a:focus-visible{text-decoration:underline}
.footer-logo{height:42px}
.copyright{color:var(--muted); font-size:.9rem; margin-top:6px}

/* ===== Sticky Call CTA (mobile) ===== */
.sticky-call{
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--rose);
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow);
  z-index: 60;
}
@media (min-width: 981px){
  .sticky-call{ display:none; }
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  /* Dropdown panel is white; switch link color back to dark for readability */
  .navlinks{
    position:absolute; right:20px; top:72px; background:#fff; border:1px solid var(--border);
    border-radius:14px; padding:10px 12px; display:none; box-shadow:var(--shadow)
  }
  .navlinks.open{display:flex; flex-direction:column; gap:8px; min-width:220px}
  .navlinks.open a{ color:#333; }

  .menu-toggle{display:inline-block}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}