/* ==========================================================================
   常青 / EVERGREEN —— 苏州一丛花园艺 · 全站绿色设计系统 v2
   --------------------------------------------------------------------------
   从零重做，替代上一版「植・刊」皮肤层。
   方向：现代园艺服务品牌。深松绿 + 鲜活叶绿 + 暖白，大留白、真实实拍、
        柔和圆角、清晰层级。不用金色、不用朱砂、不用宋体刊头、不用渐变彩字。
   架构：全站唯一公共层，只提供「设计令牌 + 顶部 / 底部组件」。
        inner.css 已删除；各页面结构与样式全部由模板自身 CSS 负责。
   字体：全部使用系统字体栈，不依赖任何外链字体（避免国内加载失败导致变形）。
   ========================================================================== */

:root {
  --g-deep:    #0d2f22;
  --g-ink:     #123b2b;
  --g-green:   #2f7d4f;
  --g-green-2: #3f9660;
  --g-leaf:    #62ad7b;
  --g-mint:    #e9f4ec;
  --g-mint-2:  #d8ebdd;
  --g-cream:   #fbfcf8;
  --g-white:   #ffffff;
  --g-text:    #2b3a31;
  --g-muted:   #6b7c70;
  --g-line:    #dde8df;
  --g-sand:    #f4f1e6;
  --g-warm:    #e4a94b;

  --g-wrap:    1280px;
  --g-r:       14px;
  --g-r-lg:    24px;
  --g-shadow:  0 18px 50px -28px rgba(13, 47, 34, .28);
  --g-ease:    cubic-bezier(.22, .68, 0, 1);
  --g-font:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;

}

/* ===== 1. 最小基础（仅供顶底组件正常运行） ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--g-cream);
  color: var(--g-text);
  font-family: var(--g-font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--g-ink); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--g-leaf); outline-offset: 3px; }
::selection { background: var(--g-green-2); color: #fff; }
#page-wrapper { overflow: hidden; }

/* 底部 CTA / 页脚的内容容器：内页不再加载 home.css，必须在此定义，
   否则页脚会贴左铺满整屏。inner.css 已删除，此规则不可再移到页面 CSS。 */
.g-wrap { width: min(var(--g-wrap), calc(100% - 64px)); margin-inline: auto; }

.g-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--g-green);
}
.g-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--g-green-2); border-radius: 2px; }

.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .28s var(--g-ease), background .28s, box-shadow .28s, color .28s;
}
.g-btn:hover { transform: translateY(-2px); }
.g-btn svg { width: 18px; height: 18px; }
.g-btn-primary { background: var(--g-green); color: #fff; box-shadow: 0 12px 26px -14px rgba(47,125,79,.85); }
.g-btn-primary:hover { background: var(--g-ink); }
.g-btn-ghost { background: transparent; color: var(--g-ink); border-color: #c9dccd; }
.g-btn-ghost:hover { background: var(--g-mint); border-color: var(--g-mint-2); }
.g-btn-white { background: #fff; color: var(--g-ink); }
.g-btn-white:hover { background: var(--g-mint); }
.g-btn-lg { min-height: 58px; padding: 0 32px; font-size: 16px; }

/* ===== 2. 顶部 ===== */
.g-topbar { background: var(--g-deep); color: #fff; font-size: 12.5px; }
.g-topbar-in {
  width: min(var(--g-wrap), calc(100% - 64px)); margin-inline: auto;
  min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.g-topbar-l { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .04em; }
.g-topbar-l i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-leaf); box-shadow: 0 0 0 4px rgba(98,173,123,.18); }
.g-topbar-r { display: flex; align-items: center; gap: 22px; }
.g-topbar-r a { color: #fff; font-weight: 700; letter-spacing: .04em; }
.g-topbar-r a:hover { color: var(--g-leaf); }

.g-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(18,59,43,.07);
  transition: box-shadow .3s;
}
.g-header.is-stuck { box-shadow: 0 8px 30px -18px rgba(13,47,34,.4); }
.g-head-in {
  width: min(var(--g-wrap), calc(100% - 64px)); margin-inline: auto;
  min-height: 82px; display: flex; align-items: center; gap: 24px;
}
.g-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.g-brand-mark {
  width: 44px; height: 44px; border-radius: 13px 13px 13px 4px;
  background: var(--g-green); display: grid; place-items: center; color: #fff;
}
.g-brand-mark svg { width: 26px; height: 26px; }
.g-brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.g-brand-txt strong { font-size: 20px; font-weight: 800; color: var(--g-ink); letter-spacing: -.02em; }
.g-brand-txt em { font-size: 10px; font-style: normal; letter-spacing: .14em; color: var(--g-muted); margin-top: 3px; }

.g-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: nowrap; }
.g-nav > a, .g-nav-item > a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--g-text);
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.g-nav > a:hover, .g-nav-item > a:hover, .g-nav > a.on, .g-nav-item > a.on { color: var(--g-green); background: var(--g-mint); }
.g-nav-caret { width: 14px; height: 14px; }
.g-nav-item { position: relative; }
.g-sub {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 186px;
  background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-r);
  box-shadow: var(--g-shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.g-nav-item:hover .g-sub, .g-nav-item:focus-within .g-sub { opacity: 1; visibility: visible; transform: none; }
.g-sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--g-text); }
.g-sub a:hover, .g-sub a.on { background: var(--g-mint); color: var(--g-green); }

