/* Sitekit V2 — glue only. Everything else is Elementor settings. */

/* Hello Elementor prints its own header/footer above canvas templates. */
body.page header.site-header,
body.page footer.site-footer { display: none !important; }

/* Sticky needs clip, never hidden (PROTOCOL §7). */
html, body { overflow-x: clip; }

/* The video poster is a stand-in for a real video embed; make it obvious it
   is clickable while it is still an image. */
.sk-video-placeholder { cursor: pointer; }

/* Hero collage fades out at the bottom (per the mockup). Done as a mask on the
   image rather than a white gradient overlay, so it still works if the section
   ever gets a background. Not an Elementor setting — its mask control takes
   shape images, not gradients — so this earns its place in the glue file. */
.sk-hero-art img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 99%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Quote glyph — an IMAGE exported from the frame, not a font character.
   (The previous rule here was written for a text glyph and forced a 58px box
   height, which squashed the artwork and spilled it over the paragraph.) */
.sk-quote-mark { margin-bottom: 19px !important; }
.sk-quote-mark img { width: 84px; height: auto; display: block; }
@media (max-width: 767px) { .sk-quote-mark img { width: 74px; } }

/* Partner logos: normalise wildly different source aspect ratios. */
.sk-partner-cell img { max-height: 78px; width: auto; object-fit: contain; }

/* ── System tiles ──────────────────────────────────────────────────────────
   Three independent layers (photo / colour wash / accent boxes) so the photo
   can be swapped on its own. Every colour and the photo are Elementor
   settings; only the stacking and the hover live here, because Elementor has
   no control for greyscaling an image on a parent's hover.
   Box geometry is taken from the frame: the top-right accent spans 63.5%→100%
   horizontally and 0→40% vertically of a 510×358 tile; the bottom-left one
   spans 0→29.6% and 72%→100%. */
/* Frame overhangs on the Justice tile: photo x113–623 y1915–2273 inside a
   union of x95–640 y1907–2297 → 18 left / 17 right / 8 top / 24 bottom.
   Scaled to our wider container: 20 / 19 / 9 / 27. */
.sk-tile { position: relative; overflow: visible;
  --sk-inset-t: 9px; --sk-inset-r: 19px; --sk-inset-b: 27px; --sk-inset-l: 20px; }
.sk-tile > .e-con-inner { position: static; }

/* The photo sits INSET; the accent boxes are flush to the tile edge, so they
   overhang the photo on the outer sides exactly as the frame draws them
   (measured overhang: 17–19px on a 510px-wide photo). */
.sk-tile__photo,
.sk-tile__tint {
  position: absolute !important;
  inset: var(--sk-inset-t) var(--sk-inset-r) var(--sk-inset-b) var(--sk-inset-l);
  width: auto; height: auto;
  margin: 0; padding: 0;
}
.sk-tile__photo { z-index: 1; }
.sk-tile__tint  { z-index: 2; opacity: .5; transition: opacity .45s ease; }

.sk-tile__photo .elementor-widget-image,
.sk-tile__photo .elementor-widget-container,
.sk-tile__photo figure { height: 100%; margin: 0; }
.sk-tile__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .45s ease;
}

.sk-tile__box {
  position: absolute !important;
  z-index: 3;
  border: 8px solid #fff;
  margin: 0; padding: 0;
}
.sk-tile__box--tr { top: 0; right: 0;   width: 38.5%; height: 40%; }
.sk-tile__box--bl { bottom: 0; left: 0; width: 32.5%; height: 34%; }
@media (max-width: 767px) {
  .sk-tile { --sk-inset-t: 7px; --sk-inset-r: 14px; --sk-inset-b: 20px; --sk-inset-l: 15px; }
}

.sk-tile__label {
  position: relative; z-index: 4;
  padding: 0 20px;
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}

/* Default = washed + greyscale. Hover = wash clears, photo goes full colour. */
.sk-tile:hover .sk-tile__tint { opacity: 0; }
.sk-tile:hover .sk-tile__photo img { filter: grayscale(0); }

/* Touch devices get no real hover — keep the designed default state. */
@media (hover: none) {
  .sk-tile:hover .sk-tile__tint { opacity: .5; }
  .sk-tile:hover .sk-tile__photo img { filter: grayscale(1); }
}

