/* The same centered section frames and page backdrop as Applied Solutions. */
body.scc-page {
  background: #eaf2ff url("../images/sensory-strategies/20260929/page-background.webp") center top / 100% 100% no-repeat;
}
body.scc-page #main {
  --scc-gutter: clamp(24px, 4.8cqw, 76px);
  container-type: inline-size;
  width: min(90%, 1600px);
  margin-inline: auto;
  padding-top: calc(var(--scc-header-space, 112px) + 24px);
  padding-bottom: 48px;
  overflow: visible;
}
body.scc-page #main > section {
  margin: 0 0 2.4cqw;
  border-radius: clamp(20px, 2.6cqw, 40px);
  overflow: hidden;
  background-color: #f8f5ed;
  box-shadow: 0 12px 42px #698fc014;
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* Size live text against its framed artwork, rather than the full viewport. */
@media (min-width: 1241px) {
  html body.scc-page #main#main .scc-copy h2 {
    font-size: clamp(36px, 4.2cqw, 68px) !important;
    margin-bottom: 1.25cqw !important;
  }
  html body.scc-page #main#main .scc-lead { font-size: clamp(20px, 1.95cqw, 32px) !important; margin-bottom: 1.4cqw; }
  html body.scc-page #main#main .scc-body p { font-size: clamp(14px, 1.25cqw, 20px) !important; margin-bottom: 1cqw; }
  html body.scc-page #main#main .scc-japan .scc-body p { font-size: clamp(13px, 1.12cqw, 18px) !important; margin-bottom: .8cqw; }
  html body.scc-page #main#main .scc-blend { margin-top: 1.65cqw; }
  html body.scc-page #main#main .scc-blend li { font-size: clamp(10px, .84cqw, 14px) !important; }
  .scc-qualities { margin-top: 1.8cqw !important; }
  .scc-qualities li { gap: .65cqw; }
  .scc-qualities .ph { width: 4.4cqw; height: 4.4cqw; font-size: 2.7cqw; }
  .scc-qualities span { font-size: clamp(10px, .86cqw, 14px); }
  html body.scc-page #main#main .scc-closing { font-size: clamp(17px, 1.4cqw, 23px) !important; margin-top: 2cqw; }
  html body.scc-page #main#main .scc-scene-closing { margin-top: 0; padding-top: 1cqw; }
  .scc-ingredients span { font-size: clamp(10px, .77cqw, 13px); }
}
html body.scc-page #main#main .scc-comparison h2 { font-size: clamp(25px, 2.7cqw, 44px) !important; }
html body.scc-page #main#main .scc-culture h3 { font-size: clamp(24px, 2.2cqw, 36px) !important; margin-bottom: .8cqw !important; padding-bottom: .6cqw; }
html body.scc-page #main#main .scc-culture li { font-size: clamp(16px, 1.45cqw, 24px) !important; }

/* Retain the existing reading breakpoint for these longer country stories. */
@media (max-width: 1240px) {
  body.scc-page #main { --scc-gutter: 28px; }
  body.scc-page #main .scc-scene .scc-art { height: auto; aspect-ratio: 16 / 8; }
  body.scc-page #main .scc-copy { padding: 28px var(--scc-gutter) 0; }
  html body.scc-page #main#main .scc-copy h2 { font-size: clamp(34px, 5.7vw, 56px) !important; margin-bottom: 20px !important; }
  html body.scc-page #main#main .scc-lead { font-size: 23px !important; margin-bottom: 18px; }
  html body.scc-page #main#main .scc-body p { font-size: 17px !important; line-height: 1.5 !important; margin-bottom: 18px; }
  html body.scc-page #main#main .scc-blend { margin-top: 24px; }
  .scc-qualities { margin-top: 24px !important; }
  .scc-qualities .ph { width: 56px; height: 56px; font-size: 32px; }
  html body.scc-page #main#main .scc-closing { font-size: 21px !important; margin: 28px 0 32px; }
  body.scc-page #main .scc-ingredients { padding: 12px var(--scc-gutter) 0; }
  html body.scc-page #main#main .scc-scene-closing { margin: 28px var(--scc-gutter) 32px; }
}
@media (width < 1000px) {
  body.scc-page #main { width: calc(100% - 40px); padding-top: calc(var(--scc-header-space, 72px) + 20px); }
  body.scc-page #main > section { margin-bottom: 24px; border-radius: 24px; }
  /* Keep the comparison title and links in flow, with readable type on tablets. */
  body.scc-page #main .scc-comparison { display: flex; flex-direction: column; aspect-ratio: auto; padding: 28px var(--scc-gutter) 32px; }
  body.scc-page #main .scc-comparison .scc-art {
    position: relative;
    inset: auto;
    z-index: 0;
    order: 1;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 24px calc(-1 * var(--scc-gutter)) 0 !important;
  }
  body.scc-page #main .scc-comparison .scc-art img { width: 100%; height: 100%; object-fit: contain; }
  html body.scc-page #main#main .scc-comparison h2 { position: static; order: 0; font-size: clamp(24px, 3.8vw, 36px) !important; }
  html body.scc-page #main#main .scc-comparison h2 strong { font-size: 1.08em; margin-top: 8px; }
  body.scc-page #main .scc-cultures { position: static; order: 2; margin-top: 24px; gap: 18px; }
  html body.scc-page #main#main .scc-culture h3 { font-size: 24px !important; margin-bottom: 10px !important; padding-bottom: 10px; }
  html body.scc-page #main#main .scc-culture li { font-size: 16px !important; line-height: 1.5 !important; }
}
@media (max-width: 599px) {
  body.scc-page #main { width: calc(100% - 28px); --scc-gutter: 22px; padding-bottom: 16px; }
  body.scc-page #main > section { margin-bottom: 20px; border-radius: 20px; }
  body.scc-page #main .scc-scene .scc-art { aspect-ratio: 1.3; }
  html body.scc-page #main#main .scc-copy h2 { font-size: clamp(30px, 8.2vw, 46px) !important; }
  html body.scc-page #main#main .scc-lead { font-size: 21px !important; }
  html body.scc-page #main#main .scc-body p { font-size: 16px !important; }
  html body.scc-page #main#main .scc-closing { font-size: 20px !important; }
  body.scc-page #main .scc-cultures { gap: 10px; }
  html body.scc-page #main#main .scc-culture h3 { font-size: 20px !important; }
  html body.scc-page #main#main .scc-culture li { font-size: 14px !important; }
}
@media (max-width: 359px) {
  body.scc-page #main .scc-cultures { grid-template-columns: 1fr; gap: 24px; }
  body.scc-page #main .scc-qualities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}

/* Select the supplied phone/tablet photos without changing the desktop art. */
body.scc-page #main .scc-art picture { display: contents; }
@media (max-width: 1240px) {
  body.scc-page #main .scc-scene .scc-art { height: auto; aspect-ratio: 16 / 9; }
  body.scc-page #main .scc-scene .scc-art img {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

/* The Cultures breadcrumb sits on its authored pale intro background. */
body.scc-page [data-arotec-breadcrumbs] .arotec-breadcrumb-separator svg,
body.scc-page [data-arotec-breadcrumbs] .arotec-breadcrumb-separator svg path {
  stroke: #113568 !important;
}