/* ==========================================================================
   Site footer v2 (inc/footer-v2.php, template-parts/footer-v2.php). Loaded async on every page (never above the fold).
   Everything is scoped under .ssf so the old footer styles in common.css and the page templates never collide.
   Top band left = the short form card (footer copy of Gravity Form 3, inc/footer-v2.php ss_ftr_form_id()).
   The card itself is template-parts/cta-form-card.php (shared with the in-page growth CTA, .ssfc variant below).
   ========================================================================== */
.site-footer.ssf-on {
  margin-bottom: 0;
  background: var(--ss-navy-deep);
}

@media (max-width: 767.98px) {
  .site-footer.ssf-on {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); /* room for the fixed Call / Book-a-meeting bar (footer.php .ssmb: 68px + safe area) */
  }
}

.ssf {
  --ssf-navy: var(--ss-navy);
  --ssf-dark: var(--ss-navy-deep);
  --ssf-ink: var(--ss-navy-deep);
  --ssf-gold: var(--ss-gold);
  --ssf-mist: var(--ss-mist);
  --ssf-line: rgba(255, 255, 255, .12);
  /* type tiers (Mike 2026-09-29): headings gold 13/700 caps (.ssf-col__h; counter labels white 14/600), links off-white, tertiary muted grey;
     on the #001b2e navy: #dce4ec = 14.6:1, #a7b6c6 = 9.3:1 */
  --ssf-link: #dce4ec;
  --ssf-muted: var(--ss-mist, #a7b6c6); /* tertiary text: dates, helper lines, review sublines, bottom bar */
  position: relative;
  overflow: hidden;
  background: var(--ssf-dark);
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.ssf *,
.ssf *:before,
.ssf *:after {
  box-sizing: border-box;
}

.ssf a {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}

.ssf a:hover {
  color: var(--ssf-gold);
  text-decoration: none;
}

.ssf a:focus-visible,
.ssf button:focus-visible {
  outline: 2px solid var(--ssf-gold);
  outline-offset: 2px;
}

.ssf ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssf p,
.ssf figure,
.ssf blockquote {
  margin: 0;
}

.ssf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ssf-in {
  max-width: 1312px;
  margin: 0 auto;
  padding-inline: 64px;
}

/* ---------- 1. form + reviews band ---------- */
.ssf-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  background: var(--ssf-dark); /* the two halves' fractional widths left a hairline seam down the middle */
  border-top: 1px solid rgba(var(--ss-gold-rgb),.35);
}

.ssf-split__l,
.ssf-split__r {
  position: relative;
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
}

.ssf-split__l {
  background: none; /* the navy sits on .ssf-split: a half painting its own background covered the other card's shadow at the seam and left a light line */
  padding: 48px 56px 52px max(64px, calc((100vw - 1312px) / 2 + 64px));
}

/* Option C (Mike + Matt 2026-09-29, footer artifact v5): no lighter panel and no centre divider - one navy field; the
   review card lifts itself (edge + form-card shadow + faint gold halo). Both halves keep equal 56px inner gutters. */
.ssf-split__r {
  background: none;
  padding: 48px max(64px, calc((100vw - 1312px) / 2 + 64px)) 52px 56px;
}

.ssf-split--solo {
  grid-template-columns: 1fr;
}

.ssf-split--solo .ssf-split__l {
  border-right: 0;
  padding-right: max(64px, calc((100vw - 1312px) / 2 + 64px));
}

.ssf .ssf-h {
  align-self: end;
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* short form card (Footer CTA options mock, Option 1): white card, four fields, gold submit; call / book line under it.
   Gravity Forms markup (gravity-theme); selectors carry .gform_wrapper to outrank GF's own sheet and the legacy
   .gform_wrapper rules in common.css. Motion: colour / border / shadow only, <= .15s, no entry animation. */
.ssf-body {
  margin-top: 50px;
  min-width: 0;
}

.ssf-form {
  padding: 26px 26px 20px;
  border-radius: 18px;
  background: #fff;
  color: var(--ss-ink);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.ssf-form .gform_wrapper {
  display: block !important;
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .gform_heading,
.ssf-form .gform_wrapper .gform_validation_container,
.ssf-form .gform_wrapper .gfield--type-honeypot,
.ssf-form .gform_wrapper .gfield.gform_hidden,
.ssf-form .gform_wrapper .gfield:empty {
  display: none !important;
}

.ssf-form .gform_wrapper .gform_body,
.ssf-form .gform_wrapper form {
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .gform_fields > .gfield {
  grid-column: auto;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .gform_fields > .gfield:before,
.ssf-form .gform_wrapper .gform_fields > .gfield:after {
  content: none !important;
  display: none !important;
}

/* labels stay for screen readers; the placeholders carry the visible text (as in the mock) */
.ssf-form .gform_wrapper .gfield > .gfield_label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ssf-form .gform_wrapper .ginput_container {
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .ginput_container input:not([type=hidden]),
.ssf-form .gform_wrapper .ginput_container select {
  display: block;
  width: 100%;
  max-width: none;
  height: 50px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--ss-line-strong);
  border-radius: 12px;
  background-color: #fff;
  color: var(--ss-ink);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.ssf-form .gform_wrapper .ginput_container input::placeholder {
  color: var(--ss-slate);
  opacity: 1;
}

.ssf-form .gform_wrapper .ginput_container select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234a5866' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* the select reads as a placeholder until a service is picked */
.ssf-form .gform_wrapper .ginput_container select:has(option.gf_placeholder:checked) {
  color: var(--ss-slate);
}

.ssf-form .gform_wrapper .ginput_container select option {
  color: var(--ss-ink);
}

.ssf-form .gform_wrapper .ginput_container input:focus,
.ssf-form .gform_wrapper .ginput_container select:focus {
  border-color: var(--ss-gold-deep);
  box-shadow: 0 0 0 3px rgba(var(--ss-gold-rgb), .25);
}

.ssf-form .gform_wrapper .gform_footer {
  position: relative;
  display: block;
  margin: 14px 0 0;
  padding: 0;
}

.ssf-form .gform_wrapper .gform_footer:before,
.ssf-form .gform_wrapper .gform_footer:after {
  content: none !important;
  display: none !important;
}

.ssf-form .gform_wrapper .gform_footer .gform_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-gold-grad);
  color: var(--ss-navy-deep);
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 10px 24px rgba(var(--ss-gold-end-rgb), .25);
  cursor: pointer;
  transition: filter .15s;
}

.ssf-form .gform_wrapper .gform_footer .gform_button:before,
.ssf-form .gform_wrapper .gform_footer .gform_button:after {
  content: none !important;
  display: none !important;
}

/* the theme's old Gravity Forms rules put an arrow block on the button (same fix as .pav2-form__card) */
.ssf-form .gform_wrapper .gform_footer .gform_button {
  background-image: var(--ss-gold-grad) !important;
  height: 54px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.ssf-form .gform_wrapper .gform_footer .gform_button:hover {
  filter: brightness(1.06);
}

.ssf-form .gform_wrapper .gform_footer .gform_button:focus-visible {
  outline: 2px solid var(--ss-navy-deep);
  outline-offset: 3px;
}

.ssf-form .gform_wrapper .gform_ajax_spinner,
.ssf-form .gform_wrapper .gform-loader {
  position: absolute;
  top: 50%;
  right: 18px;
  left: auto;
  width: 22px;
  height: 22px;
  margin: -11px 0 0;
}

/* services multi-select (footer-v2.js): GF checkbox field 6 shown as a dropdown field that opens a checklist panel.
   Button = the 50px input look + caret; panel = white card of checkboxes; fade/slide .12s; no JS = plain checklist. */
.ssf-form .gform_wrapper .gfield.ssf-gf__svc {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ssf-form .ssf-ms__btn {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 12px 40px 12px 16px;
  border: 1.5px solid var(--ss-line-strong);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234a5866' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  color: var(--ss-slate);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.ssf-form .ssf-gf__svc.has-value .ssf-ms__btn {
  color: var(--ss-ink);
}

.ssf-form .ssf-ms__btn:focus,
.ssf-form .ssf-gf__svc.is-open .ssf-ms__btn {
  border-color: var(--ss-gold-deep);
  box-shadow: 0 0 0 3px rgba(var(--ss-gold-rgb), .25);
  outline: 0;
}

.ssf-form .ssf-gf__svc.is-open .ssf-ms__btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' stroke='%234a5866' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ssf-ms__val {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ssf-form .gform_wrapper .ssf-gf__svc .ginput_container_checkbox.ssf-ms__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: max(100%, 280px);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 20, 40, .22);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s, transform .12s, visibility 0s linear .12s;
}

.ssf-form .gform_wrapper .ssf-gf__svc.is-open .ssf-ms__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .12s, transform .12s, visibility 0s;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gfield_checkbox {
  display: block;
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice:before,
.ssf-form .gform_wrapper .ssf-gf__svc .gchoice:after,
.ssf-form .gform_wrapper .ssf-gf__svc .gchoice label:after {
  content: none !important;
  display: none !important;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice input {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  opacity: 0;
  cursor: pointer;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  position: static !important;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: none;
  color: var(--ss-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color .12s;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice label:before {
  content: "" !important;
  display: block !important;
  flex: none;
  position: static !important;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--ss-line-strong);
  border-radius: 5px;
  background: #fff center / 11px 9px no-repeat;
  transform: none;
  transition: background-color .12s, border-color .12s;
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice label:hover,
.ssf-form .gform_wrapper .ssf-gf__svc .gchoice input:focus-visible + label {
  background: var(--ss-ground);
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice input:focus-visible + label {
  box-shadow: inset 0 0 0 2px rgba(var(--ss-gold-rgb), .6);
}

.ssf-form .gform_wrapper .ssf-gf__svc .gchoice input:checked + label:before {
  border-color: var(--ss-gold-deep);
  background-color: var(--ss-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23001b2e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* validation */
.ssf-form .gform_wrapper .gform_validation_errors {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(var(--ss-bad-rgb), .08);
  box-shadow: none;
}

.ssf-form .gform_wrapper .gform_validation_errors > h2 {
  margin: 0;
  color: var(--ss-bad);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.ssf-form .gform_wrapper .gform_validation_errors > h2 .gform-icon {
  display: none;
}

.ssf-form .gform_wrapper .gfield_error input,
.ssf-form .gform_wrapper .gfield_error select {
  border-color: var(--ss-bad) !important;
}

.ssf-form .gform_wrapper .gfield_validation_message,
.ssf-form .gform_wrapper .validation_message {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ss-bad);
  font-size: 12.5px;
  line-height: 1.3;
}

/* after submit (ajax confirmation, inc/footer-v2.php gform_confirmation filter) */
.ssf-form .ssf-gf-done {
  padding: 6px 0 4px;
  color: var(--ss-ink-2);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.ssf-form .ssf-gf-done p {
  margin: 0;
}

.ssf-form .ssf-gf-done .ssf-gf-done__t {
  margin: 0 0 6px;
  color: var(--ss-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.ssf-form:has(.ssf-gf-done) .ssf-form__fine {
  display: none;
}

.ssf .ssf-form__fine {
  margin: 10px 0 0;
  color: var(--ss-ink-3);
  font-size: 13px;
  text-align: center;
}

/* call / book: two equal outline pills spanning the card width (same layout at every width) */
.ssf .ssf-alt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.ssf .ssf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.ssf .ssf-pill svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.ssf .ssf-pill:hover,
.ssf .ssf-pill:focus-visible {
  border-color: var(--ssf-gold);
  color: var(--ssf-gold);
}

/* ---------- meeting modals: shell polish (Mike 2026-09-28) ----------
   #smartsites-meeting = the site-wide Bootstrap modal (functions.php, HubSpot "Let's meet" email step, then the
   calendar); opened by the footer "Book a meeting" pill, the header / sidebar / mobile "Meet" buttons.
   A round white close button centred on the panel's top-right corner, 24px corners, no scrollbar column in
   the frame (the HubSpot iframe carries the content; HubSpot resizes it with {height} postMessages - see
   footer-v2.js, which marks the container .is-sized once it does). Fade only, <= .15s. */
#smartsites-meeting.meeting-modal {
  padding: 0 !important;
}

#smartsites-meeting.fade {
  transition: opacity .15s linear;
}

#smartsites-meeting.fade .modal-dialog,
#smartsites-meeting.show .modal-dialog {
  transform: none;
  transition: none;
}

#smartsites-meeting .modal-dialog {
  width: auto;
  max-width: 400px; /* HubSpot's step-1 card is 400px wide: the panel is exactly the card, no white margins */
  min-height: calc(100% - 64px);
  margin: 32px auto;
}

#smartsites-meeting .modal-content {
  position: relative;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

#smartsites-meeting .iframe-wrapper {
  display: block;
  overflow: hidden;
  height: auto !important;
  border-radius: 24px;
}

#smartsites-meeting .meetings-iframe-container {
  display: block;
  flex: none;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

#smartsites-meeting .meetings-iframe-container iframe {
  display: block;
  width: 100%;
  vertical-align: top;
}

/* step 1 ("Let's meet", email) sends no height, so HubSpot's default 756px would leave ~250px of white under its
   card: clamp to the card (HubSpot's navy frame = a thin 20px ring inside our rounded panel) until HubSpot reports
   a height (its calendar step does), then use HubSpot's height. If a later step never reported one, the iframe
   document still scrolls inside this height. */
#smartsites-meeting .meetings-iframe-container:not(.is-sized) iframe {
  height: 500px !important;
  min-height: 0 !important;
}

/* Reserve step 1's height from the first paint (Mike 2026-09-29: the X rendered low, then jumped up when the frame
   arrived). The embed lives in a lazy <template> that only unwraps once the modal is visible, so the panel used to open
   0px tall, centred, and grow. Same heights as the step-1 clamp above/below; once HubSpot reports its own height
   (.is-sized, calendar step) the reserve steps aside. A light spinner fills the space until the iframe fires load
   (functions.php adds .is-loaded), then fades in .15s. */
#smartsites-meeting .iframe-wrapper {
  position: relative;
  min-height: 500px;
}

#smartsites-meeting .iframe-wrapper:has(.is-sized) {
  min-height: 0;
}

#smartsites-meeting .iframe-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid #dce4ec;
  border-top-color: var(--ss-gold-deep, #d8912a);
  border-radius: 50%;
  pointer-events: none;
  animation: ssMeetSpin .8s linear infinite;
  transition: opacity .15s ease;
}

#smartsites-meeting .iframe-wrapper.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes ssMeetSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #smartsites-meeting .iframe-wrapper::before { animation: none; transition: none; }
}

/* calendar step: room for HubSpot's two-column layout */
@media (min-width: 992px) {
  #smartsites-meeting .modal-dialog:has(.is-sized) {
    max-width: 880px;
  }
}

/* close: 36px white disc, navy x, centre exactly on the panel corner */
#smartsites-meeting .close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ss-navy-deep);
  font: 400 26px/1 Arial, sans-serif;
  text-shadow: none;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

#smartsites-meeting .close span {
  position: static;
  top: auto;
  display: block;
  margin-top: -2px;
  line-height: 1;
}

#smartsites-meeting .close:hover {
  background: var(--ss-gold);
  color: var(--ss-navy-deep);
  opacity: 1 !important;
}

/* focus lands on the close button when the modal opens: a ring, not the hover fill */
#smartsites-meeting .close:focus {
  outline: 0;
}

#smartsites-meeting .close:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--ss-gold-rgb), .6), 0 4px 14px rgba(0, 0, 0, .3);
}


@media (max-width: 575.98px) {
  #smartsites-meeting .modal-dialog {
    max-width: 432px; /* 400 + gutters */
    min-height: calc(100% - 32px);
    margin: 16px auto;
    padding: 0 16px;
  }

  /* HubSpot's card gets shorter as it narrows (its illustration scales): 467px at 328, 480 at 358, 500 at 400 */
  #smartsites-meeting .meetings-iframe-container:not(.is-sized) iframe {
    height: min(500px, calc(45vw + 305px)) !important;
  }

  #smartsites-meeting .iframe-wrapper:not(:has(.is-sized)) {
    min-height: min(500px, calc(45vw + 305px));
  }

  #smartsites-meeting .close {
    top: -16px;
    right: -16px;
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
}

