/* Home-specific refinement */

/* Shared editorial alignment */
.philosophy-sticky,
.principles-head{
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)!important;
  column-gap:var(--gap)!important;
}
.philosophy-statements,
.principles-intro{
  grid-column:2!important;
  margin-left:0!important;
  padding-left:0!important;
  justify-self:stretch!important;
  width:100%!important;
}

/* Progressive enhancement: source content is stable before JS initializes. */
.hero-quote,
.subtractive-title,
.philosophy-statements{color:rgba(17,17,17,.05)}
.quote-source-only,
.definition-copy,
.definition-source,
.subtractive-korean .fill-line{color:rgba(17,17,17,.05)}
.principle-en{color:rgba(255,255,255,.05)}
.principles-intro{color:rgba(255,255,255,.16)}
.principles-intro .fill-char{color:rgba(255,255,255,.16)}

/* Character wrappers must not change line metrics when JS initializes. */
.js-char-fill .fill-char,
.philosophy-statements .fill-char,
.principles-intro .fill-char,
.principle-en .fill-char,
.hero-quote .fill-char,
.definition-copy .fill-char,
.definition-source .fill-char,
.subtractive-title .fill-char,
.subtractive-korean .fill-char{
  display:inline!important;
  vertical-align:baseline!important;
  line-height:inherit!important;
  margin:0!important;
  padding:0!important;
  transition:none!important;
}
.fill-char.is-scrambling{
  position:relative;
  color:transparent!important;
}
.fill-char.is-scrambling::after{
  content:attr(data-scramble);
  position:absolute;
  left:0;
  top:0;
  color:rgba(var(--scramble-rgb,17,17,17),var(--scramble-alpha,1));
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  white-space:pre;
  pointer-events:none;
}

