/* =========================================================
   海葬流程栏目页
   全站通用头部 / 底部 / 字体 / 按钮来自 common.css
   ========================================================= */

.process-crumb{
  background:#fff;border-bottom:1px solid var(--line)
}
.process-crumb .wrap{
  min-height:46px;display:flex;align-items:center;gap:7px;
  font-size:13px;color:#71838d
}
.process-crumb a{color:var(--brand)}

.process-hero{
  min-height:570px;color:#fff;display:flex;align-items:center;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,36,49,.94) 0%,rgba(6,54,70,.76) 48%,rgba(7,61,78,.32) 78%),
    url("../images/sea-local-01.jpg") center/cover no-repeat;
}
.process-hero-grid{
  display:grid;grid-template-columns:1.12fr .72fr;gap:44px;
  align-items:center;padding:76px 0
}
.process-hero h1{
  font-size:clamp(40px,6vw,67px);line-height:1.08;letter-spacing:-.04em;
  margin:0 0 18px
}
.process-hero h1 em{font-style:normal;color:#f1d6a7}
.process-hero p{
  color:rgba(255,255,255,.82);font-size:17px;max-width:760px
}
.process-hero-tags{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 29px}
.process-hero-tags span{
  padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);font-size:13px
}
.process-hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.fast-card{
  border-radius:26px;padding:26px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(14px);
  box-shadow:0 22px 58px rgba(0,0,0,.20)
}
.fast-card small{color:rgba(255,255,255,.67)}
.fast-card h3{font-size:24px;margin:7px 0 17px}
.fast-flow{display:grid;gap:10px}
.fast-step{
  display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;
  padding:12px;border-radius:14px;background:rgba(255,255,255,.09)
}
.fast-step i{
  width:38px;height:38px;border-radius:50%;background:#fff;color:var(--brand);
  display:grid;place-items:center;font-style:normal;font-weight:900
}
.fast-step b{display:block;font-size:14px}
.fast-step span{display:block;color:rgba(255,255,255,.68);font-size:12px}