/* review card: fixed size (every slide stacked in one grid cell), photo column + quote above a full-width control row.
   Cut-outs are pre-normalised to one 400x620 canvas (head top 9% down, face centred, figure running off the bottom -
   cs-work/footer/impl/make_cutouts2.py), so object-fit: cover from the top puts every head at the same spot. */
.ssf-rv {
  touch-action: pan-y pinch-zoom; /* swipe left/right = next/prev slide, vertical = page scroll, pinch still zooms */
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto; /* the card matches the form card's height; extra height goes to the photo/quote row */
  margin-top: 50px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 22px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--ss-gold-rgb), .1), 0 0 70px rgba(var(--ss-gold-rgb), .06);
}

.ssf-rv__slides {
  display: grid;
}

.ssf-rv__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  min-height: 280px; /* content-driven: the tallest quote sets the card height, every slide stretches to it */
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility 0s .2s; /* ss-reveal policy: slider fades <= 200 ms */
}

.ssf-rv__slide.is-on {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s;
}

.ssf-rv__photo {
  position: relative;
  overflow: hidden;
}

/* absolutely placed so the photo never sets the row height: it fills the column top to bottom, flush with the
   control row, the figure bleeding off the bottom edge */
.ssf-rv__photo img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
}

.ssf-rv__body {
  align-self: center;
  min-height: 0;
  padding: 24px 30px 24px 0;
}

