/* ======================================================================
   Sauce Case Study  -  v1.17.3
   Shortcode: [sauce_case_study]   (prefix: scs)
   Blocks for the dynamic middle of a case study page. Everything sits on
   --scs-w (850px); only the impact panel widens to --scs-wide (1050px).
   Two fonts only: the theme heading font on the big numbers and the quote,
   the theme body font everywhere else. The timeline accordion is native
   <details>, no JS.
   ====================================================================== */

.sauce-cs {
    --scs-w:      850px;      /* every block */
    --scs-wide:   1050px;     /* impact panel only */
    --scs-gap:    60px;       /* space between blocks */
    --scs-text:   #121212;
    --scs-muted:  #6b6b6b;
    --scs-blue:   #4E7B99;
    --scs-accent: #FF5338;
    --scs-plum:   #440E26;
    --scs-sky:    #D9E6ED;
    --scs-rule:   #4E7B994D;
    /* Heading font comes from the theme so the site keeps its two faces. */
    --scs-font-head: "Adrianna Extended";

    color: var(--scs-text);
    width: 100%;
}

/* !important throughout: the theme sets margins on these elements from several
   directions and wins on specificity otherwise. */
.scs__block {
    max-width: var(--scs-w);
    margin: 0 auto var(--scs-gap) !important;
    box-sizing: border-box;
    padding: 0;
}
.sauce-cs > .scs__block:last-child { margin-bottom: 0 !important; }

/* The quote and the image are <figure>, which the browser and the theme give
   their own margins. Same specificity fight for both, settled once. */
.sauce-cs figure.scs__block {
    margin: 0 auto var(--scs-gap) !important;
    padding: 50px 0;
}

/* ── Heading + text ──────────────────────────────────────────────────── */
.scs__eyebrow,
.scs__section-label {
    margin: 0 0 18px;
    color: var(--scs-blue);
    font-size: 16px;
	font-family: var(--scs-font-head);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.scs__heading { margin: 0 0 20px; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3; text-transform: unset; color: var(--scs-text); }
.scs__body    { line-height: 1.65; color: var(--scs-text); font-weight: 400;}
.scs__body > *:first-child { margin-top: 0; }
.scs__body > *:last-child  { margin-bottom: 0; }
.scs__body a  { color: var(--scs-blue); }

/* ── Arrow headline ──────────────────────────────────────────────────── */
.scs__ahead {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--scs-text);
}
.scs__ahead-dot {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--scs-accent);
}
.scs__ahead-text {
	flex: 0 0 auto;
	font-family: var(--scs-font-head);
}
.scs__ahead-rule {
    flex: 1 1 80px;
    min-width: 60px;
    height: 1px;
    background: currentColor;
    position: relative;
}
/* Arrowhead, same CSS triangle trick as the Texts with Arrow widget. */
.scs__ahead-rule::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 10px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* ── Divider ─────────────────────────────────────────────────────────── */
.scs__rule {
    border: 0;
    border-top: 1px solid var(--scs-rule);
    height: 0;
    margin-top: 0;
    background: none;
}

/* ── Quote ───────────────────────────────────────────────────────────── */
.scs__quote {
    text-align: center;
    border-top: 1px solid var(--scs-rule);
    border-bottom: 1px solid var(--scs-rule);
}
/* Theme blockquotes carry an indent, a rule and their own colour. Reset. */
.scs__quote-text {
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    max-width: 24ch;
    font-family: var(--scs-font-head);
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.35;
    font-weight: 600;
    font-style: normal;
    color: var(--scs-text);
    text-align: center;
}
/* Quote marks are styling, so editors do not type them. */
.scs__quote-text::before { content: '\201C'; }
.scs__quote-text::after  { content: '\201D'; }
.scs__quote figcaption { display: block; margin-top: 28px; }
.scs__quote-by  { display: block; font-style: italic; color: var(--scs-text); font-weight: 400; }
.scs__quote-by::before { content: '\2014\00a0'; }
.scs__quote-src { display: block; margin-top: 8px; color: var(--scs-text); font-size: 14px; font-weight: 400; opacity: 0.5;}

