/* Moved verbatim from the Webflow project-component embeds (global-styles, components-styles, hubspot-styles, utility styles), in served order. */

/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}

/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-4lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

    @media screen and (max-width: 767px) {
        body {
            --spacing--tiny: 0.125rem;
            --spacing--xxsmall: 0.25rem;
            --spacing--xsmall: 0.5rem;
            --spacing--small: 1rem;
            --spacing--medium: 2rem;
            --spacing--large: 3rem;
            --spacing--xlarge: 4rem;
            --spacing--xxlarge: 5rem;
            --spacing--huge: 6rem;
            --spacing--xhuge: 8rem;
            --spacing--xxhuge: 12rem;
        }
    }
    
        @media screen and (max-width: 767px) {
        body {
            --sizing--xxsmall: 12rem;
            --sizing--xsmall: 16rem;
            --sizing--small: 20rem;
            --sizing--medium: 32rem;
            --sizing--large: 48rem;
            --sizing--xlarge: 64rem;
            --sizing--xxlarge: 80rem;
        }
    }

    /* Snippet prevents the browser to override the select input field layout*/
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    [warning-message-local-hide="true"] .amply_warning-message {
        display: none !important;
    }

  html { font-size: 1.125rem; }
  @media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
  @media screen and (max-width:1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
  @media screen and (max-width:479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

    /* .input, .hs-input {
        margin-right: 0rem !important;
        max-width: none !important;
        width: 100% !important;
    } */

    /* .form-columns-1,
    .form-columns-2,
    .hs-form-field {
        width: 100% !important;
        max-width: none !important;
    } */

    /* .hs-form-field select {
        width: 100% !important;
    } */

    /* .hs-form-field textarea {
        width: 100% !important;
    } */

    /* .hubspot_form-embed .hs-button {
        width: 100% !important;
    } */

    /* .hs-input[type=checkbox] {
        -moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        width: 1rem !important;
        height: 1rem !important;
        min-height: 0rem;
        margin-top: 0rem;
        margin-right: 1rem;
        margin-bottom: 0rem;
        margin-left: 0rem;
        border-width: 1px !important;
        border-color: var(--pink--600) !important;
        border-radius: 0.25rem;
        transition-property: box-shadow, border-color, background-color;
        transition-duration: 250ms, 250ms, 250ms;
        transition-timing-function: ease, ease, ease;
    } */

    /* .hs-input[type=checkbox] label {
        font-size: 1rem !important;
    } */

    /* .hs-input[type=checkbox]:focus {
        box-shadow: 0 0 3px 1px var(--pink--600) !important;
    } */

    /* .hs-input[type=checkbox]:checked {
        border-color: var(--pink--600) !important;
        accent-color: var(--pink--600);
        background-color: var(--pink--600);
        background-image: url(/_wf/cdn.prod.website-files.com/6578982aece0102430a52404/65aab07a30962d49ce9378fe_Check.svg);
        background-size: 70%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    } */

    /* .hs-input[type=radio] {
        -moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        width: 1rem !important;
        height: 1rem !important;
        min-height: 0rem;
        margin-top: 0rem;
        margin-right: 1rem;
        margin-bottom: 0rem;
        margin-left: 0rem;
        border-width: 1px !important;
        border-color: var(--pink--600) !important;
        border-radius: 100%;
        transition-property: box-shadow, border-color, background-color;
        transition-duration: 250ms, 250ms, 250ms;
        transition-timing-function: ease, ease, ease;
    } */

    /* .hs-input[type=radio] label {
        font-size: 1rem !important;
    } */

    /* .hs-input[type=radio]:focus {
        box-shadow: 0 0 3px 1px var(--pink--600);
    } */

    /* .hs-input[type=radio]:checked {
        border-color: var(--pink--600) !important;
        accent-color: var(--pink--600);
        background-color: var(--pink--600);
        background-image: radial-gradient(circle farthest-corner at 50% 50%, #23d6c7 49%, transparent 50%);
    } */

    /* .input select {
        background-image: url(/_wf/cdn.prod.website-files.com/6578982aece0102430a52404/65aab495008a79700aa65fdc_arrow_down_no_tail.svg);
        background-position: 95% 50%;
        background-size: 1.5rem 1.5rem;
        background-repeat: no-repeat;
    } */

    /* .hs-error-msgs li {
        padding-left: 0rem !important;
        margin-bottom: 0rem !important;
    } */

    /* .hubspot_footer-embed .hs-form-booleancheckbox {
        margin-top: -1rem !important;
    } */

    /* .hs-error-msgs label {
        margin-bottom: 0rem !important;
 
    } */

    /* .hs-error-msgs {
        color: #ef6051;
        background-color: #fff;
        border-radius: 0.25rem;
        margin-top: 0.25rem;
        margin-bottom: -2rem!important;
        padding: 0.15rem 1rem;
        font-size: 0.7rem;
        position: absolute;
        top: auto;
        bottom: -0.5rem;
        left: auto;
        right: 0%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        z-index: 10!important;

    } */

    /* .hs-form-booleancheckbox span {
        margin-left: 0rem !important;
    } */

    /* .legal-consent-container {
        font-size: 1rem !important;
        color: #70819a;
    } */

    /* .hs-fieldtype-textarea {
        width: 100% !important;
        min-height: 8rem !important;
    } */

    /* .hs-form-field label {
        margin-bottom: 0.5rem;
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.4;
        color: #011627;
    } */

  :root {
    --s7-blue:  #1f4dff;
    --s7-white: #ffffff;
  }

  /* ── FAB group (Search pill) ─────────────────────────────────
     Bottom-right; the AI Chat pill stacks directly above it. */
  #s7-fab-group {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* ── Blue AI Chat pill (Sidepanel Ask AI trigger) ────────────
     Styled to match the Search pill; stacked above it. */
  #s7-chat-fab .ss-sidepanel-trigger {
    position: fixed !important;
    right: 20px !important;
    bottom: 84px !important;
    min-width: 132px !important;
    height: 52px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    border: none !important;
    border-radius: 9999px !important;
    background: var(--s7-blue) !important;
    color: var(--s7-white) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
    z-index: 99999 !important;
  }

  #s7-chat-fab .ss-sidepanel-trigger:hover {
    transform: translateY(-1px) !important;
    background: var(--s7-blue) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.28) !important;
  }

  #s7-chat-fab .ss-sidepanel-trigger span {
    color: var(--s7-white) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
  }

  /* Same sparkle icon as now, forced white */
  #s7-chat-fab .ss-sidepanel-trigger svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--s7-white) !important;
  }

  #s7-chat-fab .ss-sidepanel-trigger svg path,
  #s7-chat-fab .ss-sidepanel-trigger svg circle {
    fill: var(--s7-white) !important;
    stroke: var(--s7-white) !important;
  }

  /* ── Blue AI Search pill (SiteSearch trigger) ──────────────── */
  #docsearch-fab .sitesearch-button-aa {
    min-width: 132px !important;
    height: 52px !important;
    border-radius: 9999px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: none !important;
    background: var(--s7-blue) !important;
    color: var(--s7-white) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
  }

  #docsearch-fab .sitesearch-button-aa .search-icon {
    font-size: 18px !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--s7-white) !important;
  }

  #docsearch-fab .sitesearch-button-aa .search-icon svg {
    color: var(--s7-white) !important;
    fill: currentColor !important;
  }

  /* SiteSearch ignores buttonText on search-askai bundle — override label */
  #docsearch-fab .sitesearch-button-aa .button-text,
  #docsearch-fab .sitesearch-button-aa .keyboard-shortcut {
    display: none !important;
  }

  #docsearch-fab .sitesearch-button-aa::after {
    content: var(--s7-button-label, "AI Search");
    color: var(--s7-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
  }

  /* SiteSearch modal above Webflow nav */
  .navbar.w-nav,
  .w-nav-overlay {
    z-index: 1000;
  }

  .ssask-exp,
  .modal-content-askai,
  .ss-sidepanel-panel,
  .ss-sidepanel-backdrop {
    z-index: 2147483647 !important;
  }

  /* Hide Algolia powered-by in the SiteSearch modal + sidepanel */
  .ssask-exp .ss-footer-powered-by,
  .ss-sidepanel-powered-by {
    display: none !important;
  }

  /* Wider chat panel — long answers read better + placeholder isn't truncated */
  .ss-sidepanel-panel {
    width: min(560px, calc(100vw - 2rem)) !important;
  }

  /* Phones: icon-only circles load last via s7-fab-phone.css (search-fab.js). */


