:root{
  --brand:#08439d;      /* deep blue */
  --accent:#05b0ff;     /* gold */
  --ink:#0f172a;        /* slate-900-ish */
  --ink-2:#334155;      /* slate-700-ish */
  --muted:#64748b;      /* slate-500-ish */
  --bg:#ffffff;
  --soft:#f8fafc;       /* light gray bg */
  --radius:12px;
  --shadow:0 10px 18px rgba(2,64,106,.14);
  --shadow-sm:0 6px 12px rgba(2,64,106,.08);
  --ring:0 0 0 3px rgba(0, 162, 255, 0.993);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

/* Layout helpers */
.container{max-width:1200px;margin-inline:auto;padding:0 16px}
.section{padding:56px 0}
.section-soft{background:var(--soft);padding:56px 0}
.section-header{max-width:740px;margin-bottom:24px}
.two-col{display:grid;gap:40px}
@media (min-width: 900px){
  .two-col{grid-template-columns:1fr 1fr}
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--brand);
  border-bottom:1px solid rgba(0, 162, 255, 0.993);
  box-shadow:var(--shadow-sm);
  background-color: white;
}
.header-inner{
  
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.brand img{width:clamp(180px,24vw,259px)}
.header-cta{display:flex;gap:12px}

/* Buttons */
.btn{
  --bg:#fff; --fg:#0b1220; --bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;text-decoration:none;
  padding:12px 18px;border-radius:10px;border:1px solid var(--bd);
  box-shadow:var(--shadow-sm);transition:transform .12s ease,opacity .12s ease, background .12s ease;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{--bg:var(--brand); --fg:#fff}
.btn-primary{background:var(--bg);color:var(--fg)}
.btn-primary:hover{opacity:.92}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{opacity:.92}
.btn-block{display:block;width:100%}

/* HERO */
.hero{
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: 56px 0;
  min-height: clamp(420px, 60vh, 720px);
}

.btntwo{
  --bg:#fff; --fg:#0b1220; --bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;text-decoration:none;
  padding:6px 6px;border-radius:10px;border:1px solid var(--bd);
  box-shadow:var(--shadow-sm);transition:transform .12s ease,opacity .12s ease, background .12s ease;
  cursor:pointer;white-space:nowrap;
}
.btntwo:hover{transform:translateY(-1px)}
.btntwo:active{transform:translateY(0)}
.btntwo-primary{--bg:var(--brand); --fg:#fff}
.btntwo-primary{background:var(--bg);color:var(--fg)}
.btntwo-primary:hover{opacity:.92}
.btntwo-accent{background:var(--accent);color:#fff}
.btntwo-accent:hover{opacity:.92}
.btntwo-block{display:block;width:100%}


/* The background image layer */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-bg);
  background-repeat: no-repeat;
  background-size: cover;               /* << responsive fill */
  background-position: var(--hero-pos-mobile, 50% 70%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(2,64,106,.5);
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(2, 64, 106, .85);
}

@media (min-width: 1024px){
  .hero::before{
    background-position: var(--hero-pos-desktop, 50% 20%);
  }
}

.hero-grid{
  display:grid;gap:28px;
}
@media (min-width: 960px){
  .hero-grid{grid-template-columns:7fr 5fr;align-items:center}
}
.hero-copy h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);line-height:1.15}
.lead{font-size:clamp(16px,2.2vw,18px);opacity:.95;margin:8px 0 20px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Cards */
.card{
  background:#fff;border:1px solid rgba(0, 153, 255, 0.5);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.form-card{padding:20px;transform:translateY(8px)}
.form-title{color:var(--brand);margin:0 0 4px;font-size:18px;font-weight:700}
.muted{color:var(--muted)}
.fineprint{color:var(--muted);font-size:11px;margin-top:8px}

/* Form */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr}
.grid-span-2{grid-column:1/-1}
@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
}
.field label{display:block;font-size:12px;font-weight:600;color:#374151}
.field input,.field select,.field textarea{
  width:100%;margin-top:6px;
  border:1px solid #d1d5db;border-radius:8px;
  padding:10px 12px;font-size:14px;color:#111827;background:#fff;
  outline:none;transition:border .12s ease, box-shadow .12s ease;
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:var(--ring)
}
.hp{position:absolute;left:-50000px;width:1px;height:1px;overflow:hidden}

/* Image placeholder (replace with a real img if you want) */
.image-placeholder{
  width:100%;height:280px;border-radius:16px;background:
  linear-gradient(135deg, #e2e8f0, #f1f5f9);
  box-shadow:var(--shadow);
}

/* Services */
.card-grid{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .card-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .card-grid{grid-template-columns:1fr 1fr 1fr}
}
.service-card{padding:20px;transition:transform .12s ease, box-shadow .12s ease}
.service-card:hover{transform:translateY(-2px);box-shadow:0 14px 24px rgba(2,64,106,.14)}
.service-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.service-card h3{margin:0;font-size:18px;color:var(--brand)}
.service-card p{margin:0;color:var(--ink-2)}
.svc-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:22px;box-shadow:var(--shadow-sm)
}

/* Map */
.map-wrap{overflow:hidden;border-radius:16px}
.map-wrap iframe{display:block;border:0}

/* FAQ */
.faq{margin-top:18px}
.faq-item{
  background:#fff;border:1px solid rgba(0, 153, 255, 0.5);
  border-radius:16px;padding:16px;margin-bottom:12px;
}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  font-weight:700;color:var(--brand);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{flex:1}
.faq-item summary::after{
  content:"+";display:inline-grid;place-items:center;
  width:24px;height:24px;border-radius:999px;border:1px solid rgba(0, 153, 255, 0.5);
  color:var(--brand);font-weight:700;transition:transform .15s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{margin-top:10px;color:var(--ink-2)}

/* CTA Strip */
.cta-strip{
  background:var(--brand);color:#fff;padding:28px 0;border-top:1px solid rgba(212,187,107,.5);
  border-bottom:1px solid rgba(0, 153, 255, 0.5)
}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-inner h2{margin:0 0 4px}
.cta-inner p{margin:0;color:#e2e8f0}
@media (max-width:800px){
  .cta-inner{flex-direction:column;align-items:flex-start}
}

/* Contact */
.contact-card{padding:18px;display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){
  .contact-card{flex-direction:row;align-items:center;justify-content:space-between}
}
.contact-name{font-weight:700;color:var(--brand);margin:0 0 4px}
.link{color:var(--brand);text-decoration:none}
.link:hover{text-decoration:underline}

/* Footer */
.site-footer{
  background:var(--brand);color:#fff;padding:18px 0;margin-top:40px;
  border-top:1px solid rgba(0, 153, 255, 0.5)
}
.site-footer p{margin:0;text-align:center;color:#e2e8f0}

.form-card.form-narrow{
  max-width: 360px;          /* sweet spot: 340–420px if you want to tweak */
  width: 100%;
  margin-left: auto;         /* hugs the right side of the hero grid */
}

.svc-icon svg { width: 22px; height: 22px; }

/* Center icon + title stack, kill leftover paragraph spacing if any */
.service-head.center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  min-height:60px; /* keeps cards even when titles wrap */
}

/* Slightly larger icons look better without body text */
.svc-icon{ width:56px; height:56px; }
.svc-icon svg{ width:26px; height:26px; }

/* Optional: tighten cards now that paragraphs are gone */
.service-card{ padding:22px 18px; }
.service-card h3{ margin:0; }


/* Reviews layout */
.reviews-grid .review-card{ padding:18px }
.review-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px }
.avatar{
  width:40px;height:40px;border-radius:999px;
  display:inline-grid;place-items:center;
  background:var(--accent); color:#fff; font-weight:800;
}
.meta .name{ font-weight:700; color:var(--brand); line-height:1.2 }
.rating{ display:flex; align-items:center; gap:8px; margin-top:4px }
.stars{ display:inline-flex; gap:2px; color:var(--accent) }
.stars svg{ width:16px;height:16px; fill:currentColor; stroke:currentColor }
.score{ font-weight:700; color:var(--ink) }
.g-badge{
  display:inline-grid; place-items:center;
  width:20px; height:20px; border-radius:4px;
  font-weight:800; font-size:12px;
  background:#fff; color:#4285F4; border:1px solid #e2e8f0;
}
.review-body{ margin:0 0 8px; color:var(--ink-2) }
.review-foot{ color:var(--muted); font-size:.9rem }
/* Work grid */
.work-grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .work-grid{ grid-template-columns:1fr 1fr 1fr; } }
.work-item{
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.work-item img{
  width:100%; height:100%; display:block; object-fit:cover;
  aspect-ratio: 12/12;
}
section[aria-label="Our Work in Action"] .container{
  max-width: 1400px;   /* was 1200px */
}
/* Before/After sliders */
.ba-grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .ba-grid{ grid-template-columns:1fr 1fr; } }

.ba{
  position:relative; width:100%;
  aspect-ratio: var(--ratio, 4/3);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  --pos: 50%; /* updated by JS */
}
.ba-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-after{ position:absolute; inset:0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba[data-dir="left"] .ba-after{ clip-path: inset(0 0 0 calc(100% - var(--pos))); }

.ba-range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; z-index:5;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos);
  transform:translateX(-50%);
  width:2px; background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.25); z-index:4;
}
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:9999px;
  background:#02406a; border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.ba-tag{
  position:absolute; top:.6rem; padding:.25rem .5rem;
  font-size:.85rem; font-weight:600; color:#fff;
  background:rgba(2,64,106,.85); border-radius:.375rem; z-index:3; user-select:none;
}
.ba-before{ left:.6rem; }
.ba-after-label{ right:.6rem; }




