:root{
    --navy: #16324F;
    --sage: #7E9D8B;
    --crimson: #B4232D;
    --gold: #C8A96A;
    --bg: #FAFAF8;
    --card: #FFFFFF;
    --heading: #1F2933;
    --body-text: #5E6B78;
    --border: #E5E7EB;

    --header-h: 90px;
    --header-h-sticky: 70px;
    --topbar-h: 40px;
    --ease: 0.3s ease;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior: smooth; }

  body{
    font-family:'Work Sans', sans-serif;
    background: var(--bg);
    color: var(--body-text);
  }

  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  button{ font-family:inherit; border:none; background:none; cursor:pointer; }

  :focus-visible{
    outline: 2px solid var(--crimson);
    outline-offset: 2px;
  }

  /* ============ TOP INFO BAR ============ */
  .topbar{
    background: var(--navy);
    color:#fff;
    height: var(--topbar-h);
    font-size: 0.8rem;
    font-weight: 400;
  }

  .topbar-inner{
    max-width: 1380px;
    margin: 0 auto;
    height:100%;
    padding: 0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
  }

  .topbar-left, .topbar-right{
    display:flex;
    align-items:center;
    gap: 22px;
  }

  .topbar-item{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    color: rgba(255,255,255,0.92);
  }

  .topbar-item svg{
    width:14px; height:14px;
    stroke: var(--gold);
    flex-shrink:0;
  }

  .topbar-item.emergency{
    color:#fff;
    font-weight:600;
  }
  .topbar-item.emergency svg{ stroke:#fff; }

  .topbar-divider{
    width:1px;
    height:14px;
    background: rgba(255,255,255,0.25);
  }

  .topbar-item a:hover{
    color: var(--gold);
  }

  /* ============ MAIN HEADER ============ */
  header.site-header{
    position: sticky;
    top:0;
    z-index: 100;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--ease), height var(--ease);
  }

  .header-inner{
    max-width: 1340px;
    margin:0 auto;
    height: var(--header-h);
    padding: 0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
    transition: height var(--ease);
  }

  header.site-header.is-stuck{
    box-shadow: 0 4px 20px rgba(22,50,79,0.08);
  }
  header.site-header.is-stuck .header-inner{
    height: var(--header-h-sticky);
  }

  /* ---- Logo ---- */
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }

  .brand-mark{
    width:250px; height:90px;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition: width var(--ease), height var(--ease);
  }
  .brand-mark svg{ width:22px; height:22px; stroke: var(--crimson); fill: var(--crimson); }

