/* ─────────────────────────────────────────────────────────────
   HOME SERVICES — prefix: ss-

   Structure only. Every editor-driven value arrives as a --ss-*
   custom property set by the scoped <style> block in module.html.
   Nothing here reads a module field, so this file declares real
   properties and owns the breakpoints outright.

   Font families are brand-locked, never editable:
   Akzidenz-Grotesk for the title and card names, Brandon
   Grotesque for everything else.
   ───────────────────────────────────────────────────────────── */

.ss-wrap {
  --ss-heading-font: 'akzidenz-grotesk', 'Akzidenz-Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ss-body-font:    'brandon-grotesque', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;

  /* Colour/size defaults, overridden per instance via scope_css. */
  --ss-bg:                #f7f7f7;
  --ss-max-w:             1320px;
  --ss-pt:                72px;
  --ss-pr:                20px;
  --ss-pb:                64px;
  --ss-pl:                20px;
  --ss-mt:                0;
  --ss-mb:                0;
  --ss-t-color:           #111111;
  --ss-t-accent:          #3a2e7b;
  --ss-t-grad:            linear-gradient(to bottom right, #211f2e 0%, #5a3aaa 50%, #7b46c4 100%);
  --ss-t-gap:             16px;
  --ss-t-size:            40px;
  --ss-d-color:           #565672;
  --ss-d-link:            #3a2e7b;
  --ss-d-max:             520px;
  --ss-d-gap:             52px;
  --ss-d-size:            16px;
  --ss-card-bg:           #ffffff;
  --ss-card-border:       #d8d4ea;
  --ss-icon-bg:           #eeecf7;
  --ss-icon-size:         24px;
  --ss-card-radius:       14px;
  --ss-card-gap:          16px;
  --ss-columns:           4;
  --ss-cn-color:          #111827;
  --ss-cn-size:           17px;
  --ss-cd-color:          #5f5f7e;
  --ss-cd-size:           15px;
  --ss-lm-color:          #3a2e7b;
  --ss-lm-size:           14px;
  --ss-va-color:          #3a2e7b;
  --ss-va-gap:            48px;
  --ss-va-size:           16px;
}

/* ── Wrapper: full-bleed breakout ── */
.ss-wrap {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: var(--ss-mt);
  margin-bottom: var(--ss-mb);
  padding: var(--ss-pt) var(--ss-pr) var(--ss-pb) var(--ss-pl);
  overflow-x: hidden;
  background-color: var(--ss-bg);
  font-family: var(--ss-body-font);
}

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

.ss-inner {
  max-width: min(var(--ss-max-w), 100%);
  margin: 0 auto;
}

/* ── Rich text normalisation ──
   HubSpot wraps field output in <p>/<h*>. Inline contexts collapse those and
   inherit type, so a stray <h2> an editor applied inside a card name cannot
   resize the card. */
.ss-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.ss-rt > * + *::before {
  content: ' ';
}

/* The section description keeps block flow — a rich text paragraph break there
   is a real break. No fixed height and no overflow: hidden, so a user's
   text-spacing override cannot clip it. */
.ss-rt-block > * {
  margin: 0 0 0.7em;
  font: inherit;
  color: inherit;
}

.ss-rt-block > *:last-child {
  margin-bottom: 0;
}

/* ── Header ── */
.ss-header {
  text-align: center;
  margin-bottom: var(--ss-d-gap);
}

.ss-title {
  font-family: var(--ss-heading-font);
  /* Locked at 700. At 800+ Akzidenz-Grotesk drops out of the stack entirely and
     the title falls back to Helvetica/Arial. */
  font-weight: 700;
  font-size: var(--ss-t-size);
  color: var(--ss-t-color);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ss-t-gap);
  padding: 0;
  text-wrap: balance;
}

.ss-title__plain,
.ss-title__accent {
  display: inline;
}

/* Solid colour first, and it stays the computed `color` — only the paint is
   replaced. In forced-colors mode, in print, or anywhere background-clip: text
   is not honoured, the accent words must still be readable rather than
   vanishing into transparent fill, and a contrast checker reading `color` sees
   a real value instead of `transparent`. */