/* ── Stats row ───────────────────────────────────────────────────────── */
/* Three up by default; exactly four stats get their own row of four. */
.scs__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.scs__stats--4 { grid-template-columns: repeat(4, 1fr); }
.scs__stat-value {
    display: block;
    font-family: var(--scs-font-head);
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
    color: var(--scs-text);
}
.scs__stat-label { display: block; margin-top: 12px; color: var(--scs-text); }

/* ── Coloured cards ──────────────────────────────────────────────────── */
.scs__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.scs__card { padding: 32px; box-sizing: border-box; }
.scs__card-title {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.3;
    color: inherit;          /* the card's own text colour wins */
}
.scs__card-text { margin: 0; line-height: 1.55; color: inherit; font-weight: 400;}

/* ── Image ───────────────────────────────────────────────────────────── */
.scs__figure { text-align: center; }
.scs__figure img { display: block; width: 100%; height: auto; }
.scs__figure figcaption { margin-top: 16px; color: var(--scs-muted); font-size: 15px; }

/* ── Arrow list ──────────────────────────────────────────────────────── */
.scs__arrows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
}
.scs__arrows li { display: flex; align-items: center; gap: 16px; color: var(--scs-text); }
.scs__arrow { flex: 0 0 auto; width: 28px; color: var(--scs-accent); }
.scs__arrow svg { width: 100%; height: auto; display: block; }

/* ── Spotlight card ──────────────────────────────────────────────────── */
.scs__spot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: var(--scs-plum);
    color: #fff;
    padding: 44px;
}
.scs__spot-eyebrow {
    margin: 0 0 20px;
    color: var(--scs-accent);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
	font-family: var(--scs-font-head);
}
.scs__spot-title {
    margin: 0 0 32px;
    color: #fff;
    font-size: clamp(20px, 2.4vw, 24px);
    line-height: 1.25;
	text-transform: unset;
}
.scs__spot-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 15px;
	font-family: var(--scs-font-head);
}
.scs__spot-thumb img { display: block; width: 100%; height: auto; }

.scs__circle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--scs-accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.scs__circle svg { width: 16px; height: 16px; }

/* ── Timeline (native <details>, no JS) ──────────────────────────────── */
/* Every measurement is a variable: the reference is a design export, so these
   are read off it by eye and will want nudging against the live type. */
.scs__tl {
    --scs-dot:      12px;     /* the solid round marker */
    --scs-dot-top:  34px;     /* lines the dot up with the first line of the title */
    --scs-rail:     40px;     /* text indent: dot plus the gap to the text */
    --scs-rail-dot: 2px;      /* one dot of the vertical dotted line */
    --scs-rail-gap: 8px;      /* gap between those dots */
    --scs-tl-pad:   28px;     /* breathing room above and below each row */
    --scs-tl-mark:  44px;     /* right gutter for the + / - toggle */
}
.scs__tl-item {
    position: relative;
    padding: 0 0 0 var(--scs-rail);
}
/* Dot, drawn over the rail. */
.scs__tl-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--scs-dot-top);
    width: var(--scs-dot);
    height: var(--scs-dot);
    border-radius: 50%;
    background: var(--scs-text);
    z-index: 1;
}
/* The rail is a repeating background rather than a dotted border: a CSS dotted
   border draws its dots and gaps 1:1, which is far denser than the design. This
   way the dot size and the gap are set independently. It spans the whole row so
   it joins up across rows, starting under the first dot and stopping at the last. */
