/* ============================================================
   善缘 · 生命礼仪  —  Shan Yuan Life Rites
   Design system : 墨黑 / 宣纸 / 墨青  ·  诗艺 · 庄重 · 内敛
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* ink & paper */
  --ink:      #0b0e0e;   /* near-black */
  --ink-2:    #12181a;   /* lifted dark surface */
  --ink-3:    #1b2426;   /* card on dark */
  --paper:    #f4f1ea;   /* warm ivory */
  --paper-2:  #ece7db;   /* deeper ivory */
  --paper-3:  #e2ddcf;

  /* 墨青  ink-teal family */
  --moqing-deep: #16302c;
  --moqing:      #294b46;
  --moqing-mid:  #3a635b;
  --celadon:     #7f9c93;
  --celadon-soft:#a7bcb2;

  /* text roles */
  --tx-dark:    #1a201e;   /* on paper */
  --tx-dark-2:  #4b5551;   /* muted on paper */
  --tx-light:   #eceae2;   /* on ink */
  --tx-light-2: #a9b2ad;   /* muted on ink */

  /* lines */
  --line-dark:  rgba(26,32,30,.16);
  --line-light: rgba(236,234,226,.18);

  --wa-green: #25D366;

  /* type */
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans:  "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif SC", serif;

  /* metrics */
  --h-header: 76px;
  --maxw: 1200px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
  --sp:   clamp(4.5rem, 9vw, 8.5rem);   /* vertical section rhythm */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--tx-dark);
  background:var(--paper);
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.22; margin:0; letter-spacing:.02em; }
:focus-visible{ outline:2px solid var(--moqing-mid); outline-offset:3px; border-radius:2px; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sp); }
.bleed{ width:100%; }
.eyebrow{
  font-family:var(--latin);
  font-size:clamp(.9rem,1.6vw,1.05rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--moqing-mid);
  font-weight:500;
}
.eyebrow .idx{ font-style:italic; margin-right:.7em; opacity:.65; }
.zh-label{ font-family:var(--serif); letter-spacing:.5em; }

/* section heading block */
.s-head{ max-width:44ch; }
.s-head .eyebrow{ display:block; margin-bottom:1.4rem; }
.s-title{ font-size:clamp(1.9rem,4.4vw,3.1rem); font-weight:500; }
.s-title .light{ color:var(--celadon); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--tx-dark-2); line-height:1.9; max-width:52ch; }

/* vertical Chinese text */
.zh-vert{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--serif);
  letter-spacing:.32em;
  line-height:2.1;
}

/* ---------- Seal (印章) ---------- */
.seal{
  display:inline-grid;
  place-items:center;
  width:var(--seal-s,58px); height:var(--seal-s,58px);
  border-radius:14px;
  background:var(--moqing);
  color:var(--paper);
  font-family:var(--serif);
  font-weight:600;
  writing-mode:vertical-rl;
  text-orientation:upright;
  letter-spacing:.14em;
  font-size:calc(var(--seal-s,58px) * .34);
  line-height:1;
  box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.22);
  flex:none;
}
.seal--ghost{ background:transparent; color:var(--moqing); box-shadow:inset 0 0 0 1.5px var(--moqing); }
.seal--lg{ --seal-s: clamp(88px,13vw,128px); border-radius:22px; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--moqing); --fg:var(--paper); --bd:var(--moqing);
  display:inline-flex; align-items:center; gap:.7em;
  padding:.95em 1.9em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  font-family:var(--sans); font-weight:400; font-size:.98rem;
  letter-spacing:.14em;
  border-radius:2px;
  transition:background .45s var(--ease), color .45s var(--ease), transform .3s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; stroke-width:1.6; }
.btn:hover{ transform:translateY(-2px); }
.btn--solid:hover{ background:var(--moqing-deep); }
.btn--ghost{ --bg:transparent; --fg:var(--tx-dark); --bd:var(--line-dark); }
.btn--ghost:hover{ --bg:var(--moqing); --fg:var(--paper); --bd:var(--moqing); }
.btn--light{ --bg:transparent; --fg:var(--tx-light); --bd:rgba(236,234,226,.4); }
.btn--light:hover{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--onlight-solid{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn--onlight-solid:hover{ background:var(--moqing); border-color:var(--moqing); }

/* text link with underline sweep */
.link-underline{
  position:relative; color:var(--moqing-mid); font-weight:400; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:.5em;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:currentColor; transform:scaleX(.0); transform-origin:left; transition:transform .4s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(1); }
.link-underline svg{ width:1em; height:1em; transition:transform .4s var(--ease); }
.link-underline:hover svg{ transform:translateX(4px); }

/* ---------- Image treatment : unified 墨青 duotone ---------- */
.media{ position:relative; overflow:hidden; background:var(--ink-2); }
.media img{ width:100%; height:100%; object-fit:cover; }
.media--duo img{ filter:grayscale(.55) contrast(1.04) brightness(.98); }
.media--duo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(41,75,70,.42), rgba(11,14,14,.30));
  mix-blend-mode:multiply;
}
.media--soft img{ filter:grayscale(.28) contrast(1.02); }
.media__cap{
  position:absolute; left:0; bottom:0; padding:.7rem 1rem;
  font-family:var(--latin); font-style:italic; font-size:.9rem; letter-spacing:.06em;
  color:var(--tx-light); background:linear-gradient(0deg, rgba(11,14,14,.6), transparent);
  width:100%;
}