/*
  HERO sequence timing is controlled by home-interactions.js. The one-time page
  entry now owns the English quote reveal, so the scroll timeline starts at the
  previous quoteHoldEnd point (24.5%). The negative top offset removes exactly
  that already-played scroll runway while preserving every later phase's native
  distance and speed: English -> Korean morph begins on the first user scroll.
*/
.hero-sequence{
  height:559.17vh!important;
  margin-top:-112.497vh!important;
}
.hero-state{
  overflow:visible!important;
  transition:none!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.hero-state-quote{opacity:1}
.hero-state-definition{
  opacity:0;
  pointer-events:none;
  color:var(--fg);
}
.hero-state-subtractive{opacity:0;pointer-events:none}
.hero-state-definition,
.hero-state-subtractive{transform:none!important}
.quote-source-only{
  margin-top:18px;
  font-family:'Averta PE',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.2;
}
.definition-copy{
  width:100%;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:100;
  font-size:clamp(34.83px,4.9815vw,85.86px);
  line-height:.98;
  letter-spacing:-.025em;
  word-break:keep-all;
}
.definition-copy p{margin:0;padding:0;white-space:nowrap}
.definition-copy p+p{margin-top:0}
.definition-source{
  display:block;
  margin-top:18px;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.01em;
}
.subtractive-korean{opacity:.7}

/*
  Design philosophy is a self-contained sticky sequence.
  The text remains fixed while all five authored rows fill, then holds at 100%
  before naturally releasing into Design principles.
*/
.intro-block{
  display:block!important;
  position:relative;
  min-height:215vh!important;
  padding:0!important;
  margin-bottom:0!important;
}
.philosophy-sticky{
  position:sticky;
  top:18vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  column-gap:var(--gap);
  align-items:start;
  width:100%;
}
.philosophy-sticky>.mini-label{
  grid-column:1;
  align-self:start;
}
.philosophy-statements{
  display:block!important;
  line-height:1.134!important;
  text-align:left!important;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.philosophy-statements p{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  line-height:1.134!important;
  text-align:left!important;
  text-indent:0!important;
  color:rgba(17,17,17,.05);
}
.philosophy-statements p+p{margin-top:0!important}
.philosophy-statements p.philosophy-group-start{
  margin-top:.22em!important;
}

/* Visible white spacer after Design philosophy. */
.philosophy-tail-space{
  display:block;
  width:100%;
  height:clamp(140px,18vh,240px);
  background:var(--bg,#f4f2ed);
}

/* DESIGN PRINCIPLES */
.principles-section{
  --principles-ko-size:calc(clamp(42px,6vw,96px) - 13.333px);
  --principle-card-ko-size:calc(var(--principles-ko-size) * .666667);
  position:relative;
  overflow:clip;
  padding-top:clamp(72px,8vh,112px)!important;
  padding-bottom:clamp(72px,8vh,120px)!important;
}
.principles-persistent-label{
  position:sticky;
  top:12vh;
  z-index:5;
  width:calc((100% - var(--gap)) / 3.2);
  height:0;
  pointer-events:none;
}
.principles-persistent-label .mini-label{margin:0}
.principles-intro-stage{position:relative;height:130vh}
.principles-head{
  position:sticky;
  top:12vh;
  min-height:76vh!important;
  align-content:start;
  margin:0!important;
  padding:clamp(72px,8vh,112px) 0 0!important;
}
.principles-intro{
  position:relative;
  grid-column:2!important;
  align-self:start;
  width:100%!important;
  margin:0!important;
  min-height:0!important;
  opacity:1;
  visibility:visible;
  white-space:normal!important;
}
.principles-intro-row{
  position:relative;
  display:block;
  height:.99em;
  overflow:hidden;
  isolation:isolate;
}
.principles-intro-en,
.principles-intro-mask,
.principles-intro-ko{position:absolute;inset:0;display:block}
.principles-intro-en{z-index:1;line-height:.9;white-space:nowrap}
.principles-intro-mask{
  display:none!important;
}
.principles-intro-ko{
  z-index:3;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:100;
  font-size:var(--principles-ko-size);
  line-height:.99;
  letter-spacing:-.03em;
  word-break:keep-all;
  color:#fff;
  opacity:1;
  transform:none;
  will-change:auto;
}
.principles-after-intro{height:300px}
.principles-cards-stage{position:relative;height:200vh}
.principles-grid{
  position:sticky;
  top:8vh;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:50px!important;
  align-content:center;
  min-height:84vh;
  padding-left:0!important;
  margin-left:0!important;
}
.principle-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  column-gap:var(--gap);
  padding:0!important;
  border-top:0!important;
  opacity:0;
  transform:translate3d(0,24px,0);
  will-change:transform,opacity;
}
.principle-card-inner{
  grid-column:2;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:12px;
  min-width:0;
  margin-left:0;
  padding-left:0;
  width:100%;
}
.principle-no{grid-column:1;margin:3px 0 0!important;padding-left:0!important;text-align:left}
.principle-copy{grid-column:2;min-width:0}
.principle-copy-stage{
  position:relative;
  min-height:0;
  overflow:visible;
}
.principle-en{
  margin:12px 0 0!important;
  font-weight:300!important;
  color:rgba(255,255,255,.7);
}
.principle-ko{
  position:relative;
  z-index:3;
  inset:auto;
  margin:0!important;
  max-width:none!important;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-weight:100!important;
  font-size:var(--principle-card-ko-size)!important;
  line-height:.99!important;
  letter-spacing:-.03em;
  word-break:keep-all;
  color:#fff!important;
  opacity:1;
  transform:none;
}

/* Hero identity — follows the Subtractive Design reveal. */
.hero-identity{
  margin-top:100px;
  font-family:'Averta PE',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.2;
  letter-spacing:0;
  color:rgba(17,17,17,0);
}


/* Entry-scramble text must preserve authored spaces and inline character flow. */
.js-entry-scramble .fill-char{
  display:inline!important;
  white-space:pre!important;
  vertical-align:baseline!important;
  line-height:inherit!important;
}

/* FROM PRINCIPLES TO IMPACT */
.impact-section{
  position:relative;
  padding:clamp(120px,14vh,180px) 0 clamp(96px,12vh,144px);
  border-top:0;
}
.impact-grid,
.work-shortcut-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  column-gap:var(--gap);
  align-items:start;
  width:100%;
}
.impact-grid>.mini-label,
.work-shortcut-grid>.mini-label{
  grid-column:1;
  margin:0;
  color:#111!important;
  opacity:.60;
}
.impact-content{
  grid-column:2;
  width:100%;
  max-width:1120px;
  min-width:0;
}
.impact-statement{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-weight:100!important;
  font-size:52px!important;
  line-height:1.1385!important;
  letter-spacing:-.03em;
  word-break:keep-all;
  color:#111;
}
.impact-statement>.impact-line{
  display:block!important;
  margin:0!important;
  padding:0!important;
  line-height:1.1385!important;
}
.impact-copy{
  margin:32px 0 0;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-weight:300!important;
  font-size:22px!important;
  line-height:1.296!important;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.60);
  word-break:keep-all;
}
.impact-capabilities{
  margin-top:80px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.18);
  font-family:'Averta PE',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.45;
  letter-spacing:0;
  color:#111;
  opacity:.40;
}
.impact-capabilities>span{
  display:block!important;
  margin:0!important;
  padding:0!important;
}
.impact-scramble{
  filter:invert(1);
}
.work-shortcut{
  position:relative;
  padding:clamp(80px,10vh,120px) 0 clamp(120px,15vh,200px);
  border-top:0;
}
.work-shortcut-link{
  grid-column:2;
  display:inline-flex;
  align-items:center;
  gap:0;
  width:max-content;
  max-width:100%;
  margin:0;
  font-family:'Averta PE',sans-serif;
  font-weight:300;
  font-size:64px;
  line-height:.95;
  letter-spacing:-.03em;
  color:#fff;
  text-decoration:none;
}
.work-shortcut-text{
  margin:0!important;
  color:#111;
}
.work-shortcut-arrow{
  display:block;
  flex:none;
  margin:0!important;
  width:.81em;
  height:.81em;
  box-sizing:border-box;
  border-top:1px solid rgba(255,255,255,.60);
  border-right:1px solid rgba(255,255,255,.60);
  transform:rotate(45deg) scale(.72);
  transform-origin:center;
}
.work-shortcut-link:hover .work-shortcut-text{
  opacity:.60;
}
.work-shortcut-link:hover .work-shortcut-arrow{
  border-color:#fff;
}
.work-shortcut-link:focus-visible{
  outline:1px solid rgba(255,255,255,.70);
  outline-offset:10px;
}