.ss-title__accent {
  color: var(--ss-t-accent);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ss-title__accent {
    background-image: var(--ss-t-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .ss-title__accent {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.ss-subtitle {
  font-family: var(--ss-body-font);
  font-size: var(--ss-d-size);
  font-weight: 400;
  color: var(--ss-d-color);
  line-height: 1.6;
  margin: 0 auto;
  max-width: min(var(--ss-d-max), 100%);
}

.ss-subtitle a,
.ss-subtitle a:hover,
.ss-subtitle a:focus,
.ss-subtitle a:active,
.ss-subtitle a:visited {
  /* font: inherit pins family, size, weight and style to the paragraph, so the
     theme's `a:hover` font block cannot reflow the sentence mid-hover. */
  font: inherit;
  color: var(--ss-d-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Grid ── */
.ss-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ss-columns), minmax(0, 1fr));
  gap: var(--ss-card-gap);
}

.ss-card-item {
  display: flex;
  min-width: 0;
}

/* ── Card ── */
.ss-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 18px;
  border: 1px solid var(--ss-card-border);
  border-radius: var(--ss-card-radius);
  background-color: var(--ss-card-bg);
  text-align: left;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.ss-card--link,
.ss-card--link:hover,
.ss-card--link:focus,
.ss-card--link:active,
.ss-card--link:visited {
  text-decoration: none !important;
  color: inherit;
  /* The whole tile is the link: the anchor is `flex: 1` inside a flex <li>, so
     it fills the card box and every pixel of it - icon, heading, description,
     the Learn more row - is the same single target. `cursor: pointer` is stated
     rather than left to the UA default so it survives any reset that lands on
     `a` without an href. */
  cursor: pointer;
}

.ss-card--link:hover,
.ss-card--link:focus,
.ss-card--link:focus-visible,
.ss-card--link:active,
.ss-card--link:visited {
  font-family: var(--ss-body-font);
  font-size: var(--ss-cd-size);
  font-weight: 400;
  color: inherit;
}

/* Depth only. The border keeps `--ss-card-border` and the card name keeps
   `--ss-cn-color` in every state - nothing recolours under the pointer. The
   affordance is the lift, the shadow and the Learn more row sliding in.

   `.ss-card:hover`, not `.ss-card--link:hover`: a card only carries --link when
   it has a destination, and instances placed with `learn_more_text=""` still
   need a hover response. The lift and the two-layer shadow are the same numbers
   Careers Image Tiles uses, so the two sections on the careers page respond
   identically. The --link focus-visible state stays: a lift on hover is not a
   keyboard affordance. */
.ss-card:hover,
.ss-card--link:focus-visible {
  border-color: var(--ss-card-border);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(58, 46, 123, 0.12);
  transform: translateY(-3px);
}

/* ── Icon tile ── */
.ss-card__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-color: var(--ss-icon-bg);
  margin-bottom: 14px;
  flex-shrink: 0;
  align-self: flex-start;
/* Inherited by the fallback SVG's stroke="currentColor". Dark enough to clear
     3:1 against the tile it sits on. */
  color: #4a417f;
}

.ss-card__icon {
  display: block;
  width: var(--ss-icon-size);
  height: var(--ss-icon-size);
  object-fit: contain;
}

/* ── Name ── */
.ss-card__name {
  font-family: var(--ss-heading-font);
  font-weight: 700;
  font-size: var(--ss-cn-size);
  color: var(--ss-cn-color);
  line-height: 1.3;
  margin: 0 0 8px;
  padding: 0;
}

/* ── Description ── */
.ss-card__desc {
  display: block;
  font-family: var(--ss-body-font);
  font-size: var(--ss-cd-size);
  font-weight: 400;
  color: var(--ss-cd-color);
  line-height: 1.55;
  margin: 0 0 10px;
  flex-grow: 1;
}

/* ── Learn more ──
   It reveals on hover and on keyboard focus of the card. It is not a control of
   its own — the whole card is the link — so revealing it is purely a visual
   affordance and nothing becomes unreachable when it is hidden.

   No `pointer-events: none` and no `opacity: 0` on a focusable element: this is
   a <span>. The row keeps its height either way so the card does not resize on
   hover (CLS). */
.ss-card__learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  min-height: 1.6em;
  font-family: var(--ss-body-font);
  font-size: var(--ss-lm-size);
  font-weight: 600;
  color: var(--ss-lm-color);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.ss-card:hover .ss-card__learn-more,
.ss-card--link:focus-visible .ss-card__learn-more {
  opacity: 1;
  transform: translateX(0);
}

.ss-card__learn-more svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.ss-card:hover .ss-card__learn-more svg,
.ss-card--link:focus-visible .ss-card__learn-more svg {
  transform: translateX(3px);
}

/* Touch and forced-colors users get no hover and no focus ring to trigger the
   reveal, so the affordance is simply always on for them. */
@media (hover: none) {
  .ss-card__learn-more {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .ss-card__learn-more {
    opacity: 1;
    transform: none;
  }
}

/* ────────────────────────────────────────────────────────────
   SHARED BUTTON HOVER

   One hover for every button on the page, taken from the hero's
   "Watch the Story" button: a 2px lift and a soft neutral shadow of
   0 4px 14px rgba(0, 0, 0, 0.09). Nothing else moves - no
   font-weight, font-size or letter-spacing change in any state, so
   a label never reflows or shifts under the pointer. Each button
   keeps its own hover colour fields; the motion and the shadow are
   what is shared.
   ─────────────────────────────────────────────────────────── */

/* ── Footer / View All ── */
.ss-footer {
  text-align: center;
  margin-top: var(--ss-va-gap);
}

.ss-view-all,
.ss-view-all:hover,
.ss-view-all:focus,
.ss-view-all:active,
.ss-view-all:visited {
  text-decoration: none !important;
}

.ss-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
/* Sized as a comfortable target on its own rather than relying on the spacing
     exception. */
  min-height: 44px;
  padding: 0 8px;
  font-family: var(--ss-body-font);
  font-size: var(--ss-va-size);
  font-weight: 600;
  color: var(--ss-va-color);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}


/* ── Type lock on every state ──
   theme-overrides.css declares `a:hover, a:focus { <anchor font block> }`,
   including font-family, font-size and font-weight. At (0,1,1) that outranks a
   bare class, so the type is re-stated in the state rule - (0,2,0) - to keep the
   label from changing weight and reflowing under the pointer. */
.ss-view-all:hover,
.ss-view-all:focus,
.ss-view-all:focus-visible,
.ss-view-all:active,
.ss-view-all:visited {
  font-family: var(--ss-body-font);
  font-size: var(--ss-va-size);
  font-weight: 600;
  color: var(--ss-va-color);
}

/* Shared button hover, minus the shadow: this is a text link with no surface,
   and a box-shadow on a transparent box paints a shadow nothing casts. Same 2px
   lift and same timing as every button on the page. --static is the no-URL
   placeholder, which is not a control, so it gets no hover response at all. */
.ss-view-all:not(.ss-view-all--static):hover,
.ss-view-all:focus-visible {
  transform: translateY(-2px);
}

.ss-view-all--static {
  cursor: default;
}

.ss-view-all svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.ss-view-all:hover svg,
.ss-view-all:focus-visible svg {
  transform: translateX(4px);
}

/* ── Keyboard focus ──
   Every link here sets text-decoration: none, so the UA ring is the only
   indicator. An explicit ring is stated once for all of them. */
.ss-wrap :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ss-t-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Clears the fixed header when Tab scrolls a card into view. */
.ss-wrap a {
  scroll-margin-top: 96px;
}

/* ─────────────────────────────────────────────────────────────
   ENTRANCE ANIMATION — opt-in, JS only

   Everything above renders at full opacity. These rules only
   apply once JS has added .ss-js, so with JS off, JS broken, no
   IntersectionObserver, or under prefers-reduced-motion (where the
   script exits before adding the class) nothing is ever stuck at
   opacity 0.

   opacity + transform only, so both composite on the GPU.
───────────────────────────────────────────────────────────── */
.ss-js .ss-header,
.ss-js .ss-footer,
.ss-js .ss-card-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ss-js .ss-header.is-visible,
.ss-js .ss-footer.is-visible,
.ss-js .ss-card-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   RESPONSIVE
============================================================= */

/* Small desktop — 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  .ss-wrap {
    padding-left: max(var(--ss-pl), 32px);
    padding-right: max(var(--ss-pr), 32px);
  }

  .ss-card {
    padding: 20px 20px 16px;
  }
}

/* Tablet — <= 1024px: two columns */
@media (max-width: 1024px) {
  .ss-wrap {
    padding-left: max(var(--ss-pl), 32px);
    padding-right: max(var(--ss-pr), 32px);
  }

  .ss-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ss-header {
    margin-bottom: calc(var(--ss-d-gap) * 0.7);
  }
}

/* Mobile — <= 640px */
@media (max-width: 640px) {
  .ss-wrap {
    padding-left: max(var(--ss-pl), 16px);
    padding-right: max(var(--ss-pr), 16px);
  }

  .ss-grid {
    gap: calc(var(--ss-card-gap) * 0.7);
  }

  .ss-card {
    padding: 16px 14px 14px;
  }

  .ss-card__icon-box {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
  }

  .ss-title__accent {
    display: block;
  }
}

/* Small phone — <= 390px: single column. Below this two columns leave the card
   names wrapping mid-word once text is scaled up. */
@media (max-width: 390px) {
  .ss-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ss-card {
    padding: 20px 20px 18px;
  }
}

/* =============================================================
   ACCESSIBILITY — Reduced motion
============================================================= */
@media (prefers-reduced-motion: reduce) {
  .ss-card,
  .ss-card__name,
  .ss-card__learn-more,
  .ss-card__learn-more svg,
  .ss-view-all,
  .ss-view-all svg {
    transition: none;
  }

  .ss-view-all:not(.ss-view-all--static):hover,
  .ss-view-all:focus-visible {
    transform: none;
  }

  .ss-card:hover,
  .ss-card--link:focus-visible {
    transform: none;
  }

  .ss-js .ss-header,
  .ss-js .ss-footer,
  .ss-js .ss-card-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}