/* ============================================================
   HEADER  /  NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--h-header);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
/* transparent over hero (dark) */
.site-header[data-mode="over"]{ color:var(--tx-light); }
.site-header[data-mode="over"] .brand-name,
.site-header[data-mode="over"] .brand-sub{ color:var(--tx-light); }
/* solid after scroll, or on inner pages */
.site-header.is-solid{
  background:rgba(244,241,234,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line-dark);
  color:var(--tx-dark);
}
.site-header.is-solid .brand-name{ color:var(--tx-dark); }
.site-header.is-solid .brand-sub{ color:var(--tx-dark-2); }
.site-header.is-solid[data-mode="over"]{ color:var(--tx-dark); }

.brand{ display:flex; align-items:center; gap:.85rem; }
.brand .seal{ --seal-s:44px; border-radius:11px; }
/* header logo badge — logo.jpeg (white-on-black) presented on a dark tile so it
   reads cleanly whether the header is transparent-over-hero or solid on paper */
.brand-logo{
  width:clamp(44px,4.6vw,52px); aspect-ratio:1; flex:none;
  border-radius:13px; overflow:hidden; background:#0a0d0d;
  box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.18);
}
.brand-logo img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); display:block; }
.site-header.is-solid .brand-logo{ box-shadow:inset 0 0 0 1.5px rgba(26,32,30,.14); }

/* reusable logo badge — logo.jpeg on a dark rounded tile (echoes the boxed 缘) */
.logo-badge{ display:block; aspect-ratio:1; border-radius:22px; overflow:hidden;
  background:#0a0d0d; box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.22); }
.logo-badge img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); display:block; }
.logo-badge--lg{ width:clamp(102px,13vw,132px); margin:0 auto 2.2rem; }
.logo-badge--cta{ width:74px; margin:0 auto 2rem; box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.32); }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:1.34rem; letter-spacing:.34em; padding-left:.34em; }
.brand-sub{ font-family:var(--latin); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; margin-top:.42rem; color:var(--tx-dark-2); }

.nav{ display:flex; align-items:center; gap:clamp(1.2rem,2.5vw,2.6rem); }
.nav-links{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.4rem); list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:.98rem; letter-spacing:.16em; font-weight:400; position:relative; padding-block:.4rem;
  font-family:var(--serif);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:center; transition:transform .38s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--moqing-mid); }
.site-header[data-mode="over"]:not(.is-solid) .nav-links a[aria-current="page"]{ color:#fff; }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); background:var(--celadon); }

.nav-cta{ display:inline-flex; }
.nav-toggle{ display:none; background:none; border:0; padding:.4rem; }
.nav-toggle svg{ width:26px; height:26px; stroke:currentColor; stroke-width:2; fill:none; }

/* mobile drawer */
@media (max-width:900px){
  .nav-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.8rem;
    background:var(--ink); color:var(--tx-light);
    padding:2rem var(--pad);
    transform:translateX(100%); transition:transform .5s var(--ease);
    z-index:70;
  }
  .nav-links a{ font-size:1.5rem; color:var(--tx-light); }
  .nav-links a[aria-current="page"]{ color:var(--celadon); }
  body.nav-open .nav-links{ transform:translateX(0); }
  body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(11,14,14,.55); z-index:65;
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  .nav-close{ position:fixed; top:1.4rem; right:1.4rem; z-index:71; background:none; border:0; color:var(--tx-light); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
  body.nav-open .nav-close{ opacity:1; pointer-events:auto; }
  .nav-close svg{ width:30px; height:30px; stroke:currentColor; stroke-width:1.4; fill:none; }
}
@media (min-width:901px){ .nav-scrim,.nav-close{ display:none; } }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;                        /* header overlays hero → first screen = 100vh */
  margin-top:calc(-1 * var(--h-header));   /* pull under transparent header */
  padding-top:var(--h-header);
  display:flex; align-items:flex-end;
  color:var(--tx-light);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,14,14,.55) 0%, rgba(11,14,14,.05) 26%, rgba(11,14,14,.12) 55%, rgba(11,14,14,.82) 100%),
    linear-gradient(90deg, rgba(11,14,14,.5), transparent 60%);
}
.hero .container{ width:100%; padding-block:clamp(2.5rem,6vh,5rem); }
.hero__inner{ display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
.hero__brandmark{ display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem; }
.hero__brandmark .seal{ --seal-s:52px; }
.hero__brandmark span{ font-family:var(--latin); letter-spacing:.4em; text-transform:uppercase; font-size:.82rem; color:var(--celadon-soft); }
.hero__brandmark .rule-mk{ width:46px; height:1px; background:var(--celadon); flex:none; }
.hero h1{
  font-size:clamp(3.2rem,11vw,7.5rem);
  font-weight:500; letter-spacing:.14em; line-height:1;
  margin-bottom:1.4rem; text-indent:.14em;
}
.hero__tag{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.15rem,2.6vw,1.7rem); letter-spacing:.42em;
  color:var(--paper); text-indent:.42em;
}
.hero__tag .dot{ color:var(--celadon); margin:0 .1em; }
.hero__sub{ margin-top:1.7rem; max-width:34ch; color:var(--tx-light-2); font-size:1.02rem; line-height:1.9; }
.hero__cta{ margin-top:2.3rem; display:flex; flex-wrap:wrap; gap:1rem; }

