/* =========================================================
   鲸鱼姐姐空间营造 · 高定原型站 设计系统
   定位：高定别墅 / 大平层全案设计机构
   调性：白底 · 克莱因蓝(#002FA7) 主色 · 衬线标题 · 大留白
   ========================================================= */

:root{
  --paper:#ffffff;        /* 主背景 纯白 */
  --paper-2:#f4f6fb;      /* 次背景 极浅蓝灰 */
  --ink:#0e1320;          /* 主文字 近黑 */
  --ink-soft:#4a5160;     /* 次级文字 */
  --ink-faint:#8a909e;    /* 弱化文字 */
  --line:#e2e7f0;         /* 分隔线 */
  --stone:#e8ebf3;        /* 占位块底 */
  --stone-2:#d6dcec;      /* 占位块深 */
  --klein:#002FA7;        /* 克莱因蓝 主色 */
  --klein-deep:#001f6e;   /* 深克莱因蓝 */
  --klein-soft:#eef2fb;   /* 克莱因蓝极浅底 */
  --maxw:1240px;
  --gap:clamp(20px,4vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* 标题用衬线，营造高级感 */
h1,h2,h3,.serif{
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gap)}

/* ---------- 导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{
  font-family:"Noto Serif SC",serif;font-size:21px;font-weight:600;
  letter-spacing:.06em;display:flex;align-items:baseline;gap:.5em;
}
.brand span{font-size:12px;color:var(--klein);letter-spacing:.2em;font-weight:400}
.brand-logo{height:30px;width:auto;display:block}
.brand.has-logo span{display:none}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.nav-links a{font-size:15px;color:var(--ink-soft);position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--klein);
}
.nav-cta{
  border:1px solid var(--klein);color:var(--klein-deep)!important;
  padding:8px 18px!important;border-radius:2px;font-size:14px!important;
}
.nav-cta:hover{background:var(--klein);color:#fff!important}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden}
.hero .ph{position:absolute;inset:0;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,31,110,.18) 0%,rgba(0,15,46,.62) 100%)}
.hero-inner{position:relative;z-index:2;color:#f3efe7;padding:var(--gap);
  max-width:var(--maxw);margin:0 auto;width:100%;padding-bottom:clamp(40px,8vh,90px)}
.hero h1{color:#ffffff;font-size:clamp(32px,5.4vw,64px);line-height:1.15;font-weight:600;
  text-shadow:0 2px 24px rgba(0,0,0,.35);max-width:16em}
.hero .eyebrow{color:#cdd9f5;letter-spacing:.32em;font-size:13px;margin-bottom:22px;text-transform:uppercase}
.hero p{color:#e8edf8;max-width:34em;margin:20px 0 32px;font-size:clamp(15px,1.6vw,18px)}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;padding:14px 30px;border-radius:2px;font-size:15px;
  letter-spacing:.04em;transition:.25s;cursor:pointer;border:1px solid transparent;
}
.btn-solid{background:var(--klein);color:#fff}
.btn-solid:hover{background:var(--klein-deep)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-line{background:transparent;border:1px solid var(--klein);color:var(--klein-deep)}
.btn-line:hover{background:var(--klein);color:#fff}

/* ---------- 区块通用 ---------- */
section{padding:clamp(64px,9vw,128px) 0}
.eyebrow{letter-spacing:.3em;font-size:12px;color:var(--klein);text-transform:uppercase;margin-bottom:18px}
.section-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{font-size:clamp(26px,3.4vw,42px);line-height:1.25;margin-bottom:18px}
.section-head p{color:var(--ink-soft);font-size:17px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ---------- 占位块 ---------- */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,var(--stone) 0 18px,var(--stone-2) 18px 36px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ph::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(0,47,167,.28)}
.ph .ph-label{
  position:relative;z-index:2;font-size:13px;letter-spacing:.18em;color:#3a4a78;
  background:rgba(255,255,255,.85);padding:8px 16px;border-radius:2px;text-align:center;
}
/* 真实照片：丢进 images/ 即自动覆盖占位（加载失败则回退占位） */
.fill-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph.ph-tall{aspect-ratio:3/4}
.ph.ph-wide{aspect-ratio:16/10}
.ph.ph-banner{aspect-ratio:21/9}
.ph.ph-square{aspect-ratio:1/1}

/* ---------- 三栏差异化 ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.feature{padding:34px 30px;background:var(--paper-2);border:1px solid var(--line)}
.feature .num{font-family:"Noto Serif SC",serif;font-size:40px;color:var(--klein);opacity:.55;line-height:1}
.feature h3{font-size:20px;margin:14px 0 12px}
.feature p{color:var(--ink-soft);font-size:15px}

/* ---------- 案例网格 ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.chip{padding:8px 18px;border:1px solid var(--line);border-radius:30px;font-size:14px;
  color:var(--ink-soft);cursor:pointer;background:transparent;transition:.2s}
.chip:hover{border-color:var(--klein);color:var(--klein-deep)}
.chip.active{background:var(--klein);color:#fff;border-color:var(--klein)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.case-card{display:block;transition:transform .3s}
.case-card:hover{transform:translateY(-4px)}
.case-card .meta{margin-top:16px}
.case-card h3{font-size:19px;margin-bottom:6px}
.case-card .sub{color:var(--ink-faint);font-size:14px;letter-spacing:.02em}
.case-card .tag{display:inline-block;font-size:12px;color:var(--klein-deep);
  border:1px solid var(--line);padding:2px 10px;border-radius:20px;margin-top:10px}

/* ---------- 流程时间轴 ---------- */
.timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:0;counter-reset:step}
.step{position:relative;padding:0 14px;text-align:center}
.step .dot{width:42px;height:42px;border-radius:50%;background:var(--paper);border:1px solid var(--klein);
  color:var(--klein-deep);font-family:"Noto Serif SC",serif;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:17px;position:relative;z-index:2}
