/* ============================================================
   Case Study  (page-case-study.php)
   Design: "VW Case Study Template" (Figma), desktop frame 1440px,
   content column 1040px. Values below are the design's own; fluid
   sizes are clamp()s that land exactly on the design at 1440px.
   Everything is scoped to .vw-cs — bootstrap/custom.css load on
   every page, so element defaults are restated here.
   ============================================================ */

.vw-cs {
    --cs-dark: #1D1616;
    --cs-orange: #ED5A00;
    --cs-orange-10: rgba(237, 90, 0, 0.10);
    --cs-text: #4A4545;
    --cs-muted: #6B6363;
    --cs-label: #878A91;
    --cs-soft: #CFC8C6;
    --cs-bg: #EFEEEF;
    --cs-card: #FFFFFF;
    --cs-line: rgba(29, 22, 22, 0.07);
    --cs-f-reg: "Saans-Regular", "Saans-Regular-fb", Arial, sans-serif;
    --cs-f-med: "Saans-Medium", "Saans-Medium-fb", Arial, sans-serif;
    --cs-f-semi: "Saans-SemiBold", "Saans-SemiBold-fb", Arial, sans-serif;
    --cs-gutter: clamp(20px, 4vw, 40px);
    --cs-gap-xl: clamp(56px, 5.56vw, 80px);   /* 80px at 1440 */

    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: var(--cs-f-reg);
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Restate the element defaults bootstrap/custom.css would otherwise impose.
   :where() keeps these at element-level specificity (0,0,1): they beat bootstrap's
   element rules (this file loads later) but never the component classes below. */
:where(.vw-cs) :is(h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure) {
    margin: 0;
    padding: 0;
}
:where(.vw-cs) :is(h1, h2, h3) { font-weight: normal; }
:where(.vw-cs) :is(ul, ol) { list-style: none; }
:where(.vw-cs) :is(strong, b) { font-family: var(--cs-f-semi); font-weight: normal; }
.vw-cs *, .vw-cs *::before, .vw-cs *::after { box-sizing: border-box; }

.vw-cs__container {
    width: min(1040px, 100% - 2 * var(--cs-gutter));
    margin: 0 auto;
}

.vw-cs-hl { color: var(--cs-orange); }

.vw-cs-icon {
    display: block;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------
   Rich text (ACF wysiwyg output)
   ------------------------------------------------------------ */
.vw-cs-prose {
    font-size: 18px;
    line-height: 1.6;            /* 28.8px */
    color: var(--cs-text);
}
.vw-cs-prose p + p,
.vw-cs-prose p + ul,
.vw-cs-prose ul + p { margin-top: 1.6em; }   /* one blank line, as in the design */
.vw-cs-prose ul { padding-left: 1.2em; list-style: disc; }
.vw-cs-prose ol { padding-left: 1.4em; list-style: decimal; }
.vw-cs-prose li { list-style: inherit; }     /* custom.css hides bullets on every "ul li" */
.vw-cs-prose li + li { margin-top: 0.4em; }
.vw-cs-prose a {
    color: var(--cs-orange);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
    transition: color 0.2s ease;
}
.vw-cs-prose a:hover,
.vw-cs-prose a:focus-visible { color: var(--cs-dark); }

/* ------------------------------------------------------------
   Hero — dark with the design's orange glow (hardcoded)
   ------------------------------------------------------------ */
.vw-cs-hero {
    position: relative;
    overflow: hidden;
    background: var(--cs-dark);
    color: #FFFFFF;
    /* The site header floats over the page (position:absolute) — clear it,
       then the design's 63px gap above the badges. */
    padding: clamp(120px, calc(66px + 5.9vw), 151px) 0 clamp(56px, 6.5vw, 94px);
}
.vw-cs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background: radial-gradient(1220px 955px at 50% calc(100% + 151px),
        var(--cs-orange) 20%, rgba(237, 90, 0, 0) 65%);
    pointer-events: none;
}
.vw-cs-hero > .vw-cs__container { position: relative; }

.vw-cs-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(26px, 2.77vw, 40px);
}
.vw-cs-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--cs-orange);
    border-radius: 999px;
    font-family: var(--cs-f-semi);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.12em;      /* 1.44px */
    text-transform: uppercase;
    color: #FFFFFF;
}
.vw-cs-badge--solid { background: var(--cs-orange); }
.vw-cs-badge--outline { border-color: rgba(255, 255, 255, 0.25); }

