/* ============================================================
   谷哥澳洲留学 · site.css
   移动优先；零外部依赖；系统字体栈
   配色约定：主色深蓝 + 强调暖赭。
   刻意避开正红 / 正绿 —— 该色相在 A 股语境中承载「涨 / 跌」语义，
   不可用作装饰色，以免与谷哥的行业语境冲突。
   ============================================================ */

:root {
  /* 配色基准：教育类深海军蓝 + 橙点缀（参考 Modern Coaching Institute 风格）。
     --brand 是导航/页脚/主按钮的深海军蓝；--accent 橙只做 CTA 与点缀，不铺大面。 */
  --brand:      #1C2C6E;
  --brand-2:    #35479B;
  --brand-3:    #EAEDF8;
  --brand-deep: #111B4E;
  --accent:     #EE8A17;
  --accent-2:   #FEF2E2;

  /* 分色州界地图的八州配色。见「分色州界地图」一节的说明：
     低饱和、明度夹在 54–78，不用正红 / 正绿。 */
  --au-wa:      #7EA9C2;   /* 西澳   雾蓝 */
  --au-nt:      #BFA6C6;   /* 北领地 灰紫 */
  --au-sa:      #EEDC9C;   /* 南澳   麦黄 */
  --au-qld:     #DF9E68;   /* 昆士兰 赭橙 */
  --au-nsw:     #AFC2A0;   /* 新州   鼠尾草 */
  --au-vic:     #8E9DC7;   /* 维州   蓝紫 */
  --au-tas:     #6BA298;   /* 塔州   青灰 */
  --au-act:     #C98A6B;   /* 首都   陶土 */
  --au-lab:     #16202E;   /* 州名墨色 */
  --au-lead:    #6E7B89;   /* 引线 */

  --ink:        #16202E;
  --ink-2:      #56616F;
  --ink-3:      #8B95A3;
  --line:       #E4E8EE;
  --line-2:     #EEF1F5;

  --bg:         #FFFFFF;
  --bg-2:       #F6F8FB;
  --bg-3:       #EDF1F6;

  --r-sm:       6px;
  --r:          10px;
  --r-lg:       14px;
  --r-pill:     999px;

  --wrap:       1120px;
  --pad:        18px;

  --fs-xs:      12px;
  --fs-sm:      13px;
  --fs:         15px;
  --fs-lg:      17px;

  --shadow:     0 1px 2px rgba(22, 32, 46, .05), 0 6px 18px rgba(22, 32, 46, .05);
  --shadow-hi:  0 2px 4px rgba(22, 32, 46, .06), 0 12px 30px rgba(22, 32, 46, .09);

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* 必须带 !important：本表里的 .col{display:flex} 等类选择器与 [hidden]
   同优先级，靠后定义会反过来盖掉它，导致 hidden 失效、筛选功能失灵。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 600; color: var(--ink); }
