:root{
    --qcp-white:#FFFFFF;
    --qcp-offwhite:#F7F7F5;
    --qcp-blue:#052253;
    --qcp-gold:#FAC106;
    --qcp-gray:#F2F2F2;
    --font-main:"Segoe UI Semibold","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

    /* layout helpers (adjust if your logo border/padding changes) */
    --logo-width: 400px;        /* total visual width of the logo square */
    --logo-left-offset: 6vw;    /* left offset used for the logo block */
    --logo-top-offset: 75px;    /* top offset where the logo block sits */
  }

  /* Reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--font-main);
    background:var(--qcp-offwhite);
    color:var(--qcp-blue);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
  }

  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%;height:auto}

  /* -------------------------
     Top banner (exactly 191px tall)
  ------------------------- */
  .top-banner {
    width:100%;
    height:191px;
    position:relative;
    overflow:hidden;
    background-color:var(--qcp-gray); /* unified splash color */
    z-index:1;
  }
  .top-banner .bg {
    position:absolute;
    inset:0;
    background: url("quantum_project_consulting_llc_cover.jpeg") center/cover no-repeat;
    transform:translateZ(0);
    filter:none;
    z-index:0;
    opacity:1; /* image fully visible (not faded) */
  }

  /* -------------------------
     Navigation (below banner) - right aligned
  ------------------------- */
  .primary-nav {
    background: var(--qcp-blue);
    color: var(--qcp-offwhite);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position:relative;
    z-index:5;
  }
  .nav-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0.9rem 6vw;
    display:flex;
    gap:2rem;
    align-items:center;
    justify-content:flex-end;
  }
  .nav-inner a {
    color:var(--qcp-offwhite);
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-size:0.9rem;
    padding:0.35rem 0.25rem;
    border-radius:6px;
  }
  .nav-inner a:hover { color:var(--qcp-gold); background: rgba(255,255,255,0.03); }

  /* -------------------------
     Logo block (variable width/height, white border)
  ------------------------- */
  .qcp-logo-block {
    width: var(--logo-width);
    height: var(--logo-width);
    background:var(--qcp-offwhite);
    border:10px solid var(--qcp-white);
    border-radius:6px;
    box-shadow:0 18px 48px rgba(2,15,43,0.28);
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    left: var(--logo-left-offset);
    top: var(--logo-top-offset);
    z-index:6;
  }
  .qcp-logo-block img { width:82%; height:auto; object-fit:contain; display:block; }

  /* ===== Splash and logo layout helpers ===== */
  /* Make the top banner and hero appear as a single splash band */
  .top-banner,
  .hero-wrap {
    background-color: var(--qcp-gray);
  }


  /* Headlines wrapper sits to the right of the logo */
  .hero-headlines {
    min-width:0;
    display:block;
    box-sizing: border-box;
    //transform: translateX(-50px); 
    max-width: 100%
	margin:0 auto;
	padding: 2.5rem 26vw 4rem;
	  overflow-wrap: break-word;
  white-space: normal;
  z-index: 2;
  }


  /* Ensure the splash band visually connects to the nav (no gap) */
  .hero-wrap {
    position:relative;
    z-index:2;
    //max-width:1200px;
	max-width:100%;
    margin:0 auto;
    padding: 2.5rem 6vw;
    display:grid;
    //grid-template-columns: 1fr 350px;
    //gap:2.25rem;
    align-items:start;
    margin-top: 0; /* removed gap so banner and hero visually connect */
    padding-top: calc(1.0rem + var(--logo-top-offset)-150px); /* breathing room for absolute logo */
    background-color: var(--qcp-gray);            /* gray accent */
  }
  
  
