/* Conversium EN — sync with approved RU changes, 2026-08-13 */

/* Desktop technical labels: same proportions as current RU. Mobile untouched. */
@media (min-width:701px){
  .concept-v08-1 .hero-eyebrow,
  .concept-v08-1 .sheet-section-label,
  .concept-v08-1 .editorial-main-caption,
  .concept-v08-1 .proof-service-index > header > p,
  .concept-v08-1 .proof-service-index nav a > span{
    font-weight:400;
  }
  .concept-v08-1 .hero-eyebrow{font-size:12.5px;}
  .concept-v08-1 .sheet-section-label{font-size:11px;}
  .concept-v08-1 .editorial-main-caption{font-size:11px;}
  .concept-v08-1 .proof-service-index > header > p{font-size:11px;}
  .concept-v08-1 .proof-service-index nav a > span{font-size:11px;}
}

/* Desktop video expand affordance. No video playback logic is changed. */
@media (min-width:701px){
  .concept-v08-1 .concept-video.is-expandable .concept-video-open,
  .concept-v08-1 .concept-work-grid .concept-video-open{
    opacity:1;
  }
  .concept-v08-1 .editorial-v4-player .concept-video.is-expandable::after{
    content:"EXPAND ↗";
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:4;
    padding:6px 8px;
    background:rgba(0,0,0,.7);
    color:#fff;
    font-family:var(--font-plex-mono), monospace;
    font-size:8px;
    letter-spacing:.04em;
    line-height:1;
    pointer-events:none;
  }
}

/* Current approved before/after JPG frames. */
.concept-v08-1 .compare-before{background-image:url(/assets/before.jpg?v=20260813-1) !important;}
.concept-v08-1 .compare-after{background-image:url(/assets/after.jpg?v=20260813-1) !important;}

/* Quick overview remains a mobile-only element. */
@media (min-width:701px){
  .concept-v08-1 .hybrid-service-index{display:none !important;}
}

/* Drag anywhere across before/after on mobile while preserving vertical scroll. */
@media (max-width:700px){
  .concept-v08-1 .concept-compare,
  .concept-v08-1 .concept-compare input[type="range"]{touch-action:pan-y;}
  .concept-v08-1 .concept-compare .compare-before,
  .concept-v08-1 .concept-compare .compare-after{
    background-size:auto 130% !important;
    background-position:20% 50% !important;
  }
}

/* Fluid desktop framing: less zoom on wider screens, without breakpoint jumps. */
@media (min-width:701px){
  .concept-v08-1 .concept-compare .compare-before,
  .concept-v08-1 .concept-compare .compare-after{
    background-size:clamp(108%, calc(120.6% - .66vw), 116%) !important;
    background-position:0 50% !important;
  }
}

/* Quote styling mirrored from the current RU visual treatment. */
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style{border-top:0 !important;}
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-open-lock,
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-close-lock{white-space:nowrap;}
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-mark{
  display:inline-block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(48px,4.2vw,68px);
  font-weight:400;
  line-height:0;
  vertical-align:-0.17em;
  letter-spacing:0;
}
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-open-lock .quote-mark{margin-right:12px;}
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-close-lock .quote-mark{
  margin-left:12px;
  transform:translateY(calc(.64em - 6px)) !important;
}
.concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style p + p{margin-top:18px;}
@media (min-width:701px){
  .concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style p{
    position:relative;
    transform:translateY(-8px);
  }
  .concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-open-lock .quote-mark{transform:translateY(8px);}
}
@media (max-width:700px){
  .concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-mark{
    font-size:46px;
    vertical-align:-0.16em;
  }
  .concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-open-lock .quote-mark{margin-right:9px;}
  .concept-v08-1 .hybrid-contact-owner blockquote.quote-comma-style .quote-close-lock .quote-mark{margin-left:9px;}
}


/* === EN safe parity additions — 2026-08-13 === */

/* Make the line break stored in the Weather description visible in both views. */
.concept-v08-1 #v08-work-weather p[itemprop="description"],
.concept-v08-1 .hybrid-service-index nav a[href="#v08-work-weather"] small{
  white-space:pre-line;
}

/* Filmography now renders natively at the bottom of the React project list. */
.concept-v08-1 .project-v4-imdb-bottom{margin-top:18px;}
@media (max-width:700px){
  .concept-v08-1 .project-v4-imdb-bottom{margin-top:14px;}
}

/* Keep the orange circle; only enlarge the white envelope inside. */
@media (min-width:701px){
  .concept-v08-1 .concept-header.is-sticky .concept-nav-telegram img{
    width:19px;
    height:19px;
    object-fit:contain;
  }
}

/* Technical-label rendering parity with RU. */
.concept-v08-1 .hero-eyebrow,
.concept-v08-1 .sheet-section-label,
.concept-v08-1 .editorial-main-caption{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.concept-v08-1 .hero-eyebrow{line-height:1.38;letter-spacing:.085em;color:#9c9c9c;}
.concept-v08-1 .sheet-section-label{line-height:1.35;letter-spacing:.06em;}
.concept-v08-1 .editorial-main-caption{line-height:1.38;letter-spacing:.05em;}

/* Contact section: upper label + content align to the approved RU inset.
   Footer's lower/full-width rule is deliberately untouched. */
@media (min-width:701px){
  .concept-v08-1 .hybrid-contact-v8 > .sheet-section-label,
  .concept-v08-1 .hybrid-contact-v8 > .hybrid-contact-layout{
    margin-left:calc(clamp(24px,6vw,92px) - var(--concept-gutter));
    margin-right:calc(clamp(24px,6vw,92px) - var(--concept-gutter));
  }
}

/* Align client email with the left edge of the CTA/right column. */
@media (min-width:901px){
  .concept-v08-1 .hybrid-contact-v8 footer{
    grid-template-columns:minmax(360px,.86fr) minmax(520px,1.14fr);
    gap:clamp(56px,8vw,140px);
    padding-left:calc(clamp(24px,6vw,92px) - var(--concept-gutter));
    padding-right:calc(clamp(24px,6vw,92px) - var(--concept-gutter));
    box-sizing:border-box;
  }
}