:root{
  --bg:#ffffff;
  --text:#0e1217;
  --muted:#5b6676;
  --brand:#0b3d91;            /* deep navy */
  --brand-contrast:#ffffff;
  --brand-outline:#0b3d91;
  --container: 1200px;
  --radius: 12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Pontano Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(100%, var(--container));
  margin-inline:auto;
  padding: clamp(16px, 4vw, 32px);
}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;z-index:1000;
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #eef1f5;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{font-weight:700;font-size:1.125rem;color:var(--text)}
.site-nav{position:relative}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle-bar{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}

/* Desktop nav: allow wrapping so last items don’t get clipped */
.nav-list{
  display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0;
  flex-wrap:wrap;
}
.nav-list a{padding:8px 10px;border-radius:8px}
.nav-list a:hover{background:#f4f6fa;text-decoration:none}

/* Buttons */
.btn{
  display:inline-block;padding:12px 16px;border-radius:10px;font-weight:700;
  border:2px solid transparent;transition:transform .05s ease, background .2s, color .2s, border-color .2s
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:var(--brand-contrast)}
.btn-primary:hover{filter:brightness(0.95)}
.btn-outline{border-color:var(--brand-outline);color:var(--brand);background:transparent}
.btn-outline:hover{background:#eef3ff}

/* Hero (site-wide) */
.hero{
  position:relative;isolation:isolate;min-height:56vh;display:grid;place-items:end;
  background:#0b1220;
  background-image:var(--hero-image);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero .overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:0;
}
.hero-content{position:relative;z-index:1;color:#fff;padding-block: clamp(40px, 10vw, 120px);}
.hero h1{font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);margin:0 0 12px}
.hero .lead{max-width:60ch;color:#e6eaf1;margin:0 0 20px}

/* Generic two-column content */
.two-col{
  display:grid;gap:24px;align-items:center;
  /* image is second column in non-reverse → make column 2 wider */
  grid-template-columns:1.2fr .8fr;
}
.two-col.reverse{
  /* image is first column in reverse → make column 1 wider */
  grid-template-columns:.8fr 1.2fr;
}

.ph img{border-radius:var(--radius)}

/* Values / tiles */
.values{background:#fff}
.section-title{margin:0 0 12px}
.tiles{
  display:grid;gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.tile{
  background:#f9fbff;border:1px solid #eef1f5;border-radius:var(--radius);
  padding:20px;
}
.tile h3{margin:0 0 6px;font-size:1.125rem}
.tile p{color:var(--muted);margin:0}

/* CTA band */
.cta-band{background:#f4f7ff;border-top:1px solid #e6ecff;border-bottom:1px solid #e6ecff}
.cta-band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cta-band h2{margin:0;font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem)}

/* Footer */
.site-footer{background:#fff;border-top:1px solid #eef1f5}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.site-footer nav a{margin-right:14px;color:var(--muted)}
.site-footer nav a:last-child{margin-right:0}

/* =========================
   ReplicAI™ hero image overrides (image tag path)
   ========================= */

/* Container can expand to full content width */
.hero-visual{
  width:100% !important;
  max-width:none !important;                 /* remove 960px cap */
  margin: clamp(12px, 3vw, 28px) auto 0 !important;
  overflow:hidden !important;                /* hide cropped edges */
}

/* Image grows tall & wide, stays readable */
.hero-visual img{
  width:100% !important;
  height:clamp(440px, 55vw, 760px) !important;  /* taller on bigger screens */
  object-fit:cover !important;                 /* fill area without distortion */
  object-position:center !important;
  border-radius:12px !important;
  image-rendering:auto;
  display:block;
}

/* Optional: slight horizontal widen without extra height. */
.hero-visual img.stretch-x{
  transform:scaleX(1.06);
  transform-origin:center;
}

/* Optional: edge-to-edge (bleed). */
.hero-visual.bleed{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;   /* break out of .container/.wrap */
  border-radius:0 !important;
}
.hero-visual.bleed img{
  border-radius:0 !important;
  height:clamp(460px, 60vw, 820px) !important;
}

/* =========================
   ReplicAI™ hero overlay (background + HTML copy)
   ========================= */

.hero-visual-bg{
  position: relative;
  width: 100%;
  height: clamp(420px, 55vw, 760px) !important;
  overflow: hidden !important;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
.hero-visual.bleed.hero-visual-bg{
  width:100vw !important;
  margin-left: calc(50% - 50vw) !important;
  border-radius:0;
}
.hero-visual.bleed.hero-visual-bg .hero-copy{
  border-radius:0;
}

/* Overlay content */
.hero-visual-bg .hero-copy{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(16px, 3vw, 36px);
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.04));
  border-radius: 12px;
}

.hero-visual-bg h2{
  max-width: 1100px;
  margin: 0 0 12px;
  color: #fff;
  font-weight: 900; 
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
}

/* BULLETS + TAGLINE — RED */
.hero-bullets{
  list-style: none; padding: 0; margin: 8px 0 10px;
  display: grid; gap: 8px; place-items: center;
}
.hero-bullets li{
  color:#fff; font-weight:600;
  font-size: clamp(14px, 1.5vw, 18px);
  position: relative; padding-left: 24px;
}
.hero-bullets li::before{
  content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:#FF0000; /* RED */
}
.hero-tagline{
  color:#fff; font-weight:900;
  font-size: clamp(14px, 1.4vw, 18px);
  margin-top: 6px;
}

/* Responsive nav */
@media (max-width: 900px){
  .nav-toggle{display:inline-block}
  .nav-list{
    position:absolute;right:0;top:calc(100% + 6px);
    background:#fff;border:1px solid #eef1f5;border-radius:12px;box-shadow:0 10px 20px rgba(16,24,40,.08);
    padding:10px;display:none;flex-direction:column;min-width:220px;
  }
  .nav-list.is-open,
  .nav-list.show{ display:flex }
  .nav-list a{padding:10px 12px}
}

/* Case thumbnails */
.case { display:flex; gap:16px; align-items:flex-start; }
.case .case-img{
  display:block;
  height:160px;      /* half-height target */
  width:auto;        /* preserve aspect ratio */
  object-fit:cover;  /* crop if needed */
  border-radius:12px;
}

/* Section photos — consistent sizing for all */
.ph img {
  width: 100%;
  height: 360px;          /* uniform visual height */
  object-fit: cover;      /* fill column; crop if needed */
  object-position: center;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
}

/* Industries image — same size, bias crop toward the top */
.ph img[src$="industries.webp"] {
  height: 360px;
  object-fit: cover;
  object-position: center 10%; /* try 0%–20% to show more headroom */
}