/* ---------------------------------------------------------------
   HCBI site chrome, phase 1 of the redesign.

   Utility bar, header, primary nav and its contained dropdown panels
   (Option C from design-reference.html), the footer, and the mobile
   panel. Nothing in this file touches page body content, heroes or
   cards: that is phase 2.

   Requires tokens.css.
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   SHELL
--------------------------------------------------------------- */

.site-top {
  /* Retained for any page that still wraps the chrome. The header is no
     longer inside it: a position:sticky element is clipped to its
     parent's content box, and this wrapper is only as tall as the
     utility bar plus the nav, so the header would unstick immediately. */
  background: var(--sk-wash);
}

.sk-w {
  max-width: var(--sk-container);
  margin: 0 auto;
  padding: 0 var(--sk-container-pad);
}

/* ---------------------------------------------------------------
   UTILITY BAR
--------------------------------------------------------------- */

.ubar {
  padding: 11px 0;
  position: relative;
  z-index: 90;
  background: var(--sk-ubar-bg);
}

.ubar .sk-w {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--sk-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sk-ubar-text);
}

.ubar__right {
  display: flex;
  gap: 26px;
  align-items: center;
}

.ubar__right a {
  color: var(--sk-white);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.24s;
}

.ubar__right a:hover,
.ubar__right a:focus-visible {
  opacity: 0.8;
}

@media (max-width: 720px) {
  .ubar__tagline { display: none; }
  .ubar .sk-w { justify-content: center; }
  .ubar__right { gap: 18px; }
}

/* ---------------------------------------------------------------
   HEADER
--------------------------------------------------------------- */

.sk-nav {
  /* Frosted glass: page content blurs behind the bar as it scrolls
     under. Positioning is unchanged from the original .site-header. */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sk-nav-glass);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  border-bottom: 1px solid var(--sk-nav-border);
  box-shadow: var(--sk-nav-shadow);
}

.sk-nav .sk-w {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.sk-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sk-logo img {
  display: block;
  /* Intrinsic asset is 166px wide. Stepped up ~15.7% for presence in the
     bar. The nav's tightest desktop width is 1301px, where the burger
     takes over at 1300px. The 26px this added was paid for by trimming
     nav link padding from 17px to 15px a side (10 edges = 20px) rather
     than shrinking the type. The underline insets move with it. */
  width: 192px;
  height: auto;
  max-width: 100%;
}

/* Links sit centre-left: they follow the logo and take the slack, so
   the quote pill stays pinned right. */
.sk-links {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  margin-left: 26px;
}

/* ---------------------------------------------------------------
   NAV ITEM AND HOVER BRIDGE

   .nw carries bottom padding with an equal negative margin. That
   invisible strip spans the gap between the link and the panel, so the
   pointer never leaves the hover target on the way down and the panel
   does not flicker shut.
--------------------------------------------------------------- */

.nw {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: -16px;
}

.nw__link {
  /* 17px, not the original 20px. At 15.5/600 the five links measure
     703px against 670px before, and at 1301px (the narrowest width that
     still shows the desktop nav, the burger takes over at 1300px) that
     pushed the actions 12px past the content edge. Trimming the padding
     rather than the type is what the change asked for. */
  padding: 16px 15px;
  font-family: var(--sk-body);
  font-size: 15.5px;
  font-weight: 600;
  /* Brand navy, not the slate --sk-nav-link. That token still drives the
     mobile sublinks below, which are dropdown text and stay as they were. */
  color: var(--sk-navy);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.26s;
  position: relative;
  white-space: nowrap;
}

.nw__link:after {
  content: "";
  position: absolute;
  bottom: 6px;
  /* Matches .nw__link padding so the underline spans the text, not the
     hit area. Keep these two in step. */
  left: 15px;
  right: 15px;
  height: 1.5px;
  background: var(--sk-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--sk-ease);
}

/* Hover and focus shift to the green accent. The resting state is navy
   now, so setting navy on hover would have left the underline doing all
   the work. A lighter navy would read as fading out, closer to disabled;
   the accent green is the interaction colour already used elsewhere in
   this design, and it clears AA on white at 15.5px/600. */
.nw:hover .nw__link,
.nw:focus-within .nw__link {
  color: var(--sk-on-light-green);
}

/* Current page stays navy. It is a location marker, not an interaction,
   and its underline is what distinguishes it. */
.nw--current .nw__link {
  color: var(--sk-navy);
}

.nw:hover .nw__link:after,
.nw:focus-within .nw__link:after,
.nw--current .nw__link:after {
  transform: scaleX(1);
}

.nw__caret {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: transform 0.34s var(--sk-ease), opacity 0.34s;
}

.nw:hover .nw__caret,
.nw:focus-within .nw__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---------------------------------------------------------------
   PANEL, contained and anchored under its own link
--------------------------------------------------------------- */

.panel {
  position: absolute;
  top: 100%;
  /* Centred on the nav item. Previously anchored left, which pushed the
     wider panels right and let them collide with the hero. */
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition:
    opacity 0.3s var(--sk-ease),
    transform 0.3s var(--sk-ease),
    visibility 0.3s;
  z-index: 90;
}

.nw:hover .panel,
.nw:focus-within .panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pbox {
  border-radius: var(--sk-radius-panel);
  overflow: hidden;
  box-shadow: var(--sk-shadow-panel);
  background: var(--sk-panel);
  border: 1px solid var(--sk-hairline);
}

.pin {
  padding: 14px;
  display: grid;
  gap: 7px;
}

.pin--c3 { grid-template-columns: repeat(3, 1fr); width: var(--sk-panel-3); }
.pin--c2 { grid-template-columns: repeat(2, 1fr); width: var(--sk-panel-2); }
.pin--c1 { grid-template-columns: 1fr; width: var(--sk-panel-1); }

/* White item cards on the soft panel. */
.it {
  display: flex;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--sk-radius-item);
  align-items: flex-start;
  text-decoration: none;
  background: var(--sk-card);
  border: 1px solid var(--sk-card-border);
  transition: border-color 0.24s, transform 0.24s, box-shadow 0.24s;
}