.process-title-row{
  display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px
}
.process-title-row .lead{margin:0}
.process-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;border-radius:999px;
  background:#fff;border:1px solid rgba(14,89,111,.22);
  color:var(--brand);font-size:14px;font-weight:800;white-space:nowrap
}
.process-link:hover{background:var(--brand);color:#fff}

.simple-flow{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px
}
.simple-flow:before{
  content:"";position:absolute;left:9%;right:9%;top:33px;height:1px;
  background:linear-gradient(90deg,rgba(14,89,111,.12),rgba(14,89,111,.52),rgba(14,89,111,.12))
}
.simple-step{
  position:relative;z-index:1;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:24px 20px;box-shadow:0 10px 30px rgba(8,47,62,.06)
}
.simple-step .num{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:18px;font-weight:900;
  border:9px solid #f8fbfb;margin-bottom:16px
}
.simple-step h3{font-size:19px;margin-bottom:7px}
.simple-step p{font-size:13px;color:var(--muted);margin:0}
.simple-note{
  margin-top:20px;padding:15px 18px;border-radius:14px;background:#edf6f6;
  color:#526a76;font-size:13px;border-left:3px solid var(--gold)
}

.day-section{
  background:
    linear-gradient(180deg,#eef6f6,#f7fbfb)
}
.day-grid{
  display:grid;grid-template-columns:.77fr 1.23fr;gap:28px;align-items:start
}
.day-intro{
  border-radius:26px;padding:32px;background:#0b4a60;color:#fff;
  position:sticky;top:112px
}
.day-intro .eyebrow{color:#edd5ad}
.day-intro p{color:rgba(255,255,255,.76)}
.day-list{display:grid;gap:14px}
.day-card{
  display:grid;grid-template-columns:88px 1fr;gap:19px;align-items:start;
  border-radius:20px;background:#fff;border:1px solid var(--line);
  padding:21px;box-shadow:0 8px 25px rgba(9,52,67,.05)
}
.day-time{
  color:var(--brand);font-weight:900;font-size:13px;padding:7px 10px;
  background:var(--sea);border-radius:999px;text-align:center
}
.day-card h3{font-size:18px;margin-bottom:5px}
.day-card p{font-size:13px;color:var(--muted);margin:0}

.compare-section{background:#fff}
.compare-box{
  border-radius:28px;padding:30px;background:#f5f9f9;border:1px solid var(--line);
  overflow:hidden
}
.compare-summary{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px
}
.compare-summary-card{
  border-radius:20px;padding:24px;background:#fff;border:1px solid var(--line)
}
.compare-summary-card.one{
  background:linear-gradient(145deg,#0c5268,#0b4155);color:#fff
}
.compare-summary-card.one .eyebrow{color:#edd7b2}
.compare-summary-card.one p{color:rgba(255,255,255,.76)}
.compare-summary-card h3{font-size:24px;margin:7px 0 8px}
.compare-summary-card p{font-size:13px;color:var(--muted);margin:0}

.compare-table{
  display:grid;grid-template-columns:180px 1fr 1fr;
  background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden
}
.compare-cell{
  padding:17px 18px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);font-size:14px
}
.compare-cell:nth-child(3n){border-right:0}
.compare-cell.label{background:#edf5f5;color:#5d727c;font-weight:800}
.compare-cell.head{
  background:#0d5369;color:#fff;font-weight:900;font-size:18px;text-align:center
}
.compare-cell.head.public{background:#718189}
.compare-cell.good{font-weight:800;color:#0b6076}
.compare-cell.caution{color:#6c7880}
.compare-tip{
  margin-top:16px;padding:15px 17px;border-radius:14px;background:#fff;
  border-left:3px solid var(--gold);font-size:13px;color:var(--muted)
}

.prepare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prepare-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:23px;box-shadow:0 9px 26px rgba(8,47,62,.05)
}
.prepare-icon{
  width:44px;height:44px;border-radius:14px;background:var(--sea);
  color:var(--brand);display:grid;place-items:center;font-weight:900;margin-bottom:14px
}
.prepare-card h3{font-size:18px;margin-bottom:7px}
.prepare-card p{font-size:13px;color:var(--muted);margin:0}

.process-faq-layout{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:32px
}
.process-faq-side{
  position:sticky;top:112px;align-self:start
}
.dynamic-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 10px;
  border-radius:999px;background:#e9f4f5;color:var(--brand);
  font-size:12px;font-weight:800;margin-bottom:12px
}
.dynamic-badge:before{
  content:"";width:7px;height:7px;border-radius:50%;background:#32a177;
  box-shadow:0 0 0 4px rgba(50,161,119,.12)
}
#processFaqList details{
  opacity:0;transform:translateY(7px);
  animation:faqIn .35s ease forwards
}
@keyframes faqIn{
  to{opacity:1;transform:none}
}

.process-cta{
  border-radius:28px;padding:38px;
  background:
    linear-gradient(105deg,rgba(6,45,59,.96),rgba(11,83,102,.89)),
    url("../images/sea-local-05.jpg") center/cover;
  color:#fff;display:grid;grid-template-columns:1fr .84fr;gap:30px;align-items:center;
  box-shadow:var(--shadow)
}
.process-cta .eyebrow{color:#ead3ae}
.process-cta p{color:rgba(255,255,255,.75)}
.contact-list{display:grid;gap:10px}
.contact-item{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08)
}
.contact-item span{font-size:13px;color:rgba(255,255,255,.7)}
.contact-item b{text-align:right}

@media(max-width:980px){
  .process-hero-grid,.day-grid,.process-cta{grid-template-columns:1fr}
  .simple-flow{grid-template-columns:1fr 1fr}
  .simple-flow:before{display:none}
  .day-intro{position:static}
  .prepare-grid{grid-template-columns:1fr 1fr}
  .process-faq-layout{grid-template-columns:1fr}
  .process-faq-side{position:static}
}
@media(max-width:760px){
  .compare-table{grid-template-columns:110px 1fr 1fr;min-width:680px}
  .compare-box{overflow-x:auto}
  .compare-cell{font-size:12px;padding:13px 10px}
  .compare-cell.head{font-size:15px}
}
@media(max-width:640px){
  .process-hero{min-height:auto}
  .process-hero-grid{padding:52px 0}
  .process-title-row{display:block}
  .process-link{margin-top:12px}
  .simple-flow,.compare-summary,.prepare-grid{grid-template-columns:1fr}
  .day-card{grid-template-columns:1fr}
  .day-time{width:max-content}
  .process-cta{padding:27px 22px}
  .contact-item{display:block}
  .contact-item b{display:block;text-align:left;margin-top:4px}
}


/* ===== V8 visual layering: add more section background images ===== */

/* 一对一简洁流程区：增加轻背景，让流程模块更有层次 */
#simple-process{
  position:relative;
  background:
    linear-gradient(180deg,rgba(248,251,251,.97),rgba(248,251,251,.97)),
    url("../images/sea-local-02.jpg") center/cover no-repeat;
}
#simple-process:before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 24%, rgba(13,89,112,.10), transparent 26%),
    radial-gradient(circle at 10% 75%, rgba(198,163,108,.10), transparent 22%);
  pointer-events:none;
}
#simple-process .wrap{position:relative;z-index:1}
.simple-step{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.98)),
    url("../images/sea-local-04.jpg") center/cover no-repeat;
}

/* 当天流程区：左侧说明卡增加图片底纹 */
.day-intro{
  background:
    linear-gradient(145deg,rgba(7,55,72,.94),rgba(10,84,103,.90)),
    url("../images/sea-local-07.jpg") center/cover no-repeat;
}
.day-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.98)),
    url("../images/sea-local-05.jpg") center/cover no-repeat;
}

