:root{ 
  --nav-blue: #223e72; /* deep blue for headings/links */ 
  --muted-blue: #eef6fb; /* hero background */ 
  --text-muted: #516777; 
  --cta-blue: #25407c; 
  --radius: 40px; 
  --container-w: 1180px; 
} 
*{box-sizing:border-box} 
body{font-family: 'JetBrains Mono', monospace; margin:0; color:#102026; background:#fff} 
/* Header */ 

/* Hero / Feature card */ 
.hero{max-width:1400px; margin:32px 30px 15px; padding:44px; background:var(--muted-blue); border-radius:var(--radius);} 
.hero-inner{max-width:var(--container-w); margin:0 auto; display:flex; gap:44px; align-items:center} 
.hero-left{flex:0 0 52%; padding:36px 28px} 
.breadcrumb{color:var(--nav-blue); font-size:13px; letter-spacing:0.08em; margin-bottom:22px; font-weight:700} 
h1{font-family: 'Nunito Sans', sans-serif; font-size:88px; margin:0 0 24px; color:var(--nav-blue); line-height:0.95} 
p.lead{font-size:20px; color:var(--text-muted); max-width:520px; margin:0 0 36px} 
.cta{display:inline-flex; align-items:center; gap:18px; text-decoration:none; background:var(--nav-blue); color:#fff; font-weight:800; padding:22px 42px; border-radius:60px; font-family: 'Nunito Sans', sans-serif} 
.cta .arrow{font-size:20px; opacity:0.95} 
.hero-right{flex:0 0 48%; display:flex; align-items:center; justify-content:center} 
.hero-right img{width:100%; height:420px; object-fit:cover; border-radius:6px; box-shadow:0 10px 30px rgba(34,62,114,0.08)} 
/* Lower the visual density on very large screens */ 
@media (min-width:1600px){ .hero{padding:64px} h1{font-size:100px} } 
/* Responsive: stack on narrow screens */ 
@media (max-width:980px){ .header-inner{grid-template-columns:120px 1fr 140px} nav.main-nav{display:none} .hero-inner{flex-direction:column-reverse} .hero-left{width:100%; padding:22px} .hero-right{width:100%} .hero-right img{height:320px} h1{font-size:56px} } 
@media (max-width:560px){ .header-inner{grid-template-columns:110px 1fr 110px; padding-bottom:6px} h1{font-size:40px} .cta{padding:14px 20px} .hero{padding:22px} .logo{width:90px} } 
/* Mobile menu styles */ 
.menu-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--nav-blue); } 
.mobile-menu { position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: var(--nav-blue); padding: 24px; transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 1000; color: white; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } 
.mobile-menu.open { transform: translateX(0); } 
.close-button { background: none; border: none; font-size: 28px; color: white; cursor: pointer; align-self: flex-end; } 
.mobile-nav { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; width: 100%; } 
.mobile-nav a { color: white; text-decoration: none; font-size: 18px; } 
.mobile-contact-bubble { min-width: unset; width: auto; text-align: center; padding: 12px 24px; border-radius: 28px; background: white; border: none; box-shadow: 0 6px 18px rgba(12,45,90,0.04); font-size: 13px; margin-top: 32px; } 
.mobile-contact-bubble .phone { display: block; color: var(--cta-blue); font-weight: 600; } 
.mobile-contact-bubble .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; } 
.social-icons { display: flex; gap: 16px; margin-top: auto; padding-bottom: 20px; } 
.social-icon { width: 40px; height: 40px; background: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; text-decoration: none; } 
/* Responsive tweaks for phone (min-width: 321px and max-width: 540px) */ 
@media (min-width: 321px) and (max-width: 540px) { 
  .site-header { padding: 18px 20px; } 
  .header-inner { grid-template-columns: 1fr auto; justify-items: start; } 
  .logo { width: 90px; } 
  .contact-pill { display: none; } 
  .menu-toggle { display: block; justify-self: end; } 
  .hero { margin: 18px 12px 10px; padding: 24px; border-radius: 24px; } 
  .hero-inner { gap: 24px; } 
  .hero-left { padding: 18px; } 
  h1 { font-size: 36px; } 
  p.lead { font-size: 16px; max-width: 100%; } 
  .cta { padding: 16px 32px; font-size: 16px; } 
  .hero-right img { height: 240px; } 
} 
/* Responsive tweaks for iPad (min-width: 550px and max-width: 1025px) */ 
@media (min-width: 550px) and (max-width: 1025px) { 
  .site-header { padding: 24px 30px; } 
  .header-inner { grid-template-columns: 140px 1fr 200px; gap: 16px; } 
  nav.main-nav a { margin: 0 24px; font-size: 16px; } 
  .contact-pill { padding: 12px 20px; font-size: 16px; } 
  .contact-pill .phone { font-size: 16px; } 
  .contact-pill .small { font-size: 12px; } 
  .hero { margin: 24px 20px 12px; padding: 36px; border-radius: 32px; } 
  .hero-inner { gap: 32px; } 
  .hero-left { flex: 0 0 50%; padding: 28px 20px; } 
  h1 { font-size: 64px; } 
  p.lead { font-size: 18px; } 
  .hero-right img { height: 360px; } 
  .menu-toggle { display: none; } /* Keep desktop nav on iPad */ 
} 
/* Responsive tweaks for iPad (min-width: 550px and max-width: 1025px) */
@media (min-width: 550px) and (max-width: 1025px) {
  .site-header { padding: 24px 30px; }
  .header-inner { grid-template-columns: 140px 1fr auto; gap: 16px; justify-items: start; }
  .logo { width: 90px; }
  nav.main-nav { display: none; } /* Hide desktop nav */
  .contact-pill { display: none; } /* Hide contact pill */
  .menu-toggle { display: block; justify-self: end; } /* Show toggle button */
  .hero { margin: 24px 20px 12px; padding: 36px; border-radius: 32px; }
  .hero-inner { gap: 32px; }
  .hero-left { flex: 0 0 50%; padding: 28px 20px; }
  h1 { font-size: 64px; }
  p.lead { font-size: 18px; }
  .hero-right img { height: 360px; }
}