/* Partner logos carry the frame's drawn width as an inline width. Below the
   desktop breakpoint that would let the widest lockups (485px in the frame)
   push a row past the viewport, so they cap at a share of the row instead. */
@media (max-width: 1024px) {
  .sk-prow > .sk-plogo { max-width: 30%; }
}
@media (max-width: 767px) {
  .sk-prow > .sk-plogo { max-width: 44%; }
}

/* The framework heading is sized to fit one line at desktop; stop a stray
   breakpoint from wrapping it mid-phrase. 1180px, not the 1025px tablet
   breakpoint: the boxed container is min(1200, viewport − 200), so it only
   reaches the heading's 940px ink at a 1140px viewport. Holding nowrap below
   that pushed the line out of the container instead of keeping it tidy — it
   wraps to two lines down there now, which is the correct outcome. */
@media (min-width: 1180px) {
  .sk-nowrap-desktop .elementor-heading-title { white-space: nowrap; }
}

/* ── Mobile navigation ─────────────────────────────────────────────────────
   The panel's CONTENT is all native widgets; this handles only the reveal.
   Elementor's nav-menu dropdown can hold menu items and nothing else, which is
   why the panel is ours: the frame puts a donate button, phone, address and
   social icons in there too.

   There is ONE button. The header sits above the panel in z-order and its
   background/logo drop away when open, so the toggle occupies exactly the same
   pixels whether the menu is open or closed — it just morphs into an X.
   (Show/hide of the nav, donate button, toggle and panel is done with
   Elementor's own hide_desktop/hide_tablet/hide_mobile controls, not classes;
   a bare class loses the specificity fight with Elementor's generated CSS.) */