.it:hover,
.it:focus-visible {
  border-color: var(--sk-navy);
  transform: translateY(-2px);
  box-shadow: var(--sk-shadow-item);
  outline: none;
}

.it__num {
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--sk-number);
  padding-top: 3px;
  flex-shrink: 0;
  transition: color 0.24s;
}

.it:hover .it__num,
.it:focus-visible .it__num {
  color: var(--sk-green);
}

.it__body {
  display: block;
  min-width: 0;
}

.it__t {
  display: block;
  font-family: var(--sk-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sk-navy);
}

.it__d {
  display: block;
  font-family: var(--sk-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sk-muted);
  margin-top: 3px;
}

/* Small caps section label at the top of every panel. */
.plabel {
  font-family: var(--sk-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sk-number);
  padding: 4px 16px 10px;
}

/* ---------------------------------------------------------------
   COMPACT STATE ROWS
   Name only, two columns, arrow that slides on hover. The full list
   stays reachable through the panel footer's link to the hub.
--------------------------------------------------------------- */

.pbox--states {
  width: var(--sk-panel-states);
}

.pin--states {
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.st {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border-radius: 11px;
  background: var(--sk-card);
  border: 1px solid var(--sk-card-border);
  text-decoration: none;
  transition: border-color 0.22s, transform 0.22s;
}

.st:hover,
.st:focus-visible {
  border-color: var(--sk-navy);
  transform: translateX(3px);
  outline: none;
}

.st__n {
  font-family: var(--sk-heading);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sk-navy);
}

.st__ar {
  font-size: 14px;
  line-height: 1;
  color: var(--sk-arrow);
  transition: color 0.22s, transform 0.22s;
}

.st:hover .st__ar,
.st:focus-visible .st__ar {
  color: var(--sk-green);
  transform: translateX(3px);
}

/* Panel footer, used on the coverage panel. */
.pfoot {
  padding: 13px 16px;
  background: var(--sk-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--sk-hairline);
}

.pfoot__ask {
  font-family: var(--sk-body);
  font-size: 12.5px;
  color: var(--sk-desc);
}

/* ---------------------------------------------------------------
   PILLS
--------------------------------------------------------------- */

.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid transparent;
  padding: 13px 26px;
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.34s var(--sk-ease), transform 0.34s var(--sk-ease), box-shadow 0.34s var(--sk-ease);
}

.sk-btn--navy {
  background: var(--sk-navy);
  border-color: var(--sk-navy);
  color: var(--sk-white);
}

.sk-btn--navy:hover,
.sk-btn--navy:focus-visible {
  background: var(--sk-navy-hover);
  border-color: var(--sk-navy-hover);
  color: var(--sk-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(11, 11, 69, 0.45);
}

.sk-btn--nav {
  padding: 14px 28px;
  font-size: 14.5px;
  flex-shrink: 0;
}

.sk-btn--sm {
  padding: 10px 20px;
  font-size: 13px;
}

/* Outlined secondary, the same treatment the reference hero uses. */
.sk-btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.16);
}

