/* ==========================================================================
   COLORS  (reusable variables: use as var(--fin-orange), etc.)
   ========================================================================== */

:root{
  --fin-orange: #FF5600;
  --fin-light-orange: #FF9A66;
  --off-white: #FAF9F6;
  --off-black: #111111;
  --off-white-card: #F0EDE8;
  --off-white-swoosh: #F7F6F2;
}


/* ==========================================================================
   TYPOGRAPHY  (inside the section IDs only)
   ========================================================================== */

/* Headings (inside the section IDs only): the site sets heading colors with many class-based rules (e.g. .marquee--blade .headline),
   so !important is needed to override them all */
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) :is(h1, h2, h3, h4, h5, h6, .headline){
  color: var(--off-black) !important;
}


/* ==========================================================================
   BUTTONS  (.cta_button inside the section IDs only)
   The site drives button colors with --sds-c-button-* variables, so we set those.
   The ID prefix makes these win over the site's own :hover/:focus/:active rules.
   ========================================================================== */

/* Buttons: primary = off-black fill, white text; hover fills fin-orange */
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="primary"],
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="primary"]:hover,
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="primary"]:focus,
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="primary"]:active{
  --sds-c-button-color-background: var(--off-black);
  --sds-c-button-color-border: var(--off-black);
  --sds-c-button-text-color: #FFFFFF;
  --sds-c-button-color-background-hover: var(--fin-orange);
  --sds-c-button-color-border-hover: var(--fin-orange);
  --sds-c-button-text-color-hover: #FFFFFF;
  --sds-c-button-color-background-focus: var(--off-black);
  --sds-c-button-color-border-focus: var(--off-black);
  --sds-c-button-text-color-focus: #FFFFFF;
  --sds-c-button-color-background-active: var(--off-black);
  --sds-c-button-color-border-active: var(--off-black);
  --sds-c-button-text-color-active: #FFFFFF;
}

/* Buttons: secondary = off-black stroke, off-black text, no fill */
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"],
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"]:hover,
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"]:focus,
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"]:active{
  --sds-c-button-color-background: transparent;
  --sds-c-button-color-border: var(--off-black);
  --sds-c-button-text-color: var(--off-black);
  --sds-c-button-color-background-focus: transparent;
  --sds-c-button-color-border-focus: var(--off-black);
  --sds-c-button-text-color-focus: var(--off-black);
  --sds-c-button-color-background-active: transparent;
  --sds-c-button-color-border-active: var(--off-black);
  --sds-c-button-text-color-active: var(--off-black);
}

/* Buttons: secondary hover fills with off-black and flips the text to white */
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"]:hover{
  --sds-c-button-color-background-hover: var(--off-black);
  --sds-c-button-color-border-hover: var(--off-black);
  --sds-c-button-text-color-hover: #FFFFFF;
}

/* Buttons: secondary on mobile gets a 75% white fill so it stays visible over the background artwork */
@media (max-width: 767px){
  :is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"],
  :is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"]:focus,
  :is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="secondary"]:active{
    --sds-c-button-color-background: rgba(255, 255, 255, 0.75);
    --sds-c-button-color-background-focus: rgba(255, 255, 255, 0.75);
    --sds-c-button-color-background-active: rgba(255, 255, 255, 0.75);
  }
}

/* Buttons: remove the white streak on the primary button's edge
   The site draws a white-to-transparent gradient border with an :after (--pbc-g-button-outline-gradient),
   which shows as a light streak on the right side of the off-black button. */
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button[data-variant="primary"]:after{
  content: none;
}


/* Buttons: focus / click ring in off-black instead of the site's blue
   The page's ".version--two" styles draw it as "outline: 3px solid var(--pbc-focus-state-color)",
   so the color is changed at its source (the variable) for buttons. */
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button,
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button:focus,
:is(#marquee, #marquee-off-white, #logos, #logos-off-white, #tabs, #tabs-off-white, #quote, #quote-off-white, #features, #features-off-white, #pillars, #pillars-off-white, #promo, #promo-off-white, #story, #story-off-white, #footer, #footer-off-white) a.cta_button:active{
  --pbc-focus-state-color: var(--off-black);
  --sds-c-button-outline-color: var(--off-black);
  --sds-c-button-outline-color-active: var(--off-black);
}

