/* TESORIN editorial zig-zag layouts.
   Use alternating composition only where it improves storytelling. Product
   demos, comparison tables, pricing, support navigation, regional grids, and
   legal documents keep their purpose-built layouts. */

/* --------------------------------------------------------------------------
   HOW IT WORKS
   Four steps behave like the Features spreads: visual and copy alternate.
   Whitespace and alternation provide the grouping; decorative rules are not
   needed between every step.
   -------------------------------------------------------------------------- */
body:has(.detail .detail-row) .detail{
  padding:clamp(84px,8vw,112px) 0;
}

body:has(.detail .detail-row) .detail-row{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(54px,7vw,104px);
  align-items:center;
  padding:clamp(68px,7.5vw,104px) 0;
  border:0;
}

body:has(.detail .detail-row) .detail-row>div:first-child,
body:has(.detail .detail-row) .detail-row>div:last-child{
  min-width:0;
}

body:has(.detail .detail-row) .detail-row>div:first-child{
  grid-column:1;
  grid-row:1;
  display:flex;
  min-height:270px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

body:has(.detail .detail-row) .detail-row>div:last-child{
  grid-column:2;
  grid-row:1;
  align-self:center;
}

body:has(.detail .detail-row) .detail-row:nth-child(even)>div:first-child{
  grid-column:2;
  align-items:flex-end;
}

body:has(.detail .detail-row) .detail-row:nth-child(even)>div:last-child{
  grid-column:1;
}

body:has(.detail .detail-row) .detail-row>div:first-child::after{
  width:min(100%,330px);
  height:250px;
  margin-top:18px;
  background-position:left center;
}

body:has(.detail .detail-row) .detail-row:nth-child(even)>div:first-child::after{
  margin-left:auto;
  background-position:right center;
}

body:has(.detail .detail-row) .detail-label{
  width:min(100%,330px);
}

body:has(.detail .detail-row) .detail-row:nth-child(even) .detail-label{
  text-align:right;
}

body:has(.detail .detail-row) .detail h3{
  max-width:14ch;
  font-size:clamp(34px,4vw,56px)!important;
  line-height:1.04!important;
  letter-spacing:-.025em!important;
}

body:has(.detail .detail-row) .detail p{
  max-width:52ch;
}

/* --------------------------------------------------------------------------
   ABOUT
   Hero art is on the right. The story then swings the illustration back to
   the left, followed by alternating editorial rows instead of dense grids.
   Spacing, alignment, and type provide separation without repeated rules.
   -------------------------------------------------------------------------- */
body:has(.about-reveal) .story{
  padding:clamp(90px,8vw,122px) 0;
}

body:has(.about-reveal) .story-grid{
  grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);
  gap:clamp(58px,7vw,106px);
  align-items:center;
}

body:has(.about-reveal) .story-grid>div:first-child{
  align-self:center;
}

body:has(.about-reveal) .story-grid>div:first-child::after{
  width:min(100%,340px);
  height:290px;
  margin-top:32px;
}

body:has(.about-reveal) .belief-grid,
body:has(.about-reveal) .company-principles{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  grid-template-columns:none;
}

body:has(.about-reveal) .belief-grid{
  margin-top:clamp(44px,6vw,70px);
}

body:has(.about-reveal) .belief{
  box-sizing:border-box;
  width:min(760px,78%);
  min-height:0;
  margin:0;
  padding:clamp(34px,4vw,48px) 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}

body:has(.about-reveal) .belief:nth-child(even){
  margin-left:auto;
}

body:has(.about-reveal) .belief:hover{
  box-shadow:none;
  transform:none;
}

body:has(.about-reveal) .belief h3{
  font-size:clamp(28px,3vw,40px)!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
}

body:has(.about-reveal) .belief p{
  max-width:58ch;
  font-size:15.5px;
}

body:has(.about-reveal) .company-principles{
  max-width:none;
  margin-top:clamp(42px,5vw,62px);
}

body:has(.about-reveal) .company-principle{
  box-sizing:border-box;
  width:min(760px,78%);
  margin:0;
  padding:clamp(34px,4vw,48px) 0;
  border:0;
}

body:has(.about-reveal) .company-principle:nth-child(even){
  margin-left:auto;
}

body:has(.about-reveal) .company-principle h3{
  font-size:clamp(28px,3vw,40px)!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
}

body:has(.about-reveal) .company-principle p{
  max-width:58ch;
  font-size:15.5px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Alternation is a wide-screen storytelling device. On tablet/mobile every
   section returns to one predictable reading order with no horizontal drift.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  body:has(.detail .detail-row) .detail-row{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
    padding:clamp(52px,8vw,72px) 0;
  }

  body:has(.detail .detail-row) .detail-row>div:first-child,
  body:has(.detail .detail-row) .detail-row:nth-child(even)>div:first-child{
    grid-column:1;
    grid-row:1;
    min-height:0;
    align-items:flex-start;
  }

  body:has(.detail .detail-row) .detail-row>div:last-child,
  body:has(.detail .detail-row) .detail-row:nth-child(even)>div:last-child{
    grid-column:1;
    grid-row:2;
  }

  body:has(.detail .detail-row) .detail-row>div:first-child::after,
  body:has(.detail .detail-row) .detail-row:nth-child(even)>div:first-child::after{
    width:min(76vw,300px);
    height:220px;
    margin-left:0;
    background-position:left center;
  }

  body:has(.detail .detail-row) .detail-row:nth-child(even) .detail-label{
    text-align:left;
  }

  body:has(.about-reveal) .story-grid{
    grid-template-columns:minmax(0,1fr);
    gap:34px;
  }

  body:has(.about-reveal) .story-grid>div:first-child::after{
    width:min(72vw,300px);
    height:250px;
  }

  body:has(.about-reveal) .belief,
  body:has(.about-reveal) .company-principle{
    width:100%;
    margin-left:0;
  }
}

@media(max-width:560px){
  body:has(.detail .detail-row) .detail-row{
    gap:22px;
    padding:48px 0;
  }

  body:has(.detail .detail-row) .detail h3{
    font-size:clamp(30px,9vw,42px)!important;
  }

  body:has(.detail .detail-row) .detail-row>div:first-child::after,
  body:has(.detail .detail-row) .detail-row:nth-child(even)>div:first-child::after{
    width:min(78vw,270px);
    height:200px;
  }

  body:has(.about-reveal) .story-grid>div:first-child::after{
    width:min(74vw,270px);
    height:225px;
  }
}