/* =========================================================
   TriPoint – header and footer (Kadence Elements).
   Loaded site-wide. Depends on the tokens and button styles
   in tripoint-base.css.
   ========================================================= */

/* ---------- Header ---------- */
.tp-header{position:relative;z-index:50;padding:16px var(--tp-gutter) 0}
.tp-header>.kt-row-column-wrap{padding:0;max-width:none}
.tp-header__bar{background:#fff;border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 1px 2px rgba(24,87,102,.06)}
.tp-header__bar>.kt-inside-inner-col{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.tp-logo{margin:0;flex:0 0 auto}
.tp-logo img{display:block;width:132px;height:auto}
@media (max-width:1200px){.tp-logo img{width:auto;height:30px}}
.tp-nav{flex:0 1 auto;font-size:15px;font-weight:500;color:var(--tp-dark-teal)}
.tp-nav .wp-block-navigation__container{gap:34px}
.tp-nav .wp-block-navigation-item__content{color:var(--tp-dark-teal);text-decoration:none;padding:4px 0}
.tp-nav .wp-block-navigation-item__content:hover{color:var(--tp-teal);text-decoration:underline;text-underline-offset:4px}
.tp-header__cta.kb-buttons-wrap{flex:0 0 auto;margin:0}
/* on pages that open with the rounded hero, float the bar over it */
body:has(.tp-hero),
body:has(.tp-ab-hero){--tp-hero-page:1}
body:has(.tp-hero) .tp-header,
body:has(.tp-ab-hero) .tp-header{height:0;padding:0}
body:has(.tp-hero) .tp-header>.kt-row-column-wrap,
body:has(.tp-ab-hero) .tp-header>.kt-row-column-wrap{position:absolute;left:var(--tp-gutter);right:var(--tp-gutter);top:44px}
@media (max-width:1300px){.tp-nav .wp-block-navigation__container{gap:22px}}
/* Mobile and tablet header: hamburger left, logo centred, CTA right.
   A three-column grid with equal outer columns, so the logo is centred on
   the bar itself rather than on the space left between the other two. */
@media (max-width:1200px){
  .tp-nav .wp-block-navigation__responsive-container-open{display:flex !important;color:var(--tp-dark-teal)}
  .tp-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important}

  /* Hamburger and CTA at the two ends, logo absolutely centred on the bar.
     A three-column grid looked right but could not guarantee it: the side
     columns are only equal while their contents fit, and a labelled button
     overflows its column rather than shrinking. Taking the logo out of the
     flow centres it on the bar regardless of what sits either side. */
  /* A full pill curves inward at the ends, which clips the corners of a
     button sitting against them. A gentler radius keeps the bar rounded
     while leaving the button its full width. */
  .tp-header__bar{padding:6px !important;border-radius:28px}
  .tp-header__bar>.kt-inside-inner-col{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
    /* The logo comes first in the markup, so the three are ordered here:
     hamburger, logo, CTA. */
  .tp-header__bar .tp-nav--mobile{margin:0 !important;flex:0 0 auto;order:1}
  .tp-header__bar .tp-header__cta{margin:0;flex:0 0 auto;order:3}
  /* Auto margins centre the logo in the space left between the hamburger
     and the CTA, so the gaps either side of it match. Centring it on the
     bar instead is geometrically exact but looks wrong: the CTA is three
     times the width of the hamburger, so the logo ends up crowded against
     it with a large gap on the other side. */
  .tp-header__bar .tp-logo{
    position:static;
    margin:0 auto !important;
    flex:0 0 auto;
    order:2;
  }

  /* Hamburger in a soft circle. The two bars are drawn in CSS rather than
     using core's SVG, so they can rotate into an X; the circle itself never
     changes size, only its colour and rotation. */
  .tp-nav--mobile .wp-block-navigation__responsive-container-open{
    position:relative;
    width:44px;height:44px;border-radius:999px;
    align-items:center;justify-content:center;
    background:rgba(217,217,212,.55);
    background:color-mix(in srgb,var(--tp-border) 55%,#fff);
    color:var(--tp-dark-teal);
    transition:background-color .3s ease,color .3s ease,transform .4s cubic-bezier(.4,0,.2,1);
  }
  .tp-nav--mobile .wp-block-navigation__responsive-container-open svg{display:none}
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::before,
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::after{
    content:"";position:absolute;left:50%;top:50%;
    width:16px;height:2.25px;border-radius:999px;
    background:currentColor;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* 2.25px matches the arrow icons: their SVG is a 16px viewBox with a 2px
     stroke, drawn at 18px, so the line lands at 2.25px. Rounded ends match
     their stroke-linecap too. */
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::before{transform:translate(-50%,-50%) translateY(-3px)}
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::after{transform:translate(-50%,-50%) translateY(3px)}

  /* Open: purple circle, half turn, bars cross into an X. */
  .tp-nav--mobile:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open{
    background:var(--tp-purple);
    color:#fff;
    transform:rotate(180deg);
  }
  .tp-nav--mobile:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }
  .tp-nav--mobile:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::after{
    transform:translate(-50%,-50%) rotate(-45deg);
  }
}
/* Mobile menu panel.
   Core renders this as a full-screen fixed overlay; it is pulled back to a
   card sitting under the header bar with the same gap, radius and shadow as
   the desktop dropdowns. It is positioned against .tp-header__bar, which is
   the nearest positioned ancestor. */
@media (max-width:1200px){
  /* Core gives the nav position:relative, which would make the panel anchor
     to the hamburger and inherit its width. Making the nav static hands the
     job to .tp-header__bar, so the panel spans the full bar. */
  .tp-nav--mobile,
  .tp-nav--mobile .wp-block-navigation__responsive-container{position:static !important}
  .tp-nav--mobile .wp-block-navigation__responsive-container.is-menu-open{
    position:absolute !important;
    top:calc(100% + 14px) !important;
    left:0 !important;right:0 !important;bottom:auto !important;
    width:auto !important;height:auto !important;
    max-height:calc(100vh - 140px);overflow-y:auto;
    background:var(--global-palette9);color:var(--tp-dark-teal);
    border-radius:24px;
    padding:24px;
    box-shadow:0 18px 40px rgba(24,87,102,.28);
    animation:tp-menu-in .3s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes tp-menu-in{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:none}
  }
  /* Core's dialog wrapper adds its own centring and spacing. */
  .tp-nav--mobile .is-menu-open .wp-block-navigation__responsive-dialog,
  .tp-nav--mobile .is-menu-open .wp-block-navigation__responsive-container-content{
    padding:0;margin:0;width:100%;
  }
  /* The hamburger toggles the menu (see tripoint-motion.js), so core's close
     button is hidden visually but kept for screen readers. */
  .tp-nav--mobile .is-menu-open .wp-block-navigation__responsive-container-close{
    position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  }

  /* Plain text menu, with collapsible sections. Core keeps every submenu
     open in the mobile overlay and ignores taps on the section buttons, so
     the state is handled in tripoint-motion.js, which adds .tp-open to the
     section's <li>. No rules, no backgrounds - just type and spacing. */
  .tp-nav--mobile .is-menu-open .wp-block-navigation__container{
    display:flex;flex-direction:column;align-items:stretch !important;gap:22px !important;width:100%}
  .tp-nav--mobile .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item{
    width:100%;flex-direction:column;align-items:stretch !important}
  .tp-nav--mobile .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content{
    display:flex;justify-content:space-between;align-items:center;width:100%;padding:0;
    font-size:16px;font-weight:500;line-height:1.2;
    color:var(--tp-dark-teal);text-decoration:none;text-align:left;background:none;border:0}
  .tp-nav--mobile .is-menu-open .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:hover{color:var(--tp-teal)}
  /* no empty space above the first link (the close button lives on the hamburger) */
  .tp-nav--mobile .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:0 !important}
  .tp-nav--mobile .is-menu-open .wp-block-navigation__responsive-dialog{margin-top:0 !important}
  /* sections closed until tapped */
  .tp-nav--mobile .is-menu-open .tp-nav-section>.wp-block-navigation__submenu-container{display:none !important}
  .tp-nav--mobile .is-menu-open .tp-nav-section.tp-open>.wp-block-navigation__submenu-container{
    display:flex !important;flex-direction:column;align-items:flex-start !important;gap:12px;
    padding:14px 0 0 !important;margin:0;border:0;
    background:none !important;box-shadow:none !important;position:static !important;width:auto !important}
  .tp-nav--mobile .is-menu-open .tp-nav-section .wp-block-navigation__submenu-container .wp-block-navigation-item{width:100%;align-items:flex-start !important}
  .tp-nav--mobile .is-menu-open .tp-nav-section .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    font-size:14px;font-weight:400;line-height:1.2;color:var(--tp-body);padding:0;text-align:left;text-decoration:none;background:none}
  .tp-nav--mobile .is-menu-open .tp-nav-section .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{color:var(--tp-teal)}
  /* chevron */
  .tp-nav--mobile .is-menu-open .wp-block-navigation__submenu-icon{display:none !important}
  .tp-nav--mobile .is-menu-open .tp-nav-section>.wp-block-navigation-submenu__toggle::after{
    content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;flex:0 0 auto;margin-left:12px}
  .tp-nav--mobile .is-menu-open .tp-nav-section.tp-open>.wp-block-navigation-submenu__toggle::after{transform:translateY(2px) rotate(-135deg)}
}
@media (max-width:1200px) and (prefers-reduced-motion:reduce){
  .tp-nav--mobile .wp-block-navigation__responsive-container.is-menu-open{animation:none}
}
@media (max-width:767px){
  body:has(.tp-hero) .tp-header>.kt-row-column-wrap,
  body:has(.tp-ab-hero) .tp-header>.kt-row-column-wrap{left:var(--tp-gutter);right:var(--tp-gutter);top:20px}
  .tp-header{padding:8px var(--tp-gutter) 0}
}
/* Phones: everything shrinks so the bar stays one compact row. The label
   must not wrap - a two-line button is what makes the bar tall. */
@media (max-width:767px){
  .tp-header{padding:8px 8px 0}
  .tp-header__bar{padding:6px !important}
  .tp-logo img{width:auto;height:32px}
  .tp-nav--mobile .wp-block-navigation__responsive-container-open{width:32px;height:32px}
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::before,
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::after{width:13px;height:1.75px}
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::before{transform:translate(-50%,-50%) translateY(-2.5px)}
  .tp-nav--mobile .wp-block-navigation__responsive-container-open::after{transform:translate(-50%,-50%) translateY(2.5px)}
  .tp-header__cta .kb-button.tp-btn--arrow{
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
    gap:6px;
    padding:3px 3px 3px 10px;
  }
  .tp-header__cta .kb-button.tp-btn--arrow::after{flex-basis:26px;width:26px;height:26px;background-size:14px 14px}
  /* The resting fill circle is forced to 32px with !important in
     tripoint-base.css (to beat Kadence's own hover effect), so the smaller
     phone size has to be !important too - otherwise it keeps its 32px and
     sits proud of the shrunken button as a white blob. */
  .tp-header__cta .kb-button.tp-btn--arrow::before{
    width:26px !important;height:26px !important;
    margin:-13px 0 0 0 !important;right:3px !important;
  }
}
/* Very small phones: drop the label rather than let the button crowd the
   logo out of the centre. */
@media (max-width:360px){
  .tp-header__cta .kb-button.tp-btn--arrow{padding:4px}
  .tp-header__cta .kt-btn-inner-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* =========================================================
   Desktop nav with mega menus (Kadence Navigation block,
   "TriPoint - Main Nav"). Moved here from the Customizer's
   Additional CSS.
   ========================================================= */
.tp-nav-desktop{flex:0 1 auto;margin:0}
.tp-nav-desktop>.wp-block-group__inner-container{display:contents}
@media (min-width:1201px){.tp-nav--mobile{display:none !important}}
@media (max-width:1200px){.tp-nav-desktop{display:none !important}}
.tp-header__bar{position:relative}
/* Nav type and spacing scale with the window between the breakpoint where
   the menu appears (1201px) and roughly 1500px, so the items keep to one
   line instead of wrapping at the awkward widths in between. */
/* nowrap plus a tighter gap below 1280: at 1.9vw the items wrapped to a
   second row between about 1202 and 1259px. */
.tp-nav-desktop .kb-navigation{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(14px,1.9vw,34px);margin:0;padding:0}
@media (max-width:1279px){.tp-nav-desktop .kb-navigation{gap:clamp(14px,1.4vw,34px)}}
.tp-nav-desktop .kb-navigation>.menu-item,
.tp-nav-desktop .wp-block-kadence-navigation,
.tp-nav-desktop .wp-block-kadence-navigation>.navigation,
.tp-nav-desktop .menu-container,
.tp-nav-desktop .kb-navigation,
.tp-header__bar>.kt-inside-inner-col{position:static !important}
.tp-nav-desktop .kb-navigation>.menu-item>.kb-link-wrap>.kb-nav-link-content{
  font-size:clamp(13px,1.02vw,15px);font-weight:500;line-height:1.3;color:var(--tp-dark-teal);padding:8px 0;text-decoration:none;background:none;white-space:nowrap}
.tp-nav-desktop .kb-navigation>.menu-item>.kb-link-wrap>.kb-nav-link-content:hover,
.tp-nav-desktop .kb-navigation>.menu-item:hover>.kb-link-wrap>.kb-nav-link-content{color:var(--tp-teal)}

/* Dropdown arrow sits after the label. Kadence positions the toggle button
   absolutely, which lands it on top of the last word, so it is put back into
   the normal flow and the link wrap becomes the flex row that spaces them. */
.tp-nav-desktop .kb-navigation>.menu-item>.kb-link-wrap{
  display:inline-flex;align-items:center;gap:6px;
  position:relative;
}
/* The menu item is only as tall as its text, but the panel starts at the
   bottom of the white bar - so moving the pointer down leaves the item
   before it reaches the panel and the menu closes. This invisible strip
   covers that space. */
@media (min-width:1201px){
  .tp-nav-desktop .kb-navigation>.menu-item:hover>.kb-link-wrap::after,
  .tp-nav-desktop .kb-navigation>.menu-item:focus-within>.kb-link-wrap::after{
    content:"";position:absolute;left:-16px;right:-16px;top:100%;height:60px;
  }
}
.tp-nav-desktop .kb-nav-dropdown-toggle-btn{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  display:inline-flex;align-items:center;justify-content:center;
  width:auto !important;height:auto !important;
  margin:0 !important;padding:0 !important;border:0;
  color:var(--tp-dark-teal);background:none;
}
.tp-nav-desktop .kb-navigation>.menu-item:hover>.kb-link-wrap>.kb-nav-dropdown-toggle-btn{color:var(--tp-teal)}
.tp-nav-desktop .kb-nav-dropdown-toggle-btn svg,
.tp-nav-desktop .kb-nav-arrow-svg{width:12px;height:12px;display:block}

/* Dropdown panels.
   The visual gap below the header bar is made with a transparent top border
   rather than an offset, so the panel still touches the bar and the pointer
   never crosses dead space on its way down. background-clip keeps the fill
   inside that border, and drop-shadow follows the visible shape - a normal
   box-shadow would trace the border box and float above the panel.
   The outer radius is the border width larger than TP_RADIUS so the visible
   top corners match the bottom ones. */
.tp-nav-desktop .kb-navigation>.menu-item>.sub-menu{
  /* A real 14px offset below the bar. The pointer crossing that gap is
     handled by the invisible strip under each link, not by closing it up. */
  top:calc(100% + 14px) !important;
  border-radius:24px !important;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(24,87,102,.28);
}
/* Mega panels: centred under the bar at a fixed width. */
.tp-nav-desktop .kb-navigation>.menu-item>.sub-menu.mega-menu{
  /* Centred with auto margins rather than left:50% + translateX(-50%): the
     panel then has no horizontal transform, so the open animation is purely
     vertical instead of sliding in from the side. */
  left:0 !important;right:0 !important;
  margin-left:auto !important;margin-right:auto !important;
  width:75% !important;   /* of the header bar */
  min-width:0 !important;max-width:none !important;
  /* background-color, not the background shorthand: the shorthand resets
     background-clip back to border-box, which paints the fill under the
     transparent top border and closes up the visual gap. */
  background-color:var(--global-palette9) !important;
  padding:16px !important;
}
/* The inner row carries the white card, so it needs the radius too - the
   panel's rounded corners are otherwise covered by its square ones. */
.tp-nav-desktop .sub-menu .tp-mega,
.tp-nav-desktop .sub-menu .tp-mega>.kt-row-column-wrap{border-radius:24px}
.tp-nav-desktop .sub-menu .tp-mega{overflow:hidden}
/* Plain dropdowns: a narrow list under their own item. */
.tp-nav-desktop .kb-navigation>.menu-item{position:relative !important}
.tp-nav-desktop .kb-navigation>.menu-item:has(>.sub-menu.mega-menu){position:static !important}
.tp-nav-desktop .kb-navigation>.menu-item>.sub-menu:not(.mega-menu){
  left:0 !important;right:auto !important;
  width:240px !important;min-width:0 !important;
  background-color:var(--global-palette9) !important;
  padding:8px !important;
}
.tp-mega>.kt-row-column-wrap{padding:0;max-width:none;align-items:stretch}

/* Opening animation and page blur.
   Desktop only: below 1200px the menu collapses and Kadence handles it.
   The panel is kept in the layout and hidden with opacity/visibility so it
   has something to animate from; visibility is delayed on the way out so the
   fade is visible before it stops taking pointer events. */
@media (min-width:1201px){
  .tp-nav-desktop .kb-navigation>.menu-item>.sub-menu{
    display:block !important;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(10px) !important;
    transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s;
  }

  .tp-nav-desktop .kb-navigation>.menu-item:hover>.sub-menu,
  .tp-nav-desktop .kb-navigation>.menu-item:focus-within>.sub-menu,
  .tp-nav-desktop .kb-navigation>.menu-item>.sub-menu:hover{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0) !important;
    transition-delay:0s;
  }


  /* Everything except the header softens while a panel is open. */
  #wrapper>*{transition:filter .35s ease}
  body:has(.tp-nav-desktop .kb-navigation>.menu-item>.sub-menu:hover) #wrapper>*:not(.tp-header):not(.skip-link),
  body:has(.tp-nav-desktop .kb-navigation>.menu-item:hover>.sub-menu) #wrapper>*:not(.tp-header):not(.skip-link),
  body:has(.tp-nav-desktop .kb-navigation>.menu-item:focus-within>.sub-menu) #wrapper>*:not(.tp-header):not(.skip-link){
    filter:blur(6px);
  }
}
@media (min-width:1201px) and (prefers-reduced-motion:reduce){
  .tp-nav-desktop .kb-navigation>.menu-item>.sub-menu{transition:none}
  .tp-nav-desktop .kb-navigation>.menu-item>.sub-menu{transform:translateY(0) !important}
  #wrapper>*{transition:none}
}