.hero-wrap2 {
  position: relative;
  z-index: 3;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 640px 420px;
  gap: 2.25rem;
  align-items: start;
  margin-top: 0;
  padding-bottom: 50px;
  padding-top: calc(1.0rem + var(--logo-top-offset) - 150px);
  background-color: var(--qcp-gray);
}

  
  /* New structure: keep hero-left itself unpadded; headlines get the offset so paragraph can align under logo */
  .hero-left {
    padding-left: 0;
    min-width:0;
	max-width:550px;
    //margin-top:100px; /* move left column down 150px as requested */
  }


  /* Headline sizes & colors (user-provided sizes) */
  .hero-line-1 {
    font-size:62px;
    letter-spacing:15px;
    color:var(--qcp-blue);            /* Blue accent */
    text-transform:uppercase;
    text-shadow:0 8px 22px rgba(2,8,20,0.45);
    margin-top:0.1rem;
    white-space:nowrap;
  }
  .hero-line-2 {
    font-size:62px;
    letter-spacing:30px;
    color:var(--qcp-blue);            /* Blue accent */
    text-transform:uppercase;
    text-shadow:0 8px 22px rgba(2,8,20,0.45);
    margin-top:0.1rem;
    white-space:nowrap;
  }

  .hero-tagline {
    margin-top:0.6rem;
    font-size:62px;
    letter-spacing:30px;
    color:var(--qcp-gold);            /* Gold accent */
    text-transform:uppercase;
    text-shadow:0 8px 22px rgba(2,8,20,0.45);
    margin-top:0.1rem;
    white-space:nowrap;
  }

  /* Make the main splash paragraph sit under the logo square and below the headlines.
     Align left edge of paragraph with the left edge of the logo block (var(--logo-left-offset)).
     Keep a sensible max-width so it doesn't run under the right column. */
  .hero-paragraph {
    margin-top:1.25rem;
    margin-left: var(--logo-left-offset);
    color: var(--qcp-blue);            /* readable dark text on gray */
    max-width:520px;
    font-size:1rem;
    line-height:1.45;
  }

  /* CTAs sit under paragraph in the left column */
  .hero-ctas { margin-top:1.75rem; display:flex; gap:1rem; flex-wrap:wrap; margin-left: var(--logo-left-offset); }

  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.85rem 1.6rem; border-radius:999px; font-size:0.9rem; letter-spacing:0.14em;
    text-transform:uppercase; cursor:pointer; border:2px solid transparent; text-decoration:none;
  }
  .btn-primary { background:var(--qcp-gold); color:#1b1400; border-color:var(--qcp-gold); }
  .btn-primaryFooter { background:var(--qcp-gold); color:var(--qcp-blue); border-color:var(--qcp-gold); }
  .btn-ghost { background:transparent; color:var(--qcp-white); border-color:rgba(255,255,255,0.18); }
  .btn-ghostHero { background:transparent; color:var(--qcp-blue); border-color:rgba(255,255,255,0.18); }

  /* Right hero column: rocket card */
  .hero-right {
    display:flex;
    grid-column: 2;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    //margin-left:0; /* ensure it sits in the second column, not pushed to the viewport edge */
    justify-self:start;
	
	//align-items:center;
    //justify-content:left;
    //margin-top:150px; /* move right column down 150px as requested */
  }
  .rocket-card {
    width:100%; max-width:420px;
    background:linear-gradient(180deg, rgba(2,15,43,0.96), rgba(2,15,43,0.92));
    border-radius:20px; padding:2rem; border:1px solid rgba(250,193,6,0.35);
    box-shadow:0 30px 80px rgba(2,15,43,0.6); color:var(--qcp-offwhite);
  }
  .rocket-icon { width:72px; height:auto; display:block; margin-bottom:1rem; }
  .rocket-eyebrow { color:var(--qcp-gold); font-size:0.85rem; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:0.45rem; }
  .rocket-title { font-size:1.25rem; color:var(--qcp-white); margin-bottom:0.6rem; }
  .rocket-copy { color:rgba(215,222,239,0.95); font-size:0.95rem; line-height:1.4; }

  /* Blue horizontal rule separating splash from Services */
  .splash-sep { height:4px; background:var(--qcp-blue); border:none; width:100%; display:block; }

  /* Sections */
  main { background:var(--qcp-offwhite); }
  section { padding:3.5rem 6vw; }
  .section-heading { font-size:1.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--qcp-blue); margin-bottom:0.6rem; }
  .section-sub { color:#3b4760; max-width:720px; margin-bottom:1.6rem; }

  .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .service { background:var(--qcp-white); border-radius:14px; padding:1.5rem; border:1px solid #e6e9f0; box-shadow:0 12px 28px rgba(5,34,83,0.04); }
  .service .label { color:var(--qcp-gold); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.5rem; }
  .service h3 { color:var(--qcp-blue); margin-bottom:0.5rem; }
  .service p { color:#4a5670; font-size:0.95rem; }

  .architecture { background:linear-gradient(135deg,#fdfbf4 0,#f7f7f5 40%,#eef3fb 100%); border-top:1px solid #e9edf5; border-bottom:1px solid #e9edf5; }
  .architecture-grid { display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:start; }
  .pill { display:inline-flex; align-items:center; gap:0.6rem; padding:0.35rem 0.9rem; border-radius:999px; background:var(--qcp-blue); color:var(--qcp-offwhite); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.8rem; }
  .architecture-list { margin-top:1rem; color:#3b4760; line-height:1.5; }
  .architecture-list li { margin:0.6rem 0; }

  .contact { background:var(--qcp-blue); color:var(--qcp-offwhite); padding:3.25rem 6vw; }
  .contact-grid { display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start; }
  .contact a { color:var(--qcp-gold); text-decoration:underline; }

  footer { background:#020f2b; color:#9aa7c6; padding:1.25rem 6vw; display:flex; justify-content:space-between; align-items:center; font-size:0.9rem; }

  /* -------------------------
     Responsive behavior
     - When logo stacks above hero, switch hero text to dark (qcp-blue) for legibility on off-white
     - Ensure hero-left padding collapses on small screens
  ------------------------- */
  @media (max-width:1100px) {
    .hero-headlines { padding-left: calc(5vw + var(--logo-width) + 20px); transform: translateY(-40px); max-width: calc(100% - 75px); }
    .qcp-logo-block { left:5vw; top:75px; }
    .hero-line-1 { font-size:48px; letter-spacing:12px; }
    .hero-line-2 { font-size:48px; letter-spacing:18px; }
    .hero-tagline { font-size:20px; letter-spacing:0.18em; }
    .hero-left { margin-top:120px; } /* slightly reduce vertical offset on narrower viewports */
    .hero-right { margin-top:120px; }
  }

  @media (max-width:900px) {
    :root { --logo-left-offset: 5vw; --logo-width: 320px; }
    .qcp-logo-block { position:relative; left:auto; top:0; margin:0 auto 12px; }
    .hero-wrap { grid-template-columns:1fr; padding:1.5rem 5vw; margin-top:10px; padding-top:1rem; }
    .hero-left { padding-left:0; text-align:center; margin-top:0; }
    .hero-headlines { padding-left:0; transform:none; max-width:100%; }
    /* Switch to dark text when stacked above off-white logo block */
    .hero-line-1 { font-size:72px; letter-spacing:18px; color:var(--qcp-blue); text-shadow:none; white-space:normal; }
    .hero-line-2 { font-size:32px; letter-spacing:10px; color:var(--qcp-blue); text-shadow:none; white-space:normal; }
    .hero-tagline { color:var(--qcp-blue); font-size:16px; text-shadow:none; }
    .hero-paragraph { margin-left:0; color:var(--qcp-blue); text-align:center; max-width:100%; }
    .btn-ghost { color:var(--qcp-blue); border-color: rgba(5,34,83,0.08); }
    .hero-ctas { justify-content:center; margin-left:0; }
    .hero-left { padding-top:12px; }
    .hero-right { margin-top:0; }
  }

  @media (max-width:560px) {
    :root { --logo-width: 220px; --logo-left-offset: 5vw; }
    .qcp-logo-block { width: var(--logo-width); height: var(--logo-width); top:75px; }
    .hero-line-1 { font-size:56px; letter-spacing:12px; }
    .hero-line-2 { font-size:26px; letter-spacing:6px; }
    .hero-tagline { font-size:14px; letter-spacing:0.12em; }
    .nav-inner { padding:0.6rem 4vw; gap:1rem; }
    .services-grid { grid-template-columns:1fr; gap:1rem; }
    .architecture-grid { grid-template-columns:1fr; gap:1rem; }
    .contact-grid { grid-template-columns:1fr; gap:1rem; }
  }