/* ==========================================================================
   OFF-WHITE VARIANTS
   Every section ID has an "-off-white" twin (e.g. #quote and #quote-off-white).
   The twin gets all the same styles below (see the :is() selectors); this is the only difference.
   ========================================================================== */

#logos-off-white,
#tabs-off-white,
#quote-off-white,
#features-off-white,
#pillars-off-white,
#promo-off-white,
#story-off-white,
#footer-off-white{
  background-color: var(--off-white);
  /* Background images that use z-index: -1 would fall behind this color. isolation keeps them above it. */
  isolation: isolate;
}


/* ==========================================================================
   MARQUEE  (#marquee)
   ========================================================================== */

:is(#marquee, #marquee-off-white){
  position: relative;
  overflow: hidden;
  background-color: var(--off-white);
  /* The site's bg images use z-index: -1. Without their own stacking context they fall behind this
     section's background color. isolation keeps them inside the section, above the color. */
  isolation: isolate;
}

/* Marquee: the site adds a white overlay with an inline style, so !important is needed to override it */
:is(#marquee, #marquee-off-white) .background__gradient{
  background-color: var(--off-white) !important;
}

/* Marquee: background images (desktop + mobile wrappers)
   Site default pins the bg to a 508px strip at the top (desktop) or 1076px at the bottom (mobile).
   Stretch it over the whole section and anchor the artwork to the bottom. */