.g-head-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.g-head-tel { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.g-head-tel b { font-size: 17px; color: var(--g-ink); letter-spacing: -.01em; }
.g-head-tel i { font-size: 11px; font-style: normal; color: var(--g-muted); }
.g-head-cta .g-btn { min-height: 46px; padding: 0 21px; font-size: 14px; }

.g-burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--g-line);
  border-radius: 12px; background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.g-burger i { display: block; width: 20px; height: 2px; background: var(--g-ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.g-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.g-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.g-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.g-mnav { display: none; }

/* ===== 3. 底部 ===== */
.g-cta { background: var(--g-deep); color: #fff; padding: clamp(64px, 7vw, 100px) 0; position: relative; overflow: hidden; }
.g-cta::after {
  content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.018);
  pointer-events: none;
}
.g-cta-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.g-cta h2 { color: #fff; font-size: clamp(32px, 4vw, 54px); margin: 16px 0 18px; }
.g-cta h2 em { font-style: normal; color: var(--g-leaf); }
.g-cta p { color: rgba(255,255,255,.72); font-size: 16px; max-width: 52ch; }
.g-cta .g-eyebrow { color: var(--g-leaf); }
.g-cta .g-eyebrow::before { background: var(--g-leaf); }
.g-cta-side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.g-cta-tel { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.1; }
.g-cta-tel small { display: block; font-size: 13px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.g-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.g-footer { background: #f3f7f1; color: var(--g-text); padding-top: clamp(56px, 6vw, 84px); }
.g-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: clamp(30px, 4vw, 64px); padding-bottom: 56px; }
.g-foot-brand .g-brand { margin-bottom: 20px; }
.g-foot-lead { font-size: 14px; line-height: 1.85; color: var(--g-muted); max-width: 38ch; }
.g-foot-col h4 { font-size: 14px; color: var(--g-ink); margin-bottom: 20px; letter-spacing: .02em; }
.g-foot-col a, .g-foot-col p { display: block; font-size: 14px; color: var(--g-muted); margin-bottom: 12px; }
.g-foot-col a:hover { color: var(--g-green); }
.g-foot-tel { font-size: 22px !important; font-weight: 800; color: var(--g-ink) !important; letter-spacing: -.02em; }
.g-foot-areas {
  border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line);
  padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px;
}
.g-foot-areas > b { font-size: 13px; color: var(--g-ink); margin-right: 8px; }
.g-foot-areas a { font-size: 13px; color: var(--g-muted); padding: 5px 12px; border: 1px solid var(--g-line); border-radius: 999px; background: #fff; }
.g-foot-areas a:hover { color: #fff; background: var(--g-green); border-color: var(--g-green); }
.g-foot-bottom {
  padding: 24px 0 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--g-muted);
}
.g-foot-bottom a:hover { color: var(--g-green); }

/* ===== 4. 全站公共浮层：浮动客服 / 移动底栏 ===== */
.cs-float { position: fixed; right: 20px; bottom: 96px; z-index: 800; display: flex; flex-direction: column; gap: 8px; }
.cs-btn {
  position: relative; width: 52px; height: 52px; border: 0; border-radius: 15px;
  background: var(--g-green); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(13,47,34,.6);
}
.cs-btn:hover { background: var(--g-ink); }
.cs-btn svg { width: 23px; height: 23px; }
.cs-btn-top { background: #fff; color: var(--g-ink); border: 1px solid var(--g-line); }
.cs-label { display: none; }
.cs-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px);
  background: #fff; color: var(--g-ink); border: 1px solid var(--g-line); border-radius: 12px;
  padding: 10px 14px; font-size: 13px; white-space: nowrap; box-shadow: var(--g-shadow);
  opacity: 0; visibility: hidden; transition: .2s; pointer-events: none;
}
.cs-btn:hover .cs-tip { opacity: 1; visibility: visible; transform: translateY(-50%); }
.cs-tip-wechat { padding: 10px; }
.cs-tip-wechat img { width: 130px; height: 130px; max-width: none; object-fit: contain; border-radius: 8px; background: #fff; }
.cs-tip-label { display: block; text-align: center; font-size: 12px; color: var(--g-muted); margin-top: 6px; }
.cs-divider { display: none; }
.cs-bar { display: none; }
.cs-wx-pop { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(13,47,34,.55); place-items: center; }
.cs-wx-pop.show { display: grid; }
.cs-wx-card { background: #fff; border-radius: 18px; padding: 24px; text-align: center; max-width: 280px; }
.cs-wx-card img { width: 200px; height: 200px; max-width: none; object-fit: contain; border-radius: 12px; background: #fff; margin: 0 auto 12px; }
.cs-wx-card p { font-size: 14px; color: var(--g-muted); margin-bottom: 14px; }
.cs-wx-card button { border: 0; background: var(--g-mint); color: var(--g-ink); border-radius: 999px; padding: 9px 22px; cursor: pointer; font-size: 14px; }

/* ===== 5. 响应式 ===== */
@media (max-width: 1500px) {
  /* 常见笔记本宽度下，先把右侧号码收进顶部条，保证主导航不被挤压换行 */
  .g-head-tel { display: none; }
}
@media (max-width: 1180px) {
  .g-head-in { gap: 18px; }
  .g-nav > a, .g-nav-item > a { padding: 10px 9px; font-size: 13.5px; }
}
@media (max-width: 980px) {
  .g-nav, .g-head-cta .g-btn { display: none; }
  .g-burger { display: flex; }
  .g-head-in { min-height: 70px; }
  .g-mnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--g-line);
    box-shadow: var(--g-shadow); padding: 12px 24px 22px;
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .g-mnav.is-open { display: block; }
  .g-mnav > a, .g-mnav summary, .g-mnav details > a {
    display: block; padding: 13px 4px; font-size: 15px; font-weight: 600;
    border-bottom: 1px solid var(--g-line); color: var(--g-ink); list-style: none;
  }
  .g-mnav summary::-webkit-details-marker { display: none; }
  .g-mnav details > a { padding-left: 18px; font-weight: 400; color: var(--g-muted); }
  .g-mnav-tel { color: var(--g-green) !important; font-weight: 800 !important; }
  .g-cta-in { grid-template-columns: 1fr; gap: 36px; }
  .g-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .g-topbar-in, .g-head-in, .g-wrap { width: calc(100% - 36px); }
  .g-topbar-r span:not(:last-child) { display: none; }
  .g-foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .g-foot-bottom { flex-direction: column; }
  .cs-float { right: 12px; bottom: 78px; }
  .cs-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 850; background: #fff;
    border-top: 1px solid var(--g-line); box-shadow: 0 -8px 24px -18px rgba(13,47,34,.5);
  }
  .cs-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; font-size: 11px; color: var(--g-muted); background: none; border: 0; cursor: pointer;
  }
  .cs-bar-item svg { width: 20px; height: 20px; }
  .cs-bar-call { color: var(--g-green); }
  body { padding-bottom: 58px; }
}


/* ===== 6. 动效降级 ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}