.scs__tl-item::after {
    content: '';
    position: absolute;
    left: calc(var(--scs-dot) / 2 - var(--scs-rail-dot) / 2);
    top: 0;
    bottom: 0;
    width: var(--scs-rail-dot);
    background-image: radial-gradient(
        circle,
        var(--scs-text) calc(var(--scs-rail-dot) / 2),
        transparent calc(var(--scs-rail-dot) / 2)
    );
    background-size: var(--scs-rail-dot) calc(var(--scs-rail-dot) + var(--scs-rail-gap));
    background-repeat: repeat-y;
}
.scs__tl-item:first-child::after { top: calc(var(--scs-dot-top) + var(--scs-dot) + var(--scs-rail-gap)); }
.scs__tl-item:last-child::after  { bottom: auto; height: calc(var(--scs-dot-top) - var(--scs-rail-gap)); }
.scs__tl-item:first-child:last-child::after { display: none; }

/* The row divider starts at the text, not out at the dots, so it sits on the
   head when the row is closed and under the body when it is open. */
.scs__tl-head {
    display: block;
    padding: var(--scs-tl-pad) var(--scs-tl-mark) var(--scs-tl-pad) 0;
    cursor: pointer;
    position: relative;
    list-style: none;
    border-bottom: 1px solid var(--scs-rule);
}
.scs__tl-item[open] > .scs__tl-head { border-bottom: 0; }
.scs__tl-item--flat .scs__tl-head { cursor: default; }
.scs__tl-head::-webkit-details-marker { display: none; }
.scs__tl-title { display: block; font-size: 19px; line-height: 1.3; color: var(--scs-text); font-family: var(--scs-font-head);}
.scs__tl-meta  { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--scs-text); }

/* Plus / minus toggle, drawn in CSS so there is nothing to script. */
.scs__tl-item > .scs__tl-head::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    line-height: 1;
    color: var(--scs-text);
}
.scs__tl-item--flat > .scs__tl-head::after { content: none; }
.scs__tl-item[open] > .scs__tl-head::after { content: '\2212'; }

.scs__tl-body {
    padding: 0 var(--scs-tl-mark) calc(var(--scs-tl-pad) + 8px) 0;
    border-bottom: 1px solid var(--scs-rule);
    line-height: 1.55;
    font-size: 14px;
    font-weight: 400;
    color: var(--scs-text);
}

/* ── Impact panel (the one block that runs wide) ─────────────────────── */
.scs__impact-wrap { max-width: var(--scs-wide); }
.scs__impact { background: var(--scs-sky); padding: 60px; }
.scs__impact-heading {
    margin: 0 0 44px;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--scs-text);
}
.scs__impact-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.scs__impact-col {
    padding: 0 20px;
    border-left: 1px solid #4E7B994D;
}
.scs__impact-label { display: block; color: var(--scs-blue); font-size: 16px; }
.scs__impact-value {
    display: block;
    margin: 48px 0 18px;
    font-family: var(--scs-font-head);
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
    color: var(--scs-text);
}
.scs__impact-text { margin: 0; line-height: 1.55; font-weight: 400; color: var(--scs-text); }

.scs__impact-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #121212;
    color: #fff;
    text-decoration: none;
    padding: 22px 60px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 15px;
}
.scs__impact-bar:hover {
	color: #D9E6ED;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sauce-cs { --scs-gap: 56px; }
    .scs__impact { padding: 36px; }
    .scs__impact-cols { grid-template-columns: 1fr; gap: 28px; }
    .scs__impact-col { border-left: 0; border-top: 1px solid rgba(18, 18, 18, 0.25); padding: 20px 0 0; }
    .scs__impact-value { margin: 16px 0 12px; }
    .scs__spot { grid-template-columns: 1fr; padding: 32px; }
}
@media (max-width: 767px) {
    .scs__cards,
    .scs__arrows { grid-template-columns: 1fr; }
    .scs__stats,
    .scs__stats--4 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .scs__ahead { flex-wrap: wrap; gap: 12px; font-size: 12px; }
    .scs__ahead-rule { flex-basis: 40px; min-width: 40px; }
    .scs__impact-bar { padding: 18px 24px; }
}