.vw-cs-hero__title {
    max-width: 880px;
    font-family: var(--cs-f-semi);
    font-size: clamp(32px, 5.28vw, 76px);
    line-height: 1.02;           /* 77.52px */
    letter-spacing: -0.028em;    /* -2.13px */
    color: #FFFFFF;
}
.vw-cs-hero__meta {
    margin-top: clamp(24px, 2.74vw, 39.5px);
    font-size: clamp(16px, 1.32vw, 19px);
    line-height: 1.16;
    color: var(--cs-soft);
}

.vw-cs-hero__pdf { margin-top: 28px; }
.vw-cs-pdf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-family: var(--cs-f-semi);
    font-size: 15px;
    line-height: 1;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vw-cs-pdf .vw-cs-icon { width: 18px; height: 18px; }
.vw-cs-pdf:hover,
.vw-cs-pdf:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--cs-dark); }

/* ------------------------------------------------------------
   Facts row
   ------------------------------------------------------------ */
.vw-cs-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-top: 36px;
}
.vw-cs-facts__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--cs-orange);
}
.vw-cs-facts__label {
    font-family: var(--cs-f-semi);
    font-size: 11.5px;
    line-height: 1.13;
    letter-spacing: 0.12em;      /* 1.38px */
    text-transform: uppercase;
    color: var(--cs-label);
}
.vw-cs-facts__value {
    font-family: var(--cs-f-semi);
    font-size: 18px;
    line-height: 1.25;
    color: var(--cs-dark);
}
.vw-cs-facts__sub {
    font-size: 15px;
    line-height: 1.35;
    color: var(--cs-muted);
}

/* ------------------------------------------------------------
   Intro + key takeaways
   ------------------------------------------------------------ */
.vw-cs-intro { padding-top: clamp(44px, 4.5vw, 64.8px); }
.vw-cs-intro__text {
    font-size: clamp(18px, 1.39vw, 20px);
    line-height: 1.6;            /* 32px */
    color: var(--cs-dark);
}
.vw-cs-takeaways {
    margin-top: clamp(32px, 3.06vw, 44px);
    padding: 28px 32px 40px;
    background: var(--cs-card);
    border: 1px solid var(--cs-line);
    border-radius: 20px;
}
.vw-cs .vw-cs-takeaways__label {
    margin-bottom: 18px;
    font-family: var(--cs-f-semi);
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: 0.14em;      /* 1.68px */
    text-transform: uppercase;
    color: var(--cs-orange);
}
.vw-cs-takeaways__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 32px;
}
.vw-cs-takeaways__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vw-cs-takeaways__check {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    padding: 5.5px;
    border-radius: 50%;
    background: var(--cs-orange);
    color: #FFFFFF;
}
.vw-cs-takeaways__text {
    max-width: 352px;
    font-size: 16.5px;
    line-height: 1.5;            /* 24.75px */
}

/* ------------------------------------------------------------
   Numbered sections — kicker + H2
   ------------------------------------------------------------ */
.vw-cs-sec { padding-top: var(--cs-gap-xl); }
.vw-cs-sec--challenge   { padding-top: clamp(48px, 4.3vw, 62px); }
.vw-cs-sec--security    { padding-top: clamp(52px, 4.8vw, 69px); }
.vw-cs-sec--partnership { padding-top: clamp(52px, 4.93vw, 71px); }

.vw-cs-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.vw-cs-kicker__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cs-orange);
    font-family: var(--cs-f-semi);
    font-size: 12px;
    line-height: 1;
    color: #FFFFFF;
}
.vw-cs-kicker__label {
    font-family: var(--cs-f-semi);
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: 0.14em;      /* 1.68px */
    text-transform: uppercase;
    color: var(--cs-orange);
}
.vw-cs-h2 {
    margin-bottom: 16px;
    font-family: var(--cs-f-semi);
    font-size: clamp(30px, 2.92vw, 42px);
    line-height: 1.08;           /* 45.36px */
    letter-spacing: -0.02em;     /* -0.84px */
    color: var(--cs-dark);
}

/* ------------------------------------------------------------
   Stat cards (dark)
   ------------------------------------------------------------ */