/* Smaller BA sliders */
.ba-grid.small{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .ba-grid.small{
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content:center;
  }
}
.ba{ max-width:420px; margin:0 auto; }           /* caps width so they don’t dominate */

/* Overlay now holds BEFORE image (left reveal by default) */
.ba-overlay{ position:absolute; inset:0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba[data-dir="left"] .ba-overlay{ clip-path: inset(0 0 0 calc(100% - var(--pos))); }

/* Slightly smaller handle to match the reduced size */
.ba-handle::after{ width:22px; height:22px; }

/* Contact card with form: 3-column on desktop, stacked on mobile */
.contact-card.contact-with-form{
  gap:16px;
  align-items:stretch;
}
@media (min-width: 980px){
  .contact-card.contact-with-form{
    display:grid;
    grid-template-columns: 1.1fr auto 1fr; /* info | call btn | form */
    align-items:center;
  }
}

/* Keep the CTA from stretching weirdly */
.contact-with-form .contact-cta{
  display:flex; align-items:center; justify-content:center;
}

/* Compact form */
.mini-form-wrap{ width:100%; }
.mini-form{
  width:100%;
  max-width: 420px;           /* keep it modest */
  background:#fff;
  border:1px solid rgba(0, 162, 255, 0.993);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding:14px;
}
.mini-form-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  color: var(--brand);
}

/* Single column fields; reuse your .field styles */
.grid-1{ display:grid; gap:10px; grid-template-columns:1fr; }
.mini-form .field input,
.mini-form .field select,
.mini-form .field textarea{ font-size:14px; }

/* Tighten on small screens (stack everything) */
@media (max-width: 979px){
  .mini-form{ max-width:100%; }
  .contact-with-form .contact-cta{ justify-content:flex-start; }
}