.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section)}
.section-wash{background:var(--wash)}
.section-navy{background:var(--navy);color:#D6DEE8}
.section-navy h2,.section-navy h3{color:#fff}
.section-tight{padding-block:clamp(36px,4.5vw,60px)}

.section-head{max-width:720px;margin-bottom:clamp(28px,3.5vw,46px)}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-block;font-size:var(--tiny);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-700);margin-bottom:12px;
}
.section-navy .eyebrow{color:var(--gold)}
.section-head p{font-size:var(--lead);color:var(--muted);margin-top:12px}
.section-navy .section-head p{color:#A9B8C9}

/* min() guard is load bearing. A bare minmax(285px,1fr) is wider than a 280px
   phone can show, so the track overflows and the whole page scrolls sideways. */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}

/* Card grid that centers an incomplete last row instead of leaving it stuck
   to one side with an empty gap where the grid's own 1fr tracks would have
   put the next card. Used anywhere a card count is content driven and does
   not reliably divide by the column count, the homepage featured grid
   (currently 5 on 3 columns) and the Services hub (currently 7 on 3
   columns). Same card sizing as .grid-3, flex rather than grid. */
.grid-center{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.grid-center>.card{flex:1 1 min(100%,285px);max-width:360px}
.split{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1.05fr .95fr} .split.rev>*:first-child{order:2} }

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Horizontal lockup, so cap the WIDTH and let height follow. Capping height on a
   3.8:1 logo pushes it far too wide and squeezes the nav. */
.brand img{height:auto;width:clamp(150px,19vw,215px)}
/* On mobile the nav collapses to a 44px button, which frees most of the bar, so
   the logo can run much larger than the desktop vw ramp would give it. */
@media (max-width:1023px){
  .brand img{width:min(58vw,215px)}
}
.brand-text{font-weight:800;color:var(--navy);font-size:17px;line-height:1.1}
.brand-text span{color:var(--gold);display:block;font-size:10px;letter-spacing:1.6px;font-weight:600;text-transform:uppercase}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* The number must never break across two lines, it is the primary action */
.header-actions .btn{white-space:nowrap;padding:12px 20px;font-size:15px}
.nav a{white-space:nowrap}

.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;background:none;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;font-size:15px;font-weight:600;color:var(--navy);padding:10px 2px}
.nav a:hover,.nav .current-menu-item>a{color:var(--gold-700)}

/* Services submenu. WordPress marks the parent <li> menu-item-has-children
   and prints the child list as ul.sub-menu right after the link, standard
   markup, no template changes needed beyond depth in wp_nav_menu(). */