/* vertical couplet on the right */
.hero__couplet{
  display:flex; gap:1.1rem; align-self:end; padding-bottom:.4rem;
  color:var(--paper); font-size:clamp(1rem,1.5vw,1.35rem);
  opacity:.92;
}
.hero__couplet .zh-vert{ height:min(46vh,360px); }
.hero__couplet .rule{ width:1px; background:linear-gradient(var(--celadon),transparent); align-self:stretch; }

.scroll-cue{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--latin); letter-spacing:.3em; font-size:.72rem; text-transform:uppercase; color:var(--tx-light-2);
}
.scroll-cue .bar{ width:1px; height:46px; background:linear-gradient(var(--celadon-soft),transparent); position:relative; overflow:hidden; }
.scroll-cue .bar::after{ content:""; position:absolute; inset:0; background:var(--paper); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 55%,100%{ transform:translateY(100%);} }

/* enso decorative */
.enso{ position:absolute; pointer-events:none; z-index:-1; opacity:.14; }
.enso svg{ width:100%; height:100%; }

/* ============================================================
   SECTION : Philosophy manifesto (asymmetric editorial)
   ============================================================ */
.manifest{ position:relative; }
.manifest .grid{
  display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:center;
}
.manifest__lead{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,4vw,3rem); line-height:1.7; letter-spacing:.04em; color:var(--tx-dark);
}
.manifest__lead em{ font-style:normal; color:var(--moqing); }
.manifest__side{ display:flex; flex-direction:column; gap:1.6rem; }
.manifest__side .media{ aspect-ratio:3/4; border-radius:2px; }
.manifest__note{ color:var(--tx-dark-2); font-size:1.02rem; line-height:1.95; }
.manifest__seal{ display:flex; align-items:center; gap:1rem; }
.manifest__seal small{ font-family:var(--latin); letter-spacing:.3em; text-transform:uppercase; color:var(--tx-dark-2); font-size:.76rem; }

/* ============================================================
   SECTION : Services list (index rows + sticky image)
   ============================================================ */
.svc{ }
.svc .grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.svc__sticky{ position:sticky; top:calc(var(--h-header) + 2rem); }
.svc__sticky .media{ aspect-ratio:4/5; border-radius:2px; }
.svc__list{ list-style:none; margin:0; padding:0; }
.svc__row{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:baseline;
  padding:1.7rem 0; border-top:1px solid var(--line-dark);
  transition:padding-left .4s var(--ease);
}
.svc__row:last-child{ border-bottom:1px solid var(--line-dark); }
.svc__row:hover{ padding-left:.7rem; }
.svc__num{ font-family:var(--latin); font-style:italic; font-size:1.1rem; color:var(--celadon); }
.svc__row h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:500; margin-bottom:.5rem; }
.svc__row p{ margin:0; color:var(--tx-dark-2); font-size:1rem; line-height:1.8; max-width:46ch; }
.svc__row .arr{ opacity:0; transform:translateX(-6px); transition:.4s var(--ease); color:var(--moqing); }
.svc__row:hover .arr{ opacity:1; transform:translateX(0); }

/* ============================================================
   BAND : full-bleed 墨青 pledge
   ============================================================ */
.band{ position:relative; color:var(--tx-light); background:var(--moqing-deep); overflow:hidden; }
.band__media{ position:absolute; inset:0; z-index:0; opacity:.22; }
.band__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.band .container{ position:relative; z-index:1; }
.band__head{ max-width:38ch; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.band__head h2{ font-size:clamp(1.9rem,4vw,2.9rem); font-weight:400; color:var(--paper); }
.band__head .eyebrow{ color:var(--celadon-soft); margin-bottom:1.2rem; display:block; }
.pledge{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-light); border-block:1px solid var(--line-light); }
.pledge__cell{ background:var(--moqing-deep); padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem); }
.pledge__cell .k{ font-family:var(--latin); font-size:clamp(2.4rem,5vw,3.4rem); font-style:italic; color:var(--celadon); line-height:1; }
.pledge__cell .t{ font-family:var(--serif); letter-spacing:.28em; margin-top:.8rem; font-size:1.05rem; }
.pledge__cell .d{ color:var(--tx-light-2); font-size:.92rem; margin-top:.5rem; line-height:1.7; }

/* ============================================================
   FLOW : process timeline
   ============================================================ */
.flow__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1.5rem; margin-bottom:clamp(2.5rem,5vw,3.6rem); }
.flow__track{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; counter-reset:step; }
.flow__step{ position:relative; padding:2.2rem 1.2rem 0 0; }
.flow__step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-dark);
}
.flow__step::after{
  content:""; position:absolute; top:-5px; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--moqing);
}
.flow__step .no{ font-family:var(--latin); font-style:italic; color:var(--celadon); font-size:1rem; }
.flow__step h4{ font-size:1.2rem; margin:.5rem 0 .6rem; letter-spacing:.06em; }
.flow__step p{ margin:0; font-size:.92rem; color:var(--tx-dark-2); line-height:1.75; }