/* 对比区：大容器增加背景图层，突出差异 */
.compare-section{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.98)),
    url("../images/sea-local-03.jpg") center/cover no-repeat;
}
.compare-box{
  background:
    linear-gradient(180deg,rgba(245,249,249,.96),rgba(245,249,249,.96)),
    url("../images/sea-local-01.jpg") center/cover no-repeat;
}
.compare-summary-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.98)),
    url("../images/sea-local-06.jpg") center/cover no-repeat;
}
.compare-summary-card.one{
  background:
    linear-gradient(145deg,rgba(12,82,104,.93),rgba(11,65,85,.90)),
    url("../images/sea-local-04.jpg") center/cover no-repeat;
}

/* 出海前准备区：整区增加轻海景底图 */
#prepare{
  position:relative;
  background:
    linear-gradient(180deg,rgba(243,248,248,.97),rgba(243,248,248,.97)),
    url("../images/sea-local-04.jpg") center/cover no-repeat;
}
#prepare:before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(13,89,112,.07), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(198,163,108,.08), transparent 22%);
  pointer-events:none;
}
#prepare .wrap{position:relative;z-index:1}
.prepare-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.985),rgba(255,255,255,.985)),
    url("../images/sea-local-02.jpg") center/cover no-repeat;
}

/* FAQ区也给一个很轻的背景衬底 */
#faq{
  background:
    linear-gradient(180deg,rgba(241,247,247,.97),rgba(241,247,247,.97)),
    url("../images/sea-local-07.jpg") center/cover no-repeat !important;
}

/* 移动端适当减少视觉干扰 */
@media(max-width:640px){
  #simple-process,
  .compare-section,
  #prepare,
  #faq{
    background-position:center center;
  }
  .simple-step,
  .day-card,
  .prepare-card,
  .compare-summary-card{
    background-image:none;
  }
}