.ssf-rv__stars {
  color: var(--ssf-gold);
  font-size: 15px;
  letter-spacing: 2px;
}

.ssf-rv__q {
  display: -webkit-box;
  margin: 8px 0 14px;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: #fff;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
}

.ssf-rv__who {
  color: var(--ssf-muted);
  font-size: 14px;
  line-height: 1.35;
}

.ssf-rv__who b {
  display: block;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
}

/* full-width control row under the photo and the quote */
.ssf-rv__ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px 12px 24px;
  border-top: 1px solid var(--ssf-line);
}

.ssf-rv__arrows {
  display: flex;
  gap: 8px;
}

.ssf-rv__arrows button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ssf-line);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.ssf-rv__arrows button:hover {
  border-color: var(--ssf-gold);
  color: var(--ssf-gold);
}

.ssf-rv__dots {
  display: flex;
  gap: 6px;
}

.ssf-rv__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background-color .3s;
}

.ssf-rv__dots i.is-on {
  background: var(--ssf-gold); /* filled circle, not a pill (Mike 2026-09-27) */
}

/* ---------- 2. live counters ---------- */
.ssf-links {
  padding-block: 56px 44px;
}

.ssf-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  align-items: end;
  margin-bottom: 44px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ssf-line);
}

.ssf-stat {
  min-width: 0;
  padding: 0 36px; /* no dividers between the three figures (Matt 2026-09-29) */
}

.ssf-stat:first-child {
  padding-left: 0;
}

.ssf-stat:last-child {
  padding-right: 0;
}