/* ============================================================
   GALLERY  +  Lightbox
   ============================================================ */
.gal__head{ text-align:center; margin-bottom:clamp(2.4rem,5vw,3.4rem); }
.gal__head .eyebrow{ display:block; margin-bottom:1.1rem; }
.gallery{
  display:grid; grid-template-columns:repeat(12,1fr); gap:14px; grid-auto-flow:dense;
}
.gallery figure{ margin:0; position:relative; overflow:hidden; cursor:pointer; background:var(--ink-2); }
.gallery figure img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); filter:grayscale(.4) contrast(1.03); }
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figure figcaption{
  position:absolute; left:0; bottom:0; padding:.9rem 1rem; width:100%;
  font-family:var(--serif); letter-spacing:.24em; color:var(--tx-light); font-size:.95rem;
  background:linear-gradient(0deg, rgba(11,14,14,.72), transparent);
  opacity:0; transform:translateY(8px); transition:.5s var(--ease);
}
.gallery figure:hover figcaption{ opacity:1; transform:translateY(0); }
.g-a{ grid-column:span 5; aspect-ratio:4/5; }
.g-b{ grid-column:span 7; aspect-ratio:16/10; }
.g-c{ grid-column:span 4; aspect-ratio:1/1; }
.g-d{ grid-column:span 4; aspect-ratio:1/1; }
.g-e{ grid-column:span 4; aspect-ratio:1/1; }

.lightbox{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(8,10,10,.94); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:82vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__cap{ position:absolute; bottom:1.4rem; left:0; right:0; text-align:center; color:var(--tx-light-2); font-family:var(--serif); letter-spacing:.3em; }
.lb-btn{ position:absolute; background:none; border:1px solid var(--line-light); color:var(--tx-light); width:52px; height:52px; display:grid; place-items:center; border-radius:50%; transition:.3s; }
.lb-btn:hover{ background:rgba(255,255,255,.1); }
.lb-btn svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.6; fill:none; }
.lb-close{ top:1.4rem; right:1.4rem; }
.lb-prev{ left:1.4rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.4rem; top:50%; transform:translateY(-50%); }

/* ============================================================
   CTA band (photo)
   ============================================================ */
.cta{ position:relative; color:var(--tx-light); overflow:hidden; text-align:center; }
.cta__media{ position:absolute; inset:0; z-index:-2; }
.cta__media img{ width:100%; height:100%; object-fit:cover; }
.cta__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,14,14,.7), rgba(22,48,44,.78)); }
.cta .container{ position:relative; padding-block:clamp(5rem,11vw,8.5rem); }
.cta h2{ font-size:clamp(2rem,5vw,3.6rem); font-weight:400; letter-spacing:.06em; margin-bottom:1.4rem; color:var(--paper); }
.cta p{ max-width:42ch; margin:0 auto 2.4rem; color:var(--tx-light-2); font-size:1.08rem; line-height:1.9; }
.cta__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.cta .seal{ --seal-s:64px; margin:0 auto 2rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero{
  position:relative; min-height:100svh;
  margin-top:calc(-1 * var(--h-header)); padding-top:var(--h-header);
  display:flex; align-items:flex-end; color:var(--tx-light); overflow:hidden;
}
.phero__media{ position:absolute; inset:0; z-index:-2; }
.phero__media img{ width:100%; height:100%; object-fit:cover; }
.phero__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,14,14,.5) 0%, rgba(11,14,14,.15) 40%, rgba(11,14,14,.85) 100%); }
.phero .container{ padding-block:clamp(3rem,8vh,6rem); width:100%; }
.phero__crumb{ font-family:var(--latin); letter-spacing:.28em; text-transform:uppercase; font-size:.78rem; color:var(--celadon-soft); margin-bottom:1.6rem; }
.phero__crumb a:hover{ color:#fff; }
.phero h1{ font-size:clamp(2.6rem,7vw,5rem); font-weight:500; letter-spacing:.1em; }
.phero__tag{ margin-top:1.4rem; font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.4rem); letter-spacing:.2em; color:var(--paper); max-width:40ch; }
.phero__vert{ position:absolute; right:var(--pad); bottom:clamp(3rem,8vh,6rem); height:min(40vh,320px); color:var(--celadon-soft); font-size:1.1rem; opacity:.9; }

/* ============================================================
   ABOUT : story editorial
   ============================================================ */
.story .grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,5rem); }
.story__aside{ position:sticky; top:calc(var(--h-header) + 2rem); align-self:start; }
.story__aside h2{ font-size:clamp(1.9rem,4vw,2.8rem); font-weight:400; }
.story__aside .eyebrow{ display:block; margin-bottom:1.3rem; }
.story__body p{ margin:0 0 1.5rem; color:var(--tx-dark-2); font-size:1.08rem; line-height:2; }
.story__body p:first-child::first-letter{
  font-family:var(--serif); float:left; font-size:4.4rem; line-height:.8; padding:.1em .18em 0 0; color:var(--moqing);
}
.story__figure{ margin:2.2rem 0; }
.story__figure .media{ aspect-ratio:16/9; }
.story__figure figcaption{ margin-top:.8rem; font-family:var(--latin); font-style:italic; color:var(--tx-dark-2); letter-spacing:.05em; }