.vw-cs-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.vw-cs-stats--lg { margin-top: 24px; }
.vw-cs-stats--md { margin-top: 16px; }
.vw-cs-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 28px;
    border-radius: 18px;
    background: var(--cs-dark);
}
.vw-cs-stats--md .vw-cs-stat { padding: 24px 26px; }
.vw-cs-stat__value {
    font-family: var(--cs-f-semi);
    font-size: clamp(40px, 3.89vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;     /* -1.68px */
    color: #FFFFFF;
}
.vw-cs-stats--md .vw-cs-stat__value { font-size: clamp(36px, 3.33vw, 48px); }
.vw-cs-stat__desc {
    max-width: 15em;
    font-size: 16px;
    line-height: 1.35;
    color: var(--cs-soft);
}
.vw-cs-stats--md .vw-cs-stat__desc { font-size: 15.5px; }

/* ------------------------------------------------------------
   Challenge — pull quote
   ------------------------------------------------------------ */
.vw-cs-callout {
    max-width: 820px;
    margin-top: clamp(48px, 5.6vw, 81px);
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--cs-orange);
}
.vw-cs-callout p {
    font-family: var(--cs-f-semi);
    font-size: clamp(21px, 1.81vw, 26px);
    line-height: 1.3;            /* 33.8px */
    letter-spacing: -0.01em;
    color: var(--cs-dark);
}
.vw-cs-callout-after {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--cs-text);
}

/* ------------------------------------------------------------
   Solution — part cards
   ------------------------------------------------------------ */
.vw-cs-prose--intro { max-width: 900px; }
.vw-cs-parts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}
.vw-cs-part {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px;
    background: var(--cs-card);
    border: 1px solid var(--cs-line);
    border-radius: 18px;
}
.vw-cs-part__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    padding: 12px;
    border-radius: 14px;
    background: var(--cs-orange);
    color: #FFFFFF;
}
.vw-cs-part__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.vw-cs-part__label {
    font-family: var(--cs-f-semi);
    font-size: 11.5px;
    line-height: 1.13;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-label);
}
.vw-cs .vw-cs-part__title {
    font-family: var(--cs-f-semi);
    font-size: 21px;
    line-height: 26px;
    letter-spacing: -0.01em;
    color: var(--cs-dark);
}
.vw-cs-part__text {
    padding-top: 3.5px;
    font-size: 16.5px;
    line-height: 1.6;            /* 26.4px */
}

/* ------------------------------------------------------------
   Results — orange box
   ------------------------------------------------------------ */
.vw-cs-results {
    margin-top: clamp(40px, 3.79vw, 54.5px);
    padding: clamp(28px, 3.33vw, 48px);
    border-radius: 30px;
    background: var(--cs-orange);
    color: #FFFFFF;
}
.vw-cs-results .vw-cs-kicker { margin-bottom: 14px; }
.vw-cs-results .vw-cs-kicker__num { background: #FFFFFF; color: var(--cs-orange); }
.vw-cs-results .vw-cs-kicker__label,
.vw-cs-results .vw-cs-h2,
.vw-cs-results .vw-cs-prose { color: #FFFFFF; }
.vw-cs-results .vw-cs-h2 { margin-bottom: 21px; }
.vw-cs-results .vw-cs-prose p + p { margin-top: 0; }   /* design: no gap inside the box */
.vw-cs-results .vw-cs-prose a { color: #FFFFFF; }
.vw-cs-results .vw-cs-prose a:hover { color: var(--cs-dark); }

/* ------------------------------------------------------------
   Testimonial — dark card with orange glow (hardcoded)
   ------------------------------------------------------------ */
.vw-cs-quote {
    position: relative;
    overflow: hidden;
    margin-top: clamp(32px, 3vw, 43px);
    padding: clamp(28px, 3.61vw, 52px);
    border-radius: 30px;
    background: var(--cs-dark);
    color: #FFFFFF;
    isolation: isolate;
}
.vw-cs-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.9;
    background: radial-gradient(732px 432px at 50% calc(100% + 58px),
        var(--cs-orange) 0%, rgba(237, 90, 0, 0) 75%);
    pointer-events: none;
}
.vw-cs-quote__mark {
    display: block;
    height: 50.5px;
    margin-bottom: -15.5px;
    font-family: var(--cs-f-semi);
    font-size: 84px;
    line-height: 0.6;            /* 50.4px */
    color: var(--cs-orange);
}
.vw-cs-quote__text p {
    font-family: var(--cs-f-med);
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.5;            /* 34.5px */
    color: #FFFFFF;
}
.vw-cs-quote__by {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
}
.vw-cs-quote__rule {
    flex: 0 0 55px;
    height: 2px;
    background: var(--cs-orange);
}
.vw-cs-quote__who {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.vw-cs-quote__name {
    font-family: var(--cs-f-med);
    font-size: 21px;
    line-height: 1.14;
    color: #FFFFFF;
}
.vw-cs-quote__role {
    font-size: 15px;
    line-height: 1.2;
    color: var(--cs-soft);
}

/* ------------------------------------------------------------
   Lessons — numbered tips
   ------------------------------------------------------------ */
.vw-cs-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.vw-cs-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    background: var(--cs-card);
    border: 1px solid var(--cs-line);
    border-radius: 16px;
}
.vw-cs-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cs-orange);
    font-family: var(--cs-f-semi);
    font-size: 14px;
    line-height: 1;
    color: #FFFFFF;
}
.vw-cs-step__body {
    display: flex;
    flex-direction: column;
    gap: 3.4px;
    min-width: 0;
}
.vw-cs .vw-cs-step__title {
    font-family: var(--cs-f-semi);
    font-size: 18px;
    line-height: 1.25;
    color: var(--cs-dark);
}
.vw-cs-step__text {
    max-width: 362px;
    font-size: 15.5px;
    line-height: 1.5;            /* 23.25px */
}
.vw-cs-prose--closing {
    margin-top: 23px;
    font-size: 17px;
    line-height: 1.6;            /* 27.2px */
}