.nav .menu-item-has-children{position:relative}
.nav .menu-item-has-children>a::after{
  content:'';display:inline-block;width:6px;height:6px;margin-left:7px;
  vertical-align:middle;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* One SVG per service in the submenu, added via wp_nav_menu_objects in
   functions.php rather than a template change, WordPress prints the menu
   item title raw so the icon markup just rides along inside it. */
.nav .sub-menu a{display:flex;align-items:center;gap:10px}
.nav-svc-ic{flex-shrink:0;width:18px;height:18px;display:inline-flex}
.nav-svc-ic svg{width:100%;height:100%;fill:var(--gold-600)}
.nav .sub-menu a:hover .nav-svc-ic svg{fill:var(--gold-700)}

@media (max-width:1023px){
  /* Right drawer, opening from the same side as the toggle button that
     triggers it. Header stays put at top:74px so it and the toggle are
     never covered, the drawer and its backdrop only occupy the area below. */
  .nav{
    position:fixed;top:74px;right:0;bottom:0;left:auto;z-index:65;
    width:min(86vw,340px);background:#fff;border-left:1px solid var(--line);
    box-shadow:var(--shadow-lg);max-height:calc(100svh - 74px);overflow-y:auto;
    transform:translateX(100%);opacity:0;visibility:hidden;
    transition:transform .28s ease,opacity .28s ease,visibility .28s;
  }
  .nav[data-open="true"]{transform:translateX(0);opacity:1;visibility:visible}
  .nav-backdrop{
    position:fixed;top:74px;left:0;right:0;bottom:0;z-index:55;
    background:rgba(8,38,67,.45);opacity:0;visibility:hidden;
    transition:opacity .28s ease,visibility .28s;
  }
  .nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
  .nav ul{padding:8px clamp(16px,4vw,32px) 20px}
  .nav li+li{border-top:1px solid var(--line-soft)}
  .nav a{padding:14px 2px;font-size:16px}
  .header-cta-desktop{display:none}
  /* Collapsed by default. Tapping "Services" itself opens the list rather
     than navigating straight to the hub page, site.js intercepts that first
     tap on mobile only, desktop keeps the normal link plus hover reveal. */
  .nav .sub-menu{display:none;padding:0 0 4px 18px}
  .nav .menu-item-has-children[data-sub-open="true"]>.sub-menu{display:block}
  .nav .menu-item-has-children>a::after{transition:transform .18s ease}
  .nav .menu-item-has-children[data-sub-open="true"]>a::after{transform:rotate(225deg)}
  .nav .sub-menu li+li{border-top:0}
  /* Same size and weight as the parent items, just indented, a submenu is
     still primary navigation, not a lighter secondary list. */
  .nav .sub-menu a{padding:12px 2px}
}
@media (min-width:1024px){
  .nav-toggle{display:none}
  .nav ul{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
  /* Hover reveal panel. focus-within keeps it reachable by keyboard, not
     just a mouse hover. */
  .nav .sub-menu{
    display:block;position:absolute;top:100%;left:-14px;margin-top:8px;
    min-width:240px;padding:8px;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:80;
  }
  .nav .menu-item-has-children:hover>.sub-menu,
  .nav .menu-item-has-children:focus-within>.sub-menu{
    opacity:1;visibility:visible;transform:none;
  }
  .nav .sub-menu li+li{margin-top:1px}
  .nav .sub-menu a{padding:10px 12px;border-radius:8px;font-size:14.5px}
  .nav .sub-menu a:hover{background:var(--wash);color:var(--gold-700)}
}

/* Sticky mobile call bar. A trade site lives on phone calls. */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:1px;
  background:var(--line);box-shadow:0 -4px 18px rgba(8,38,67,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
/* White on this gold measures 2.91:1, under WCAG AA's 4.5:1, and this is the
   primary mobile conversion button, sticky on every page. Navy on gold
   measures 5.27:1. */
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 8px;font-weight:700;font-size:15px;background:var(--gold);color:var(--navy);
}
.callbar a.alt{background:var(--navy);color:#fff}
.callbar svg{width:17px;height:17px;fill:currentColor}
@media (min-width:1024px){ .callbar{display:none} }
@media (max-width:1023px){ body{padding-bottom:56px} }

/* Footer */
.site-footer{background:var(--navy);color:#A9B8C9;padding-block:clamp(44px,5vw,66px) 0}
.site-footer a{color:#C8D4E0}
.site-footer a:hover{color:var(--gold)}

.footer-top{
  display:grid;gap:clamp(30px,3.5vw,48px);
  grid-template-columns:1fr;align-items:start;
}
@media (min-width:720px){ .footer-top{grid-template-columns:1.5fr 1fr 1fr} }

/* Column headings share one rule so every column keeps the same rhythm. The
   previous footer mixed padded links with unpadded list items and the three
   columns each read at a different pace. */
.site-footer h4{
  color:#fff;font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  margin:0 0 16px;padding-bottom:10px;position:relative;
}
.site-footer h4::after{
  content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--gold);
}

.footer-mark{font-size:22px;font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.02em}
.footer-mark span{color:var(--gold)}
.footer-mark-img{height:auto;width:clamp(230px,28vw,340px)}
.footer-mark em{
  display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:2.2px;
  text-transform:uppercase;color:#7F93A8;margin-top:6px;
}
.footer-blurb{font-size:14.5px;color:#9DAFC2;margin:16px 0 20px;max-width:38ch}

/* Icon rows rather than the plain padded link list the Services/Company
   columns use, matching the .contact-ic treatment on the contact page. The
   old version's 11px padding plus a 44px min-height on every link stacked up
   to a large gap between lines, tightened here since the icon plus flex row
   height already gives each line a comfortable tap target on its own. */
.footer-meta{list-style:none;padding:0;margin:0;display:grid;gap:14px;font-size:14.5px}
.footer-meta li{display:flex;align-items:center;gap:12px;color:#C7D3DF;min-height:34px}
.footer-meta a{display:inline-block}
.footer-meta-ic{
  flex-shrink:0;width:34px;height:34px;border-radius:9px;
  background:rgba(189,144,57,.14);border:1px solid rgba(189,144,57,.3);
  display:flex;align-items:center;justify-content:center;
}
.footer-meta-ic svg{width:16px;height:16px;fill:var(--gold)}

.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col a{
  display:block;font-size:14.5px;padding-block:11px;min-height:46px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-col li:last-child a{border-bottom:none}

.footer-areas{margin-top:clamp(30px,3.5vw,44px);padding-top:clamp(24px,3vw,32px);border-top:1px solid rgba(255,255,255,.1)}
.footer-chips{display:flex;flex-wrap:wrap;gap:8px}
.footer-chips span,.footer-chips a{
  font-size:13px;color:#B7C6D6;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-pill);padding:7px 13px;
}
/* The one chip that is a link needs a real hit area, the rest are static text */
.footer-chips a{display:inline-flex;align-items:center;min-height:44px;padding-inline:16px}
.footer-chips a{color:var(--gold);border-color:rgba(189,144,57,.45);font-weight:700}
.footer-chips a:hover{background:rgba(189,144,57,.16)}

/* No border-top here, .footer-areas right above already has one, a second
   line straight after it read as a cramped double rule rather than one clean
   separation. Margin alone does the separating, and the taller padding block
   gives the credits row real breathing room instead of sitting pinched
   against the areas chips. */
.footer-bottom{
  margin-top:clamp(34px,4vw,48px);
  padding-block:28px 32px;display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;align-items:center;font-size:12.5px;color:#7F93A8;
}