/* name meaning centerpiece */
.name{ text-align:center; background:var(--paper-2); }
.name .seal--lg{ margin:0 auto 2.2rem; }
.name h2{ font-size:clamp(2.2rem,5vw,3.4rem); font-weight:400; letter-spacing:.2em; }
.name__pair{ display:flex; justify-content:center; gap:clamp(2rem,8vw,6rem); margin-top:clamp(2.5rem,5vw,3.6rem); flex-wrap:wrap; text-align:left; }
.name__ch{ max-width:26ch; }
.name__ch .big{ font-family:var(--serif); font-size:3rem; color:var(--moqing); display:block; margin-bottom:.6rem; letter-spacing:.1em; }
.name__ch p{ margin:0; color:var(--tx-dark-2); line-height:1.9; }

/* values grid */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
.value{ background:var(--paper); padding:clamp(1.8rem,3.2vw,2.6rem); display:flex; flex-direction:column; gap:1rem; min-height:250px; }
.value:nth-child(even){ background:var(--paper-2); }
.value .ic{ width:34px; height:34px; color:var(--moqing); stroke-width:1.4; }
.value h3{ font-size:1.5rem; letter-spacing:.24em; }
.value p{ margin:0; color:var(--tx-dark-2); font-size:.96rem; line-height:1.8; }
.value .en{ font-family:var(--latin); font-style:italic; color:var(--celadon); letter-spacing:.06em; margin-top:auto; }

/* commitment split */
.commit{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--ink); color:var(--tx-light); }
.commit__media{ position:relative; min-height:420px; }
.commit__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.04); }
.commit__body{ padding:clamp(2.5rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; }
.commit__body .eyebrow{ color:var(--celadon-soft); display:block; margin-bottom:1.4rem; }
.commit__body h2{ font-size:clamp(1.9rem,4vw,2.8rem); font-weight:400; color:var(--paper); margin-bottom:1.4rem; }
.commit__body p{ color:var(--tx-light-2); line-height:1.95; margin:0 0 1.2rem; max-width:44ch; }
.commit__list{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.9rem; }
.commit__list li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--tx-light); }
.commit__list svg{ width:1.1rem; height:1.1rem; color:var(--celadon); flex:none; margin-top:.4rem; stroke-width:1.8; }

/* ============================================================
   SERVICES page blocks (each a distinct skeleton)
   ============================================================ */
/* B1 overlap */
.svc-feat{ position:relative; }
.svc-feat .media{ aspect-ratio:16/8; }
.svc-feat__card{
  background:var(--paper); padding:clamp(1.8rem,3.5vw,2.8rem); max-width:520px;
  margin-top:-90px; margin-left:auto; position:relative; z-index:2;
  border-top:3px solid var(--moqing);
}
.svc-feat__card .no{ font-family:var(--latin); font-style:italic; color:var(--celadon); }
.svc-feat__card h3{ font-size:clamp(1.5rem,3vw,2.1rem); margin:.4rem 0 1rem; }
.svc-feat__card p{ margin:0; color:var(--tx-dark-2); line-height:1.9; }

/* B2 dark inset split */
.svc-dark{ background:var(--ink); color:var(--tx-light); }
.svc-dark .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.svc-dark .txt .no{ font-family:var(--latin); font-style:italic; color:var(--celadon); }
.svc-dark .txt h3{ color:var(--paper); font-size:clamp(1.5rem,3vw,2.1rem); margin:.4rem 0 1.1rem; }
.svc-dark .txt p{ color:var(--tx-light-2); line-height:1.95; }
.svc-dark .media{ aspect-ratio:5/4; }

/* B3 magazine stacked images */
.svc-mag .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); align-items:center; }
.svc-mag__imgs{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.svc-mag__imgs .media:first-child{ grid-row:span 2; aspect-ratio:3/5; }
.svc-mag__imgs .media:nth-child(2){ aspect-ratio:1/1; }
.svc-mag__imgs .media:nth-child(3){ aspect-ratio:1/1; }
.svc-mag__txt .no{ font-family:var(--latin); font-style:italic; color:var(--celadon); }
.svc-mag__txt h3{ font-size:clamp(1.5rem,3vw,2.1rem); margin:.4rem 0 1rem; }
.svc-mag__txt p{ color:var(--tx-dark-2); line-height:1.9; margin:0 0 1rem; }
.tick{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.7rem; }
.tick li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--tx-dark); font-size:.98rem; }
.tick svg{ width:1rem; height:1rem; color:var(--moqing); flex:none; margin-top:.45rem; stroke-width:2; }

