/*  /css/Custom/StrategyPage/strategy_styles.css
    Strategy Page template — rewrite, 2026-04-20

    Version marker: V14-TRIALBG-F6F6F9 (Canva-specified #f6f6f9 for the
    trial section bg, matching the form card)
    ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&display=swap');

main.strategy-page {
    /* ----- Design tokens ----- */
    --s-navy:           #333366;
    --s-ink:            #222222;
    --s-muted:          #555555;
    --s-panel:          #f5f5f7;
    --s-card-bg-start:  #eef2f8;
    --s-card-bg-end:    #f5f7fb;
    --s-input-border:   #d8dde6;

    --s-radius-lg:      20px;
    --s-radius-sm:      8px;
    --s-shadow-card:    0 20px 50px rgba(51, 51, 102, .10);
    --s-shadow-soft:    0 12px 30px rgba(51, 51, 102, .08);

    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    color: var(--s-ink);
}

main.strategy-page section,
main.strategy-page p,
main.strategy-page h1,
main.strategy-page h2,
main.strategy-page h3,
main.strategy-page h4,
main.strategy-page h5,
main.strategy-page h6,
main.strategy-page li,
main.strategy-page label,
main.strategy-page input,
main.strategy-page textarea,
main.strategy-page button {
    font-family: inherit;
}

main.strategy-page .font-libre--bold { font: inherit; }


/* ============================================================
   1. HERO
   Two-column: heading+underline+tagline (left) / laptop (right).
   ============================================================ */
.strategy-hero {
    background: #ffffff;
    padding: 60px 0 60px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 1px 15px rgba(51, 51, 102, .08);
}
.strategy-hero__bg { display: none !important; } /* legacy no-op */

.strategy-hero__inner { position: relative; }

.strategy-hero .strategy-hero__text { text-align: left; }

.strategy-hero h1.strategy-hero__heading {
    font-size: clamp(72px, 7.2vw, 104px);
    font-weight: 500;
    color: var(--s-navy);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 45px;
}

/* Underline sits at the bottom of the left column so align-items-end
   on the row aligns it with the bottom of the laptop image on the right. */
.strategy-hero div.strategy-hero__rule {
    display: block;
    width: 540px;
    max-width: 100%;
    height: 5px;
    background: var(--s-navy);
    margin: 0;
    border-radius: 3px;
}

/* Tagline now lives in its own full-width row under the two-column row. */
.strategy-hero__bottom {
    margin-top: 48px;
}
.strategy-hero p.strategy-hero__tagline {
    font-size: 22px;
    font-weight: 400;
    color: var(--s-navy);
    line-height: 1.5;
    max-width: 900px;
}

.strategy-hero__media { text-align: center; }

.strategy-hero__image {
    width: 100%;
    max-width: 680px;
    height: auto;
}


/* ============================================================
   2. STATEMENT
   Centered block, two lines, lead + italic emphasis.
   ============================================================ */
.strategy-statement {
    padding: 80px 0 0;
    text-align: center;
}

.strategy-statement__text {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.3;
    color: var(--s-navy);
    font-weight: 400;
    max-width: 960px;
    margin: 0 auto;
}

.strategy-statement__lead {
    display: inline;
    font-weight: 500;
}

.strategy-statement__emphasis {
    display: block;
    margin-top: 6px;
    font-style: italic;
    font-weight: 700;
}


/* ============================================================
   3. PROBLEM
   Two-column text + notebook; side controlled by Razor
   (existing problemImagePosition field).
   ============================================================ */
.strategy-problem {
    padding: 60px 0 0;
    background: #ffffff;
}

.strategy-problem__text {
    font-size: 22px;
    line-height: 1.7;
    color: var(--s-ink);
    font-weight: 400;
}
.strategy-problem__text p      { margin: 0 0 6px; font-size: inherit; }
.strategy-problem__text p:last-child { margin-bottom: 0; }
.strategy-problem__text strong { color: var(--s-navy); font-weight: 700; }

.strategy-problem__image-wrap { text-align: center; }
.strategy-problem__image {
    max-width: 620px;
    width: 100%;
    height: auto;
}


/* ============================================================
   4. CONTENT CARD SECTION (Slick carousel)
   Per slide: optional cardBackground behind, preview image
   overlapping top of white card by ~60px.
   ============================================================ */
.strategy-card-section {
    background: linear-gradient(180deg, var(--s-card-bg-start) 0%, var(--s-card-bg-end) 100%);
    padding: 0;
    position: relative;
}

.strategy-cards-carousel { position: relative; }

/* Pre-init stacking so content reads before Slick wires up. */
.strategy-cards-carousel:not(.slick-initialized) > .strategy-cards-carousel__slide + .strategy-cards-carousel__slide {
    margin-top: 60px;
}

/* Per-card decorative background (set by inline style from Razor).
   Slide is now full-viewport-width (container moved inside). */
.strategy-cards-carousel__slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 40px 0;
}