/* Overview card.
   The radius and background image sit on the inner element, so the card is
   given the same radius here: the dark overlay inherits it, and without that
   the overlay is a square sitting proud of the rounded image. */
.tp-mega__card{position:relative;min-height:360px;overflow:hidden;isolation:isolate;border-radius:24px}
/* The background image and the radius both live on the inner element, so the
   darkening overlay goes there too. On the outer column it sat behind the
   image and showed only at the corners, which read as a border around it.
   Kadence's own overlay uses ::before on this element, so ::after is used. */
.tp-mega__card>.kt-inside-inner-col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;gap:12px;height:100%;border-radius:24px;overflow:hidden}
.tp-mega__card>.kt-inside-inner-col::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 100%),rgba(24,87,102,.15);
}
.tp-mega__card>.kt-inside-inner-col>*{margin:0;position:relative;z-index:1}
.tp-mega__card .tp-mega__btn{margin-top:8px}
/* The whole card is a link, and Kadence lays that link over the content at
   z-index:10, swallowing hover and clicks on the button. Raising the button
   alone does nothing: it is inside the inner element's own stacking context,
   which sits below the overlay. So the inner element is lifted above the
   overlay instead and made transparent to the pointer, leaving the card
   clickable everywhere while the button gets its own hover back. */
.tp-mega__card>.kt-inside-inner-col{z-index:11;pointer-events:none}
.tp-mega__card .tp-mega__btn{pointer-events:auto}

