/* ==========================================================================
   Case study pages: the yellow theme over the legacy layout.
   Loaded after style.css and yellow.css. The legacy stylesheet still owns
   the grid, carousels and case study components; this file swaps their dark
   palette for cream paper and ink, and their fonts for Inter and Mouse Memoirs.
   ========================================================================== */

:root {
  --ink-1: var(--ink);
  --ink-2: rgba(20, 12, 10, .72);
  --ink-3: rgba(20, 12, 10, .6);
  --ink-4: rgba(20, 12, 10, .3);
  --body-text: var(--ink-soft);

  --rule-1: rgba(20, 12, 10, .1);
  --rule-2: rgba(20, 12, 10, .16);
  --surface-1: var(--card);

  /* Small accent text on cream: a darker orange keeps its contrast */
  --accent: #d93b2b;
  --accent-soft: #b4530a;

  --font-sans: var(--font-body);
}

body,
.unslate_co--site-inner { background: var(--paper); }

/* Revats: white page under the hero */
.cs-white,
.cs-white .unslate_co--site-inner { background: #fff; }

/* The legacy footer was fixed behind the page; the new one is in the flow */
.unslate_co--site-inner { margin-bottom: 0; }

/* Bootstrap turns hovered links blue */
a:hover { color: inherit; }

/* --- Hero -------------------------------------------------------------- */

/* Light blue, matched to the project shots, in place of the homepage yellow */
.cs-hero,
.site-nav:not(.is-scrolled) { background: #e2f4ff; }

.cs-hero {
  min-height: min(68svh, 640px);
  padding: clamp(3rem, 8vh, 5rem) 0;
}
.cs-hero .wrap { position: relative; z-index: 1; }

.cs-hero .cs-eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--font-body);
  color: rgba(20, 12, 10, .7);
}
.cs-hero .cs-eyebrow span { color: rgba(20, 12, 10, .35); }

.cs-hero h1 {
  font-size: clamp(4rem, 13vw, 9.5rem);
}

.cs-hero-sub {
  margin: .9rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: .01em;
}

.cs-hero .lede {
  max-width: 52ch;
  margin-top: 1.5rem;
}

/* --- Body copy --------------------------------------------------------- */

#portfolio-single-section,
#portfolio-single-section .grey-text,
#portfolio-single-section h1:not(.myfont),
#portfolio-single-section h3:not(.myfont),
#portfolio-single-section h4:not(.myfont),
#portfolio-single-section h5:not(.myfont) {
  font-family: var(--font-body);
  color: var(--ink);
}

/* Section titles take the display face */
#portfolio-single-section h1:not(.myfont) {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
}

#portfolio-single-section h3:not(.myfont),
#portfolio-single-section h4:not(.myfont) {
  font-weight: 700;
  letter-spacing: -.01em;
}

#portfolio-single-section .grey-text {
  color: var(--ink-soft);
  font-size: 1.1rem;
}
#portfolio-single-section .grey-text strong { color: var(--ink); }

#portfolio-single-section .text-white { color: var(--ink) !important; }

#portfolio-single-section a:not(.btn) {
  color: var(--ink);
  text-decoration-line: underline !important;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: .3em;
  text-underline-offset: -.05em;
  text-decoration-skip-ink: none;
}

.myfont,
.myfont2,
.myfont3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

/* Project details and captions */
.detail-v1 .detail-label,
#portfolio-single-section .detail-label { color: var(--ink-3); }
.detail-v1 .detail-val,
.detail-v1 .detail-val a { color: var(--ink); }

#portfolio-single-section img,
#portfolio-single-section figure img,
#portfolio-single-section .owl-carousel img { border-radius: var(--radius-sm); }

/* yellow.css makes images block-level, so .text-center no longer centres them */
#portfolio-single-section img {
  margin-left: auto;
  margin-right: auto;
}

/* Bootstrap badges */
#portfolio-single-section .badge {
  border: 1.5px solid var(--ink);
  background: var(--card) !important;
  color: var(--ink) !important;
  font-weight: 600;
}

