/* ===========================
   Base Theme
   =========================== */

/* Color system — TODO: tune to your brand colours */
:root{
  --brand: #1e6bd6;         /* primary */
  --brand-dark: #154ea0;
  --accent: #0ea5e9;        /* secondary accent */
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #5b6472;
  --soft: #f3f7ff;          /* soft background */
  --border: #e6ecf5;
  --success: #10b981;
  --focus: #111827;
  --header-height: 64px;   /* used to position mobile menu and scroll padding */
}

*{box-sizing:border-box}
html,body{height:100%}
/* Prevent sticky header from overlapping in-page anchors */
html{scroll-padding-top:var(--header-height)}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* ===========================
   Layout
   =========================== */
.container{max-width:1120px;margin-inline:auto;padding:0 1rem}
.section{padding:4rem 0}
.section.soft{background:var(--soft)}
.grid-2{display:grid;gap:1rem;grid-template-columns:1fr}
.grid-3{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width: 800px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr 1fr}
}

/* ===========================
   Header
   =========================== */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0;min-height:var(--header-height)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand-name{font-weight:700;letter-spacing:.2px}
.nav-toggle{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);padding:.5rem .75rem;border-radius:.5rem;background:#fff}
.nav-menu{list-style:none;margin:0;padding:0;display:none;gap:1rem;align-items:center}
.nav-menu.open{display:flex;flex-direction:column;position:absolute;right:1rem;top:var(--header-height);background:#fff;border:1px solid var(--border);border-radius:.75rem;padding:1rem}
.nav-menu a{color:inherit;text-decoration:none}
@media (min-width: 900px){
  .nav-toggle{display:none}
  .nav-menu{display:flex}
  .nav-menu.open{all:unset;display:flex;gap:1rem}
}

/* ===========================
   Buttons
   =========================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1rem;border-radius:.6rem;text-decoration:none;font-weight:600;border:2px solid transparent}

@media (max-width: 900px){
  /* larger touch targets on smaller screens */
  .btn{padding:1rem 1.25rem}
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:var(--soft)}

/* ===========================
   Hero
   =========================== */
.hero{padding:5rem 0;background:linear-gradient(180deg, #f8fbff 0%, #ffffff 100%)}
.hero-inner{text-align:center}
.lead{color:var(--muted);font-size:1.125rem;margin-top:.25rem}
.cta-row{display:flex;gap:.75rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.trust-badges{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin:1.25rem 0 0;padding:0;list-style:none}
.trust-badges li{border:1px dashed var(--border);padding:.35rem .6rem;border-radius:999px;background:#fff}

/* ===========================
   Cards
   =========================== */
.card{border:1px solid var(--border);border-radius:.75rem;padding:1rem;background:#fff}
.h3{font-size:1.125rem;margin:0 0 .5rem}

/* ===========================
   About
   =========================== */
.about{display:grid;gap:1rem;grid-template-columns:1.2fr}
.about .highlights{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.about .highlights li{padding:.5rem .75rem;background:#fff;border:1px solid var(--border);border-radius:.5rem}
@media (min-width: 900px){
  .about{grid-template-columns:1.2fr .8fr}
}

/* ===========================
   Gallery (Coverage section & any galleries)
   - We reduce ONLY the gallery container via .gallery--reduced
   - Other site images remain unaffected
   =========================== */

/* Base gallery container */
.gallery {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

/* Reduce overall gallery width ONLY when this modifier is present */
.gallery--reduced {
  max-width: 500px;
  margin-inline: auto;
}
@media (max-width: 768px){
  .gallery--reduced { max-width: 100%; }
}

/* Track & slides */
.gallery-track {
  display: flex;
  transition: transform 0.6s ease;
}
@media (prefers-reduced-motion: reduce){
  .gallery-track { transition: none; }
}

.gallery-track img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

/* Prev/Next controls */
.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-radius: .5rem;
  line-height: 1;
  z-index: 10;
  min-width: 44px; /* better touch target */
}
.gallery-prev:hover,
.gallery-next:hover { background: rgba(0,0,0,0.6); }
.gallery-prev:focus-visible,
.gallery-next:focus-visible { outline: 3px solid #9ec6ff; outline-offset: 2px; }

.gallery-prev { left: .5rem; }
.gallery-next { right: .5rem; }

/* Optional: caption styling if you add <figcaption> later */
.gallery figcaption{
  color: var(--muted);
  font-size: .95rem;
  margin-top: .5rem;
  text-align: center;
}

/* ===========================
   (Removed old unused styles)
   - .coverage-gallery
   - .gallery-slideshow
   They conflicted with the current .gallery/.gallery-track pattern.
   If you still use them elsewhere, let me know and I’ll merge safely.
   =========================== */

/* ===========================
   Forms
   =========================== */
.form{margin-top:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
input, select, textarea{
  padding:.7rem .8rem;border:1px solid var(--border);border-radius:.6rem;font:inherit;background:#fff;color:inherit
}
input:focus, select:focus, textarea:focus{outline:3px solid #9ec6ff;outline-offset:1px}
.consent{margin:.5rem 0 1rem}
.checkbox{display:flex;gap:.5rem;align-items:flex-start}
.form-help{color:var(--muted);font-size:.95rem;margin:.5rem 0 0}
.alt-ctas{margin-top:1rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.alt-link{color:var(--brand);text-decoration:none}
.alt-link:hover{text-decoration:underline}

/* ===========================
   Footer
   =========================== */
.site-footer{border-top:1px solid var(--border);background:#fff}
.footer-inner{display:grid;gap:1rem;grid-template-columns:1fr}
.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem;flex-wrap:wrap}
.footer-contact a{color:inherit;text-decoration:none}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--border);padding:1rem 0;margin-top:1rem}
@media (min-width: 900px){
  .footer-inner{grid-template-columns:1fr 1fr 1fr;align-items:start;padding:1.25rem 0}
}

/* ===========================
   Utilities & a11y
   =========================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:999;background:#fff;border:2px solid var(--focus);padding:.5rem .75rem;border-radius:.5rem}