:root{
  --blue-50:#eaf4ff; --blue-100:#d6ebff; --blue-200:#b7dbff; --blue-300:#8cc4ff;
  --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2f6fd4; --blue-700:#265cac;
  --ink:#0f172a; --muted:#475569; --bg:#f5f9ff; --card:#ffffff;
  --radius:16px; --shadow:0 10px 25px rgba(2,37,90,.12); --shadow-sm:0 6px 16px rgba(2,37,90,.10);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink)}
a{color:#0b2a55;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e6eefb;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:164px}
.brand{display:flex;gap:.6rem;align-items:center;font-weight:800}
.brand .logo{height:200px;border-radius:10px;padding: 20px 0 20px 0;}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{color:#0b2a55;font-weight:600}
.cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--blue-600);color:#fff;padding:.7rem 1rem;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04)}
.cta:hover{background:#255aa0}
.menu-btn{display:none;background:transparent;border:0;font-size:1.2rem}

/* Hero */
.hero{position:relative;isolation:isolate}
.hero .bg{position:absolute;inset:0;background:radial-gradient(1200px 600px at 80% -10%, var(--blue-200), transparent 60%), linear-gradient(180deg, #fff, var(--blue-50)); z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:64px 0}
.kicker{text-transform:uppercase;letter-spacing:.2em;color:var(--blue-700);font-weight:800}
h1{font-size:clamp(2rem, 3.4vw + 1rem, 3.3rem);line-height:1.07;margin:.3rem 0 1rem}
.lead{font-size:1.125rem;color:var(--muted);max-width:58ch}
.actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.05rem;border-radius:12px;font-weight:700}
.btn.primary{background:var(--blue-600);color:#fff}
.btn.secondary{background:#fff;color:#0b2a55;border:2px solid var(--blue-200)}
.hero-card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.tag{display:inline-block;background:var(--blue-100);color:#0b2a55;padding:.3rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700}
.metric{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.metric .item{background:var(--blue-50);padding:14px;border-radius:12px;text-align:center}
.metric .num{font-weight:900;font-size:1.3rem;color:#0b2a55}

/* Sections */
section{padding:56px 0}
.section-title{font-size:2rem;margin:0 0 10px}
.section-lead{color:var(--muted);max-width:65ch}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid #e6eefb}
.card .img{aspect-ratio:16/9;background:linear-gradient(135deg, var(--blue-300), var(--blue-600));display:flex;align-items:center;justify-content:center;color:#fff}
.card h3{margin:14px 16px 6px}
.card p{margin:0 16px 16px;color:var(--muted)}
.pill{display:inline-block;margin:0 16px 16px;background:var(--blue-50);color:#0b2a55;padding:.35rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700}

/* Showcase */
.showcase{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:20px}
.shot{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid #e6eefb;aspect-ratio:4/3;object-fit:cover}

/* Testimonials */
.quote{background:var(--card);border:1px solid #e6eefb;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.quote p{margin:0;color:var(--ink)}
.quote .who{margin-top:10px;color:var(--muted);font-weight:700}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
form{background:#fff;border:1px solid #e6eefb;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.field{display:grid;gap:6px;margin:12px 0}
label{font-weight:700;color:#0b2a55}
input,textarea,select{padding:.8rem .9rem;border:1.5px solid #dbe7fb;border-radius:12px;background:#fbfdff;font:inherit}
input:focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 4px rgba(99,102,241,.35);border-color:#3b82f6}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.submit{margin-top:10px}

/* Footer */
footer{background:#0b2a55;color:#d9e8ff;padding:26px 0;margin-top:30px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.foot a{color:#d9e8ff}
.copyright{margin-top:16px;color:#b7c9e6}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  nav ul{display:none}
  .menu-btn{display:block}
  .cards{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}
.mobile-nav{display:none;position:absolute;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid #e6eefb}
.mobile-nav a{display:block;padding:14px 20px;border-top:1px solid #eef3ff;color:#0b2a55;font-weight:700}
.mobile-nav.show{display:block}



/* ===== iPhone / small-screen polish ===== */

/* 1) iOS text sizing + safe areas */
html { -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
header { padding-top: env(safe-area-inset-top); }
footer { padding-bottom: env(safe-area-inset-bottom); }

/* 2) Images scale cleanly */
img { height: auto; }

/* 3) Prevent layout jitter from mobile browser chrome */
:root { --vh: 100dvh; }  /* dynamic viewport unit supported in modern iOS */
.hero { min-height: auto; } /* let content size the hero instead of locking 100vh */

/* 4) Make tap targets comfy */
.btn, .cta, nav a, .mobile-nav a {
  min-height: 44px; line-height: 1.2;
}

/* 5) Inputs >=16px to stop iOS zoom on focus */
input, select, textarea { font-size: 16px; }

/* 6) Tighter container padding on phones */
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* 7) Responsive grids (cards, hero, showcase, contact) */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .showcase { grid-template-columns: 1fr; gap: 16px; }
  .contact { grid-template-columns: 1fr; gap: 16px; }
  .grid-2 { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .actions { gap: 10px; }
  .actions .btn { width: 100%; justify-content: center; }
  h1 { font-size: clamp(1.6rem, 6.2vw + .4rem, 2.2rem); }
  .lead, .section-lead { font-size: 1rem; }
  .metric { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .metric .item { padding: 10px; }
  .card img.img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .shot { aspect-ratio: 4/3; object-fit: cover; }
}

/* 8) Mobile nav behavior */
@media (max-width: 640px) {
  nav ul { display: none; }
  .menu-btn { display: block; }
  .mobile-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: calc(64px + env(safe-area-inset-top));
    background: #fff; border-bottom: 1px solid #e6eefb; z-index: 1000;
  }
  .mobile-nav.show { display: block; }
  .mobile-nav a { display: block; padding: 14px 16px; border-top: 1px solid #eef3ff; }
}

/* 9) Avoid overflow on tiny screens */
* { max-width: 100%; }
.section-title, .section-lead { word-wrap: break-word; overflow-wrap: anywhere; }

/* 10) Optional: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}





/* ==== Fix form & contact overflow on small screens ==== */

/* Prevent any child from stretching wider than viewport */
body, html {
  overflow-x: hidden;
}

/* Make sure .contact section fits screen */
.contact {
  max-width: 100%;
  overflow-x: hidden;
}

/* Form fix */
form {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Service area & contact cards inside .hero-card */
.hero-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* On iPhones, make two-column grids collapse */
@media (max-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
}