/* --- Components -------------------------------------------------------- */

/* Cards share the homepage's ink outline */
.cs-surfaces > li,
.cs-stat,
.cs-compare-item,
.cs-panel {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.cs-surfaces > li:hover {
  border-color: var(--ink);
  background: var(--card);
  box-shadow: 0 4px 0 var(--ink);
}

.cs-surfaces > li.is-foundation {
  border-color: var(--ink);
  background: var(--yellow);
}
.cs-surfaces > li.is-foundation .cs-surface-meta,
.cs-surfaces > li.is-foundation .cs-surface-desc { color: rgba(20, 12, 10, .75); }

.cs-surface-meta { color: var(--accent-soft); }

.cs-audience-icon,
.cs-outcome-icon {
  border: 1.5px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
}

.cs-stat-num,
.cs-compare-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 5vw, 3.75rem);
  letter-spacing: .01em;
  color: var(--ink);
}
.cs-stat-label { color: var(--ink-soft); }
.cs-stat-label em { color: var(--accent-soft); }

.cs-compare-item.is-drop {
  border-color: var(--accent);
  background: #fdecea;
}
.cs-compare-item.is-drop .cs-compare-label,
.cs-compare-item.is-drop .cs-compare-num { color: var(--accent); }
.cs-compare-arrow { color: var(--ink-4); }

.cs-findings > li { border-left: 4px solid var(--yellow); }

.cs-panel-label { color: var(--ink-3); }

.cs-callout {
  border-left: 4px solid var(--yellow);
  background: var(--paper-deep);
}
.cs-callout strong,
.cs-audience-who { color: var(--ink); }

.cs-audience > li { border-top-color: var(--rule-1); }
.cs-audience > li:last-child { border-bottom-color: var(--rule-1); }

/* Rose pull quote (its base styles live in the page) */
#portfolio-single-section .rose-pullquote {
  border: 1.5px solid var(--ink);
  border-left-width: 6px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--yellow);
}
#portfolio-single-section .rose-pullquote::before {
  font-family: var(--font-display);
  color: rgba(20, 12, 10, .1);
}
#portfolio-single-section .rose-pullquote .myfont {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: var(--ink);
}
#portfolio-single-section .rose-pullquote .myfont i { color: var(--ink); }
#portfolio-single-section .rose-pullquote footer { border-top-color: rgba(20, 12, 10, .2); }
#portfolio-single-section .rose-pullquote-eyebrow,
#portfolio-single-section .rose-pullquote-note { color: rgba(20, 12, 10, .7); }
#portfolio-single-section .rose-pullquote-who { color: var(--ink); }

/* Carousel dots */
.owl-carousel .owl-dots .owl-dot span { background: var(--ink-4) !important; }
.owl-carousel .owl-dots .owl-dot.active span { background: var(--ink) !important; }

/* --- Page end ---------------------------------------------------------- */

.unslate_co--site-wrap > .cta { margin-top: clamp(3rem, 6vw, 5rem); }
.cta .display,
.site-footer .logo { color: var(--ink); }

/* The legacy theme sets buttons in tiny uppercase */
.btn {
  text-transform: none;
  letter-spacing: 0;
}

/* Bootstrap tints and pads .mark */
.mark {
  padding: 0 .06em;
  background-color: transparent;
}

/* The legacy theme strips every underline */
.contact-row a,
.footer-inner a:not(.logo) { text-decoration: underline !important; }

/* --- Vertical rhythm ----------------------------------------------------
   The markup mixes Bootstrap spacing utilities (mt-3, mt-5, mb-2, mb-4...)
   from heading to heading. These rules give every level one fixed spacing,
   so they need !important to beat the utilities. */

#portfolio-single-section h1:not(.myfont) {
  margin-top: clamp(4.5rem, 9vw, 7rem) !important;
  margin-bottom: 1.5rem !important;
  text-align: left;
}

