/* =========================================================
   TriPoint – base tokens, type, containers and buttons.
   Loaded site-wide. Buttons and pills are used by the header
   and footer as well as the page sections, so they live here.

   Colours come from the Kadence global palette:
   1 Teal #37889B · 2 Dark Teal #185766 · 3 Navy #104877
   4 Body Text #6B6B69 · 5 Yellow #EABF69 · 6 Purple #A97DD3
   7 Border #D9D9D4 · 8 Pale Yellow #F5F3EB · 9 Off White #FAF9F6
   ========================================================= */
:root{
  --tp-teal:var(--global-palette1);
  --tp-dark-teal:var(--global-palette2);
  --tp-soft-teal:#1B6273;
  --tp-body:var(--global-palette4);
  --tp-yellow:var(--global-palette5);
  --tp-purple:var(--global-palette6);
  --tp-navy:var(--global-palette3);
  --tp-border:var(--global-palette7);
  --tp-muted:#ADADA8;
  /* The page edge inset. Everything uses it: section content, the floating
     header bar and the footer, so the whole site shifts together and the
     content stays aligned with the menu above it. */
  --tp-gutter:88px;
  /* 1440 so the 56px gutter still applies on wide screens - at 1280 the
     centring took over around 1392px and content stopped lining up with
     the header bar. */
  --tp-max:1440px;
  --tp-arrow-ur:url("/wp-content/uploads/2026/10/tp-arrow-up-right.svg");
  --tp-arrow-r:url("/wp-content/uploads/2026/10/tp-arrow-right.svg");
  --tp-arrow-ur-white:url("/wp-content/uploads/2026/10/tp-arrow-up-right-white.svg");
  --tp-arrow-r-white:url("/wp-content/uploads/2026/10/tp-arrow-right-white.svg");
}
@media (max-width:1024px){:root{--tp-gutter:56px}}
@media (max-width:767px){:root{--tp-gutter:28px}}

/* ---------- Base type ---------- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.tp-home .entry-content p{margin-top:0}
.tp-eyebrow{letter-spacing:0}

/* ---------- Containers ---------- */
.tp-about>.kt-row-column-wrap,
.tp-service>.kt-row-column-wrap,
.tp-schools>.kt-row-column-wrap,
.tp-learn>.kt-row-column-wrap{
  max-width:calc(var(--tp-max) + var(--tp-gutter)*2);
  padding-left:var(--tp-gutter);padding-right:var(--tp-gutter);
  margin-left:auto;margin-right:auto;
}
/* Same container as the other sections. It used to run 64px padding and a
   1312px cap, which left its content 16px wider than everything around it -
   visible as soon as the section appeared on a page beside other content. */
.tp-cta>.kt-row-column-wrap{
  max-width:calc(var(--tp-max) + var(--tp-gutter)*2);
  padding-left:var(--tp-gutter);padding-right:var(--tp-gutter);
  margin-left:auto;margin-right:auto;
}
.tp-measure{max-width:560px}

/* ---------- Buttons ----------
   Arrow buttons invert on hover: the arrow circle expands to fill the
   button, and the button's original colour is left behind as a border.
   Each variant sets its own colours through the custom properties below.
   -------------------------------------------------------------------- */
.tp-btns.kb-buttons-wrap{justify-content:flex-start;gap:12px;flex-wrap:wrap}
.tp-btns--right.kb-buttons-wrap{justify-content:flex-end}
@media (max-width:1024px){.tp-btns--right.kb-buttons-wrap{justify-content:flex-start}}
.kb-button.tp-btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:inherit;font-size:15px;font-weight:500;line-height:1.3;
  letter-spacing:0;text-transform:none;
  padding:12px 20px;border-radius:999px;border:0;box-shadow:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}

/* Variant colours.
   --tp-btn-bg          resting background, and the hover border
   --tp-btn-fill        the expanding circle, and the hover background
   --tp-btn-text        resting label colour
   --tp-btn-text-hover  label colour once the fill has expanded
   --tp-btn-arrow       arrow icon

   The arrow circle keeps its colour throughout: it is the same colour as the
   fill that grows out of it, so as the fill spreads the circle stops reading
   as a separate shape and only the arrow is left sitting on the new
   background. */
