/* 漢一「關於我們」頁 — 只放這一頁專用的樣式；共用樣式全在 style.css（不改）。
   版面照參考頁的區塊順序：標題 → 封面大圖 → 理念長文 → 四個數字 → 引言帶 → 團隊 → 獎項 → 行動呼籲 → 頁尾 */


:root{--ink-3:#A0A7B0} /* 深色版：這一頁不再另設 --navy／--ink-2／--slot-ink，全站同一套（style.css :root） */

/* ---------- 頁首：這一頁頂端是米白底，選單字改深藍 ---------- */
.page-about header .logo,.page-about .nav-links a:not(.btn){color:var(--navy)}
.page-about .burger i{background:var(--navy)}
.page-about .nav-links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:2px;text-underline-offset:6px}
@media (min-width:821px){
  /* 首頁滾上來那份字是珊瑚色（壓在影片上）；米白底上珊瑚字讀不到 ⇒ 維持深藍 */
  .page-about .nav-links .roll-in > span[aria-hidden]{color:var(--navy)}
}
@media (max-width:820px){
  
  .page-about header.solid{background:color-mix(in srgb,var(--bg) 94%,transparent)}
  .page-about header.solid .logo,.page-about header.open .logo,.page-about .nav-links a:not(.btn){color:#fff}
  @media (hover: hover) and (pointer: fine){.page-about .nav-links a:not(.btn):hover{color:var(--brick)}}
  .page-about header.solid .burger i,.page-about header.open .burger i{background:#fff}
  .page-about .nav-links a[aria-current="page"]{color:var(--brick);text-decoration:none}
}

/* ---------- ① 頁面標題 ---------- */
.ab-title{padding:184px 0 80px}
.ab-head{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 18px;margin-bottom:56px}
.ab-head h1{font-size:120px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--navy);display:flex;align-items:flex-end}
.ab-head .dot{display:inline-block;width:.13em;height:.13em;background:var(--navy);margin:0 0 .2em .06em}
.ab-tag{font-size:18px;color:var(--ink-2);padding-bottom:22px}
.ab-intro{font-size:16px;line-height:1.75;max-width:520px;margin-bottom:34px}

/* ---------- ② 封面大圖 ---------- */
.ab-cover-img{aspect-ratio:3/2;width:100%}
.ab-cover-img img{display:block;width:100%;height:100%;object-fit:cover}
.ab-slides{position:relative;overflow:hidden;background:var(--navy-3)}
.ab-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.ab-slide.on{opacity:1;visibility:visible;transition:opacity .6s ease}
.ab-sl-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(235,237,239,.92);color:var(--navy-3);cursor:pointer;transition:background .2s}
.ab-sl-btn::after{content:"";position:absolute;inset:min(0px,(100% - 44px)/2)}
@media (hover: hover) and (pointer: fine){.ab-sl-btn:hover{background:var(--navy)}}
.ab-sl-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ab-sl-btn.prev{left:20px}
.ab-sl-btn.next{right:20px}
.ab-sl-count{position:absolute;right:20px;bottom:18px;z-index:2;padding:4px 13px;border-radius:100px;background:rgba(9,17,30,.78);color:#fff;font-size:13px;line-height:1.6;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ab-slide,.ab-slide.on{transition:none}}

/* ---------- ③ 理念長文 ---------- */
.ab-story{padding:80px 0 90px}
.ab-story-in{max-width:880px;margin:0 auto;display:grid;gap:22px}
.ab-story h2,.ab-team-head h2,.ab-award-head h2{font-size:30px;line-height:1.45}
.ab-story h2{margin-bottom:2px}
.ab-points{margin-top:28px;border-top:1px solid color-mix(in srgb,var(--navy) 24%,transparent)}
.ab-point{display:grid;grid-template-columns:300px minmax(0,1fr);gap:8px 40px;padding:28px 0;border-bottom:1px solid color-mix(in srgb,var(--navy) 24%,transparent)}
.ab-point dt{font-size:17.5px;line-height:1.6;font-weight:600;color:var(--navy);text-wrap:balance}
.ab-point dd{margin:0;font-size:16px;line-height:1.95;font-weight:400;color:var(--ink-2)}
.ab-story-go{margin-top:20px;align-items:center;gap:14px 26px}
.ab-story p{font-size:19px;line-height:1.9;font-weight:500;color:var(--ink-2);max-width:720px}
.ab-story b{color:var(--navy);font-weight:600}

/* ---------- ④ 四個數字 ---------- */
.ab-facts{padding:0 0 100px}
.ab-facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ab-facts .slot{min-height:124px}
/* 四欄時一欄只有 (視窗寬-120)/4：首頁的 76px 下「21968+」寬 224px，821–1150 會擠到欄外 ⇒ 四組同一個字級隨寬度縮；820 以下兩欄照首頁的 clamp */
@media (min-width:821px){
  .ab-facts .stat-num{font-size:clamp(40px,6.6vw,76px)}
}

/* ---------- ⑤ 引言帶：沿用首頁 .quote，高度照參考頁 ---------- */
.page-about .quote{min-height:398px}
.page-about .quote.has-bg::after{background:linear-gradient(90deg,rgba(4,9,16,.62) 0%,rgba(4,9,16,.38) 45%,rgba(4,9,16,.08) 100%)}

/* ---------- ⑥ 團隊 ---------- */
.ab-team-grid{display:grid;grid-template-columns:minmax(0,640px) 483px;justify-content:space-between;gap:60px;align-items:start}
.ab-team-head h2{margin-bottom:24px}
.ab-team-head .slot{min-height:90px;max-width:600px;margin-bottom:110px}
.ab-team-lead{max-width:600px;margin-bottom:110px}
.tm-list{list-style:none;display:grid;gap:12px}
.tm{cursor:default;outline-offset:4px}
.tm-row{display:flex;align-items:baseline;gap:14px;padding:4px 0}
.tm-role{flex:none;font-size:14px;color:var(--ink-2);min-width:96px}
.tm-name{font-size:clamp(22px,2.1vw,30px);line-height:1.45;font-weight:600;color:var(--ink-2);transition:color .2s}
.tm.on .tm-name{color:var(--navy);text-decoration:underline;text-decoration-color:var(--brick);text-decoration-thickness:3px;text-underline-offset:8px}
.tm .tm-ph,.tm .tm-bio{display:none}
.tm-side{position:sticky;top:110px}
.tm-side-ph{aspect-ratio:483/655;overflow:hidden;background:var(--navy-3)}
.tm-ph img,.tm-side-ph img{display:block;width:100%;height:100%;object-fit:cover}
.tm-side-bio{margin-top:14px;min-height:70px}

/* ---------- ⑦ 獎項與認證 ---------- */
.ab-award-grid{display:grid;grid-template-columns:400px minmax(0,880px);justify-content:space-between;gap:60px;align-items:start}
.ab-award-head h2{margin-bottom:24px}
.ab-award-head .slot{min-height:110px}
.ab-award-img{display:block;width:100%;height:auto;margin-bottom:60px;border:1px solid var(--line)}

/* ---------- ⑧ 行動呼籲：沿用首頁 .cta，高度照參考頁 ---------- */
.ab-cta{min-height:516px}
.ab-cta .cta-in{padding-bottom:90px}
/* 首頁這行是 .7 白，照片最亮處只到 4.13 ⇒ 這一頁提到 .85 */
.ab-cta .anchor{color:rgba(255,255,255,.85)}

/* ---------- 深藍底上的空位字、聊天視窗小字：首頁的淡灰在 #454D5B 上過不了 4.5 ---------- */
.page-about .slot.dark{color:rgba(255,255,255,.78)}
.page-about .quote .q-bg{color:rgba(255,255,255,.78)}
.page-about .chat-head small{color:rgba(255,255,255,.82)}

/* ---------- 底部對話列：首頁壓在深色影片上，這一頁底下是米白 ⇒ 底色加深，白字才讀得到 ---------- */
.page-about .dock-ask{background:rgba(27,33,48,.94)}
.page-about .dock-ask input::placeholder{color:#C9C4BC}
.page-about .dock-chips .chip{background:rgba(9,17,30,.82)}
@media (hover: hover) and (pointer: fine){.page-about .dock-chips .chip:hover{background:rgba(9,17,30,.95)}}

/* ---------- 平板 ---------- */
@media (max-width:1100px){
  /* 1100 以下回頂鈕移到對話列上方（style.css），捲到底時正好壓住頁尾最右邊的 Instagram 圖示 ⇒ 頁尾底部多留 60px，三顆圖示整列落在回頂鈕上方 */
  .page-about footer{padding-bottom:250px}
  .ab-head h1{font-size:96px}
  .ab-team-grid{grid-template-columns:minmax(0,1fr) 340px;gap:40px}
  .ab-award-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 手機：團隊改成一人一張卡（照片＋職稱姓名＋介紹），右邊固定照片收起來 ---------- */
@media (max-width:820px){
  .ab-title{padding:128px 0 56px}
  .ab-head{margin-bottom:28px}
  .ab-head h1{font-size:64px}
  .ab-tag{font-size:16px;padding-bottom:10px}
  .ab-story{padding:56px 0 60px}
  .ab-story h2,.ab-team-head h2,.ab-award-head h2{font-size:24px}
  .ab-sl-btn{width:40px;height:40px}
  .ab-sl-btn.prev{left:10px}
  .ab-sl-btn.next{right:10px}
  .ab-sl-count{right:10px;bottom:10px;font-size:12px}
  .ab-point{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0}
  .ab-point dt{font-size:17px}
  .ab-point dd{font-size:15.5px;line-height:1.9}
  .ab-story p{font-size:17px}  /* 21px 不算大字，淺灰過不了 4.5 ⇒ 改回內文灰 */
  .ab-facts{padding-bottom:70px}
  .ab-facts-in{grid-template-columns:1fr 1fr;gap:10px}
  .ab-facts .slot{min-height:120px;font-size:12px;padding:12px}
  .ab-team-grid{grid-template-columns:minmax(0,1fr)}
  .ab-team-head .slot{margin-bottom:50px}
  .ab-team-lead{margin-bottom:50px}
  .tm-side{display:none}
  .tm-list{gap:40px}
  .tm .tm-ph{display:block;aspect-ratio:3/4;margin-bottom:12px;overflow:hidden;background:var(--navy-3)}
  .tm .tm-bio{display:flex;margin-top:8px}
  .tm-row{flex-direction:column;gap:2px;padding:0}
  .tm-name{font-size:22px;color:var(--navy)}
  .tm.on .tm-name{text-decoration:none}
  .ab-award-img{margin-bottom:40px}
  .ab-cta{min-height:560px}
  .ab-cta .cta-in{padding-bottom:60px}
}
/* 平板直拿（560–820）：一人一張卡排兩欄，照片不會撐到整個螢幕高 */
@media (min-width:560px) and (max-width:820px){
  .tm-list{grid-template-columns:1fr 1fr;gap:40px 20px}
}
@media (max-width:420px){
  .ab-head h1{font-size:52px}
}