#portfolio-single-section h3:not(.myfont),
#portfolio-single-section h4:not(.myfont) {
  margin-top: 3.25rem !important;
  margin-bottom: .75rem !important;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  line-height: 1.3;
}

/* A subheading straight after a section title or eyebrow sits close to it */
#portfolio-single-section h1 + h3,
#portfolio-single-section h1 + h4 { margin-top: 0 !important; }

#portfolio-single-section .grey-text { margin-bottom: 1.25rem !important; }

/* Lone labels above a subheading read as eyebrows, not captions */
#portfolio-single-section .detail-v1:has(+ h3),
#portfolio-single-section .detail-v1:has(+ h4) {
  max-width: var(--measure);
  margin: 3.25rem auto .6rem;
}
#portfolio-single-section .detail-v1:has(+ h3) .detail-label,
#portfolio-single-section .detail-v1:has(+ h4) .detail-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 !important;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-soft) !important;
}
#portfolio-single-section .detail-v1:has(+ h3) .detail-label::before,
#portfolio-single-section .detail-v1:has(+ h4) .detail-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
#portfolio-single-section .detail-v1:has(+ h3) + h3,
#portfolio-single-section .detail-v1:has(+ h4) + h4 { margin-top: 0 !important; }

/* Figures: equal room above and below, captions tucked under the image */
#portfolio-single-section figure {
  margin: 2.5rem 0 !important;
  padding-top: 0 !important;
}
#portfolio-single-section figure:has(+ .detail-v1) { margin-bottom: .75rem !important; }
#portfolio-single-section figure + .detail-v1 { margin-bottom: 2.5rem; text-align: center; }
#portfolio-single-section figure + .detail-v1 .detail-label {
  margin: 0 !important;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-3) !important;
}

/* Image wrappers carry their own stacked margins; the figure owns spacing now */
#portfolio-single-section .text-center.mx-auto {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Image grids: even gutters */
#portfolio-single-section .row > [class*="col-"] > figure { margin: .75rem 0 !important; }

/* --- Dark ending ---------------------------------------------------------
   Add .cs-dark-start to a section column and everything from it to the end
   of the case study turns dark; .cs-dark-end on <body> carries the dark on
   behind the CTA and footer. Those sections are siblings deep inside the
   Bootstrap grid, so the full-width background is a tall pseudo-element,
   clipped where the case study ends. */

.cs-dark-end { background: var(--ink); }
.cs-dark-end .unslate_co--site-inner { overflow: hidden; }

.cs-dark-start { position: relative; }
.cs-dark-start::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100000px;
  margin-left: -50vw;
  background: #140c0a;
}

/* Swap the tokens so text, rules and cards flip to light-on-dark */
.cs-dark-start,
.cs-dark-start ~ * {
  --ink: #f7f5ef;
  --ink-soft: rgba(247, 245, 239, .72);
  --card: rgba(255, 255, 255, .05);
  --paper-deep: rgba(255, 255, 255, .06);
  --ink-1: #f7f5ef;
  --ink-2: rgba(247, 245, 239, .75);
  --ink-3: rgba(247, 245, 239, .6);
  --ink-4: rgba(247, 245, 239, .3);
  --rule-1: rgba(247, 245, 239, .12);
  --rule-2: rgba(247, 245, 239, .2);
  --accent-soft: #ffb36b;
  color: var(--ink);
}

/* Yellow fills keep dark text */
.cs-dark-start .cs-outcome-icon,
.cs-dark-start ~ * .cs-outcome-icon,
.cs-dark-start .cs-audience-icon,
.cs-dark-start ~ * .cs-audience-icon { color: #140c0a; }

.cs-dark-start .cs-stat,
.cs-dark-start ~ * .cs-stat { border-color: rgba(247, 245, 239, .25); }

/* Footer on dark */
.cs-dark-end .footer-inner { color: rgba(247, 245, 239, .6); }
.cs-dark-end .footer-inner a,
.cs-dark-end .site-footer .logo { color: #f7f5ef; }