/* Accepted client case design. One section owns its outer rhythm. */
.july-site.case-page .page-back{display:none}
.july-site .case-document{--case-blue:var(--stasia-blue);--case-yellow:var(--stasia-yellow);color:#24212c}
.case-document .july-section{padding-block:calc(var(--july-section-gap)/2);margin:0}
.case-document .july-section-content{padding-block:0}
.case-document .case-intro{background:var(--case-blue);color:#fff}
.case-document .case-back{display:inline-flex;align-items:center;min-height:44px;margin:0;color:inherit;text-decoration:none;font-size:var(--july-font-meta-size)}
.july-site .case-document h1,.july-site .case-document h2,.case-document .case-stat-value{font-family:StasiaWordmark,Arial,sans-serif;font-weight:600;letter-spacing:0;text-transform:none;overflow-wrap:break-word}
.july-site .case-document h1{font-size:var(--july-font-display-size);line-height:var(--july-line-display);color:#fff;margin:0}
.case-document .case-subtitle{margin:8px 0 0;font-size:var(--july-font-body-size);line-height:var(--july-line-body)}
.case-document .case-period{margin:16px 0 0;font-size:var(--july-font-meta-size);line-height:var(--july-line-meta);color:inherit}
.july-site .case-document h2{font-size:var(--july-font-display-size);line-height:var(--july-line-display);margin:0;color:#161322}
.case-document p{font-size:var(--july-font-body-size);line-height:var(--july-line-body);margin:0}
.case-document .case-results{background:var(--stasia-paper);color:#161322}
.case-document .case-results h2{margin:0 0 16px}
.case-document .case-stat-value{color:var(--case-blue);font-size:var(--july-font-display-size);line-height:var(--july-line-display)}
.case-document .case-stat-lead .case-stat-value{font-size:clamp(40px,11.2vw,52px);line-height:1.08}
.case-document .case-stat-caption{margin-top:8px}
.case-document .case-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0}
.case-document .case-stat-lead+.case-stats-grid{margin-top:24px}
.case-document .case-stats-grid .case-stat{padding-inline:12px;min-width:0}
.case-document .case-stats-grid .case-stat:nth-child(odd){padding-left:0;border-right:1px solid var(--stasia-line)}
.case-document .case-stats-grid .case-stat:nth-child(even){padding-right:0}
.case-document .case-stats-grid .case-stat:last-child:nth-child(odd){grid-column:1/-1;border-right:0;padding-right:0}
.case-document .case-results-note{margin-top:24px}
.case-document .case-block{position:relative;min-width:0}
.case-document .case-story .case-block+.case-block{margin-top:16px}
.case-document .case-story .case-block-heading:not(:first-child){margin-top:28px}
.case-document .case-story .case-block-media{margin-block:24px}
.case-document .case-block-media h2{margin-bottom:16px}
.case-document .case-single{margin:0;padding:0}
.case-document .case-single img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:12px}
.case-document .case-media-caption{margin-top:12px;font-size:var(--july-font-meta-size);color:#746e7d}
.case-document .case-gallery{padding:0;margin:0}
.case-document .case-gallery .july-gallery-unified{padding:0;width:100%;max-width:none}
.case-document .case-gallery[data-july-unified]>.studio-gallery-shell{display:none}
.case-document .case-gallery .july-gallery-body{width:100%;margin:0}
.case-document .case-gallery .july-gallery-photo img{border-radius:12px}
.case-document .case-gallery[data-single=true]{display:none}
.case-document .case-navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.case-document .case-navigation a{display:inline-flex;align-items:center;min-height:44px;color:var(--case-blue);font-size:var(--july-font-meta-size);text-decoration:none}
.july-site.case-page footer{background:var(--stasia-paper);color:#746e7d}
.july-site.case-page footer .meta{color:#746e7d}
.case-document a:focus-visible{outline:2px solid var(--stasia-pink);outline-offset:4px}
@media(min-width:701px){.case-document .case-stat-lead .case-stat-value{font-size:60px}}


/* All intro fields share one start axis and a content-driven vertical rhythm. */
.case-document .case-intro .july-section-content{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.case-document .case-intro .july-section-content>*{margin:0;max-width:100%;min-width:0}
.case-document .case-intro .case-back{margin-bottom:0;font-size:clamp(14px,3.5vw,16px);line-height:1.35}
.july-site .case-document .case-intro h1{font-size:clamp(30px,8.4vw,42px);line-height:1.09;overflow-wrap:break-word;hyphens:auto}
.case-document .case-intro .case-subtitle{font-size:clamp(18px,4.8vw,22px);line-height:1.32}
.case-document .case-intro .case-period{margin-top:6px;font-size:clamp(14px,3.8vw,16px);line-height:1.45}
/* Keep the approved vivid colors and typography, reduce display scale. */
.july-site .case-document .case-results h2{font-size:clamp(27px,6.8vw,36px);line-height:1.12;margin:0 0 20px}
.july-site .case-document .case-stat-value{color:var(--case-blue);font-size:clamp(27px,7.8vw,38px);line-height:1.1;overflow-wrap:normal;word-break:normal;hyphens:none;font-variant-numeric:lining-nums tabular-nums}
.july-site .case-document .case-stat-lead .case-stat-value{font-size:clamp(40px,11.2vw,52px);line-height:1.08}
.case-document .case-stat-caption{font-size:clamp(15px,4.1vw,17px);line-height:1.4;margin-top:8px}
.case-document .case-results-note{font-size:clamp(16px,4.2vw,18px);line-height:1.5;margin-top:26px}
/* Subgrid aligns captions at the natural tallest value, without forced empty rows. */
@supports (grid-template-rows:subgrid){
 .case-document .case-stats-grid{row-gap:8px}
 .case-document .case-stats-grid .case-stat{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:8px}
 .case-document .case-stats-grid .case-stat .case-stat-caption{margin-top:0}
 .case-document .case-stats-grid .case-stat:nth-child(n+3){margin-top:18px}
}
@media(min-width:701px){.july-site .case-document .case-stat-lead .case-stat-value{font-size:60px}}
@media(max-width:350px){.case-document .case-stats-grid .case-stat{padding-inline:10px}.july-site .case-document .case-stats-grid .case-stat-value{font-size:clamp(27px,8.4vw,33px)}}

/* Optical spacing: the back link has a 44px touch target, unlike normal text. */
.july-site .case-document .july-section.case-intro{padding-top:calc(var(--july-section-gap)/2 - 8px)}
/* When a case has no subtitle, balance the title-to-period transition too. */
.case-document .case-intro h1+.case-period{margin-top:12px}
@media(min-width:701px){.case-document .case-intro h1+.case-period{margin-top:14px}}
@media(min-width:701px){.case-document .case-intro .case-back{margin-bottom:4px}}

/* Case typography: two editorial text scales; KPI figures keep their own scale. */
.july-site .case-document{--case-heading-size:var(--july-font-display-size);--case-copy-size:var(--july-font-body-size)}
.july-site .case-document .case-intro h1,
.july-site .case-document .case-results h2{font-size:var(--case-heading-size);line-height:var(--july-line-display)}
/* The desktop homepage uses Manrope for headings; mobile stays with the approved Oswald. */
@media(min-width:701px){
 .july-site .case-document .case-intro h1,
 .july-site .case-document .case-results h2{font-family:var(--july-font-display);font-weight:800;letter-spacing:-.035em}
}
.case-document .case-intro .case-back,
.case-document .case-intro .case-subtitle,
.case-document .case-intro .case-period,
.case-document .case-stat-caption,
.case-document .case-results-note{font-size:var(--case-copy-size)}
.case-document .case-intro .case-subtitle{font-weight:600}

.case-card-placeholder{display:flex;width:80px;height:80px;align-items:center;justify-content:center;border-radius:12px;background:#f4efff;color:var(--stasia-blue);font:600 34px/1 StasiaWordmark,Arial}
.case-stats-grid:empty{display:none}

/* Results and story share the quiet client paper; section rhythm is unchanged. */
body.july-site.case-page,.july-site.case-page .case-document{background:var(--stasia-paper)}



/* Owner accepted: white results, common blue/white ink, two quiet dividers. */
.july-site .case-document{--case-blue:var(--stasia-blue);--case-cover-ink:#fff}
.case-document .case-intro{background:var(--stasia-blue);color:var(--case-cover-ink)}
.july-site .case-document .case-intro :is(.case-back,h1,.case-subtitle,.case-period),
.july-site .case-document .case-intro :is(.case-back,h1,.case-subtitle,.case-period) *{color:var(--case-cover-ink)!important;opacity:1}
.july-site .case-document .case-stat-value,.july-site .case-document .case-stat-value *{color:var(--stasia-blue)!important}
.case-document .case-results{background:#fff}
.case-document .case-story{position:relative}
.case-document .case-results + .case-story::before,
.case-document .case-results + .case-insert-point + .case-story::before{content:"";position:absolute;top:0;left:max(var(--july-gutter),calc((100% - var(--july-shell-max))/2 + var(--july-gutter)));right:max(var(--july-gutter),calc((100% - var(--july-shell-max))/2 + var(--july-gutter)));height:1px;background:var(--stasia-line);pointer-events:none}
.case-document .case-stats-grid{position:relative}
.case-document .case-stats-grid[data-case-balanced-separator]>.case-stat:nth-child(odd){border-right-color:transparent}
.case-document .case-stats-grid[data-case-balanced-separator]::after{content:"";position:absolute;top:0;bottom:0;left:var(--case-separator-x);width:1px;background:var(--stasia-line);pointer-events:none}

/* Accepted case navigation: utility row outside the cover, no second sticky bar. */
.case-document .case-top-navigation{background:#fff;color:var(--stasia-blue)}
.case-document .case-top-navigation-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--july-space-4);padding-block:0;min-height:44px}
.case-document .case-top-navigation a{display:inline-flex;align-items:center;min-height:44px;color:var(--stasia-blue);font-size:var(--july-font-meta-size);text-decoration:none}
.july-site .case-document .july-section.case-intro{padding-block:calc(var(--july-section-gap)/2)}
/* Last real story block ignores zero-height editor insertion controls. */
.case-document .case-story .july-section-content>.case-block:not(:has(~ .case-block)){margin-bottom:0}
.july-site .case-document .july-section.case-ending{padding-top:0}

/* Case navigation: back to overview at left; previous then next at right. */
.case-document .case-top-navigation-inner,
.case-document .case-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.case-document .case-nav-pair{display:inline-flex;align-items:center;justify-content:flex-end;flex:none;gap:14px}
.case-document :is(.case-top-navigation-inner,.case-navigation) a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;flex:none}
@media(max-width:360px){
 .case-document .case-top-navigation-inner,
 .case-document .case-navigation{gap:5px}
 .case-document .case-nav-pair{gap:6px}
 .case-document :is(.case-top-navigation-inner,.case-navigation) a{font-size:13px}
}

/* Balanced single and triple KPI patterns. Two metric layout is untouched. */
.case-document .case-period-separator{display:inline-flex;align-items:center;justify-content:center;width:12px;height:16px;vertical-align:middle;font-size:0;line-height:0;color:transparent}
.case-document .case-period-separator::after{content:"";width:4px;height:4px;display:block;border-radius:50%;background:var(--case-cover-ink,#fff)}
@media(max-width:700px){
 .case-document .case-results[data-case-count="1"] .case-stat-lead,
 .case-document .case-results[data-case-count="3"] .case-stat-lead{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:clamp(12px,4vw,20px)}
 .case-document .case-results[data-case-count="1"] .case-stat-lead .case-stat-caption,
 .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-caption{margin-top:0;min-width:0;overflow-wrap:break-word}
 .case-document .case-results[data-case-count="3"] .case-stat-lead+.case-stats-grid{margin-top:22px}
}
@media(max-width:360px){
 .july-site .case-document .case-results[data-case-count="1"] .case-stat-lead .case-stat-value,
 .july-site .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-value{font-size:clamp(35px,10.6vw,43px)}
 .case-document .case-results[data-case-count="1"] .case-stat-lead .case-stat-caption,
 .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-caption{font-size:15px;line-height:1.38}
}
@media(min-width:701px){
 .case-document .case-results[data-case-count="1"] .july-section-content{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,3fr);column-gap:clamp(28px,5vw,88px);row-gap:20px;align-items:center}
 .case-document .case-results[data-case-count="1"] h2{grid-column:1;grid-row:1;align-self:center;margin:0}
 .case-document .case-results[data-case-count="1"] .case-stat-lead{grid-column:2;grid-row:1;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:clamp(28px,5vw,74px);min-width:0}
 .case-document .case-results[data-case-count="1"] .case-stat-lead .case-stat-caption{margin-top:0;min-width:0;max-width:30ch}
 .case-document .case-results[data-case-count="1"] .case-results-note{grid-column:2;grid-row:2;margin-top:0}
 .case-document .case-results[data-case-count="3"] .july-section-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:22px}
 .case-document .case-results[data-case-count="3"] h2{grid-column:1/-1;grid-row:1;margin:0}
 .case-document .case-results[data-case-count="3"] .case-stat-lead{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-width:0;padding-right:24px}
 .case-document .case-results[data-case-count="3"] .case-stat-lead+.case-stats-grid{grid-column:2/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
 .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;border-right:0;padding:0 20px 0 24px;min-width:0;margin:0}
 .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat:first-child{border-left:1px solid var(--stasia-line);border-right:1px solid var(--stasia-line)}
 .case-document .case-results[data-case-count="3"] .case-results-note{grid-column:1/-1;grid-row:3;margin-top:0}
}
@media(min-width:701px) and (max-width:940px){
 .case-document .case-results[data-case-count="3"] .case-stat-lead{padding-right:12px}
 .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat{padding-inline:14px}
 .july-site .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-value{font-size:clamp(40px,5vw,54px)}
}

/* At tablet widths keep the full-sized headline unbroken above the paired KPI. */
@media(min-width:701px) and (max-width:940px){
 .case-document .case-results[data-case-count="1"] .july-section-content{
  display:flex;flex-direction:column;align-items:stretch;gap:18px
 }
 .case-document .case-results[data-case-count="1"] .case-results-note{margin-top:0}
 .case-document .case-results[data-case-count="1"] h2{align-self:flex-start}
}
/* The 2-item auto-centering helper is for ordinary two-metric results only.
   The 3-metric layout already has its own column rules. */
.case-document .case-results[data-case-count="3"] .case-stats-grid[data-case-balanced-separator]::after{
 content:none;display:none
}


/* Owner trial: remove the visible "Результат" label, keep the editable field. */
.case-document .case-results > .july-section-content > h2{display:none}
@media(min-width:701px){
 /* With no headline, don't reserve its empty column or first grid row. */
 .case-document .case-results[data-case-count="1"] .july-section-content{
  grid-template-columns:minmax(0,1fr);row-gap:18px
 }
 .case-document .case-results[data-case-count="1"] .case-stat-lead{
  grid-column:1;grid-row:1
 }
 .case-document .case-results[data-case-count="1"] .case-results-note{
  grid-column:1;grid-row:2
 }
 .case-document .case-results[data-case-count="3"] .case-stat-lead,
 .case-document .case-results[data-case-count="3"] .case-stat-lead + .case-stats-grid{
  grid-row:1
 }
 .case-document .case-results[data-case-count="3"] .case-results-note{
  grid-row:2
 }
}


/* Culinary 1+2 hierarchy: one strong KPI pair, then two balanced smaller KPIs.
   Works with editable case content and does not change other result counts. */
.case-document .case-results[data-case-count="3"] .case-stat-lead{
 display:grid;grid-template-columns:max-content minmax(0,1fr);
 align-items:center;justify-content:stretch;
 column-gap:clamp(14px,4.3vw,64px);
 width:100%;max-width:none;padding:0;
 margin:0 0 clamp(24px,5vw,38px)
}
.july-site .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-value{
 font-size:clamp(39px,11.8vw,52px);line-height:1.08
}
.case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-caption{
 margin:0;max-width:19ch;min-width:0;
 font-size:clamp(17px,4.35vw,18px);font-weight:400;line-height:1.4;
 letter-spacing:0;overflow-wrap:normal
}
.case-document .case-results[data-case-count="3"] .case-stat-lead+.case-stats-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:0;width:100%;margin:0;position:relative
}
/* A true central divider, independent of the two-KPI optical balance script. */
.case-document .case-results[data-case-count="3"] .case-stats-grid::before{
 content:"";display:block;position:absolute;
 width:1px;top:0;bottom:0;left:50%;
 background:var(--stasia-line);pointer-events:none
}
.case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat,
.case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat:first-child{
 display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
 grid-column:auto;grid-row:auto;
 min-width:0;margin:0;padding:0;border:0
}
.case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat:first-child{
 padding-right:clamp(14px,3.6vw,42px)
}
.case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat:nth-child(2){
 padding-left:clamp(18px,3.6vw,42px)
}
.case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat-caption{
 margin-top:8px
}
.case-document .case-results[data-case-count="3"] .case-results-note{
 margin:clamp(24px,4.5vw,34px) 0 0
}
@media(max-width:360px){
 .july-site .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-value{
  font-size:clamp(35px,10.9vw,39px)
 }
 .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-caption{
  font-size:17px;line-height:1.4
 }
 .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat:nth-child(2){
  padding-left:14px
 }
}
@media(min-width:701px){
 .case-document .case-results[data-case-count="3"] .july-section-content{
  display:flex;flex-direction:column;align-items:stretch;gap:0
 }
 .case-document .case-results[data-case-count="3"] .case-stat-lead{
  width:100%;grid-template-columns:max-content minmax(0,1fr);
  column-gap:clamp(36px,5vw,78px);
  margin-bottom:clamp(30px,4vw,44px)
 }
 .july-site .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-value{
  font-size:clamp(50px,5vw,60px)
 }
 .case-document .case-results[data-case-count="3"] .case-stat-lead .case-stat-caption{
  font-size:18px;font-weight:400;max-width:24ch
 }
 .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat-caption{
  margin-top:9px
 }
}

/* On 320-360px screens, keep both secondary values on a single baseline. */
@media(max-width:360px){
 .july-site .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat .case-stat-value{
  font-size:clamp(25px,7.7vw,27px);line-height:1.1;white-space:nowrap
 }
}

/* Intentional hierarchy: the lead KPI is the single purple focal point.
   Secondary KPI values use the site's ink, with just the existing middle rule. */
.july-site .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat-value,
.july-site .case-document .case-results[data-case-count="3"] .case-stats-grid .case-stat-value *{
 color:#24212c!important
}

/* Structural typography: one editable H1 for culinary title, same heading role
   and same type scale as other cases. Preserve the existing image spacing. */
.case-document[data-case-id="culinary"] .case-intro h1{
 hyphens:none;word-break:normal
}

.case-document .case-story .case-block-heading + .case-block-media{
 margin-top:16px
}


/* The page title retains the accepted site display scale.
   All story headings instead share the inline Aa editor heading role:
   Manrope bold 32px, line-height 1.13. Ordinary text remains 17px.
   This is the same typographic rule for every case, whether an older H2
   block or a new inline heading created via Aa. KPI figures are separate. */
.july-site.case-page .case-document .case-intro h1 {
  font-family:StasiaWordmark,Arial,sans-serif;
  font-size:var(--july-font-display-size);
  font-weight:600;
  line-height:var(--july-line-display);
  letter-spacing:0;
}
.july-site.case-page .case-document .case-story h2 {
  font-family:var(--july-font-body);
  font-size:32px;
  font-weight:700;
  line-height:1.13;
  letter-spacing:0;
}
@media(min-width:701px){
  .july-site.case-page .case-document .case-intro h1 {
    font-family:var(--july-font-display);
    font-weight:800;
    letter-spacing:-.035em;
  }
}


/* 2026-11-03 · results reading rhythm.
   The number-to-caption relationship (8px for stacked stats, side-by-side
   single KPI) is already approved. Harmonize ONLY the caption-to-note and
   note-to-hairline-to-first-story intervals. Results can have one, two or
   three metrics; the same rules serve editor draft and published case. */
body.july-site.case-page .case-document .case-results .case-results-note {
 margin-top:18px;
}
/* The single KPI becomes a two-row grid on desktop. Its row gap is already
   18px; never add a second margin to the note. */
@media(min-width:701px){
 body.july-site.case-page .case-document
 .case-results[data-case-count="1"] .case-results-note {
  margin-top:0;
 }
}
/* The story's own top border is the divider, not a free-floating rule:
   position it by controlling each adjacent section's inner padding only. */
body.july-site.case-page .case-document .july-section.case-results {
 padding-bottom:24px;
}
body.july-site.case-page .case-document
 .july-section.case-results + .july-section.case-story,
body.july-site.case-page .case-document
 .july-section.case-results + .case-insert-point + .july-section.case-story {
 padding-top:24px;
}
@media(min-width:701px){
 body.july-site.case-page .case-document .july-section.case-results {
  padding-bottom:28px;
 }
 body.july-site.case-page .case-document
  .july-section.case-results + .july-section.case-story,
 body.july-site.case-page .case-document
  .july-section.case-results + .case-insert-point + .july-section.case-story {
  padding-top:28px;
 }
}