:root{
  --brand:#39A0ED;
  --brand-2:#00D4D4;
  --ink:#0b1b2b;
  --muted:#5a6b7b;
  --bg:#f6f9fc;
  --card:#ffffff;
  --ring: rgba(14,88,168,.15);
  --radius:14px;
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg);
}
a{ color:var(--brand); text-decoration:none }
.container{ width:min(1200px, 92vw); margin-inline:auto }

/* ---------------- Top bar ---------------- */
.topbar{ background:#0b1b2b; color:#cfe3f7; font-size:.9rem }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; gap:16px }
.topbar__brand{ display:flex; align-items:center; gap:10px; color:#fff }
.topbar .brand__text{ font-family:"Playfair Display", serif; font-weight:700 }
.topbar .brand__logo{ width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg, var(--brand), var(--brand-2));display:grid;place-items:center;color:#fff;font-weight:800 }
.topbar__right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.topbar__item{ color:#cfe3f7 }
.topbar__social a{ color:#cfe3f7; margin-left:10px }

/* ---------------- Header / Nav ---------------- */
.site-header{ background:#fff; border-bottom:1px solid #e7eef6 }
.site-header.is-sticky{ position:sticky; top:0; z-index:50; backdrop-filter: blur(10px) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px }
.brand__logo{ width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); display:grid; place-items:center; color:#fff; font-weight:800 }
.brand__text{ font-family:"Playfair Display", serif; font-weight:700; letter-spacing:.2px }
.brand__link{ display:flex; align-items:center; gap:10px }
.custom-logo{ max-height:48px; width:auto }
.nav a.btn{ padding:10px 16px; border-radius:10px; border:1px solid var(--brand); }
.phone{ display:none }

/* ---------------- Shiny, rounded buttons ---------------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  transition:transform .05s ease, box-shadow .2s ease, filter .2s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible{ outline:2px solid transparent; box-shadow:0 0 0 4px var(--ring); }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  color:#fff;
  background:linear-gradient(180deg, #6abaf3 0%, #2a87db 100%);
  border:1px solid #1f6fb8;
  box-shadow:0 8px 18px rgba(57,160,237,.30), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary::after{
  content:""; position:absolute; inset:0 0 auto 0; height:48%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-radius:inherit; pointer-events:none;
}
.btn-primary:hover{ filter:saturate(1.08) brightness(1.02); }

.btn-outline{
  color:var(--brand);
  background:linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border:1px solid var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-outline::after{
  content:""; position:absolute; inset:0 0 auto 0; height:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  border-radius:inherit; pointer-events:none;
}
.btn-outline:hover{ filter:saturate(1.05); }

/* ---------------- Hero (consolidated) ---------------- */
.hero{
  position:relative; isolation:isolate;
  padding:64px 0 32px;
  overflow:hidden; /* robust vs 'clip' */
}
/* decorative halos behind the photo */
.hero.bg-gradient::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(57,160,237,.15), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(0,212,212,.14), transparent 60%);
}
/* photo layer */
.hero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  z-index:-1;
  filter:saturate(var(--hero-saturate, 1)) brightness(var(--hero-brightness, 1));
}
/* white wash to soften the photo (0..1 via --hero-wash) */
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255, var(--hero-wash, 0.12));
  pointer-events:none;
}
/* bottom gradient into white body */
.hero__bg::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:var(--hero-fade-height, 36%);
  background:linear-gradient(to bottom, rgba(255,255,255,0), #ffffff);
  pointer-events:none;
}
/* text over the background */
.hero .container, .hero__grid, .hero > *:not(.hero__bg){ position:relative; z-index:1; }