.step::before{content:"";position:absolute;top:21px;left:-50%;width:100%;height:1px;background:var(--line);z-index:1}
.step:first-child::before{display:none}
.step h4{font-size:15px;margin-bottom:8px;font-family:"Noto Serif SC",serif}
.step p{font-size:13px;color:var(--ink-faint)}

/* ---------- 智慧四宫格 ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.smart-card{background:var(--paper-2);border:1px solid var(--line);padding:30px 26px}
.smart-card .ic{font-size:13px;letter-spacing:.2em;color:var(--klein);margin-bottom:12px}
.smart-card h3{font-size:18px;margin-bottom:10px}
.smart-card p{font-size:14px;color:var(--ink-soft)}

/* ---------- 数据条 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0}
.stat .n{font-family:"Noto Serif SC",serif;font-size:clamp(30px,4vw,48px);color:var(--klein-deep);line-height:1}
.stat .l{color:var(--ink-soft);font-size:14px;margin-top:10px;letter-spacing:.04em}

/* ---------- 关于/团队 ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.member .ph{aspect-ratio:3/4;margin-bottom:14px}
.member h3{font-size:17px}
.member .role{font-size:13px;color:var(--klein-deep);margin:4px 0 8px}
.member p{font-size:13px;color:var(--ink-faint)}

/* ---------- 预约 CTA 带 ---------- */
.cta-band{background:var(--klein);color:#fff;text-align:center;padding:clamp(56px,7vw,96px) var(--gap)}
.cta-band h2{color:#ffffff;font-size:clamp(24px,3.2vw,38px);margin-bottom:18px}
.cta-band p{color:#dbe3f7;max-width:40em;margin:0 auto 30px}
.cta-band .btn-solid{background:#fff;color:var(--klein-deep)}
.cta-band .btn-solid:hover{background:#eef2fb}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.7)}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:680px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--klein)}
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--ink);color:#cfd6e6;padding:56px 0 36px}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:34px}
.footer-brand{font-family:"Noto Serif SC",serif;font-size:20px;color:#fff}
.footer-brand span{display:block;font-size:12px;color:#7ea0e8;letter-spacing:.2em;margin-top:6px;font-family:"Noto Sans SC",sans-serif}
.footer-col h4{font-size:14px;margin-bottom:12px;color:#fff}
.footer-col a,.footer-col p{display:block;font-size:14px;color:#aeb7cc;margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:13px;color:#8b94ab;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- 案例详情 ---------- */
.detail-hero .ph{aspect-ratio:21/9}
.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  border-bottom:1px solid var(--line);padding:36px 0;margin-top:8px}
.detail-meta .k{font-size:12px;color:var(--ink-faint);letter-spacing:.1em;margin-bottom:6px}
.detail-meta .v{font-family:"Noto Serif SC",serif;font-size:18px}
.prose{max-width:760px}
.prose h3{font-size:22px;margin:44px 0 16px}
.prose p{color:var(--ink-soft);margin-bottom:18px;font-size:17px}
.detail-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:24px}
.next-case{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);
  padding-top:30px;margin-top:60px}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  .grid-3,.case-grid,.grid-4,.team{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .step::before{display:none}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px}
  .contact-wrap,.form-grid{grid-template-columns:1fr}
  .detail-meta{grid-template-columns:repeat(2,1fr)}
  .detail-gallery{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav-links{gap:12px;font-size:13px}
  .nav-links a:not(.nav-cta){display:none}
  .grid-3,.case-grid,.grid-4,.team{grid-template-columns:1fr}
  .hero{min-height:78vh}
}

/* ---------- 荣誉与媒体 ---------- */
.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.award{text-align:center;padding:34px 20px;border:1px solid var(--line);background:var(--paper)}
.award .yr{font-family:"Noto Serif SC",serif;font-size:13px;color:var(--klein);letter-spacing:.12em}
.award .nm{font-size:16px;margin-top:12px;line-height:1.45}
.award .sub{font-size:13px;color:var(--ink-faint);margin-top:8px}
.brand-card{text-align:center;padding:34px 20px;border:1px solid var(--line);background:var(--paper);margin-top:clamp(16px,2vw,28px)}
.brand-card .brand-label{font-family:"Noto Serif SC",serif;font-size:13px;color:var(--klein);letter-spacing:.12em}
.brand-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,2.5vw,44px);margin-top:20px}
.brand-logos img{height:36px;width:auto;max-width:180px;object-fit:contain;opacity:.65;transition:opacity .2s}
.brand-logos img:hover{opacity:1}
.press-wall{display:flex;flex-wrap:wrap;gap:24px 44px;justify-content:center;align-items:center;margin-top:50px}
.press-wall span{font-family:"Noto Serif SC",serif;font-size:19px;color:var(--ink-faint);letter-spacing:.04em}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:#eaf0fb;font-size:12px;letter-spacing:.3em;text-align:center;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.6}50%{transform:translateX(-50%) translateY(8px);opacity:1}}
@media(max-width:980px){.awards{grid-template-columns:repeat(2,1fr)}}