/* ==========================================================================
   Case studies — Stripe-inspired visual layer (5 Oct 2026)
   Loaded last on every case study, after case-study.css, the page's own
   stylesheet and related-projects.css. Same language as the homepage theme
   (../../assets/theme-stripe.css): navy ink, one violet accent, light
   display type, 4px buttons, 8px hairline cards and the silk ribbon behind
   the hero. Light backgrounds only on these pages: white and the pale
   surface, no navy bands. The numbered badges keep their #F40F48 secondary
   colour. Content and markup are unchanged; remove this file's <link> on a
   page to return it to the previous look.
   ========================================================================== */

:root {
  --color-primary: #533AFD;
  --color-primary-hover: #4232D4;
  --color-heading: #061B31;           /* ink · 17.6:1 on white */
  --color-text: #50617A;              /* body · 6.3:1 on white, 6.0:1 on surface */
  --color-surface: #F8FAFD;
  --color-hairline: rgb(6 27 49 / 0.08);
  --color-hairline-strong: rgb(6 27 49 / 0.14);
  --color-border: #E3E8EF;
  --color-border-accent: #D6D9FC;
  --color-primary-tint: rgb(83 58 253 / 0.08);

  --weight-heading: 400;   /* raised from 300 on request: a touch bolder than Stripe */
  --radius-pill: 4px;
  --radius-inner: 6px;
  --radius-outer: 8px;

  --ring: 0 0 0 1px var(--color-border);
  --shadow-1: 0 1px 2px rgb(6 27 49 / 0.04);
  --shadow-2: 0 13px 27px -5px rgb(50 50 93 / 0.18), 0 8px 16px -8px rgb(0 0 0 / 0.16);
  --shadow-float: 0 50px 100px -20px rgb(50 50 93 / 0.25), 0 30px 60px -30px rgb(0 0 0 / 0.3);
  --shadow-primary: none;
  --nav-offset: 0px;
  --nav-height: 4rem;
}