.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center }
.kicker{ color:var(--brand-2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.9rem }
h1{ font-family:"Playfair Display", serif; font-size:clamp(1.8rem, 2.6vw, 3rem); margin:.35rem 0 1rem }
.lead{ font-size:1.1rem; color:var(--muted); line-height:1.65 }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }
.hero__card{ background:var(--card); padding:22px; border-radius:var(--radius); box-shadow:0 10px 24px rgba(14,88,168,.08); border:1px solid #eaf1f7 }
.hero__card h3{ margin:10px 0 10px }
.card__img{ width:100%; height:auto; border-radius:12px; margin-bottom:10px }

/* brand line + tagline over hero */
.hero__brandline{
  font-family:"Cinzel", serif;
  font-weight:700;
  font-size: clamp(26px, 3.2vw, 38px); /* ↑ bigger */
  line-height:1.15;
  letter-spacing:.4px;
  color:#0b3a5e;
  margin: 2px 0 10px;
  display:inline-block;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  padding:4px 10px;
  border-radius:10px;
}
.hero__tagline{
  font:600 15px/1.45 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#2a4a67;
  opacity:.9;
  margin:0 0 10px;
}

/* ---------------- Section Nav (sticky below header) ---------------- */
.section-nav{ background:#fff; border-top:1px solid #e7eef6; border-bottom:1px solid #e7eef6; position:sticky; top:var(--sticky-offset, 0px); z-index:40 }
.section-nav__inner{ display:flex; gap:24px; align-items:center; padding:10px 0; overflow-x:auto }
.section-nav a{ color:#28425f; font-weight:600 }

/* ---------------- Alternating backgrounds ---------------- */
.bg-surface{ background:#fff }
.bg-tint{ background:linear-gradient(180deg, rgba(57,160,237,.06), rgba(0,212,212,.06)) }

/* ---------------- Sections ---------------- */
section{ padding:56px 0 }
.section__head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px }
.section__title{ font-family:"Playfair Display", serif; font-size:clamp(1.5rem,2.2vw,2.2rem) }
.section__sub{ color:#5a6b7b }

/* ---------------- Service cards ---------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.card{ background:var(--card); border-radius:var(--radius); padding:22px; border:1px solid #e8f0f7; box-shadow:0 6px 18px rgba(10,30,60,.04) }
.card h3{ margin:0 0 10px }
.card ul{ margin:12px 0 0 18px; color:#415568 }

/* ---------------- How it works ---------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.step{ background:var(--card); border:1px solid #e8f0f7; border-radius:var(--radius); padding:18px }
.step__n{ width:32px; height:32px; display:grid; place-items:center; background:var(--brand); color:#fff; border-radius:8px; font-weight:700; margin-bottom:10px }

/* ---------------- CTA Banner ---------------- */
.cta{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; border-radius:16px; padding:28px; display:flex; align-items:center; justify-content:space-between; gap:16px }

/* ---------------- Coordinator slider ---------------- */
.hero__card .coord-slider{
  position:relative; width:100%; overflow:hidden;
  border-radius:12px; background:#f2f7fb;
}
.hero__card .coord-slider::before{ content:""; display:block; padding-top:75%; } /* 4:3 fallback */
@supports (aspect-ratio: 4 / 3){
  .hero__card .coord-slider::before{ display:none; }
  .hero__card .coord-slider{ aspect-ratio: 4 / 3; }
}
.hero__card .coord-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:0; transition:opacity .6s ease;
}
.hero__card .coord-slide.is-active{ opacity:1; }
.hero__card .coord-dots{
  position:absolute; right:10px; bottom:10px;
  display:flex; gap:6px; z-index:2;
}
.hero__card .coord-dot{
  width:8px; height:8px; border-radius:999px; border:0;
  background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.15);
  cursor:pointer;
}
.hero__card .coord-dot.is-active{ background:#fff; }

/* Global image safety: never overflow containers */
.hero__card img, .entry-content img, .wp-block-image img, img{
  max-width:100%; height:auto; display:block;
}

/* ---------------- FAQ ---------------- */
details{ background:#fff; border:1px solid #e8f0f7; border-radius:12px; padding:16px 18px; box-shadow:0 6px 18px rgba(10,30,60,.04) }
details+details{ margin-top:12px }
summary{ cursor:pointer; font-weight:600 }

/* ---------------- Footer ---------------- */
footer{ background:#0b1b2b; color:#dfe8f3 }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px }
.foot-grid a{ color:#dfe8f3 }
.subtle{ color:#a8bdd3 }

/* Footer logo sizing + alignment */
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-logo{
  height:40px;        /* force a consistent visual size */
  width:auto;
  max-width:180px;    /* just in case a very wide logo is used */
  display:block;
}
@media (max-width:640px){
  .footer-logo{ height:32px; }
}


/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .phone{ display:inline-flex }
}
@media (max-width: 640px){
  .cards{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr }
}