/* Mobile-only layout */
@media(max-width:850px){
  :root{--pad:clamp(18px,5vw,24px);--gap:clamp(18px,5vw,28px)}
  body{overflow-x:hidden}
  .top{height:50px}
  .top-center{top:17px;gap:clamp(20px,7vw,30px)}

  .hero-sequence{
    height:538.10vh!important;
    margin-top:-107.335vh!important;
  }
  .hero-sticky{padding:70px 10px 24px}
  .hero-state{inset:70px 10px 36px}
  .hero-quote{font-size:clamp(25px,7.08vw,28px);line-height:.97}
  .definition-copy{font-size:clamp(26px,7.1vw,40px);line-height:1.06;letter-spacing:-.03em}
  .definition-source{margin-top:18px;font-size:16px;line-height:1.2}
  .subtractive-title{font-size:clamp(52px,14.9vw,80px);line-height:.82}
  .subtractive-korean{margin-top:20px;font-size:clamp(15px,4.2vw,20px);opacity:.7}
  .hero-identity{margin-top:100px;font-size:16px;line-height:1.2}

  .intro-block{
    min-height:215vh!important;
    padding:0!important;
    margin-bottom:0!important;
  }
  .philosophy-sticky{
    top:14vh;
    display:block!important;
    width:100%;
  }
  .philosophy-sticky>.mini-label{margin-bottom:26px}
  .philosophy-statements{width:100%!important;margin-left:0!important;font-size:clamp(22px,6.2vw,34px)}
  .philosophy-statements,.philosophy-statements p{line-height:1.16!important}
  .philosophy-tail-space{height:clamp(96px,14vh,160px)}

  .principles-section{
    --principles-ko-size:calc(clamp(34px,10vw,50px) - 13.333px);
    --principle-card-ko-size:calc(var(--principles-ko-size) * .666667);
    padding-top:clamp(56px,15vw,80px)!important;
    padding-bottom:72px!important;
    padding-left:var(--pad)!important;
    padding-right:var(--pad)!important;
  }
  .principles-persistent-label{top:70px;left:0;width:auto;height:0;margin-left:0;padding-left:0}
  /* One deliberate swipe is enough to complete the intro sequence. */
  .principles-intro-stage{height:130vh}
  .principles-head{display:block!important;top:10vh;min-height:80vh!important;padding:70px 0 0!important}
  .principles-intro{position:relative;display:block;width:100%!important;margin-left:0!important;font-size:clamp(34px,10vw,50px);line-height:.93}
  .principles-intro-row{height:1.023em}
  .principles-intro-en{white-space:nowrap}
  .principles-intro-mask{height:.93em}
  .principles-intro-ko{font-size:var(--principles-ko-size);line-height:1.023}
  .principles-after-intro{height:300px}
  /* Keep the sticky reveal, but remove the former 120vh scroll runway. */
  .principles-cards-stage{height:145vh}
  .principles-grid{top:7vh;min-height:86vh;gap:50px!important}
  .principle-card{grid-template-columns:1fr!important}
  .principle-card-inner{grid-column:1 / -1;grid-template-columns:30px minmax(0,1fr);column-gap:10px;width:100%}
  .principle-copy-stage{min-height:0}
  .principle-en{white-space:normal!important;font-size:11px}
  .principle-ko{font-size:var(--principle-card-ko-size)!important;line-height:1.023!important}

  .impact-section{padding:96px 0 120px}
  .impact-grid,
  .work-shortcut-grid{grid-template-columns:1fr}
  .impact-grid>.mini-label,
  .work-shortcut-grid>.mini-label{grid-column:1;margin-bottom:48px}
  .impact-content{grid-column:1}
  .impact-statement{font-size:32px!important;line-height:1.17645!important;margin:0!important;padding:0!important}
  .impact-statement>.impact-line{margin:0!important;padding:0!important;line-height:1.17645!important}
  .impact-copy{margin-top:32px;font-size:16px!important;line-height:1.377!important}
  .impact-copy br{display:none}
  .impact-capabilities{margin-top:64px;padding-top:24px;font-size:14px;line-height:1.55}
  .work-shortcut{padding:72px 0 104px}
  .work-shortcut-link{grid-column:1;font-size:52px}

  .footer,.filip-footer{padding:72px 0 24px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
}

@media(max-width:480px){
  .top a{font-size:12px}
  .hero-sequence{
    height:526.75vh!important;
    margin-top:-104.554vh!important;
  }
  .intro-block{min-height:220vh!important;margin-bottom:0!important}
  .philosophy-tail-space{height:clamp(84px,12vh,132px)}
  .principles-head{min-height:80vh!important}
  .showcase-project{padding-bottom:64px}
}

@media(prefers-reduced-motion:reduce){
  .hero-quote .fill-char,
  .definition-copy .fill-char,
  .definition-source .fill-char,
  .subtractive-title .fill-char,
  .subtractive-korean .fill-char{color:#111!important}
  .hero-identity .fill-char{color:rgba(17,17,17,.70)!important}
  .philosophy-statements p{color:#111!important}
  .principles-intro .fill-char,
  .principle-en .fill-char{color:#fff!important}
  .hero-state-quote{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-state-definition,.hero-state-subtractive{opacity:0!important}
  .philosophy-sticky{position:static!important}
  .intro-block{min-height:auto!important;padding:80px 0!important;margin-bottom:0!important}
  .philosophy-tail-space{height:80px!important}
  .principles-intro-stage,.principles-cards-stage{height:auto!important}
  .principles-head,.principles-grid{position:static!important;min-height:0!important}
  .principles-head{padding:80px 0!important}
  .principles-intro{opacity:1!important;transform:none!important;clip-path:none!important}
  .principles-persistent-label{position:static!important;height:auto!important;margin-bottom:28px}
  .principles-intro-mask{clip-path:inset(0)!important}
  .principles-intro-ko{opacity:1!important;transform:none!important}
  .principle-card{opacity:1!important;transform:none!important}
  .principle-card .fill-char{color:#fff!important}
  .principle-ko{opacity:1!important;transform:none!important;color:#fff!important}
  .principles-grid{padding:0!important}
}