.sk-mnav-toggle {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  width: 30px; height: 30px; justify-content: center;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
}
.sk-mnav-toggle:hover,
.sk-mnav-toggle:focus,
.sk-mnav-toggle:active { background: none; outline: none; }
.sk-mnav-toggle:focus-visible { outline: 2px solid #082B81; outline-offset: 4px; }
.sk-mnav-toggle span {
  display: block; height: 2px; background: #082B81;
  transition: transform .3s ease, opacity .2s ease, width .3s ease,
              margin .3s ease, background-color .3s ease;
}
.sk-mnav-toggle span:nth-child(1) { width: 15px; }
.sk-mnav-toggle span:nth-child(2) { width: 30px; }
.sk-mnav-toggle span:nth-child(3) { width: 15px; margin-right: 15px; }

/* The header owns a stacking context at EVERY width, not just where the mobile
   panel needs it. On desktop it had none, so the hero's white top fade — which
   sits in the next section and therefore paints later — covered the Who We
   Serve dropdown. 9995 keeps it above the mobile panel's 9990 too, which is
   what keeps the close toggle clickable. */
.sk-header { position: relative; z-index: 9995; }

@media (max-width: 1024px) {
  body.sk-mnav-open .sk-header { background-color: transparent !important; }
  body.sk-mnav-open .sk-header .sk-logo { opacity: 0; pointer-events: none; }
  .sk-header .sk-logo { transition: opacity .25s ease; }
  body.sk-mnav-open .sk-mnav-toggle span { background: #FFFFFF; }
  body.sk-mnav-open .sk-mnav-toggle span:nth-child(1) {
    width: 30px; transform: translateY(8px) rotate(45deg);
  }
  body.sk-mnav-open .sk-mnav-toggle span:nth-child(2) { opacity: 0; }
  body.sk-mnav-open .sk-mnav-toggle span:nth-child(3) {
    width: 30px; margin-right: 0; transform: translateY(-8px) rotate(-45deg);
  }
}

.sk-mnav {
  position: fixed !important; inset: 0; z-index: 9990;
  /* No `display:flex !important` here — it would beat Elementor's own
     .elementor-hidden-desktop rule and leave the panel in the DOM on desktop.
     Elementor containers are already flex. */
  flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .35s ease, visibility 0s linear .35s;
  visibility: hidden;
}
.sk-mnav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
body.sk-mnav-open { overflow: hidden; }

/* Rhythm is viewport-HEIGHT relative: on a short screen the menu tightens and
   the flexible gap disappears entirely, rather than forcing a scroll. */
.sk-mnav { gap: clamp(4px, 1vh, 14px); }
.sk-mnav__links .elementor-nav-menu a {
  padding-left: 0 !important;
  padding-top: clamp(3px, 1.4vh, 14px) !important;
  padding-bottom: clamp(3px, 1.4vh, 14px) !important;
}
/* Pushes the donate/phone/address/social group to the foot of the panel when
   there is room, and folds to nothing when there is not. Needs !important to
   beat Elementor's per-element margin rule. */
.sk-mnav__cta { margin-top: auto !important; }
/* Flex items shrink by default: on a short screen that squashed the lower
   widgets into each other instead of scrolling. Once the clamps have tightened
   as far as they go, the panel should scroll, not compress. */
.sk-mnav > * { flex-shrink: 0; }
.sk-mnav { flex-wrap: nowrap; }

/* Submenus inside the panel. Hidden until the caret opens them — Elementor's
   own reveal is :hover, which never fires on a touch screen. */
.sk-mnav .elementor-nav-menu .sub-menu { display: none !important; }
/* Elementor styles a sub-menu as its DESKTOP dropdown: absolutely positioned,
   white, boxed, dark text. Dropped into the panel that painted a white card
   over the items below it. In the panel a submenu is not a dropdown — it is an
   indented continuation of the list, so every one of those properties has to be
   unwound before it reads as one. */
.sk-mnav .elementor-nav-menu li.sk-open > .sub-menu {
  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* 18px against the parent row's 26px — an em here would have resolved against
   the <li>, not the parent link, and set the children at 7.8px. */
.sk-mnav .elementor-nav-menu .sub-menu a,
.sk-mnav .elementor-nav-menu .sub-menu a:hover,
.sk-mnav .elementor-nav-menu .sub-menu a:focus,
.sk-mnav .elementor-nav-menu .sub-menu a.elementor-item-active {
  color: #FFFFFF !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
.sk-mnav .elementor-nav-menu .sub-menu a {
  font-size: 18px !important;
  padding-left: 20px !important;
  padding-top: clamp(2px, 0.9vh, 9px) !important;
  padding-bottom: clamp(2px, 0.9vh, 9px) !important;
  opacity: .92;
}
/* The same green triangle the desktop dropdown uses (Elementor paints its own
   caret from `fill`, not `color`, so the SVG is replaced rather than recoloured
   — see the header rule). The 18×10 triangle is far under a finger-sized
   target, so the span is padded out to 44×44 and the extra height is pulled
   back out with a negative block margin, leaving the row's rhythm alone. */
.sk-mnav .elementor-nav-menu .sub-arrow svg,
.sk-mnav .elementor-nav-menu .sub-arrow i { display: none !important; }
.sk-mnav .elementor-nav-menu .sub-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-block: -17px; margin-inline-start: 2px;
  padding: 0; vertical-align: middle; cursor: pointer;
}
/* White here, not the desktop's green: the desktop caret sits on white, this
   one sits on the green panel, where green-on-green all but disappears. The
   frame draws them white too. */
.sk-mnav .elementor-nav-menu .sub-arrow::after {
  content: ""; display: block;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid #FFFFFF;
  transition: transform .18s ease;
}
.sk-mnav .elementor-nav-menu li.sk-open > a .sub-arrow::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .sk-mnav, .sk-mnav-toggle span { transition: none; }
  .sk-mnav .elementor-nav-menu .sub-arrow::after { transition: none; }
}

/* ── Interior page banner ──────────────────────────────────────────────────
   Photo is the section background and the scrim is Elementor's own overlay;
   these rules exist only to STACK the decorative layers, which are kept apart
   from the photo so each can be animated in on its own later. */
.sk-phero { position: relative; overflow: hidden; }
.sk-phero > .e-con-inner { position: static; }
.sk-phero__layer {
  position: absolute !important; inset: 0;
  margin: 0; padding: 0; pointer-events: none;
}
.sk-phero__pattern { z-index: 1; }
.sk-phero__block   { z-index: 2; }
.sk-phero__title   { position: relative; z-index: 3; }

/* ── Contact form ──────────────────────────────────────────────────────────
   Colours, typography, borders, spacing and the button are all Elementor
   settings. Only the field HEIGHT is here: Elementor Pro's form exposes border,
   background and typography for a field but no padding or height control, and
   the frame draws 50px inputs with a 196px message box. */
.sk-contact-form .elementor-field-textual { height: 50px; padding: 0 14px; }
.sk-contact-form textarea.elementor-field-textual { height: 196px; padding: 12px 14px; }
.sk-contact-map img { display: block; width: 100%; height: auto; }

/* ── Individual state resources ────────────────────────────────────────────
   Elementor's accordion is one full-width stack, so it cannot express the
   frame's three-column grid of independently expandable items. The content is
   still all native widgets — this handles the open/close affordance only. */
.sk-state__head {
  position: relative; cursor: pointer; padding-right: 44px !important;
}
.sk-state__head:focus-visible { outline: 2px solid #F06218; outline-offset: 4px; }
/* The +/− mark. BOTH bars live on ONE pseudo-element as two gradients, because
   ::before on an Elementor container is already spoken for: Elementor uses
   `.e-con::before` for the background overlay and sets `left: 0` on it. Our
   `right: 0` did not fail loudly — with left AND right both set and an explicit
   width, the left wins, so the bar rendered as a strikethrough across the state
   name instead of a plus sign at the far edge. Never style ::before on a
   container; ::after is free. */
.sk-state__head::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 23px; height: 23px; margin-top: -11.5px;
  background-image: linear-gradient(#F06218, #F06218),
                    linear-gradient(#F06218, #F06218);
  background-size: 23px 3px, 3px 23px;
  background-position: center center, center center;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.sk-state.is-open > .sk-state__head::after { background-size: 23px 3px, 3px 0; }

.sk-state__panel {
  overflow: hidden;
  max-height: 0; opacity: 0; padding-top: 0 !important;
  transition: max-height .32s ease, opacity .25s ease, padding-top .32s ease;
}
.sk-state.is-open > .sk-state__panel {
  max-height: 420px; opacity: 1; padding-top: 10px !important;
}
.sk-state__panel .elementor-widget-heading + .elementor-widget-text-editor { margin-top: 2px; }
.sk-state__panel .elementor-widget-text-editor + .elementor-widget-heading { margin-top: 14px; }
.sk-state__panel a { color: inherit; text-decoration: none; }
.sk-state__panel a:hover { text-decoration: underline; }

/* Filter field. The frame pastes a SCREENSHOT of a search box here; a picture
   of a control cannot filter anything, so this is a real input. */
.sk-state-filter {
  display: flex; align-items: center; gap: 10px;
  width: 47%; max-width: 455px;
  border-bottom: 1px solid #DCDCDC;
  padding: 8px 0; margin: 24px 0 0;
}
.sk-state-filter svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: #9A9AA5; stroke-width: 1.6; stroke-linecap: round;
}
.sk-state-filter input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: none; box-shadow: none;
  font-family: Figtree, sans-serif; font-size: 14px; font-weight: 300;
  color: #333232;
}
.sk-state-filter input::placeholder { color: #9A9AA5; }
@media (max-width: 767px) {
  .sk-state-filter { width: 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-state__panel, .sk-state__head::before, .sk-state__head::after { transition: none; }
}

/* ── Interior content rows and media clusters ──────────────────────────────
   Placement, colour and size of every layer are Elementor settings (absolute
   position, % offsets, % width, custom-unit min-height). These rules give the
   cluster the one thing Elementor has no control for — an intrinsic aspect
   ratio — so the absolutely-positioned layers have a height to be a percentage
   OF. Ratios are the measured cluster boxes from the frames. */
.sk-cluster { position: relative; width: 100%; }
.sk-cluster--model  { aspect-ratio: 651 / 428; }
.sk-cluster--neuro  { aspect-ratio: 543 / 461; }
.sk-cluster--arts   { aspect-ratio: 599 / 421; }
.sk-cluster--health { aspect-ratio: 370 / 431; }
.sk-cluster--team   { aspect-ratio: 602 / 450; }
.sk-cluster--evform { aspect-ratio: 396 / 450; }
.sk-cluster > .sk-layer { margin: 0 !important; }
/* Elementor containers expose MIN-height and no height, and a min-height does
   not cap a box that has content: the photo layer grew to its image's natural
   ratio, overflowed the cluster by 56px and — being the last absolutely
   positioned sibling — painted straight over the colour blocks and the pattern.
   Promoting the value Elementor already emits to a real height fixes it without
   inventing a second number the client would have to keep in sync. */
.sk-cluster > .sk-layer { height: var(--min-height, auto); }
/* The photo is a cut-out with real alpha; `contain` keeps it whole inside its
   layer instead of cropping the head off at a narrow column. */
.sk-layer--photo .elementor-widget-image,
.sk-layer--photo .elementor-widget-container,
.sk-layer--photo figure { height: 100%; margin: 0; }
.sk-layer--photo img { width: 100%; height: 100%; object-fit: contain;
  object-position: center bottom; display: block; }
/* The cut-outs are trimmed to their ink, so `contain` seats the subject inside
   the measured box at the drawn size rather than letterboxing empty margin. */
.sk-row-img img { display: block; width: 100%; height: auto; }

/* ── Resources page ────────────────────────────────────────────────────────
   The panels, their shadows, the buttons, every colour and every gap are
   Elementor settings. These three rules cover the two things it has no control
   for: a card's intrinsic aspect ratio, and a rule that has to run wider than
   the padding its siblings sit inside. */
.sk-vcard__thumb { aspect-ratio: 334 / 308; }
/* Frame: the hairlines span x149–1107 while the text starts at 169 — the rule
   runs 20px wider than the rows on each side. Negative margin is the honest
   way to say that; the alternative is padding every row and un-padding the
   rule, which puts the same number in six places. */
.sk-panel-rule { margin-left: -20px !important; margin-right: -20px !important; }
@media (max-width: 767px) { .sk-panel-rule { margin-left: 0 !important; margin-right: 0 !important; } }

/* The banner bar on WHO WE SERVE crosses the heading, so it needs to sit above
   it; every other hero layer sits behind. */
.sk-phero__bar { z-index: 4; }

/* Contact details: hairline rules between the three items, as the frame draws
   them — a border, not three divider widgets nobody can edit meaningfully. */
.sk-info + .sk-info { border-left: 1px solid #DCDCDC; }
.sk-info a { color: inherit; text-decoration: none; }
.sk-info a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
  .sk-info + .sk-info { border-left: 0; border-top: 1px solid #DCDCDC;
    padding-top: 18px !important; }
}

/* ── Focus ─────────────────────────────────────────────────────────────────
   The theme sets `outline: none` on links and controls, so a keyboard user has
   no idea where they are — on every page, on every element. `:focus-visible`
   (not `:focus`) restores it for keyboard and assistive-tech users without
   putting a ring around everything a mouse clicks. Two colours because one ring
   cannot show on both the white page and the navy footer. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor textarea:focus-visible,
.elementor select:focus-visible,
.elementor [tabindex]:focus-visible {
  outline: 3px solid #082B81 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
.sk-footer a:focus-visible,
.sk-cta a:focus-visible,
.sk-events-band a:focus-visible,
.sk-tcard a:focus-visible {
  outline-color: #FFFFFF !important;
}

/* Inline links inside a text widget inherit the THEME's link colour, not the
   colour set on the widget — which put #CC3366 on the navy footer at 3.24:1,
   under the 4.5 a 12px link needs. Everything the footer says is white; its
   links say it in white too, underlined so they still read as links. */
.sk-footer-legal a, .elementor-widget-text-editor a { color: inherit; }
.sk-footer-legal a { text-decoration: underline; text-underline-offset: 2px; }
.sk-footer-legal a:hover { text-decoration-thickness: 2px; }

/* The scripts section holds nothing but <script> tags, but Elementor still
   lays it out — a container with a 20px row gap between the blocks, which
   rendered as a white strip under the footer on every page. Hiding it does not
   stop the scripts: they run when the parser reaches them, whatever the CSS
   says about their container. */
.sk-scripts { display: none !important; }

/* ── Who We Serve dropdown ─────────────────────────────────────────────────
   Elementor's nav-menu styles the submenu ITEMS but has no control for the
   rules between them or for the caret's colour, which is the whole look of
   this panel in the prototype. Four rules, all of them things the panel
   genuinely cannot set. */
.sk-header .elementor-nav-menu .sub-menu {
  min-width: 260px; padding: 0;
  box-shadow: 0 12px 28px rgba(15, 31, 71, .22);
}
.sk-header .elementor-nav-menu .sub-menu > li + li > a { border-top: 1px solid #FFFFFF; }
.sk-header .elementor-nav-menu .sub-menu a { text-align: center; justify-content: center; }
/* The caret on the parent item: green in the prototype, and it belongs to the
   item's text rather than sitting apart from it. */
/* !important on the colour: the arrow is inside the item's <a>, so Elementor's
   hover rule repaints it with the item text and the caret went orange the
   moment you reached for it. It is green in every state in the prototype. */
/* The caret is DRAWN here rather than styled, and the reason is worth keeping:
   Elementor renders it as an inline <svg class="e-font-icon-svg">, so it paints
   from `fill`, not `color` — every colour rule aimed at it did nothing, and the
   fill stayed the menu's navy. Sizing is just as awkward: fa-caret-down sits in
   a 320×512 viewBox, so a square box letterboxes the triangle to a fraction of
   the box's width.

   A border triangle answers all three of Jansen's notes at once — green, bigger,
   tighter to the text — and it cannot be repainted by Elementor's own icon
   colour settings. */
.sk-header .elementor-nav-menu .sub-arrow svg,
.sk-header .elementor-nav-menu .sub-arrow i { display: none !important; }
.sk-header .elementor-nav-menu .sub-arrow {
  display: inline-flex; align-items: center;
  margin-inline-start: 4px; padding: 0;
}
.sk-header .elementor-nav-menu .sub-arrow::after {
  content: ""; display: block;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid #6DB536;
}

/* The footer runs the SAME WP menu, so it inherited the Who We Serve children
   the moment they were added — a caret it cannot open, over a submenu the
   design does not have there. The footer is one flat row of links; the header
   is where the dropdown lives. */
.sk-footer .elementor-nav-menu .sub-arrow,
.sk-footer .elementor-nav-menu .sub-menu { display: none !important; }

/* ── Homepage hero ─────────────────────────────────────────────────────────
   The prototype lifts the collage to sit level with the header rather than
   below it, and lays a white gradient over its top edge so the raised edge
   dissolves instead of cropping. 76px is the prototype's own band height. */
.sk-hero-artwrap { position: relative; }
.sk-hero-artwrap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 76px;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none; z-index: 2;
}
@media (max-width: 767px) { .sk-hero-artwrap::after { height: 44px; } }

/* ── Homepage video ────────────────────────────────────────────────────────
   A poster that becomes a player on click. Everything here is sized off the
   band the frame draws (1498 × 616, deliberately wider than the canvas), and
   the aspect-ratio keeps the band from collapsing before the poster decodes. */
.sk-video { position: relative; width: 100%; aspect-ratio: 1498 / 616;
  background: #0F1F47; overflow: hidden; }
.sk-video__btn {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; position: relative;
}
/* !important because the theme carries a blanket `img { height: auto }`, which
   beat `height: 100%` and let the poster render at its own 1.81 ratio inside a
   2.43 band — overflowing it by 200px. */
.sk-video__poster { width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center 42%; display: block; }
.sk-video__mark {
  position: absolute; left: 50%; top: 50%; width: 96px; height: 96px;
  transform: translate(-50%, -50%); transition: transform .25s ease, opacity .25s ease;
}
.sk-video__btn:hover .sk-video__mark { transform: translate(-50%, -50%) scale(1.07); }
.sk-video__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; }
.sk-video__frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .sk-video__mark { width: 64px; height: 64px; } }

/* ── Scroll-linked animation ───────────────────────────────────────────────
   Every rule here is scoped to `html.sk-anim`, and ONLY the script adds that
   class. No script, no class, nothing hidden — the page just renders. Hiding
   in CSS and revealing in JS is the same effect until the day the script
   fails, and then it is a blank site.

   `will-change` is deliberately absent: it would promote every tagged element
   on a 5,000px page to its own layer. The transform/opacity pair is already
   compositor-friendly. */
html.sk-anim .sk-r {
  opacity: 0;
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--sk-i, 0) * 90ms);
}
html.sk-anim .sk-r--up    { transform: translateY(26px); }
html.sk-anim .sk-r--layer { transform: translateY(14px) scale(.985); }
html.sk-anim .sk-r.is-in  { opacity: 1; transform: none; }

/* The cluster layers come in back-to-front — pattern, then colour block, then
   the photo — which is the sequence the separate layers were kept for. */
html.sk-anim .sk-r--layer { transition-duration: .72s; }
html.sk-anim .sk-cluster .sk-r--layer { transition-delay: calc(var(--sk-i, 0) * 130ms); }

@media (prefers-reduced-motion: reduce) {
  html.sk-anim .sk-r { opacity: 1 !important; transform: none !important;
    transition: none !important; }
}

/* ── Events page ───────────────────────────────────────────────────────────
   The wave curtain over the purple band. It is drawn, not exported: the frame's
   16 strokes are one sine (amplitude 74.7px, period 700px) repeated every
   37.71px, which is a 38 × 700 tile — measured off the render, generated as a
   PNG, and repeated. It lives on ::after and NOT on ::before, which Elementor
   owns for its own background overlay (a `right: 0` written there is dropped
   silently). Being its own layer, it can be faded or slid in on its own later,
   which is the standing rule for every pattern on this site. */
.sk-events-band { position: relative; overflow: hidden; }
.sk-events-band > * { position: relative; z-index: 1; }
.sk-events-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url(https://scbf.tolle.dev/wp-content/uploads/2026/08/events-waves.png);
  background-size: 37.71px 700px; background-repeat: repeat;
  /* The frame starts the curtain at x762 of 1280 (59.5%) with a hard edge. A
     hard edge on a repeating pattern clips strokes mid-stem and reads as a
     seam, so it is a short fade instead. */
  -webkit-mask-image: linear-gradient(to right, transparent 52%, #000 76%);
  mask-image: linear-gradient(to right, transparent 52%, #000 76%);
}
/* The peach block is a multiply wash over the photo, not a rectangle on top of
   it: sampled #E79D8D on white and #B46A5A over the photo — exactly the
   multiply of the two. */
.sk-layer--multiply { mix-blend-mode: multiply; }

/* Month heading: the word takes what it needs, the hairline takes the rest. */
.sk-ev-monthword { flex: 0 0 auto !important; width: auto !important; }
.sk-ev-rulewrap  { flex: 1 1 0 !important; min-width: 40px; }
.sk-ev-rule .elementor-divider { padding-block: 0 !important; }
.sk-ev-day { margin-top: -6px; }
.sk-ev-pager a { color: inherit; }

/* The search field. A real GET form, so it is markup rather than a widget —
   which means its look is the one thing on this page the panel cannot set. */
.sk-esearch input[type="search"] {
  width: 100%; box-sizing: border-box; height: 58px; padding: 0 16px;
  border: 1px solid #DCDCDC; border-radius: 4px; background: #fff;
  font-family: "Figtree", sans-serif; font-size: 14px; color: #333232;
}
.sk-esearch input[type="search"]::placeholder { color: #C5C5C5; }
.sk-esearch input[type="search"]:focus { outline: 2px solid #803792; outline-offset: 1px; }
@media (max-width: 767px) { .sk-esearch input[type="search"] { height: 46px; } }

/* ── Team page ─────────────────────────────────────────────────────────────
   One rule: the headshot's intrinsic crop. Everything else on this page — the
   navy caption block, the band, the green rule beside each group heading — is
   an Elementor setting. */
.sk-tcard__img img { display: block; width: 100%; aspect-ratio: 304 / 262;
  object-fit: cover; object-position: center top; }
.sk-tcard__img .elementor-widget-container, .sk-tcard__img figure { margin: 0; line-height: 0; }