.kb-button.tp-btn--teal{
  --tp-btn-bg:var(--tp-teal);--tp-btn-fill:#fff;
  --tp-btn-text:#fff;--tp-btn-text-hover:var(--tp-dark-teal);
  --tp-btn-arrow:var(--tp-arrow-ur);
}
.kb-button.tp-btn--yellow{
  --tp-btn-bg:var(--tp-yellow);--tp-btn-fill:#fff;
  --tp-btn-text:var(--tp-dark-teal);--tp-btn-text-hover:var(--tp-dark-teal);
  --tp-btn-arrow:var(--tp-arrow-ur);
}
.kb-button.tp-btn--white{
  --tp-btn-bg:#fff;--tp-btn-fill:var(--tp-purple);
  --tp-btn-text:var(--tp-dark-teal);--tp-btn-text-hover:#fff;
  --tp-btn-arrow:var(--tp-arrow-ur-white);
}
/* white button, dark-teal arrow circle (Schools section) */
.kb-button.tp-btn--arrow-dark{
  --tp-btn-fill:var(--tp-dark-teal);
  --tp-btn-text-hover:#fff;
  --tp-btn-arrow:var(--tp-arrow-ur-white);
}
.kb-button.tp-btn--teal,
.kb-button.tp-btn--yellow,
.kb-button.tp-btn--white{background:var(--tp-btn-bg);color:var(--tp-btn-text)}

/* Arrow buttons */
.kb-button.tp-btn--arrow{
  position:relative;z-index:0;overflow:hidden;
  padding:6px 6px 6px 20px;
  border:1px solid transparent;
  /* The label waits a moment, so it changes colour as the fill reaches it
     rather than before. */
  transition:color .45s ease .12s,border-color .45s ease .12s;
}
/* The circle that grows out of the arrow. It sits exactly behind the arrow
   circle at rest, same size and colour, so the fill reads as that circle
   swelling outward across the button rather than appearing from nowhere.

   Kadence Blocks paints its own hover effect on this same ::before, with a
   per-block selector more specific than ours, so every property it might set
   is overridden here. If the button still sweeps left to right, set that
   block's hover effect to "none" in the editor. */
.kb-button.tp-btn--arrow.tp-btn--arrow::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  right:6px !important;left:auto !important;
  top:50% !important;bottom:auto !important;
  width:32px !important;height:32px !important;
  margin:-16px 0 0 0 !important;
  padding:0 !important;
  border:0 !important;border-radius:999px !important;
  background:var(--tp-btn-fill) !important;
  opacity:1 !important;
  transform:scale(1) !important;transform-origin:center !important;
  /* Near-linear easing: an ease-out curve does most of the growth in the
     first third, so the fill covers the button and then appears to stop
     while the transition is still running.
     The two axes scale by different amounts, so the circle stretches into an
     ellipse as it grows - spreading left across the button faster than it
     spreads up and down. */
  transition:transform .7s cubic-bezier(.33,.25,.35,1) !important;
}
.kb-button.tp-btn--arrow::after{
  content:"";flex:0 0 32px;width:32px;height:32px;border-radius:999px;
  background-color:var(--tp-btn-fill);
  background-image:var(--tp-btn-arrow);background-repeat:no-repeat;background-position:center;background-size:18px 18px;
  /* Delayed, so the arrow turns once the fill has spread rather than at the
     same moment the hover starts. */
  transition:transform .36s ease .1s;
}
.kb-button.tp-btn--arrow:hover,
.kb-button.tp-btn--arrow:focus-visible{
  background:var(--tp-btn-bg);
  border-color:var(--tp-btn-bg);
  color:var(--tp-btn-text-hover);
}
.kb-button.tp-btn--arrow.tp-btn--arrow:hover::before,
.kb-button.tp-btn--arrow.tp-btn--arrow:focus-visible::before{transform:scale(22,9) !important}
.kb-button.tp-btn--arrow:hover::after,
.kb-button.tp-btn--arrow:focus-visible::after{transform:rotate(45deg)}