/* B4 faiths grid */
.faiths__head{ text-align:center; max-width:50ch; margin:0 auto clamp(2.4rem,5vw,3.4rem); }
.faiths__head .eyebrow{ display:block; margin-bottom:1.1rem; }
.faiths{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); }
.faith{ background:var(--paper); padding:clamp(1.8rem,3vw,2.6rem); text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.faith:nth-child(3n-1){ background:var(--paper-2); }
.faith .mk{ width:38px; height:38px; color:var(--moqing); stroke-width:1.3; }
.faith h4{ font-size:1.4rem; letter-spacing:.24em; }
.faith p{ margin:0; color:var(--tx-dark-2); font-size:.92rem; line-height:1.7; }

/* B6 accordion steps */
.steps{ border-top:1px solid var(--line-dark); }
.step{ border-bottom:1px solid var(--line-dark); }
.step__q{ width:100%; text-align:left; background:none; border:0; padding:1.6rem 0; display:flex; align-items:center; gap:1.4rem; }
.step__q .no{ font-family:var(--latin); font-style:italic; color:var(--celadon); font-size:1.1rem; }
.step__q h4{ font-size:clamp(1.2rem,2.4vw,1.55rem); font-weight:500; flex:1; }
.step__q .pm{ width:26px; height:26px; flex:none; color:var(--moqing); transition:transform .4s var(--ease); }
.step[aria-expanded="true"] .pm{ transform:rotate(45deg); }
.step__a{ overflow:hidden; height:0; transition:height .45s var(--ease); }
.step__a-inner{ padding:0 0 1.7rem calc(1.1rem + 1.4rem); color:var(--tx-dark-2); line-height:1.9; max-width:60ch; }

/* florals strip */
.florals{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.florals .media{ aspect-ratio:3/4; }
.florals .media:nth-child(2){ margin-top:2.4rem; }
.florals .media:nth-child(4){ margin-top:2.4rem; }

/* ============================================================
   PACKAGES
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:stretch; }
.plan{ border:1px solid var(--line-dark); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; background:var(--paper); }
.plan--featured{ background:var(--ink); color:var(--tx-light); border-color:var(--ink); transform:translateY(-14px); box-shadow:0 30px 60px -30px rgba(22,48,44,.5); }
.plan__badge{ font-family:var(--latin); font-style:italic; letter-spacing:.1em; color:var(--celadon); font-size:.9rem; }
.plan__name{ font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.3rem); letter-spacing:.28em; margin:.5rem 0 .3rem; }
.plan__name .en{ display:block; font-family:var(--latin); font-style:italic; font-size:1rem; letter-spacing:.08em; color:var(--celadon); margin-top:.5rem; }
.plan p.desc{ color:var(--tx-dark-2); font-size:.96rem; line-height:1.8; margin:.6rem 0 1.4rem; }
.plan--featured p.desc{ color:var(--tx-light-2); }
.plan__feats{ list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:.85rem; border-top:1px solid var(--line-dark); padding-top:1.5rem; }
.plan--featured .plan__feats{ border-color:var(--line-light); }
.plan__feats li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; line-height:1.6; }
.plan__feats svg{ width:1rem; height:1rem; color:var(--celadon); flex:none; margin-top:.4rem; stroke-width:2; }
.plan .btn{ margin-top:auto; justify-content:center; }

/* add-ons checklist */
.addons .grid{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.addons__list{ columns:2; column-gap:2.5rem; list-style:none; padding:0; margin:0; }
.addons__list li{ break-inside:avoid; display:flex; gap:.8rem; padding:.85rem 0; border-bottom:1px solid var(--line-dark); align-items:baseline; }
.addons__list .n{ font-family:var(--latin); font-style:italic; color:var(--celadon); font-size:.9rem; }
@media (max-width:640px){ .addons__list{ columns:1; } }

/* FAQ */
.faq{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line-dark); }
.faq__item{ border-bottom:1px solid var(--line-dark); }
.faq__q{ width:100%; text-align:left; background:none; border:0; padding:1.5rem 0; display:flex; gap:1rem; align-items:center; }
.faq__q h4{ flex:1; font-size:clamp(1.05rem,2vw,1.3rem); font-weight:500; letter-spacing:.03em; }
.faq__q .pm{ width:24px; height:24px; color:var(--moqing); flex:none; transition:transform .4s var(--ease); }
.faq__item[aria-expanded="true"] .pm{ transform:rotate(45deg); }
.faq__a{ overflow:hidden; height:0; transition:height .45s var(--ease); }
.faq__a-inner{ padding:0 0 1.6rem; color:var(--tx-dark-2); line-height:1.9; max-width:62ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:stretch; }
.cinfo .eyebrow{ display:block; margin-bottom:1.2rem; }
.cinfo h2{ font-size:clamp(1.55rem,3vw,2.1rem); font-weight:400; margin-bottom:1.8rem; }
.cinfo__rows{ list-style:none; padding:0; margin:0; }
.cinfo__rows li{ display:flex; gap:1.2rem; padding:1.3rem 0; border-top:1px solid var(--line-dark); align-items:flex-start; }
.cinfo__rows li:last-child{ border-bottom:1px solid var(--line-dark); }
.cinfo__rows .ic{ width:26px; height:26px; color:var(--moqing); flex:none; margin-top:.2rem; stroke-width:1.5; }
.cinfo__rows .k{ font-family:var(--latin); letter-spacing:.24em; text-transform:uppercase; font-size:.72rem; color:var(--tx-dark-2); display:block; margin-bottom:.35rem; }
.cinfo__rows .v{ font-size:1.05rem; color:var(--tx-dark); }
.cinfo__note{ margin-top:1.6rem; font-size:.86rem; color:var(--tx-dark-2); font-style:italic; }

.form{ background:var(--paper-2); padding:clamp(1.8rem,4vw,2.8rem); display:flex; flex-direction:column; }
.form .field:last-of-type{ flex:1 1 auto; display:flex; flex-direction:column; }
.form .field:last-of-type textarea{ flex:1 1 auto; }
.form h3{ font-size:1.5rem; font-weight:500; margin-bottom:1.6rem; }
.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-size:.82rem; letter-spacing:.16em; color:var(--tx-dark-2); margin-bottom:.55rem; font-family:var(--serif); }
.field input,.field textarea,.field select{
  width:100%; padding:.9rem 1rem; background:var(--paper); border:1px solid var(--line-dark);
  font-family:var(--sans); font-size:1rem; color:var(--tx-dark); border-radius:2px; transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--moqing); }
