/* ==========================================================
展丧事服务 Chan Funeral Services — shared stylesheet
Colours, fonts and spacing are defined once as variables
below, so the whole site can be re-themed from here.
========================================================== */
:root {
/* Palette sampled from the company logo: black base + metallic gold */
--black: #15120d; /* warm charcoal: header, dark sections */
--black-deep: #0d0b08; /* top bar, footer */
--ink: #2a251e; /* main text (soft, not pure black) */
--ink-soft: #6a604f; /* secondary text */
--ivory: #fbf8f2; /* page background */
--cream: #f5eee2; /* alternate section background */
--white: #ffffff;
--gold: #85641b; /* gold for text on light backgrounds (contrast 4.7+ on ivory and cream) */
--gold-bright: #d1b56a; /* logo gold, on dark backgrounds */
--gold-soft: #ead9a2; /* champagne highlight, on dark backgrounds */
--gold-grad: linear-gradient(135deg, #8a6a22 0%, #cdb066 30%, #f6efc0 50%, #c9a85c 70%, #8f6d25 100%);
--line: #eadfcb;
--on-dark: #d6ccb6; /* body text on black */
--on-dark-soft: #a99f88;
/* Latin fonts first; Chinese characters fall through to the SC fonts */
--font-serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
--font-sans: "Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
--font-brand: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
--radius: 16px;
--shadow: 0 18px 40px -22px rgba(60, 42, 12, 0.22);
--shadow-lg: 0 30px 60px -28px rgba(60, 42, 12, 0.38);
--max: 1160px;
/* deeper gold for gold text on light backgrounds */
--gold-grad-deep: linear-gradient(135deg, #6f5418 0%, #a8862f 40%, #d4b56a 55%, #8f6d25 100%);
/* Decorative line art (generated): cloud pattern, lotus, chrysanthemum */
--orn-cloud-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Cpath d='M40 56.7 L42.4 56.2 L44.6 55.2 L46.5 53.9 L48.1 52.1 L49.2 50.2 L49.9 48 L50.1 45.9 L49.8 43.8 L49.1 41.8 L48 40.1 L46.6 38.7 L45 37.6 L43.3 36.9 L41.5 36.6 L39.7 36.7 L38 37.2 L36.5 38 L35.3 39.1 L34.3 40.3 L33.6 41.8 L33.3 43.2 L33.3 44.7 L33.6 46.1 L34.2 47.3 L35 48.3 L36 49.1 L37.1 49.7 L38.2 50 L39.3 50 L40.4 49.8 L41.3 49.4 L42.1 48.9 L42.7 48.2 L43.2 47.4 L43.4 46.6 L43.4 45.8 L43.3 45 L43 44.4 L42.6 43.9 L42.1 43.5M62.1 51.5 L58.9 50.9 L55.9 49.6 L53.4 47.7 L51.3 45.4 L49.8 42.8 L48.9 40 L48.7 37.1 L49 34.2 L50 31.6 L51.4 29.3 L53.2 27.4 L55.4 26 L57.7 25.1 L60.2 24.7 L62.5 24.9 L64.8 25.5 L66.8 26.6 L68.4 28 L69.7 29.7 L70.6 31.6 L71 33.5 L71 35.5 L70.6 37.3 L69.8 39 L68.7 40.3 L67.5 41.4 L66 42.2 L64.5 42.6 L63 42.6 L61.6 42.4 L60.3 41.8 L59.3 41 L58.5 40.1 L57.9 39.1 L57.6 38 L57.6 36.9 L57.8 35.9 L58.1 35.1 L58.7 34.4 L59.3 33.9M84.2 55.4 L82.1 55 L80.1 54.1 L78.4 52.9 L77 51.3 L76 49.6 L75.4 47.7 L75.3 45.8 L75.5 43.9 L76.1 42.2 L77.1 40.6 L78.3 39.4 L79.7 38.4 L81.3 37.8 L82.9 37.6 L84.5 37.6 L86 38.1 L87.3 38.8 L88.4 39.7 L89.3 40.9 L89.9 42.1 L90.1 43.4 L90.1 44.7 L89.9 45.9 L89.3 47 L88.6 48 L87.8 48.7 L86.8 49.2 L85.8 49.4 L84.8 49.5 L83.9 49.3 L83 48.9 L82.3 48.4 L81.8 47.8 L81.4 47.1 L81.2 46.4 L81.2 45.7 L81.3 45 L81.6 44.5 L81.9 44 L82.3 43.7M28.3 56.7 Q62.1 65.8 94.6 55.4 C107.6 51.5 115.4 42.4 128.4 47.6M170 134 L171.9 133.6 L173.6 132.9 L175 131.8 L176.2 130.5 L177.1 129 L177.6 127.3 L177.7 125.7 L177.5 124 L177 122.5 L176.2 121.2 L175.1 120.1 L173.9 119.3 L172.5 118.8 L171.1 118.6 L169.8 118.6 L168.5 119 L167.3 119.6 L166.3 120.4 L165.6 121.4 L165.1 122.5 L164.9 123.6 L164.9 124.8 L165.1 125.8 L165.5 126.8 L166.2 127.6 L166.9 128.2 L167.7 128.6 L168.6 128.8 L169.5 128.9 L170.3 128.7 L171 128.4 L171.6 128 L172.1 127.4 L172.4 126.8 L172.6 126.2 L172.6 125.6 L172.5 125 L172.3 124.5 L172 124.1 L171.6 123.8M187 130 L184.5 129.5 L182.3 128.5 L180.3 127.1 L178.7 125.3 L177.6 123.3 L176.9 121.1 L176.7 118.9 L177 116.7 L177.7 114.7 L178.8 113 L180.2 111.5 L181.8 110.4 L183.6 109.7 L185.5 109.4 L187.3 109.5 L189.1 110 L190.6 110.8 L191.9 111.9 L192.9 113.2 L193.5 114.7 L193.8 116.2 L193.8 117.7 L193.5 119.1 L192.9 120.4 L192.1 121.4 L191.1 122.2 L190 122.8 L188.8 123.1 L187.7 123.2 L186.6 123 L185.6 122.5 L184.8 122 L184.2 121.2 L183.8 120.4 L183.5 119.6 L183.5 118.8 L183.7 118 L184 117.4 L184.4 116.8 L184.9 116.4M204 133 L202.3 132.7 L200.8 132 L199.5 131.1 L198.5 129.9 L197.7 128.5 L197.2 127.1 L197.1 125.6 L197.3 124.2 L197.8 122.8 L198.5 121.6 L199.5 120.7 L200.6 119.9 L201.8 119.5 L203 119.3 L204.2 119.3 L205.4 119.7 L206.4 120.2 L207.2 120.9 L207.9 121.8 L208.3 122.8 L208.6 123.8 L208.6 124.8 L208.4 125.7 L208 126.6 L207.4 127.3 L206.7 127.8 L206 128.2 L205.2 128.4 L204.5 128.4 L203.7 128.3 L203.1 128 L202.6 127.6 L202.1 127.2 L201.8 126.6 L201.7 126.1 L201.7 125.5 L201.8 125 L202 124.6 L202.2 124.2 L202.6 124M161 134 Q187 141 212 133 C222 130 228 123 238 127M250 47.2 L251.5 46.9 L252.8 46.3 L254 45.5 L255 44.4 L255.7 43.2 L256.1 41.9 L256.2 40.5 L256 39.2 L255.6 38 L254.9 37 L254.1 36.1 L253.1 35.4 L252 35 L250.9 34.8 L249.8 34.9 L248.8 35.2 L247.8 35.7 L247.1 36.4 L246.5 37.1 L246.1 38 L245.9 38.9 L245.9 39.8 L246.1 40.7 L246.4 41.4 L246.9 42.1 L247.5 42.5 L248.2 42.9 L248.9 43.1 L249.6 43.1 L250.2 43 L250.8 42.7 L251.3 42.4 L251.7 41.9 L251.9 41.5 L252.1 41 L252.1 40.5 L252 40 L251.8 39.6 L251.6 39.3 L251.3 39.1M263.6 44 L261.6 43.6 L259.8 42.8 L258.2 41.7 L257 40.3 L256 38.6 L255.5 36.9 L255.3 35.1 L255.6 33.4 L256.1 31.8 L257 30.4 L258.1 29.2 L259.5 28.3 L260.9 27.8 L262.4 27.5 L263.9 27.6 L265.2 28 L266.5 28.7 L267.5 29.5 L268.3 30.6 L268.8 31.7 L269.1 32.9 L269.1 34.1 L268.8 35.3 L268.3 36.3 L267.7 37.1 L266.9 37.8 L266 38.3 L265.1 38.5 L264.2 38.5 L263.3 38.4 L262.5 38 L261.9 37.6 L261.4 37 L261 36.3 L260.8 35.7 L260.8 35 L260.9 34.4 L261.2 33.9 L261.5 33.5 L261.9 33.2M277.2 46.4 L275.9 46.1 L274.7 45.6 L273.6 44.8 L272.8 43.9 L272.2 42.8 L271.8 41.7 L271.7 40.5 L271.8 39.3 L272.2 38.3 L272.8 37.3 L273.6 36.5 L274.4 35.9 L275.4 35.6 L276.4 35.4 L277.4 35.5 L278.3 35.7 L279.1 36.2 L279.8 36.8 L280.3 37.5 L280.7 38.2 L280.9 39 L280.9 39.8 L280.7 40.6 L280.4 41.3 L279.9 41.8 L279.4 42.3 L278.8 42.6 L278.2 42.7 L277.6 42.8 L277 42.6 L276.5 42.4 L276 42.1 L275.7 41.7 L275.5 41.3 L275.4 40.9 L275.3 40.4 L275.4 40 L275.6 39.7 L275.8 39.4 L276.1 39.2M242.8 47.2 Q263.6 52.8 283.6 46.4 C291.6 44 296.4 38.4 304.4 41.6' fill='none' stroke='%23d1b56a' stroke-opacity='0.09' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--orn-cloud-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Cpath d='M40 56.7 L42.4 56.2 L44.6 55.2 L46.5 53.9 L48.1 52.1 L49.2 50.2 L49.9 48 L50.1 45.9 L49.8 43.8 L49.1 41.8 L48 40.1 L46.6 38.7 L45 37.6 L43.3 36.9 L41.5 36.6 L39.7 36.7 L38 37.2 L36.5 38 L35.3 39.1 L34.3 40.3 L33.6 41.8 L33.3 43.2 L33.3 44.7 L33.6 46.1 L34.2 47.3 L35 48.3 L36 49.1 L37.1 49.7 L38.2 50 L39.3 50 L40.4 49.8 L41.3 49.4 L42.1 48.9 L42.7 48.2 L43.2 47.4 L43.4 46.6 L43.4 45.8 L43.3 45 L43 44.4 L42.6 43.9 L42.1 43.5M62.1 51.5 L58.9 50.9 L55.9 49.6 L53.4 47.7 L51.3 45.4 L49.8 42.8 L48.9 40 L48.7 37.1 L49 34.2 L50 31.6 L51.4 29.3 L53.2 27.4 L55.4 26 L57.7 25.1 L60.2 24.7 L62.5 24.9 L64.8 25.5 L66.8 26.6 L68.4 28 L69.7 29.7 L70.6 31.6 L71 33.5 L71 35.5 L70.6 37.3 L69.8 39 L68.7 40.3 L67.5 41.4 L66 42.2 L64.5 42.6 L63 42.6 L61.6 42.4 L60.3 41.8 L59.3 41 L58.5 40.1 L57.9 39.1 L57.6 38 L57.6 36.9 L57.8 35.9 L58.1 35.1 L58.7 34.4 L59.3 33.9M84.2 55.4 L82.1 55 L80.1 54.1 L78.4 52.9 L77 51.3 L76 49.6 L75.4 47.7 L75.3 45.8 L75.5 43.9 L76.1 42.2 L77.1 40.6 L78.3 39.4 L79.7 38.4 L81.3 37.8 L82.9 37.6 L84.5 37.6 L86 38.1 L87.3 38.8 L88.4 39.7 L89.3 40.9 L89.9 42.1 L90.1 43.4 L90.1 44.7 L89.9 45.9 L89.3 47 L88.6 48 L87.8 48.7 L86.8 49.2 L85.8 49.4 L84.8 49.5 L83.9 49.3 L83 48.9 L82.3 48.4 L81.8 47.8 L81.4 47.1 L81.2 46.4 L81.2 45.7 L81.3 45 L81.6 44.5 L81.9 44 L82.3 43.7M28.3 56.7 Q62.1 65.8 94.6 55.4 C107.6 51.5 115.4 42.4 128.4 47.6M170 134 L171.9 133.6 L173.6 132.9 L175 131.8 L176.2 130.5 L177.1 129 L177.6 127.3 L177.7 125.7 L177.5 124 L177 122.5 L176.2 121.2 L175.1 120.1 L173.9 119.3 L172.5 118.8 L171.1 118.6 L169.8 118.6 L168.5 119 L167.3 119.6 L166.3 120.4 L165.6 121.4 L165.1 122.5 L164.9 123.6 L164.9 124.8 L165.1 125.8 L165.5 126.8 L166.2 127.6 L166.9 128.2 L167.7 128.6 L168.6 128.8 L169.5 128.9 L170.3 128.7 L171 128.4 L171.6 128 L172.1 127.4 L172.4 126.8 L172.6 126.2 L172.6 125.6 L172.5 125 L172.3 124.5 L172 124.1 L171.6 123.8M187 130 L184.5 129.5 L182.3 128.5 L180.3 127.1 L178.7 125.3 L177.6 123.3 L176.9 121.1 L176.7 118.9 L177 116.7 L177.7 114.7 L178.8 113 L180.2 111.5 L181.8 110.4 L183.6 109.7 L185.5 109.4 L187.3 109.5 L189.1 110 L190.6 110.8 L191.9 111.9 L192.9 113.2 L193.5 114.7 L193.8 116.2 L193.8 117.7 L193.5 119.1 L192.9 120.4 L192.1 121.4 L191.1 122.2 L190 122.8 L188.8 123.1 L187.7 123.2 L186.6 123 L185.6 122.5 L184.8 122 L184.2 121.2 L183.8 120.4 L183.5 119.6 L183.5 118.8 L183.7 118 L184 117.4 L184.4 116.8 L184.9 116.4M204 133 L202.3 132.7 L200.8 132 L199.5 131.1 L198.5 129.9 L197.7 128.5 L197.2 127.1 L197.1 125.6 L197.3 124.2 L197.8 122.8 L198.5 121.6 L199.5 120.7 L200.6 119.9 L201.8 119.5 L203 119.3 L204.2 119.3 L205.4 119.7 L206.4 120.2 L207.2 120.9 L207.9 121.8 L208.3 122.8 L208.6 123.8 L208.6 124.8 L208.4 125.7 L208 126.6 L207.4 127.3 L206.7 127.8 L206 128.2 L205.2 128.4 L204.5 128.4 L203.7 128.3 L203.1 128 L202.6 127.6 L202.1 127.2 L201.8 126.6 L201.7 126.1 L201.7 125.5 L201.8 125 L202 124.6 L202.2 124.2 L202.6 124M161 134 Q187 141 212 133 C222 130 228 123 238 127M250 47.2 L251.5 46.9 L252.8 46.3 L254 45.5 L255 44.4 L255.7 43.2 L256.1 41.9 L256.2 40.5 L256 39.2 L255.6 38 L254.9 37 L254.1 36.1 L253.1 35.4 L252 35 L250.9 34.8 L249.8 34.9 L248.8 35.2 L247.8 35.7 L247.1 36.4 L246.5 37.1 L246.1 38 L245.9 38.9 L245.9 39.8 L246.1 40.7 L246.4 41.4 L246.9 42.1 L247.5 42.5 L248.2 42.9 L248.9 43.1 L249.6 43.1 L250.2 43 L250.8 42.7 L251.3 42.4 L251.7 41.9 L251.9 41.5 L252.1 41 L252.1 40.5 L252 40 L251.8 39.6 L251.6 39.3 L251.3 39.1M263.6 44 L261.6 43.6 L259.8 42.8 L258.2 41.7 L257 40.3 L256 38.6 L255.5 36.9 L255.3 35.1 L255.6 33.4 L256.1 31.8 L257 30.4 L258.1 29.2 L259.5 28.3 L260.9 27.8 L262.4 27.5 L263.9 27.6 L265.2 28 L266.5 28.7 L267.5 29.5 L268.3 30.6 L268.8 31.7 L269.1 32.9 L269.1 34.1 L268.8 35.3 L268.3 36.3 L267.7 37.1 L266.9 37.8 L266 38.3 L265.1 38.5 L264.2 38.5 L263.3 38.4 L262.5 38 L261.9 37.6 L261.4 37 L261 36.3 L260.8 35.7 L260.8 35 L260.9 34.4 L261.2 33.9 L261.5 33.5 L261.9 33.2M277.2 46.4 L275.9 46.1 L274.7 45.6 L273.6 44.8 L272.8 43.9 L272.2 42.8 L271.8 41.7 L271.7 40.5 L271.8 39.3 L272.2 38.3 L272.8 37.3 L273.6 36.5 L274.4 35.9 L275.4 35.6 L276.4 35.4 L277.4 35.5 L278.3 35.7 L279.1 36.2 L279.8 36.8 L280.3 37.5 L280.7 38.2 L280.9 39 L280.9 39.8 L280.7 40.6 L280.4 41.3 L279.9 41.8 L279.4 42.3 L278.8 42.6 L278.2 42.7 L277.6 42.8 L277 42.6 L276.5 42.4 L276 42.1 L275.7 41.7 L275.5 41.3 L275.4 40.9 L275.3 40.4 L275.4 40 L275.6 39.7 L275.8 39.4 L276.1 39.2M242.8 47.2 Q263.6 52.8 283.6 46.4 C291.6 44 296.4 38.4 304.4 41.6' fill='none' stroke='%23b8933f' stroke-opacity='0.1' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--orn-lotus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Cg fill='none' stroke='%23b8933f' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 4c5 6 6 14 0 25-6-11-5-19 0-25z'/%3E%3Cpath d='M32 29c-3-8-10-13-19-13 1 8 9 13 19 13z'/%3E%3Cpath d='M32 29c3-8 10-13 19-13-1 8-9 13-19 13z'/%3E%3Cpath d='M32 29c-8-3-17-2-25 3 8 3 17 2 25-3z'/%3E%3Cpath d='M32 29c8-3 17-2 25 3-8 3-17 2-25-3z'/%3E%3Cpath d='M14 33h36'/%3E%3C/g%3E%3C/svg%3E");
--orn-chrysanthemum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 540'%3E%3Cg fill='none' stroke='%23d1b56a' stroke-opacity='0.5' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M200 140Q214 89 200 38Q186 89 200 140M207.2 140.9Q233 94.7 231.6 41.8Q205.8 88 207.2 140.9M213.9 143.4Q250 104.8 261.3 53.1Q225.2 91.8 213.9 143.4M219.9 147.5Q264.2 118.7 287.5 71.2Q243.2 100.1 219.9 147.5M224.7 153Q274.6 135.5 308.6 95Q258.7 112.5 224.7 153M228.1 159.4Q280.7 154.4 323.4 123.2Q270.8 128.2 228.1 159.4M229.8 166.4Q282.1 174.1 331 154.1Q278.7 146.3 229.8 166.4M229.8 173.6Q278.7 193.7 331 185.9Q282.1 165.9 229.8 173.6M228.1 180.6Q270.8 211.8 323.4 216.8Q280.7 185.6 228.1 180.6M224.7 187Q258.7 227.5 308.6 245Q274.6 204.5 224.7 187M219.9 192.5Q243.2 239.9 287.5 268.8Q264.2 221.3 219.9 192.5M213.9 196.6Q225.2 248.2 261.3 286.9Q250 235.2 213.9 196.6M207.2 199.1Q205.8 252 231.6 298.2Q233 245.3 207.2 199.1M200 200Q186 251 200 302Q214 251 200 200M192.8 199.1Q167 245.3 168.4 298.2Q194.2 252 192.8 199.1M186.1 196.6Q150 235.2 138.7 286.9Q174.8 248.2 186.1 196.6M180.1 192.5Q135.8 221.3 112.5 268.8Q156.8 239.9 180.1 192.5M175.3 187Q125.4 204.5 91.4 245Q141.3 227.5 175.3 187M171.9 180.6Q119.3 185.6 76.6 216.8Q129.2 211.8 171.9 180.6M170.2 173.6Q117.9 165.9 69 185.9Q121.3 193.7 170.2 173.6M170.2 166.4Q121.3 146.3 69 154.1Q117.9 174.1 170.2 166.4M171.9 159.4Q129.2 128.2 76.6 123.2Q119.3 154.4 171.9 159.4M175.3 153Q141.3 112.5 91.4 95Q125.4 135.5 175.3 153M180.1 147.5Q156.8 100.1 112.5 71.2Q135.8 118.7 180.1 147.5M186.1 143.4Q174.8 91.8 138.7 53.1Q150 104.8 186.1 143.4M192.8 140.9Q194.2 88 168.4 41.8Q167 94.7 192.8 140.9M202.3 148.1Q219.2 111.7 210.2 72.5Q193.3 109 202.3 148.1M208.9 149.9Q236.3 120.5 239.9 80.5Q212.5 109.9 208.9 149.9M214.7 153.7Q249.8 134.1 265.6 97.2Q230.5 116.7 214.7 153.7M219.1 159Q258.5 151.3 284.9 121Q245.5 128.7 219.1 159M221.5 165.4Q261.4 170.2 295.9 149.6Q256 144.8 221.5 165.4M221.9 172.3Q258.3 189.2 297.5 180.2Q261 163.3 221.9 172.3M220.1 178.9Q249.5 206.3 289.5 209.9Q260.1 182.5 220.1 178.9M216.3 184.7Q235.9 219.8 272.8 235.6Q253.3 200.5 216.3 184.7M211 189.1Q218.7 228.5 249 254.9Q241.3 215.5 211 189.1M204.6 191.5Q199.8 231.4 220.4 265.9Q225.2 226 204.6 191.5M197.7 191.9Q180.8 228.3 189.8 267.5Q206.7 231 197.7 191.9M191.1 190.1Q163.7 219.5 160.1 259.5Q187.5 230.1 191.1 190.1M185.3 186.3Q150.2 205.9 134.4 242.8Q169.5 223.3 185.3 186.3M180.9 181Q141.5 188.7 115.1 219Q154.5 211.3 180.9 181M178.5 174.6Q138.6 169.8 104.1 190.4Q144 195.2 178.5 174.6M178.1 167.7Q141.7 150.8 102.5 159.8Q139 176.7 178.1 167.7M179.9 161.1Q150.5 133.7 110.5 130.1Q139.9 157.5 179.9 161.1M183.7 155.3Q164.1 120.2 127.2 104.4Q146.7 139.5 183.7 155.3M189 150.9Q181.3 111.5 151 85.1Q158.7 124.5 189 150.9M195.4 148.5Q200.2 108.6 179.6 74.1Q174.8 114 195.4 148.5M200.7 156Q213 131.6 203.3 106.1Q191.1 130.5 200.7 156M206.7 157.7Q228.4 141.1 230.7 113.9Q209.1 130.5 206.7 157.7M211.4 161.9Q238.1 156.3 252.1 132.8Q225.3 138.4 211.4 161.9M213.8 167.6Q240.3 174.2 263.1 159Q236.5 152.5 213.8 167.6M213.5 173.8Q234.5 191.2 261.6 187.5Q240.5 170.1 213.5 173.8M210.5 179.3Q221.9 204.1 247.9 212.5Q236.5 187.6 210.5 179.3M205.4 182.9Q204.9 210.2 224.7 229Q225.2 201.7 205.4 182.9M199.3 184Q187 208.4 196.7 233.9Q208.9 209.5 199.3 184M193.3 182.3Q171.6 198.9 169.3 226.1Q190.9 209.5 193.3 182.3M188.6 178.1Q161.9 183.7 147.9 207.2Q174.7 201.6 188.6 178.1M186.2 172.4Q159.7 165.8 136.9 181Q163.5 187.5 186.2 172.4M186.5 166.2Q165.5 148.8 138.4 152.5Q159.5 169.9 186.5 166.2M189.5 160.7Q178.1 135.9 152.1 127.5Q163.5 152.4 189.5 160.7M194.6 157.1Q195.1 129.8 175.3 111Q174.8 138.3 194.6 157.1M200.9 165.1Q211.1 153.2 205.6 138.5Q195.3 150.4 200.9 165.1M203.8 166.8Q219.3 164.2 224.5 149.4Q209 152 203.8 166.8M205 170Q218.5 178 232 170Q218.5 162 205 170M203.8 173.2Q209 188 224.5 190.6Q219.3 175.8 203.8 173.2M200.9 174.9Q195.3 189.6 205.6 201.5Q211.1 186.8 200.9 174.9M197.5 174.3Q183.8 182 184 197.7Q197.7 190 197.5 174.3M195.3 171.7Q179.9 168.8 169.9 180.9Q185.4 183.8 195.3 171.7M195.3 168.3Q185.4 156.2 169.9 159.1Q179.9 171.2 195.3 168.3M197.5 165.7Q197.7 150 184 142.3Q183.8 158 197.5 165.7'/%3E%3Cpath d='M200 300C196 360 206 420 198 520M201 380C170 360 140 368 118 392C146 404 176 398 201 380ZM199 440C232 418 262 424 284 446C256 460 224 456 199 440ZM200 380C185 377 160 380 140 388M199 440C215 437 240 440 262 446'/%3E%3Ccircle cx='200' cy='170' r='5'/%3E%3C/g%3E%3C/svg%3E");
--orn-chrysanthemum-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 540'%3E%3Cg fill='none' stroke='%23b8933f' stroke-opacity='0.35' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M200 140Q214 89 200 38Q186 89 200 140M207.2 140.9Q233 94.7 231.6 41.8Q205.8 88 207.2 140.9M213.9 143.4Q250 104.8 261.3 53.1Q225.2 91.8 213.9 143.4M219.9 147.5Q264.2 118.7 287.5 71.2Q243.2 100.1 219.9 147.5M224.7 153Q274.6 135.5 308.6 95Q258.7 112.5 224.7 153M228.1 159.4Q280.7 154.4 323.4 123.2Q270.8 128.2 228.1 159.4M229.8 166.4Q282.1 174.1 331 154.1Q278.7 146.3 229.8 166.4M229.8 173.6Q278.7 193.7 331 185.9Q282.1 165.9 229.8 173.6M228.1 180.6Q270.8 211.8 323.4 216.8Q280.7 185.6 228.1 180.6M224.7 187Q258.7 227.5 308.6 245Q274.6 204.5 224.7 187M219.9 192.5Q243.2 239.9 287.5 268.8Q264.2 221.3 219.9 192.5M213.9 196.6Q225.2 248.2 261.3 286.9Q250 235.2 213.9 196.6M207.2 199.1Q205.8 252 231.6 298.2Q233 245.3 207.2 199.1M200 200Q186 251 200 302Q214 251 200 200M192.8 199.1Q167 245.3 168.4 298.2Q194.2 252 192.8 199.1M186.1 196.6Q150 235.2 138.7 286.9Q174.8 248.2 186.1 196.6M180.1 192.5Q135.8 221.3 112.5 268.8Q156.8 239.9 180.1 192.5M175.3 187Q125.4 204.5 91.4 245Q141.3 227.5 175.3 187M171.9 180.6Q119.3 185.6 76.6 216.8Q129.2 211.8 171.9 180.6M170.2 173.6Q117.9 165.9 69 185.9Q121.3 193.7 170.2 173.6M170.2 166.4Q121.3 146.3 69 154.1Q117.9 174.1 170.2 166.4M171.9 159.4Q129.2 128.2 76.6 123.2Q119.3 154.4 171.9 159.4M175.3 153Q141.3 112.5 91.4 95Q125.4 135.5 175.3 153M180.1 147.5Q156.8 100.1 112.5 71.2Q135.8 118.7 180.1 147.5M186.1 143.4Q174.8 91.8 138.7 53.1Q150 104.8 186.1 143.4M192.8 140.9Q194.2 88 168.4 41.8Q167 94.7 192.8 140.9M202.3 148.1Q219.2 111.7 210.2 72.5Q193.3 109 202.3 148.1M208.9 149.9Q236.3 120.5 239.9 80.5Q212.5 109.9 208.9 149.9M214.7 153.7Q249.8 134.1 265.6 97.2Q230.5 116.7 214.7 153.7M219.1 159Q258.5 151.3 284.9 121Q245.5 128.7 219.1 159M221.5 165.4Q261.4 170.2 295.9 149.6Q256 144.8 221.5 165.4M221.9 172.3Q258.3 189.2 297.5 180.2Q261 163.3 221.9 172.3M220.1 178.9Q249.5 206.3 289.5 209.9Q260.1 182.5 220.1 178.9M216.3 184.7Q235.9 219.8 272.8 235.6Q253.3 200.5 216.3 184.7M211 189.1Q218.7 228.5 249 254.9Q241.3 215.5 211 189.1M204.6 191.5Q199.8 231.4 220.4 265.9Q225.2 226 204.6 191.5M197.7 191.9Q180.8 228.3 189.8 267.5Q206.7 231 197.7 191.9M191.1 190.1Q163.7 219.5 160.1 259.5Q187.5 230.1 191.1 190.1M185.3 186.3Q150.2 205.9 134.4 242.8Q169.5 223.3 185.3 186.3M180.9 181Q141.5 188.7 115.1 219Q154.5 211.3 180.9 181M178.5 174.6Q138.6 169.8 104.1 190.4Q144 195.2 178.5 174.6M178.1 167.7Q141.7 150.8 102.5 159.8Q139 176.7 178.1 167.7M179.9 161.1Q150.5 133.7 110.5 130.1Q139.9 157.5 179.9 161.1M183.7 155.3Q164.1 120.2 127.2 104.4Q146.7 139.5 183.7 155.3M189 150.9Q181.3 111.5 151 85.1Q158.7 124.5 189 150.9M195.4 148.5Q200.2 108.6 179.6 74.1Q174.8 114 195.4 148.5M200.7 156Q213 131.6 203.3 106.1Q191.1 130.5 200.7 156M206.7 157.7Q228.4 141.1 230.7 113.9Q209.1 130.5 206.7 157.7M211.4 161.9Q238.1 156.3 252.1 132.8Q225.3 138.4 211.4 161.9M213.8 167.6Q240.3 174.2 263.1 159Q236.5 152.5 213.8 167.6M213.5 173.8Q234.5 191.2 261.6 187.5Q240.5 170.1 213.5 173.8M210.5 179.3Q221.9 204.1 247.9 212.5Q236.5 187.6 210.5 179.3M205.4 182.9Q204.9 210.2 224.7 229Q225.2 201.7 205.4 182.9M199.3 184Q187 208.4 196.7 233.9Q208.9 209.5 199.3 184M193.3 182.3Q171.6 198.9 169.3 226.1Q190.9 209.5 193.3 182.3M188.6 178.1Q161.9 183.7 147.9 207.2Q174.7 201.6 188.6 178.1M186.2 172.4Q159.7 165.8 136.9 181Q163.5 187.5 186.2 172.4M186.5 166.2Q165.5 148.8 138.4 152.5Q159.5 169.9 186.5 166.2M189.5 160.7Q178.1 135.9 152.1 127.5Q163.5 152.4 189.5 160.7M194.6 157.1Q195.1 129.8 175.3 111Q174.8 138.3 194.6 157.1M200.9 165.1Q211.1 153.2 205.6 138.5Q195.3 150.4 200.9 165.1M203.8 166.8Q219.3 164.2 224.5 149.4Q209 152 203.8 166.8M205 170Q218.5 178 232 170Q218.5 162 205 170M203.8 173.2Q209 188 224.5 190.6Q219.3 175.8 203.8 173.2M200.9 174.9Q195.3 189.6 205.6 201.5Q211.1 186.8 200.9 174.9M197.5 174.3Q183.8 182 184 197.7Q197.7 190 197.5 174.3M195.3 171.7Q179.9 168.8 169.9 180.9Q185.4 183.8 195.3 171.7M195.3 168.3Q185.4 156.2 169.9 159.1Q179.9 171.2 195.3 168.3M197.5 165.7Q197.7 150 184 142.3Q183.8 158 197.5 165.7'/%3E%3Cpath d='M200 300C196 360 206 420 198 520M201 380C170 360 140 368 118 392C146 404 176 398 201 380ZM199 440C232 418 262 424 284 446C256 460 224 456 199 440ZM200 380C185 377 160 380 140 388M199 440C215 437 240 440 262 446'/%3E%3Ccircle cx='200' cy='170' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.8;
color: var(--ink);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--gold-bright); color: var(--black); }
/* Hidden SVG that holds the logo definition */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Metallic gold text (brand name, big numbers) */
.gold-text,
.logo-text,
.stat-number,
.cta .phone-big {
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.2;
color: var(--black);
margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.55rem; }
h4 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 24px;
}
.section { padding: 112px 0; }
.section--cream { background: var(--cream); }
.section--dark { background: var(--black); color: var(--on-dark); border-top: 1px solid rgba(209, 181, 106, 0.3); border-bottom: 1px solid rgba(209, 181, 106, 0.3); }
.section--dark h2,
.section--dark h3 { color: var(--gold-soft); }
.eyebrow {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 12px;
}
.section-head {
max-width: 680px;
margin: 0 auto 56px;
text-align: center;
}
.section-head p { color: var(--ink-soft); }
.section--dark .section-head p { color: var(--on-dark-soft); }
.hero .eyebrow,
.page-banner .eyebrow,
.section--dark .eyebrow { color: var(--gold-bright); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
border: 1.5px solid transparent;
cursor: pointer;
transition: background 0.25s, background-position 0.5s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--gold {
background: var(--gold-grad);
background-size: 220% 100%;
color: var(--black);
box-shadow: 0 6px 18px rgba(138, 106, 34, 0.25);
}
.btn--gold:hover { background-position: 100% 0; box-shadow: 0 8px 24px rgba(138, 106, 34, 0.35); }
.btn--outline { border-color: var(--gold-bright); color: var(--gold-soft); }
.btn--outline:hover { background: var(--gold-bright); color: var(--black); }
.btn--dark { background: var(--black); color: var(--gold-soft); border-color: var(--black); }
.btn--dark:hover { background: var(--black-deep); border-color: var(--gold-bright); }
/* ---------- Top bar + header ---------- */
.topbar {
background: var(--black-deep);
color: var(--on-dark-soft);
font-size: 0.85rem;
border-bottom: 1px solid rgba(209, 181, 106, 0.2);
}
.topbar .container {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
}
.topbar a { color: var(--gold-bright); font-weight: 700; }
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(11, 10, 8, 0.97);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(209, 181, 106, 0.4);
transition: box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 82px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
color: var(--gold-soft);
}
.logo:hover { text-decoration: none; }
.logo { min-width: 0; }
.logo-text,
.logo-text small { white-space: nowrap; } /* company name never breaks onto two lines */
.header-actions { flex-shrink: 0; }
.logo-mark {
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(209, 181, 106, 0.35), 0 0 18px rgba(209, 181, 106, 0.25);
}
/* Brand name in brush script (like the 展 in the logo) with the English name in italics */
.logo-text {
font-family: var(--font-brand);
font-size: 2rem;
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
}
.logo-text small {
display: block;
font-family: "Cormorant Garamond", Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.03em;
margin-top: 3px;
}
.nav ul {
list-style: none;
display: flex;
gap: 6px;
margin: 0;
padding: 0;
}
.nav a {
display: block;
padding: 8px 11px;
white-space: nowrap;
color: #ece4cf;
font-size: 0.95rem;
font-weight: 700;
border-radius: 6px;
position: relative;
}
.nav a:hover { text-decoration: none; color: var(--gold-bright); }
.nav a.active { color: var(--gold-bright); }
.nav a.active::after {
content: "";
position: absolute;
left: 11px;
right: 11px;
bottom: 2px;
height: 2px;
background: var(--gold-grad);
}
.nav { margin-left: auto; padding-left: 20px; }
.header-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: 18px;
}
/* 中文 / EN / BM language switch */
.lang-switch {
display: flex;
border: 1.5px solid var(--gold-bright);
border-radius: 999px;
overflow: hidden;
}
.lang-switch button {
padding: 6px 11px;
border: 0;
background: transparent;
color: var(--gold-soft);
font-family: "Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap; /* keep 中文 on one line */
cursor: pointer;
transition: background 0.25s, color 0.25s;
}
.lang-switch button + button { border-left: 1px solid rgba(209, 181, 106, 0.45); }
.lang-switch button:hover { background: rgba(209, 181, 106, 0.14); }
.lang-switch button[aria-pressed="true"] { background: var(--gold-grad); color: var(--black); }
/* the top-bar copy of the switch is only used on small phones */
.lang-switch--top { display: none; }
.lang-switch button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -3px; }
.nav-toggle {
display: none;
background: none;
border: 0;
padding: 8px;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 26px;
height: 2px;
background: var(--gold-bright);
margin: 6px 0;
transition: transform 0.3s, opacity 0.3s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* ---------- Hero (home) ---------- */
.hero {
position: relative;
min-height: 640px;
display: flex;
align-items: center;
color: var(--white);
background:
radial-gradient(circle at 76% 50%, rgba(209, 181, 106, 0.22), transparent 42%),
linear-gradient(135deg, #050403 0%, #12100b 55%, #1d1810 100%);
overflow: hidden;
}
.hero::after {
/* soft fade into the page */
content: "";
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
}
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 660px; }
.hero h1 { color: var(--white); }
.hero p { font-size: 1.15rem; color: var(--on-dark); margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Large logo medallion on the home hero */
.hero-art {
position: absolute;
right: 7%;
top: 50%;
transform: translateY(-50%);
width: min(34vw, 400px);
height: auto;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(209, 181, 106, 0.45), 0 0 80px rgba(209, 181, 106, 0.25);
z-index: 1;
}
/* Inner page banner */
.page-banner {
padding: 110px 0 90px;
text-align: center;
color: var(--white);
background:
radial-gradient(ellipse at 50% 0%, rgba(209, 181, 106, 0.22), transparent 60%),
linear-gradient(135deg, #050403 0%, #16130d 100%);
border-bottom: 1px solid rgba(209, 181, 106, 0.4);
}
.page-banner h1 { color: var(--white); margin-bottom: 12px; }
.page-banner p { max-width: 620px; margin: 0 auto; color: var(--on-dark); font-size: 1.1rem; }
.breadcrumb { font-size: 0.85rem; color: var(--gold-soft); margin-bottom: 14px; letter-spacing: 0.08em; }
.breadcrumb a { color: var(--gold-soft); }
/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 34px 30px;
border-top: 3px solid var(--gold-bright);
box-shadow: var(--shadow);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card p { color: var(--ink-soft); margin-bottom: 0; }
.icon {
width: 58px;
height: 58px;
border-radius: 50%;
display: grid;
place-items: center;
/* gold-ringed black badge, echoing the logo medallion */
background: radial-gradient(circle at 35% 30%, #2a2418, var(--black-deep) 70%);
color: var(--gold-bright);
border: 2px solid var(--gold-bright);
box-shadow: 0 0 0 4px rgba(209, 181, 106, 0.15);
margin-bottom: 20px;
}
.icon svg { width: 28px; height: 28px; }
.card-link {
display: inline-block;
margin-top: 16px;
font-weight: 700;
font-size: 0.92rem;
}
/* Decorative "photo" panels. Replace with real photos by
swapping the div for 
*/
.photo {
position: relative;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
color: var(--gold-bright);
border: 1px solid rgba(209, 181, 106, 0.5);
box-shadow: var(--shadow-lg);
}
.photo svg { width: 34%; height: auto; }
/* black + gold placeholder panels (dark ones and metallic-gold ones) */
.photo--chapel,
.photo--hall,
.photo--care,
.photo--parking,
.photo--columbarium {
background:
radial-gradient(circle at 50% 42%, rgba(209, 181, 106, 0.3), transparent 58%),
linear-gradient(160deg, #1f1a11, var(--black-deep));
}
.photo--hall { background-position: 0 0, 0 0; }
.photo--garden,
.photo--lounge,
.photo--floral {
background: var(--gold-grad);
color: var(--black);
}
/* A real photo has been added (see data-img in the HTML and js/main.js) */
/* the doubled class outranks the panels' own background rules, so photos always fill their frame */
.has-img.has-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.photo.has-img > svg,
.staff-photo.has-img > .avatar { display: none; }
/* every team card gets the same 4:3 picture area, photo or not */
.staff-card .staff-photo { height: auto; aspect-ratio: 4 / 3; }
.leader .staff-photo.has-img { height: 300px; }
/* Team page: founder photo and the team-at-work gallery */
.founder .photo svg { width: 28%; }
.team-gallery { margin-top: 32px; gap: 16px; }
.team-gallery .photo { box-shadow: var(--shadow); }
/* Services: LED wreath gallery (3 across on computers, 2 on phones) */
.wreath-gallery { gap: 16px; }
.wreath-gallery .photo { box-shadow: var(--shadow); }
@media (max-width: 768px) {
.grid.wreath-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Founder and wife: one profile card each */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 980px; margin: 0 auto; }
.person {
overflow: hidden;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.person .photo { aspect-ratio: 4 / 5; border: 0; border-radius: 0; box-shadow: none; }
.person .photo::after { display: none; }
.person-body { padding: 24px 28px 28px; }
.person-role { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 6px; }
.person-body h3 { margin-bottom: 2px; }
.person-alt { font-family: "Cormorant Garamond", var(--font-serif); font-size: 1.15rem; color: var(--ink-soft); letter-spacing: 0.04em; margin-bottom: 12px; }
/* the second name line shows the other script: English under Chinese, Chinese under English/Malay */
html[lang="zh-CN"] .person-alt .alt-zh,
html:not([lang="zh-CN"]) .person-alt .alt-en { display: none; }
/* whole-team photo, full width so everyone is in the picture */
.team-photo { aspect-ratio: 3 / 2; max-width: 1040px; margin: 0 auto; }
.team-quote {
max-width: 760px;
margin: 28px auto 0;
text-align: center;
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--ink);
}
@media (max-width: 768px) {
.people { grid-template-columns: 1fr; gap: 20px; }
.person .photo { aspect-ratio: 1 / 1; }
.person-body { padding: 18px 18px 22px; }
.team-quote { font-size: 1.1rem; margin-top: 18px; }
}
@media (max-width: 768px) {
.grid.team-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.team-gallery .photo-tag { left: 8px; bottom: 8px; padding: 3px 7px; font-size: 0.72rem; letter-spacing: 0.06em; }
}
/* Official logo image, when images/logo.png is added */
img.logo-mark,
img.hero-art { object-fit: cover; }
.photo-tag {
position: absolute;
left: 16px;
bottom: 14px;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
background: rgba(5, 4, 3, 0.72);
color: var(--gold-soft);
border: 1px solid rgba(209, 181, 106, 0.45);
padding: 4px 10px;
border-radius: 4px;
}
/* ---------- Stats ---------- */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.stat-number {
font-family: var(--font-serif);
font-size: 3.2rem;
font-weight: 600;
line-height: 1.1;
}
.stat-label {
margin-top: 10px;
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-dark-soft);
}
/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; }
.checklist li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
}
.checklist li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 16px;
height: 9px;
border-left: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
transform: rotate(-45deg);
}
/* ---------- CTA band ---------- */
.cta {
background:
radial-gradient(ellipse at 50% 120%, rgba(209, 181, 106, 0.28), transparent 60%),
var(--black);
color: var(--on-dark);
border-top: 1px solid rgba(209, 181, 106, 0.4);
text-align: center;
padding: 80px 0;
}
.cta h2 { color: var(--gold-soft); }
.cta p { max-width: 600px; margin: 0 auto 28px; }
.cta .phone-big {
display: block;
font-family: var(--font-serif);
font-size: clamp(2.2rem, 4.4vw, 3.2rem);
font-weight: 600;
margin-bottom: 26px;
}
/* ---------- About: values & timeline ---------- */
.value-card { text-align: center; }
.value-card .icon { margin-left: auto; margin-right: auto; }
.timeline {
position: relative;
max-width: 820px;
margin: 0 auto;
padding-left: 40px;
}
.timeline::before {
content: "";
position: absolute;
left: 11px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--gold-soft);
}
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
content: "";
position: absolute;
left: -36px;
top: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ivory);
border: 3px solid var(--gold);
}
.timeline-year {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 600;
color: var(--gold);
line-height: 1;
}
.timeline-item h3 { margin: 6px 0 6px; font-size: 1.25rem; }
.timeline-item p { color: var(--ink-soft); margin: 0; }
.timeline-item .timeline-source { margin-top: 4px; font-size: 0.82rem; }
.timeline-item p + p:not(.timeline-source) { margin-top: 8px; }
/* the closing "today" entry gets a little more emphasis */
.timeline-item:last-child h3 { font-size: 1.45rem; }
.timeline-item:last-child p { color: var(--ink); }
.timeline-source a { color: var(--gold); }
.badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.badge {
border: 1px solid var(--gold-bright);
background: var(--black);
padding: 14px 22px;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
color: var(--gold-soft);
}
/* ---------- Staff ---------- */
.staff-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.staff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.staff-photo {
height: 190px;
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 50%, rgba(209, 181, 106, 0.28), transparent 62%),
linear-gradient(160deg, #1f1a11, var(--black-deep));
}
.avatar {
width: 112px;
height: 112px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--font-serif);
font-size: 2.4rem;
font-weight: 600;
color: var(--black);
background: radial-gradient(circle at 36% 30%, #fbf4c8, #e2c77f 35%, #b8933f 70%, #7d5d1c);
border: 3px solid var(--black-deep);
box-shadow: 0 0 0 2px var(--gold-bright), 0 0 30px rgba(209, 181, 106, 0.3);
}
.avatar svg { width: 46%; height: auto; }
.staff-body { padding: 24px 24px 28px; }
.staff-body h3 { margin-bottom: 2px; font-size: 1.45rem; }
.staff-role {
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 14px;
}
.staff-body p { color: var(--ink-soft); font-size: 0.95rem; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tag {
font-size: 0.75rem;
background: var(--cream);
color: var(--ink-soft);
padding: 3px 10px;
border-radius: 999px;
}
.leader {
display: grid;
grid-template-columns: 300px 1fr;
gap: 48px;
align-items: center;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 44px;
box-shadow: var(--shadow);
}
.leader .staff-photo { height: 300px; border-radius: var(--radius); }
.leader .avatar { width: 170px; height: 170px; font-size: 3.6rem; }
.leader blockquote {
margin: 20px 0 0;
padding-left: 20px;
border-left: 3px solid var(--gold);
font-family: var(--font-serif);
font-style: italic;
font-size: 1.25rem;
color: var(--black);
}
/* ---------- Services ---------- */
.service-card h3 { font-size: 1.45rem; }
.service-card ul {
margin: 14px 0 0;
padding-left: 18px;
color: var(--ink-soft);
font-size: 0.93rem;
}
.package {
position: relative;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px 32px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.package--featured {
border: 2px solid var(--gold);
transform: translateY(-10px);
}
.package-ribbon {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--gold-grad);
color: var(--black);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 5px 16px;
border-radius: 999px;
white-space: nowrap;
}
.package h3 { text-align: center; margin-bottom: 4px; }
/* Optional extras list (services page) */
.extras {
list-style: none;
margin: 0 0 1.2em;
padding: 0;
flex: 1;
font-size: 0.95rem;
color: var(--ink-soft);
}
.extras li {
position: relative;
padding: 7px 0 7px 22px;
border-bottom: 1px dashed var(--line);
}
.extras li::before {
content: "+";
position: absolute;
left: 2px;
color: var(--gold);
font-weight: 700;
}
.package .note {
font-size: 0.88rem;
color: var(--ink-soft);
background: var(--cream);
border-radius: 6px;
padding: 10px 14px;
margin: 0;
}
.address {
font-size: 0.95rem;
color: var(--ink-soft);
border-left: 3px solid var(--gold);
padding-left: 14px;
}
.package-sub { text-align: center; color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 24px; }
.package .checklist { flex: 1; font-size: 0.95rem; }
.package .btn { justify-content: center; }
.steps { counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid var(--gold-bright);
color: var(--gold-bright);
display: grid;
place-items: center;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 18px;
}
.step p { color: var(--on-dark-soft); font-size: 0.95rem; }
/* FAQ (native accordion) */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
background: var(--white);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 12px;
overflow: hidden;
}
.faq summary {
cursor: pointer;
list-style: none;
padding: 20px 56px 20px 24px;
font-weight: 700;
position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 400;
color: var(--gold);
transition: transform 0.3s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 20px; margin: 0; color: var(--ink-soft); }
/* ---------- Facilities ---------- */
.facility {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
margin-bottom: 88px;
}
.facility:last-child { margin-bottom: 0; }
.facility:nth-child(even) .photo { order: 2; }
.facility-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 20px;
}
.facility-meta span {
font-size: 0.82rem;
font-weight: 700;
background: var(--cream);
color: var(--black);
padding: 6px 14px;
border-radius: 999px;
}
.amenity { text-align: center; padding: 28px 18px; }
.amenity .icon { margin: 0 auto 14px; }
.amenity h3 { font-size: 1.15rem; margin-bottom: 4px; }
.amenity p { font-size: 0.9rem; }
/* ---------- Contact ---------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 48px;
align-items: start;
}
.contact-item {
display: flex;
gap: 18px;
margin-bottom: 28px;
}
.contact-item .icon { margin: 0; flex-shrink: 0; width: 50px; height: 50px; }
.contact-item .icon svg { width: 22px; height: 22px; }
.contact-item h3 { margin-bottom: 2px; font-size: 1.2rem; }
.contact-item p { margin: 0; color: var(--ink-soft); }
.map {
margin-top: 8px;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--cream);
border: 1px solid var(--gold-bright);
}
.map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.map-link { margin: 10px 0 0; font-weight: 700; font-size: 0.92rem; }
.hotline-box {
background: var(--black);
color: var(--on-dark);
border: 1px solid var(--gold-bright);
border-radius: var(--radius);
padding: 28px;
margin-top: 28px;
}
.hotline-box h3 { color: var(--gold-soft); margin-bottom: 4px; font-size: 1.25rem; }
.hotline-box a {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--gold-bright);
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--black-deep);
color: var(--on-dark-soft);
padding: 72px 0 0;
border-top: 1px solid rgba(209, 181, 106, 0.4);
font-size: 0.93rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 40px;
}
.site-footer h3 {
color: var(--gold-soft);
font-size: 1.2rem;
margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--on-dark-soft); }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer .logo { margin-bottom: 16px; }
/* sister company logo (成峰 Molding Peak Sdn Bhd): transparent PNG with black lettering, so it sits on an ivory tile */
.sister-co {
display: inline-block;
padding: 10px 14px;
background: var(--ivory);
border: 1px solid rgba(209, 181, 106, 0.55);
border-radius: 8px;
}
.sister-co img { display: block; width: 150px; height: auto; }
.site-footer .logo-mark { width: 64px; height: 64px; }
/* Facebook / Instagram / WhatsApp icons */
.social-title {
margin: 22px 0 10px;
font-size: 0.78rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-bright);
}
.social-links { display: flex; gap: 12px; }
.social-links a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--gold-bright);
border: 1.5px solid var(--gold-bright);
background: radial-gradient(circle at 35% 30%, #2a2418, var(--black-deep) 70%);
transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.social-links a:hover,
.social-links a:focus-visible {
color: var(--black);
background: var(--gold-grad);
transform: translateY(-3px);
box-shadow: 0 0 22px rgba(209, 181, 106, 0.45);
text-decoration: none;
}
.social-links svg { width: 20px; height: 20px; }
.footer-bottom {
margin-top: 56px;
border-top: 1px solid rgba(209, 181, 106, 0.2);
padding: 22px 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 0.85rem;
}
/* ==========================================================
Atmosphere — calm, ceremonial details suited to a funeral home
(auspicious clouds 祥云, lotus 莲花, white chrysanthemum 菊花,
soft candle light). All motion is slow and turns off for
visitors who prefer reduced motion.
========================================================== */
h1, h2 { font-weight: 500; }
/* Faint auspicious-cloud pattern on cream and dark areas */
.section--cream { background: var(--orn-cloud-light), var(--cream); }
.section--dark {
background:
var(--orn-cloud-dark),
radial-gradient(ellipse at 50% 0%, rgba(209, 181, 106, 0.12), transparent 60%),
var(--black);
}
.site-footer { background: var(--orn-cloud-dark), var(--black-deep); }
.site-header { background: rgba(21, 18, 13, 0.9); backdrop-filter: blur(12px) saturate(1.2); }
/* Section headings: a small lotus with fine gold rules */
.section-head::before {
content: "";
display: block;
width: 64px;
height: 36px;
margin: 0 auto 12px;
background: var(--orn-lotus) center / contain no-repeat;
}
.section-head .eyebrow { letter-spacing: 0.28em; }
.section-head .eyebrow::before,
.section-head .eyebrow::after {
content: "";
display: inline-block;
width: 28px;
height: 1px;
margin: 0 12px;
vertical-align: middle;
background: currentColor;
opacity: 0.6;
}
/* ---------- Home hero: night sky, candle glow, rising light ---------- */
.hero {
min-height: min(92vh, 900px);
background:
var(--orn-cloud-dark),
radial-gradient(circle at 76% 48%, rgba(209, 181, 106, 0.2), transparent 40%),
radial-gradient(ellipse at 15% 110%, rgba(209, 181, 106, 0.12), transparent 55%),
linear-gradient(160deg, #0d0b08 0%, #17130d 55%, #231c12 100%);
}
.hero::before {
/* white chrysanthemum line art, the Chinese flower of remembrance */
content: "";
position: absolute;
left: -50px;
bottom: -70px;
width: 340px;
height: 460px;
background: var(--orn-chrysanthemum) center / contain no-repeat;
opacity: 0.3;
transform: rotate(-8deg);
z-index: 1;
pointer-events: none;
}
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); color: #fbf6e8; }
/* Company slogan 展望未来 in brush script, metallic gold (展 echoes the company name) */
.hero .slogan {
font-family: var(--font-brand), var(--font-serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 400;
letter-spacing: 0.22em;
text-transform: none;
line-height: 1.3;
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 14px;
}
html[lang="en"] .hero .slogan,
html[lang="ms"] .hero .slogan { font-family: var(--font-serif); font-style: italic; letter-spacing: 0.06em; }
.hero-content > * { animation: rise-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-content > :nth-child(2) { animation-delay: 0.15s; }
.hero-content > :nth-child(3) { animation-delay: 0.3s; }
.hero-content > :nth-child(4) { animation-delay: 0.45s; }
@keyframes rise-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
/* Logo medallion breathes a soft halo */
.hero-art { animation: halo 7s ease-in-out infinite; }
@keyframes halo {
0%, 100% { box-shadow: 0 0 0 1px rgba(209, 181, 106, 0.45), 0 0 60px rgba(209, 181, 106, 0.18); }
50% { box-shadow: 0 0 0 1px rgba(209, 181, 106, 0.65), 0 0 130px rgba(209, 181, 106, 0.38); }
}
/* Candle-light specks drifting slowly upward */
.hero-motes {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.hero-motes span {
position: absolute;
left: var(--x);
bottom: -20px;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 238, 190, 0.95), rgba(209, 181, 106, 0.45) 45%, transparent 70%);
box-shadow: 0 0 12px 3px rgba(209, 181, 106, 0.3);
opacity: 0;
animation: drift-up var(--dur) linear var(--delay) infinite;
}
@keyframes drift-up {
0% { transform: translate(0, 0); opacity: 0; }
12% { opacity: 0.85; }
70% { opacity: 0.5; }
100% { transform: translate(var(--drift), -105vh); opacity: 0; }
}
/* Scroll cue */
.scroll-cue {
position: absolute;
left: 50%;
bottom: 28px;
width: 24px;
height: 40px;
margin-left: -12px;
border: 1.5px solid rgba(209, 181, 106, 0.6);
border-radius: 14px;
z-index: 2;
}
.scroll-cue span {
position: absolute;
left: 50%;
top: 8px;
width: 3px;
height: 8px;
margin-left: -1.5px;
border-radius: 2px;
background: var(--gold-bright);
animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
0% { transform: translateY(0); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateY(14px); opacity: 0; }
}
/* ---------- Inner page banners and call-to-action bands ---------- */
.page-banner,
.cta { position: relative; overflow: hidden; }
.page-banner {
padding: 130px 0 110px;
background:
var(--orn-cloud-dark),
radial-gradient(ellipse at 50% 0%, rgba(209, 181, 106, 0.2), transparent 60%),
linear-gradient(160deg, #0d0b08 0%, #1b160f 100%);
}
.cta {
padding: 110px 0;
background:
var(--orn-cloud-dark),
radial-gradient(ellipse at 50% 120%, rgba(209, 181, 106, 0.28), transparent 60%),
var(--black);
}
.page-banner::before,
.page-banner::after,
.cta::before,
.cta::after {
content: "";
position: absolute;
bottom: -70px;
width: 230px;
height: 320px;
background: var(--orn-chrysanthemum) center / contain no-repeat;
opacity: 0.28;
pointer-events: none;
}
.page-banner::before, .cta::before { left: -30px; transform: rotate(-10deg); }
.page-banner::after, .cta::after { right: -30px; transform: scaleX(-1) rotate(-10deg); }
.page-banner .container,
.cta .container { position: relative; z-index: 1; }
.page-banner h1::after {
/* gold rule with a lotus under the page title */
content: "";
display: block;
width: 220px;
max-width: 70%;
height: 26px;
margin: 20px auto 0;
background:
var(--orn-lotus) center / 42px 24px no-repeat,
linear-gradient(90deg, transparent, rgba(209, 181, 106, 0.8), transparent) center / 100% 1px no-repeat;
}
/* ---------- Calligraphy quote band: 慎终追远 ---------- */
.quote-band {
position: relative;
overflow: hidden;
padding: 110px 0;
text-align: center;
background: var(--orn-cloud-light), linear-gradient(180deg, var(--ivory), var(--cream));
}
.quote-band::before,
.quote-band::after {
content: "";
position: absolute;
top: 50%;
width: 240px;
height: 330px;
margin-top: -165px;
background: var(--orn-chrysanthemum-light) center / contain no-repeat;
pointer-events: none;
}
.quote-band::before { left: 2%; transform: rotate(-8deg); }
.quote-band::after { right: 2%; transform: scaleX(-1) rotate(-8deg); }
.quote-band .container { position: relative; z-index: 1; }
.quote-band .eyebrow { letter-spacing: 0.28em; }
.quote-brush {
margin: 4px 0 2px;
font-family: var(--font-brand);
font-size: clamp(4rem, 13vw, 8.5rem);
line-height: 1.15;
letter-spacing: 0.12em;
background: var(--gold-grad-deep);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.quote-source { color: var(--gold); letter-spacing: 0.2em; font-size: 0.9rem; margin-bottom: 18px; }
.quote-text {
max-width: 560px;
margin: 0 auto;
font-family: var(--font-serif);
font-size: 1.35rem;
line-height: 1.7;
color: var(--ink);
}
/* ---------- Founder's story video card (About page) ---------- */
.video-card {
position: relative;
display: grid;
place-items: center;
align-content: center;
gap: 6px;
max-width: 900px;
aspect-ratio: 16 / 9;
margin: 0 auto;
padding: 24px;
overflow: hidden;
text-align: center;
border-radius: var(--radius);
border: 1px solid rgba(209, 181, 106, 0.55);
background:
var(--orn-cloud-dark),
radial-gradient(circle at 50% 42%, rgba(209, 181, 106, 0.22), transparent 55%),
linear-gradient(160deg, #0d0b08, #221b11);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 60px rgba(209, 181, 106, 0.12);
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
}
.video-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 36px 90px -30px rgba(0, 0, 0, 0.8), 0 0 90px rgba(209, 181, 106, 0.25); }
.video-card::before {
content: "";
position: absolute;
right: -30px;
bottom: -60px;
width: 220px;
height: 300px;
background: var(--orn-chrysanthemum) center / contain no-repeat;
opacity: 0.3;
transform: scaleX(-1) rotate(-10deg);
pointer-events: none;
}
.video-card::after {
/* inner gold frame, like the photo panels */
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(209, 181, 106, 0.35);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
}
.video-play {
display: grid;
place-items: center;
width: 84px;
height: 84px;
margin-bottom: 10px;
border-radius: 50%;
color: var(--black);
background: var(--gold-grad);
box-shadow: 0 0 0 8px rgba(209, 181, 106, 0.15), 0 0 40px rgba(209, 181, 106, 0.45);
animation: halo-soft 4s ease-in-out infinite;
}
.video-play svg { width: 36px; height: 36px; margin-left: 4px; }
@keyframes halo-soft {
0%, 100% { box-shadow: 0 0 0 8px rgba(209, 181, 106, 0.15), 0 0 40px rgba(209, 181, 106, 0.35); }
50% { box-shadow: 0 0 0 14px rgba(209, 181, 106, 0.08), 0 0 70px rgba(209, 181, 106, 0.55); }
}
.video-title {
font-family: var(--font-brand), var(--font-serif);
font-size: clamp(2.4rem, 7vw, 4.2rem);
line-height: 1.1;
letter-spacing: 0.1em;
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.video-sub { font-family: var(--font-serif); font-size: 1.2rem; color: var(--gold-soft); letter-spacing: 0.08em; }
.video-meta { margin-top: 6px; font-size: 0.85rem; color: var(--on-dark-soft); letter-spacing: 0.06em; }
/* Event videos (About page): embedded Facebook video + link card */
.video-embed {
position: relative;
max-width: 900px;
aspect-ratio: 16 / 9;
margin: 0 auto;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid rgba(209, 181, 106, 0.55);
background: #0d0b08;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 60px rgba(209, 181, 106, 0.12);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-grid { align-items: start; }
.video-grid .video-embed,
.video-grid .video-card { max-width: none; }
.video-grid .video-title { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.video-item h3 { margin-top: 20px; }
.video-item p { margin-top: 6px; }
.video-item-link { font-size: 0.9rem; }
.video-item-link a { color: var(--gold-bright); }
/* ---------- Softer cards ---------- */
.card {
border-top: 1px solid var(--line);
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #fffdf8);
transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 28px;
right: 28px;
height: 2px;
background: var(--gold-grad);
border-radius: 0 0 2px 2px;
}
.card:hover,
.staff-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(209, 181, 106, 0.45);
}
.staff-card,
.package,
.leader,
.faq details { border-radius: var(--radius); }
.faq summary:hover { color: var(--gold); }
/* ---------- Framed photo panels ---------- */
.photo::after {
content: "";
position: absolute;
inset: 12px;
border: 1px solid rgba(209, 181, 106, 0.5);
border-radius: calc(var(--radius) - 6px);
pointer-events: none;
}
.photo--garden::after,
.photo--lounge::after,
.photo--floral::after { border-color: rgba(21, 18, 13, 0.35); }
/* ---------- Stats: fine gold dividers ---------- */
.stats > div { position: relative; }
.stats > div + div::before {
content: "";
position: absolute;
left: -12px;
top: 8%;
bottom: 8%;
width: 1px;
background: linear-gradient(transparent, rgba(209, 181, 106, 0.45), transparent);
}
/* Timeline dots glow softly */
.timeline-item::before { box-shadow: 0 0 0 5px rgba(209, 181, 106, 0.15); }
/* ---------- Gentler reveal, gently staggered ---------- */
.js .reveal {
transform: translateY(18px);
transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.grid > .reveal:nth-child(2) { transition-delay: 0.12s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.24s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.36s; }
/* ---------- Chinese (简体中文) typography ---------- */
html[lang="zh-CN"] {
/* Chinese fonts first so punctuation like —— and “ ” renders full-width */
--font-serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
--font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] h4 { line-height: 1.4; letter-spacing: 0.03em; }
html[lang="zh-CN"] h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
/* Chinese headings break at punctuation (no lone characters on a line); still wrap if a phrase is too long */
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] .cta p,
html[lang="zh-CN"] .page-banner p,
html[lang="zh-CN"] .section-head p,
html[lang="zh-CN"] .quote-text { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="zh-CN"] .hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
html[lang="zh-CN"] body { line-height: 1.85; }
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .staff-role,
html[lang="zh-CN"] .stat-label,
html[lang="zh-CN"] .photo-tag,
html[lang="zh-CN"] .package-ribbon { letter-spacing: 0.1em; }
html[lang="zh-CN"] .quote blockquote,
html[lang="zh-CN"] .leader blockquote { font-style: normal; font-size: 1.15rem; }
/* ---------- Scroll reveal ---------- */
.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal { opacity: 1; transform: none; transition: none; }
.card, .staff-card, .btn { transition: none; }
.hero-motes, .scroll-cue { display: none; }
.video-play { animation: none; }
.hero-art, .hero-content > * { animation: none; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-art { opacity: 0.3; right: -6%; }
}
@media (max-width: 860px) {
.section { padding: 72px 0; }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.split,
.facility,
.contact-grid,
.leader { grid-template-columns: 1fr; gap: 36px; }
.facility:nth-child(even) .photo { order: 0; }
.leader { padding: 28px; }
.stats { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
.stats > div::before { display: none; }
.quote-band::before, .quote-band::after { opacity: 0.45; width: 160px; }
.package--featured { transform: none; }
.grid-3 > .card:last-child:nth-child(odd),
.grid-3 > .quote:last-child:nth-child(odd) { grid-column: 1 / -1; }
.packages { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; row-gap: 40px; }
}
/* Mobile menu kicks in a little earlier so the header never crowds */
@media (max-width: 1180px) {
.nav-toggle { display: block; }
.nav {
position: absolute;
top: 82px;
left: 0;
right: 0;
background: var(--black);
border-bottom: 1px solid rgba(209, 181, 106, 0.4);
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.nav-open .nav { max-height: 640px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); }
.nav ul { flex-direction: column; padding: 10px 16px 18px; gap: 0; }
.nav a { padding: 12px 8px; border-bottom: 1px solid rgba(209, 181, 106, 0.15); }
.nav a.active::after { display: none; }
}
@media (max-width: 600px) {
body { font-size: 16px; }
.container { padding: 0 16px; }
.topbar .hide-sm { display: none; }
.logo { gap: 8px; }
.logo-mark { width: 40px; height: 40px; }
.logo-text { font-size: 1.45rem; }
.logo-text small { font-size: 0.78rem; letter-spacing: 0; }
.header-actions { margin-left: 8px; gap: 4px; }
.lang-switch button { padding: 5px 7px; font-size: 0.75rem; }
.grid-2,
.grid-3,
.grid-4,
.footer-grid { grid-template-columns: 1fr; }
.hero { min-height: 600px; padding: 40px 0 90px; }
.hero::before { width: 210px; height: 290px; opacity: 0.22; }
.hero-motes span:nth-child(n+11) { display: none; }
.page-banner { padding: 90px 0 76px; }
.page-banner::before, .page-banner::after, .cta::before, .cta::after { width: 130px; height: 180px; opacity: 0.2; }
.quote-band { padding: 80px 0; }
.quote-band::before, .quote-band::after { display: none; }
.quote-text { font-size: 1.15rem; }
.video-card { aspect-ratio: auto; min-height: 260px; padding: 36px 20px; }
.video-play { width: 64px; height: 64px; }
.video-play svg { width: 28px; height: 28px; }
.video-card::before { width: 140px; height: 190px; }
.section { padding: 80px 0; }
.hero-art { display: none; }
}
/* Small phones (and phones with large text settings, which make the page narrower):
the language switch moves to the top bar so the header has room for the name */
@media (max-width: 480px) {
.lang-switch--header { display: none; }
.lang-switch--top { display: flex; }
.topbar .container { padding-top: 6px; padding-bottom: 6px; }
.lang-switch--top button { padding: 3px 10px; font-size: 0.75rem; }
.logo-text { font-size: 1.6rem; }
/* scale the Chinese headline with the screen so each phrase stays on one line */
html[lang="zh-CN"] .hero h1 { font-size: clamp(1.5rem, 7.6vw, 2.1rem); }
}
@media (max-width: 340px) {
.hotline-label { display: none; }
.logo { gap: 6px; }
.logo-mark { width: 36px; height: 36px; }
.logo-text { font-size: 1.35rem; }
.logo-text small { font-size: 0.72rem; }
.lang-switch--top button { padding: 3px 8px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
.stat-label { letter-spacing: 0.05em; overflow-wrap: anywhere; }
}
/* ==========================================================
Phone-first layer — most visitors use a phone
========================================================== */
/* Elements that only exist for phones/tablets are hidden on desktop */
.nav-extra { display: none; }
/* Back-to-top button (all screen sizes, appears after scrolling) */
.to-top {
position: fixed;
right: 18px;
bottom: 24px;
z-index: 54;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1.5px solid var(--gold-bright);
color: var(--gold-bright);
background: rgba(21, 18, 13, 0.9);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 22px; height: 22px; }
/* Phone/tablet menu: contact buttons under the links */
@media (max-width: 1180px) {
.nav-extra {
display: grid;
gap: 10px;
padding: 8px 16px 20px;
}
.nav-extra .btn { justify-content: center; }
/* the menu-link styling must not apply to these buttons */
.nav .nav-extra .btn {
padding: 14px 20px;
border-bottom: 0;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 700;
border-radius: 999px;
}
.nav .nav-extra .btn--gold { color: var(--black); }
.nav .nav-extra .btn--outline { color: var(--gold-soft); border: 1.5px solid var(--gold-bright); }
}
/* ---------- Phones and small tablets ---------- */
@media (max-width: 768px) {
.to-top { bottom: calc(20px + env(safe-area-inset-bottom)); right: 14px; width: 44px; height: 44px; }
}
@media (max-width: 600px) {
/* Slimmer header and bigger language buttons */
.site-header .container { height: 64px; }
.logo-mark { width: 40px; height: 40px; }
.topbar .container { padding-top: 5px; padding-bottom: 5px; }
.topbar-hotline a { display: inline-block; padding: 6px 0; }
.lang-switch--top button { padding: 6px 12px; font-size: 0.8rem; min-height: 32px; }
/* Full-height menu panel under the header, large tap rows */
.nav {
/* sits right under the header; its height is the rest of the screen (set by main.js) */
position: absolute;
top: 100%;
left: 0;
right: 0;
height: calc(100vh - var(--nav-offset, 110px));
height: calc(100dvh - var(--nav-offset, 110px));
max-height: none;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
background: var(--orn-cloud-dark), var(--black);
z-index: 60;
}
.nav-open .nav { opacity: 1; visibility: visible; transform: none; max-height: none; }
.nav ul { padding: 8px 20px 10px; }
.nav a {
padding: 13px 4px;
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav ul a::after {
content: "›";
position: static;
width: auto;
height: auto;
background: none;
color: var(--gold-bright);
font-size: 1.4rem;
opacity: 0.7;
}
.nav ul a.active::after { display: inline; }
.nav .nav-extra .btn { display: flex; justify-content: center; }
.nav .nav-extra .btn::after { content: none; }
.nav-extra { padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); }
.nav-extra .btn { min-height: 52px; }
body.nav-open { overflow: hidden; }
body.nav-open .to-top { display: none; }
/* Hero fills the first screen below the header */
.hero { min-height: calc(100svh - 110px); padding: 36px 0 70px; }
.hero-actions .btn { width: 100%; justify-content: center; min-height: 52px; }
.hero p { font-size: 1.02rem; }
/* Shorter pages: tighter spacing */
.section { padding: 60px 0; }
.section-head { margin-bottom: 30px; }
.section-head::before { width: 52px; height: 28px; margin-bottom: 8px; }
.page-banner { padding: 64px 0 52px; }
.page-banner h1::after { margin-top: 14px; }
.cta { padding: 64px 0; }
.quote-band { padding: 64px 0; }
.split { gap: 28px; }
/* Compact cards: icon on the left, text on the right */
.grid-4 .card,
.grid-3 > .card,
.grid-2 > .card {
display: grid;
grid-template-columns: 48px 1fr;
column-gap: 16px;
align-items: start;
padding: 20px 18px;
text-align: left;
}
.grid-4 .card > *,
.grid-3 > .card > *,
.grid-2 > .card > * { grid-column: 2; }
.grid-4 .card > .icon,
.grid-3 > .card > .icon,
.grid-2 > .card > .icon {
grid-column: 1;
grid-row: 1 / span 4;
width: 48px;
height: 48px;
margin: 0;
}
.card .icon svg { width: 22px; height: 22px; }
.card h3, .card h4 { font-size: 1.2rem; margin-bottom: 4px; }
.card p { font-size: 0.95rem; }
.service-card ul { margin-top: 8px; font-size: 0.9rem; }
.grid { gap: 14px; }
.card-link { padding: 8px 0; margin-top: 4px; }
/* Team cards: picture on the left, text on the right */
.staff-card {
display: grid;
grid-template-columns: 112px 1fr;
text-align: left;
}
.staff-card .staff-photo { aspect-ratio: auto; height: 100%; min-height: 150px; }
.staff-card .avatar { width: 60px; height: 60px; border-width: 2px; }
.staff-body { padding: 16px; }
.staff-body h3 { font-size: 1.2rem; }
.staff-role { margin-bottom: 8px; letter-spacing: 0.06em; }
.staff-body p { font-size: 0.92rem; margin-bottom: 8px; }
.tags { justify-content: flex-start; }
.tag { font-size: 0.8rem; }
.leader { padding: 20px; gap: 18px; }
.leader .staff-photo { height: 180px; }
/* Facilities: wider photos, less space between blocks */
.facility { gap: 18px; margin-bottom: 52px; }
.facility .photo { aspect-ratio: 16 / 10; }
.facility h2 { font-size: 1.6rem; }
.photo-tag { font-size: 0.78rem; }
/* Packages and FAQ */
.package { padding: 30px 20px 24px; }
.faq summary { padding: 16px 48px 16px 18px; }
.faq details p { padding: 0 18px 16px; }
/* Footer: link lists side by side, bigger tap rows */
.site-footer { padding-top: 48px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.footer-grid > div:first-child,
.footer-grid > div:last-child { grid-column: 1 / -1; }
.site-footer li { margin-bottom: 2px; }
.site-footer li a { display: inline-block; padding: 7px 0; }
.footer-bottom { margin-top: 32px; flex-direction: column; gap: 4px; }
.social-links a { width: 48px; height: 48px; }
}
/* ==========================================================
Package page (展望未来配套): faith / rite picker, inclusion lists, price box
========================================================== */
.pkg-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px; margin-bottom: 22px; }
.pkg-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pkg-label { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--gold); }
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--white); border: 1px solid rgba(209, 181, 106, 0.6); border-radius: 999px; }
.seg button {
min-height: 44px; padding: 8px 22px; border: 0; border-radius: 999px;
font: inherit; font-size: 1rem; color: var(--ink); background: transparent; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--gold-grad); color: var(--black); font-weight: 700; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.4); }
.seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pkg-current { text-align: center; font-family: var(--font-serif); font-size: 1.35rem; color: var(--ink); margin-bottom: 28px; }
.pkg-grid { align-items: start; }
.pkg-card h3 { font-size: 1.25rem; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.pkg-card .checklist { margin: 0; font-size: 0.95rem; }
/* show only the items for the chosen faith and rite */
.pkg.faith-buddhist [data-faith="christian"],
.pkg.faith-christian [data-faith="buddhist"],
.pkg.rite-burial [data-rite="cremation"],
.pkg.rite-cremation [data-rite="burial"] { display: none; }
.pkg-highlights { list-style: none; margin: 30px auto 0; padding: 0; max-width: 760px; text-align: center; color: var(--ink-soft); }
.pkg-highlights li { margin-bottom: 6px; }
.pkg-highlights li::before { content: "※ "; color: var(--gold); }
.pkg-price {
max-width: 640px; margin: 30px auto 0; padding: 30px 28px; text-align: center;
background: var(--black); color: var(--on-dark); border-radius: var(--radius); border: 1px solid rgba(209, 181, 106, 0.45);
}
.pkg-price h3 { color: var(--gold-soft); margin-bottom: 6px; }
.pkg-price p { color: var(--on-dark-soft); }
.pkg-note { color: var(--ink-soft); font-size: 0.85em; margin-left: 4px; }
.pkg-terms-list { margin: 0; padding-left: 1.3em; color: var(--ink-soft); }
.pkg-terms-list li { margin-bottom: 10px; }
.pkg-variant-card { display: block; text-decoration: none; color: inherit; }
.pkg-variant-card:hover { text-decoration: none; }
.pkg-variant-card h3 { font-size: 1.3rem; margin: 6px 0 12px; word-break: keep-all; }
.pkg-teaser-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
@media (max-width: 768px) {
.pkg-picker { gap: 14px; }
.pkg-group, .seg { width: 100%; }
.seg button { flex: 1; padding: 8px 10px; }
.pkg-current { font-size: 1.15rem; }
.pkg-price { padding: 24px 18px; }
.pkg-teaser-actions .btn { width: 100%; justify-content: center; }
.grid.pkg-variants { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pkg-variant-card { padding: 16px; }
.pkg-variant-card h3 { font-size: 1.05rem; }
/* these cards have no icon, so skip the phone icon-left card layout */
.pkg-grid > .card, .pkg-variants > .card, .pkg-terms .grid-2 > .card { display: block; padding: 20px 18px; }
}
.pkg-facts .card h3 { font-size: 1.25rem; }
.wreath-actions { text-align: center; margin-top: 28px; }
/* Facilities: extra photos under a facility's text */
.facility-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
.facility-thumbs .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.facility-thumbs .photo::after { inset: 6px; }
.facility-thumbs .photo-tag { left: 8px; bottom: 8px; padding: 3px 8px; font-size: 0.72rem; letter-spacing: 0.06em; }
/* Team page: 13th anniversary photos */
.team-moments { margin-top: 32px; gap: 16px; }
.team-moments .photo { aspect-ratio: 3 / 2; box-shadow: var(--shadow); }
@media (max-width: 768px) { .grid.team-moments { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; } }
/* ==========================================================
UX polish (2026-10-30), from a ui-ux-pro-max review:
pressed feedback, no sticky hover on touch screens, larger tap areas,
anchors clear of the sticky header, visible focus, calmer reveal
========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, .btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* in-page links (#package, #contents …) stop below the sticky header */
[id] { scroll-margin-top: 96px; }
@media (max-width: 768px) { [id] { scroll-margin-top: 76px; } }
/* visible keyboard focus on every control */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
/* sections fade in a little quicker and softer */
.reveal { transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* lift-on-hover only where there is a real pointer (otherwise it sticks after a tap) */
@media (hover: none) {
.card:hover, .staff-card:hover, .video-card:hover, .btn:hover { transform: none; }
}
/* pressed feedback */
.btn:active { transform: translateY(0) scale(0.97); }
a.card:active, .video-card:active { transform: scale(0.985); }
.seg button:active, .lang-switch button:active, .social-links a:active, .to-top:active, .nav-toggle:active { transform: scale(0.94); }
.seg button, .lang-switch button, .social-links a, .to-top, .nav-toggle { transition: transform 0.15s ease, background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.nav a:active, .site-footer a:active, .card-link:active, .breadcrumb a:active { opacity: 0.65; }
/* larger touch areas for small inline links, without moving the layout */
.breadcrumb a, .card-link, .timeline-source a, .video-item-link a, .map-link a {
display: inline-block; padding: 10px 0; margin: -10px 0;
}
.site-footer li { margin-bottom: 0; }
.site-footer li a { display: inline-block; padding: 7px 0; }
@media (max-width: 768px) {
.lang-switch button { min-height: 40px; min-width: 40px; }
}
.contact-item a { display: inline-block; padding: 9px 0; margin: -9px 0; }
.facility-thumbs--one { grid-template-columns: 1fr; }
.facility-thumbs--one .photo { aspect-ratio: 16 / 9; }
/* sister companies: 成峰 Molding Peak (ivory tile) + 九九 Nine Nine LED Wreath (black logo, no tile) */
.sister-cos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sister-co--dark { padding: 0; background: #000; border-color: rgba(209, 181, 106, 0.45); overflow: hidden; }
.sister-co--dark img { width: 200px; height: auto; }
/* sister companies: both logos straight on the dark footer, same visual weight, side by side (2026-10-30) */
.sister-cos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.sister-logo { display: block; height: auto; }
.sister-logo--mp { width: 104px; }
.sister-logo--nn { width: 150px; }
/* Package contents: balanced 2-column flow instead of a 3-column grid (cards differ from 1 to 11 items) */
.grid.pkg-grid { display: block; columns: 2; column-gap: 28px; max-width: 1040px; margin: 0 auto; }
.pkg-grid > .card { display: block; break-inside: avoid; page-break-inside: avoid; margin: 0 0 28px; width: 100%; }
@media (max-width: 768px) {
.grid.pkg-grid { columns: 1; }
.pkg-grid > .card { margin-bottom: 14px; }
}
/* About timeline: photos under an entry (ambulance donation) */
.timeline-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; max-width: 520px; }
.timeline-photos .photo { aspect-ratio: 3 / 4; border-radius: 8px; box-shadow: var(--shadow); }
.timeline-photos .photo::after { display: none; }
/* About timeline: one clean landscape photo for the ambulance handover (replaces the 3 tall crops) */
.timeline-figure { margin: 14px 0 0; max-width: 520px; }
.timeline-figure .photo { aspect-ratio: 4 / 3; border-radius: 10px; box-shadow: var(--shadow); }
.timeline-figure .photo::after { display: none; }
.timeline-figure figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ink-soft); }
/* Services: funeral lion dance (white lions) */
.lion-meaning { margin-bottom: 28px; }
.section--dark .lion-meaning .card { background: rgba(255, 255, 255, 0.04); border-color: rgba(209, 181, 106, 0.3); color: var(--on-dark); }
.section--dark .lion-meaning .card p { color: var(--on-dark-soft); }
.lion-gallery { gap: 14px; }
.lion-gallery .photo { aspect-ratio: 1 / 1; box-shadow: var(--shadow); }
.lion-actions { text-align: center; margin-top: 28px; }
.lion-source { margin: 14px 0 0; font-size: 0.82rem; color: var(--on-dark-soft); }
.lion-source a { color: var(--gold-bright); }
@media (max-width: 768px) {
.grid.lion-gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lion-gallery .photo-tag { display: none; }
}
/* Package price prompt: a light inline bar in the same style as the package cards (was a heavy black box) */
.pkg-price {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
max-width: 1040px; margin: 4px auto 0; padding: 24px 30px; text-align: left;
background: var(--white); color: var(--ink);
border: 1px solid var(--line); border-left: 3px solid var(--gold-bright);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.pkg-price h3 { color: var(--ink); font-size: 1.3rem; margin: 0 0 4px; }
.pkg-price p { color: var(--ink-soft); margin: 0; }
.pkg-price .btn { flex-shrink: 0; }
@media (max-width: 768px) {
.pkg-price { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 18px; }
.pkg-price .btn { width: 100%; justify-content: center; }
}
/* Brand name is longer now (展丧事服务有限公司): smaller on phones (2026-11-01) */
@media (max-width: 600px) { .logo-text { font-size: 1.3rem; letter-spacing: 0.02em; } }
@media (max-width: 480px) { .logo-text { font-size: 1.25rem; } .logo-text small { font-size: 0.74rem; } }
@media (max-width: 340px) { .logo-text { font-size: 1.12rem; } .logo-text small { font-size: 0.68rem; } }