/* Case study art (src/blocks/shared/sections/CaseArt.astro): background fills the box, the logo sits centred and is never cropped.
   --ca-fw is the logo width as a share of the 496 x 397 Figma frame, --ca-ar its width over height. The frame is scaled to cover
   the box, so the logo scales with the background, then is held inside 86% of the box (at least 7% margin on each side). */
.s7-caseart {
  display: block;
  position: relative;
  overflow: hidden;
  container-type: size;
  width: 100%;
  aspect-ratio: 496 / 397;
}
.s7-caseart.image-absolute {
  position: absolute;
  inset: 0%;
  aspect-ratio: auto;
}
.s7-caseart.casestudy_image {
  height: 100%;
}
/* The case study hero is a grid of two equal columns (1fr 1fr). A grid item's own minimum width is its content's,
   and this box's content width follows from its height and aspect ratio, so without the next rule the picture column
   grew to about 709px at 1440 (495px on the old site), squeezed the title column and ran over the text below. With
   it the picture fills its half and takes the text column's height, as the old <img> did. */
.casestudy_image-wrapper {
  min-width: 0;
}
.s7-caseart_bg {
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s7-caseart_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  height: auto;
  width: min(calc(var(--ca-fw) * max(100cqw, 100cqh * 1.2494)), 86cqw, calc(86cqh * var(--ca-ar)));
}

/* The About timeline's progress line is fixed to the screen and sat on top of the announcement bar (a thin blue line
   through its text, on the old site too). The line lives inside the About tabs (z-index 5), so the bar goes above
   that and stays just under the nav (1000). */
.announcement-bar {
  position: relative;
  z-index: 999;
}