/* Preview image overlaps the card below. Right-aligned per Canva. */
.strategy-card__preview {
    text-align: right;
    margin-bottom: -115px;
    padding-right: 40px;
    position: relative;
    z-index: 2;
}
.strategy-card__preview img {
    max-width: 460px;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.strategy-card {
    background: #ffffff;
    border-radius: var(--s-radius-lg);
    padding: 90px 60px 60px;
    box-shadow: var(--s-shadow-card);
    position: relative;
    z-index: 1;
}

.strategy-card__category {
    color: var(--s-navy);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.strategy-card__body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--s-ink);
}
.strategy-card__body p      { margin: 0 0 14px; }
.strategy-card__body p:last-child { margin-bottom: 0; }
.strategy-card__body ul     { padding-left: 22px; margin: 0 0 14px; }
.strategy-card__body li     { margin-bottom: 6px; }
.strategy-card__body strong { color: var(--s-navy); font-weight: 700; }

/* Slick overflow override — scoped so other slick instances are unaffected. */
.strategy-cards-carousel.slick-initialized .slick-list,
.strategy-cards-carousel.slick-initialized .slick-track {
    overflow: visible;
}

/* Slick's auto-dots disabled — we render static dots in Razor instead
   so they show even when there is a single card. */
.strategy-cards-carousel .slick-dots { display: none !important; }

/* Static pagination (rendered in Razor, below the carousel in DOM).
   Visually pulled UP onto the card's bottom area using absolute positioning
   against .strategy-card-section (which is position: relative). We can't
   move the DOM inside .strategy-cards-carousel because Slick would treat
   it as another slide — absolute positioning is the clean workaround. */
.strategy-cards-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: 3;
    text-align: center;
    margin: 0;
    pointer-events: none;
}
.strategy-cards-pagination__dot {
    pointer-events: auto;
}
.strategy-cards-pagination__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 6px;
    border-radius: 50%;
    background: #c5cdd9;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.strategy-cards-pagination__dot:hover {
    transform: scale(1.2);
}
.strategy-cards-pagination__dot.is-active {
    background: var(--s-navy);
}


/* ============================================================
   5. TRIAL — headline + Smart Actions image (left col)
                form panel (right col)
   Column ratio 5/7 is set in Razor.
   ============================================================ */
.strategy-trial {
    padding: 60px 0 60px;
}

.strategy-trial__headline {
    font-size: 24px;
    line-height: 1.5;
    color: var(--s-ink);
    font-weight: 500;
}
.strategy-trial__headline p       { margin: 0 0 12px; }
.strategy-trial__headline p:last-child { margin-bottom: 0; }
.strategy-trial__headline strong  { color: var(--s-navy); font-weight: 700; }

.strategy-trial__image-wrap {
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.strategy-trial__image {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* ---- Form wrap ----
   The trial form renders via the DigitalFirst2026 Umbraco Forms theme,
   which outputs a .df2026-form element styled by
   /css/Custom/Form/df2026-form.css. This outer wrapper is just a
   positioning anchor — no visual styling of its own. */
.strategy-trial__form-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    height: 100%;
}


/* ============================================================
   6. RESPONSIVE — keep mobile usable.
   Canva-faithful mobile is a later pass.
   ============================================================ */
@media (max-width: 1199.98px) {
    .strategy-card            { padding: 80px 44px 48px; }
}

@media (max-width: 991.98px) {
    .strategy-hero            { text-align: center; }
    .strategy-hero .strategy-hero__text { text-align: center; }
    .strategy-hero h1.strategy-hero__heading { font-size: clamp(56px, 10vw, 84px); }
    .strategy-hero div.strategy-hero__rule  { margin-left: auto; margin-right: auto; }
    .strategy-hero p.strategy-hero__tagline { margin-left: auto; margin-right: auto; }
    .strategy-hero__media     { margin-top: 30px; }

    .strategy-card            { padding: 72px 32px 40px; }
    .strategy-card__preview   { margin-bottom: -50px; }
    .strategy-card__preview img { max-width: 400px; }

    .strategy-trial__headline { font-size: 20px; }
    .strategy-trial__form-wrap { padding: 28px; }
}

@media (max-width: 575.98px) {
    .strategy-hero h1.strategy-hero__heading { font-size: 48px; }
    .strategy-hero div.strategy-hero__rule   { width: 220px; height: 4px; margin-bottom: 28px; }
    .strategy-hero p.strategy-hero__tagline  { font-size: 16px; }

    .strategy-statement__text { font-size: 20px; }
    .strategy-problem__text   { font-size: 17px; }

    .strategy-card            { padding: 60px 20px 32px; border-radius: 16px; }
    .strategy-card__category  { font-size: 16px; letter-spacing: 1.5px; }
    .strategy-card__body      { font-size: 16px; }

    .strategy-trial__form-wrap { padding: 22px; border-radius: 16px; }
}