.ssf .ssf-stat__l {
  margin: 0 0 6px;
  color: #fff; /* stays white while the other labels went gold (Mike 2026-09-29, footer v11 option A) */
  font-size: 14px; /* a bit bigger and less bold than the column labels */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ssf .ssf-stat__n {
  position: relative;
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.ssf-odo {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
}

.ssf-odo .dig {
  display: inline-block;
  height: 1.08em;
  overflow: hidden;
  vertical-align: bottom;
}

.ssf-odo .strip {
  display: flex;
  flex-direction: column;
  transition: transform .55s cubic-bezier(.22, .8, .26, 1);
}

.ssf-odo .strip span {
  display: block;
  height: 1.08em;
  line-height: 1.08em;
  text-align: center;
}

.ssf-odo .sep,
.ssf-odo .pre {
  display: inline-block;
  line-height: 1.08em;
}

.ssf-odo .pre {
  margin-right: .04em;
}

/* ---------- 3. link columns ---------- */
.ssf-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

/* tier 1 = every footer label: column / group headings (also the phone accordion summaries), Latest Insights, the
   counter labels (.ssf-stat__l) */
.ssf .ssf-col__h {
  margin: 0 0 14px;
  color: var(--ssf-gold); /* footer v11 option A (Mike 2026-09-29): column / group / insights / cities labels in gold; counter labels stay white */
  font-size: 13px; /* Mike 2026-09-29: a tad bigger and less bold than the 12/800 first cut */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ssf-nav ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.35;
}

/* tier 2 = the column links: off-white at rest, white + underline on hover / focus. */
.ssf .ssf-grp > ul a {
  color: var(--ssf-link);
}

.ssf .ssf-grp > ul a:hover,
.ssf .ssf-grp > ul a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* groups: <details open>. Desktop = a plain column group whose heading links its hub page (Mike 2026-09-29: bold, no
   underline at rest, underline on hover); footer-v2.js blocks toggling from 768px up. Phone = accordion (see phone). */
.ssf-grp > summary {
  display: block;
  list-style: none;
  cursor: default;
}

.ssf-grp > summary::-webkit-details-marker {
  display: none;
}

.ssf .ssf-grp > summary > a:hover,
.ssf .ssf-grp > summary > a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.ssf-grp__t {
  display: none;
}

.ssf .ssf-grp__t--on {
  display: inline;
}

.ssf-col > * + * {
  margin-top: 26px;
}

/* Newsletter = Gravity Form 50 (inc/footer-v2.php ss_ftr_newsletter), email only; card layout under .ssf-ins__card */
.ssf .ssf-nl .gform_wrapper {
  margin: 0;
}

/* two lines (Mike 2026-09-29): full-width email field, then a full-width gold Subscribe button. GF's gravity-theme
   rules are neutralised here (frame, paddings, grid, spinner) so nothing overlaps. */
.ssf .ssf-nl form {
  display: block;
  margin: 0;
  padding: 0;
}

.ssf .ssf-nl .gform-body,
.ssf .ssf-nl .gform_body {
  width: 100%;
  margin: 0;
  padding: 0;
}

.ssf .ssf-nl .gform_fields {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}

.ssf .ssf-nl .gfield {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ssf .ssf-nl .gfield:not(.gfield--type-email):not(.ssf-nl-name),
.ssf .ssf-nl .gfield_label,
.ssf .ssf-nl .gfield_required,
.ssf .ssf-nl .gform_validation_errors,
.ssf .ssf-nl .gform_required_legend,
.ssf .ssf-nl .gform_ajax_spinner {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.ssf .ssf-nl .ginput_container {
  margin: 0 !important;
  padding: 0 !important;
}

.ssf .ssf-nl .ssf-nl-name {
  margin-bottom: 10px !important;
}

.ssf .ssf-nl input[type=email],
.ssf .ssf-nl .ssf-nl-name input {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  outline: 0;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  color: #fff !important;
  font: 14px/1.2 "Proxima Nova", Figtree, "Helvetica Neue", Arial, sans-serif !important;
}

.ssf .ssf-nl input[type=email]:focus,
.ssf .ssf-nl .ssf-nl-name input:focus {
  border-color: var(--ssf-gold) !important;
}

.ssf .ssf-nl input[type=email]::placeholder,
.ssf .ssf-nl .ssf-nl-name input::placeholder {
  color: var(--ssf-mist);
  opacity: 1;
}

.ssf .ssf-nl .gform_footer,
.ssf .ssf-nl .gform-footer {
  display: block !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}

.ssf .ssf-nl .gform_button,
.ssf .ssf-nl__go {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: static !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 44px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(100deg, var(--ss-gold, #f5b915) -10%, var(--ss-gold-deep, #e0a100) 60%, var(--ss-gold-end, #d98f00) 125%) !important;
  box-shadow: none !important;
  color: var(--ss-navy-deep, #001b2e) !important;
  font: 700 14px/1 "Proxima Nova", Figtree, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

/* common-v2.css gives .gform_footer a divider (:before) and GF buttons an icomoon arrow (:after) - not here */
.ssf .ssf-nl .gform_footer::before,
.ssf .ssf-nl .gform_footer::after,
.ssf .ssf-nl .gform_button::before,
.ssf .ssf-nl .gform_button::after,
.ssf .ssf-nl__go::before,
.ssf .ssf-nl__go::after {
  content: none !important;
  display: none !important;
}

.ssf .ssf-nl .gform_button:hover,
.ssf .ssf-nl__go:hover {
  filter: brightness(1.05);
}

.ssf .ssf-nl .gfield_validation_message,
.ssf .ssf-nl .validation_message {
  position: static;
  margin: 6px 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #ffb3b5;
  font-size: 12.5px;
}

.ssf .ssf-nl .gform_confirmation_message {
  color: #fff;
  font-size: 14px;
}

/* ---------- Latest Insights row under the columns (Mike 2026-09-29, footer mock v9 variant A; replaced the blog lane
   + Subscribe strip): the 3 newest posts, each one link with the author's face, name and date over the title (two
   thirds), and the monthly newsletter card, GF 50 email + Subscribe side by side (one third). ---------- */
.ssf-ins {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--ssf-line);
}

.ssf-ins--solo {
  grid-template-columns: minmax(0, 1fr);
}

.ssf-ins--solo .ssf-ins__r {
  max-width: 480px;
}

.ssf-ins__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ssf .ssf-ins__head .ssf-col__h {
  margin: 0;
}

.ssf-ins__posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssf .ssf-ins__post > a {
  display: block;
  color: #fff;
}

.ssf-ins__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.3;
}

.ssf .ssf-ins__av {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--ssf-navy);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}

.ssf .ssf-ins__av--mark {
  padding: 6px;
  object-fit: contain;
}

.ssf-ins__by {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ssf-ins__date {
  flex: none;
  color: var(--ssf-muted);
  white-space: nowrap;
}

.ssf-ins__t {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  transition: color .15s;
}

.ssf .ssf-ins__post > a:hover .ssf-ins__t,
.ssf .ssf-ins__post > a:focus-visible .ssf-ins__t {
  color: var(--ssf-gold);
}

/* newsletter card: one email field + gold Subscribe pill on one line (stacks below 380px) */
.ssf .ssf-ins__card {
  padding: 26px 26px 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(var(--ss-navy-rgb, 6, 48, 79), .55);
}

.ssf .ssf-ins__ch {
  margin: 0 0 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 700; /* Mike 2026-09-29: a bit less bold */
  line-height: 1.3;
}

.ssf .ssf-ins__cs {
  margin: 0 0 16px;
  color: var(--ssf-muted);
  font-size: 14px;
  line-height: 1.4;
}

.ssf .ssf-ins__card form {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
}

.ssf .ssf-ins__card .gform-body,
.ssf .ssf-ins__card .gform_body {
  flex: 1;
  min-width: 0;
}

.ssf .ssf-ins__card .gform_footer,
.ssf .ssf-ins__card .gform-footer {
  flex: none;
  margin: 0 !important;
}

.ssf .ssf-ins__card .gform_button {
  width: auto !important;
  padding: 0 24px !important;
}

.ssf .ssf-ins__card .ssf-nl__go {
  width: auto !important;
  display: inline-flex !important;
  padding: 0 24px !important;
}

@media (max-width: 379.98px) {
  .ssf .ssf-ins__card form {
    display: block !important;
  }

  .ssf .ssf-ins__card .gform_footer,
  .ssf .ssf-ins__card .gform-footer {
    margin-top: 10px !important;
  }

  .ssf .ssf-ins__card .gform_button {
    width: 100% !important;
  }
}

/* ---------- cities line under Latest Insights (footer v10): the label links the /locations/ hub, then every
   published city page (ss_ftr_cities()) at 13px, one line from 1200px up, wrapping below ---------- */
.ssf-cities {
  display: flex;
  align-items: baseline;
  gap: 8px 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ssf-line);
}

.ssf .ssf-cities__h {
  flex: none;
  margin: 0;
  white-space: nowrap;
}

.ssf .ssf-cities__h:hover,
.ssf .ssf-cities__h:focus-visible,
.ssf .ssf-cities__list a:hover,
.ssf .ssf-cities__list a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.ssf-cities__list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.35;
}

.ssf .ssf-cities__list a {
  color: var(--ssf-link);
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .ssf-cities__list {
    justify-content: space-between;
    gap: 8px 12px;
  }
}

/* ---------- 4. badges: mono at rest, the badge's own colours on hover or keyboard focus (Mike: "like the individual
   case study page"; no tile behind it).
   Every badge is a fixed box sized from its art's aspect ratio (--ar, set inline by footer-v2.php), so the box IS the
   art: nothing resizes when an image loads or swaps, and hover only fires on the badge itself, never on the gaps or
   on transparent padding. Both layers fill that box exactly (absolute, object-fit: contain) and load together, so a
   hover never fetches anything. The swap is one 150 ms opacity crossfade: no transform, shadow, tile, li-opacity
   fade or delayed visibility snap (the old stacked-white double exposure + snap was the "buggy" flash).
   The colour layer is footer-only on-navy art (assets/img/footer-badges/, map in ss_ftr_badge_art()): partners =
   the mono file with its brand accents coloured, awards = the colour art with the white/cream plate removed and the
   dark ink turned white, so the two layers register pixel for pixel. BBB / Amazon's official reversed art is all
   white: mono only, it brightens. ---------- */
.ssf-badges {
  padding-bottom: 44px;
}

.ssf-badges .ssf-in {
  padding-top: 40px;
  border-top: 1px solid var(--ssf-line);
}

.ssf-badges__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 26px;
}

/* partners share one cap height; awards are contained in a 72x64 box (their art runs from 2.1:1 to 1:1.08) */
.ssf-bd {
  --ssf-bd-h: 34px;
  --ssf-aw-w: 72px;
  --ssf-aw-h: 64px;
  position: relative;
  flex: none;
  width: calc(var(--ssf-bd-h) * var(--ar, 2));
  height: var(--ssf-bd-h);
  line-height: 0;
}

.ssf-bd--award {
  width: min(var(--ssf-aw-w), calc(var(--ssf-aw-h) * var(--ar, 1)));
  height: min(var(--ssf-aw-h), calc(var(--ssf-aw-w) / var(--ar, 1)));
}

.ssf-bd img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  transition: opacity .15s ease-out;
}

.ssf-bd .ssf-bd__mono {
  opacity: .62;
}

/* award mono art is navy: render it white on the dark footer */
.ssf-bd--award .ssf-bd__mono {
  filter: brightness(0) invert(1);
}

.ssf-bd .ssf-bd__color {
  opacity: 0;
}

.ssf-bd:hover .ssf-bd__mono,
.ssf-bd:focus-visible .ssf-bd__mono {
  opacity: 1;
}

.ssf-bd--color:hover .ssf-bd__mono,
.ssf-bd--color:focus-visible .ssf-bd__mono {
  opacity: 0;
}

.ssf-bd--color:hover .ssf-bd__color,
.ssf-bd--color:focus-visible .ssf-bd__color {
  opacity: 1;
}

.ssf-bd:focus {
  outline: none;
}

.ssf-bd:focus-visible {
  outline: 2px solid var(--ssf-gold);
  outline-offset: 5px;
  border-radius: 2px;
}

.ssf-badges__div {
  width: 1px;
  height: 40px;
  background: var(--ssf-line);
}

/* ---------- 5. bottom bar ---------- */
.ssf-bar {
  background: var(--ssf-ink);
  color: var(--ssf-muted);
  font-size: 14px;
}

.ssf-bar .ssf-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 22px;
}

.ssf-bar__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
}

