:root{
      --bg:#whitesmoke;
      --ink:#1a1a1a;
      --muted:#555;
      --brand:#0b3d91;   /* blue */
      --brand-2:#d7263d; /* red */
      --brand-3:#0a6efd; /* bright blue for accents */
      --card:#f9fafc;
      --maxw:1100px;
      --radius:12px;
      --shadow:0 6px 20px rgba(0,0,0,.08);
    }
    html{scroll-behavior:smooth;}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--ink);}
    a{color:var(--brand-2);text-decoration:none}
    a:hover{text-decoration:underline}

    /* Header / Nav */
    .nav-wrap{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
    .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
    .logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px;color:var(--brand)}
    .logo .ball{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%, var(--brand-2), #8b121f);}
    .spacer{flex:1}
    .menu{display:flex;gap:14px;flex-wrap:wrap}
    .menu a{padding:10px 12px;border-radius:8px;color:var(--brand);font-weight:600}
    .menu a:hover{background:rgba(11,61,145,.1)}
    .menu a.active{background:linear-gradient(90deg,var(--brand-2),var(--brand));color:#fff}
    .burger{display:none;background:none;border:0;color:var(--brand);font-size:24px}

    /* Layout */
    main{isolation:isolate}
    section{scroll-margin-top:90px;min-height:100vh;display:flex;align-items:center}
    .section{max-width:var(--maxw);margin:28px auto;padding:24px 16px;width:100%}
    .card{background:var(--card);border:1px solid #e7eaf0;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

    /* Split card with image */
    .split{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:top}
    .img-col{position:relative}
    .img-wrap{border-radius:10px;overflow:hidden;border:1px solid #e0e6ef;box-shadow:0 8px 20px rgba(0,0,0,.07)}
    /* Natural proportions (no forced ratio, no cropping) */
    .img-wrap img{
      display:block;
      width:100%;
      height:auto;   /* keep native aspect ratio */
      /* no object-fit here */
    }

    .img-left .img-col{order:0}
    .img-left .content-col{order:1}
    .img-right .img-col{order:1}
    .img-right .content-col{order:0}

    @media (max-width: 900px){
      .split{grid-template-columns:1fr;gap:16px}
      .img-right .img-col,.img-left .img-col,.img-right .content-col,.img-left .content-col{order:unset}
      section{min-height:auto}
    }

    h1{margin:0 0 10px;font-size:clamp(26px,3.4vw,42px);color:var(--brand-2)}
    .lead{color:var(--muted);font-size:clamp(15px,1.6vw,18px);line-height:1.65}

    .section h2{margin:0 0 10px;font-size:clamp(22px,2.8vw,32px);color:var(--brand)}
    .section p{color:var(--muted);line-height:1.75}

    /* Pull quote (light theme pop) */
    .pull-quote{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:16px 0 8px;padding:12px 14px;border:1px solid rgba(11,61,145,.25);border-left:6px solid var(--brand-2);background:linear-gradient(90deg, rgba(215,38,61,.06), rgba(11,61,145,.06));border-radius:10px}
    .quote-mark{font-size:34px;line-height:0;color:var(--brand-2)}
    .quote{font-size:18px;color:#0b2e5b;font-weight:800}

    /* Video (bright border + subtle glow) */
    .video{margin-top:14px;border-radius:10px;overflow:hidden;border:2px solid var(--brand-3);box-shadow:0 10px 24px rgba(10,110,253,.15)}
    .video iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#eef5ff}

    /* Lists */
    .list{margin:12px 0 0 0;padding:0 0 0 18px}

    /* Contact form */
    form{display:grid;gap:12px;margin-top:8px}
    label{font-weight:700;color:var(--brand)}
    input, textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #cfd6e4;background:#fff;color:var(--ink)}
    textarea{min-height:140px}
    .actions{display:flex;gap:10px;flex-wrap:wrap}
    .btn{appearance:none;border:0;border-radius:8px;padding:12px 16px;font-weight:800;cursor:pointer}
    .btn.primary{background:var(--brand);color:white}
    .btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
    .note{font-size:14px;color:var(--muted)}

    /* Contact form status messages */
#formStatus {
  margin-top: 8px;
  font-size: 14px;
  transition: color 0.3s, background 0.3s, padding 0.3s;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* Success state */
#formStatus.success {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

/* Error state */
#formStatus.error {
  color: #721c24;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

    /* Footer */
    footer{max-width:var(--maxw);margin:24px auto 60px;padding:0 16px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

    /* Mobile nav */
    @media (max-width: 760px){
      .menu{display:none;flex-direction:column;gap:6px;padding:8px}
      .menu.open{display:flex}
      .burger{display:block}
    }
 /* Deferred Video Player */
    .video-deferred { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid var(--brand-3); box-shadow: 0 10px 24px rgba(10,110,253,.15); }
.yt-launch { all: unset; cursor: pointer; display: grid; place-items: center; }
.yt-thumb { display: block; width: 100%; height: auto; }
.yt-play {
  position: absolute; display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 28px; line-height: 1;
}
.yt-launch:hover .yt-play { background: rgba(0,0,0,.72); }

.site-footer {
  max-width: var(--maxw);
  margin: 24px auto 60px;
  padding: 0 16px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer .footer-logo {
  width: 75px;
  height: 75px;
  border-radius: 8px;
  object-fit: contain;
}