/* ---- Article text (D4, 9 Nov 2026): technical, case study, resource, migration service, bundle, LegacyMap and blog bodies ----
   Body 18px (17px on phones), regular weight, #d9d9d9 on the near-black page (about 14:1), 1.7 line height, a measure of about
   70 characters, room between paragraphs and above headings, indented lists, links underlined in the accent blue. Jon's words are untouched. */
.glob-content.w-richtext {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}
.glob-content.w-richtext p,
.glob-content.w-richtext li {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  color: #d9d9d9;
  max-width: 70ch;
}
.glob-content.w-richtext p { margin-top: 0; margin-bottom: 1.25rem; }
.glob-content.w-richtext strong,
.glob-content.w-richtext b { color: #fff; font-weight: 700; }
.glob-content.w-richtext ul,
.glob-content.w-richtext ol {
  max-width: 70ch;
  margin: 0 0 1.5rem;
  padding-left: 1.75rem;
  overflow: visible;
}
.glob-content.w-richtext ul { list-style: disc; }
.glob-content.w-richtext ol { list-style: decimal; }
.glob-content.w-richtext li { margin-bottom: 0.6rem; padding-left: 0.25rem; }
.glob-content.w-richtext li > ul,
.glob-content.w-richtext li > ol { margin-top: 0.6rem; margin-bottom: 0.6rem; }
.glob-content.w-richtext h2 { margin-top: 2.75rem; margin-bottom: 1.25rem; }
.glob-content.w-richtext h3 { margin-top: 2.25rem; margin-bottom: 1rem; }
.glob-content.w-richtext h4,
.glob-content.w-richtext h5,
.glob-content.w-richtext h6 { margin-top: 1.75rem; margin-bottom: 0.75rem; }
.glob-content.w-richtext > :first-child { margin-top: 0; }
.glob-content.w-richtext a {
  color: var(--brand--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.glob-content.w-richtext a:hover { color: #fff; }
.glob-content.w-richtext a:focus-visible { outline: 2px solid var(--brand--accent); outline-offset: 2px; }
@media screen and (max-width: 767px) {
  .glob-content.w-richtext,
  .glob-content.w-richtext p,
  .glob-content.w-richtext li { font-size: 17px; }
}

/* Logo strip heading (D5): "Trusted by top companies around the globe" is a section heading, not a caption. */
.logos-heading {
  margin: 0;
  color: #fff;
  font-family: Ibmplexmono, sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.3;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .logos-heading { font-size: 22px; }
}

/* Floating buttons and forms (D9): on tablet and phone widths a page with a form hides the Talk To The CEO, AI Chat and
   Search stack, so it can never cover a field, the Turnstile check or the submit button. Search and chat stay on every other page. */
@media screen and (max-width: 1023px) {
  body:has(form.glob-form) .fixed-call-nav1,
  body:has(form.glob-form) #s7-chat-fab,
  body:has(form.glob-form) #s7-fab-group { display: none !important; }
}

/* Technical pages: the FAQ, the closing call to action and the footer use the content frame's width, so the vertical frame
   lines and corner diamonds run straight down with no step (Ben, 9 Nov 2026, option A). The widths are the ones the content frame
   has in the Webflow sheet (.container-lines.padding-0.technical: 70.5rem, 80rem from 1440px, 90rem from 1920px). */
@media screen and (min-width: 1440px) {
  .main-wrapper:has(.container-lines.technical) .container-lines:not(.technical),
  .page-wrapper:has(.container-lines.technical) .footer .container-lines { max-width: 80rem; }
}
@media screen and (min-width: 1920px) {
  .main-wrapper:has(.container-lines.technical) .container-lines:not(.technical),
  .page-wrapper:has(.container-lines.technical) .footer .container-lines { max-width: 90rem; }
}

/* News items from other publications (/resource, type News): a source line above the text and a link to the original below it. */
.s7-source { margin: 0 0 1.5rem; color: #d9d9d9; font-size: 16px; line-height: 1.5; }
.s7-source_label { margin-right: 0.5rem; color: var(--text--alternate, #aaa); font-family: Ibmplexmono, sans-serif; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.s7-source_tag { margin-left: 0.5rem; padding: 2px 10px; border: 1px solid var(--border--white-36, rgba(255,255,255,.36)); border-radius: 999px; color: var(--text--alternate, #aaa); font-size: 13px; white-space: nowrap; }
.s7-original { margin: 1.75rem 0 0; font-size: 18px; }
.s7-original a { color: var(--brand--accent); text-decoration: underline; text-underline-offset: 0.18em; }
.s7-original a::after { content: " \2197"; text-decoration: none; display: inline-block; }

/* On-this-page TOC: Roman labels are visual markers only (Webflow icon box). */
.fs-toc_label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Technical pages, "On this page" list: the current entry in Sector7 blue, not the Webflow lime (Ben, 10 Nov 2026). */
.fs-toc_link-2.w--current, .fs-toc_link-2.w--current * { color: #3a9bf5 !important; }
.fs-toc_link-2.is-h3.w--current, .fs-toc_link-2.is-h3.w--current * { color: #8cc4fa !important; }