.form .btn{ width:100%; justify-content:center; }
.form__ok{ display:none; margin-top:1rem; color:var(--moqing); font-size:.95rem; }
.form__ok.show{ display:block; }

/* location band */
.loc{ position:relative; color:var(--tx-light); overflow:hidden; }
.loc__media{ position:absolute; inset:0; z-index:-2; }
.loc__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.6) contrast(1.03); }
.loc__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,14,14,.85), rgba(22,48,44,.55)); }
.loc .container{ position:relative; padding-block:clamp(4rem,9vw,7rem); }
.loc__card{ max-width:440px; }
.loc__card .eyebrow{ color:var(--celadon-soft); display:block; margin-bottom:1.1rem; }
.loc__card h2{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:400; color:var(--paper); margin-bottom:1rem; }
.loc__card p{ color:var(--tx-light-2); line-height:1.9; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--tx-light-2); padding-top:clamp(3.5rem,7vw,5.5rem); }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3rem); padding-bottom:clamp(3rem,6vw,4.5rem); }
.footer__brand .logo{ width:74px; border-radius:14px; margin-bottom:1.3rem; }
.footer__brand p{ max-width:34ch; line-height:1.9; font-size:.95rem; }
.footer__brand .zh{ font-family:var(--serif); color:var(--paper); font-size:1.4rem; letter-spacing:.34em; margin-bottom:.4rem; display:block; }
.footer__col h5{ font-family:var(--serif); color:var(--paper); font-weight:500; letter-spacing:.2em; font-size:1rem; margin:0 0 1.3rem; }
.footer__col ul{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.footer__col a,.footer__col li{ font-size:.95rem; }
.footer__col a:hover{ color:var(--celadon); }
.footer__col .muted{ color:var(--tx-light-2); }
.footer__bottom{ border-top:1px solid var(--line-light); padding-block:1.8rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.85rem; }
.footer__bottom a{ color:var(--celadon); }
.footer__social{ display:flex; gap:1rem; }
.footer__social a{ width:40px; height:40px; border:1px solid var(--line-light); border-radius:50%; display:grid; place-items:center; transition:.3s; }
.footer__social a:hover{ background:var(--moqing); border-color:var(--moqing); color:#fff; }
.footer__social svg{ width:18px; height:18px; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:90;
  width:60px; height:60px; border-radius:50%; background:var(--wa-green); color:#fff;
  display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.4);
  transition:transform .3s var(--ease);
}
.wa-float svg{ width:32px; height:32px; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--wa-green); z-index:-1;
  animation:wapulse 2.6s ease-out infinite;
}
.wa-float:hover{ transform:scale(1.08); }
@keyframes wapulse{ 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(1.9); opacity:0; } }