body::before {
  background-image: repeating-linear-gradient(to right, rgb(6 27 49 / 0.06) 0, rgb(6 27 49 / 0.06) 1px, transparent 1px, transparent 25%);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.h1, .h2, .h3 { font-weight: var(--weight-heading); color: var(--color-heading); }
.h1 { letter-spacing: -0.03em; }
.h2 { letter-spacing: -0.025em; }
.persona-card .h3, .principle-title, .method .h3, .result .h3 {
  font-size: 1.375rem;
  font-weight: var(--weight-heading);
  --lh: 1.25;
  letter-spacing: -0.015em;
}
.process-step .h3, .spec-head .h3, .pricing-card .h3 { font-weight: var(--weight-heading); }

/* Small violet label instead of a pill. */
.eyebrow {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
}
.meta-grid dt, .spec-fields dt { letter-spacing: 0.04em; }
strong { color: var(--color-heading); }

/* --------------------------------------------------------------------------
   Header: full-width white glass bar with a hairline, instead of the pill
   -------------------------------------------------------------------------- */
.site-header {
  padding: 0 var(--gutter);
  background: rgb(255 255 255 / 0.84);
  box-shadow: 0 1px 0 var(--color-border);
  pointer-events: auto;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
  .site-header_row { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header::before { display: none; }
.site-header_row {
  height: var(--nav-height);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.site-header_back { font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   Buttons and tags
   -------------------------------------------------------------------------- */
.button { min-height: 44px; border-radius: var(--radius-pill); font-size: 0.9375rem; }
.button.is-primary { padding-right: var(--space-3); box-shadow: none; }
.button.is-primary:hover { background: var(--color-primary-hover); }
.button_icon { width: auto; height: auto; background: none; border-radius: 0; }
.button_icon svg { width: 14px; height: 14px; stroke-width: 1.75; }
.button.is-primary:hover .button_icon { transform: translateX(3px); background: none; }
.button.is-secondary { color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.button.is-secondary:hover { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-primary); }
.button.is-small { min-height: 40px; padding-inline: var(--space-2); font-size: 0.875rem; }

.tag {
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text);
  font-size: 0.75rem;
  letter-spacing: 0;
}
.tag.is-status { background: var(--color-primary-tint); box-shadow: inset 0 0 0 1px var(--color-border-accent); color: var(--color-primary); }
.tag.is-placeholder { box-shadow: none; }
/* Same category colours as the homepage cards: pale tint, dark same-hue text (pink 6.8:1, yellow 6.7:1). */
.tag.is-client,   .rp-tag.is-client   { background: #FDE8F2; box-shadow: inset 0 0 0 1px #F7CFE1; color: #9D1451; }
.tag.is-personal, .rp-tag.is-personal { background: #FEF3C7; box-shadow: inset 0 0 0 1px #EEDAAF; color: #7A4B00; }

/* --------------------------------------------------------------------------
   Hero: left-aligned, silk ribbon (CSS only) sweeping in from the top right
   and running up behind the glass header
   -------------------------------------------------------------------------- */
.hero { margin-top: calc(var(--nav-height) * -1); overflow: clip; }
.hero .frame { text-align: left; padding-top: calc(var(--nav-height) + var(--space-10)); }
@media (min-width: 64em) { .hero .frame { padding-block: calc(var(--nav-height) + var(--space-12)) var(--space-12); } }
.hero .h1, .hero .h1.is-wide { max-width: 18ch; margin: 0 0 var(--space-3); --lh: 1.08; }
/* Ink-grey, not the body grey: the ribbon sits behind the end of the longest ledes at ~1024px, where #50617A measured 4.28:1. */
.hero .lede, .hero .lede.is-wide { max-width: 36rem; margin: 0 0 var(--space-4); color: #3F5068; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); font-weight: 300; --lh: 1.5; }
.hero .hero_outcome { justify-content: flex-start; max-width: 36rem; margin: 0 0 var(--space-4); }
.hero .tag-row { justify-content: flex-start; }

.hero_atmosphere { -webkit-mask-image: none; mask-image: none; overflow: clip; }
.hero_blob { display: none; }
.hero_atmosphere::before,
.hero_atmosphere::after { content: ""; position: absolute; pointer-events: none; }
.hero_atmosphere::before {
  top: -48%;
  right: -46%;
  width: 120%;
  height: 120%;
  background:
    repeating-linear-gradient(98deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px 14px),
    linear-gradient(98deg,
      rgb(255 255 255 / 0) 4%,
      #FFD27A 16%,
      #FF8A5B 28%,
      #FF4D8D 40%,
      #E040FB 52%,
      #8B5CFF 64%,
      #5B7CFF 76%,
      #7FD3FF 88%,
      rgb(255 255 255 / 0) 98%);
  transform: rotate(-24deg) skewX(-18deg);
  border-radius: 45% 0 0 55% / 50% 0 0 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 90%);
  opacity: 0.9;
}
/* White veil on the copy side keeps the title on a calm field. */
.hero_atmosphere::after {
  inset: 0;
  background: linear-gradient(90deg, #FFFFFF 0%, rgb(255 255 255 / 0.95) 38%, rgb(255 255 255 / 0) 66%);
}
@media (max-width: 63.99em) {
  .hero_atmosphere::before { top: -52%; right: -70%; width: 160%; height: 100%; }
  .hero_atmosphere::after { background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.55) 22%, rgb(255 255 255 / 0.92) 40%, #FFFFFF 56%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero_atmosphere::before { animation: ribbon-drift 18s var(--ease-soft) infinite alternate; }
}
@keyframes ribbon-drift {
  from { transform: rotate(-24deg) skewX(-18deg) translateX(0); }
  to { transform: rotate(-22deg) skewX(-16deg) translateX(-3%); }
}

/* --------------------------------------------------------------------------
   Surfaces: hairline-bordered 8px cards, lift + soft shadow on hover
   -------------------------------------------------------------------------- */
.persona-card, .principle-card, .result, .kpi, .spec-card, .pricing-card, .data-panel, .meta-grid, .accordion {
  border-radius: var(--radius-outer);
  box-shadow: var(--ring);
}
.persona-card:hover, .result:hover {
  box-shadow: var(--ring), var(--shadow-2);
}
.principle-card.is-wide { background: var(--color-surface); }
.result.is-placeholder, .result.is-placeholder:hover { box-shadow: none; transform: none; }
.pricing-card.is-popular { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-2); }
.pricing-badge { border-radius: var(--radius-pill); }

/* Icon tiles: square, hairline, no tilt, violet line icons. */
.sticker, .sticker-row .sticker {
  border-radius: var(--radius-inner);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transform: none;
}
.principle-card:hover .sticker { transform: none; box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.sticker svg { stroke: var(--color-primary); }
.persona-avatar { border-radius: var(--radius-outer); box-shadow: var(--ring); }
svg.result-icon { stroke: var(--color-primary); }

/* Media: plain hairline frame instead of the double bezel. */
.media, .company-media { padding: 0; overflow: hidden; border-radius: var(--radius-outer); box-shadow: var(--ring); }
.media img, .company-media img { border-radius: 0; }
.company-showcase { border-radius: var(--radius-outer); }
.company-showcase_screen { border-radius: var(--radius-inner); }
.acc-media { border-radius: var(--radius-inner); }
.carousel_slide { border-radius: var(--radius-outer); }
.carousel_arrow { border-radius: var(--radius-pill); box-shadow: var(--ring); }
.carousel_arrow:hover { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-primary); }
.os-window { border-radius: var(--radius-outer); box-shadow: var(--ring); }
.img-placeholder { border-radius: var(--radius-inner); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); }

/* Open rows and flow steps on the new palette. */
.method, .process-step { box-shadow: inset 0 1px 0 var(--color-border); }
.flow-step_label { border-radius: var(--radius-inner); box-shadow: var(--ring); font-weight: var(--weight-regular, 400); }
.check-list li::before { color: var(--color-primary); }

/* Infographics: violet "after" bars, light-weight figures. */
.kpi_value, .result .kpi_value { font-weight: 300; letter-spacing: -0.035em; }
.split-bar_track, .meter_track, .metric-bar { box-shadow: inset 0 0 0 1px var(--color-border); }

/* --------------------------------------------------------------------------
   TOKO's embedded Ad Desk: no dark flash behind the tool while it loads
   -------------------------------------------------------------------------- */
.embed-frame { background: var(--color-surface); border-radius: 0; }

/* --------------------------------------------------------------------------
   Related projects: same wash-behind-screenshot treatment as the homepage
   -------------------------------------------------------------------------- */
.rp-card { border-radius: var(--radius-outer); box-shadow: var(--ring); }
.rp-card:hover, .rp-card:focus-within { box-shadow: var(--ring), var(--shadow-2); }
.rp-media {
  border-radius: var(--radius-outer) var(--radius-outer) 0 0;
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--rp-fallback, #533AFD) 75%, #8B5CFF) 0%, transparent 70%),
    linear-gradient(150deg, #FFF6EC 0%, color-mix(in srgb, var(--rp-fallback, #533AFD) 28%, #FFE3D1) 45%, color-mix(in srgb, var(--rp-fallback, #533AFD) 55%, #FF8FB1) 100%);
}
.rp-blur { display: none; }
.rp-thumb-frame { background: rgb(255 255 255 / 0.55); border-color: rgb(255 255 255 / 0.8); box-shadow: 0 24px 40px -16px rgb(50 50 93 / 0.4); }
.rp-tag { border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); }
.rp-title { color: var(--color-heading); font-size: 1.375rem; font-weight: var(--weight-heading); letter-spacing: -0.015em; }
.rp-outcome { color: var(--color-text); }
.rp-link { color: var(--color-primary); }
.rp-card:hover .rp-link, .rp-card:focus-within .rp-link { color: var(--color-primary-hover); }
.rp-link::after { border-radius: var(--radius-outer); }
.rp-arrow { border-radius: var(--radius-pill); border-color: var(--color-border); box-shadow: none; color: var(--color-heading); }
.rp-arrow:hover { background: var(--color-white); border-color: var(--color-primary); color: var(--color-primary); }
.rp-dot.is-active { background: var(--color-primary); }

/* Footer */
.site-footer { background: var(--color-surface); box-shadow: inset 0 1px 0 var(--color-border); }
.site-footer_row a { text-decoration-color: var(--color-border-accent); }