.ssf-bar__logo img {
  display: block;
  width: auto;
  height: 26px;
}

.ssf-soc {
  display: flex;
  gap: 8px;
}

.ssf-soc a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ssf-line);
  border-radius: 50%;
  color: #fff;
  transition: background .2s, color .2s, border-color .2s;
}

.ssf-soc a:hover {
  border-color: var(--ssf-gold);
  background: var(--ssf-gold);
  color: var(--ss-navy-deep);
}

.ssf-soc svg {
  display: block;
  width: 16px;
  height: 16px;
}

.ssf-bar__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .ssf-rv__slide,
  .ssf-rv__slide.is-on,
  .ssf-odo .strip,
  .ssf-bd img {
    transition: none;
  }
}

/* ---------- tablet ---------- */
@media (max-width: 1199.98px) {
  .ssf-in {
    padding-inline: 40px;
  }

  .ssf-split__l {
    padding: 44px 36px 48px 40px;
  }

  .ssf-split__r {
    padding: 44px 40px 48px 36px;
  }

  .ssf-rv__slide {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
  }

  .ssf-rv__body {
    padding-right: 20px;
  }

  .ssf-rv__q {
    font-size: 15.5px;
    -webkit-line-clamp: 8;
    line-clamp: 8;
  }

  .ssf-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 36px;
  }

  .ssf-ins {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .ssf .ssf-stat__n {
    font-size: 32px;
  }

  .ssf .ssf-stat__l {
    white-space: normal;
  }
}