/* ============================================================
   REVEAL animation
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.1s; }
[data-reveal][data-delay="2"]{ transition-delay:.2s; }
[data-reveal][data-delay="3"]{ transition-delay:.3s; }
[data-reveal][data-delay="4"]{ transition-delay:.4s; }
[data-reveal][data-delay="5"]{ transition-delay:.5s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .wa-float::before{ animation:none; }
  .scroll-cue .bar::after{ animation:none; }
  .gallery figure img{ transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{ --h-header:70px; }
  .flow__track{ grid-template-columns:repeat(3,1fr); row-gap:2.4rem; }
  .pledge{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:repeat(2,1fr); }
  .faiths{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .manifest .grid{ grid-template-columns:1fr; gap:2.5rem; }
  .manifest__side{ flex-direction:row; }
  .manifest__side .media{ flex:1; aspect-ratio:3/4; }
  .svc .grid{ grid-template-columns:1fr; }
  .svc__sticky{ position:relative; top:0; max-width:480px; }
  .story .grid{ grid-template-columns:1fr; gap:2rem; }
  .story__aside{ position:relative; top:0; }
  .svc-dark .grid,.svc-mag .grid,.commit,.contact .grid,.addons .grid{ grid-template-columns:1fr; }
  .commit__media{ min-height:320px; }
  .plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .plan--featured{ transform:none; }
  .hero__couplet{ display:none; }
  .phero__vert{ display:none; }
}
@media (max-width:640px){
  :root{ --h-header:62px; }
  .brand-sub{ display:none; }
  .brand-name{ font-size:1.15rem; letter-spacing:.28em; }
  .pledge{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; }
  .faiths{ grid-template-columns:1fr; }
  .flow__track{ grid-template-columns:1fr; }
  .flow__step{ padding-right:0; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .g-a,.g-b,.g-c,.g-d,.g-e{ grid-column:span 1; aspect-ratio:4/5; }
  .g-b{ grid-column:span 2; aspect-ratio:16/10; }
  .svc-feat__card{ margin-top:-50px; margin-left:0; }
  .svc-mag__imgs{ grid-template-columns:1fr 1fr; }
  .name__pair{ flex-direction:column; align-items:center; text-align:center; gap:2.2rem; }
  .florals{ grid-template-columns:repeat(2,1fr); }
  .florals .media:nth-child(n){ margin-top:0; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
  .scroll-cue{ display:none; }
}
@media (max-width:420px){
  .footer__top{ grid-template-columns:1fr; }
}

/* ============================================================
   PRELOADER — 水墨 ink-drop ripple, resolving into the logo
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(125% 95% at 50% 44%, #16241f 0%, #0a0d0d 56%, #070909 100%);
  overflow:hidden;
  animation:loaderOut .9s var(--ease) 2.55s forwards;
}
.preloaded .loader{ display:none; }
.loader__scene{ position:relative; width:min(80vw,320px); aspect-ratio:3/4; }

.loader__logo{
  position:absolute; z-index:3; left:50%; top:50%;
  width:min(48vw,186px); height:auto;
  transform:translate(-50%,-53%) scale(.9);
  mix-blend-mode:screen;                 /* black bg → transparent, white mark floats */
  opacity:0;
  animation:sy-logoIn 1s var(--ease) 1.05s forwards;
}
.loader__drop{
  position:absolute; z-index:2; left:50%; top:3%; margin-left:-8px;
  width:16px; height:23px;
  background:linear-gradient(180deg, rgba(167,188,178,.35), #dbe8e0 80%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:0 0 16px rgba(167,188,178,.6);
  opacity:0;
  animation:sy-drop 1.05s cubic-bezier(.55,.06,.9,.5) forwards;
}
.loader__ripple{
  position:absolute; z-index:2; left:50%; top:50%; width:132px; height:50px;
  margin:-25px 0 0 -66px; border:1px solid rgba(167,188,178,.5); border-radius:50%;
  transform:scale(.14); opacity:0;
}
.loader__ripple.r1{ animation:sy-ripple 1.7s var(--ease) 1.0s forwards; }
.loader__ripple.r2{ animation:sy-ripple 1.7s var(--ease) 1.22s forwards; }
.loader__ripple.r3{ animation:sy-ripple 1.7s var(--ease) 1.46s forwards; }
.loader__splash{
  position:absolute; z-index:1; left:50%; top:50%; width:150px; height:150px;
  margin:-75px 0 0 -75px; border-radius:50%;
  background:radial-gradient(circle, rgba(61,99,91,.42), rgba(61,99,91,.05) 55%, transparent 70%);
  transform:scale(.12); opacity:0;
  animation:sy-bloom 1.9s var(--ease) 1.0s forwards;
}
.loader__cap{
  position:absolute; z-index:3; left:0; right:0; bottom:1%; text-align:center;
  font-family:var(--latin); text-transform:uppercase; letter-spacing:.42em; text-indent:.42em;
  color:var(--celadon-soft); font-size:.82rem; opacity:0;
  animation:sy-capIn 1.1s var(--ease) 1.6s forwards;
}
@keyframes sy-drop{
  0%{ top:3%; opacity:0; transform:scaleY(1); }
  12%{ opacity:1; }
  70%{ opacity:1; transform:scaleY(1.28); }
  84%{ top:49%; opacity:1; transform:scaleY(1.4); }
  93%{ top:50%; opacity:.5; transform:scaleY(.4); }
  100%{ top:50%; opacity:0; transform:scaleY(.12); }
}
@keyframes sy-ripple{
  0%{ transform:scale(.14); opacity:0; }
  22%{ opacity:.5; }
  100%{ transform:scale(2.5); opacity:0; }
}
@keyframes sy-bloom{
  0%{ transform:scale(.12); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}
@keyframes sy-logoIn{
  0%{ opacity:0; transform:translate(-50%,-53%) scale(.9); filter:blur(7px); }
  100%{ opacity:1; transform:translate(-50%,-53%) scale(1); filter:blur(0); }
}
@keyframes sy-capIn{ to{ opacity:1; } }
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

@media (prefers-reduced-motion: reduce){
  .loader{ animation:loaderOut .5s ease .9s forwards; }
  .loader__drop,.loader__ripple,.loader__splash{ display:none; }
  .loader__logo{ animation:sy-logoIn .5s ease forwards; }
  .loader__cap{ animation:sy-capIn .5s ease .2s forwards; }
}