/* IB: the approved layered-circle section, scoped to this page section. */
#ibFlow.ib-depth{background:#28493e;color:#f8f8f1}
#ibFlow .ib-depth-inner{max-width:1180px;margin:0 auto;padding:64px 32px 72px}
#ibFlow .ib-depth-heading{margin:0 0 34px;font-family:'Noto Serif TC',serif;font-weight:500;font-size:clamp(28px,3.4vw,42px);line-height:1.45;letter-spacing:.015em;color:#f8f8f1}
#ibFlow .ib-depth-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,6vw,86px);align-items:center}
#ibFlow .ib-depth-circles{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:6px auto 0}
#ibFlow .ib-depth-circle{--depth-lift:0px;position:absolute;appearance:none;border:0;border-radius:50%;padding:25px 0 0;display:flex;justify-content:center;align-items:flex-start;cursor:pointer;font-family:'Noto Serif TC',serif;font-size:clamp(20px,2vw,25px);font-weight:500;line-height:1.4;letter-spacing:.12em;transform:translateY(var(--depth-lift));transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease}
#ibFlow .ib-depth-circle .en{font-size:.8em;letter-spacing:.01em}
#ibFlow .ib-depth-circle:nth-child(1){inset:0;background:#ebeee3;color:#304536;--depth-delay:60ms}
#ibFlow .ib-depth-circle:nth-child(2){inset:20% 10% 0;background:#c1d1ba;color:#304536;--depth-delay:160ms}
#ibFlow .ib-depth-circle:nth-child(3){inset:40% 20% 0;background:#7a9c83;color:#173d2a;--depth-delay:260ms}
#ibFlow .ib-depth-circle:nth-child(4){inset:60% 30% 0;background:#345d46;color:#fff;padding-top:32px;--depth-delay:360ms}
#ibFlow .ib-depth-circle[aria-pressed=true]{--depth-lift:-6px;box-shadow:0 8px 20px #162c282a}
#ibFlow .ib-depth-list{display:grid;gap:7px}
#ibFlow .ib-depth-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;appearance:none;border:0;border-radius:4px;background:transparent;text-align:left;padding:18px 23px;color:#eef3eb;cursor:pointer;font:inherit;transition:background .4s ease,color .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
#ibFlow .ib-depth-title{display:block;font-family:'Noto Serif TC',serif;font-size:clamp(21px,2vw,25px);font-weight:500;line-height:1.5;margin-bottom:5px}
#ibFlow .ib-depth-title .en{font-family:'Playfair Display',Georgia,serif}
#ibFlow .ib-depth-description{display:block;color:#c8d5c7;font-size:15px;line-height:1.8;transition:color .4s ease}
#ibFlow .ib-depth-row[aria-pressed=true]{background:#eff1e8;color:#294b38}
#ibFlow .ib-depth-row[aria-pressed=true] .ib-depth-description{color:#596f58}
#ibFlow .ib-depth-row:nth-child(1){--depth-delay:120ms}
#ibFlow .ib-depth-row:nth-child(2){--depth-delay:200ms}
#ibFlow .ib-depth-row:nth-child(3){--depth-delay:280ms}
#ibFlow .ib-depth-row:nth-child(4){--depth-delay:360ms}
#ibFlow button:focus-visible{outline:2px solid #fff;outline-offset:5px}
#ibFlow.ib-depth-ready:not(.is-entered) .ib-depth-heading,
#ibFlow.ib-depth-ready:not(.is-entered) .ib-depth-circle,
#ibFlow.ib-depth-ready:not(.is-entered) .ib-depth-row{opacity:0}
#ibFlow.is-entered .ib-depth-heading{animation:ib-depth-arrive .7s cubic-bezier(.22,1,.36,1) both}
#ibFlow.is-entered .ib-depth-circle{animation:ib-depth-unfold .9s cubic-bezier(.22,1,.36,1) var(--depth-delay) backwards}
#ibFlow.is-entered .ib-depth-row{animation:ib-depth-arrive .75s cubic-bezier(.22,1,.36,1) var(--depth-delay) backwards}
@keyframes ib-depth-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes ib-depth-unfold{from{opacity:0;transform:translateY(32px) scale(.92)}to{opacity:1;transform:translateY(var(--depth-lift)) scale(1)}}
@media(hover:hover) and (pointer:fine){
  #ibFlow .ib-depth-circle:hover{--depth-lift:-9px}
  #ibFlow .ib-depth-row:hover{background:#ffffff0e;transform:translateX(4px)}
  #ibFlow .ib-depth-row[aria-pressed=true]:hover{background:#eff1e8}
}
@media(max-width:760px){
  #ibFlow .ib-depth-inner{padding:46px 24px 50px}
  #ibFlow .ib-depth-heading{margin-bottom:28px;font-size:clamp(26px,4.8vw,34px)}
  #ibFlow .ib-depth-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  #ibFlow .ib-depth-circles{max-width:310px}
  #ibFlow .ib-depth-circle{font-size:20px;padding-top:17px}
  #ibFlow .ib-depth-circle:nth-child(4){padding-top:25px}
  #ibFlow .ib-depth-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #ibFlow .ib-depth-row{padding:15px 13px}
  #ibFlow .ib-depth-title{font-size:19px}
  #ibFlow .ib-depth-description{font-size:13px;line-height:1.8}
}
@media(max-width:400px){
  #ibFlow .ib-depth-inner{padding:42px 20px 44px}
  #ibFlow .ib-depth-circles{max-width:280px}
  #ibFlow .ib-depth-circle{font-size:18px;padding-top:15px}
  #ibFlow .ib-depth-title{font-size:18px}
  #ibFlow .ib-depth-row{padding:13px 10px}
}
@media(prefers-reduced-motion:reduce){
  #ibFlow .ib-depth-heading,#ibFlow .ib-depth-circle,#ibFlow .ib-depth-row{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  #ibFlow .ib-depth-description{transition:none}
}
