/* Shared warm paper surface for the first screen and the light statements. */
.studio-hero-shell,
.about-section {
  isolation: isolate;
  background: var(--paper) url('/assets/paper-seamless.webp');
}

.studio-hero-shell::before,
.about-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(155deg, rgb(255 255 255 / .74), rgb(255 255 255 / .43) 54%, rgb(255 255 255 / .1)),
    url('/assets/studio-hero/texturelabs-paper234.webp') center top / cover;
  mix-blend-mode: luminosity;
  opacity: .28;
  pointer-events: none;
  content: "";
}

.about-section{--about-coral:#ef5143;position:relative;z-index:3;overflow:clip;padding:var(--layout-section-space) var(--layout-gutter) var(--layout-section-space) var(--layout-content-left);color:var(--about-coral)}

/* Align the paper rules with the six columns of the first screen. */
.about-section::after {
  position: absolute;
  inset: 0 0 0 calc(var(--rail) + 2 * var(--rail-inset));
  max-inline-size: 1920px;
  margin-inline: auto;
  z-index: -1;
  background-image: linear-gradient(to right, rgb(62 51 37 / .095) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  background-repeat: repeat-x;
  pointer-events: none;
  content: "";
}

/* Retained side grid: same blue rules, proportions and spacing as the previous section. */
.about-section .strategy-grid{position:absolute;z-index:-1;inset:0 var(--layout-gutter) 0 auto;width:17%;pointer-events:none;background-image:linear-gradient(to right,rgba(18,96,207,.36) 1px,transparent 1px),linear-gradient(to bottom,rgba(18,96,207,.36) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to right,transparent,#000 18%,#000 85%,transparent)}
.about-statement{position:relative;max-width:1480px;margin:0 auto;font-family:LiraStudioUnbounded,Unbounded,Arial,sans-serif;font-size:clamp(44px,5.1vw,92px);font-weight:500;font-synthesis:none;line-height:1.06;letter-spacing:-.05em;text-align:center;overflow-wrap:break-word}
.about-word{display:inline-block;max-width:100%;vertical-align:top;overflow-wrap:anywhere;margin-top:-.1em;padding-bottom:.1em}
.about-section[data-reveal="scroll"] .about-word{color:transparent;background-image:linear-gradient(90deg,#ef5143 50%,rgba(239,81,67,.2) 0);background-size:200% 100%;background-position-x:100%;background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text}
.about-word::selection,.approach-section .about-statement::selection{background:#ef5143;color:#fff3e2}

.approach-line {
  position: relative;
  inline-size: 1px;
  block-size: clamp(116px, 21svh, 232px);
  margin: 0 auto clamp(48px, 9svh, 108px);
}

.approach-line::before {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform-origin: center top;
  content: "";
}

.approach-section[data-reveal="scroll"] .approach-line::before {
  transform: scaleY(var(--approach-stroke, 0));
}

.approach-section .about-statement {
  text-wrap: pretty;
}

.approach-section[data-reveal="scroll"] .about-statement {
  color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--about-coral) var(--approach-fill, 0%),
    rgb(239 81 67 / .2) var(--approach-fill, 0%)
  );
  background-clip: text;
  -webkit-background-clip: text;
}
@media(max-width:1199px){.about-statement{max-width:100%;font-size:clamp(39px,5.5vw,66px)}}
@media(max-width:700px){
 .about-section{padding:var(--layout-section-space) var(--layout-gutter) var(--layout-section-space) var(--layout-content-left)}
 .about-section .strategy-grid{right:var(--layout-gutter);width:35%;background-size:26px 26px;opacity:.7}
 .about-statement{font-size:clamp(22px,6.5vw,40px);line-height:1.16;letter-spacing:-.045em}
 .approach-line{block-size:clamp(84px,15svh,128px);margin-block-end:clamp(32px,7svh,60px)}
}
@media(prefers-reduced-motion:reduce){.about-section[data-reveal="scroll"] .about-word{color:#ef5143;background:none}}
html[data-motion="reduced"] .about-section .about-word{color:#ef5143;background:none}
@media print{.about-section{padding:24px;background:none}.about-section .strategy-grid,.about-section::before,.about-section::after{display:none}.about-section .about-word{color:#ef5143!important;background:none!important}}

@media print {
  .approach-line { display: none }
  .approach-section[data-reveal="scroll"] .about-statement {
    color: var(--about-coral);
    background: none;
  }
}