@media (max-width: 560px){
    .topbar-item.hide-mobile{ display:none; }
    .brand-role{ font-size:0.68rem; }
    .brand-name{ font-size:1rem; }

    .brand-mark{
      width:auto;
      height:55px;
      padding:0;
      justify-content:flex-start;
    }
    .brand-mark img{
      height:100%;
      width:auto;
    }
  }

  @media (max-width: 860px){
  header.site-header .header-inner{
    height: var(--header-h-sticky) !important;
    transition: none;
  }
}
  header.site-header.is-stuck .brand-mark{
    width:40px; height:36px;
  }

  .brand-text{ line-height:1.15; }
  .brand-name{
    font-family:'Merriweather', serif;
    font-weight:700;
    font-size:1.15rem;
    color: var(--heading);
    letter-spacing:-0.01em;
  }
  .brand-role{
    font-family:'Work Sans', sans-serif;
    font-size:0.75rem;
    font-weight:500;
    color: var(--sage);
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-top:2px;
  }

  /* ---- Nav ---- */
  nav.main-nav{
    display:flex;
    align-items:center;
    gap: 4px;
  }

  .nav-item{
    position:relative;
  }

  .nav-link{
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:500;
    font-size:0.95rem;
    color: var(--heading);
    padding: 10px 16px;
    border-radius:8px;
    transition: color var(--ease), background var(--ease);
  }

  .nav-link:hover, .nav-link:focus-visible{
    color: var(--crimson);
    background: rgba(180,35,45,0.06);
  }

  .nav-link.active{ color: var(--navy); font-weight:600; }

  .nav-link .chev{
    width:14px; height:14px;
    transition: transform var(--ease);
  }
  .nav-item:hover .chev, .nav-item.open .chev{ transform: rotate(180deg); }

  /* Dropdown */
  .dropdown{
    position:absolute;
    top: calc(100% + 8px);
    left:50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow: 0 12px 32px rgba(22,50,79,0.14);
    padding: 10px;
    min-width: 250px;
    opacity:0;
    visibility:hidden;
    transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  }

  .nav-item:hover .dropdown,
  .nav-item.open .dropdown{
    opacity:1;
    visibility:visible;
    transform: translateX(-50%) translateY(0);
  }

  .dropdown-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius:8px;
    font-size:0.9rem;
    color: var(--body-text);
    font-weight:400;
  }
  .dropdown-link:hover{
    background: var(--bg);
    color: var(--navy);
  }
  .dropdown-link svg{ width:16px; height:16px; stroke: var(--sage); flex-shrink:0; }

  .dropdown-link.view-all{
    margin-top:4px;
    border-top:1px solid var(--border);
    border-radius:0;
    padding-top:12px;
    color: var(--crimson);
    font-weight:600;
    justify-content:space-between;
  }

  /* ---- CTA + right cluster ---- */
  .header-right{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
  }

  .header-phone{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    font-weight:600;
    color: var(--navy);
    white-space:nowrap;
  }
  .header-phone svg{ width:16px; height:16px; stroke: var(--crimson); }

  .cta-btn{
    background: var(--navy);
    color:#fff;
    font-weight:600;
    font-size:0.9rem;
    padding: 12px 24px;
    border-radius:11px;
    white-space:nowrap;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
    box-shadow: 0 2px 8px rgba(22,50,79,0.18);
  }
  .cta-btn:hover, .cta-btn:focus-visible{
    background: var(--crimson);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(180,35,45,0.28);
  }

  /* ---- Mobile controls ---- */
  .mobile-controls{
    display:none;
    align-items:center;
    gap:8px;
  }

  .icon-btn{
    width:40px; height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color: var(--navy);
  }
  .icon-btn:hover{ background: var(--bg); }
  .icon-btn svg{ width:20px; height:20px; }

  .hamburger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px; height:40px;
    align-items:center;
  }
  .hamburger span{
    width:22px; height:2px;
    background: var(--heading);
    border-radius:2px;
    transition: transform var(--ease), opacity var(--ease);
  }
  .hamburger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; }
  .hamburger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ============ MOBILE MENU OVERLAY ============ */
  .mobile-menu{
    position:fixed;
    inset:0;
    top: calc(var(--topbar-h) + var(--header-h));
    background: var(--card);
    z-index:99;
    padding: 12px 24px 32px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y:auto;
  }
  .mobile-menu.is-open{ transform: translateX(0); }

  .mobile-menu ul{ display:flex; flex-direction:column; }

  .mobile-link{
    padding: 16px 4px;
    font-size:1.1rem;
    font-weight:500;
    color: var(--heading);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .mobile-submenu{
    max-height:0;
    overflow:hidden;
    transition: max-height 0.35s ease;
  }
  .mobile-submenu.is-open{ max-height: 320px; }
  .mobile-submenu a{
    display:block;
    padding: 12px 4px 12px 16px;
    font-size:0.95rem;
    color: var(--body-text);
    border-bottom:1px solid var(--border);
  }

  .mobile-menu .cta-btn{
    display:block;
    text-align:center;
    margin-top:24px;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 960px){
    .topbar-item.hide-tablet{ display:none; }
  }

  @media (max-width: 860px){
    nav.main-nav{ display:none; }
    .header-phone{ display:none; }
    .cta-btn.desktop-cta{ display:none; }
    .mobile-controls{ display:flex; }

    .header-inner{ padding: 0 20px; }
    .topbar-inner{ padding: 0 20px; }

.topbar-item.hide-tablet{ display:none; }
    .topbar-divider{ display:none; }
  }

  @media (max-width: 560px){
    .topbar-item.hide-mobile{ display:none; }
    .brand-role{ font-size:0.68rem; }
    .brand-name{ font-size:1rem; }
  }

  /* ---- demo page filler (not part of header component) ---- */
  .demo-content{
    max-width:800px;
    margin: 60px auto;
    padding: 0 24px 200px;
  }
  .demo-content h1{
    font-family:'Merriweather', serif;
    color: var(--heading);
    font-size:1.8rem;
    margin-bottom:16px;
  }
  .demo-content p{ line-height:1.7; margin-bottom:14px; }