:root{
  --steel:#3C5879;--maroon:#800000;--black:#0B0F19;--light:#f6f8fb;--white:#fff;
  --radius:14px;--shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--black)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
header.site-header{background:var(--white);border-bottom:2px solid var(--black);position:sticky;top:0;z-index:1000}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:48px;width:auto}
.brand .name{display:flex;flex-direction:column;line-height:1;font-weight:700}
.brand .name small{font-weight:600;color:var(--steel);letter-spacing:.08em}
.brand .name strong{font-size:18px;letter-spacing:.02em}
nav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.button{background:var(--maroon);color:var(--white);padding:10px 16px;border-radius:999px;border:2px solid var(--black);font-weight:700;box-shadow:var(--shadow)}
.button:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.section-hero{background:var(--steel);color:#fff;padding:72px 0 64px}
.hero-inner{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}
.hero-logo {
  position: relative;
  left: -40px;        /* pushes logo left */
  margin-right: 40px; /* adds space between logo and text */
}

h1.hero-title{font-size:clamp(28px,4vw,44px);margin:0 0 10px}
.hero-sub{font-size:clamp(16px,2.2vw,20px);opacity:.95}
.section-about{background:var(--white);padding:56px 0}
.card{background:var(--white);border:2px solid var(--black);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.section-services{background:var(--maroon);color:#fff;padding:56px 0}
.service-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.service-card{background:var(--white);color:var(--black);border:2px solid var(--steel);border-radius:var(--radius);padding:18px}
.section-projects{background:var(--steel);color:#fff;padding:48px 0}
.section-projects .cta{display:flex;justify-content:space-between;align-items:center;gap:16px}
.section-projects a.more{background:#fff;color:var(--black);border:2px solid var(--black);padding:8px 14px;border-radius:8px;font-weight:700}
.section-contact{background:var(--white);padding:56px 0}
.section-footer{background:var(--steel);color:#fff;padding:32px 0;margin-top:36px}
.footer-top{display:flex;align-items:center;gap:14px}
.footer-top img{height:28px}
h2.section-title{font-size:28px;margin:0 0 18px}
p.lead{font-size:18px;margin:0 0 12px}
.form{display:grid;gap:14px}
.form .row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
input[type=text],input[type=email],textarea,select{width:100%;padding:12px 14px;border:2px solid var(--black);border-radius:10px;background:var(--white)}
textarea{min-height:140px;resize:vertical}
input[type=checkbox]{transform:scale(1.15);margin-right:8px}
.badge-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.badge{border:2px solid var(--black);border-radius:999px;padding:8px 12px;background:var(--light)}
/* Responsive adjustments for logo and hero layout */

/* Tablet adjustments */
@media (max-width: 900px) {
  .section-hero .hero-inner { grid-template-columns: 160px 1fr; gap: 16px; }
  .section-hero .hero-logo { left: -20px; margin-right: 20px; }
}

@media (max-width: 600px) {
  .section-hero .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .section-hero .hero-logo { left: 0; margin: 0 auto 16px; }
  #heroLogo { width: 180px; } /* scale down nicely on phones */
}


  .hero-logo {
    left: 0;
    margin: 0 auto 20px;
  }

  .hero-logo img {
    width: 160px; /* scale down logo for phone */
  }
}
/* Ensure the logo image itself is transparent and sized */
.hero-logo img {
  background: transparent;   /* fixes any default fill */
  width: 100%;               /* fills its grid column */
  height: auto;
}

/* Nudge the whole logo block further left and keep space before text */
.hero-logo {
  position: relative;
  left: -70px;        /* make more negative to go further left */
  margin-right: 40px; /* space between logo and headline */
}

/* Kill any accidental white card styling around the hero logo */
.hero-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Make sure the image itself shows transparency and fills its column */
.hero-logo img {
  display: block;
  background: transparent !important;
}
/* TEMP: kill any white backgrounds or rounded corners around the hero logo */
.section-hero .hero-logo,
.section-hero .hero-logo * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Also make sure generic image rules don't inject a background */
img {
  background: transparent !important;
}
/* Remove any container "card" effect inside the hero */
.section-hero .container,
.section-hero .hero-inner,
.section-hero .hero-logo,
.section-hero .hero-logo * {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Hard-kill any white box inside the hero */
.section-hero { background: var(--steel) !important; }

.section-hero .container.hero-inner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Logo block and the image */
.section-hero .hero-logo,
.section-hero .hero-logo * {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Kill any white card inside the hero, including pseudo-elements */
.section-hero .container.hero-inner,
.section-hero .container.hero-inner::before,
.section-hero .container.hero-inner::after,
.section-hero .hero-logo,
.section-hero .hero-logo::before,
.section-hero .hero-logo::after {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Keep layout + logo sizing */
.section-hero .hero-inner { grid-template-columns: 240px 1fr; gap: 22px; }
.section-hero .hero-logo { position: relative; left: -70px; margin-right: 40px; }
.section-hero .hero-logo img { display: block; width: 100%; height: auto; background: transparent !important; }

.section-hero {
  position: relative;
  background: var(--steel) !important; /* make sure your steel blue is visible */
  z-index: 0; /* ensure it's the base layer */
}

.section-hero .hero-inner {
  position: relative;
  z-index: 1; /* sits on top of the blue */
  background: transparent !important;
}

.section-hero .hero-logo {
  position: relative;
  z-index: 2; /* ensures the logo is above everything */
  background: transparent !important;
}

.section-hero .hero-logo img {
  display: block;
  background: transparent !important;
  mix-blend-mode: normal; /* prevent any odd blending */
}

.section-hero .hero-logo,
.section-hero .hero-logo * { background: transparent !important; }
.hero-inner { grid-template-columns: 240px 1fr; }
.hero-logo { left: -70px; margin-right: 40px; }
.hero-logo img { width: 100%; height: auto; }

/* Keep the hero background blue */
.section-hero { background: var(--steel) !important; }

/* Make all wrappers in the hero transparent */
.section-hero .container.hero-inner,
.section-hero .container.hero-inner::before,
.section-hero .container.hero-inner::after,
.section-hero .hero-logo,
.section-hero .hero-logo::before,
.section-hero .hero-logo::after {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Layout + sizing */
.section-hero .hero-inner {
  display: grid;
  grid-template-columns: 240px 1fr; /* adjust 200–280px to taste */
  gap: 22px;
  align-items: center;
}

.section-hero .hero-logo {
  position: relative;
  left: -70px;        /* more negative = further left */
  margin-right: 40px; /* spacing before headline */
}

/* Keep the hero background blue */
.section-hero { background: var(--steel) !important; }

/* Make all wrappers in the hero transparent */
.section-hero .container.hero-inner,
.section-hero .container.hero-inner::before,
.section-hero .container.hero-inner::after,
.section-hero .hero-logo,
.section-hero .hero-logo::before,
.section-hero .hero-logo::after {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Layout + sizing */
.section-hero .hero-inner {
  display: grid;
  grid-template-columns: 240px 1fr; /* adjust 200–280px to taste */
  gap: 22px;
  align-items: center;
}

.section-hero .hero-logo {
  position: relative;
  left: -70px;        /* more negative = further left */
  margin-right: 40px; /* spacing before headline */
}

/* The image itself */
#heroLogo {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
}

/* === RESET HERO TO A KNOWN-GOOD STATE === */
section.section-hero {
  background: #3C5879;            /* your steel blue */
  padding: 72px 0 64px;
}

/* Put logo and text side-by-side on desktop/tablet */
@media (min-width: 700px) {
  section.section-hero .hero-inner {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;  /* logo | text */
    gap: 22px !important;
    align-items: center !important;
  }
  /* make sure the text sits in the second column */
  section.section-hero .hero-copy { grid-column: 2 !important; }
  /* logo block positioning */
  section.section-hero .hero-logo { position: relative; left: -60px; margin-right: 40px; }
}

/* Stack vertically on phones */
@media (max-width: 699px) {
  section.section-hero .hero-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center;
  }
  section.section-hero .hero-logo { left: 0; margin: 0 auto 16px; }
  #heroLogo { width: 180px; height: auto; }
}

/* Always let the image size cleanly */
#heroLogo {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

/* Make the hero its own blend context */
.section-hero { isolation: isolate; }

/* Visually knock out white from the logo over the blue */
#heroLogo {
  mix-blend-mode: multiply;        /* best on darker backgrounds */
}

/* If an older browser doesn’t support blending, do nothing */
@supports not (mix-blend-mode: multiply) {
  #heroLogo { mix-blend-mode: normal; }
}

/* ==== MOBILE HEADER TUNE-UP (no HTML changes) ==== */

/* Keep the page from side-scrolling on small screens */
html, body { overflow-x: hidden; }

/* Base tweaks for tighter header spacing */
header.site-header .bar {
  gap: 12px;
}
nav ul {
  gap: 16px;
}

/* Tablet and down */
@media (max-width: 900px) {
  /* Shrink brand block */
  .brand img { height: 36px; }            /* was 48px */
  .brand .name strong { font-size: 16px; }
  .brand .name small  { font-size: 11px; letter-spacing: .06em; }

  /* Let nav wrap and keep everything visible */
  nav ul {
    flex-wrap: wrap;                       /* allow wrapping to new line */
    gap: 12px;
    justify-content: flex-end;
  }

  /* Make the red button a bit slimmer so it doesn’t force side scroll */
  nav .button {
    padding: 8px 14px;
    font-size: 14px;
    border-width: 2px;
  }

  /* Prevent the header row from pushing the page width */
  header.site-header .bar { padding: 10px 0; }
  .container { padding: 0 14px; }         /* slightly smaller side padding */
}

/* Phone */
@media (max-width: 640px) {
  /* Stack brand over nav for clean layout */
  header.site-header .bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .brand { justify-content: space-between; }

  /* Make nav items wrap nicely and center them */
  nav ul {
    justify-content: center;
    gap: 10px;
  }

  /* Give the button priority and keep it on-screen */
  nav .button {
    order: 1;                              /* move to the end of the row */
    white-space: nowrap;
  }

  /* Optional: slightly smaller link text on phones */
  nav a { font-size: 14px; }
}

/* === MOBILE SCALE – one click smaller === */

/* Phones */
@media (max-width: 640px) {
  html { font-size: 14.25px; }    /* smaller global scale (was 15px) */

  /* Headings & hero copy scale */
  h1.hero-title {
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1.12;
  }
  .hero-sub {
    font-size: clamp(13px, 3.8vw, 17px);
    line-height: 1.32;
  }

  /* Header bits */
  .brand img { height: 32px; }
  .brand .name strong { font-size: 14px; }
  .brand .name small  { font-size: 10px; letter-spacing: .05em; }

  nav a { font-size: 13.5px; }
  nav .button {
    padding: 7px 12px;
    font-size: 13.5px;
    border-width: 2px;
    white-space: nowrap;
  }

  /* Badges */
  .badge { padding: 5px 9px; font-size: 13.5px; }

  /* General section spacing */
  .section-about,
  .section-services,
  .section-projects,
  .section-contact { padding: 40px 0; }

  /* Tighten overall horizontal padding */
  .container { padding: 0 12px; }
}

/* Always prevent sideways scroll */
html, body { overflow-x: hidden; }

/* === TABLET OPTIMIZATION v2 (641–1024px) === */
@media (min-width: 641px) and (max-width: 1024px) {

  html { font-size: 14.75px; }
  body, html { overflow-x: hidden; }              /* no sideways scroll */

  /* Keep the container narrower with smaller side padding */
  .container { max-width: 880px; padding: 0 18px; }

  /* Hero layout: narrower logo column, no overflow from negative offsets */
  .section-hero .hero-inner {
    display: grid;
    grid-template-columns: 90px 1fr;              /* was 120px */
    gap: 18px;
    align-items: center;
    overflow: hidden;                              /* prevent horizontal creep */
  }

  .section-hero .hero-logo { left: -12px; }        /* gentler nudge */
  .section-hero .hero-logo img { width: 92%; height: auto; }

  h1.hero-title {
    font-size: clamp(24px, 3.6vw, 34px);
    line-height: 1.18;
  }
  .hero-sub {
    font-size: clamp(14px, 2.2vw, 18px);
    line-height: 1.34;
  }

  /* Sections a bit tighter vertically */
  .section-about,
  .section-services,
  .section-projects,
  .section-contact { padding: 46px 0; }

  /* Header tweaks so it never forces width */
  header.site-header .bar { gap: 16px; }
  .brand img { height: 40px; }
  nav a { font-size: 15px; }
  nav .button { padding: 8px 14px; font-size: 15px; }
}

/* Safety: never allow horizontal scroll at any size */
html, body { overflow-x: hidden; }