:root { --max: 1200px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; color:#1b2d45; background:#fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: #1b2d45; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: var(--max); margin: 0 auto; padding: 16px; }

.grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }

/* ===== Header + mega menu ===== */
.site-header { border-bottom: 1px solid #e6ecf1; }
.header-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.logo { font-weight:700; }
.main-nav { position:relative; }
.top-level { display:flex; gap:20px; list-style:none; margin:0; padding:0; align-items:center; }
.top-level > li > a { padding:8px 0; }
/* Align desktop nav closer to the logo */
@media (min-width: 900px){
  .header-row{ justify-content: flex-start; gap: 100px; } /* was space-between */
}

.nav-toggle, .mega-toggle { background:transparent; border:0; font:inherit; color:#1b2d45; cursor:pointer; }
.nav-toggle { display:none; font-size:22px; }

.has-mega { position:relative; }
.has-mega > .mega-toggle { padding:8px 0; }

.mega{
  position: absolute; top:100%; z-index:50;
  left: 50%; transform: translateX(-50%);   /* center under the nav */
  display:none;
  width: clamp(640px, 70vw, 920px);         /* reasonably narrow, never off-screen */
  background:#fff; border:1px solid #e6ecf1; box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding:16px;                     /* was 20px */
  margin-top:0;                     /* was 8px – removes the hover gap */
  grid-template-columns: repeat(3, minmax(180px,1fr));  /* tighter, sane min width */
  gap:16px;                         /* was 24px */
}
/* Click/focus opens at all sizes */
.has-mega[aria-expanded="true"] .mega,
.has-mega:focus-within .mega { display:grid; }

/* Hover-to-open = desktop only */
@media (hover: hover) and (min-width: 900px){
  .has-mega:hover .mega { display:grid; }
}

.mega-col h3{ margin:6px 0 8px; font-size:16px; font-weight:600; color:#425b76; }
.mega-col ul { list-style:none; margin:0; padding:0; }
.mega-col li { margin:2px 0; }
.mega-col a { font-size:14px; }

/* About Us mega = two columns (intro + featured links) */
.has-mega.two .mega { grid-template-columns: 1fr 1fr; }

/* Featured link cards (image + caption) */
.mega .featured-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mega .featured-links a { display: block; text-decoration: none; }
.mega .featured-links img { width: 100%; height: auto; border-radius: 8px; display: block; }
.mega .featured-links span { display: block; margin-top: 8px; color: #1b2d45; }

/* Optional: caret indicator on items with dropdowns */
.top-level .has-mega > .mega-toggle::after { content: "▾"; margin-left: 6px; font-size: 12px; line-height: 1; }

/* Mobile nav / mega */
@media (max-width: 900px) {

  /* Show the hamburger on mobile */
  .nav-toggle { display: block; }

  /* Full-screen overlay that covers header/logo */
  .main-nav{
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1000;
    padding: 24px;
    height: 100vh;
    overflow-y: auto;                 /* scrollable */

    /* closed state: invisible & non-interactive (so header works) */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .main-nav[aria-expanded="true"]{
    opacity: 1;
    pointer-events: auto;
  }

  /* Button on the RIGHT; becomes × when open */
  .nav-toggle{
    position: fixed;
    top: 14px;
    right: 16px;
    width: 44px; height: 44px;
    border-radius: 8px;
    z-index: 1001;                     /* above the overlay */
  }
  .nav-toggle::before{
    content: "☰";
    font-size: 24px;
    line-height: 44px;
    display: block; text-align: center;
  }
  .nav-toggle[aria-expanded="true"]::before{
    content: "×";
    font-size: 32px;
  }

  /* Vertical top-level list (large touch targets) */
  .top-level{
    display: flex;
    flex-direction: column;
    gap: 28px;
    list-style: none;
    margin: 64px 0 0;                  /* space below the close button */
    padding: 0;
    font-size: clamp(22px, 6vw, 32px);

    /* small slide-in feel without moving the whole layer */
    transform: translateX(16px);
    transition: transform .25s ease;
  }
  .main-nav[aria-expanded="true"] .top-level{
    transform: translateX(0);
  }

  /* Mega panels collapse and stack to one column on mobile */
  .has-mega .mega{
    position: static;
    transform: none;
    width: 100%;
    display: none;
    box-shadow: none; border: 0; margin: 8px 0 0; padding: 0;
    grid-template-columns: 1fr;        /* stack */
    gap: 16px;
  }
  .has-mega[aria-expanded="true"] .mega{ display: grid; }

  /* Force “About Us” two-col variant to stack on mobile */
  .has-mega.two .mega{ grid-template-columns: 1fr !important; }

  /* Lists/cards inside megas: single column */
  .mega-col ul{ list-style:none; margin:0; padding:0; columns: 1 !important; }
  .mega .featured-links{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  /* Mega content (panel) typography on mobile */
  .mega{ font-size:16px; }
  .mega h3{
    font-size:16px;
    font-weight:600;
    color:#425b76;
    margin:6px 0 8px;
  }
  .mega a{ font-size:16px; }
}

/* Ensure header logo shows and sizes correctly */
.site-header .logo { display:inline-flex; align-items:center; line-height:0; background:none !important; text-indent:0 !important; }
.site-header .logo img { display:block !important; height:auto; max-height:48px; width:auto; }

/* ===== Sections / content ===== */
.section { padding: 32px 0; }
.hero h1{
  color:#425b76;              /* the color you want */
  font-size: clamp(34px, 6vw, 70px);  /* big on desktop, sane on mobile */
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 40px;           /* space under the heading */
}
.lede { font-size: 18px; color:#40546b; max-width: 65ch; }
.stack > * + * { margin-top: 12px; }
@media (min-width: 900px){ .stack > * + * { margin-top: 14px; } }
<section class="section some-hero">
  <div class="container">
    <h1>Page Title</h1>
    <div class="grid two">
      <div><!-- left content --></div>
      <aside><!-- right content --></aside>
    </div>
  </div>
</section>

.list { padding-left: 18px; }
.list li { margin: 6px 0; }

.sidebar { border-left: 1px solid #e6ecf1; padding-left: 16px; }
.card { border: 1px solid #e6ecf1; border-radius: 10px; padding: 16px; background:#fff; }
.card h2, .card h3 { margin: 0 0 6px; }
@media (max-width: 900px){ .sidebar { border:0; padding:0; } .grid.two { grid-template-columns: 1fr !important; } }
/* Base copy size */
html { font-size: 18px; }      /* ensure body text = 18px everywhere */
body { font-size: 1rem; }      /* explicit, in case anything scaled it */

/* Headings (all pages) */
h2, h3 { color: #425b76; }

/* H2: big, like your screenshot */
h2{
  font-weight: 400;
  line-height: 1.2;
  margin: 40px 0 25px;
  font-size: clamp(28px, 4vw, 50px);
}

/* H3: medium subhead */
h3{
  font-weight: 400;
  line-height: 1.25;
  margin: 25px 0 25px;
  font-size: clamp(20px, 2.2vw, 32px);
}

/* ===== Logos marquee (CSS-only ticker) ===== */
.logos-wrap { overflow: hidden; border-top: 1px solid #e6ecf1; border-bottom: 1px solid #e6ecf1; padding:12px 0; margin:24px 0; }
.logos-track { display:flex; gap: 48px; animation: scroll 30s linear infinite; }
.logos { display:flex; gap: 48px; list-style:none; margin:0; padding:0; align-items:center; }
.logos img { height: 40px; width:auto; opacity:0.85; }
.logos img:hover { opacity:1; }
.logos-wrap:hover .logos-track { animation-play-state: paused; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== Footer (consolidated) ===== */
.site-footer{
  background:#31455b;
  color:#d7dee8;               /* default footer text */
  padding:24px 0;
  border-top:none;
  font-size:16px;      /* ← add this */
  line-height:1.5; 
}

.footer-grid{ display:grid; gap:24px; }
@media (min-width:900px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } }

.footer-col h3{
  margin:0 0 8px;
  font-size:25px;             
  font-weight:300;            
  color:#e3e3ad;                 
}

.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:4px 0; }

.site-footer a{
  color:#fff;                  /* links white */
  text-decoration:none;
}
.site-footer a:hover{
  color:#d7dee8;               /* hover slightly gray */
  text-decoration:underline;
}

/* unlinked text lighter */
.nolink,
.site-footer .footer-col p,
.site-footer .footer-col li:not(:has(a)){
  color:#d7dee8;
}

.footer-legal{
  border-top:1px solid rgba(255,255,255,.2);
  margin-top:24px; padding-top:16px;
  color:#d7dee8;
  text-align:center;
}

/* A11y helper */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Background helpers (40% opacity) */
.bg-blue-40 { background: rgba(179, 218, 255, 0.40); }  /* #b3daff @40% */
.bg-blue2-40 { background: rgba(179, 219, 255, 0.40); } /* #b3dbff @40% */
.bg-salmon-40 { background: rgba(255, 183, 179, 0.40); } /* #ffb7b3 @40% */
.bg-fafafa { background: #FAFAFA; }

/* Shadows */
.shadow { box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Check lists */
.list.checks { list-style: none; padding-left: 0; }
.list.checks li { position: relative; padding-left: 28px; }
.list.checks li::before { content: "✔"; position: absolute; left: 0; top: 0.1em; font-weight: 700; }
.list.checks.big li { font-size: 18px; }
.list.checks.big li::before { font-size: 20px; }
.list.checks{ padding-inline: 20px; }          /* both left & right */
.list.checks.big{ padding-inline: 24px; }    

/* Tables */
.table-wrap { overflow-x: auto; }
.clean-table { width: 100%; border-collapse: collapse; }
.clean-table th, .clean-table td { padding: 10px 12px; border-bottom: 1px solid #e6ecf1; text-align: left; }
.clean-table thead th { background: #fff; font-weight: 600; }
.muted { color:#637991; }

/* Flip cards */
.grid.cards { display:grid; gap:20px; }
@media (min-width:720px){ .grid.cards { grid-template-columns: repeat(3, 1fr); } }

.card-link{
  display:block; background:#fff; border:1px solid #e6ecf1; border-radius:12px;
  padding:16px; text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.card-link:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.10); border-color:#d7dee8; }
.card-link:focus-visible{ outline:2px solid #425b76; outline-offset:3px; }

.card-media{
  display:block; margin:0 auto 10px; text-align:center;
}
.card-media img{
  height:64px; width:auto; display:block; margin:0 auto;
}
@media (max-width:600px){ .card-media img{ height:56px; } }

.card-body h4{
  margin:6px 0 6px; font-size:18px; font-weight:600; color:#1b2d45; text-align:center;
}
.card-body p{
  margin:0; color:#40546b; font-size:16px; text-align:left;
}
/* Cards: no underline on hover/focus */
.card-link,
.card-link:hover,
.card-link:focus,
.card-link:focus-visible,
.card-link h4,
.card-link p{
  text-decoration: none;
}

/* Ralph portrait sizing & layout */
.ralph-row { grid-template-columns: 300px 1fr; align-items: center; gap: 16px; }
.portrait-ralph { width: 300px; max-width: 100%; height: auto; border-radius: 12px; display: block; }

/* Responsive tweaks */
@media (max-width: 900px) { .ralph-row { grid-template-columns: 200px 1fr; } }
@media (max-width: 600px) { .ralph-row { grid-template-columns: 1fr; } }

/* Wider layout for big menus (add class="wide" on the <li>) */
.has-mega.wide .mega { grid-template-columns: repeat(4, minmax(180px,1fr)); }

/* Anchor dropdown to the right edge for items near the right (add class="right") */
.has-mega.right .mega { left:auto; right:0; }
/* --- Marquee: force size + animation --- */
.logos li { flex: 0 0 auto; }                    /* don't let items shrink */
.logos img { height: 60px !important; width:auto !important; display:block; }  /* bigger logos */

/* Marquee hardening */
.logos-wrap { min-height: 64px; }                 /* visible row even before images paint */
.logos, .logos li { display:flex; align-items:center; gap:48px; }
.logos img { height:90px !important; width:auto !important; opacity:1 !important; visibility:visible !important; }

.logos-track{
  display:flex;
  width:max-content;                              /* track is as wide as its contents */
  animation: logos-marquee 28s linear infinite !important;
}

/* if OS has “Reduce motion” on, temporarily still animate (can remove later) */
html.reduce-motion .logos-track{
  animation: logos-marquee 28s linear infinite !important;
}

@keyframes logos-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }          /* we clone the list, so -50% loops seamlessly */
}
/* Bigger header/logo on desktop only */
@media (min-width: 900px){
  .site-header .logo img{
    height: 64px;          /* tweak this up/down */
    width: auto;
    max-height: none !important;  /* overrides any earlier cap */
    display: block;
  }
  .header-row{ padding: 16px 0; } /* add vertical room so it won't feel cramped */
}
/* Responsive table: stack to label/value on mobile */
@media (max-width: 900px){
  .table-wrap { overflow: visible; } /* no sideways scroll */

  .clean-table thead { 
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
    height: 0; 
    overflow: hidden; 
  }

  .clean-table,
  .clean-table tbody,
  .clean-table tr,
  .clean-table th,
  .clean-table td { 
    display: block; 
    width: 100%;
  }

  .clean-table tr { 
    border-top: 1px solid #e6ecf1; 
    padding: 12px 0; 
  }

  .clean-table td { 
    border: 0; 
    padding: 8px 0; 
    display: grid; 
    grid-template-columns: 180px 1fr;   /* label | value */
    gap: 12px;
  }

  .clean-table td::before { 
    content: attr(data-label); 
    font-weight: 600; 
    color: #425b76; 
  }
  .clean-table td {
    display: grid;
    grid-template-columns: 180px 1fr;  /* label | value */
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #ACACAC;         /* 1px cell border */
    background: #fff;
  }

  .clean-table td:not(:last-child){ margin-bottom: 8px; } /* small spacing between cells */
}
}
/* Ralph block layout/centering */
.ralph-left{
  display: flex;
  flex-direction: column;
  align-items: center;     /* center children horizontally */
  text-align: center;
  gap: 16px;
}
.ralph-left .portrait-ralph{
  width: 300px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;          /* center the image */
}
.ralph-left .ralph-name{
  margin: 8px 0 4px;
  color: #425b76;
  font-weight: 600;
  text-align: center;      /* ensure the name centers */
}
.ralph-left p{ max-width: 65ch; }

/* Narrower max width for the two sections only */
#inclusions .container.stack,
#free-quote .container.stack,
#cost .container.stack,
#high-risk .container.stack{
  max-width: 1000px;
}
/* === Overrides === */
.hero-media img { padding-top: 20px; }