/* PURUS typography-led narrative sequence with monochrome dandelion motif & light sage overlay. */
@font-face{font-family:BioCycleNarrative;src:url('/assets/narrative/dm-sans-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

#purus-material.narrative-reveal{
  position:relative;
  display:flow-root;
  width:100%;
  padding:0;
  min-height:0;
  background-color:#e4efe9;
  border-block:1px solid var(--line,#cddbd5);
  color:var(--ink,#173b3e);
  isolation:isolate;
}

#purus-material .narrative-stage{
  position:relative;
  overflow:hidden;
}

/* Orderly smaller flower-burst motif backdrop in monochrome with light sage overlay */
#purus-material .narrative-pattern-backdrop{
  position:absolute;
  inset:-8% 0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  will-change:transform;
}

#purus-material .narrative-pattern-svg{
  width:100%;
  height:100%;
  display:block;
}

#purus-material .narrative-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 64% 56% at 50% 50%, rgba(232,243,237,.58) 0%, rgba(222,237,229,.32) 68%, rgba(212,230,220,.18) 100%);
}

#purus-material .narrative-content{
  position:relative;
  z-index:2;
  width:min(var(--content-width,1560px),88%);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 0 92px;
}

#purus-material .narrative-eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  line-height:1.5;
  font-weight:650;
  color:var(--teal,#286b63);
  text-align:center;
  margin:0 0 16px;
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}

#purus-material[data-eyebrow-revealed] .narrative-eyebrow{
  opacity:1;
  transform:translate3d(0,0,0);
}

#purus-material .narrative-track{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:64px;
}

#purus-material .narrative-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  min-width:0;
}

#purus-material .narrative-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:1160px;
  min-width:0;
  margin-inline:auto;
  text-align:center;
  padding-block:16px;
}

#purus-material .narrative-copy h2{
  font-family:'DM Sans',BioCycleNarrative,Arial,sans-serif;
  font-size:clamp(40px,5.6vw,88px);
  font-weight:450;
  line-height:1.03;
  letter-spacing:-.052em;
  margin:0 auto;
  max-width:19ch;
  text-align:center;
  color:var(--ink,#173b3e);
  text-wrap:balance;
}

#purus-material .narrative-copy h2 .narrative-accent{
  color:#2b635b;
}

#purus-material .narrative-mask,
#purus-material .narrative-line{
  display:block;
}

#purus-material .narrative-dots{
  display:none;
}

@media(min-width:1026px){
  #purus-material.narrative-horizontal{
    height:var(--narrative-height,680px);
    overflow-anchor:none;
  }

  #purus-material.narrative-horizontal > .narrative-stage{
    position:relative;
    top:auto;
    height:var(--narrative-height,calc(100svh - var(--narrative-nav,80px)));
    min-height:540px;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  #purus-material.narrative-horizontal .narrative-content{
    width:min(var(--content-width,1560px),88%);
    margin-inline:auto;
    padding:0 0 clamp(44px,6svh,72px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  #purus-material.narrative-horizontal .narrative-eyebrow{
    margin:0 0 clamp(12px,1.6svh,18px);
  }

  #purus-material.narrative-horizontal .narrative-track{
    width:100%;
    margin-inline:auto;
    padding:0;
    gap:0;
    display:grid;
    place-items:center;
  }

  #purus-material.narrative-horizontal .narrative-card{
    grid-area:1 / 1;
    width:100%;
    height:100%;
    pointer-events:none;
    user-select:none;
    will-change:opacity;
  }

  #purus-material.narrative-horizontal .narrative-card[data-current]{
    pointer-events:auto;
    user-select:text;
  }

  #purus-material.narrative-horizontal .narrative-copy{
    padding:8px 0;
    will-change:transform,opacity;
  }

  #purus-material.narrative-horizontal .narrative-copy h2{
    font-size:clamp(46px,min(5.6vw,9.2svh),92px);
    white-space:normal;
  }

  #purus-material.narrative-horizontal .narrative-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    position:absolute;
    z-index:3;
    bottom:clamp(26px,3.6svh,42px);
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
  }

  #purus-material .narrative-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    background:rgba(23,59,62,.24);
    transition:transform .38s cubic-bezier(.22,1,.36,1), background-color .38s ease, opacity .38s ease;
  }

  #purus-material .narrative-dot[data-current]{
    background:var(--teal,#286b63);
    transform:scale(1.35);
  }
}

@media(max-width:767px){
  #purus-material .narrative-content{
    padding:56px 0 64px;
  }

  #purus-material .narrative-eyebrow{
    margin-bottom:18px;
  }

  #purus-material .narrative-track{
    gap:48px;
  }

  #purus-material .narrative-copy h2{
    font-size:clamp(32px,8.2vw,46px);
  }
}

@media(prefers-reduced-motion:reduce){
  #purus-material.narrative-horizontal{
    height:auto!important;
  }
  #purus-material.narrative-horizontal > .narrative-stage{
    position:relative!important;
    top:auto!important;
    height:auto!important;
  }
  #purus-material .narrative-eyebrow,
  #purus-material .narrative-card,
  #purus-material .narrative-line,
  #purus-material .narrative-pattern-backdrop,
  #purus-material .narrative-copy{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
  }
  #purus-material .narrative-pattern-backdrop{
    opacity:.30!important;
  }
  #purus-material .narrative-dots{
    display:none!important;
  }
}