html {
  color-scheme: light; /* tell browser the site is light-only */
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: light;
  }

  /* Enforce correct background and text colors everywhere */
  body, .homepage, .hero, .page-hero, section, .cta, .features {
    background-color: var(--surface) !important;
    color: var(--text) !important;
  }

  /* Headings */
  h1, h2, h3 {
    color: var(--primary) !important;
  }

  /* Paragraphs and other text */
  p, a, li, span {
    color: var(--text) !important;
  }
}
/* =========================================================
   NEMS CONNECT BRAND STYLESHEET
   Clean Stable Version
   ========================================================= */


/* ---------------------------------------------------------
   1. FONT
--------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* Force full-width page layout */

html, body {

width:100%;
max-width:100%;

margin:0;
padding:0;

}

body {

display:block;

}
/* ---------------------------------------------------------
   2. DESIGN TOKENS
--------------------------------------------------------- */

:root{

--navy-blue:#0E3562;
--teal:#167F96;
--blue-gray:#D6E0E8;
--white:#FAFAFA;

--primary:var(--navy-blue);
--secondary:var(--teal);
--accent1:var(--blue-gray);

--header-bg:var(--blue-gray);
--header-fg:var(--navy-blue);

--surface:var(--white);
--surface-2:#F3F6F9;

--text:#1D2A36;

--border:rgba(0,0,0,.08);

--space-1:.25rem;
--space-2:.5rem;
--space-3:.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-7:2rem;
--space-8:2.5rem;
--space-9:3rem;

--font-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

--fs-hero:clamp(2rem,4vw,3rem);
--fs-h1:clamp(1.75rem,3vw,2.25rem);
--fs-h2:clamp(1.5rem,2vw,1.875rem);
--fs-h3:clamp(1.25rem,1.5vw,1.5rem);

--wrap-w:min(1100px,92vw);

}


/* ---------------------------------------------------------
   3. BASE TYPOGRAPHY
--------------------------------------------------------- */

html,body{
margin:0;
background:var(--surface);
color:var(--text);
font-family:var(--font-sans);
font-size:16px;
line-height:1.55;
}

h1,h2,h3{
color:var(--primary);
font-weight:700;
margin-bottom:var(--space-5);
}

h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}

p{
margin-bottom:var(--space-5);
}

a{
color:var(--primary);
text-decoration:none;
}

a:hover{
color:var(--secondary);
}


/* ---------------------------------------------------------
   4. HEADER
--------------------------------------------------------- */

header.hover{
background:var(--header-bg) !important;
color:var(--header-fg) !important;

display:flex;
align-items:center;
justify-content:space-between;

padding:.4rem 2rem;

border-bottom:1px solid rgba(0,0,0,.05);
}

header.hover a{
color:var(--header-fg) !important;
}

header.hover a:hover{
color:var(--secondary) !important;
}

header.hover h1 img{
height:72px;
width:auto;
}

header.hover nav{
margin-right:2rem;
}

header.hover h1{
margin:0;
display:flex;
align-items:center;
}

/* ---------------------------------------------------------
   5. LAYOUT SYSTEM
--------------------------------------------------------- */

.wrap{
max-width:var(--wrap-w);
margin-inline:auto;
padding-inline:1.5rem;
}


/* remove theme container limits */

main,
#content,
.container,
.content,
article{
max-width:none;
width:100%;
margin:0;
padding:0;
}

main#content{
padding:0 !important;
}


/* full width sections */

section,
.hero,
.banner,
.intro,
.features,
.highlights,
.home-content,
.cta{
width:100%;
margin:0;
}

/* Break theme page container so sections can bleed */

body > .container,
body > main,
.container {

max-width:100% !important;
width:100% !important;
padding:0 !important;
margin:0 !important;

}
/* Remove theme page width constraints */

body > * {

max-width:100% !important;
width:100% !important;

}
/* ---------------------------------------------------------
   6. HERO
--------------------------------------------------------- */

.hero,
.banner{
background:var(--navy-blue);
color:var(--white);
text-align:center;

/* reduced hero height */
padding-top:1.8rem;
padding-bottom:1.8rem;
}

.hero .wrap,
.banner .wrap{
max-width:900px;
}

.hero h1{
color:white;
font-size:var(--fs-hero);
}

.hero p{
color:var(--accent1);
text-align:center;
margin-inline:auto;
max-width:38ch;
}


/* ---------------------------------------------------------
   7. INTERNAL PAGE HERO
--------------------------------------------------------- */

.page-hero{
background:var(--navy-blue);
color:white;
text-align:center;
padding:2rem 0;
width:100%;
}

.page-hero h1{
color:white;
font-size:var(--fs-hero);
margin:0;
}


/* ---------------------------------------------------------
   8. CONTENT SECTIONS
--------------------------------------------------------- */

.section,
.intro,
.features,
.home-content{

background:var(--surface-2);
padding:var(--space-9) 0;

}

.highlights{

background:var(--accent1);
padding:var(--space-9) 0;

}

.cta{

background:var(--accent1);
padding:var(--space-9) 0;

}


/* CTA right alignment */

.cta-row{

display:flex;
justify-content:flex-end;

}


/* ---------------------------------------------------------
   9. GRID COMPONENTS
--------------------------------------------------------- */

.grid{

display:grid;
gap:var(--space-7);

}

.features .grid,
.highlights .grid{

grid-template-columns:repeat(3,1fr);

}

.card,
.feature{

background:var(--surface);

border:1px solid var(--border);

border-radius:8px;

padding:var(--space-6);

}

.card h3{
color:var(--primary);
}


/* ---------------------------------------------------------
   10. PROSE CONTENT
--------------------------------------------------------- */

.prose{

max-width:min(900px,92vw);
margin:auto;

line-height:1.6;

}


/* ---------------------------------------------------------
   11. RESPONSIVE
--------------------------------------------------------- */

@media (max-width:768px){

.features .grid,
.highlights .grid{

grid-template-columns:1fr;

}

}
/* =========================================================
   COMPONENT LAYOUTS (FIXES YOUR CURRENT ISSUE)
========================================================= */

/* IMAGE + TEXT */
.media-block {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin: 2rem 0;
}

.media-block.reverse {
  flex-direction: row-reverse;
}

/* 🔥 critical: forces side-by-side */
.media-block > * {
  flex: 1;
  min-width: 0;
}

.media-block img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  border-radius: 6px;
}


/* COLUMNS */
.columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.columns-2 > * {
  min-width: 0;
}


/* IMAGE PAIR */
.image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.image-pair img {
  width: 100%;
  border-radius: 6px;
}


/* FULL WIDTH IMAGE */
.image-full {
  text-align: center;
  margin: 2rem 0;
}

.image-full img {
  width: 100%;
  max-width: 1000px;
  border-radius: 6px;
}


/* RESPONSIVE FIX */
@media (max-width: 768px) {

  .media-block {
    flex-direction: column;
  }

  .columns-2 {
    grid-template-columns: 1fr;
  }

  .image-pair {
    grid-template-columns: 1fr;
  }

}