/* OSOF WEBSITE V1.0 — public shell
   Existing Experience scenes remain frozen. */
.osof-global-nav{
  position:fixed;
  z-index:8000;
  top:0; left:0; right:0;
  height:64px;
  padding:0 clamp(22px,4vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(121,158,193,.14);
  background:rgba(5,15,27,.74);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:background .2s ease;
}
.osof-global-nav__brand{
  display:flex;
  align-items:baseline;
  gap:12px;
  color:#f2f8ff;
  text-decoration:none;
}
.osof-global-nav__brand strong{
  font-size:18px;
  letter-spacing:.11em;
}
.osof-global-nav__brand span{
  color:#65819d;
  font-size:9px;
  font-weight:700;
  letter-spacing:.23em;
}
.osof-global-nav__links{display:flex;align-items:center;gap:26px}
.osof-global-nav__links a{
  position:relative;
  padding:23px 0 20px;
  color:#6d89a4;
  text-decoration:none;
  font-size:10px;
  font-weight:750;
  letter-spacing:.16em;
}
.osof-global-nav__links a:hover,
.osof-global-nav__links a.is-active{color:#31d8f3}
.osof-global-nav__links a.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:#31d8f3;
}
/* Verification UI stays in the source for provenance but is not part of public V1. */
.verify-toolbar,.verify-inspector{display:none!important}
body{padding-top:0!important}
@media(max-width:700px){
  .osof-global-nav{height:58px;padding:0 18px}
  .osof-global-nav__brand span{display:none}
  .osof-global-nav__links{gap:15px}
  .osof-global-nav__links a{font-size:9px;padding-top:21px}
}


/* ============================================================
   OSOF WEBSITE V1.1 — spacing & section blend refinement
   1) EXPERIENCE / ARCHIVE navigation spacing
   2) Large English title ↔ supporting English line spacing
   3) Multi-line Story DNA headline line-height
   4) Epilogue → Generations background transition
   ============================================================ */

/* 1. Global navigation: EXPERIENCE / ARCHIVE need to read as two items,
      not as one continuous word. */
.osof-global-nav__links{
  gap:clamp(38px,3.2vw,58px)!important;
}
.osof-global-nav__links a{
  letter-spacing:.18em!important;
}

/* 2. Together: give the large headline and the supporting English line
      a clearer visual pause. */
.scene01 .scene-title{
  margin-bottom:clamp(38px,3.2vw,52px)!important;
}
.scene01 .scene-lead{
  margin-bottom:18px!important;
}

/* Also keep the same title/subtitle rhythm for major bilingual archive headers. */
.generations-head h2{
  margin-bottom:clamp(38px,3.1vw,50px)!important;
}
.generations-lead{
  margin-top:0!important;
  margin-bottom:12px!important;
}

/* 3. “Different problems. One Story DNA.”:
      on narrower screens it becomes three lines, so .92 is too tight. */
.scene03__head h2{
  line-height:1.06!important;
  letter-spacing:-.05em!important;
}
@media (max-width:1180px){
  .scene03__head h2{
    line-height:1.09!important;
  }
}

/* 4. The end of Experience and the Generations area previously changed
      from near-black to blue too abruptly. Use one shared navy family and
      create a long top blend instead of a hard color break. */
.generations-section{
  margin-top:0!important;
  padding-top:clamp(150px,15vw,230px)!important;
  background:
    radial-gradient(circle at 74% 25%,rgba(34,211,238,.055),transparent 31%),
    linear-gradient(
      180deg,
      #06111f 0%,
      #071421 18%,
      #071727 48%,
      #071727 100%
    )!important;
}
.generations-section::before{
  background:
    linear-gradient(
      180deg,
      rgba(6,17,31,1) 0%,
      rgba(7,20,33,.88) 10%,
      rgba(7,23,39,.46) 28%,
      rgba(7,23,39,.18) 46%,
      rgba(7,23,39,0) 64%
    )!important;
}

/* Remove the visual impression of a rectangular boundary at the handoff. */
.generations-section::after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:-170px;
  height:230px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(3,10,18,0) 0%,
    rgba(5,15,26,.48) 38%,
    rgba(6,17,31,.88) 72%,
    #06111f 100%
  );
}

/* Mobile / narrow browser refinement */
@media(max-width:700px){
  .osof-global-nav__links{
    gap:26px!important;
  }
  .scene01 .scene-title{
    margin-bottom:34px!important;
  }
  .scene03__head h2{
    line-height:1.10!important;
  }
  .generations-head h2{
    margin-bottom:32px!important;
  }
  .generations-section{
    padding-top:120px!important;
  }
  .generations-section::after{
    top:-120px;
    height:170px;
  }
}


/* ============================================================
   OSOF WEBSITE V1.2
   EXPERIENCE final → Generations seamless background handoff
   ============================================================ */

/* The previous final Experience screen used to end near #040a12.
   Bring its LOWER portion gradually into the exact navy used by Generations. */
.epilogue__chapter--final{
  background:
    radial-gradient(
      ellipse at 50% 44%,
      rgba(20,63,96,.14),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #06101c 0%,
      #050c16 42%,
      #05101c 63%,
      #061522 80%,
      #071727 100%
    )!important;
}

/* Keep the final glow subtle so it does not create another tonal boundary. */
.epilogue__chapter--final .epilogue__final-glow{
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(34,211,238,.065),
      transparent 44%
    )!important;
}

/* Generations begins at EXACTLY the ending tone of the Experience section.
   Its own navy variation happens only further down the page. */
.generations-section{
  background:
    radial-gradient(
      circle at 74% 30%,
      rgba(34,211,238,.045),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #071727 0%,
      #071727 16%,
      #071624 42%,
      #071727 100%
    )!important;
}