.sk-btn--ghost:hover,
.sk-btn--ghost:focus-visible {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: var(--sk-navy);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(11, 11, 69, 0.20);
}

.sk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   MOBILE HANDOFF

   Below the breakpoint the desktop links disappear and the hamburger
   takes over. The panels are inside .sk-links, so they cannot leak on
   to a small screen.
--------------------------------------------------------------- */

.sk-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--sk-hairline);
  border-radius: 12px;
  cursor: pointer;
}

.sk-burger__bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--sk-navy);
  border-radius: 2px;
}

@media (max-width: 1300px) {
  .sk-links { display: none; }
  .sk-burger { display: flex; }
}

/* The header buttons come out of the bar until the row can carry them
   AND a full-size burger.
   .sk-actions does not shrink. Measured on the built page it is 283px
   above 560px, where the larger button padding and font apply, and the
   logo is 192px. With 20px gutters and two 20px gaps the row needs
   20+192+283+44+20+20+20 = 607px before the burger can keep its 44px
   tap target. Below that the burger is the only shrinkable child, so it
   was being squeezed: 22px at 561px and 37px at 600px, both under the
   44px minimum, and at one point pushed off screen entirely.

   640px is the first common breakpoint above 607 and is already used
   elsewhere in this file. Nothing is lost by hiding the buttons here:
   both already appear inside the panel in .mobile-nav__actions with the
   phone number and the opening hours. */
@media (max-width: 640px) {
  .sk-actions { display: none; }
}

@media (max-width: 560px) {
  .sk-w { padding: 0 20px; }
  .sk-btn--nav { padding: 12px 20px; font-size: 13.5px; }
  .sk-logo img { width: 152px; }

}

/* ---------------------------------------------------------------
   MOBILE PANEL
   Same behaviour and hooks as before so main.js keeps working, with
   the new type and palette applied.
--------------------------------------------------------------- */

.mobile-nav__panel {
  font-family: var(--sk-body);
  background: var(--sk-wash);
}

.mobile-nav__header {
  border-bottom: 1px solid var(--sk-hairline);
}

.mobile-nav__link,
.mobile-nav__section-toggle {
  font-family: var(--sk-heading);
  /* Deliberately 16px, not the 15.5px the desktop nav uses. These are
     touch targets, and the brief was bolder and larger; matching the
     desktop value made them slightly smaller instead. Weight matches. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sk-navy);
}

.mobile-nav__sublink {
  font-family: var(--sk-body);
  font-size: 14.5px;
  /* 600, not the inherited 400. At 14.5px on a phone the regular weight
     read as washed out against the sublist wash. Size and colour are
     unchanged, so the 8.99:1 contrast is unaffected. */
  font-weight: 600;
  color: var(--sk-nav-link);
}

.mobile-nav__sublink--hub {
  font-weight: 600;
  color: var(--sk-navy);
}

.mobile-nav__subdesc {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  /* Explicitly 400. The description is a child of .mobile-nav__sublink,
     so without this it would inherit the 600 above and the title would
     stop reading as the title. */
  font-weight: 400;
  /* Was --sk-desc, which is 3.44:1 at this size on the sublist and fails
     AA for normal text. --sk-desc-strong is 5.97:1 and still lighter
     than the title. */
  color: var(--sk-desc-strong);
  margin-top: 2px;
}

.mobile-nav__item {
  border-bottom: 1px solid var(--sk-hairline);
}

.mobile-nav__phone {
  font-family: var(--sk-heading);
  font-weight: 600;
  color: var(--sk-navy);
}

.mobile-nav__hours {
  font-size: 12.5px;
  color: var(--sk-utility);
}

/* ---------------------------------------------------------------
   FOOTER
   Gradient ground with a green glow, four columns, tight link rhythm.
   Every link, the semantic <address> NAP block, the credential line and
   the copyright are unchanged; this is presentation only.
--------------------------------------------------------------- */

.ft {
  background: var(--sk-footer-light);
  padding: 56px 0 0;
  position: relative;
  overflow: hidden;
  font-family: var(--sk-body);
}

.ft:after {
  content: "";
  position: absolute;
  top: -200px;
  left: -140px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 153, 52, 0.10), transparent 66%);
  pointer-events: none;
}

.ftg {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 2;
}

.ftcol {
  min-width: 0;
}

.fh {
  font-family: var(--sk-heading);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sk-on-light-head);
  margin-bottom: 14px;
}

.fh--spaced {
  margin-top: 20px;
}

/* Links stack as blocks with a tight 5px rhythm, which is most of why
   the footer is so much shorter than the old one. */
