/* ===== HBMIC about page v2 - every rule scoped in .hb-about ===== */
.hb-about{--navy:#112C70; --navy2:#1B2F63; --ink:#56648C; --mute:#8E9ABD; --soft:#6F7CA3;
  --faint:rgba(17,44,112,.10); --line:rgba(17,44,112,.16); --wash:#F7F6FC; --white:#FFFFFF; --scrim:rgba(17,28,64,.55); --lime:#C4D835;
  --f:'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --gut:max(20px,min(4vw,64px)); --headH:88px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease2:cubic-bezier(.65,0,.2,1);
  color-scheme:light;}
.hb-about h1,.hb-about h2,.hb-about h3,.hb-about h4,.hb-about p,.hb-about ol,.hb-about ul,.hb-about dl,.hb-about dd,.hb-about figure{margin:0;padding:0}
.hb-about ol,.hb-about ul{list-style:none}
.hb-about .dots{position:fixed;right:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:25;display:grid;gap:12px;justify-items:end}
.hb-about .dots a{position:relative;display:flex;align-items:center;gap:10px;height:14px;font-size:12px;font-weight:700;color:var(--navy);letter-spacing:0}
.hb-about .dots a span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;white-space:nowrap}
.hb-about .dots a i{display:block;width:6px;height:6px;border-radius:3px;background:var(--mute);transition:width .45s var(--ease),background .3s}
.hb-about .dots a:hover span,.hb-about .dots a:focus-visible span,.hb-about .dots a[aria-current="true"] span{opacity:1;transform:none}
.hb-about .dots a[aria-current="true"] i{width:22px;background:var(--navy)}
.hb-about .dots.on-photo a{color:var(--navy)}
.hb-about .scr{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(14px,2.4vh,28px);padding-block:calc(var(--headH) + clamp(12px,3vh,36px) + env(safe-area-inset-top,0px)) clamp(56px,8vh,84px);padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(calc(var(--gut) + 44px),env(safe-area-inset-right,0px))}
@media (min-width:901px) and (min-height:600px){.hb-about .scr{height:100vh;height:100svh}}
.hb-about .lab{display:flex;align-items:baseline;gap:14px;font-size:14px;font-weight:700;color:var(--mute);letter-spacing:0}
.hb-about .lab b{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.hb-about .lab::after{content:"";flex:1;height:1px;background:var(--line);align-self:center;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .15s}
.hb-about .scr.on .lab::after{transform:scaleX(1)}
.hb-about .rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hb-about.abjs .scr:not(.on) .rv{opacity:.001;transform:translateY(26px)}
.hb-about .d1{transition-delay:.08s}
.hb-about .d2{transition-delay:.16s}
.hb-about .d3{transition-delay:.24s}
.hb-about .d4{transition-delay:.32s}
.hb-about .d5{transition-delay:.4s}
.hb-about .roll{display:inline-flex;font-variant-numeric:tabular-nums;line-height:1}
.hb-about .roll .col{display:inline-block;height:1em;overflow:hidden}
.hb-about .roll .col > span{display:block;transition:transform 1.6s var(--ease2)}
.hb-about .roll .col > span i{display:block;height:1em;font-style:normal}
.hb-about .roll .sep{display:inline-block}
.hb-about .s1{padding:0;display:block;overflow:hidden;background:#DCE2F0}
.hb-about .s1 .ph{position:absolute;inset:0}
.hb-about .s1 .ph img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.08);transition:transform 9s var(--ease)}
.hb-about .s1.on .ph img{transform:scale(1)}
.hb-about .s1 .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,246,252,.97) 0%,rgba(247,246,252,.9) 30%,rgba(247,246,252,.3) 56%,rgba(247,246,252,0) 74%),linear-gradient(0deg,rgba(247,246,252,.75) 0%,rgba(247,246,252,0) 32%)}
.hb-about .s1 .txt{position:absolute;left:max(var(--gut),env(safe-area-inset-left,0px));right:var(--gut);bottom:clamp(64px,13vh,140px);max-width:820px}
.hb-about .s1 .lab{max-width:420px}
.hb-about .s1 h1{margin-top:clamp(14px,2.4vh,24px);font-size:clamp(46px,min(6vw,10.5vh),112px);line-height:1.04;letter-spacing:-0.055em;word-break:keep-all}
.hb-about .s1 h1 > b,.hb-about .s1 h1 > span{display:block}
.hb-about .s1 h1 > b{font-weight:800}
.hb-about .s1 h1 > span{font-weight:200}
.hb-about .s1 .meta{margin-top:clamp(18px,3vh,30px);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:clamp(14px,1.1vw,17px);font-weight:600;color:var(--navy2)}
.hb-about .s1 .meta span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--mute);margin-right:18px;vertical-align:middle}
.hb-about .cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--soft);letter-spacing:0}
.hb-about .cue i{width:1.5px;height:34px;background:linear-gradient(var(--soft),transparent);animation:ab-cue 1.9s var(--ease) infinite}
@keyframes ab-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hb-about .nums{align-self:end;padding-bottom:clamp(28px,6vh,72px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.05fr) minmax(0,1.3fr);column-gap:clamp(20px,3vw,56px)}
.hb-about .nums > div{display:grid;gap:clamp(8px,1.4vh,14px);align-content:start}
.hb-about .nums strong{display:flex;align-items:flex-end;font-size:clamp(48px,min(5.6vw,12vh),120px);font-weight:200;letter-spacing:-0.06em;color:var(--navy);white-space:nowrap}
.hb-about .nums strong small{font-size:.24em;font-weight:700;letter-spacing:0;margin:0 0 .3em .3em}
.hb-about .nums b{font-size:clamp(16px,1.25vw,20px);font-weight:800}
.hb-about .nums > div > span{font-size:clamp(13px,1vw,15px);color:var(--ink);line-height:1.5;word-break:keep-all}
.hb-about .nums > div{position:relative;padding-top:clamp(14px,2vh,22px)}
.hb-about .nums > div::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;border-radius:2px;background:var(--navy)}
.hb-about .way{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:end;padding-top:clamp(20px,3.4vh,36px);border-top:1px solid var(--line)}
.hb-about .way h2{font-size:clamp(30px,min(3.6vw,6.6vh),64px);font-weight:800;line-height:1.14;letter-spacing:-0.05em;word-break:keep-all}
.hb-about .way h2 span{font-weight:200}
.hb-about .way p{font-size:clamp(15px,1.15vw,18px);line-height:1.75;color:var(--navy2);word-break:keep-all;max-width:34em}
.hb-about .s3{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3.4vw,64px);padding-right:0}
.hb-about .s3 .lab{grid-column:1}
.hb-about .s3 .left{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.hb-about .area{display:grid;gap:clamp(10px,2vh,20px)}
.hb-about .area div{display:grid;gap:4px}
.hb-about .area > div > span{font-size:14px;font-weight:700;color:var(--mute);letter-spacing:0}
.hb-about .area strong{font-size:clamp(52px,min(5.6vw,11vh),112px);font-weight:200;letter-spacing:-0.06em;line-height:1;font-variant-numeric:tabular-nums}
.hb-about .area strong small{font-size:.3em;font-weight:700;letter-spacing:0;margin-left:.15em}
.hb-about .area p{margin-top:clamp(6px,1.4vh,14px);font-size:clamp(15px,1.1vw,17px);color:var(--ink);line-height:1.6;word-break:keep-all}
.hb-about .thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:440px}
.hb-about .thumbs button{display:grid;gap:8px;font-size:13px;font-weight:700;color:var(--soft);transition:color .3s}
.hb-about .thumbs img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:10px;opacity:.55;transition:opacity .3s,box-shadow .3s}
.hb-about .thumbs button[aria-pressed="true"]{color:var(--navy)}
.hb-about .thumbs button[aria-pressed="true"] img{opacity:1;box-shadow:0 0 0 2px var(--navy)}
.hb-about .thumbs button:hover img{opacity:.9}
.hb-about .stagephoto{grid-column:2;grid-row:1/4;position:relative;margin-top:calc(-1 * clamp(12px,3vh,36px));margin-bottom:calc(-1 * clamp(56px,8vh,84px));border-radius:28px 0 0 0;overflow:hidden;background:#DDE3F1;min-height:0}
.hb-about .stagephoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 6s var(--ease)}
.hb-about .stagephoto img.on{opacity:1;transform:scale(1)}
.hb-about .stagephoto figcaption{position:absolute;left:20px;bottom:20px;z-index:2;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.92);font-size:14px;font-weight:700}
.hb-about .stagephoto .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.35);z-index:2}
.hb-about .stagephoto .bar i{display:block;height:100%;width:0;background:var(--white)}
.hb-about .s4 .mainq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,80px);align-items:center;min-height:0}
.hb-about .paper{position:relative;display:grid;place-items:center;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--faint),0 24px 48px -24px rgba(17,44,112,.25);transition:box-shadow .3s,transform .5s var(--ease)}
.hb-about .paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%}
.hb-about .paper .ph{display:none;width:62%;aspect-ratio:1/1.38;border-radius:3px;background:#fff;box-shadow:0 1px 0 rgba(17,44,112,.08),0 10px 24px rgba(17,44,112,.10);padding:12% 10%;gap:7%;align-content:start}
.hb-about .paper .ph i{display:block;height:3px;border-radius:2px;background:rgba(17,44,112,.15)}
.hb-about .paper .ph i:first-child{width:62%;margin:0 auto 12%;height:6px;background:rgba(17,44,112,.32)}
.hb-about .paper .ph i:nth-child(4){width:72%}
.hb-about .paper.noimg img{display:none}
.hb-about .paper.noimg .ph{display:grid}
.hb-about .cert{display:grid;gap:12px;width:100%}
.hb-about .cert:hover .paper{transform:translateY(-4px) rotate(-.6deg)}
.hb-about .isoBig{height:clamp(220px,46vh,460px);width:auto}
.hb-about .isoBig .paper{height:100%;width:auto}
.hb-about .qtxt h2{font-size:clamp(40px,min(4.4vw,8vh),84px);font-weight:800;letter-spacing:-0.05em;line-height:1}
.hb-about .qtxt .name{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(17px,1.4vw,22px);font-weight:600;color:var(--navy2)}
.hb-about .qtxt .yr{margin-top:6px;font-size:14px;color:var(--mute)}
.hb-about .qtxt ul{margin-top:clamp(16px,3vh,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vh,20px) clamp(18px,2.4vw,40px);max-width:720px}
.hb-about .qtxt li{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.hb-about .qtxt li time{font-size:13px;font-weight:700;color:var(--soft);font-variant-numeric:tabular-nums;letter-spacing:0}
.hb-about .qtxt li span{font-size:clamp(15px,1.1vw,17px);font-weight:600;color:var(--navy2);line-height:1.45;word-break:keep-all}
.hb-about .morebtn{margin-top:clamp(16px,3vh,28px);display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--navy);font-size:15px;font-weight:700;width:fit-content;transition:background .25s,color .25s}
.hb-about .morebtn:hover{background:var(--navy);color:#fff}
.hb-about .clients{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center;padding-top:clamp(16px,2.6vh,26px);border-top:1px solid var(--line)}
.hb-about .clients p{font-size:clamp(16px,1.25vw,20px);font-weight:800;line-height:1.35;white-space:nowrap}
.hb-about .clients p small{display:block;font-size:13px;font-weight:500;color:var(--mute)}
.hb-about .marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hb-about .marq ul{display:flex;gap:14px;width:max-content;animation:ab-marq 40s linear infinite}
.hb-about .marq:hover ul{animation-play-state:paused}
.hb-about .marq li{display:grid;place-items:center;width:150px;height:60px;border-radius:12px;border:1.5px dashed rgba(17,44,112,.22);font-size:12px;font-weight:600;color:var(--mute);letter-spacing:0;flex:none}
@keyframes ab-marq{to{transform:translateX(-50%)}}
.hb-about .tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.6vw,44px);row-gap:clamp(16px,3vh,32px);min-height:0}
.hb-about .tl li{position:relative;display:grid;grid-template-rows:auto 1fr;gap:clamp(8px,1.4vh,14px);padding-top:clamp(14px,2vh,20px);min-height:0}
.hb-about .tl li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.hb-about .tl li::after{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 2px var(--navy);transform:scale(0);transition:transform .5s var(--ease)}
.hb-about .scr.on .tl li::after{transform:scale(1)}
.hb-about .tl time{font-size:clamp(40px,min(4.4vw,8.4vh),84px);font-weight:200;letter-spacing:-0.06em;line-height:1;font-variant-numeric:tabular-nums}
.hb-about .tl p{font-size:clamp(15px,1.15vw,18px);font-weight:600;line-height:1.5;color:var(--navy2);word-break:keep-all}
.hb-about .tl li.key time{font-weight:700}
.hb-about .tl li.key::after{background:var(--navy)}
.hb-about .tlfoot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.hb-about .morelink{font-size:15px;font-weight:700;border-bottom:1.5px solid var(--navy);padding-bottom:3px}
.hb-about .tlfoot small{font-size:13px;color:var(--mute)}
.hb-about .s6{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,3.4vw,64px)}
.hb-about .s6 .lab{grid-column:1/3}
.hb-about .map{grid-column:1;grid-row:2/4;position:relative;border-radius:24px;overflow:hidden;background:#E6EAF5;display:grid;place-items:center;min-height:240px}
.hb-about .map::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,44,112,.06) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(0deg,rgba(17,44,112,.06) 1px,transparent 1px) 0 0/56px 56px}
.hb-about .map::after{content:"";position:absolute;left:-5%;right:-5%;top:24%;height:18px;background:rgba(255,214,102,.6);transform:rotate(-3deg)}
.hb-about .map .pin{position:relative;z-index:1;padding:12px 20px;border-radius:12px;background:var(--navy);color:#fff;font-size:16px;font-weight:800;animation:ab-bob 2.6s var(--ease) infinite}
.hb-about .map .pin::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:var(--navy);transform:translateX(-50%) rotate(45deg)}
@keyframes ab-bob{50%{transform:translateY(-6px)}}
.hb-about .map small{position:absolute;right:14px;bottom:12px;z-index:1;font-size:12px;color:var(--soft);font-weight:600}
.hb-about .info{grid-column:2;grid-row:2;display:grid;align-content:center;gap:clamp(14px,2.6vh,26px)}
.hb-about .info div{display:grid;gap:4px;padding-bottom:clamp(12px,2vh,20px);border-bottom:1px solid var(--faint)}
.hb-about .info span{font-size:13px;font-weight:700;color:var(--mute);letter-spacing:0}
.hb-about .info strong{font-size:clamp(18px,1.6vw,26px);font-weight:300;letter-spacing:-0.02em;word-break:keep-all;user-select:all}
.hb-about .cta{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;height:68px;padding:0 30px;border-radius:99px;background:var(--navy);color:#fff;font-size:clamp(16px,1.3vw,19px);font-weight:700;transition:background .25s}
.hb-about .cta svg{width:20px;height:20px;transition:transform .3s}
.hb-about .cta:hover{background:#0A1E52}
.hb-about .cta:hover svg{transform:translateX(5px)}
.hb-about .sheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hb-about .sheet .in{max-height:86vh;overflow:auto;overscroll-behavior:contain;background:var(--white);border-radius:28px 28px 0 0;padding-block:28px max(28px,env(safe-area-inset-bottom,0px));padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));animation:ab-up .5s var(--ease) both}
@keyframes ab-up{from{transform:translateY(40px);opacity:.001}to{transform:none;opacity:1}}
.hb-about .sheet .top{display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;top:-28px;background:var(--white);padding-block:8px}
.hb-about .sheet h2{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-0.04em}
.hb-about .x{height:44px;padding:0 18px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:700}
.hb-about .grp{margin-top:26px}
.hb-about .grp > p{font-size:14px;font-weight:700;color:var(--mute);margin-bottom:14px;letter-spacing:0}
.hb-about .grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px}
.hb-about .grid5 .paper{aspect-ratio:4/3;box-shadow:inset 0 0 0 1px var(--faint)}
.hb-about .grid5 h4{font-size:14px;font-weight:800;line-height:1.3;word-break:keep-all}
.hb-about .grid5 p{font-size:12px;color:var(--ink);margin-top:-6px;line-height:1.5}
.hb-about .fullh{margin-top:16px;display:grid;gap:16px}
.hb-about .fullh div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:16px;padding-top:14px;border-top:1px solid var(--faint)}
.hb-about .fullh b{font-size:22px;font-weight:300;font-variant-numeric:tabular-nums}
.hb-about .fullh ul{display:grid;gap:6px}
.hb-about .fullh li{font-size:14px;line-height:1.6;color:var(--navy2);word-break:keep-all}
.hb-about .lb{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));background:var(--scrim)}
.hb-about .lb .box{width:min(520px,100%);max-height:100%;overflow:auto;padding:22px;border-radius:22px;background:var(--white);display:grid;gap:12px}
.hb-about .lb .x{justify-self:end}
.hb-about .lb h4{font-size:20px;font-weight:800}
.hb-about .lb p{font-size:14px;color:var(--ink)}
@media (min-width:901px) and (max-height:780px){.hb-about{--headH:72px}
.hb-about .qtxt ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.hb-about .qtxt li span{font-size:14px}
.hb-about .tl p{font-size:14px}
.hb-about .marq li{height:48px}
.hb-about .cta{height:56px}}
@media (max-width:1100px) and (min-width:901px){.hb-about .grid5{grid-template-columns:repeat(4,minmax(0,1fr))}
.hb-about .nums strong{font-size:clamp(44px,5.6vw,96px)}}
@media (max-width:900px){.hb-about{--headH:72px}
.hb-about .acts .btn{display:none}
.hb-about .dots{display:none}
.hb-about .scr{min-height:0;padding-block:calc(var(--headH) + 16px) 56px;padding-right:max(var(--gut),env(safe-area-inset-right,0px));row-gap:24px}
.hb-about .s1{min-height:100svh}
.hb-about .s1 .ph img{object-position:60% 50%}
.hb-about .s1 .ph::after{background:linear-gradient(0deg,rgba(247,246,252,.97) 0%,rgba(247,246,252,.9) 40%,rgba(247,246,252,.15) 68%,rgba(247,246,252,0) 82%)}
.hb-about .cue{display:none}
.hb-about .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
.hb-about .nums strong{font-size:clamp(44px,13vw,64px)}
.hb-about .way{grid-template-columns:minmax(0,1fr)}
.hb-about .s3,.hb-about .s6{grid-template-columns:minmax(0,1fr)}
.hb-about .s3 .left,.hb-about .stagephoto,.hb-about .map,.hb-about .info{grid-column:1;grid-row:auto}
.hb-about .stagephoto{margin:0;border-radius:20px;aspect-ratio:4/3}
.hb-about .s3 .left{gap:24px}
.hb-about .s4 .mainq{grid-template-columns:minmax(0,1fr)}
.hb-about .isoBig{height:auto;width:min(60%,220px)}
.hb-about .isoBig .paper{width:100%;height:auto}
.hb-about .qtxt ul{grid-template-columns:minmax(0,1fr)}
.hb-about .clients{grid-template-columns:minmax(0,1fr)}
.hb-about .clients p{white-space:normal}
.hb-about .tl{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
.hb-about .tl time{font-size:40px}
.hb-about .map{aspect-ratio:4/3;min-height:0}
.hb-about .grid5{grid-template-columns:repeat(2,minmax(0,1fr))}
.hb-about .fullh div{grid-template-columns:minmax(0,1fr);gap:6px}}
@media (prefers-reduced-motion:reduce){.hb-about.abjs .scr:not(.on) .rv{opacity:1;transform:none}}
.hb-about .ch{display:inline-block;will-change:transform}
.hb-about .mask{display:block;overflow:hidden;padding-bottom:.06em}
.hb-about .mask > span{display:block}
.hb-about .nums .tick{position:absolute;left:0;top:0;height:2px;width:28px;border-radius:2px;background:var(--navy);transform-origin:left}
.hb-about .nums > div::before{display:none}
.hb-about .nums strong small{display:inline-block;transform-origin:left bottom}
.hb-about .s3 .left{justify-content:flex-start;gap:clamp(14px,2.6vh,30px)}
.hb-about .s3 h2{font-size:clamp(34px,min(3.8vw,7vh),68px);font-weight:800;line-height:1.12;letter-spacing:-0.05em;word-break:keep-all}
.hb-about .s3 h2 .thin{font-weight:200}
.hb-about .flow{position:relative;display:grid;gap:clamp(10px,2vh,24px);padding-left:34px}
.hb-about .flow svg{position:absolute;left:0;top:0;width:20px;height:100%;overflow:visible}
.hb-about .flow li{position:relative}
.hb-about .flow button{display:block;width:100%;padding:2px 0;color:var(--soft);transition:color .3s}
.hb-about .flow button b{display:block;font-size:clamp(20px,min(1.8vw,3.4vh),30px);font-weight:600;line-height:1.25;letter-spacing:-0.04em;transition:font-weight .3s}
.hb-about .flow button span{display:block;margin-top:clamp(4px,.8vh,8px);font-size:14px;font-weight:500;line-height:1.4;color:var(--mute)}
.hb-about .flow button[aria-pressed="true"]{color:var(--navy)}
.hb-about .flow button[aria-pressed="true"] b{font-weight:800}
.hb-about .flow .dot{position:absolute;left:-34px;top:calc(2px + .62em);width:13px;height:13px;margin-top:-6.5px;font-size:clamp(20px,min(1.8vw,3.4vh),30px);border-radius:50%;background:var(--wash);box-shadow:inset 0 0 0 2px var(--mute);transition:background .3s,box-shadow .3s,transform .3s}
.hb-about .flow button[aria-pressed="true"] .dot{background:var(--navy);box-shadow:0 0 0 5px rgba(17,44,112,.14);transform:scale(1.15)}
.hb-about .s3 .place{font-size:14px;color:var(--ink);line-height:1.6}
.hb-about .stagephoto .slide{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:none}
.hb-about .stagephoto .slide.on{clip-path:inset(0 0 0 0)}
.hb-about .stagephoto .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transform:scale(1.04)}
.hb-about .stagephoto .slide.empty{display:grid;place-items:center;background:linear-gradient(135deg,#E3E7F4,#EFEAF8)}
.hb-about .stagephoto .slide.empty p{display:grid;gap:6px;justify-items:center;font-size:15px;font-weight:700;color:var(--soft);text-align:center}
.hb-about .stagephoto .slide.empty p small{font-size:12px;font-weight:500;color:var(--mute)}
.hb-about .stagephoto .tilt{position:absolute;inset:-12px;transition:transform .6s var(--ease)}
.hb-about .isoBig{perspective:1200px}
.hb-about .isoBig .paper{transform-origin:left center}
.hb-about .qtxt li{border-top:0;position:relative}
.hb-about .qtxt li .rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.hb-about .tl{grid-template-rows:repeat(2,auto);align-content:space-evenly;row-gap:clamp(48px,12vh,140px)}
.hb-about .tl li::before{display:none}
.hb-about .tl li::after{transform:scale(0);transition:transform .45s var(--ease),background .3s}
.hb-about .tl li.lit::after{transform:scale(1.25)}
.hb-about .tl li.key.lit::after{background:var(--navy);animation:ab-breathe 2.4s ease-in-out infinite}
@keyframes ab-breathe{50%{box-shadow:inset 0 0 0 2px var(--navy),0 0 0 8px rgba(17,44,112,.10)}}
.hb-about .tl li > p{opacity:.001;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hb-about .tl li.lit > p{opacity:1;transform:none}
.hb-about .tl li time{opacity:0;transition:opacity .4s}
.hb-about .tl li.lit time{opacity:1}
.hb-about .tlsvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hb-about .tlsvg path{fill:none;stroke-linecap:round}
.hb-about .tlsvg .base{stroke:var(--line);stroke-width:1}
.hb-about .tlsvg .draw{stroke:var(--navy);stroke-width:2}
.hb-about .tlwrap{position:relative;min-height:0;display:grid}
.hb-about .map svg{position:absolute;inset:0;width:100%;height:100%}
.hb-about .map svg path{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9}
.hb-about .map .pin{animation:none}
.hb-about .map .pin.bob{animation:ab-bob 2.6s var(--ease) infinite}
.hb-about .map .ring{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:16px 0 0 -8px;border-radius:50%;border:2px solid var(--navy);opacity:0}
.hb-about .scr.leave .rv,.hb-about .scr.leave .lab{opacity:.001;transform:translateY(-24px);transition:opacity .45s,transform .45s}
@media (max-width:900px){.hb-about .flow button b{font-size:20px}
.hb-about .stagephoto .tilt{inset:0}}
@media (prefers-reduced-motion:reduce){.hb-about .tl li > p,.hb-about .tl li time{opacity:1;transform:none}
.hb-about .stagephoto .slide{clip-path:none;display:none}
.hb-about .stagephoto .slide.on{display:block}}
.hb-about .way h2 .mask > span{font-weight:800}
.hb-about .s2 .way{align-self:center;border-top:0;padding-top:0}
.hb-about .s2 .way h2{font-size:clamp(40px,min(4.6vw,8.6vh),88px)}
.hb-about .s2 .nums{align-self:end;padding-bottom:0}
.hb-about .s2 .way p.rv{transition-delay:.35s}
.hb-about .s2 .nums > .rv{transition-delay:.55s}
.hb-about .s3 .place{margin-top:calc(-1 * clamp(6px,1.4vh,16px))}
.hb-about .flow .rail{position:absolute;left:5.5px;top:0;width:2px;border-radius:2px;background:rgba(17,44,112,.16);transform-origin:top}
.hb-about .flow .rail .fill{position:absolute;left:0;top:0;width:100%;border-radius:2px;background:var(--navy);transition:height .7s cubic-bezier(.2,.7,.2,1)}
.hb-about .flow .rail::after{content:"";position:absolute;left:-3px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:transparent}
.hb-about .flow .dot{z-index:1}
.hb-about .flow button.done .dot{background:var(--navy);box-shadow:none;transform:scale(.8)}
.hb-about .flow button.done{color:var(--navy2)}
.hb-about .s3 .left{min-height:0}
.hb-about .flow{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(8px,1.6vh,20px);padding-bottom:clamp(4px,1vh,12px)}
@media (max-width:900px){.hb-about .flow{flex:none;justify-content:flex-start;gap:20px}}
/* ===== about v2 (2026-11-10 sian E): six full screens ===== */
.hb-about{background:transparent!important}
.hb-about [hidden]{display:none!important}
.hb-about .ab-top{position:fixed;top:0;left:0;right:0;z-index:30;padding:calc(clamp(14px,1.6vw,20px) + env(safe-area-inset-top,0px)) var(--gut) clamp(14px,1.6vw,20px);transition:background .4s,box-shadow .4s}
.hb-about .ab-top.solid{background:rgba(247,246,252,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(17,44,112,.10)}
.hb-about .ab-main{position:relative;z-index:1}
.hb-about .ab-main h1,.hb-about .ab-main h2,.hb-about .ab-main h3,.hb-about .ab-main h4,.hb-about .ab-main p,.hb-about .ab-main ol,.hb-about .ab-main ul,.hb-about .ab-main figure{margin:0;padding:0}
.hb-about .ab-main ol,.hb-about .ab-main ul{list-style:none}
.hb-about .ab-main button,.hb-about .sheet button,.hb-about .lb button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.hb-about .ab-main a{color:inherit;text-decoration:none}
.hb-about .ab-main img{max-width:100%;display:block}
.hb-about .marq li{border:0;width:150px;height:60px;padding:6px 10px;background:rgba(255,255,255,.7);border-radius:12px}
.hb-about .marq li img{width:100%;height:100%;object-fit:contain}
.hb-about .map{display:block;place-items:initial}
.hb-about .map #abMap{position:absolute;inset:0}
.hb-about .map .fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--soft)}
.hb-about .abpin{position:relative;padding:10px 18px;border-radius:12px;background:#112C70;color:#fff;font-size:15px;font-weight:800;font-family:var(--f);white-space:nowrap;transform:translateY(-14px);box-shadow:0 10px 24px rgba(17,44,112,.35)}
.hb-about .abpin::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#112C70;transform:translateX(-50%) rotate(45deg)}
.hb-about .abpin.drop{animation:ab-pindrop .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes ab-pindrop{0%{opacity:0;transform:translateY(-140px)}60%{opacity:1;transform:translateY(-14px)}78%{transform:translateY(-28px)}100%{transform:translateY(-14px)}}
.hb-about .hb-foot{position:relative;z-index:1}
@media (max-width:900px){.hb-about .ab-top{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}}
.hb-about .ab-main .flow{padding-left:34px;padding-bottom:clamp(4px,1vh,12px)}.hb-about .ab-main .cta{color:#fff}
/* 2026-11-10 23:55: square photos, certificates, map; button fixes */
.hb-about .stagephoto,.hb-about .stagephoto .slide,.hb-about .paper,.hb-about .map,.hb-about .marq li,.hb-about .grid5 .paper,.hb-about .lb .box,.hb-about .sheet .in,.hb-about .thumbs img{border-radius:0}
.hb-about .stagephoto figcaption{left:0;bottom:0;border-radius:0;padding:10px 18px}
.hb-about .ab-main .morebtn{height:auto;margin-top:clamp(18px,3vh,30px);padding:0 0 5px;gap:10px;border-radius:0;box-shadow:none;border-bottom:1.5px solid var(--navy);font-size:15px;font-weight:700}
.hb-about .ab-main .morebtn:hover{background:none;color:var(--navy)}
.hb-about .ab-main .morebtn span{transition:transform .3s}
.hb-about .ab-main .morebtn:hover span{transform:translateX(4px)}
.hb-about .ab-main .info .cta{justify-self:start;width:auto;height:58px;padding:0 28px 0 30px;gap:16px;margin-top:clamp(6px,1.6vh,16px);font-size:16px}
/* 11/10 23:59 wider map (attached framing) */
@media (min-width:901px){.hb-about .s6{grid-template-columns:minmax(0,2.6fr) minmax(0,1fr)}.hb-about .s6 .info strong{font-size:clamp(17px,1.35vw,22px)}}
/* 2026-11-11 00:01 buttons: A2 (list row) + B3 (large text link) */
.hb-about .ab-main .morebtn{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:720px;height:auto;margin-top:clamp(14px,2.4vh,24px);padding:14px 0;border:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:none;font-size:15px;font-weight:700;color:var(--navy)}
.hb-about .ab-main .morebtn:hover{background:none;color:var(--navy)}
.hb-about .ab-main .morebtn em{font-style:normal;margin-left:8px;font-size:13px;font-weight:600;color:var(--mute)}
.hb-about .ab-main .morebtn .arrow{transition:transform .3s}
.hb-about .ab-main .morebtn:hover .arrow{transform:translateX(4px)}
.hb-about .ab-main .cta2{justify-self:start;display:grid;gap:6px;margin-top:clamp(6px,1.6vh,16px);color:var(--navy)}
.hb-about .ab-main .cta2 small{font-size:13px;font-weight:500;color:var(--ink)}
.hb-about .ab-main .cta2 b{display:inline-flex;align-items:center;gap:12px;width:fit-content;padding-bottom:4px;border-bottom:1.5px solid var(--navy);font-size:clamp(24px,2vw,32px);font-weight:300;letter-spacing:-0.04em}
.hb-about .ab-main .cta2 b strong{font-weight:800}
.hb-about .ab-main .cta2 .arrow{transition:transform .3s}
.hb-about .ab-main .cta2:hover .arrow{transform:translateX(5px)}

/* 11/11 09:55 line breaks: one sentence per line on PC, no lone last word */
.hb-about .ab-main .s2 p,.hb-about .ab-main .s5 p{text-wrap:pretty}
@media (min-width:901px){.hb-about .ab-main .s2 .sen{display:block}}

/* 11/11 10:20 screen 4: sentence title first, ISO 22716 smaller below */
.hb-about .ab-main .qtxt .s4t{font-size:clamp(34px,min(3.8vw,7vh),68px);font-weight:800;line-height:1.12;letter-spacing:-0.05em;word-break:keep-all}
.hb-about .ab-main .qtxt .s4t .thin{font-weight:200}
.hb-about .ab-main .qtxt .lead{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(15px,1.1vw,17px);line-height:1.7;color:var(--navy2);word-break:keep-all;max-width:40em;text-wrap:pretty}
.hb-about .ab-main .qtxt .cty{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;font-weight:700;color:var(--navy)}
.hb-about .ab-main .qtxt .cty .k{color:var(--mute);font-weight:600}
.hb-about .ab-main .qtxt .cty span:nth-child(n+3)::before{content:"กค";margin-right:12px;color:var(--mute)}
.hb-about .ab-main .qtxt .isorow{margin-top:clamp(16px,3vh,30px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-top:14px;border-top:1px solid var(--navy);max-width:720px}
.hb-about .ab-main .qtxt #isoH{font-size:clamp(26px,2.2vw,36px);font-weight:800;letter-spacing:-0.04em;line-height:1}
.hb-about .ab-main .qtxt .isorow .name{margin:0;font-size:clamp(14px,1.1vw,16px);font-weight:600;color:var(--navy2)}
.hb-about .ab-main .qtxt .isorow .yr{margin:0;font-size:13px;color:var(--mute)}
.hb-about .ab-main .qtxt ul{margin-top:clamp(6px,1.4vh,14px)}
@media (min-width:901px){.hb-about .ab-main .qtxt .lead{max-width:none}.hb-about .ab-main .qtxt .lead .sen{display:block}}