/* Previous bridge overlays are no longer needed now that both real
   section backgrounds meet at the same color. */
.generations-section::after{
  display:none!important;
}
.generations-section::before{
  background:
    linear-gradient(
      180deg,
      rgba(7,23,39,0) 0%,
      rgba(7,23,39,.04) 24%,
      rgba(7,23,39,.10) 100%
    )!important;
}


/* ============================================================
   OSOF WEBSITE V1.4 — PEOPLE JOURNEY → PEOPLE REMAIN
   Remove duplicated Learning Cycle photography.
   This section is now a typography-only narrative bridge.
   ============================================================ */

.scene05__people--transition{
  position:relative;
  max-width:none!important;
  min-height:82vh;
  margin:0!important;
  padding:clamp(150px,15vw,230px) 7vw!important;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(34,211,238,.055),transparent 28%),
    linear-gradient(180deg,#06111f 0%,#061421 54%,#06111f 100%);
}
.scene05__people--transition::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(49,216,243,.025) 50%,transparent 100%);
}
.scene05__people-head--transition{
  position:relative;
  z-index:1;
  max-width:1080px!important;
  margin:0 auto!important;
}
.scene05__people-head--transition .scene-kicker{
  margin-bottom:28px;
}
.scene05__people-head--transition h2{
  margin:0!important;
  font-size:clamp(76px,10vw,154px)!important;
  line-height:.82!important;
  letter-spacing:-.07em!important;
}
.scene05__people-head--transition .scene05__people-en{
  max-width:none!important;
  margin:clamp(52px,5vw,72px) auto 0!important;
  color:#b8cade!important;
  font-size:clamp(20px,1.8vw,30px)!important;
  line-height:1.45!important;
}
.scene05__people-head--transition .scene05__people-ko{
  max-width:none!important;
  margin:16px auto 0!important;
  color:#7893ad!important;
  font-size:clamp(15px,1.1vw,18px)!important;
  line-height:1.8!important;
}
.scene05__people-rule{
  position:relative;
  width:min(460px,54vw);
  height:1px;
  margin:clamp(48px,4vw,64px) auto 36px;
  background:linear-gradient(90deg,transparent,rgba(111,145,173,.32),transparent);
}
.scene05__people-rule span{
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#31d8f3;
  box-shadow:0 0 14px rgba(49,216,243,.7);
  transform:translate(-50%,-50%);
}
.scene05__people-head--transition .scene05__people-next{
  max-width:none!important;
  margin:0 auto!important;
  color:#819bb5!important;
  font-size:13px!important;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.6!important;
}
.scene05__people-head--transition .scene05__people-next-ko{
  max-width:none!important;
  margin:9px auto 0!important;
  color:#657f99!important;
  font-size:13px!important;
  line-height:1.7!important;
}
@media(max-width:700px){
  .scene05__people--transition{
    min-height:74vh;
    padding:120px 22px!important;
  }
  .scene05__people-head--transition h2{
    line-height:.88!important;
  }
  .scene05__people-head--transition .scene05__people-en{
    margin-top:40px!important;
  }
}


/* ============================================================
   OSOF WEBSITE V1.5 — remove redundant PEOPLE REMAIN bridge
   PEOPLE JOURNEY → Every project ends → Projects become...
   ============================================================ */

.scene05__opening{
  margin-bottom:0!important;
}

/* So the next statement feels like a continuation, not a duplicate card. */
.scene05__statement{
  min-height:88vh!important;
  padding-top:clamp(120px,12vw,180px)!important;
  padding-bottom:clamp(120px,12vw,180px)!important;
}


/* ============================================================
   OSOF WEBSITE V1.8 — seamless PEOPLE → GENERATIONS transition
   Keep the two sections in the same dark-navy family and remove
   the hard horizontal color break between them.
   ============================================================ */

.scene05{
  background:#06111f!important;
}

/* The PEOPLE ending and GENERATIONS opening now share one visual field. */
.scene05__opening,
#generations,
.generations{
  background-color:#06111f!important;
}

/* Blend the opening of Generations into the preceding PEOPLE ending.
   Any original gradient can continue lower in the section without
   creating a visible boundary at the section edge. */
#generations,
.generations{
  background-image:
    linear-gradient(
      180deg,
      #06111f 0%,
      #06111f 18%,
      rgba(7,22,37,.98) 42%,
      rgba(8,27,45,.98) 100%
    )!important;
}

/* Hide any pseudo-element wash that creates a top-edge band. */
#generations::before,
.generations::before{
  opacity:.22!important;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 100%);
}


/* ============================================================
   OSOF WEBSITE V1.9 — remove isolated horizontal dividers
   These two transitions should read as continuous scenes.
   ============================================================ */

/* FROM LEARNING TO BUILDING → following project/build section */
.scene03,
.scene03__outro,
.scene04,
.scene04__intro,
.scene04__outro,
.scene05,
.scene05__intro {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Remove divider-like pseudo elements only at these scene transitions. */
.scene03__outro::before,
.scene03__outro::after,
.scene04::before,
.scene04::after,
.scene04__outro::before,
.scene04__outro::after,
.scene05__intro::before,
.scene05__intro::after {
  border: 0 !important;
}

/* Preserve spacing while preventing a 1px boundary from box shadows. */
.scene03__outro,
.scene04,
.scene04__outro,
.scene05__intro {
  box-shadow: none !important;
}


/* ============================================================
   OSOF WEBSITE V1.10 — exact divider removal
   Only these two full-width 1px pseudo-element lines are removed.
   No layout, imagery, typography, spacing or background changes.
   ============================================================ */

.scene02__transition::after,
.scene03__conclusion::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  background:none!important;
}