h1 { font-size: 25px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p  { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-left: 20px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ---------- 布局 ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: 44px 0; }

/* ---------- 首页中段照片带：歌剧院做底 + 页头同色深蓝蒙版 ----------
   蒙版用页头同款 rgba(17,27,78,*)，上下略深中间略透 —— 歌剧院灯火能
   隐约透出来，白字和白色服务卡都压得住。 */
.svc-band {
  position: relative;
  /* 顶部 12px = 与 hero 里大标题→引言的间距一致（谷哥定稿） */
  padding: 12px 0 48px;
  background-size: cover; background-position: center 72%;
  color: #fff;
}
.svc-band::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(17, 27, 78, .80),
    rgba(17, 27, 78, .66) 45%,
    rgba(17, 27, 78, .80));
}
.svc-band > .wrap { position: relative; z-index: 1; }
.svc-band .sec-head h2 { color: #fff; }
.svc-band .sec-head p { color: rgba(255, 255, 255, .85); }
.svc-band .more { color: #fff; font-weight: 600; }
.svc-band .more:hover { color: var(--accent); }
.svc-band .card { box-shadow: 0 12px 28px rgba(7, 12, 40, .38); }
.sec-bg { background: var(--bg-2); }
.sec-tight { padding: 30px 0; }

.sec-head { margin-bottom: 22px; }
.sec-head h2 { margin-bottom: 8px; }
.sec-head p { color: var(--ink-2); margin: 0; font-size: var(--fs-sm); }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.more { font-size: var(--fs-sm); white-space: nowrap; }
.more::after { content: " →"; }

/* ---------- 页头 ---------- */
.hd {
  /* 页头不再单独配色：透明悬浮，与下方照片带（hero / ph-sec）融为一体。
     所有页面顶部都是深色照片带，白字导航直接压在上面；
     移动端下拉菜单自带实色底，不受影响。 */
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
}
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }

.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.brand-txt i { font-size: 9.5px; font-style: normal; color: rgba(255, 255, 255, .58); letter-spacing: 1.1px; }

.hd-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-sm);
  cursor: pointer; padding: 0;
}
.hd-btn span { display: block; width: 17px; height: 1.5px; background: #fff; transition: transform .2s, opacity .2s; }
.hd-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hd-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.hd-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--brand-deep); border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 8px var(--pad) 16px;
  box-shadow: var(--shadow);
}
.hd-nav.open { display: block; }
.hd-nav ul { list-style: none; margin: 0; padding: 0; }
.hd-nav li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hd-nav li:last-child { border-bottom: 0; }
.hd-nav a.nav-l {
  display: block; padding: 13px 2px; font-size: var(--fs); color: #fff; font-weight: 500;
}
.hd-nav a.nav-l:hover { text-decoration: none; color: var(--accent); }
.hd-nav a.nav-l[aria-current="page"] { color: var(--accent); }
/* 「留学服务」= 首页本身：橙色实底标签，表示「你已在这里」，不必点进任何子页 */
.hd-nav a.nav-l.nav-tag { color: #fff; background: var(--accent); border-radius: 999px; padding-left: 13px; padding-right: 13px; }
.hd-nav a.nav-l.nav-tag:hover { color: #fff; background: #d97a10; }
.hd-nav a.nav-l.nav-tag[aria-current="page"] { color: #fff; }
.hd-nav a.nav-l.nav-tag[aria-current="page"]::after { display: none; }
.hd-nav .nav-cta { margin-top: 14px; display: block; text-align: center; }
/* 「免费申请」弱化态：仅在联系/免费申请页才换橙色实底（build.py 控制） */
.hd-nav a.nav-cta.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.hd-nav a.nav-cta.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* 服务详情板块（并入首页）的橙色编号 */
.svc-no { color: var(--accent); font-weight: 700; margin-right: 10px; font-size: .78em; vertical-align: 3px; letter-spacing: 1px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: var(--fs); font-weight: 500; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-p { background: var(--brand); color: #fff; }
.btn-p:hover { background: var(--brand-2); }
.btn-o { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-o:hover { border-color: var(--brand-2); color: var(--brand-2); }
.btn-a { background: var(--accent); color: #fff; }
.btn-a:hover { background: #D0740E; }
/* 白底按钮：深色照片带（页头 / CTA）上用，全局可用（hero 内另有同规则） */
.btn-w { background: #fff; color: var(--brand); }
.btn-w:hover { background: #F0F4FA; }
.btn-sm { padding: 9px 16px; font-size: var(--fs-sm); }
.btn-lg { padding: 14px 28px; font-size: var(--fs-lg); }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Hero ---------- */
.hero {
  background: var(--brand);
  color: #fff;
  /* 顶部 118px：减去悬浮页头 58px 后，文字上方净空 60px；
     底部 48px + 留学服务带顶 12px = 下方净空 60px —— 文字块
     恰好在页头与留学服务带之间居中（谷哥定稿） */
  padding: 118px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(255, 255, 255, .045);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: 26px; letter-spacing: .3px; }
/* lead 一行到底：桌面端放开宽度限制并强制不换行（文本约 800px，≥900px 视口放得下）；
   窄屏强制 nowrap 会横向溢出，恢复自然换行。 */
.hero .lead { color: rgba(255, 255, 255, .84); font-size: var(--fs-lg); margin: 12px 0 0; max-width: none; }
@media (min-width: 900px) {
  .hero .lead { white-space: nowrap; }
}
.hero .btn-row { margin-top: 24px; }
.hero .btn-o { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.hero .btn-o:hover { border-color: #fff; color: #fff; }
.hero .btn-w { background: #fff; color: var(--brand); }
.hero .btn-w:hover { background: #F0F4FA; }

/* ---------- 卡片 ---------- */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; box-shadow: var(--shadow);
  /* 这里刻意不写 height:100%。.card 作为 grid item 本来就默认被拉伸到行高，
     写了反而出事：若卡片所在的那一列后面还有别的元素（如「服务范围」下面跟一个
     .note），卡片会撑满整行高度，把后面的元素顶出这一行、溢出到 section 之外，
     压在下个区块的文字上形成「重影」。已实测确认过。 */
}
.card-hover { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--shadow-hi); border-color: #D5DCE5; }
.card h3 { margin-bottom: 7px; }
.card p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { text-decoration: none; }
/* 首页五页入口卡的澳洲图标（内联 SVG，currentColor 跟随文字色） */
.entry-ic { display: block; width: 34px; height: 34px; margin: 2px 0 10px; color: var(--brand); }
.entry-ic svg { width: 100%; height: 100%; }
a.card:hover .entry-ic { color: var(--accent); }

/* ---------- 合并首页的板块容器（单页路由） ---------- */
.pg[hidden] { display: none; }

/* 服务卡：带序号 */
.svc { position: relative; padding-top: 20px; }
.svc .no {
  position: absolute; top: 14px; right: 16px;
  font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .5px;
}
.svc .who { font-size: var(--fs-xs); color: var(--accent); font-weight: 500; margin-bottom: 6px; }

/* ---------- 院校卡（轮播版，校园图底） ----------
   版式参考 Australia Post「Locker Land」：厚奶白边 + 大圆角 + 满铺图片，
   底部信息压在渐变遮罩上，悬停整卡微微放大（reduced-motion 关闭）。
   --sc / --sc-t 仍是校色：只做没图时的渐变兜底卡面，不承载文字。
   文字一律走白/暖白 —— 深色渐变遮罩保证对比度。 */
.cc {
  position: relative;
  flex: 0 0 88%;                    /* 手机：露出下一张一角，暗示可滑 */
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px;
  padding: 14px;
  border: 5px solid #FFFDF7;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--sc-t, #FFF6E3), var(--sc, var(--brand)));
  color: #fff;
  text-decoration: none;
  isolation: isolate;               /* 让 ::before/::after 的 -1 层留在卡内 */
  transition: box-shadow .25s, transform .25s;
  /* 弧形照片墙：--ry 侧转 / --tz 沿视线拉远（每卡自带 perspective，
     拉远即等比缩小，弧线两端自然退小）/ --ts 微调缩放，由 site.js
     按滚动位置实时写入，断 JS 或未赋值时缺省 = 平铺列表。 */
  transform: perspective(1200px) translateZ(var(--tz, 0px))
             rotateY(var(--ry, 0deg)) scale(var(--ts, 1));
}
.cc::after {                       /* 底部渐变遮罩：信息压在上面才读得清 */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 22, 33, 0) 38%, rgba(15, 22, 33, .82));
}
.cc-img {                          /* 校园实拍（_fetch_campus.py 抓取） */
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .45s ease;
  pointer-events: none;            /* 兜底：即便漏了 draggable=false 也不许图抢拖拽 */
  -webkit-user-drag: none;
}
.cc img { pointer-events: none; -webkit-user-drag: none; }  /* 校徽同理，不许抢拖拽 */
.cc {
  -webkit-user-drag: none;               /* 链接本体也不许原生拖拽（同图片） */
  user-select: none; -webkit-user-select: none;  /* 拖动时别选中文本 */
}
.cc:hover, .cc:focus-visible {
  text-decoration: none;
  /* hover：弹出弧线、摆正朝向观察者并放大，压过相邻卡（z 用 !important
     盖掉 JS 写的内联层级） */
  transform: perspective(1200px) translateZ(90px) translateY(-6px) scale(1.06);
  box-shadow: 0 18px 40px rgba(22, 32, 46, .30);
  z-index: 300 !important;
}
.cc:hover .cc-img, .cc:focus-visible .cc-img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .cc, .cc-img { transition: none; }
  .cc { transform: none; }         /* 扇形整个关掉，退回平铺 */
  .cc::before { display: none; }
  .cc:hover, .cc:focus-visible { transform: none; }
  .cc:hover .cc-img, .cc:focus-visible .cc-img { transform: none; }
}

.cc-logo {
  position: absolute; top: 12px; left: 12px;
  width: 46px; height: 46px; padding: 6px;
  border-radius: 12px; background: #FFFDF7;
  display: flex; align-items: center; justify-content: center;
}
.cc-logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.cc-badges { position: absolute; top: 14px; right: 12px; }
.cc-badge {
  font-size: 11px; line-height: 1.65; padding: 1px 9px;
  border-radius: var(--r-pill); font-weight: 700; white-space: nowrap;
  background: #FFFDF7; color: var(--ink-2);
}

.cc-name {
  display: block; font-size: var(--fs-lg); font-weight: 800; line-height: 1.3;
  color: #fff; text-shadow: 0 1px 8px rgba(15, 22, 33, .45);
}
.cc-en {
  display: block; font-style: normal; font-size: 11.5px;
  color: rgba(255, 255, 255, .85); line-height: 1.4; margin-top: 2px;
  word-break: break-word;
}
.cc-meta {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  width: fit-content; margin-top: 10px; padding: 5px 12px;
  border-radius: var(--r-pill); background: #FFFDF7;
}
.cc-meta b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-meta i { font-style: normal; font-size: var(--fs-xs); color: var(--ink-2); }
/* 卡内 QS 名次走小号：大数字版式已让位给图片 */
.cc-meta .cc-qs-n { font-size: 14px; }
.cc-meta .cc-qs-na { font-size: 12.5px; }

/* ---------- 轮播外壳（循环版） ----------
   进度条 / 页码 / 暂停按钮已删：只留卡片，两颗箭头底部居中（参考 Locker Land）。
   循环由 site.js 克隆首尾卡片完成。 */
.sec-caro { background: #F1F3FA; }   /* 浅蓝灰底：白卡压白底会发飘，压灰蓝更稳 */
.sec-caro .disclaim { color: var(--ink-2); }
.img-credit { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* 地图选州后的状态条：只在按州筛选时出现 */
.caro-state {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 16px; font-size: var(--fs-sm); color: var(--ink-2);
}
.caro-state b { color: var(--ink); }
.state-clear {
  border: 1px solid var(--line); background: #fff; color: var(--brand);
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.state-clear:hover { border-color: var(--brand); background: var(--brand-3); }

.caro-nav { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.caro-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink-2); cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.caro-btn > svg { width: 17px; height: 17px; }
.caro-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-3); }

.caro-vp {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 0 18px;            /* 给悬停抬升与阴影留出空间 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.caro-vp::-webkit-scrollbar { display: none; }
.caro-vp:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 22px; }
.caro-track { display: flex; gap: 16px; align-items: stretch; cursor: grab;
  position: relative;               /* 让 .cc 的 offsetLeft 以 track 为基准，
                                       与 scrollLeft 同一坐标系（弧形 tilt 用） */ }
/* 拖拽期间必须关掉 scroll-snap，否则浏览器会把 scrollLeft 拽回吸附点 */
.caro-track.is-drag { cursor: grabbing; }
.caro-vp.is-drag { scroll-snap-type: none; scroll-behavior: auto; }
.caro-vp.is-drag .cc { pointer-events: none; }

/* 桌面每次正好 3 张；平板 2 张；手机 1 张多一点 */
@media (min-width: 640px) { .cc { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 900px) { .cc { flex-basis: calc((100% - 32px) / 3); } }

@media (max-width: 639px) {
  .cc { min-height: 240px; border-width: 4px; border-radius: 16px; padding: 11px; }
  .cc-logo { width: 40px; height: 40px; top: 10px; left: 10px; }
  .caro-btn { width: 36px; height: 36px; flex-basis: 36px; }
}

/* .col-logo / .col-en 仍被院校详情页的页头复用，保留 */
.col-logo {
  width: 52px; height: 52px; flex: 0 0 52px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; padding: 5px;
  display: flex; align-items: center; justify-content: center;
}
.col-logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.col-en { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; margin-bottom: 7px; word-break: break-word; }

/* ---------- 标签 ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; line-height: 1.6; white-space: nowrap;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid transparent;
}
.tag-go8  { background: var(--accent-2); color: var(--accent); border-color: #F6DCB2; }
.tag-rank { background: var(--brand-3); color: var(--brand); border-color: #D3E2F4; }
.tag-rmt  { background: var(--brand-3); color: var(--brand); border-color: #D3E2F4; }
.tag-soft { background: var(--bg-2); color: var(--ink-2); border-color: var(--line); }

/* ---------- 列表 / 表格 ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tbl th, table.tbl td {
  padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
table.tbl th { background: var(--bg-2); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.kv { display: grid; gap: 12px; grid-template-columns: 1fr; }
.kv > div { min-width: 0; }
.kv dt { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 3px; }
.kv dd { margin: 0; color: var(--ink); word-break: break-word; }

/* 关键数据四宫格 */
.facts4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.facts4 > div { background: #fff; padding: 14px 15px; }
.facts4 .k { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 4px; }
.facts4 .v { font-size: 16px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.facts4 .v small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); margin-top: 3px; }

/* ---------- 流程 ---------- */
.steps { counter-reset: s; display: grid; gap: 10px; }
.step {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px;
}
.step::before {
  counter-increment: s; content: counter(s);
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.step b { display: block; margin-bottom: 2px; font-size: var(--fs); }
.step p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- 折叠 FAQ ---------- */
details.faq {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 9px; overflow: hidden;
}
details.faq summary {
  padding: 14px 44px 14px 16px; cursor: pointer; font-weight: 500;
  position: relative; list-style: none; font-size: var(--fs);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 19px; font-weight: 400; color: var(--ink-3); line-height: 1;
}
details.faq[open] summary::after { content: "−"; }
details.faq[open] summary { border-bottom: 1px solid var(--line-2); }
details.faq .a { padding: 14px 16px; color: var(--ink-2); font-size: var(--fs-sm); }
details.faq .a > :last-child { margin-bottom: 0; }

/* ---------- 提示条 ---------- */
.note {
  border-left: 3px solid var(--accent); background: var(--accent-2);
  padding: 13px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); color: #6B3E12;
}
.note-info { border-left-color: var(--brand-2); background: var(--brand-3); color: #12385F; }
.note > :last-child { margin-bottom: 0; }

/* 关于页「服务范围 / 怎么开始」两栏：
   右栏卡片拉伸至与左栏「我不做的事」底框对齐，卡内文字行距放宽 */
.about-cols > div { display: flex; flex-direction: column; }
.about-cols .about-start { flex: 1; }
.about-start p { line-height: 2.0; }
.about-start .ticks li { line-height: 1.9; }
.about-start .ticks li + li { margin-top: 10px; }
.about-start > p.mb0 { margin-top: auto; padding-top: 20px; text-align: right; }  /* 免费申请按钮钉在卡底右下 */

/* 免费申请页右栏：flex 纵排，底部说明条 margin-top:auto 钉底，
   与左栏「留学申请结果由院校独立决定…」文字底缘对齐（网格两栏等高拉伸） */
.contact-aside { display: flex; flex-direction: column; }
.contact-aside .aside-note { margin-top: auto; margin-bottom: 17px; }  /* 抬起行高下沉量，框底与左栏文字字面底对齐 */
.contact-main { display: flex; flex-direction: column; }
.contact-main .disclaim { margin-top: auto; padding-top: 14px; }

/* 关于页「在社交平台找到谷哥」：两张二维码卡居中排版 */
.follow-card { text-align: center; padding: 26px 22px; }
.follow-card img {
  display: block; width: min(230px, 78%); height: auto;
  margin: 0 auto 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.follow-card h3 { font-size: var(--fs-md); }
.follow-card p { font-size: var(--fs-sm); }

.disclaim { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.7; }

/* ---------- CTA 区块 ---------- */
/* .cta 样式合并进下方「照片底 + 蒙版」段 */
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .82); margin: 8px 0 0; font-size: var(--fs-sm); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 微信 / 联系方式 ---------- */
.contact-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.qr {
  width: 168px; height: 168px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-3); font-size: var(--fs-xs); padding: 12px;
}
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 11px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 12px; font-size: var(--fs-sm); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .k { color: var(--ink-3); flex: 0 0 72px; }
.contact-list .v { color: var(--ink); word-break: break-word; flex: 1; }

.todo { color: var(--ink-3); font-size: var(--fs-sm); }

/* ---------- 表单 ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); color: var(--ink-2); }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; font-family: inherit; font-size: var(--fs);
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-2); outline: 2px solid rgba(27, 95, 168, .16); outline-offset: 0;
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-2); }
.check input { width: auto; margin-top: 3px; flex: 0 0 auto; }

/* ---------- 页脚 ---------- */
.ft { background: var(--brand-deep); color: rgba(255, 255, 255, .72); margin-top: 44px; padding: 34px 0 26px; font-size: var(--fs-sm); }
.ft a { color: rgba(255, 255, 255, .82); }
.ft a:hover { color: #fff; }
.ft-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.ft h4 { color: #fff; font-size: var(--fs-sm); margin-bottom: 10px; letter-spacing: .3px; }
.ft-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ft-brand img { width: 34px; height: 34px; border-radius: 8px; }
.ft-brand b { color: #fff; font-size: 15px; }
.ft ul { list-style: none; padding: 0; margin: 0; }
.ft li { margin-bottom: 7px; }
.ft-bot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .5);
}
.ft-bot-row {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: space-between; align-items: baseline;
}
.ft-bot-row p { margin: 0; }
.ft-bot p { margin: 0 0 5px; }
.ft-filing a { margin-right: 12px; }

/* 深色页脚里的描边按钮必须显式改回「幽灵」样式。
   .btn-o 原本是白底蓝字，但 .ft a{color:rgba(255,255,255,.82)} 的特异性
   高于 .btn-o，文字被判成白色 -> 白底白字，页脚的「免费申请 →」整个看不见。
   实测在 404 页页脚确认过。 */
.ft .btn-o {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, .38);
}
.ft .btn-o:hover {
  background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff;
}

/* ---------- 面包屑 ---------- */
.crumb { font-size: var(--fs-xs); color: var(--ink-3); padding: 14px 0 0; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand-2); }
.crumb span { margin: 0 6px; }

/* ---------- 照片底 + 蒙版（页头横幅 / CTA 盒子） ----------
   照片由 build.py 以内联 background-image 指定（按页面解析相对路径，
   不进 site.css —— Chromium 会把样式表里的相对 url 按 css 文件位置解析）。
   蒙版全部走深蓝系，保证与页头页脚同基调；文字永远压在蒙版之上。 */
.ph-sec {
  position: relative;
  background-size: cover; background-position: center;
  color: #fff;
}
.ph-sec::before {
  content: ""; position: absolute; inset: 0;
  /* 上深下略浅：与页脚衔接时不会出现生硬的分界线 */
  background: linear-gradient(180deg, rgba(17, 27, 78, .90), rgba(17, 27, 78, .78));
}
.ph-sec > .wrap { position: relative; }
.ph-sec h1, .ph-sec h2, .ph-sec h3 { color: #fff; }
.ph-sec p { color: rgba(255, 255, 255, .85); }
.ph-sec .crumb, .ph-sec .crumb a { color: rgba(255, 255, 255, .62); }
.ph-sec .crumb a:hover { color: #fff; }
.ph-sec .sec-head p { color: rgba(255, 255, 255, .85); }

/* 页头横幅专档：crumb 与标题合并成一条照片带 */
.ph-head { padding: 72px 0 36px; }   /* 顶部 72px 给悬浮页头让位 */
.ph-head .crumb { padding-bottom: 10px; }
/* 404 等裸 ph-sec（没有 ph-head 的）也要让出页头高度 */
.sec.ph-sec { padding-top: 104px; }
.ph-sec .muted, .ph-sec .col-en { color: rgba(255, 255, 255, .78); }
.ph-sec .note-info { background: transparent; color: rgba(255, 255, 255, .88); border-left: 0; padding-left: 0; }  /* 服务详情页头：去白框，只留白字 */

/* 首页 hero 照片底：蒙版比页头略透一点，让歌剧院轮廓透出来 */
.hero-photo { background-size: cover; background-position: center 62%; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  /* 调亮：原 .93/.74 太闷，歌剧院轮廓看不清；仍保留足够深度保白字可读 */
  background: linear-gradient(100deg, rgba(17, 27, 78, .78), rgba(17, 27, 78, .52));
}

.cta {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  color: #fff;
  border-radius: var(--r-lg); padding: 28px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(17, 27, 78, .93), rgba(28, 44, 110, .84));
}
.cta > * { position: relative; }

/* ---------- 表格斑马 ---------- */
.zebra tbody tr:nth-child(even) { background: var(--bg-2); }

/* ---------- 工具类 ---------- */
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; } .mt22 { margin-top: 22px; } .mt30 { margin-top: 30px; }
.mb8 { margin-bottom: 8px; } .mb14 { margin-bottom: 14px; } .mb22 { margin-bottom: 22px; }
.tc { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   澳洲元素
   ------------------------------------------------------------
   全部为自绘 SVG（见 build.py 的 svg_* 系列），颜色走 currentColor，
   跟随所在区块的 color。深浅底只有一处需要覆盖：--au-halo（州名描边色）。
   ============================================================ */
:root { --au-halo: #fff; }

/* ---------- 页头：顶部饰条 + 大陆轮廓水印 ---------- */
.hd::before {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-2) 52%, var(--accent));
}
/* 水印放在品牌与导航之间的空白处，不与任何文字重叠；窄屏直接隐藏。
   宽度必须让整张图（含 viewBox 留白）落在页头高度内 —— 设成 116px 时
   实际高 95px，会上下各溢 17px 盖到 Hero 上。70px→57px 高，正好装下。 */
.hd-au {
  display: none;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 70px; color: var(--brand); opacity: .15;
  pointer-events: none; z-index: 0;
}
.hd-au svg { width: 100%; height: auto; display: block; }
.hd-in { position: relative; z-index: 1; }
@media (min-width: 860px) { .hd-au { display: block; } }

/* ---------- 页脚：大陆轮廓 + 南十字座 ---------- */
.ft { position: relative; overflow: hidden; }
.ft .wrap { position: relative; z-index: 1; }
/* right 的负值 = 自身宽度，这让左边缘正好贴住 wrap 的右边缘，
   元素整体落在右侧留白里 —— 实测页脚文字与它零重叠。
   视口不够宽时（留白 < 元素宽度）被 .ft 的 overflow 裁掉，自然退场。 */
.ft-au { position: absolute; right: -150px; bottom: -18px; width: 150px; pointer-events: none; }
.ft-au svg { width: 100%; height: auto; display: block; }
.ft-sc { position: absolute; right: -34px; top: 44px; width: 30px; pointer-events: none; }
.ft-sc svg { width: 100%; height: auto; display: block; }

/* ---------- 灰底区块的澳洲底纹（仅宽屏，避免压到正文） ---------- */
.sec-bg { background-color: var(--bg-2); }
@media (min-width: 860px) {
  .sec-bg {
    background-image: url(../img/au/map-tint.svg);
    background-repeat: no-repeat;
    background-position: right -56px center;
    background-size: 268px auto;
  }
}

/* ---------- 通用小标签 ---------- */
.au-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.au-eyebrow-sc { display: inline-flex; width: 12px; flex: 0 0 12px; }
.au-eyebrow-sc svg { width: 100%; height: auto; display: block; }

/* ---------- 深色澳洲区块 ---------- */
.au-band {
  background: var(--brand-deep); color: #fff;
  padding: 38px 0; position: relative; overflow: hidden;
  --au-halo: #2A3A85;
}
.au-band h2 { color: #fff; }
.au-band p { color: rgba(255, 255, 255, .78); }
.au-band .au-note { font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); margin: 12px 0 0; }
.au-in { display: grid; gap: 22px; align-items: center; }
.au-art { color: #fff; }
.au-art svg { width: 100%; max-width: 400px; margin: 0 auto; display: block; }
.au-art .pin text { font-size: 5px; font-weight: 600; }

/* ---------- 浅色澳洲面板（正文页用，比深色区块轻） ---------- */
.au-panel {
  background: var(--brand-3); border: 1px solid #D3E2F4;
  border-radius: var(--r-lg); padding: 18px;
  display: grid; gap: 18px; align-items: center;
}
.au-panel h2 { font-size: var(--fs-lg); margin-bottom: 6px; }
.au-panel p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 10px; }
.au-panel .au-note { font-size: var(--fs-xs); color: var(--ink-3); margin: 12px 0 0; }
.au-panel .au-art { color: var(--brand-2); }
.au-panel .au-art svg { width: 100%; max-width: 250px; margin: 0 auto; display: block; }

/* ---------- 分色州界地图（院校库专用） ----------
   与 .au-band 里那张轮廓线稿是两个东西：那张是装饰，这张是要读的信息图。
   配色同样守「不用正红 / 正绿」的约定 —— 走低饱和的
   雾蓝 → 青灰 → 麦黄 → 赭橙 → 鼠尾草 → 灰紫 → 陶土 色带。
   明度统一压在 54–78 之间有两个目的：一是八块摆在一起不打架，
   二是深色州名压在任何一块上都读得清。 */
.au-panel-map { align-items: center; }
.au-panel.au-panel-map .au-art { width: 100%; }
.au-panel.au-panel-map .au-art svg.au-map-svg { max-width: 520px; width: 100%; }

.au-map-svg { display: block; width: 100%; height: auto; }
.au-map-lk { cursor: pointer; }
.au-map-r {
  fill: var(--sc, #DCE9F5);
  stroke: #fff; stroke-width: .32; stroke-linejoin: round;
  transition: filter .16s ease;
}
.au-map-lk:hover .au-map-r,
.au-map-lk:focus .au-map-r { filter: brightness(.93) saturate(1.25); }
.au-map-lk:focus { outline: none; }
.au-map-lk:focus .au-map-r { stroke: var(--brand-deep); stroke-width: .6; }
.au-g-WA  { --sc: var(--au-wa); }
.au-g-NT  { --sc: var(--au-nt); }
.au-g-SA  { --sc: var(--au-sa); }
.au-g-QLD { --sc: var(--au-qld); }
.au-g-NSW { --sc: var(--au-nsw); }
.au-g-VIC { --sc: var(--au-vic); }
.au-g-TAS { --sc: var(--au-tas); }
.au-g-ACT { --sc: var(--au-act); }
/* 首都特区本体在图上只有 7×9 px，白描边加粗到能认出是个独立地块；
   再叠一个同色圆环当「点状标记」——小面积区域用点符号表达是常规做法，
   不加的话它的颜色会被邻州边界压掉，等于白配。 */
.au-g-ACT .au-map-r { stroke-width: .5; }
.au-mark { fill: var(--au-act); stroke: #fff; stroke-width: .5; }

/* paint-order: stroke —— 先描边后填字，等于给字加一圈白晕。
   没有这一条，州名压在赭橙 / 陶土那几块上会糊掉。 */
.au-lb {
  fill: var(--au-lab); font-size: 4px; font-weight: 700; letter-spacing: .3px;
  paint-order: stroke; stroke: rgba(255, 255, 255, .88); stroke-width: .95;
  stroke-linejoin: round; pointer-events: none;
}
.au-lb-sm { font-size: 3.1px; }
.au-lb-lead {
  fill: none; stroke: var(--au-lead); stroke-width: .42;
  stroke-dasharray: .8 .7; stroke-linecap: round; pointer-events: none;
}
.au-city circle { fill: #fff; stroke: var(--ink); stroke-width: .55; }
.au-city text {
  fill: var(--ink); font-size: 3px; font-weight: 600;
  paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 1.05;
  stroke-linejoin: round; pointer-events: none;
}
.au-map-lbs, .au-map-cities { pointer-events: none; }

/* ---------- 州 / 领地列表 ---------- */
.au-states {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2px; grid-template-columns: repeat(2, 1fr);
}
.au-states a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.au-states a:hover { text-decoration: none; background: rgba(28, 44, 110, .08); color: var(--brand); }
.au-states b { flex: 0 0 36px; font-size: var(--fs-xs); letter-spacing: .6px; color: var(--ink-3); }
.au-states span { flex: 1; min-width: 0; }
.au-states i { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.au-band .au-states a { color: rgba(255, 255, 255, .82); }
.au-band .au-states a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.au-band .au-states b { color: rgba(255, 255, 255, .55); }
.au-band .au-states i { color: #E3A85F; }

/* ---------- 细长澳洲条 ---------- */
.au-strip { background: var(--brand); }   /* 深蓝横条：白底段落之间的过渡带 */
.au-strip-in { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
.au-strip-art { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .9); flex: 0 0 auto; }
.au-strip-art svg { display: block; height: 22px; width: auto; }
.au-strip p { margin: 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, .88); }

/* ---------- 人物区块（照片 + 简介） ---------- */
.bio { display: grid; gap: 22px; align-items: start; }
.bio-photo { margin: 0; }
.bio-photo img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bio-photo figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); }
.bio-photo figcaption b { color: var(--ink); }
.bio-photo figcaption span { color: var(--ink-3); font-size: var(--fs-xs); }
.bio-copy > h2:first-child { margin-top: 0; }

/* ---------- 打勾列表 ---------- */
.ticks { list-style: none; padding: 0; margin: 0 0 12px; }
.ticks li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: var(--fs-sm); }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 15px;
  /* 勾用内联 SVG，避免为了一个符号引图标字体 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.9' fill='none' stroke='%23C9761B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================
   页面底照（关于谷哥）
   ------------------------------------------------------------
   照片做整页底部背景：靠 mask 从透明渐入，再压一层色罩保证文字可读。
   色罩收口用页脚同色（brand-deep），使照片与页脚无缝相接。
   ============================================================ */
.photo-band {
  position: relative; margin-top: 48px; padding: 96px 0 56px;
  overflow: hidden; color: #fff; --au-halo: #2A3A85;
}
.photo-band-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 26%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 24%, #000 52%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 24%, #000 52%, #000 100%);
}
.photo-band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, .5) 16%,
    rgba(17, 27, 78, .06) 34%,
    rgba(17, 27, 78, .68) 64%,
    rgba(17, 27, 78, .95) 100%);
}
.photo-band-in { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }  /* 文案与二维码框垂直居中 */
.photo-band h2 { color: #fff; font-size: 26px; }
.photo-band-copy p { color: rgba(255, 255, 255, .88); font-size: var(--fs-sm); margin: 10px 0 0; max-width: 520px; }
.photo-band-copy .btn-o { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.photo-band-copy .btn-o:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.photo-band-card {
  background: rgba(9, 34, 56, .58); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg); padding: 16px;
  backdrop-filter: blur(6px);
}
.photo-band-card .contact-list li { border-bottom-color: rgba(255, 255, 255, .16); }
.photo-band-card .contact-list .k { color: rgba(255, 255, 255, .58); }
.photo-band-card .contact-list .v { color: #fff; }
.photo-band-card .contact-grid { grid-template-columns: 1fr; }
.photo-band-card .qr { background: #fff; border-color: rgba(255, 255, 255, .28); margin: 0 auto; }
/* 照片带二维码卡：与微信联系卡同款深色毛玻璃，内含小红书/视频号两枚码并排 */
/* 三码一框（微信/小红书/视频号）：仿参考图三栏卡片，同款深色毛玻璃外框 */
.qr3-card { display: flex; gap: 20px; justify-content: center; align-items: stretch; flex-wrap: nowrap; }
.qr3-card .fb-item { margin: 0; display: grid; gap: 5px; justify-items: center; text-align: center; align-content: start; }
.qr3-card .fb-item b { color: #fff; font-size: var(--fs-sm); }
.qr3-card .fb-item span { color: rgba(255, 255, 255, .62); font-size: var(--fs-xs); }
.qr3-card .qr { width: 72px; height: 72px; padding: 6px; margin: 0; }
.qr3-card .qr img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 紧贴页脚：两段同色，不留白缝 */
.page-about .ft { margin-top: 0; }

/* ============================================================
   平板及以上
   ============================================================ */
@media (min-width: 640px) {
  :root { --pad: 24px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .sec { padding: 56px 0; }
  /* .hero 不在此覆盖：用基础规则的 118px/48px（页头与留学服务带之间居中） */
  .hero h1 { font-size: 34px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .facts4 { grid-template-columns: repeat(4, 1fr); }
  .kv { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cta { padding: 36px 32px; flex-direction: row; align-items: center; justify-content: space-between; }
  .contact-grid { grid-template-columns: 1fr 220px; }
  .ft-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
  .photo-band { padding: 124px 0 64px; }
  .photo-band-in { grid-template-columns: 1fr 322px; gap: 32px; }  /* 左文案 + 右三码框 */
  .qr3-card { grid-column: 1 / -1; justify-content: space-around; padding: 32px 40px; }
  .qr3-card .qr { width: 96px; height: 96px; }
  .photo-band-card .contact-grid { grid-template-columns: 1fr; }
}

@media (min-width: 860px) {
  .hd-btn { display: none; }
  .hd-nav {
    display: flex; align-items: center; gap: 4px;
    position: static; padding: 0; border: 0; box-shadow: none; background: transparent;
  }
  .hd-nav ul { display: flex; align-items: center; gap: 2px; }
  .hd-nav li { border: 0; }
  .hd-nav a.nav-l { padding: 8px 13px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
  .hd-nav a.nav-l:hover { background: rgba(255, 255, 255, .1); }
  .hd-nav a.nav-l[aria-current="page"] {
    color: var(--accent); background: rgba(255, 255, 255, .12);
    position: relative;                       /* VIDYA 式橙色下划线 */
  }
  .hd-nav a.nav-l[aria-current="page"]::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
    height: 2px; border-radius: 2px; background: var(--accent);
  }
  /* 当前页若带橙色标签框（留学服务/院校库/录取要求/关于谷哥），
     保持橙色实底，不套用上面的半透明+下划线样式（此处须在断点内再压一次） */
  .hd-nav a.nav-l.nav-tag[aria-current="page"] {
    color: #fff; background: var(--accent);
  }
  .hd-nav a.nav-l.nav-tag[aria-current="page"]:hover { background: #d97a10; }
  .hd-nav a.nav-l.nav-tag[aria-current="page"]::after { display: none; }
  .hd-nav .nav-cta { margin: 0 0 0 8px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .au-band { padding: 48px 0; }
  .au-in { grid-template-columns: 400px 1fr; gap: 40px; }
  .au-panel { grid-template-columns: 250px 1fr; gap: 30px; padding: 22px 26px; }
  /* 地图面板要宽得多：州名 / 城市名是压在图上读的，
     沿用 250px 的话字号会小到 7px，等于白画。 */
  .au-panel.au-panel-map { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 34px; padding: 24px 28px; }
  .bio { grid-template-columns: 300px 1fr; gap: 34px; }
  .photo-band { padding: 168px 0 76px; }
  .photo-band h2 { font-size: 30px; }
  .photo-band-in { grid-template-columns: 1fr 620px; gap: 32px; }
  .qr3-card { grid-column: auto; padding: 40px 44px; gap: 44px; }  /* 大屏：按标注放大到 ~620px 宽 */
  .qr3-card .qr { width: 120px; height: 120px; padding: 8px; }
  .qr3-card .fb-item b { font-size: var(--fs-md); }
  .au-strip-in { gap: 18px; }
}

@media (min-width: 1040px) {
  .hero h1 { font-size: 38px; letter-spacing: .5px; }
  .bio { grid-template-columns: 340px 1fr; gap: 44px; }
}

/* 窄屏收掉多余图标，给文案留位置 */
@media (max-width: 639px) {
  .au-strip-art svg:nth-child(2) { display: none; }
  .au-strip-art { gap: 8px; }
  /* 地图字号定的是「地图单位」，会跟着地图一起缩。390px 视口下地图只有 316px 宽，
     4 单位的州名只剩 11px、3 单位的城市名只剩 8px —— 手机上读不动。
     所以窄屏把字号相对放大一档（放大幅度已用 _diag_aumap.py 在 390px 实测过无交叠）。 */
  .au-panel.au-panel-map { padding: 14px; }
  .au-lb { font-size: 5.0px; }
  .au-lb-sm { font-size: 4.0px; }
  .au-city text { font-size: 3.5px; }
}

/* ============================================================
   打印 / 无障碍
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .hd, .ft, .cta-actions, .filter, .hd-btn, .caro-top, .caro-hint { display: none !important; }
  /* 打印时把横向轮播摊平，否则只能印出当前视口里的 3 张 */
  .caro-vp { overflow: visible !important; }
  .caro-track { display: block; }
  .cc { page-break-inside: avoid; margin-bottom: 10px; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .hero, .cta { background: #fff !important; color: #000 !important; }
  .hero h1, .hero .lead, .cta h2, .cta p { color: #000 !important; }
}