:root{--blue:#0170B9;--blue-d:#066aab;--ink:#3a3a3a;--text:#4B4F58;--soft:#F2F5F7;--dark:#1f212b;--w:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:400 1rem/1.65 Inter,sans-serif;color:var(--text);background:#fff}
h1,h2,h3,.logo,.btn{font-family:'Plus Jakarta Sans',sans-serif}
h1,h2,h3{color:var(--ink);line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(2.2rem,5vw,3.5rem);color:#fff}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:1.3rem}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid #f5a623;outline-offset:2px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;text-align:center}
section{padding:80px 0}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}

.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.08)}
.bar{display:flex;align-items:center;gap:24px;min-height:76px}
.logo{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.logo-main{font-weight:700;font-size:1.5rem;color:var(--blue)}
.logo-sub{font-size:.8rem;font-weight:600;color:var(--ink)}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
nav a{color:var(--ink);font-weight:600}nav a:hover{color:var(--blue)}
.has-sub{position:relative}
.sub{display:none;position:absolute;top:100%;left:-12px;min-width:320px;flex-direction:column;gap:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px 0;border-radius:6px}
.sub a{display:block;padding:8px 16px;font-weight:500}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.tel{background:var(--blue);color:#fff;padding:10px 18px;border-radius:6px;font-weight:600;white-space:nowrap}
.tel:hover{background:var(--ink);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--blue);color:var(--blue);padding:8px 14px;border-radius:6px;font:600 1rem Inter,sans-serif}

.hero{background:linear-gradient(135deg,#014f84,var(--blue) 60%,#2b9be0);padding:120px 0}
.kicker{font-weight:600;color:#d7ecfa;margin:0 0 12px}.kicker.dark{color:var(--blue)}
.lead{color:#fff;font-size:1.25rem;max-width:640px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 20px}
.btn{display:inline-block;background:#fff;color:var(--blue);border:2px solid #fff;padding:12px 26px;border-radius:6px;font-weight:600;font-size:1rem;cursor:pointer}
.about .btn,.contact .btn,.quote .btn{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:#fff}
.btn-ghost.dark{color:var(--blue);background:transparent}
.review{color:#fff;text-decoration:underline}

.about{background:#fff}
.services{background:var(--soft)}
.intro{max-width:780px;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.card{background:#fff;border-top:4px solid var(--blue);border-radius:6px;padding:28px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card h3{font-size:1.15rem}
.sub-h{font-weight:600;color:var(--blue);margin:0 0 12px}
.card p:last-child{margin:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.why ul{padding-left:1.1em}.why li{margin-bottom:12px}
.testimonials{background:var(--soft)}
.carousel{position:relative;min-height:230px}
.slide{display:none;margin:0}.slide.is-active{display:block}
blockquote{margin:0 0 16px;font-size:1.3rem;color:var(--ink)}
figcaption{font-weight:600;color:var(--blue)}
.dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.dots button{width:12px;height:12px;border-radius:50%;border:0;background:#c3ccd3;cursor:pointer;padding:0}
.dots button[aria-selected=true]{background:var(--blue)}

.site-footer{background:var(--dark);color:#d6d9e0;padding:64px 0 0}
.site-footer h2{color:#fff;font-size:1.3rem}.site-footer a{color:#d6d9e0}.site-footer a:hover{color:#fff}
.site-footer .logo-main{color:#fff}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin-bottom:8px}
.copy{text-align:center;border-top:1px solid #3a3d4a;margin:48px 0 0;padding:20px;font-size:.9rem}
.to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:0;background:var(--blue);color:#fff;font-size:1.3rem;cursor:pointer}

.quote{border:0;border-radius:10px;padding:32px;width:min(480px,92vw)}
.quote::backdrop{background:rgba(0,0,0,.55)}
.quote label{display:block;font-weight:600;margin-bottom:14px;color:var(--ink)}
.quote input,.quote textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #c3ccd3;border-radius:6px;font:inherit}

@media(max-width:900px){
  .menu-btn{display:block}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;padding:12px 24px 20px;box-shadow:0 8px 16px rgba(0,0,0,.1)}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:10px}
  .sub{display:flex;position:static;box-shadow:none;min-width:0;padding:4px 0 0 12px}
  .tel{display:none}
  .cols,.fcols{grid-template-columns:1fr;gap:32px}
  section{padding:56px 0}.hero{padding:72px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.logo {
  display: block;        /* overrides the old flex-column text logo */
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}
.logo img {
  display: block;
  height: 56px;          /* 56px tall -> ~373px wide, fits the 76px bar */
  width: auto;           /* keeps the 1000:150 ratio */
  max-width: 100%;
}

/* Tablets and phones: shrink so the Menu button still fits */
@media (max-width: 900px) {
  .logo img { height: 44px; }   /* ~293px wide */
}
@media (max-width: 480px) {
  .logo img { height: auto; width: min(240px, 58vw); }
}

.contact-form {
  text-align: left;
  background: #fff;
  border-top: 5px solid var(--blue);
  border-radius: 10px;
  padding: 32px;
  margin: 32px 0;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
.contact { background: var(--soft); }

.contact-form label {
  display: block;
  margin-bottom: 16px;
  font: 600 .95rem 'Plus Jakarta Sans', sans-serif;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  font: 400 1rem/1.4 Inter, sans-serif;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid #c3ccd3;
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:hover,
.contact-form textarea:hover { border-color: var(--blue); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(1, 112, 185, .25);
}
.contact-form .invalid { border-color: #c0392b; }
.contact-form .btn { width: 100%; }
.form-note { margin: 14px 0 0; text-align: center; font-weight: 600; }
.form-note.ok { color: #1e7e34; }
.form-note.err { color: #c0392b; }

@media (max-width: 480px) { .contact-form { padding: 24px 20px; } }


.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;   /* text wider than image */
  gap: 56px;
  align-items: center;
}
.hero-img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 600 / 726;   /* keeps the shape even if the file loads late */
  object-fit: cover;
  justify-self: end;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-img { justify-self: center; max-width: 360px; display: none; }
}