/* ------------------------------------------------------------
   About — feature cards
   ------------------------------------------------------------ */
.vw-cs-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(48px, 5.3vw, 76px);
}
.vw-cs-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
    background: var(--cs-card);
    border: 1px solid var(--cs-line);
    border-radius: 16px;
}
.vw-cs-feature__icon {
    width: 42px;
    height: 42px;
    padding: 11px;
    border-radius: 12px;
    background: var(--cs-orange-10);
    color: var(--cs-orange);
}
.vw-cs-feature__text {
    font-family: var(--cs-f-semi);
    font-size: 16.5px;
    line-height: 1.25;           /* 20.63px */
    color: var(--cs-dark);
}

/* Space before the full-width CTA band */
.vw-cs__body { padding-bottom: clamp(56px, 5.4vw, 78px); }

/* ------------------------------------------------------------
   CTA band — full-width orange
   ------------------------------------------------------------ */
.vw-cs-cta {
    background: var(--cs-orange);
    color: #FFFFFF;
}
.vw-cs-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 7.3vw, 105px);
    padding: clamp(52px, 5vw, 72px) 0;
}
.vw-cs-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 27px;
    max-width: 751px;
    padding-bottom: 22px;        /* design text frame runs 22px past the text; keeps the button centred */
}
.vw-cs .vw-cs-cta__title {
    font-family: var(--cs-f-semi);
    font-size: clamp(30px, 3.06vw, 44px);
    line-height: 1.08;           /* 47.52px */
    letter-spacing: -0.025em;    /* -1.1px */
    color: #FFFFFF;
}
.vw-cs-cta__text {
    font-size: 17px;
    line-height: 1.55;           /* 26.35px */
    color: #FFFFFF;
}
.vw-cs-cta__btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
    height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: var(--cs-f-semi);
    font-size: 16px;
    line-height: 1;
    color: var(--cs-dark);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.vw-cs-cta__btn .vw-cs-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}
.vw-cs-cta__btn:hover,
.vw-cs-cta__btn:focus-visible {
    background: var(--cs-dark);
    color: #FFFFFF;
}
.vw-cs-cta__btn:hover .vw-cs-icon { transform: translateX(3px); }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1060px) {
    .vw-cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
    .vw-cs-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .vw-cs-cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
    .vw-cs-takeaways { padding: 24px 22px 28px; }
    .vw-cs-takeaways__list,
    .vw-cs-steps { grid-template-columns: minmax(0, 1fr); }
    .vw-cs-step__text { max-width: none; }
    .vw-cs-stats { grid-template-columns: minmax(0, 1fr); }
    .vw-cs-stat { padding: 22px 24px; }
    .vw-cs-prose { font-size: 17px; }
}

@media (max-width: 640px) {
    .vw-cs-part { flex-direction: column; gap: 14px; padding: 22px 20px; }
    .vw-cs-part__icon { flex-basis: auto; }
    .vw-cs-quote__by { padding-top: 28px; }
    .vw-cs-features { grid-template-columns: minmax(0, 1fr); }
    .vw-cs-feature { flex-direction: row; align-items: center; padding: 16px 18px; }
}

@media (max-width: 480px) {
    .vw-cs-facts { grid-template-columns: minmax(0, 1fr); }
}