:is(#marquee, #marquee-off-white) .blade__background--custom-desktop,
:is(#marquee, #marquee-off-white) .blade__background--custom-mobile{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  /* Cap the width and center it. The artwork is nearly square, so with object-fit: cover it keeps
     scaling up on wide screens and crops/overtakes the section. Past this width the off-white
     section color fills the sides instead. Tune the max-width to taste. */
  max-width: 1600px;
  margin-inline: auto;
}

:is(#marquee, #marquee-off-white) .background__image--custom{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;

  /* Stop the background image from being selected or dragged when you click and drag on the section */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

:is(#marquee, #marquee-off-white) .video-html5{
  /* Reserve the video's 16:9 space before it loads, so the section doesn't jump when it appears */
  aspect-ratio: 16 / 9;
}

:is(#marquee, #marquee-off-white) .video-html5 video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(#marquee, #marquee-off-white) .content__wrapper {
	margin-bottom: 70px;
} 


/* ==========================================================================
   LOGOS  (#logos)
   ========================================================================== */

:is(#logos, #logos-off-white){

}

/* Logos: size (~20% larger than the site's 136x76 desktop / 104x58 mobile caps) */
:is(#logos, #logos-off-white) .card__logomark__image{
  max-width: 164px;
  max-height: 92px;
}

@media (max-width: 767px){
  :is(#logos, #logos-off-white) .card__logomark__image{
    max-width: 124px;
    max-height: 70px;
  }
}

/* Logos: scroll speed
   The site sets this as "animation: slideLeft 26s linear infinite" on .pbc-slider__track--left.
   A longer duration = slower scroll. */
:is(#logos, #logos-off-white) .pbc-slider__track--left{
  animation-duration: 50s;
}


/* ==========================================================================
   TABS  (#tabs)
   ========================================================================== */

:is(#tabs, #tabs-off-white){

}

/* Tabs: more space between the tab row and the content title below it
   (site default is 12px, or 8px on mobile, applied as margin-bottom on the tab list). Tune to taste. */
:is(#tabs, #tabs-off-white) .tablist{
  margin-bottom: 24px;
}

@media (min-width: 768px){
  :is(#tabs, #tabs-off-white) .tablist{
    margin-bottom: 32px;
  }
}

/* Tabs: active tab highlight (text + underline) in fin-orange instead of the site's blue */
:is(#tabs, #tabs-off-white) .tablist [aria-selected="true"] span{
  color: var(--fin-orange);
  box-shadow: inset 0 -5px 0 -1px var(--fin-orange);
}

/* Tabs: keyboard focus outline (the site draws it with a :before border in its blue focus color) */
:is(#tabs, #tabs-off-white) .tablist > li > button:focus:before{
  border-color: var(--fin-orange);
}

/* Tabs: hover/focus text color */
:is(#tabs, #tabs-off-white) .tablist button:hover,
:is(#tabs, #tabs-off-white) .tablist button:focus span{
  color: var(--fin-orange);
}

/* Tabs: "More" dropdown (shown when the tab list is too long, e.g. on mobile)
   The site colors these with --pbc-tab-text-more-dropdown-color-* variables, so they're set to orange here. */
:is(#tabs, #tabs-off-white) .tablist{
  --pbc-tab-text-more-dropdown-color-hover: var(--fin-orange);
  --pbc-tab-text-more-dropdown-color-active: var(--fin-orange);
}

/* Tabs: "More" button dots (the site uses a blue data-URI SVG on hover/focus/open; swapped for orange) */
:is(#tabs, #tabs-off-white) .tablist .more-tab.active > button > span:after,
:is(#tabs, #tabs-off-white) .tablist .more-tab > button:active > span:after,
:is(#tabs, #tabs-off-white) .tablist .more-tab > button:focus > span:after,
:is(#tabs, #tabs-off-white) .tablist .more-tab > button:hover > span:after{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6' fill='none'%3E%3Cpath fill='%23FF5600' fill-rule='evenodd' d='M3 0c1.65 0 3 1.35 3 3S4.65 6 3 6 0 4.65 0 3s1.35-3 3-3Zm9 0c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3Zm9 0c1.65 0 3 1.35 3 3s-1.35 3-3 3-3-1.35-3-3 1.35-3 3-3Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}


/* ==========================================================================
   QUOTE  (#quote)
   ========================================================================== */

/* Quote: card background (the site sets white via .pbc-g-elevation-2) */
:is(#quote, #quote-off-white) .card--card_quote{
  background-color: var(--off-white-card);
}

/* Quote: swoosh behind the text (site default is pink) */
:is(#quote, #quote-off-white) .card_quote--background-swoosh svg path{
  fill: var(--off-white-swoosh);
}

/* Quote: quote mark in fin-orange
   The site renders it as an image via content: url(), which CSS can't recolor,
   so it's swapped for an inline SVG with an orange fill (%23FF5600 = #FF5600). */
:is(#quote, #quote-off-white) .card--card_quote .card__quote-mark:before{
  content: url("data:image/svg+xml,%3Csvg width='104' height='80' viewBox='0 0 104 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40.4216 80V41.1679H22.4902C22.4902 25.6934 26.4412 22.1898 40.1176 19.562V0C13.6765 0.291967 0 16.6423 0 37.9562V80H40.4216ZM103.333 80V41.1679H85.402C85.402 25.6934 89.3529 22.1898 103.029 19.562V0C76.5882 0.291967 62.9118 16.6423 62.9118 37.9562V80H103.333Z' fill='%23FF5600'/%3E%3C/svg%3E");
}


/* ==========================================================================
   FEATURES  (#features)
   ========================================================================== */

:is(#features, #features-off-white){

}

/* Features: layout (desktop only)
   The site puts the heading + tabs in one left column with the image on the right.
   display: contents lets the heading and tabs become direct children of the grid, so we can
   put the heading across the top (centered), then the image on the left and tabs on the right. */
@media (min-width: 1024px){
  :is(#features, #features-off-white) .productfeature__content-group{
    display: contents;
  }

  :is(#features, #features-off-white) .productfeature__blade-heading{
    /* Centered 8 of 12 columns, so the headline wraps (after "Slack," or so) as the grid resizes.
       Use "4 / span 6" for an earlier break or "2 / span 10" for a later one. */
    grid-column: 3 / span 8;
    grid-row: 1;
    text-align: center;
    margin-bottom: 64px;
  }

  :is(#features, #features-off-white) .productfeature__blade-heading .blade__description{
    max-width: 760px;
    margin-inline: auto;
  }

  :is(#features, #features-off-white) .show-hide__media--desktop{
    /* The site sets an inline style="grid-row: 1 / span 6" on these, so !important is needed to override it */
    grid-row: 2 !important;
  }

  :is(#features, #features-off-white) .productfeature__tabs{
    grid-row: 2;
    align-self: start;
  }

  /* The WordPress layout setting adds .blade_layout--left / .blade_layout--right to the section.
     Left = image on the left, tabs on the right. Right = tabs on the left, image on the right. */
  :is(#features, #features-off-white).blade_layout--left .show-hide__media--desktop{
    grid-column: 1 / span 6;
  }

  :is(#features, #features-off-white).blade_layout--left .productfeature__tabs{
    grid-column: 8 / span 5;
  }

  :is(#features, #features-off-white).blade_layout--right .show-hide__media--desktop{
    grid-column: 7 / span 6;
  }

  :is(#features, #features-off-white).blade_layout--right .productfeature__tabs{
    grid-column: 1 / span 5;
  }
}

/* Features: selected item highlight (left bar + title) in fin-orange instead of the site's blue */
:is(#features, #features-off-white) .show-hide__item.selected{
  border-left-color: var(--fin-orange);
}

:is(#features, #features-off-white) .show-hide__item [aria-expanded="true"] .accordion__title{
  color: var(--fin-orange);
}

/* Features: title hover color */
:is(#features, #features-off-white) .accordion__trigger:hover .accordion__title,
:is(#features, #features-off-white) .accordion__trigger:active .accordion__title{
  color: var(--fin-orange);
}

/* Features: accordion (mobile/tablet) states
   Resting: off-black title, off-black +/- icon on a fin-light-orange circle.
   Hover / pressed: orange title, orange circle with a white icon.
   Expanded: orange title (above), resting icon. Keyboard focus ring: orange.
   The site drives these with variables, so they're set at the source (blue → orange). */
:is(#features, #features-off-white) .accordion__trigger{
  --pbc-g-interactive-text-color: var(--off-black);
  --pbc-accordion-icon-color: var(--off-black);
  --pbc-accordion-icon-background-color: var(--fin-light-orange);
  --pbc-accordion-icon-background-color-hover: var(--fin-orange);
  --pbc-accordion-icon-color-hover: #FFFFFF;
  --pbc-focus-state-color: var(--fin-orange);
}


/* ==========================================================================
   PILLARS  (#pillars)
   ========================================================================== */

:is(#pillars, #pillars-off-white){

}


/* ==========================================================================
   PROMO  (#promo)
   ========================================================================== */

:is(#promo, #promo-off-white){

}

/* Promo: card background (the white box inside the blade) */
:is(#promo, #promo-off-white) .pb-large-corner article{
  background-color: var(--off-white);
}

/* Promo: hide the buttons */
:is(#promo, #promo-off-white) .cta_container{
  display: none;
}


/* ==========================================================================
   STORY  (#story)
   ========================================================================== */

:is(#story, #story-off-white){

}


/* ==========================================================================
   FOOTER  (#footer)
   ========================================================================== */

:is(#footer, #footer-off-white){
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 620px;
}

/* Footer: the site stacks the background image below the content. Pin it behind the content instead,
   filling the section and anchored to the bottom, so the artwork sits under/around the buttons. */
:is(#footer, #footer-off-white) .blade__background--below{
  position: absolute;
  inset: 0;
  /* Same as the marquee: cap the width and center it, so the artwork stops scaling up on wide screens.
     Past this width the off-white section color fills the sides. Tune the max-width to taste. */
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}

:is(#footer, #footer-off-white) .background__graphics,
:is(#footer, #footer-off-white) .blade__background-image{
  height: 100%;
}

:is(#footer, #footer-off-white) .background__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Footer: content sits above the artwork, with the headline pushed down from the top */
:is(#footer, #footer-off-white) .container{
  position: relative;
  z-index: 1;
}

/* Footer: larger headline, wrapping onto two lines (tune font-size / max-width to taste) */
:is(#footer, #footer-off-white) .headline.text__headline--large{
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.05;
  max-width: 11em;
  margin-inline: auto;
}


/* ==========================================================================
   HELPERS  (not tied to any ID)
   ========================================================================== */

/* Helpers: orange text */
span.fin-orange{
  color: var(--fin-orange);
}