/* Link list */
.tp-mega__links>.kt-inside-inner-col{display:flex;flex-direction:column;height:100%;gap:0}
.tp-mega__label{margin:0 0 16px !important}
/* The list is a core group block, which wraps its children in an inner
   container - so the flex gap below was spacing a single child and the
   links fell back to WordPress's own block spacing. display:contents drops
   that wrapper out of the layout. */
.tp-mega__list>.wp-block-group__inner-container{display:contents}
.tp-mega__list{display:flex;flex-direction:column;gap:6px;margin:0}
.tp-mega__link{margin:0}
.tp-mega__link a{display:inline-flex;align-items:center;gap:10px;color:var(--tp-dark-teal);text-decoration:none;padding:6px 0;transition:color .2s ease}
.tp-mega__link a::after{content:"";width:28px;height:28px;border-radius:999px;flex:0 0 28px;
  background:var(--tp-purple) url("/wp-content/uploads/2026/10/tp-arrow-right-white.svg") center/14px no-repeat;
  opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .2s ease}
.tp-mega__link a:hover,.tp-mega__link a:focus-visible{color:var(--tp-teal)}
.tp-mega__link a:hover::after,.tp-mega__link a:focus-visible::after{opacity:1;transform:none}
.tp-mega__foot{margin-top:auto !important;padding-top:24px;border-top:1px solid var(--tp-border)}
.tp-mega__foot a{color:var(--tp-dark-teal);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.tp-mega__foot a:hover{color:var(--tp-teal)}

/* ---------- Footer ---------- */
.tp-footer>.kt-row-column-wrap{padding:0;max-width:none}

/* The footer row sits on teal so it blends into the "Get started" CTA above
   it. The /professionals/ service pages have no CTA and end on an off-white
   section, so that teal showed as a strip above the footer's rounded corners.
   Those pages carry the body class tp-footer--light (set in Kadence page
   settings); !important because the teal comes from Kadence's own inline
   row-background CSS, which loads after this file. */
/* Pages that end on an off-white section instead of the teal CTA */
body.tp-footer--light .tp-footer{background-color:var(--global-palette9)!important}
/* And pages that end on the beige section, which needs the darker of the
   two off-whites to match. Same mechanism, a different body class. */
body.tp-footer--beige .tp-footer{background-color:var(--global-palette8)!important}
.tp-footer__surface{color:#fff}
.tp-footer__top>.kt-row-column-wrap{padding:0 0 64px;max-width:1280px;margin:0 auto}
.tp-footer__bottom>.kt-row-column-wrap{padding:28px 0;max-width:1280px;margin:0 auto;border-top:.5px solid rgba(255,255,255,.3)}
.tp-footer__brand>.kt-inside-inner-col{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.tp-logo--footer img{width:174px}
.tp-footer__blurb{max-width:360px}
.tp-footer__col>.kt-inside-inner-col{display:flex;flex-direction:column;gap:14px}
.tp-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.3;color:#fff}
.tp-footer__links li{margin:0}
.tp-footer__links a{color:#fff;text-decoration:none;transition:opacity .2s ease}
.tp-footer__links a:hover{opacity:.65}
.tp-footer__legal>.kt-inside-inner-col{display:flex;gap:24px;flex-wrap:wrap}
.tp-footer__legal a{color:inherit;text-decoration:none;transition:opacity .2s ease}
.tp-footer__legal a:hover{opacity:.65}
.tp-newsletter{
  position:relative;display:flex;align-items:center;width:340px;max-width:100%;
  background:#fff;border-radius:999px;padding:3px 3px 3px 42px;
  box-shadow:0 0 0 2px var(--tp-yellow);
  transition:box-shadow .2s ease;
}
.tp-newsletter::before{content:"";position:absolute;left:20px;top:50%;width:14px;height:14px;margin-top:-7px;background:url("/wp-content/uploads/2026/10/tp-envelope.svg") center/contain no-repeat}
.tp-newsletter input[type=email]{flex:1;min-width:0;border:0;background:transparent;padding:6px 8px 6px 0;font:inherit;font-size:14px;color:var(--tp-dark-teal);box-shadow:none;outline:none}
.tp-newsletter input::placeholder{color:#ADADA8}
/* Browsers paint their own background behind an autofilled field. There is no
   property to turn that off, so it is covered with an inset shadow and the
   long transition keeps it from flashing back on focus. */
.tp-newsletter input:-webkit-autofill,
.tp-newsletter input:-webkit-autofill:hover,
.tp-newsletter input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tp-dark-teal);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-in-out 0s;
}
.tp-newsletter button{flex:0 0 32px;width:32px;height:32px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:var(--tp-yellow) url("/wp-content/uploads/2026/10/tp-arrow-up-right.svg") center/18px no-repeat;filter:none}
/* Focus still needs to be visibly different from the resting state, so the
   ring thickens rather than appearing. */
.tp-newsletter:focus-within{box-shadow:0 0 0 4px var(--tp-yellow)}

/* ---------- Newsletter as Gravity Form 3 ----------
   The form carries the tp-newsletter class, so the pill above styles it.
   What is left is undoing Gravity Forms' own spacing and chrome inside
   that pill, and placing the two things it adds underneath: the reCAPTCHA
   notice and the field error. Both are absolutely positioned against the
   pill, which is already position:relative. */
.gform_wrapper.tp-newsletter_wrapper{
  margin:0 0 44px !important; /* room for the reCAPTCHA notice */
  max-width:340px;
}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .gform_body{flex:1 1 auto;min-width:0}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .gform_fields{display:block !important}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .gfield,
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .ginput_container{margin:0 !important;padding:0 !important}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter input[type="email"]{
  width:100% !important;height:auto !important;min-height:0 !important;
  margin:0 !important;padding:6px 8px 6px 0 !important;
  border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;outline:none !important;
  font-size:14px !important;line-height:inherit !important;color:var(--tp-dark-teal) !important;
}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter input[type="email"]::placeholder{
  color:rgb(173, 173, 168) !important;opacity:1;
}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .gform_footer{flex:0 0 32px;margin:0 !important;padding:0 !important}
/* The label stays in the markup as the button's accessible name; only its
   rendering is collapsed, so the arrow background is all that shows. */
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .gform_footer button{
  margin:0 !important;min-height:0 !important;
  font-size:0 !important;color:transparent !important;line-height:0 !important;
}
.gform_wrapper.tp-newsletter_wrapper .gform_ajax_spinner{display:none !important}

/* reCAPTCHA notice, under the pill rather than inside it. */
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .tp-form-recaptcha{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  margin:0 !important;font-size:11px;line-height:1.4;color:rgba(255,255,255,.7);
}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .tp-form-recaptcha a{
  color:inherit;text-decoration:underline;
}

/* Errors: the field message takes the same spot, and Gravity Forms' big
   summary box above the form is dropped. */
.gform_wrapper.tp-newsletter_wrapper .gform_validation_errors{display:none !important}
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter .validation_message{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  margin:0 !important;padding:0 !important;border:0 !important;background:none !important;
  font-size:13px !important;color:#fff !important;
}
/* Both occupy the same line, so the notice gives way to the error. */
.gform_wrapper.tp-newsletter_wrapper .tp-newsletter:has(.gfield_error) .tp-form-recaptcha{display:none}

/* Thank-you message, shown inside the same pill. */
.gform_confirmation_wrapper.tp-newsletter .gform_confirmation_message{
  padding:6px 16px 6px 0;font-size:14px;line-height:21px;color:var(--tp-dark-teal);
}
/* Stacked footer: the brand and newsletter take a full-width row of their
   own, then the four link columns pair up two per row - Services with
   Schools & Professionals, then Learn with Visit.
   Kadence sets grid-column:initial on every column with a selector more
   specific than a single class, hence the longer selector and !important;
   without them the brand sits in one column and the pairing is thrown out
   by one. */
@media (max-width:1024px){
  .tp-footer__top>.kt-row-column-wrap{
    grid-template-columns:1fr 1fr !important;
    row-gap:48px;
  }
  .tp-footer__top>.kt-row-column-wrap>.tp-footer__brand{grid-column:1 / -1 !important}
}
/* Phones: the footer's generous desktop spacing reads as a large empty gap
   once everything is stacked. */
@media (max-width:767px){
  .tp-footer__top>.kt-row-column-wrap{padding-bottom:40px}
  .tp-footer__bottom>.kt-row-column-wrap{padding:20px 0}
  .tp-footer__surface>.kt-inside-inner-col{padding-bottom:24px}
  /* The legal row holds two paragraphs - the land acknowledgement and the
     copyright line. Side by side they do not fit on a phone, so they stack
     explicitly here; left to the row layout the second one disappears. */
  .tp-footer__legal>.kt-inside-inner-col{flex-direction:column;gap:12px;align-items:flex-start}
  .tp-footer__legal p{width:100%;max-width:none}
}
@media (max-width:480px){
  .tp-footer__top>.kt-row-column-wrap{grid-template-columns:1fr !important;row-gap:40px}
  .tp-footer__top>.kt-row-column-wrap>.tp-footer__brand{grid-column:1 / -1 !important}
}

/* =========================================================
   GOTB footer utilities (reusable block classes)
   ========================================================= */

/* B&W logo hover: scales 5% larger, drops opacity. Class: gotb-footer-logo */
.gotb-footer-logo img{transition:all .3s ease-in-out !important}
.gotb-footer-logo img:hover{transform:scale(1.05) !important;opacity:.5 !important}

/* Light footer menu (requires dark text). Class: gotb-legal-menu-light */
.gotb-legal-menu-light a{color:#333 !important;transition:opacity .3s ease-in-out !important}
.gotb-legal-menu-light a:hover{opacity:.5 !important}

/* Dark footer menu (requires light text). Class: gotb-legal-menu-dark */
.gotb-legal-menu-dark a{color:#fff !important;transition:opacity .3s ease-in-out !important}
.gotb-legal-menu-dark a:hover{opacity:.5 !important}

/* ---------- Scroll to top ----------
   Kadence's own chevron is hidden and the TriPoint arrow drawn in its place,
   rotated a quarter turn to point up. Done in CSS rather than by filtering
   Kadence's markup, so a plugin update replaces its icon harmlessly - the
   only thing that would break this is Kadence renaming these classes. */
#kt-scroll-up.kadence-scroll-to-top{
  display:flex;align-items:center;justify-content:center;
}
#kt-scroll-up.kadence-scroll-to-top .kadence-svg-iconset{display:none}
#kt-scroll-up.kadence-scroll-to-top::before{
  content:"";display:block;width:18px;height:18px;
  background:var(--tp-arrow-r-white) center/contain no-repeat;
  transform:rotate(-90deg);
}

/* ---------- Mobile bar: wider and larger ----------
   Last in the file on purpose: it restates sizes the mobile rules above
   already set, and only wins on source order.

   The floating bar's inset drops from the desktop value to 16px so the bar
   spans more of a phone screen, and the logo, menu toggle and button grow
   to match. Only on pages with a hero, which is where the header floats
   over the artwork rather than sitting in the flow. */
@media (max-width:767px){
  body:has(.tp-hero) .tp-header>.kt-row-column-wrap,
  body:has(.tp-ab-hero) .tp-header>.kt-row-column-wrap{
    left:16px !important;right:16px !important;top:18px !important;
  }
  .tp-header__bar{padding:8px 8px 8px 10px !important}
  .tp-header__bar .tp-logo img{height:38px !important;width:auto !important}
  .tp-header__bar .tp-nav--mobile .wp-block-navigation__responsive-container-open{
    width:42px !important;height:42px !important;
  }
  .tp-header__bar .tp-nav--mobile .wp-block-navigation__responsive-container-open svg{
    width:26px !important;height:26px !important;
  }
  /* The Get in touch button, by its Kadence block id - the block carries no
     class of ours. If the button is ever rebuilt the id changes and this
     rule stops matching, which costs the sizing but nothing else. */
  .tp-header__bar .kb-btn250388_48db76-08{
    font-size:14px !important;padding:5px 5px 5px 16px !important;gap:10px !important;
  }
}