/* ---------- phone ---------- */
@media (max-width: 767.98px) {
  .ssf-in {
    padding-inline: 20px;
  }

  .ssf-split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .ssf-split__l,
  .ssf-split__r {
    grid-row: auto;
    grid-template-rows: auto auto;
  }

  .ssf-split__l,
  .ssf-split--solo .ssf-split__l {
    padding: 40px 20px 36px;
    border-right: 0;
    border-bottom: 0; /* one navy field (option C): no line between the stacked cards */
  }

  .ssf-split__r {
    padding: 12px 20px 40px;
  }

  .ssf .ssf-h {
    font-size: 26px;
  }

  .ssf-body {
    margin-top: 28px;
  }

  .ssf-form {
    padding: 22px 18px 18px;
  }

  .ssf-form .gform_wrapper .gform_fields {
    grid-template-columns: 1fr;
  }

  .ssf .ssf-alt {
    gap: 8px;
  }

  .ssf .ssf-pill {
    gap: 6px;
    padding: 0 8px;
    font-size: 14px;
  }

  .ssf-rv {
    margin-top: 24px;
  }

  .ssf-rv__slide {
    grid-template-columns: 1fr;
    grid-template-rows: 250px auto;
    gap: 0;
  }

  .ssf-rv__photo {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--ssf-line);
  }

  .ssf-rv__photo img {
    left: 50%;
    width: 180px;
    margin-left: -90px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }

  .ssf-rv__body {
    align-self: start;
    padding: 18px 20px 20px;
  }

  .ssf-rv__q {
    font-size: 16px;
    -webkit-line-clamp: 9;
    line-clamp: 9;
  }

  .ssf-links {
    padding-block: 44px 32px;
  }

  .ssf-stats {
    grid-template-columns: 1fr;
    margin-bottom: 36px;
    padding-bottom: 22px;
  }

  .ssf-stat,
  .ssf-stat:first-child {
    padding: 12px 0;
  }

  .ssf-stat:first-child {
    padding-top: 0;
  }

  .ssf .ssf-stat__n {
    font-size: 30px;
  }

  /* phone: every group = accordion (instant); Subscribe stays open */
  .ssf-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ssf-col > * + * {
    margin-top: 0;
  }

  .ssf-grp {
    border-bottom: 1px solid var(--ssf-line);
  }

  .ssf .ssf-grp > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 15px 0;
    cursor: pointer;
  }

  .ssf-grp > summary > a {
    display: none;
  }

  .ssf-grp__t {
    display: inline;
  }

  .ssf-grp > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ssf-mist);
    border-bottom: 2px solid var(--ssf-mist);
    transform: translateY(-3px) rotate(45deg);
  }

  .ssf-grp[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .ssf-grp > ul {
    gap: 12px;
    padding-bottom: 18px;
  }

  .ssf-ins {
    margin-top: 28px;
    padding-top: 24px;
  }

  .ssf-ins__posts {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ssf-ins__post {
    padding: 16px 0;
    border-top: 1px solid var(--ssf-line);
  }

  .ssf-ins__post:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .ssf .ssf-ins__card {
    padding: 22px 20px 24px;
  }

  .ssf-cities {
    display: block;
    margin-top: 28px;
    padding-top: 24px;
  }

  .ssf .ssf-cities__h {
    display: inline-block;
    margin-bottom: 12px;
  }

  .ssf-cities__list {
    gap: 10px 18px;
  }

  .ssf-bd {
    --ssf-bd-h: 28px;
    --ssf-aw-w: 60px;
    --ssf-aw-h: 54px;
  }

  .ssf-badges__row {
    gap: 12px 16px;
  }

  .ssf-badges__div {
    display: none;
  }

  .ssf-bar .ssf-in {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- review dots: 20 slides must fit narrow cards (tablet half-column, phone) ---------- */
.ssf-rv__dots {
  flex-wrap: wrap;
  min-width: 0;
}

@media (max-width: 1199.98px) {
  .ssf-rv__ctl {
    padding-inline: 16px 14px;
  }

  .ssf-rv__dots {
    gap: 4px;
  }

  .ssf-rv__dots i {
    width: 5px;
    height: 5px;
  }

  .ssf-rv__dots i.is-on {
    width: 5px;
  }
}

/* ---------- D2 top band (Mike 2026-09-28, cs-work/wwd/footer-headshots-options.html) ----------
   No headline on the band: the white card carries the rotating team faces on its top edge, the headline and the
   revenue subline; the review card gets a matching title row. Row 1 of the band's subgrid = both cards (they start on
   one line and end together), row 2 = the Call / Book pills on the left. Faces: one treatment for all three (Mike:
   no per-face ring colours) - a 3px white ring and a soft navy drop shadow. No motion. */
.ssf-cardwrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ssf-cardwrap > .ssf-form {
  position: relative;
  flex: 1 0 auto;
}

.ssf-split--d2 .ssf-alt {
  align-self: start;
}

.ssf-split--d2 .ssf-rv {
  grid-template-rows: auto 1fr auto;
  margin-top: 0;
}

.ssf-cardwrap--faces {
  padding-top: 38px; /* the top half of the 76px faces sits above the card (Mike 2026-09-28: a bit smaller) */
}

.ssf-cardwrap--faces > .ssf-form {
  padding-top: 54px;
}

.ssf-split--faces .ssf-split__r .ssf-rv {
  margin-top: 38px; /* review card top = white card top */
}

.ssf-faces {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  transform: translate(-50%, -50%);
}

.ssf-cardwrap .ssf-faces img {
  display: block;
  width: 76px;
  max-width: none;
  height: 76px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow: 0 8px 20px rgba(0, 27, 46, .32);
}

.ssf-cardwrap .ssf-faces img + img {
  margin-left: -14px;
}

.ssf-cardwrap .ssf-faces img:nth-child(2) {
  position: relative;
  z-index: 1;
}

.ssf-cardwrap .ssf-card__h {
  max-width: 400px; /* two balanced lines at every width */
  margin: 0 auto;
  color: var(--ss-navy);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
}

.ssf-cardwrap .ssf-card__sub {
  max-width: 440px;
  margin: 8px auto 20px;
  color: var(--ss-ink-2);
  font-size: 15.5px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.ssf-cardwrap .ssf-card__sub b {
  color: var(--ss-ink);
  font-weight: 700;
}

.ssf .ssf-rv__h {
  margin: 0;
  padding: 26px 30px 4px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

@media (max-width: 1199.98px) {
  .ssf .ssf-rv__h {
    padding-inline: 20px;
    font-size: 25px;
  }
}

@media (max-width: 767.98px) {
  .ssf-cardwrap--faces {
    padding-top: 33px;
  }

  .ssf-cardwrap .ssf-faces img {
    width: 66px;
    height: 66px;
  }

  .ssf-cardwrap--faces > .ssf-form {
    padding-top: 47px;
  }

  .ssf-split--d2 .ssf-rv,
  .ssf-split--faces .ssf-split__r .ssf-rv {
    margin-top: 0;
  }

  .ssf-cardwrap .ssf-card__h {
    font-size: 25px;
  }

  .ssf-cardwrap .ssf-card__sub {
    margin-bottom: 18px;
    font-size: 15px;
  }

  /* 22px on phones (Matt 2026-09-30: wrapped to three lines at 25px): two balanced lines from 320px up (in the Arial
     fallback, from 360px up). No max-width: the heading's bottom border is the full-width divider above the photo. */
  .ssf .ssf-rv__h {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--ssf-line);
    font-size: 22px;
    line-height: 1.2;
  }
}

/* ---------- shared form card on light pages (template-parts/cta-form-card.php, context 'page': case studies, industry
   pages, /experts/, web-design cases - replaced the HubSpot calendar card, Mike 2026-09-28) ----------
   Same card as the footer; on white sections it gets a hairline border and a softer shadow, the faces a light-grey
   ring (a white ring disappears on white), and the Call / Book pills turn navy-on-white. */
.ssfc {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  color: var(--ss-ink);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}

.ssfc .ssf-form {
  border: 1px solid rgba(6, 48, 79, .1);
  box-shadow: 0 24px 60px rgba(0, 27, 46, .14);
}

.ssfc .ssf-cardwrap .ssf-faces img {
  border-color: var(--ss-line-strong);
  box-shadow: 0 8px 18px rgba(0, 27, 46, .18);
}

/* page sections style their own h2 / p (e.g. .ex2 .cs2-meeting h2 is left-aligned): the card keeps its centred type */
.ssfc .ssf-cardwrap .ssf-card__h,
.ssfc .ssf-cardwrap .ssf-card__sub {
  text-align: center;
}

.ssfc .ssf-cardwrap .ssf-card__h {
  color: var(--ss-navy);
}

.ssfc .ssf-form__fine {
  margin: 10px 0 0;
  color: var(--ss-ink-3);
  font-size: 13px;
  text-align: center;
}

.ssfc .ssf-alt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.ssfc .ssf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ss-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ss-navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.ssfc .ssf-pill svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.ssfc .ssf-pill:hover {
  border-color: var(--ss-gold);
  color: var(--ss-navy);
  text-decoration: none;
}

.ssfc .ssf-pill:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .ssfc .ssf-alt {
    gap: 8px;
  }

  .ssfc .ssf-pill {
    gap: 6px;
    padding: 0 8px;
    font-size: 14px;
  }
}

/* ---------- growth CTA section (template-parts/growth-cta.php; Mike 2026-09-28: "needs to be framed out, and missing
   heading") ----------
   Left: stacked two-tone heading, second line in the blue shine. Right: the card + pills in a navy rounded panel
   (.ssfc--panel), so the white card has an edge on the white band; faces and pills use the footer's on-navy look. */
.cs2-meeting .cs2-meeting__h {
  margin: 0 0 16px;
  color: var(--ss-navy);
  font-size: 44px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-align: left;
}

.cs2-meeting .cs2-meeting__hl {
  display: block;
  width: fit-content;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  color: var(--ss-blue);
  background: var(--ss-blue-shine);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ssfc--panel {
  max-width: 600px;
  padding: 26px 28px 28px;
  border-radius: 24px;
  background-color: var(--ss-navy-deep);
  background-image: radial-gradient(ellipse 80% 30% at 50% 0%, rgba(var(--ss-gold-rgb), .16), rgba(var(--ss-gold-rgb), 0) 80%);
  box-shadow: 0 24px 60px rgba(0, 27, 46, .22);
}

.ssfc--panel .ssf-form {
  border: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.ssfc--panel .ssf-cardwrap .ssf-faces img {
  border-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
}

.ssfc--panel .ssf-pill {
  border-color: rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
}

.ssfc--panel .ssf-pill:hover {
  border-color: var(--ss-gold);
  color: var(--ss-gold);
}

@media (max-width: 1199.98px) {
  .cs2-meeting .cs2-meeting__h {
    font-size: 38px;
  }
}

@media (max-width: 767.98px) {
  .cs2-meeting .cs2-meeting__h {
    font-size: 32px;
  }

  .ssfc--panel {
    padding: 20px 14px 16px;
    border-radius: 20px;
  }
}

/* ---------- CTA card flow (Form flow mock Option 3; inc/footer-v2.php "CTA card flow", footer-v2.js) ----------
   After step 1 the confirmation takes the card over: the card's own headline / subline / fine print step aside and the
   state's heading takes their place (same type), faces stay. State "details": optional company, budget chips, message;
   state "done": Book a call + What happens next, and the pills under the card drop to Call only. Swaps are instant with
   a 150ms opacity fade (reveal policy: <=200ms, opacity only, none with reduced motion). */
.ssf-form.is-flow .ssf-card__h,
.ssf-form.is-flow .ssf-card__sub,
.ssf-form:has(.ssf-flow) .ssf-card__h,
.ssf-form:has(.ssf-flow) .ssf-card__sub {
  display: none;
}

.ssf-form .ssf-flow {
  padding: 0;
  color: var(--ss-ink-2);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.ssf-flow__s {
  animation: ssf-flow-in .15s ease-out;
}

.ssf-flow__s[hidden] {
  display: none !important;
}

@keyframes ssf-flow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ssf-flow__live,
.ssf-flow .ssf-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ssf-form .ssf-flow .ssf-flow__h {
  max-width: 400px;
  margin: 0 auto;
  color: var(--ss-navy);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  outline: 0;
}

.ssf-form .ssf-flow .ssf-flow__sub {
  max-width: 440px;
  margin: 8px auto 0;
  color: var(--ss-ink-2);
  font-size: 15.5px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* state "details" */
.ssf-flow .ssf-s2 {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ss-line);
  text-align: left;
}

.ssf-form .ssf-flow .ssf-s2__h {
  margin: 0 0 2px;
  color: var(--ss-navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.ssf-flow .ssf-s2__h span {
  color: var(--ss-ink-3);
  font-weight: 500;
}

.ssf-flow .ssf-s2__in {
  display: block;
  width: 100%;
  max-width: none;
  height: 50px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid var(--ss-line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--ss-ink);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.ssf-flow .ssf-s2__ta {
  height: 88px;
  min-height: 88px;
  resize: vertical;
}

.ssf-flow .ssf-s2__in::placeholder {
  color: var(--ss-slate);
  opacity: 1;
}

.ssf-flow .ssf-s2__in:focus {
  border-color: var(--ss-gold-deep);
  box-shadow: 0 0 0 3px rgba(var(--ss-gold-rgb), .25);
}

.ssf-flow .ssf-s2__budget {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ssf-flow .ssf-s2__lbl {
  display: block;
  width: 100%;
  text-align: center; /* centred over the centred chip rows (alignment rule) */
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  color: var(--ss-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ssf-flow .ssf-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ssf-flow .ssf-chip__in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.ssf-flow .ssf-chip {
  display: grid;
  flex: 0 0 calc((100% - 16px) / 3);
  place-items: center;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 6px;
  border: 1.5px solid var(--ss-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ss-ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}

.ssf-flow .ssf-chip:hover {
  border-color: var(--ss-gold-deep);
}

.ssf-flow .ssf-chip__in:checked + .ssf-chip {
  border-color: var(--ss-gold-deep);
  background: var(--ss-gold-soft);
  color: var(--ss-ink);
}

.ssf-flow .ssf-chip__in:focus-visible + .ssf-chip {
  outline: 2px solid var(--ss-navy-deep);
  outline-offset: 2px;
}

.ssf-flow .ssf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  margin: 4px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ss-gold-grad);
  color: var(--ss-navy-deep);
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(var(--ss-gold-end-rgb), .25);
  cursor: pointer;
  transition: filter .15s;
}

.ssf-flow .ssf-btn:hover {
  filter: brightness(1.06);
  color: var(--ss-navy-deep);
  text-decoration: none;
}

.ssf-flow .ssf-btn:focus-visible {
  outline: 2px solid var(--ss-navy-deep);
  outline-offset: 3px;
}

.ssf-flow .ssf-btn:disabled {
  cursor: progress;
  filter: saturate(.7);
}

.ssf-flow .ssf-btn svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.ssf-flow .ssf-s2__err {
  margin: 0;
  color: var(--ss-bad);
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
}

.ssf-form .ssf-flow .ssf-s2__skip {
  margin: 2px 0 0;
  text-align: center;
}

.ssf-flow .ssf-s2__skipbtn {
  margin: 0;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: var(--ss-ink-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ss-line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.ssf-flow .ssf-s2__skipbtn:hover {
  color: var(--ss-navy);
  text-decoration-color: currentColor;
}

.ssf-flow .ssf-s2__skipbtn:focus-visible {
  outline: 2px solid var(--ss-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* state "done" */
.ssf-form .ssf-flow .ssf-flow__soon {
  margin: 16px 0 0;
  color: var(--ss-ink-2);
  font-size: 14px;
  text-align: center;
}

.ssf-flow .ssf-flow__book {
  margin-top: 8px;
}

.ssf-flow .ssf-next {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ss-line);
  text-align: left;
}

.ssf-flow .ssf-next__h {
  margin: 0;
  color: var(--ss-navy);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}

.ssf-flow .ssf-next__l {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssf-flow .ssf-next__l li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 0;
  color: var(--ss-ink-2);
  font-size: 14.5px;
  line-height: 1.4;
}

.ssf-flow .ssf-next__l li:before {
  content: none;
}

.ssf-flow .ssf-next__l b {
  display: block;
  color: var(--ss-ink);
  font-weight: 700;
}

.ssf-flow .ssf-next__n {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ss-gold-soft);
  color: var(--ss-gold-end);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
}

/* pills under the card in state "done": Call only (the gold Book a call is inside the card) */
.ssf-alt.ssf-alt--done {
  grid-template-columns: minmax(0, 1fr);
}

.ssf-alt.ssf-alt--done .ssf-pill[data-toggle="modal"] {
  display: none;
}

@media (max-width: 767.98px) {
  .ssf-form .ssf-flow .ssf-flow__h {
    font-size: 25px;
  }

  .ssf-form .ssf-flow .ssf-flow__sub {
    font-size: 15px;
  }

  .ssf-flow .ssf-chip {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ssf-flow__s {
    animation: none;
  }
}

/* ---------- 3. usability / a11y pass (audit 2026-09-28) - footer-v2.css loads on every v2 page ---------- */
/* one visible keyboard focus ring sitewide: breadcrumbs, map pins, review tabs, case-study captions, form fields and the
   Book Meeting tab had none (legacy outline resets without a replacement). !important so class-level resets can't
   remove it; components with their own ring just get the gold outline on top. */
html :is(a[href], button, input:not([type=hidden]), select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role=tab], [role=button]):focus-visible {
  outline: 2px solid #f5b915 !important;
  outline-offset: 2px;
}

/* breadcrumb trails scroll sideways on phones (overflow clips anything outside the line box): ring hugs the text */
html .ss-bc a[href]:focus-visible,
html .cs2-crumbs a[href]:focus-visible {
  outline-offset: 0;
}

/* phone tap targets: an invisible hit area around small icon buttons / dots / text links - the drawn size is unchanged */
.ssf-soc a,
.ssf-rv__arrows button,
.ssf-col li a,
.ss-bc a,
.cs2-crumbs a,
.ex2-cc-btn,
.ex2-cc-dot,
.slick-dots li button,
.cs2w-pp {
  position: relative;
}
.ssf-soc a::after,
.ssf-rv__arrows button::after {
  content: "";
  position: absolute;
  inset: -5px;
}
.ssf-col li a::after,
.ss-bc a::after,
.cs2-crumbs a::after {
  content: "";
  position: absolute;
  inset: -7px -2px;
}
.ex2-cc-btn::after {
  content: "";
  position: absolute;
  inset: -5px;
}
.ex2-cc-dot::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
.slick-dots li button::after,
.cs2w-pp::after {
  content: "";
  position: absolute;
  inset: -14px;
}
.tm2-card__li::after {
  content: "";
  position: absolute;
  inset: -7px;
}

/* motion <= 200 ms (Mike): the live counters' digit roll and the review dots */
.ssf-odo .strip {
  transition-duration: .2s;
}
.ssf-rv__dots i {
  transition-duration: .15s;
}