/* Buttons without the arrow keep a plain colour swap */
.kb-button.tp-btn--teal:not(.tp-btn--arrow):hover{background:var(--tp-dark-teal);color:#fff}
/* White on hover, matching where the arrow variant's fill lands. No ring:
   the yellow outline read as a border rather than as the button. */
.kb-button.tp-btn--yellow:not(.tp-btn--arrow):hover{background:#fff;color:var(--tp-dark-teal)}
.kb-button.tp-btn--white:not(.tp-btn--arrow):hover{background:var(--tp-purple);color:#fff}
.kb-button.tp-btn--outline{background:transparent;color:var(--tp-dark-teal);box-shadow:inset 0 0 0 1px var(--tp-dark-teal);padding:14px 24px}
.kb-button.tp-btn--outline:hover{background:var(--tp-dark-teal);color:#fff}

@media (prefers-reduced-motion:reduce){
  .kb-button.tp-btn--arrow.tp-btn--arrow::before{transition:none !important}
  .kb-button.tp-btn--arrow:hover::after,
  .kb-button.tp-btn--arrow:focus-visible::after{transform:none}
}

/* "Where would you like to start?" chips */
.tp-pills.kb-buttons-wrap{gap:20px}
.kb-button.tp-pill{
  background:var(--global-palette9);color:var(--tp-dark-teal);
  border:1px solid var(--tp-border);border-radius:999px;
  padding:14px 20px;font-size:15px;font-weight:500;line-height:1.3;text-transform:none;letter-spacing:0;box-shadow:none;
}
.kb-button.tp-pill:hover{background:var(--tp-dark-teal);border-color:var(--tp-dark-teal);color:#fff}
@media (max-width:767px){
  .tp-pills.kb-buttons-wrap{gap:10px}
  .kb-button.tp-pill{padding:12px 16px;font-size:14px}
  /* On mobile the block keeps ~32px above the heading but almost nothing
     below the chips, so the section sits visibly high in its card. This makes
     up the difference rather than guessing which block holds the padding.
     Matched on .tp-pills alone, not .tp-pills.kb-buttons-wrap: the two
     classes may be on different elements, in which case the compound
     selector matches nothing. */
  .tp-pills{margin-bottom:32px !important}
}

/* The chips row carries its own Kadence width settings - a 1440px cap that
   includes 56px of padding, so its content came out 112px narrower than the
   sections around it. Matched to the shared container here. Keyed off the
   chips because the row has no TriPoint class; add one in the editor and
   this can target that instead. */
.kb-row-layout-wrap:has(.tp-pills)>.kt-row-column-wrap{
  max-width:calc(var(--tp-max) + var(--tp-gutter)*2) !important;
  padding-left:var(--tp-gutter) !important;
  padding-right:var(--tp-gutter) !important;
  margin-left:auto;margin-right:auto;
}

/* The question above the chips ("Where would you like to start?").
   Kadence prints its own per-block CSS for heading sizes, hence !important.
   Add the class tp-start-heading to that block for a cleaner target; the
   :has() rule is the fallback for when the class has not been added. */
.tp-start-heading,
.wp-block-kadence-column:has(.tp-pills) .wp-block-kadence-advancedheading{
  font-size:clamp(1.75rem,3.4vw,2.25rem) !important;
  line-height:1.25 !important;
}

/* ---------- Inline site search ([tp_search]) ----------
   Sized to match the "Not sure what your child needs?" line in the dropdown
   cards: 15px / 1.4, dropping to 14px on small screens. The font family is
   still inherited, so it follows whatever block the shortcode sits in. */
.tp-search{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  font-family:inherit;font-size:15px;line-height:1.4;color:inherit;
}
@media (max-width:767px){
  .tp-search{font-size:14px}
}
.tp-search__label{
  font:inherit;color:inherit;margin:0;
}

.tp-search__field{
  position:relative;display:flex;align-items:center;flex:1 1 240px;min-width:0;width:100%;
  background:#fff;border:1px solid var(--tp-border);border-radius:999px;
  padding:4px 4px 4px 14px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tp-search__field:focus-within{
  border-color:var(--tp-dark-teal);
  box-shadow:0 0 0 3px rgba(24,87,102,.12);
}
.tp-search__icon{
  flex:0 0 1.1em;width:1.1em;height:1.1em;color:var(--tp-muted);margin-right:8px;
}
.tp-search input[type=search]{
  flex:1 1 auto;min-width:0;
  border:0;background:transparent;outline:none;box-shadow:none;
  padding:6px 4px 6px 0;
  font:inherit;color:var(--tp-dark-teal);
  -webkit-appearance:none;appearance:none;
}
.tp-search input[type=search]::placeholder{color:var(--tp-muted)}
.tp-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.tp-search__submit{
  flex:0 0 32px;width:32px;height:32px;border:0;border-radius:999px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tp-dark-teal);color:#fff;
  transition:background-color .2s ease,transform .2s ease;
}
.tp-search__submit svg{width:16px;height:16px}
.tp-search__submit:hover{background:var(--tp-teal);transform:translateX(2px)}
.tp-search__submit:focus-visible{outline:3px solid var(--tp-yellow);outline-offset:2px}
@media (max-width:600px){
  .tp-search{gap:8px}
  .tp-search__field{flex:1 1 100%}
}

/* ---------- Team cards ([tp_team]) ----------
   Values taken from the hand-built About cards on the homepage, so the
   shortcode renders identically: 28px radius, 24px column gap, 220px photo,
   24/14/14/13px type, dark teal on white with body grey for the bio. */
.tp-team__grid{
  display:grid;
  grid-template-columns:repeat(var(--tp-team-columns,2),minmax(0,1fr));
  column-gap:24px;row-gap:24px;
  align-items:stretch;
}
.tp-team__card{
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  height:100%;
}
/* Scoped, like the body rules: Kadence's content styles put a bottom margin
   on figures, which shows up as a gap between the photo and the name. */
.tp-team .tp-team__photo{margin:0}
.tp-team .tp-team__photo img{margin:0}
.tp-team__photo img{display:block;width:100%;height:220px;object-fit:cover}
/* Matt's photo is framed from the top, as it was before the swap. */
.tp-team__card--matt-natale .tp-team__photo img{object-position:center top}
.tp-team__body{
  display:flex;flex-direction:column;gap:10px;
  padding:18px 24px 28px;
}
/* Scoped with .tp-team so these beat Kadence's content styles, which set a
   32px bottom margin on paragraphs and headings inside the page content. */
.tp-team .tp-team__body>*{margin:0}
.tp-team__name{
  font-size:24px;line-height:1.15;font-weight:500;letter-spacing:-.025em;
  color:var(--tp-dark-teal);
}
.tp-team .tp-team__name{margin:0 0 4px}
.tp-team__name a{color:inherit;text-decoration:none}
.tp-team__name a:hover{color:var(--tp-teal);text-decoration:underline;text-underline-offset:3px}
.tp-team__credentials{font-size:14px;line-height:1.3;font-weight:400;color:var(--tp-dark-teal)}
.tp-team__role{font-size:14px;line-height:1.4;font-weight:500;color:var(--tp-dark-teal)}
.tp-team__bio{font-size:13px;line-height:1.5;font-weight:400;color:var(--tp-body)}
.tp-team .tp-team__bio p{margin:0 0 .6em}
.tp-team .tp-team__bio p:last-child{margin-bottom:0}
.tp-team .tp-team__footnote{
  margin:0;padding-top:16px;
  /* The homepage's .tp-learn p{max-width:68ch} caps this at 486px, which
     stops the right-aligned text short of the last card's edge. */
  max-width:none;
  font-size:13px;line-height:1.4;color:var(--tp-body);
  text-align:right;
}
@media (max-width:1024px){
  .tp-team__name{font-size:22px}
}
@media (max-width:600px){
  .tp-team__grid{grid-template-columns:minmax(0,1fr)}
  .tp-team__footnote{font-size:12px;text-align:left}
  /* Full-width cards crop a portrait photo into a wide, short strip, which
     cuts faces; a taller box keeps the framing close to the desktop card. */
  .tp-team__photo img{height:260px}
  /* 13px is sized for a narrow column, not a full-width one. */
  .tp-team__bio{font-size:14px}
}

/* =========================================================
   "Where would you like to start?" CTA section.
   Lives here rather than in tripoint-home.css because the section is used
   on pages other than the homepage. The container rule for .tp-cta is
   further up this file with the other section containers.
   ========================================================= */
/* ---------- 08 Get started ---------- */
.tp-cta__title,.tp-cta__lede{max-width:640px}
.tp-steps>.kt-row-column-wrap{padding:0;counter-reset:tp-step}
.tp-step{position:relative;overflow:hidden;counter-increment:tp-step}
.tp-step__title{max-width:300px}
/* Notch cut into the top-right corner, with the step number.
   The notch is masked OUT of the card rather than painted over it. Painting
   leaves a junction between the patch and the card edge, and that junction
   shows as a hairline or a 1-2px step however the pieces are aligned - three
   earlier attempts at nudging it failed. Masking removes the card there, so
   what shows through is the real section background and there is no seam.
   The mask goes on the inner element, which is the one with the background;
   the number pill is on the outer one and so stays unmasked. */
.tp-step::before{
  content:"";position:absolute;right:0;top:0;width:72px;height:58px;
  background:var(--tp-teal);
  border-bottom-left-radius:22px;
}
.tp-step::after{
  content:counter(tp-step,decimal-leading-zero);
  position:absolute;right:6px;top:6px;padding:6px 14px;border-radius:999px;
  background:var(--tp-dark-teal);color:#fff;font-size:14px;font-weight:600;letter-spacing:1px;line-height:18px;
  z-index:2;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  /* Masked version: drop the painted patch entirely. */
  .tp-step::before{display:none}
  .tp-step>.kt-inside-inner-col{
    --tp-notch:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="58"><path d="M0 0 L72 0 L72 58 A14 14 0 0 0 58 44 L36 44 A22 22 0 0 1 14 22 L14 14 A14 14 0 0 0 0 0 Z" fill="black"/></svg>');
    -webkit-mask-image:linear-gradient(#000,#000),var(--tp-notch);
    mask-image:linear-gradient(#000,#000),var(--tp-notch);
    -webkit-mask-position:0 0,right top;
    mask-position:0 0,right top;
    -webkit-mask-size:100% 100%,72px 58px;
    mask-size:100% 100%,72px 58px;
    -webkit-mask-repeat:no-repeat,no-repeat;
    mask-repeat:no-repeat,no-repeat;
    -webkit-mask-composite:xor;
    mask-composite:exclude;
  }
}
.tp-step>.kt-inside-inner-col{position:static}

/* Column rhythm for the section. The homepage gets this from a .tp-home
   rule; stated here so the section stands up on any page. */
.tp-cta .kb-section-dir-vertical>.kt-inside-inner-col{display:flex;flex-direction:column;gap:16px}
.tp-cta .kb-section-dir-vertical>.kt-inside-inner-col>*{margin-top:0;margin-bottom:0}
.tp-step.kb-section-dir-vertical>.kt-inside-inner-col{gap:8px}
.tp-cta>.kt-row-column-wrap>.wp-block-kadence-column>.kt-inside-inner-col{gap:56px}
.tp-cta .kb-section-dir-vertical>.kt-inside-inner-col>p{max-width:640px}
@media (max-width:1024px){
  .tp-cta>.kt-row-column-wrap>.wp-block-kadence-column>.kt-inside-inner-col{gap:40px}
}

/* ---------- Image overlay ----------
   Every photographic image block gets a 10% #6B6B69 wash. SVGs are excluded
   (that catches the logos, which Kadence marks with image-is-svg), as is the
   header logo. The overlay matches each image's corner radius through
   --tp-img-radius, because the radius sits on the <img>, not the figure, and
   an <img> cannot carry a pseudo-element of its own. */
/* The default radius is set on its own, with a single class, so that the
   per-component values below can override it. Keeping it in the rule with
   the :not() chain made it far more specific than those rules, so every
   image was being forced back to square corners - which is what made the
   overlay show at the corners of rounded images. */
.wp-block-kadence-image,
.wp-block-image{--tp-img-radius:0px}
.wp-block-kadence-image:not(.image-is-svg):not(.tp-logo):not(.tp-logo--footer):not(.tp-ab-icon):not(.tp-img--no-overlay),
.wp-block-image:not(.image-is-svg):not(.tp-logo):not(.tp-logo--footer):not(.tp-ab-icon):not(.tp-img--no-overlay){
  position:relative;
}
.wp-block-kadence-image:not(.image-is-svg):not(.tp-logo):not(.tp-logo--footer):not(.tp-ab-icon):not(.tp-img--no-overlay)::after,
.wp-block-image:not(.image-is-svg):not(.tp-logo):not(.tp-logo--footer):not(.tp-ab-icon):not(.tp-img--no-overlay)::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:rgba(107,107,105,.1);
  border-radius:var(--tp-img-radius);
}
/* Icons are exempt: the wash is for photographs, and on an icon tile it
   shows as a grey square behind the rounded shape. Add tp-img--no-overlay
   to any other image block that should not have it. */

/* Utility classes for the builder: add one to an image block when the
   image has rounded corners, so the overlay follows them. Without one the
   overlay is square, which only shows on a rounded image. */
.tp-img--r16{--tp-img-radius:16px}
.tp-img--r20{--tp-img-radius:20px}
.tp-img--r24{--tp-img-radius:24px}
.tp-img--r28{--tp-img-radius:28px}
.tp-img--r32{--tp-img-radius:32px}
.tp-img--round{--tp-img-radius:999px}
.tp-img--top20{--tp-img-radius:20px 20px 0 0}

/* radii, matching the image each figure holds */
.tp-service__img{--tp-img-radius:28px}
.tp-person__photo{--tp-img-radius:20px 20px 0 0}
.tp-resource__img{--tp-img-radius:24px}
@media (max-width:767px){
  .tp-service__img{--tp-img-radius:20px}
}

/* "Read full bio" row on team cards ([tp_team read_more="..."]).
   Pinned to the foot of the card so the links line up across a row even
   when the bios differ in length. */
.tp-team .tp-team__card:has(.tp-team__link) .tp-team__body{flex:1 1 auto;padding-bottom:16px}
.tp-team .tp-team__link{
  margin:auto 0 0;
  /* Bottom padding matters: without it the arrow sits on the card's edge and
     the 28px corner radius clips it. Was an About-only rule. */
  padding:16px 24px 24px;
  border-top:1px solid var(--tp-border);
  font-size:15px;line-height:1.3;
}
.tp-team .tp-team__link a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:600;color:var(--tp-dark-teal);text-decoration:none;transition:color .2s ease;
}
.tp-team .tp-team__link a::after{
  content:"";flex:0 0 32px;width:32px;height:32px;border-radius:999px;
  background:var(--tp-yellow) var(--tp-arrow-ur) center/16px 16px no-repeat;
  transition:transform .2s ease;
}
.tp-team .tp-team__link a:hover{color:var(--tp-teal)}
.tp-team .tp-team__link a:hover::after{transform:rotate(45deg)}
.tp-team .tp-team__link a:focus-visible{outline:2px solid var(--tp-dark-teal);outline-offset:3px;border-radius:4px}

/* The whole card is clickable, not just the "Read full bio" row. The row's
   own anchor is stretched over the card rather than a second link added, so
   there is still one link per person for screen readers and the focus ring
   stays on the visible row. Hovering anywhere on the card drives the row's
   colour and the arrow, so the two stay in sync.
   Trade-off: a stretched link makes the card's text hard to select. */
.tp-team .tp-team__card{position:relative}
.tp-team .tp-team__link a::before{content:"";position:absolute;inset:0;z-index:1}
/* The arrow and the name link sit above the overlay: the arrow so it is not
   dimmed by it, the name so it stays independently clickable with link="true". */
.tp-team .tp-team__link a::after{position:relative;z-index:2}
.tp-team .tp-team__name a{position:relative;z-index:2}
.tp-team .tp-team__card:hover .tp-team__link a{color:var(--tp-teal)}
.tp-team .tp-team__card:hover .tp-team__link a::after{transform:rotate(45deg)}

/* ---------- Single team member bio ----------
   The bio pages carry no stylesheet of their own, so they get base. The body
   copy sits in a Kadence advanced heading, which renders plain paragraphs
   with no spacing between them. Last one excluded so the block does not add
   a trailing gap below itself. */
.tp-team-bio__text p:not(:last-child){margin-bottom:20px}

/* ---------- Location pages ----------
   The parts the builder cannot reach. Everything else on the template is
   builder settings. Lives here because location pages load base,
   header-footer and motion only. */
/* The service lists sit under their own card heading, so the first row's
   divider and its 22px of padding double up with the gap above it. */
.tp-loc-services__card .tp-sublink:first-child{border-top:0;padding-top:0}
/* The wysiwyg fields render plain paragraphs, which inherit the theme's
   32px bottom margin. */
.tp-loc-about__text p{margin:0 0 16px}
.tp-loc-about__text p:last-child{margin-bottom:0}
.tp-loc-about__areas p{margin:0}
/* Kadence's map embed ignores the row's radius, so the corners are clipped
   on the wrapper instead. */
.tp-loc-map__media>.kt-inside-inner-col{overflow:hidden}

/* ---------- Branded Google Maps ----------
   Kadence map blocks carrying .tp-brand-map. The radius works on its own;
   the pin and info window come from assets/js/tp-brand-map.js. */
.tp-brand-map{border-radius:28px;overflow:hidden}
@media (max-width:767px){.tp-brand-map{border-radius:24px}}
.tp-map-iw{font-family:inherit;font-size:15px;line-height:1.5;color:var(--tp-dark-teal);padding:2px 4px}
.tp-map-iw a{color:var(--tp-teal);font-weight:600}

/* ---------- Slider arrows ----------
   Kadence's slider arrows are heavy chevrons. Sliders carrying
   .tp-thin-arrows get the same circled arrow as the services list
   (.tp-sublink): a 1px dark teal ring that fills purple with a white arrow
   on hover. Used on About > Our purpose. */
.tp-thin-arrows .splide__arrow{
  width:40px;height:40px;padding:0;border:0 !important;border-radius:999px;opacity:1;
  background:transparent var(--tp-arrow-r) center/16px 16px no-repeat !important;
  box-shadow:inset 0 0 0 1px var(--tp-dark-teal) !important;
  transition:background-color .2s ease,box-shadow .2s ease;
}
.tp-thin-arrows .splide__arrow svg{display:none}
/* scale, not transform: Splide sets its own transform on these buttons. */
.tp-thin-arrows .splide__arrow--prev{scale:-1 1}
.tp-thin-arrows .splide__arrow:hover{
  background-color:var(--tp-purple) !important;
  background-image:var(--tp-arrow-r-white) !important;
  box-shadow:inset 0 0 0 1px var(--tp-purple) !important;
}

/* ---------- Card link row (dark cards) ----------
   Text left, yellow arrow right, with a divider above: the team cards'
   "Read full bio" row restated for a dark background. The class goes on a
   Kadence Advanced Text block holding one link.
   margin-top:auto pins it to the foot of the card so the links line up
   across a row of unequal cards. */
.tp-card-link{
  margin-top:auto !important;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:15px;line-height:1.3;
}
.tp-card-link a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:600;color:#fff;text-decoration:none;transition:color .2s ease;
}
.tp-card-link a::after{
  content:"";flex:0 0 32px;width:32px;height:32px;border-radius:999px;
  /* Right-facing arrow, not up-right: these links go to another page in the
     same section rather than opening something new, and the hover nudge
     (translateX) reads as a continuation of the same direction. */
  background:var(--tp-yellow) var(--tp-arrow-r) center/16px 16px no-repeat;
  transition:transform .2s ease;
}
.tp-card-link a:hover{color:var(--tp-yellow)}
.tp-card-link a:hover::after{transform:translateX(4px)}

/* Matt's hero crop. His headshot is a tall portrait (306x330) in a wide
   frame (559x384), so a centred cover crop takes an even slice off the top
   and bottom and cuts into his head. Pulled up to 15% so the trim falls
   mostly below him. Keyed to the post ID because the featured-image block
   has no focal-point setting and this is specific to one photo; it comes
   out when the headshot is replaced with a larger original. */
.postid-250503 .tp-team-hero__img img{object-position:50% 15%}

/* INTERIM - delete once Element 250685 renders [tp_services] instead of the
   six fixed .tp-team-service slots. Until that swap the bio template still
   prints those rows, so removing this now would strip their arrows. It
   borrows the .tp-sublink treatment below; the row already holds a Kadence
   icon block in the same spot, hidden with visibility so the flex row keeps
   its spacing. */
.tp-team-service__arrow{visibility:hidden}
.tp-team-service{position:relative}
.tp-team-service::after{
  content:"";position:absolute;right:0;top:50%;
  width:32px;height:32px;margin-top:-16px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--tp-dark-teal);
  background:transparent var(--tp-arrow-r) center/16px 16px no-repeat;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tp-team-service:hover::after{
  transform:translateX(4px);
  background-color:var(--tp-purple);
  background-image:var(--tp-arrow-r-white);
  box-shadow:inset 0 0 0 1px var(--tp-purple);
}

/* Decorative arcs, bottom-right of a section. Same treatment as the
   homepage's Reading & Dyslexia block, stepped down a size at each
   breakpoint (200/140/110 there, 160/125/92 here) so it reads as an accent
   on the narrower team-profile column rather than a feature. */
.tp-arcs{position:relative;overflow:hidden}
.tp-arcs::after{
  content:"";position:absolute;right:0;bottom:0;width:160px;height:218px;pointer-events:none;
  background:url("/wp-content/uploads/2026/10/tp-arcs.svg") right bottom/contain no-repeat;
}
@media (max-width:1024px){.tp-arcs::after{width:125px;height:171px}}
@media (max-width:767px){.tp-arcs::after{width:92px;height:126px}}

/* ---------- Service list rows ----------
   Shared by the homepage's hand-built rows and by [tp_services], which
   prints the same classes. Moved here from tripoint-home.css so bios and
   overview pages get the identical row, arrow and hover.
   The 480px description measure stays in tripoint-home.css: the bio layout
   runs the text wider. */
.tp-sublinks{width:100%;margin-top:0}
.tp-sublinks>.kt-row-column-wrap{gap:0 !important;padding:0}
.tp-sublink{
  position:relative;border-top:1px solid var(--tp-border);
  padding:22px 56px 22px 0;transition:background-color .2s ease;
}
.tp-sublink:last-child{margin-bottom:0}
.tp-sublink::after{
  content:"";position:absolute;right:0;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--tp-dark-teal);
  background-color:transparent;
  background-image:var(--tp-arrow-r);background-position:center;background-size:16px 16px;background-repeat:no-repeat;
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
/* Hover fills the arrow solid purple, as the dropdown link arrows do. */
.tp-sublink:hover::after{
  transform:translateX(4px);
  background-color:var(--tp-purple);
  background-image:var(--tp-arrow-r-white);
  box-shadow:inset 0 0 0 1px var(--tp-purple);
}
.tp-sublinks+.tp-btns{margin-top:0}

/* The shortcode's own container and typography. The hand-built rows get
   these from Kadence's generated block CSS; the printed ones need them
   stated, and the values are measured off the homepage: 20/1.25 semibold
   dark teal over 15/1.4 body grey, 6px apart. */
.tp-sublinks--list{
  display:grid;
  grid-template-columns:repeat(var(--tp-sublinks-columns,1),minmax(0,1fr));
  column-gap:40px;
}
.tp-sublinks--list .tp-sublink{display:flex;flex-direction:column;gap:6px}
/* Scoped to the list: unscoped, Kadence's .single-content p and heading
   rules outrank these and put a 10px/32px bottom margin back on. */
.tp-sublinks--list .tp-sublink__title{margin:0;font-size:20px;line-height:1.25;font-weight:600;color:var(--tp-dark-teal)}
.tp-sublinks--list .tp-sublink__desc{margin:0;font-size:15px;line-height:1.4;font-weight:400;color:var(--tp-body)}
/* Stretched link: the whole row is clickable, as Kadence's section link
   overlay does on the homepage. The focus ring goes on the row, since the
   anchor itself has no visible box of its own. */
.tp-sublink__link{position:absolute;inset:0}
/* :has(:focus-visible), not :focus-within - the latter matches a mouse
   click as well, which drew a dark teal ring every time a row was clicked.
   The ring is for keyboard navigation only. */
.tp-sublink:has(.tp-sublink__link:focus-visible){outline:2px solid var(--tp-dark-teal);outline-offset:4px;border-radius:4px}
.tp-sublink__link:focus-visible{outline:none}

/* ---------- Ticket order page ----------
   Event Tickets ships its own font stack and heading colours, which arrive
   with the plugin's stylesheet and ignore the site's. These put the page
   back on the site's type and palette.

   In tripoint-base.css rather than tripoint-events.css because the order
   page is one of Event Tickets' own routes: it is not an event, so the
   events file's conditional never fires there. Everything here is scoped
   to .tp-order, so it costs other pages nothing. */
.tp-order .tribe-common :is(h1,h2,h3,h4,p,a,div,span,td,th,li){font-family:inherit}
.tp-order .tribe-common .tribe-common-h2{color:var(--global-palette2);font-weight:500}
.tp-order .tribe-common a{color:var(--global-palette1)}

/* ---------- Icon cards: icon above the text on phones ----------
   The head is an icon beside a text column. At phone width the text column
   is squeezed to a few words per line, so the icon moves above it and the
   row becomes a stack. */
@media (max-width:767px){
  .tp-card-head{
    flex-direction:column !important;align-items:flex-start !important;gap:16px !important;
  }
  .tp-card-head>.tp-card-body{margin-left:0 !important}
}

/* ---------- Events: nothing scheduled ----------
   Printed by [tp_events] in place of the rows, and sized to sit under a
   section heading without looking like a stray sentence. The events
   archive says the same thing through TEC's own notice, which that
   plugin styles. */
.tp-events-empty{
  margin:0;padding:24px 28px;
  border:1px solid var(--tp-border);border-radius:20px;
  background:var(--global-palette9);
  color:var(--global-palette4);font-size:16px;line-height:1.5;
}

/* ---------- reCAPTCHA ----------
   The floating badge is hidden. Google permits that only where the
   attribution it carries is shown instead, which inc/forms.php prints
   under every form - the two have to stay together.

   visibility rather than display:none: the badge is also the element the
   reCAPTCHA script measures, and removing it from layout has been known
   to break the challenge on some builds. */
.grecaptcha-badge{
  visibility:hidden;
  /* Collapsed as well as hidden. visibility alone leaves the badge's box
     where it is, which pushed the scroll-to-top button off its usual
     place. !important because Google writes the width and height inline.
     Not display:none, and not moved off-screen: the element has to stay
     rendered where the script put it. The challenge popup, when one is
     needed, is a separate iframe and is unaffected. */
  width:0 !important;height:0 !important;
  margin:0 !important;padding:0 !important;
  overflow:hidden;
}
/* Sits above the submit row, so the spacing is below it. The small top
   margin keeps it off the last field rather than reading as part of it. */
.tp-form-recaptcha{
  margin:8px 0 16px;
  font-size:13px;line-height:1.5;color:var(--global-palette4);
}
.tp-form-recaptcha a{color:inherit;text-decoration:underline}
.tp-form-recaptcha a:hover{color:var(--global-palette1)}