.ft a {
  color: var(--sk-on-light-body);
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 4px 0;
  line-height: 1.35;
  transition: color 0.24s;
}

.ft a:hover,
.ft a:focus-visible {
  color: var(--sk-navy);
}

.ftlogo {
  display: inline-block;
  padding: 0;
  margin-bottom: 18px;
}

.ftlogo img {
  display: block;
  height: auto;
}

.ftname {
  display: block;
  font-family: var(--sk-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--sk-navy);
  margin-bottom: 10px;
}

.ftaddr {
  font-style: normal;
  font-size: 14px;
  line-height: 1.75;
  color: var(--sk-on-light-body);
}

/* Phone and email sit inside the address flow, so they stay inline. */
.ft .ftinline {
  display: inline;
  padding: 0;
}

.ftsocial {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 14px 0 0;
  padding: 0;
}

.ftsocial a {
  padding: 0;
}

/* ---------------------------------------------------------------
   FEATURED STATE PILLS
   Out of the grid, wrapping across the full width. This is what took
   the footer from 698px to its current height without losing a link.
--------------------------------------------------------------- */

.ftpills {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}

.ftpills .fh {
  margin-bottom: 0;
  flex-shrink: 0;
}

.ftpills__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ft .ftpill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--sk-white);
  border: 1px solid rgba(11, 11, 69, 0.14);
  font-size: 13px;
  line-height: 1.2;
  color: var(--sk-navy);
  transition: color 0.24s, border-color 0.24s, background 0.24s;
}

.ft .ftpill:hover,
.ft .ftpill:focus-visible {
  color: var(--sk-on-light-green);
  border-color: var(--sk-green);
  background: var(--sk-white);
}

.ftcred {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sk-on-light-muted);
  max-width: 900px;
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--sk-hairline);
}

.ftlicense {
  display: block;
  margin-top: 4px;
  color: var(--sk-on-light-head);
}

.ftbar {
  margin-top: 24px;
  border-top: 1px solid var(--sk-hairline);
  padding: 18px 0 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--sk-on-light-muted);
  position: relative;
  z-index: 2;
}

.ftbar a {
  display: inline;
  padding: 0;
  font-size: 12.5px;
  color: var(--sk-on-light-muted);
}

.ftlegal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

@media (max-width: 1100px) {
  .ftg { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .ft { padding-top: 44px; }
  .ftg { grid-template-columns: 1fr; gap: 28px; }
  .ftbar { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   ONE CONTAINER, SITE WIDE

   .sk-w (nav, footer) and .container (every page section) resolve to
   the same max-width and padding, so their left and right edges line
   up exactly. The small-screen step is applied to both together for
   the same reason.
--------------------------------------------------------------- */

@media (max-width: 900px) {
  .sk-w,
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 560px) {
  .sk-w,
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------------------------------------------------------------
   READABLE MEASURE

   A single paragraph running the full width of a 1280px panel is
   unreadable. Multi-paragraph panels already split into two columns;
   this caps the single-paragraph case at a normal measure. Inside a
   column the cap is wider than the column, so it changes nothing there.
--------------------------------------------------------------- */

.solution-section__inner > p,
.hub-section__inner > p,
.intro__inner > p,
.depth__inner > p,
.post-body__inner > p {
  max-width: 72ch;
}

/* ---------------------------------------------------------------
   CTA INNERS

   These carry .container but also a narrow max-width of their own, so
   their edges sat inside the nav container. They now take the full
   container width and centre their content instead, which keeps the
   centred look while the section edges line up with everything else.
--------------------------------------------------------------- */

/* Two class selectors, so this wins over the single-class rule in
   solution.css / hub.css / home.css regardless of load order. Those
   stylesheets are loaded after this one via $extra_css. */
.solution-cta > .solution-cta__inner,
.hub-cta > .hub-cta__inner,
.home-final-cta > .home-final-cta__inner {
  max-width: var(--container-max);
}

.solution-cta__inner > *,
.hub-cta__inner > *,
.home-final-cta__inner > * {
  margin-left: auto;
  margin-right: auto;
}

.solution-cta__inner > h2,
.hub-cta__inner > h2,
.home-final-cta__inner > h2 {
  max-width: 20ch;
}

.solution-cta__inner > p,
.hub-cta__inner > p,
.home-final-cta__inner > p {
  max-width: 68ch;
}

/* ---------------------------------------------------------------
   CARD PROSE MEASURE
   A card that is not in a grid can run the full container width, which
   is as unreadable as a naked paragraph.
--------------------------------------------------------------- */

.card > p,
.card__text,
.claim-card p,
.feature > p {
  max-width: 72ch;
}