/* ===========================================================
   高笛 GAODI · 官网样式
   伴您美一天 | 职场通勤女装
   =========================================================== */

:root{
  --paper:#FAF7F1;
  --paper-2:#F2EBE0;
  --white:#FFFFFF;
  --ink:#201C17;
  --ink-2:#5C5348;
  --ink-3:#948A7C;
  --line:#E6DCCC;
  --line-2:#F0E9DD;
  --brand:#7A5C42;
  --brand-d:#4B3628;
  --brand-l:#A98C6D;
  --gold:#B08D57;
  --max:1240px;
  --pad:clamp(20px,5vw,64px);
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.4;}
p{margin:0 0 1em;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

/* ---------- 占位图 ---------- */
.ph{
  position:relative; width:100%; height:100%;
  background:linear-gradient(135deg,#EFE8DC 0%,#DFD3C2 52%,#D3C4B0 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:#8B7A64; text-align:center;
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.30) 0 2px,transparent 2px 12px);
  opacity:.55;
}
.ph .ph-in{position:relative; z-index:1; padding:18px 22px;}
.ph .ph-ico{
  width:34px; height:34px; margin:0 auto 10px; opacity:.7;
  border:1.6px solid currentColor; border-radius:6px; position:relative;
}
.ph .ph-ico::before{
  content:""; position:absolute; left:5px; top:5px; right:5px; bottom:5px;
  border:1.2px solid currentColor; border-radius:2px; opacity:.55;
}
.ph b{display:block; font-size:14px; font-weight:600; letter-spacing:.5px;}
.ph small{display:block; font-size:12px; opacity:.82; margin-top:5px; letter-spacing:.3px;}
.ph.alt{background:linear-gradient(160deg,#E9E1D5 0%,#D8CBB8 60%,#C9B9A3 100%);}
.ph.alt2{background:linear-gradient(200deg,#F1ECE3 0%,#DED3C3 55%,#CDBEA8 100%);}
.ph.dark{background:linear-gradient(150deg,#5B4A3A 0%,#3E3125 100%); color:#B7A48C;}
.ph.portrait{aspect-ratio:3/4;}
.ph.wide{aspect-ratio:16/9;}

/* ---------- 顶部导航 ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:rgba(250,247,241,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:.3s;
}
.topbar.scrolled{background:rgba(250,247,241,.97); border-bottom-color:var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
.logo{display:flex; align-items:baseline; gap:12px; flex:0 0 auto;}
.logo .mark{
  font-family:var(--serif); font-size:30px; font-weight:700;
  letter-spacing:5px; color:var(--brand-d); line-height:1;
}
.logo .mark-en{
  font-size:11px; letter-spacing:3px; color:var(--ink-3);
  border-left:1px solid var(--line); padding-left:12px;
}
.logo-img{height:46px; width:auto; display:block;}
.menu{display:flex; gap:38px; margin-left:auto;}
.menu a{
  font-size:15px; color:var(--ink-2); letter-spacing:1.5px; position:relative;
  padding:6px 0; transition:.2s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--brand); transition:right .28s;
}
.menu a:hover,.menu a.on{color:var(--brand-d);}
.menu a:hover::after,.menu a.on::after{right:0;}
.nav-tel{font-size:14px; color:var(--ink-2); letter-spacing:.6px; flex:0 0 auto;}
.nav-tel b{color:var(--brand-d); font-weight:600; letter-spacing:1px;}
.burger{display:none; width:34px; height:26px; position:relative; cursor:pointer;}
.burger i{position:absolute; left:0; right:0; height:1.6px; background:var(--ink); transition:.25s;}
.burger i:nth-child(1){top:4px;} .burger i:nth-child(2){top:12px;} .burger i:nth-child(3){top:20px;}

/* ---------- Hero 轮播 ---------- */
.hero{position:relative; height:88vh; min-height:600px; overflow:hidden; background:var(--paper-2);}
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease;
  display:grid; grid-template-columns:1fr 1fr;
}
.slide.on{opacity:1;}
.slide .txt{
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(24px,7vw,110px); background:var(--paper);
}
.slide .txt .kicker{
  font-size:12.5px; letter-spacing:5px; color:var(--brand-l);
  margin-bottom:22px; text-transform:uppercase;
}
.slide .txt h1,.slide .txt h2{
  font-weight:600; margin:0;
  font-family:var(--serif); font-size:clamp(30px,3.6vw,50px);
  color:var(--brand-d); letter-spacing:3px; line-height:1.5; margin-bottom:20px;
}
.slide .txt p{font-size:16px; color:var(--ink-2); letter-spacing:1.4px; margin:0;}
.slide .txt .rule{width:56px; height:2px; background:var(--gold); margin:28px 0 0;}
.slide .img{position:relative;}
.dots{
  position:absolute; left:clamp(24px,7vw,110px); bottom:44px; z-index:5;
  display:flex; gap:12px;
}
.dots b{
  width:34px; height:2.5px; background:rgba(75,54,40,.22); cursor:pointer;
  transition:.3s; display:block;
}
.dots b.on{background:var(--brand-d); width:52px;}

/* ---------- 通用区块 ---------- */
section{position:relative;}
.sec{padding:clamp(70px,9vw,120px) 0;}
.sec-head{text-align:center; margin-bottom:clamp(40px,5vw,66px);}
.sec-head .en{
  font-size:11.5px; letter-spacing:6px; color:var(--brand-l); margin-bottom:16px;
}
.sec-head h2{
  font-family:var(--serif); font-size:clamp(24px,2.7vw,36px);
  color:var(--brand-d); letter-spacing:3px;
}
.sec-head .sub{
  margin-top:18px; color:var(--ink-2); font-size:15.5px; letter-spacing:.8px;
  max-width:640px; margin-left:auto; margin-right:auto;
}
.sec-head .ln{width:44px; height:2px; background:var(--gold); margin:26px auto 0;}

/* ---------- Slogan 屏 ---------- */
.slogan-band{
  background:linear-gradient(150deg,#4B3628 0%,#33261B 100%);
  color:#EFE6D8; text-align:center; padding:clamp(76px,10vw,130px) 0;
}
.slogan-band .sc{
  font-family:var(--serif); font-size:clamp(34px,4.6vw,62px);
  letter-spacing:14px; text-indent:14px; color:#F6EFE4; margin-bottom:26px;
}
.slogan-band .sl{
  font-size:clamp(14px,1.5vw,17px); letter-spacing:3px; color:#C4B29A; line-height:2.1;
}
.slogan-band .en{
  margin-top:34px; font-size:11.5px; letter-spacing:6px; color:#8E7A62;
}

/* ---------- 关于高笛 ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(30px,5vw,80px); align-items:center;}
.about-grid .pic{aspect-ratio:4/5; overflow:hidden;}
.about-grid h2{
  font-family:var(--serif); font-size:clamp(23px,2.5vw,32px); color:var(--brand-d);
  letter-spacing:2.5px; margin-bottom:8px;
}
.about-grid .en{font-size:11.5px; letter-spacing:5px; color:var(--brand-l); margin-bottom:26px;}
.about-grid p{color:var(--ink-2); line-height:2.15; letter-spacing:.5px;}
.about-grid .hl{color:var(--brand); font-weight:600;}
.btn-more{
  display:inline-flex; align-items:center; gap:10px; margin-top:12px;
  font-size:14.5px; letter-spacing:2px; color:var(--brand-d);
  border-bottom:1.5px solid var(--brand-l); padding-bottom:6px; transition:.25s;
}
.btn-more:hover{gap:18px; color:var(--brand);}

/* ---------- 形象大片墙 ---------- */
.gallery{background:var(--white);}
.tabs{
  display:flex; justify-content:center; gap:clamp(18px,3.5vw,50px);
  margin-bottom:44px; flex-wrap:wrap;
}
.tabs button{
  font-family:inherit; font-size:15px; letter-spacing:2px; color:var(--ink-3);
  background:none; border:none; border-bottom:2px solid transparent;
  padding:8px 2px; cursor:pointer; transition:.25s;
}
.tabs button:hover{color:var(--brand);}
.tabs button.on{color:var(--brand-d); border-bottom-color:var(--gold); font-weight:600;}
.tabs .desc{
  width:100%; text-align:center; font-size:13.5px; color:var(--ink-3);
  letter-spacing:.8px; margin-top:14px;
}
.gal-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px; gap:14px;
}
.gal-grid .g{overflow:hidden; position:relative;}
/* 第 1 张为大图（2×2），其余 8 张各 1 格 —— 共 12 格，正好填满 4×3 */
.gal-grid .g:first-child{grid-column:span 2; grid-row:span 2;}

/* ---------- 实力数字 ---------- */
.nums{background:var(--paper-2);}
.nums .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);}
.nums .cell{
  background:var(--paper-2); padding:clamp(34px,4.5vw,58px) 18px; text-align:center;
}
.nums .n{
  font-family:var(--serif); font-size:clamp(38px,4.6vw,60px); color:var(--brand-d);
  line-height:1; letter-spacing:1px;
}
.nums .n em{font-style:normal; font-size:.42em; margin-left:5px; color:var(--brand-l);}
.nums .t{margin-top:16px; font-size:14.5px; letter-spacing:2px; color:var(--ink-2);}
.nums .d{margin-top:7px; font-size:12.5px; color:var(--ink-3); letter-spacing:.6px;}

/* ---------- 门店 ---------- */
.store-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.store-card{
  background:var(--white); border:1px solid var(--line); transition:.3s;
  display:flex; flex-direction:column;
}
.store-card:hover{border-color:var(--brand-l); transform:translateY(-4px); box-shadow:0 12px 30px rgba(75,54,40,.10);}
.store-card .pic{aspect-ratio:4/3; overflow:hidden;}
.store-card .info{padding:20px 20px 24px;}
.store-card .city{
  font-size:11.5px; letter-spacing:3px; color:var(--gold); margin-bottom:9px;
}
.store-card h3{font-family:var(--serif); font-size:17px; color:var(--brand-d); letter-spacing:1px; margin-bottom:10px;}
.store-card .meta{font-size:12.5px; color:var(--ink-3); line-height:1.9; letter-spacing:.3px;}
.store-card .meta .todo{color:#B07A5A;}

/* ---------- 联系条 ---------- */
.contact-band{
  background:linear-gradient(150deg,#F5F0E7 0%,#EDE4D6 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(52px,7vw,86px) 0;
}
.contact-band .row{
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
}
.contact-band h3{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,28px); color:var(--brand-d);
  letter-spacing:2px; margin-bottom:10px;
}
.contact-band p{color:var(--ink-2); font-size:14.5px; margin:0; letter-spacing:.5px;}
.btn-solid{
  display:inline-block; background:var(--brand-d); color:#F6EFE4;
  padding:16px 40px; font-size:15px; letter-spacing:3px; transition:.3s; white-space:nowrap;
}
.btn-solid:hover{background:var(--brand); letter-spacing:4px;}
.btn-line{
  display:inline-block; background:transparent; color:var(--brand-d);
  border:1px solid var(--brand-l); padding:15px 40px; font-size:15px;
  letter-spacing:3px; transition:.3s; white-space:nowrap;
}
.btn-line:hover{border-color:var(--brand); color:var(--brand); letter-spacing:4px;}

/* ---------- 页脚 ---------- */
footer{background:#2A231C; color:#9C9083; padding:clamp(56px,7vw,84px) 0 34px; font-size:13.5px;}
.f-grid{display:grid; grid-template-columns:1.3fr 1.4fr 1fr; gap:clamp(28px,5vw,70px); margin-bottom:52px;}
.f-logo{font-family:var(--serif); font-size:26px; color:#F0E7DA; letter-spacing:6px; margin-bottom:10px;}
.f-slogan{font-family:var(--serif); font-size:16px; color:var(--brand-l); letter-spacing:5px; margin-bottom:18px;}
.f-tag{font-size:12.5px; letter-spacing:2.5px; color:#7E7365;}
.f-h{font-size:12px; letter-spacing:3px; color:#C7B9A5; margin-bottom:18px;}
.f-grid p{line-height:2.1; letter-spacing:.4px; margin:0 0 6px;}
.f-links a{display:block; line-height:2.2; transition:.2s;}
.f-links a:hover{color:#E2D6C5;}
.f-qr{display:grid; grid-template-columns:repeat(2, 80px); gap:10px 12px; margin-bottom:12px;}
.f-qr .q{
  width:80px; height:auto; background:#fff; border:none;
  display:block; overflow:hidden; line-height:0;
}
.f-qr .q figcaption{
  font-size:10px; color:#8A7E70; text-align:center;
  padding:4px 0 5px; letter-spacing:.5px; line-height:1.2;
}
.f-grid p.f-qr-note{font-size:11.5px; color:#7E7365; letter-spacing:.6px; line-height:1.8; margin:0 0 18px;}
.f-bottom{
  border-top:1px solid #3C342B; padding-top:24px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#7A6F62;
}
.f-bottom a:hover{color:#C7B9A5;}

/* ---------- 移动端 ---------- */
@media (max-width:1024px){
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .gal-grid .g:first-child{grid-column:span 2; grid-row:span 1;}
  .store-grid{grid-template-columns:repeat(2,1fr);}
  .nums .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .menu,.nav-tel{display:none;}
  .burger{display:block;}
  .menu.open{
    display:flex; flex-direction:column; gap:0; position:absolute; top:76px; left:0; right:0;
    background:rgba(250,247,241,.99); border-bottom:1px solid var(--line);
    padding:10px var(--pad) 22px; box-shadow:0 14px 26px rgba(75,54,40,.10); margin:0;
  }
  .menu.open a{padding:15px 0; border-bottom:1px solid var(--line-2); font-size:16px;}
  .menu.open a::after{display:none;}
  .slide{grid-template-columns:1fr;}
  .slide .img{display:none;}
  .slide .txt{padding:0 30px;}
  .hero{height:auto; min-height:520px;}
  .hero .slide{position:relative; display:none;}
  .hero .slide.on{display:grid;}
  .dots{position:static; justify-content:center; padding:24px 0 34px;}
  .about-grid{grid-template-columns:1fr;}
  .about-grid .pic{max-width:400px; margin:0 auto;}
  .store-grid{grid-template-columns:1fr;}
  .f-grid{grid-template-columns:1fr; gap:34px;}
  .slogan-band .sc{letter-spacing:8px; text-indent:8px;}
}

/* ---------- 真实图片 ---------- */
.hero .img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.about-grid .pic img{width:100%; height:100%; object-fit:cover;}
.store-card .pic img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.store-card:hover .pic img{transform:scale(1.04);}
.gal-grid .g{margin:0;}
.gal-grid .g img{width:100%; height:100%; object-fit:cover; display:block;}
.gal-grid .g .cap{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:30px 14px 10px;
  font-size:12px; letter-spacing:1px; color:#F6EFE4; text-align:left;
  background:linear-gradient(transparent, rgba(40,30,20,.62)); opacity:0; transition:.3s;
}
.gal-grid .g:hover .cap{opacity:1;}