/* AKSEIM STONE V12 — Tailwind utilities (compiled) */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Funnel Sans,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.col-span-3{grid-column:span 3/span 3}.mx-auto{margin-left:auto;margin-right:auto}.-mr-2{margin-right:-.5rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.aspect-\[3\/2\]{aspect-ratio:3/2}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.h-10{height:2.5rem}.h-4{height:1rem}.h-48{height:12rem}.w-4{width:1rem}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.flex-shrink,.shrink{flex-shrink:1}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--gold\)\]{border-color:var(--gold)}.border-\[var\(--line\)\]{border-color:var(--line)}.border-black\/10{border-color:rgba(0,0,0,.1)}.bg-\[var\(--gold\)\]{background-color:var(--gold)}.bg-\[var\(--gold-soft\)\]{background-color:var(--gold-soft)}.bg-\[var\(--line\)\]{background-color:var(--line)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-5{padding:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[0\.85rem\]{padding-top:.85rem;padding-bottom:.85rem}.pb-0{padding-bottom:0}.pb-0\.5{padding-bottom:.125rem}.pb-1{padding-bottom:.25rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pb-7{padding-bottom:1.75rem}.pt-0{padding-top:0}.pt-1\.5{padding-top:.375rem}.pt-10{padding-top:2.5rem}.pt-3{padding-top:.75rem}.pt-6{padding-top:1.5rem}.pt-\[50px\]{padding-top:50px}.text-left{text-align:left}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[1\.15rem\]{font-size:1.15rem}.text-\[1\.7rem\]{font-size:1.7rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tracking-wider{letter-spacing:.05em}.text-\[var\(--gold\)\]{color:var(--gold)}.text-\[var\(--ink\)\]{color:var(--ink)}.text-\[var\(--ink-muted\)\]{color:var(--ink-muted)}.text-\[var\(--ink-soft\)\]{color:var(--ink-soft)}.text-black\/40{color:rgba(0,0,0,.4)}.text-white\/70{color:hsla(0,0%,100%,.7)}.underline{text-decoration-line:underline}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:border-\[var\(--gold\)\]:hover{border-color:var(--gold)}.hover\:text-\[var\(--ink\)\]:hover{color:var(--ink)}.has-\[\:checked\]\:border-\[var\(--gold\)\]:has(:checked){border-color:var(--gold)}.has-\[\:checked\]\:bg-\[var\(--gold-soft\)\]:has(:checked){background-color:var(--gold-soft)}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:gap-12{gap:3rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[1\.875rem\]{font-size:1.875rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[260px_1fr\]{grid-template-columns:260px 1fr}}
/* AKSEIM STONE V12 — Custom styles */
/* AKSEIM STONE V4 Demo 路 鍏变韩鏍峰紡 (polished v4.1) */

/* ---------- Tokens ---------- */
:root {
  --paper: #fafaf7;
  --paper-deep: #f3f0e8;
  --ink: #1a1a1a;
  --ink-soft: #3d3d3d;
  --ink-muted: #6a6a6a;
  --ink-subtle: #999999;
  --gold: #e5b97a;
  --gold-deep: #d4a86a;
  --gold-soft: rgba(229, 185, 122, 0.08);
  --gold-light: rgba(229, 185, 122, 0.13);
  --gold-mid: rgba(229, 185, 122, 0.4);
  --line: rgba(26, 26, 26, 0.1);
  --line-strong: rgba(26, 26, 26, 0.18);
  --focus-ring: rgba(229, 185, 122, 0.6);

  /* Typography scale (鈮?.25 ratio) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: clamp(2.25rem, 5vw, 3.75rem);
  --fs-5xl: clamp(2.75rem, 6vw, 4.5rem);
  --fs-6xl: clamp(3rem, 6.5vw, 5rem);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 6rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-quint */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
  padding: 0;
  text-indent: 0;
}

h1 {
  font-size: var(--fs-5xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h2 { font-size: var(--fs-4xl); font-weight: 600; }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; }

p { text-wrap: pretty; max-width: 65ch; }

/* ---------- A11y: focus + skip link ---------- */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  z-index: 100;
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 0; }

/* ---------- 鍗犱綅鑹插潡 ---------- */
.placeholder-image {
  background: linear-gradient(135deg, var(--paper) 0%, var(--gold-light) 100%);
  border: 1px dashed var(--gold-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-family: 'Funnel Sans', inherit;
  text-align: center;
  padding: var(--sp-4);
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}
.placeholder-image[data-ratio="4-3"] { aspect-ratio: 4 / 3; }
.placeholder-image[data-ratio="1-1"] { aspect-ratio: 1 / 1; }
.placeholder-image[data-ratio="3-4"] { aspect-ratio: 3 / 4; }
.placeholder-image[data-ratio="5-6"] { aspect-ratio: 5 / 6; }
.placeholder-image[data-label]::after { content: attr(data-label); }
.placeholder-image:hover { border-color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  /* s109 2026-09-05: removed isolation: isolate — combined with backdrop-filter it was creating a new compositing layer on the header that the position:fixed mobile-nav couldn't sit alongside correctly. The isolation was added for pointer events on the hamburger button, but the real fix is the focus() removal in shared.js (which was the actual cause of the page-scrolling-to-top behavior). */
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
}
.site-nav-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.09375rem; /* s预览: nav 统一 +25% (14 -> 17.5px) */
  font-weight: 700; /* V12 s32f: nav 加粗，与首页一致 */
  padding: var(--sp-2) 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav-link:hover { color: var(--gold-deep); }
.site-nav-link[aria-current="page"] { color: var(--gold); }
.site-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav-link:hover::after,
.site-nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- 閫氱敤 ---------- */
.section { padding: var(--sp-7) 0; }
.section-tight { padding: var(--sp-7) 0; }
@media (max-width: 768px) {
  .section { padding: var(--sp-7) 0; }
  .section-tight { padding: var(--sp-6) 0; }
}

.container-site {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
@media (min-width: 1024px) { .container-site { padding-left: var(--sp-7); padding-right: var(--sp-7); } }

.kicker {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.slogan {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */

/* Search toggle: always visible. Mobile shows it next to the hamburger; desktop
   shows it between nav and the right edge. Tailwind responsive `display`
   overrides are unreliable with the CDN runtime (it injects utilities AFTER
   this stylesheet and wins the cascade), so we set display unconditionally. */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ---------- Search modal (s51) ---------- */
.search-modal[hidden] { display: none !important; }
.search-modal {
  position: fixed; inset: 0;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
.search-modal-panel {
  width: min(640px, 92vw);
  background: var(--paper);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.search-modal-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.search-modal-input-row svg { color: var(--ink-soft); flex-shrink: 0; }
.search-modal-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  outline: none;
}
.search-modal-input::placeholder { color: var(--ink-soft); }
.search-modal-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
}
.search-modal-results { max-height: 50vh; overflow-y: auto; }
.search-modal-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s ease;
}
.search-modal-result:hover, .search-modal-result:focus { background: rgba(229, 185, 122, 0.10); }
.search-modal-result-thumb {
  width: 48px; height: 48px;
  border-radius: 4px;
  background: #eee;
  object-fit: cover;
  flex-shrink: 0;
}
.search-modal-result-text { display: flex; flex-direction: column; }
.search-modal-result-name { font-weight: 500; }
.search-modal-result-meta { font-size: 13px; color: var(--ink-soft); }
.search-modal-empty { padding: 28px 22px; text-align: center; color: var(--ink-soft); font-size: 14px; }
.search-modal-hint { padding: 10px 22px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); }
body.search-modal-open { overflow: hidden; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-base);
  font-weight: 500;
  border-radius: 2px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
  border: 1px solid transparent;
  font-family: 'Funnel Sans', inherit;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* ---------- Cards ---------- */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-hover:hover {
  border-color: var(--gold-mid);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* ---------- 鏁板瓧澧?---------- */
.stat-number {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
}
.stat-number sup,
.stat-number .unit {
  font-size: 0.5em;
  vertical-align: top;
  color: var(--gold-deep);
  font-weight: 500;
}
.stat-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- 鏈嶅姟鎵胯鍧?---------- */
.promise-block {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  transition: border-color var(--dur-base) var(--ease-out);
}
.promise-block:hover { border-color: var(--gold-mid); }
.promise-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--gold-soft);
  border: 1px solid var(--gold-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
}

/* ---------- 4 澶ф敮鏌?---------- */
.pillar-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pillar-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(229, 185, 122, 0.15);
  transform: translateY(-2px);
}
.pillar-card.featured {
  background: linear-gradient(180deg, white 0%, var(--gold-soft) 100%);
  border-color: var(--gold-mid);
}
.pillar-eyebrow {
  font-family: 'Funnel Sans', inherit;
  font-size: var(--fs-xs);
  color: var(--gold-deep);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.pillar-title {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 500;
  margin-bottom: var(--sp-3);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.pillar-text {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.65;
  flex-grow: 1;
}
.pillar-link {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  display: inline-block;
  align-self: flex-start;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pillar-link:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ---------- 鏈嶅姟娴佺▼鎽樿 ---------- */
.process-step {
  text-align: center;
  padding: var(--sp-5);
}
.process-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: var(--fs-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  font-weight: 500;
}


/* ---------- Breadcrumb nav (SEO + UX) ---------- */
.breadcrumbs { font-family: 'Funnel Sans', system-ui, sans-serif; font-size: 0.78rem; padding: 1rem 0 0; max-width: 1400px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; color: var(--ink-soft); }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: '/'; margin: 0 0.5rem; color: var(--ink-muted, rgba(0,0,0,0.25)); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
.breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.breadcrumbs [aria-current="page"] span { color: var(--ink); }
@media (max-width: 640px) { .breadcrumbs { font-size: 0.72rem; padding-left: 1rem; padding-right: 1rem; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--paper);
  color: var(--ink-soft);
  padding: 1rem 0 0.5rem;      /* sXXX: 1.5rem → 1rem (per user, halve footer vertical padding). sYYY: padding-bottom further halved 1rem → 0.5rem (per user, halve the space below the phone numbers) */
  margin-top: 1.5rem;        /* V12 s32 halved 6rem→3rem; s32b halved 3rem→1.5rem */
  border-top: 1px solid var(--line);
  min-height: 200px;          /* s62: visible vertical center — flex centers content inside this height */
  display: flex;
  align-items: center;
}
.site-footer > .container-site { width: 100%; }
.site-footer > .container-site > .grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2.5rem !important; } /* hardcode 4-col fallback for when Tailwind CDN md:grid-cols-4 doesn't compile (offline / 12-page consistency) */
.site-footer h4 {
  color: var(--ink);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  font-weight: 600;
}
.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--gold-deep); }

/* ---------- Footer mobile (s51) ---------- */
@media (max-width: 768px) {
  .site-footer > .container-site > .grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .site-footer > .container-site > .grid > div:first-child { grid-column: 1 / -1; text-align: center; }
  .site-footer > .container-site > .grid > div:first-child img { height: 6rem !important; width: auto !important; margin: 0 auto !important; display: block !important; }
  .site-footer > .container-site > .grid > div:last-child { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,0.1); }
  .site-footer > .container-site > .grid > div:last-child ul { display: grid !important; gap: 0.5rem 1rem !important; grid-template-columns: 1fr 1fr !important; }
  .site-footer > .container-site > .grid > div:last-child ul li { font-size: 13px; line-height: 1.5; word-break: break-word; white-space: normal; }
  .site-footer > .container-site > .grid > div:last-child ul li:nth-child(1) { grid-column: 1 / -1; }
}

/* ---------- Hero: stats section (second hero, holds the advantages) ---------- */
.hero--stats {
  min-height: 100vh;
  min-height: 100dvh;
}
.hero--stats .hero-content--stats {
  justify-content: center;
  text-align: center;
  align-items: center;
}
.hero-stats-block {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-7);
}
.hero-advantages-label--stats {
  text-align: center;
  margin: 0;
}

/* Footer social icons + AKS logo (V10-style) */
.footer-logo-img { transform: translateY(-23px); margin-bottom: 0 !important; align-self: start; } /* V12 s32: moved down 38px (~1/5 of h-48=192px) so the A tip aligns with the PRODUCTS line — 2026-09-25: +5px down per user (-34px → -29px) — 2026-09-26: another +6px down per user (-29px → -23px) */

/* ---------- V12 s33d: about-page video play button + 360 scene switch ---------- */
.play-btn {
  width: clamp(72px, 9vw, 112px);
  height: clamp(72px, 9vw, 112px);
  border-radius: 50%;
  background: rgba(250, 250, 247, 0.95);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  transition: transform 250ms var(--ease-out), background 250ms var(--ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.play-btn:hover { transform: scale(1.06); background: #fff; }
.play-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.play-btn svg { margin-left: 4px; }

.scene-switch-btn {
  text-align: left;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.scene-switch-btn:hover { border-color: var(--gold); }
.scene-switch-btn.is-active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--ink);
}
.scene-switch-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.site-footer .social-icons a { display: inline-flex; align-items: center; opacity: 0.7; transition: opacity var(--dur-fast) var(--ease-out); }
.site-footer .social-icons svg { width: 27px; height: 27px; }
.site-footer .social-icons a:hover { opacity: 1; color: var(--gold); }

/* ---------- WhatsApp Float ---------- */
.whatsapp-float {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  width: 38px;            /* ponytail: 56 -> 38 (1/3 smaller) */
  height: 38px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 40;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
}
.whatsapp-float:focus-visible {
  outline-color: white;
  outline-offset: 2px;
}

/* ---------- Back to top button (same size as WhatsApp, white bg) ---------- */
.back-to-top {
  position: fixed;
  bottom: calc(var(--sp-5) + 38px + var(--sp-3));  /* ponytail: 56 -> 38 (1/3 smaller) */
  right: var(--sp-5);
  width: 38px;            /* ponytail: 56 -> 38 (1/3 smaller) */
  height: 38px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Visually hidden (a11y / SEO) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- CTA block ---------- */
.cta-block {
  background: var(--paper); /* s48: per user "about页面的CTA 模块的底色改成footer一样的底色" — matches .site-footer (also var(--paper)); was #ffffff */
  color: var(--ink); /* sXXXX: paper → ink so default text is black */
  padding: calc(2.5rem + 50px) 0 2.5rem; /* V12 s32: halved from var(--sp-9) = 5rem per user feedback; BBBBB: top padding +50px so the h2 + button synchronously move down 50px per user "这个文案和Talk To Us的按键同步下移50px" */
  text-align: center;
}
.cta-block h2 {
  color: var(--ink); /* sXXXX: paper → ink, matches the new default text color */
  letter-spacing: -0.02em;
}

/* ---------- Product / Project Cards ---------- */
.product-card, .project-card, .craft-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.product-card:hover, .project-card:hover, .craft-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.product-card-body, .craft-card-body {
  padding: var(--sp-3) var(--sp-4);
}
.project-card-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5) var(--sp-5); /* ponytail: bottom +4 to nudge grid total height slightly above visit-gallery (1011px → ~1014px) */
}
.product-card-name, .project-card-name, .craft-card-name {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-1);
  letter-spacing: -0.01em;
}
.product-card-meta, .project-card-meta, .craft-card-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.product-card-origin { font-size: 0.95rem; color: var(--ink); font-weight: 500; margin-top: 2px; } /* s62: enlarged origin label, replaces finish line */
.product-card-body--tight { padding: 0.65rem 1rem 0.85rem; } /* s62: tighter body now that finish row is gone */
  line-height: 1.3;
}

/* ---------- Mobile nav (V12 s86 2026-09-05: redesigned — branded header bar, gold accent, circular close button, chevron arrows on menu items, highlighted CTA) ---------- */
.mobile-nav {
  /* s110 2026-09-05: per user "还是设置成点击导航栏自动跳转到置顶" — revert to the standard full-screen fixed-drawer pattern. Clicking the hamburger scrolls the page to top and slides the drawer in from the right. */
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 60;
  display: none !important;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  padding: 0;
  overflow-y: auto;
  visibility: hidden;
}
.mobile-nav.open {
  display: block !important;
  transform: translateX(0);
  visibility: visible;
}
/* Gold accent line at the very top of the panel */
/* s110: restored — back to the full-screen fixed-drawer pattern, the gold gradient bar at top:0 sits inside the drawer's overlay. */
.mobile-nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  z-index: 1;
}

/* Close button — circular, top-right */
/* s110: back to position:absolute for the full-screen drawer. */
.mobile-nav-close {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.2s var(--ease-out), background 0.2s ease;
}
.mobile-nav-close:hover {
  background: var(--gold-deep);
  transform: rotate(90deg);
}

/* Brand header bar with gold underline */
.mobile-nav > brand,
.mobile-nav > [data-mobile-nav-brand] {
  /* fallback if a future edit adds a brand element */
}
.mobile-nav-header {
  display: none; /* reserved for future explicit brand row */
}

/* Menu items: spaced, with chevron arrow on hover, highlight on active */
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.25rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  font-family: 'Funnel Sans', system-ui, sans-serif;
  letter-spacing: 0.005em;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
  position: relative;
}
.mobile-nav a:not(.btn)::after {
  content: "\203A"; /* › single chevron */
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mobile-nav a:hover {
  color: var(--gold-deep);
  background: rgba(200, 154, 85, 0.06);
  padding-left: 1.55rem;
}
.mobile-nav a:not(.btn):hover::after {
  opacity: 1;
  transform: translateX(0);
}
/* Active page indicator (set via JS or .active class) */
.mobile-nav a.is-active {
  color: var(--gold-deep);
  background: rgba(200, 154, 85, 0.10);
  font-weight: 600;
}
.mobile-nav a.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
}

/* Get a Quote CTA */
.mobile-nav a.btn {
  margin: 1.5rem 1.25rem 1rem;
  padding: 0.95rem 1rem;
  background: var(--gold);
  color: white;
  font-weight: 500;
  border-radius: 4px;
  border-bottom: none;
  text-align: center;
  justify-content: center;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.02em;
}
.mobile-nav a.btn:hover {
  background: var(--gold-deep);
  color: white;
  padding-left: 1rem;
}

/* ---------- Form Inputs ---------- */
.form-input {
  width: 100%;
  padding: 0.75rem var(--sp-4);
  border: 1px solid var(--line);
  background: white;
  font-size: var(--fs-base);
  font-family: 'Funnel Sans', inherit;
  border-radius: 2px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.form-input:hover { border-color: var(--line-strong); }
.form-input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.form-input[aria-invalid="true"] {
  border-color: #c44;
}
.form-error {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: #c44;
  min-height: 1.25em;
}
/* s131 2026-10-24: .form-error{display:block} 排在 Tailwind 的 .hidden{display:none} 之后
   同特异性下后者被覆盖，导致空的错误条常驻显示。这里显式让 .hidden 优先。 */
.form-error.hidden { display: none !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}


.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 13, 10, 0.35) 0%, rgba(15, 13, 10, 0.2) 50%, rgba(15, 13, 10, 0.6) 100%);
}

.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* V12 s24: was space-between (which pinned hero-text to top, cancelling the 33.3vh margin). Now flex-start + margin-top on hero-text + margin-top:auto on hero-ctas keeps text at 1/3 of hero, ctas at bottom. */
  text-align: left;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-9) var(--sp-5) var(--sp-6);
}

.hero-kicker {
  font-size: 1.125rem; /* V12 s33: +20% over s24's 0.9375rem (1/5 larger). */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  text-align: center;
  margin: 0 0 var(--sp-4) 0; /* V12 s24: top margin removed; hero-text now handles 1/3 vertical position. */
  padding: 0;
  text-indent: 0;
  display: block;
}

.hero-slogan {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: rgba(250, 250, 247, 0.85);
  margin-bottom: var(--sp-6);
  letter-spacing: 0.02em;
}

.hero-title {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: clamp(3.3rem, 8.4vw, 6rem); /* V12 s33: +20% (1/5 larger) over s24. */
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 var(--sp-6) 0;
  padding: 0;
  text-align: center;
  text-indent: 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

.hero-title-large {
  font-size: 1.18em;
  letter-spacing: -0.035em;
}

.hero-subtitle {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.68vw, 1.35rem); /* V12 s33: +20% (1/5 larger). */
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 250, 247, 0.92);
  max-width: none;
  margin: 0 0 var(--sp-8) 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hero-subtitle .hero-stat-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  white-space: nowrap;
}
.hero-subtitle .hero-stat-num {
  font-size: 1.667em;
  line-height: 1;
}


.hero-advantages-label {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: 2.4rem; /* V12 s33: +20% (1/5 larger) over var(--fs-2xl) = 2rem. */
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--paper);
  margin: 0 0 var(--sp-4) 0;
  padding: 0;
  text-align: left;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero-ctas {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20vh; /* ponytail: 1/5 of hero (100vh) from bottom — down from 50vh */
}

.hero-ctas .btn-outline {
  color: var(--paper);
  border-color: rgba(250, 250, 247, 0.7);
}
.hero-ctas .btn-outline:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.hero-meta {
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 250, 247, 0.7);
  letter-spacing: 0.04em;
  margin-top: var(--sp-3);
}

@media (max-width: 768px) {
  .hero { min-height: 100vh; }
  .hero-content { padding: var(--sp-7) var(--sp-5); }
}

/* ---------- Hero text (top section) ---------- */
.hero-text {
  max-width: 900px;
  padding-top: 0;
  text-align: center;
  margin: 6.6vh auto 0; /* V12 s24: text at 1/3 of hero. s31: 22.2→14.8. s32e: 14.8→9.9. s32g: 9.9→6.6 (-1/3 again) per user feedback. */
}

/* ---------- Hero stats (bottom strip, overlaid on hero) ---------- */
.hero-stats {
  margin-top: var(--sp-2); /* moved up 2/3 (was sp-3) */
  padding: var(--sp-5) var(--sp-3);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}

.hero-stat {
  position: relative;
  text-align: center;
  color: var(--paper);
  padding: 0 var(--sp-3);
}

.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.hero-stat-num {
  display: block;
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper);
  margin-bottom: var(--sp-2);
}

.hero-stat-num .unit {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 400;
}

.hero-stat-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hero-content { padding: var(--sp-7) var(--sp-5) var(--sp-5); }
  .hero-subtitle { white-space: normal; }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  .hero-stat:nth-child(2n)::before { display: none; }
  .hero-stat:nth-child(odd) + .hero-stat::before { display: block; }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stat:nth-child(3n)::before { display: none; }
}

/* ---------- Carousel (Featured Stones / Projects) ---------- */
.carousel {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  width: 200%;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-track.show-second {
  transform: translateX(-50%);
}

.carousel-track > section {
  width: 50%;
  flex-shrink: 0;
}

/* ---------- Carousel nav buttons ---------- */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  color: var(--ink);
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.carousel-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.carousel-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.carousel-btn-prev { left: var(--sp-4); }
.carousel-btn-next { right: var(--sp-4); }

/* ============================================
   Motion (impeccable principles applied)
   ============================================ */

/* Hero load cascade */
.hero .hero-bg-img {
  transform: scale(1.06);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero .hero-kicker,
.hero .hero-title,
.hero .hero-advantages-label,
.hero .hero-subtitle,
.hero .hero-ctas {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero.is-loaded .hero-bg-img { transform: scale(1); }
.hero.is-loaded .hero-kicker { opacity: 1; transform: none; transition-delay: 0.15s; }
.hero.is-loaded .hero-title { opacity: 1; transform: none; transition-delay: 0.30s; }
.hero.is-loaded .hero-advantages-label { opacity: 1; transform: none; transition-delay: 0.45s; }
.hero.is-loaded .hero-subtitle { opacity: 1; transform: none; transition-delay: 0.55s; }
.hero.is-loaded .hero-ctas { opacity: 1; transform: none; transition-delay: 0.70s; }

/* Stagger reveal */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* V12 s31: visit-gallery 100+ countries 动画调慢一倍 (0.7s → 1.4s) per user feedback */
.visit-gallery[data-stagger] > * {
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger].is-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 70ms; }
[data-stagger].is-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 140ms; }
[data-stagger].is-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 210ms; }
[data-stagger].is-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 280ms; }
[data-stagger].is-in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 350ms; }
[data-stagger].is-in > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 420ms; }
[data-stagger].is-in > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 490ms; }
[data-stagger].is-in > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 560ms; }
/* s48l fix: projects.html has 17 cards (10 new in v48) but stagger CSS only enumerated 1–9.
   Cards 10–17 (luxury-flat-london, singapore, paris, luxury-club, four-seasons, chengdu, shenzhen, guangzhou)
   were stuck at opacity:0 forever. Single catch-all rule covers any list longer than 9.
   Transition kept (so the reveal still animates), delay clamped to ~700ms to avoid waiting forever. */
[data-stagger].is-in > *:nth-child(n+10) { opacity: 1; transform: none; transition-delay: 630ms; }

/* Section fade (subtle, not uniform) */
.section-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-fade.is-in { opacity: 1; transform: none; }

/* Section header reveal (kicker + h2 + p + cta, cascades in) */
.section-header-fade > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-header-fade.is-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.section-header-fade.is-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 90ms; }
.section-header-fade.is-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 180ms; }
.section-header-fade.is-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 270ms; }
.section-header-fade.is-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 360ms; }
.section-header-fade.is-in > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 450ms; }

/* Image clip-reveal (figures) */
figure[data-fade-img] { overflow: hidden; }
figure[data-fade-img] > img {
  transform: scale(1.08);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease-out;
}
figure[data-fade-img].is-in > img { transform: scale(1); opacity: 1; }

/* Standard block: large headline scales up gently */
.standard-block h2 {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.standard-block.is-in h2 { opacity: 1; transform: scale(1); }

/* Numbered section title: number on top (large), descriptive text below */
.title-numbered {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  line-height: 1.1;
}
.title-numbered .title-number {
  display: block;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(3.25rem, 6.8vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.title-numbered .title-text {
  display: block;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* V12 s92 2026-09-05: per user "Featured Stone 这个金色文字也要缩小10%" — global 10% reduction over the old text-sm (0.875rem) / md:text-base (1rem) values. */
.slabs-featured-label { font-size: 0.7875rem; }
@media (min-width: 768px) { .slabs-featured-label { font-size: 0.9rem; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-stagger] > *, .section-fade, .section-header-fade > *,
  .standard-block h2, figure[data-fade-img] > img,
  .title-numbered .title-number, .title-numbered .title-text,
  .hero .hero-bg-img, .hero .hero-kicker, .hero .hero-title,
  .hero .hero-advantages-label, .hero .hero-subtitle, .hero .hero-ctas,
  .cc-grid.cc-grid--enter > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ 360 degree factory tour ============ */
.factory-360-viewer { background: #fafaf7; border-radius: 2px; overflow: hidden; } /* DDDDD 2026-08-29: ink → paper so the container is light during panorama load (no black flash) */
.factory-360-viewer .pnlm-render-container { cursor: grab; }
.factory-360-viewer .pnlm-render-container:active { cursor: grabbing; }

/* DDDDD 2026-08-29: light-bg loading placeholder shown while the panorama texture streams in */
.factory-360-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: #fafaf7;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-family: 'Funnel Sans', sans-serif;
  letter-spacing: 0.01em;
  z-index: 1;
  pointer-events: none;
}
.factory-360-loader.is-hidden { display: none; }
.factory-360-loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-deep);
  animation: factory-360-pulse 1.2s ease-in-out infinite;
}
@keyframes factory-360-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}


.cv-num {
  font-size: 5rem;
  line-height: 1.15;
  min-width: 3rem;
  display: inline-block;
}
.scene-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }
.scene-btn {
  padding: 0.65rem 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.scene-btn:hover { border-color: var(--ink); }
.scene-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.scene-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Scene buttons (impeccable-aligned minimal tab bar, factory 360° module) ----------
   Replaces the previous gold-pill design (background + border + radius) with a clean
   text tab bar: no background, no border-radius, only a bottom line as active indicator.
   Follows the same minimal-tab pattern used elsewhere on the site. */
.scene-tabs--pill {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.scene-btn-pill {
  padding: 0.75rem 0;
  font-family: 'Funnel Sans', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.scene-btn-pill:hover { color: var(--ink); border-bottom-color: rgba(229, 185, 122, 0.45); } /* s62: hover line also light gold */
.scene-btn-pill.active { color: var(--ink); border-bottom-color: var(--gold); font-weight: 500; } /* s62: light gold (was --ink black) */
.scene-btn-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .scene-btn { transition: none; }

/* ============ Contact form: scene picker (Step 1) ============ */
.scene-pick {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.scene-pick:hover  { border-color: var(--gold); }
.scene-pick.active,
.scene-pick[aria-pressed="true"] {
  border-color: var(--gold);
  background-color: var(--gold-soft);
}
.scene-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .scene-pick { transition: none; }
}
}

/* ============ 360 floor hotspots (Beike-style) ============ */
.factory-360-viewer .floor-marker {
  width: 72px; height: 72px;
  background: rgba(229, 185, 122, 0.95);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  font-family: 'Funnel Sans', system-ui, sans-serif;
  user-select: none;
  transition: transform .2s ease, background-color .2s ease;
  animation: floor-pulse 2.4s ease-in-out infinite;
}
.factory-360-viewer .floor-marker:hover,
.factory-360-viewer .floor-marker:focus-visible {
  background: var(--ink);
  transform: scale(1.1);
  outline: none;
}
.factory-360-viewer .floor-marker:hover .floor-marker-label,
.factory-360-viewer .floor-marker:focus-visible .floor-marker-label { color: var(--paper); }
.factory-360-viewer .floor-marker-arrow {
  font-size: 22px; font-weight: 700; line-height: 1; color: #fff;
}
.factory-360-viewer .floor-marker-label {
  font-size: 9px; font-weight: 600; color: #fff;
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px;
}
@keyframes floor-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 0 rgba(229, 185, 122, 0.55); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 12px rgba(229, 185, 122, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .factory-360-viewer .floor-marker { animation: none; transition: none; }
}

/* ============ 360 viewer arrow nav (left/right scene switch) ============ */
.factory-360-viewer-wrap { position: relative; }
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.arrow-btn:hover  { background: rgba(0, 0, 0, 0.65); }
.arrow-btn:active { transform: translateY(-50%) scale(0.94); }
.arrow-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.arrow-prev { left: 12px; }
.arrow-next { right: 12px; }
.arrow-btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .arrow-btn { transition: none; }
}

/* ============ 360 viewer: Beike-style floor-plan minimap + compass ============ */
.factory-360-minimap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: 'Funnel Sans', system-ui, sans-serif;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.minimap-room {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  background: transparent; border: none;
  cursor: pointer;
  border-radius: 2px;
  font-family: inherit;
  transition: background-color .2s ease;
  min-width: 64px;
}
.minimap-room:hover  { background: rgba(229, 185, 122, 0.12); }
.minimap-room:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.minimap-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--gold);
  display: block;
  transition: all .25s ease;
}
.minimap-room.active .minimap-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(229, 185, 122, 0.22);
  transform: scale(1.25);
}
.minimap-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color .2s ease;
}
.minimap-room.active .minimap-label { color: var(--ink); }
.minimap-connector {
  width: 28px; height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0 2px;
  position: relative;
  top: -7px;
}

/* Compass */
.factory-360-compass {
  position: absolute;
  top: 12px;
  left: 56px; /* sit to the right of Pannellum's own zoom/fullscreen controls */
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.compass-needle {
  transform-origin: 18px 18px;
  transition: transform .08s linear;
}
@media (max-width: 640px) {
  .minimap-label { font-size: 8px; }
  .minimap-room { min-width: 56px; padding: 4px 6px; }
  .minimap-connector { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .minimap-dot, .minimap-label, .compass-needle { transition: none; }
}

/* ---------- One-page quote form ---------- */
.quote-page { background: #f7f7f3; }
.quote-shell { max-width: 1120px; padding-top: clamp(3rem, 7vw, 6.5rem); padding-bottom: var(--sp-10); }
.quote-intro { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.quote-kicker { color: #a66f2d; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.quote-intro h1, .quote-success h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); max-width: 16ch; }
.quote-intro > p:last-child { margin-top: 1.25rem; color: var(--ink-soft); font-size: 1.15rem; }
.quote-form { background: #fff; border-top: 3px solid var(--gold); padding: clamp(1.5rem, 4vw, 4rem); }
.quote-section { border: 0; padding: 0 0 clamp(2.25rem, 5vw, 4rem); margin: 0 0 clamp(2.25rem, 5vw, 4rem); border-bottom: 1px solid var(--line-strong); }
.quote-section legend { font-family: 'Funnel Sans', sans-serif; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.02em; padding: 0; }
.field-help { color: var(--ink-muted); margin: .65rem 0 1.4rem; }
.form-input { width: 100%; padding: .9rem 1rem; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; border-radius: 2px; }
.form-input:focus { border-color: var(--gold-deep); }
.choice-grid, .scene-grid { display: grid; gap: 1rem; }
.choice-grid--two, .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-tile { display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem; border: 1px solid var(--line-strong); cursor: pointer; }
.choice-tile:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-soft); }
.choice-tile input { margin-top: .3rem; accent-color: var(--gold-deep); }
.choice-tile span, .scene-card span { display: grid; gap: .2rem; }
.choice-tile small, .scene-card small { color: var(--ink-muted); font-size: .9rem; }
.upload-panel { margin-top: 1.25rem; }
.upload-drop { display: grid; place-items: center; gap: .25rem; min-height: 140px; border: 1px dashed var(--gold-deep); background: var(--gold-soft); color: var(--ink-muted); cursor: pointer; text-align: center; }
.upload-title { color: var(--ink); font-weight: 600; font-size: 1.1rem; }
#drawings-file { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.file-list { margin-top: .75rem; font-size: .9rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.scene-card { position: relative; border: 1px solid var(--line-strong); cursor: pointer; overflow: hidden; }
.scene-card input { position: absolute; top: 1rem; right: 1rem; z-index: 1; accent-color: var(--gold-deep); width: 18px; height: 18px; }
.scene-card:has(input:checked) { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.scene-card img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; filter: saturate(.8); }
.scene-card span { padding: 1rem 1.1rem 1.15rem; }
.option-row { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.35rem 0 1rem; }
.option-row label { border: 1px solid var(--line-strong); padding: .65rem .9rem; cursor: pointer; }
.option-row label:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-soft); }
.option-row input { accent-color: var(--gold-deep); margin-right: .3rem; }
.dimension-head, .dimension-row { display: grid; grid-template-columns: 1.2fr 1.35fr 90px 42px; gap: .65rem; align-items: center; }
.dimension-head { color: var(--ink-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.dimension-row { margin-bottom: .65rem; }
.remove-row { border: 0; background: transparent; color: var(--ink-muted); font-size: 1.6rem; cursor: pointer; }
.add-row { border: 0; background: none; color: #8b5b23; font: inherit; font-weight: 600; padding: .65rem 0; cursor: pointer; }
.form-textarea { min-height: 140px; resize: vertical; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.contact-grid label { display: grid; gap: .4rem; font-size: .88rem; font-weight: 500; }
.contact-wide { grid-column: 1 / -1; }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.submit-row p { color: var(--ink-muted); font-size: .88rem; }
.form-error { background: #fff1f0; color: #8b1d18; padding: 1rem; margin-bottom: 1.5rem; }
.quote-success { min-height: 65vh; padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.quote-success > p:not(.quote-kicker) { margin: 1.25rem 0 2rem; color: var(--ink-soft); }
@media (max-width: 700px) {
  .choice-grid--two, .scene-grid, .contact-grid { grid-template-columns: 1fr; }
  .dimension-head { display: none; }
  .dimension-row { grid-template-columns: 1fr 1fr 70px 34px; }
  .dimension-row input:first-child { grid-column: 1 / -1; }
  .submit-row { align-items: stretch; flex-direction: column; }
  .submit-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------- Compact, low-friction quote layout ---------- */
.quote-shell { max-width: 980px; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: var(--sp-8); }
.quote-intro { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 2rem; max-width: none; margin-bottom: 2rem; }
.quote-intro .quote-kicker { grid-column: 1 / -1; margin-bottom: -.8rem; }
.quote-intro h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); grid-column: 1 / -1; text-wrap: balance; max-width: none; } /* 2026-08-30: per user "contact页面的标题还是显示3行，我要两行显示完" — drop max font 4rem→3.5rem so "about your stone project." fits on one line in the 980px shell; add text-wrap: balance for graceful wrap on small viewports; max-width: none overrides the inherited 16ch cap from line 1398 (16ch ≈ ~256px at 3.5rem was forcing "about your stone project." to wrap to 2 lines) */
.quote-intro > p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; }
.quote-form { padding: clamp(1.25rem, 3vw, 2.5rem); }
.quote-section { padding-bottom: 1.6rem; margin-bottom: 1.6rem; }
.quote-section legend { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.field-help { margin: .4rem 0 1rem; font-size: .9rem; }
.choice-tile { padding: .9rem 1rem; }
.choice-tile small, .scene-card small { font-size: .82rem; }
.upload-drop { min-height: 96px; }
.scene-card img { aspect-ratio: 16 / 6.2; }
.scene-card span { padding: .7rem .85rem .8rem; }
.option-row { gap: .5rem; margin: .9rem 0 .75rem; }
.option-row label { padding: .48rem .7rem; font-size: .9rem; }
.form-input { padding: .72rem .8rem; font-size: .92rem; }
.form-textarea { min-height: 92px; }
.contact-grid { margin-top: 1rem; gap: .75rem; }
.contact-section { border-bottom: 0; padding-bottom: .5rem; margin-bottom: 1rem; }
.submit-row { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.submit-row p { max-width: none; }
@media (min-width: 760px) {
  [data-project-questions] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  [data-project-questions].hidden { display: none; }
  [data-project-questions] .quote-section { min-width: 0; }
  [data-project-questions] .scene-grid,
  [data-project-questions] .dimensions-section,
  [data-project-questions] .quote-section:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .quote-intro { display: block; }
  .quote-intro .quote-kicker { margin-bottom: .8rem; }
  .quote-intro > p:last-child { margin-top: 1rem; }
}

/* ---------- Every project, same standard ---------- */
/* old gold bg removed; .standard-block remains color-only */
.standard-block-inner { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; padding-top: 0; padding-bottom: 0; }
.standard-range { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 360px; padding-right: clamp(2rem, 5vw, 5rem); font-family: 'Noto Serif', Georgia, serif; font-size: clamp(2.3rem, 5vw, 5rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.standard-range-line { flex: 1; min-width: 32px; height: 1px; background: rgba(26,26,26,.45); }
/* standard-message dark background removed in v3 */
.standard-label { color: var(--gold); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.25rem; }
/* removed .standard-message h2 { color: var(--paper); font-s */
/* removed .standard-message > p:not(.standard-label) { color */
.standard-proof { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; padding: 1.75rem 0 0; margin-top: 1.75rem; border-top: 1px solid rgba(250,250,247,.14); font-size: .86rem; color: rgba(250,250,247,.9); }
.standard-proof li::before { content: '✓'; color: var(--gold); margin-right: .45rem; }
@media (max-width: 820px) {
  .standard-block-inner { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .standard-range { min-height: 180px; padding: 2rem var(--sp-5); }
  .standard-message { margin: 0; padding: 2.75rem var(--sp-5); }
}

/* ---------- Product detail ---------- */
.detail-heading-link { color: inherit; text-decoration: none; }
.detail-heading-link:hover { color: var(--gold-deep); }
.detail-hero { padding: clamp(2rem, 5vw, 5rem) 0; background: var(--paper); }
.detail-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.detail-visual { min-height: 520px; background: rgba(232, 228, 219, 0.25); backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); overflow: hidden; }
.detail-visual img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.detail-visual > div { min-height: 520px; display: grid; place-items: center; background: linear-gradient(135deg, var(--detail-color), #fafaf7); color: var(--ink-soft); font-family: 'Noto Serif', Georgia, serif; font-size: clamp(1.5rem, 4vw, 3rem); }
.detail-back { display: inline-block; color: var(--ink-muted); text-decoration: none; margin-bottom: 2.5rem; }
.detail-type, .detail-section-label { color: var(--gold-deep); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.detail-summary h1 { margin-top: .65rem; font-size: clamp(2.6rem, 5vw, 5rem); }
.detail-lead { color: var(--ink-soft); margin-top: 1.4rem; font-size: 1.08rem; }
.detail-specs { margin-top: 2rem; border-top: 1px solid var(--line-strong); }
.detail-specs > div { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.detail-specs dt { color: var(--ink-muted); font-size: .84rem; }
.detail-specs dd { font-weight: 500; }
.detail-body { padding: clamp(3rem, 7vw, 6rem) 0; background: white; }
.detail-body-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.detail-body h2, .detail-process h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-top: .6rem; }
.detail-applications { display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.detail-applications li { padding: 1.25rem .5rem; border-bottom: 1px solid var(--line-strong); }
.detail-applications li::before { content: '—'; color: var(--gold-deep); margin-right: .65rem; }
.detail-process { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--ink); }
.detail-process h2 { color: var(--paper); }
.detail-process-list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 3rem 0 0; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); }
.detail-process-list li { display: grid; gap: .45rem; padding-right: 2rem; color: var(--paper); }
.detail-process-list span { color: var(--gold); font-family: 'Noto Serif', serif; font-size: 1.5rem; }
.detail-process-list small { color: rgba(250,250,247,.6); }
@media (max-width: 800px) {
  .detail-hero-grid, .detail-body-grid { grid-template-columns: 1fr; }
  .detail-visual, .detail-visual img, .detail-visual > div { min-height: 320px; }
  .detail-process-list { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 520px) { .detail-applications, .detail-process-list { grid-template-columns: 1fr; } }

/* ---------- Products listing visuals ---------- */
.product-list-image, .product-list-placeholder { width: 100%; aspect-ratio: 4 / 3; }
.product-list-image { object-fit: contain; background: #fff; }
.product-list-placeholder { display: grid; place-items: center; padding: 1rem; background: #fff; color: var(--ink-soft); font-family: 'Noto Serif', Georgia, serif; text-align: center; }
.product-list-placeholder.craft { background: #fff; }

/* ---------- Client factory visits ---------- */
.client-visits { padding: clamp(2rem, 4vw, 4rem) 0; background: rgba(232, 228, 219, 0.25); backdrop-filter: blur(20px) saturate(1.05); -webkit-backdrop-filter: blur(20px) saturate(1.05); } /* s64 v7: user restored the warm-tint + backdrop-filter (revert v6) */
.client-visits-head { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.client-visits-label { color: var(--gold-deep); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.client-visits h2 { margin: 0; font-family: "Noto Serif", Georgia, serif; font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; }
.cv-line { display: block; }
.cv-line:first-child { margin-bottom: 0.35em; } /* ponytail: +1/3em line gap (≈ 16.8px on 48px font) so the two lines breathe instead of touching */
.cv-line:first-child { font-size: clamp(1.67rem, 3.33vw, 3.33rem); } /* ponytail: 5vw -> 3.33vw (shrink 1/3 to match other section headings) */
.cv-line:last-child { font-size: clamp(1.73rem, 3.73vw, 3.73rem); } /* ponytail: 5.6vw -> 3.73vw (shrink 1/3) */
.client-visits-body { display: flex; align-items: flex-start; gap: 1.25rem; flex-wrap: wrap; margin-top: clamp(0.5rem, 1vw, 1rem); }
.client-visits-body p { margin: 0; color: var(--ink-soft); font-size: clamp(0.94rem, 1.16vw, 1.08rem); line-height: 1.55; } /* ponytail: 0.83vw -> 1.16vw (enlarge 2/5 = ×1.4, from 12px → ~16.7px on 1440) */
.cv-body-text { flex: 1 1 320px; min-width: 260px; max-width: 900px; display: grid; gap: 0.25rem; }
.client-visits-body strong { font-weight: 700; color: var(--ink); }
.cv-cta {
  /* layout */
  justify-self: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  /* size: 1/3 smaller than .btn (was padding 0.65em 1.5em + font 0.95rem) */
  padding: 0.43em 0;          /* was 0.65em 1.5em (1/3 shrink) */
  font-size: 0.65rem;         /* was 0.95rem (~1/3 shrink) */
  font-weight: 500;
  letter-spacing: 0.01em;
  /* no background frame */
  background: transparent;
  border: none;
  /* main text color */
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ---------- Stone detail: base rules. product-detail.html inline <style> overrides specifics ---------- */
.stone-detail-hero { padding: clamp(2rem, 4vw, 4rem) 0 clamp(3rem, 6vw, 6rem); background: var(--paper); }
.stone-detail-grid { display: grid; gap: clamp(1.6rem, 3.2vw, 3.2rem); } /* 2rem→1.6rem (-20%), 4vw→3.2vw (-20%), 4rem→3.2rem (-20%) per user 2026-08-29, tighten gap between stone-summary (text) column and stone-gallery (image) column */
.stone-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 1rem; min-width: 0; } /* height:100% removed (2026-08-29): was a latent "follow summary column" rule — only took effect when outer grid switched to align-items:stretch. With outer grid locked to start, height is content-driven (4/3 by aspect-ratio). */
.stone-summary { position: sticky; top: 96px; }
.stone-summary h1 { margin-top: .55rem; font-size: clamp(2.5rem, 4vw, 4.6rem); }
.stone-summary .stone-origin { color: var(--ink-muted); margin: .5rem 0 1.25rem; }
.stone-summary .detail-back { margin-bottom: 2rem; }
.stone-price { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-strong); }
.stone-price > div:first-child { display: grid; gap: .2rem; }
.stone-price span { color: var(--ink-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.stone-price strong { font-family: 'Noto Serif', Georgia, serif; font-size: 1.65rem; }
.unit-switch { display: inline-flex; border: 1px solid var(--line-strong); }
.unit-switch button { border: 0; padding: .45rem .65rem; background: transparent; color: var(--ink-muted); cursor: pointer; }
.unit-switch button.active { background: var(--ink); color: var(--paper); }
.price-note { margin-top: .75rem; color: var(--ink-muted); font-size: .78rem; line-height: 1.5; }
.stone-story { padding: clamp(3.5rem, 7vw, 7rem) 0; background: white; }
.stone-story-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 7vw, 7rem); }
.stone-story h2 { font-size: clamp(2rem, 4vw, 3.7rem); margin-top: .6rem; }
.stone-story-copy { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; margin-bottom: 2rem; }
@media (max-width: 960px) { .stone-detail-grid { grid-template-columns: 1fr; } .stone-summary { position: static; } }
@media (max-width: 650px) { .stone-story-grid { grid-template-columns: 1fr; } }
.client-visits-body p + p { white-space: nowrap; }
.cv-cta:hover { color: var(--gold-deep); }

/* ---------- Taj Mahal editorial feature ---------- */
.taj-editorial { padding: clamp(4rem, 9vw, 9rem) 0; background: #fff; border-top: 1px solid var(--line); }
.taj-editorial-intro { max-width: 760px; margin: 0 auto clamp(3rem, 8vw, 7rem); text-align: center; }
.taj-editorial-intro h2 { margin: .8rem auto 1.5rem; font-family: 'Noto Serif', Georgia, serif; font-size: clamp(2.7rem, 6vw, 6rem); font-weight: 400; line-height: .98; letter-spacing: -.04em; }
.taj-editorial-intro > p:last-child { max-width: 54ch; margin: 0 auto; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
.taj-editorial-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 8vw, 8rem); align-items: center; margin-bottom: clamp(4rem, 10vw, 9rem); }
.taj-editorial-row-reverse { grid-template-columns: .9fr 1.1fr; }
.taj-editorial figure { margin: 0; }
.taj-editorial figure img { width: 100%; display: block; }
.taj-editorial figcaption { margin-top: .8rem; color: var(--ink-muted); font-size: .78rem; letter-spacing: .05em; }
.taj-editorial-note { max-width: 43ch; color: var(--ink-soft); font-family: 'Noto Serif', Georgia, serif; font-size: 1.12rem; line-height: 1.75; }
.taj-editorial-note p { margin-bottom: 1.4rem; }
.taj-editorial-note strong { color: var(--ink); font-size: 1.35rem; }
.taj-drop { float: left; margin: .15rem .6rem 0 0; font-size: 5rem; line-height: .72; color: var(--ink); }
.taj-editorial-closing { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 8vw, 8rem); align-items: center; padding-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--ink); }
.taj-editorial-closing img { width: 100%; display: block; }
.taj-editorial-closing > div { max-width: 34ch; }
.taj-editorial-closing > div p:not(.detail-section-label) { color: var(--ink-soft); font-family: 'Noto Serif', Georgia, serif; font-size: 1.3rem; line-height: 1.6; margin: 1rem 0 1.5rem; }
@media (max-width: 720px) {
  .taj-editorial-row, .taj-editorial-row-reverse, .taj-editorial-closing { grid-template-columns: 1fr; gap: 1.5rem; }
  .taj-editorial-row-reverse figure { order: -1; }
}

/* ---------- Standard block v6: zero top/bottom padding, +1/10 height ---------- */
.standard-block { color: var(--ink); }
.standard-block-inner { display: flex; align-items: center; justify-content: center; margin: var(--sp-4) auto; padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem); } /* ponytail: vertical padding/margin cut another 1/3 (was clamp 1.5-2.5 + sp-5); upgrade to spacing tokens if reused */
.standard-message { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.standard-label { color: var(--gold-deep); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.standard-message h2 { margin: 0; max-width: 18ch; color: var(--ink); font-family: 'Noto Serif', Georgia, serif; font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.standard-subtitle { margin: 0; max-width: 42ch; color: var(--ink); font-family: 'Noto Serif', Georgia, serif; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.5; }
.standard-copy { margin: 0; max-width: 56ch; color: var(--ink-soft); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.65; }
.standard-copy-divider { display: block; }
.standard-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; padding: clamp(1.25rem, 2.5vw, 2rem) 0 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid rgba(255,255,255,.16); color: #E0E0E0; font-size: clamp(.75rem, 1vw, .9rem); line-height: 1.35; }
.standard-proof li { display: flex; gap: .5rem; align-items: flex-start; }
.standard-proof li::before { content: '✓'; flex: 0 0 auto; color: #C8A97E; font-weight: 700; }
@media (max-width: 900px) {
  .standard-block-inner { grid-template-columns: 1fr; }
  .standard-range, .standard-message { min-height: 320px; }
}
@media (max-width: 560px) {
  .standard-range { font-size: clamp(2.4rem, 12vw, 4rem); }
  .standard-proof { grid-template-columns: 1fr; gap: .7rem; }
}

.standard-range-digits { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 3rem); }
.standard-range-digits .standard-range-line { flex: 0 0 clamp(2rem, 5vw, 5rem); }

.visit-story { padding: clamp(5rem, 10vw, 10rem) 0; background: var(--paper); }
.visit-story-inner { display: grid; gap: 1.25rem; max-width: 880px; text-align: center; }
.visit-story-kicker { color: var(--gold-deep); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.visit-story-quote { font-family: 'Noto Serif', Georgia, serif; font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.18; letter-spacing: -.02em; color: var(--ink); margin: 0; text-wrap: balance; }
.visit-story-quote p { margin: 0; }

.visit-story-meta { color: var(--ink-soft); font-size: 1rem; }
.visit-story-meta span { color: var(--ink); font-weight: 600; }
.visit-story-cta { color: var(--ink); text-decoration: none; width: max-content; margin: 1rem auto 0; border-bottom: 1px solid var(--gold-deep); padding-bottom: .15rem; }

.standard-promise { padding: clamp(5rem, 9vw, 9rem) 0; background: #1A1A1A; color: #fff; }
.standard-promise-inner { max-width: 980px; }
.standard-promise-kicker { color: #C8A97E; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.25rem; }
.standard-promise h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -.035em; max-width: 18ch; }
.standard-promise-deck { margin-top: 1.25rem; max-width: 56ch; color: #B0B0B0; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.6; }
.standard-promise-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem); padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); padding-top: clamp(2rem, 4vw, 3rem); }
.standard-promise-steps li { display: grid; gap: .65rem; }
.standard-promise-steps span { color: #C8A97E; font-family: 'Noto Serif', Georgia, serif; font-size: 1.5rem; }
.standard-promise-steps h3 { color: #fff; font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 500; letter-spacing: -.01em; }
.standard-promise-steps p { color: #E0E0E0; font-size: .92rem; line-height: 1.6; }
@media (max-width: 720px) { .standard-promise-steps { grid-template-columns: 1fr; } }

.stone-editorial-modules { padding: clamp(4rem, 9vw, 9rem) 0; background: #fff; border-top: 1px solid var(--line); }
.stone-editorial-modules-head { max-width: 880px; margin: 0 auto clamp(3rem, 7vw, 6rem); text-align: center; }
.stone-editorial-modules-head h2 { margin: .8rem 0 1.25rem; font-family: 'Noto Serif', Georgia, serif; font-size: clamp(2.6rem, 6vw, 6rem); font-weight: 400; line-height: .98; letter-spacing: -.04em; }
.stone-editorial-modules-deck { max-width: 52ch; margin: 0 auto; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.6; }
.editorial-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; margin-bottom: clamp(3rem, 7vw, 6rem); }
.editorial-row-reverse { grid-template-columns: .85fr 1.15fr; }
.editorial-row figure { margin: 0; }
.editorial-row figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.editorial-text { max-width: 46ch; }
.editorial-text h3 { font-family: 'Noto Serif', Georgia, serif; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; margin: .9rem 0 1.2rem; }
.editorial-text p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
@media (max-width: 720px) { .editorial-row, .editorial-row-reverse { grid-template-columns: 1fr; gap: 1.5rem; } .editorial-row-reverse figure { order: -1; } }

.stone-editorial-modules-head h2 { white-space: nowrap; }
@media (max-width: 720px) { .stone-editorial-modules-head h2 { white-space: normal; font-size: clamp(2.6rem, 9vw, 4.5rem); } }




/* ---------- Craft series: banner + tab categories ---------- */
.series-back {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.series-back:hover { color: var(--ink); }
.series-lede {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}
.series-categories-list {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.series-categories-list a {
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.series-categories-list a:hover:not(.active) { color: var(--ink); }
.series-categories-list a.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
  font-weight: 500;
  cursor: default;
}
.series-categories-list a .count {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-left: 0.25rem;
}
.series-categories-list a.active .count { color: var(--gold-deep); }
.series-grid { padding-bottom: 0; }
.series-card-link {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
  font-weight: 500;
}
}


/* ---------- Frosted glass: kept position:relative for stacking context, ::before was removed in product-detail.html inline <style> (s101 / sXXXX) ---------- */
.stone-detail-hero { position: relative; }
.stone-detail-hero .container-site { position: relative; z-index: 1; }


/* ---------- Factory 360 viewer: fixed height to align with right text column ---------- */
/* ponytail: previous 770px !important override removed (v6); viewer now uses 16:9 aspect; left col/right aside balance via grid stretch */

/* ---------- Visit gallery: aspect ratios match the actual image dimensions ---------- */
.visit-photo-main { aspect-ratio: 3 / 4; }
.visit-photo-walkthrough { aspect-ratio: 3 / 4; }
.visit-photo-detail { aspect-ratio: 3 / 4; }
/* ---------- Visit gallery: 6-col grid, real client photos, row 3 cells span 1.5 cols (1.5x wider) ---------- */
.visit-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
}
.visit-gallery > .placeholder-image,
.visit-gallery > .visit-photo {
  border-radius: 2px;
  margin: 0;
}
.visit-gallery > .visit-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper-deep);
}
.visit-gallery > .placeholder-image:nth-child(-n+3),
.visit-gallery > .visit-photo:nth-child(-n+3) {
  grid-column: span 2;
  aspect-ratio: 3 / 4; /* ponytail: rows 1+2 stretched 1/3 (was 1/1); upgrade to JS-driven if cell counts change */
}
.visit-gallery > .placeholder-image:nth-child(n+4),
.visit-gallery > .visit-photo:nth-child(n+4) {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
  .visit-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .visit-gallery { grid-template-columns: 1fr; }
}

/* ---------- About: 6-step process grid (s62) ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.process-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.process-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.08);
  border-color: var(--line-strong);
}
.process-card-image {
  aspect-ratio: 4 / 3;            /* image area ~2/3 of card */
  background: linear-gradient(135deg, #ebe0c8 0%, #d4c19a 100%);
  display: grid;
  place-items: center;
  color: rgba(26, 26, 26, 0.32);
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.process-card-text {
  padding: 1.1rem 1.25rem 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.process-card-num {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1.6rem;
  color: var(--gold-deep);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.2rem;
}
.process-card-text h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.process-card-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---------- Factory 360: left = 360 viewer, right = 3 cards, both sides aligned ---------- */
.factory-360-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.factory-360-header .kicker { margin-bottom: 0; }
.factory-360-hint { margin: 0; }
.factory-360-grid { display: grid; grid-template-columns: 2.27fr 1fr; gap: 2rem; align-items: start; }
.factory-360-pano { width: 100%; }
.factory-360-pano .factory-360-viewer { width: 100%; height: clamp(320px, 30vw, 420px); background: var(--ink); border-radius: 2px; overflow: hidden; }
.factory-360-viewer--tall { height: clamp(360px, 38vw, 540px) !important; }
.factory-360-viewer--x150 { width: 100%; height: clamp(562px, 49vw, 718px) !important; min-height: 562px; } /* s63 v4: bumped +30% (432→562, 552→718) per user */
.factory-360-cards { display: flex; flex-direction: column; gap: 1rem; }
.factory-360-card { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.factory-360-num { font-family: "Noto Serif", Georgia, serif; font-size: 1.6rem; font-weight: 500; color: var(--gold-deep); line-height: 1; flex: 0 0 1.6rem; }
.factory-360-card-body h3 { font-family: "Noto Serif", Georgia, serif; font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 .35rem; }
.factory-360-card-body p { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.factory-360-cards-header { margin-bottom: 1.25rem; }
.factory-360-cards-title { font-family: "Noto Serif", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; line-height: 1.3; }
.factory-360-cards-subtitle { font-size: .95rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.factory-360-footer-hint { font-size: .85rem; color: var(--ink-muted); margin: .5rem 0 0; line-height: 1.5; }
@media (max-width: 900px) {
  .factory-360-grid { grid-template-columns: 1fr; }
  /* s104 2026-09-05: per user "工厂模块360图片的高度缩短30%" — the actual height is set by .factory-360-viewer--x150 (height: clamp(562px, 49vw, 718px) !important). 30% shorter = 70% of those values = clamp(393px, 34vw, 503px). Need !important to win against the x150 rule. The homepage's 360 viewer is NOT wrapped in .factory-360-pano, so target the class directly. */
  .factory-360-viewer--x150 { height: clamp(393px, 34vw, 503px) !important; min-height: 393px; }
}

/* ---------- Stone Spotlight: full-bleed peek carousel, 6 product cards ---------- */
.stone-spotlight {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 24px; /* s64 v3: room for prev/next button box-shadow so the shadow doesn't get clipped at the bottom edge by overflow:hidden */
  --spotlight-pad-l: 33vw;   /* shifted right 3vw to balance right-side peek + nudge user request */
  --spotlight-pad-r: 27vw;
  --slide-w: 38.4vw;         /* 48vw x 0.8 */
  --spotlight-duration: 800; /* s98: JS reads this for the slide+fade parallel transition. Mobile overrides to 420. */
}
.stone-spotlight-track {
  display: flex;
  gap: 2.2rem; /* s62: bumped +1/10 from 2rem (V12 s25 cumulative). Cards have ~2.7rem visible breathing room (gap + 0.5vw slide padding). */
  padding: 0 var(--spotlight-pad-r) 0 var(--spotlight-pad-l);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  cursor: grab;
}
.stone-spotlight-track.is-dragging { cursor: grabbing; transition: none; }
/* s50i: per user "100+varieties in stock.和100+techniques in craft.的图片往右移动35px" — bump left padding from +20px to +35px */
.stone-spotlight[data-shift-left="50"] { --spotlight-pad-l: calc(27vw + 35px); }
.stone-spotlight-slide {
  flex: 0 0 var(--slide-w);
  min-width: 0;
  padding: 0 0.5vw;
  scroll-snap-align: start;
}
/* s62: nudge only the FIRST slide of each carousel ~0.75vw to the right; nav buttons stay put */
.stone-spotlight-slide[data-spotlight-index="0"] {
  margin-left: 0.75vw;
}
.stone-card {
  display: block;
  position: relative;
  background: var(--ink);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: box-shadow 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.stone-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}
.stone-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
}
.stone-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.stone-card:hover .stone-card-image img { transform: scale(1.04); }

/* ---------- "View More" CTA card (always at end of stone spotlight) ---------- */
.stone-spotlight-slide--view-more {
  order: 9999; /* always at the end of the track, even when new stones are added before it in HTML */
}
.stone-card--view-more {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.stone-card--view-more:hover {
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.stone-card-image--view-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--paper) 0%, rgba(232, 228, 219, 0.35) 100%);
}
.view-more-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  color: var(--ink);
  padding: 1.5rem;
  height: 100%;
  width: 100%;
}
.view-more-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep, #c89a55);
  font-weight: 600;
}
.view-more-number {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(2.8rem, 4.6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin: 0.35rem 0 0.2rem;
}
.view-more-text {
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.view-more-arrow {
  font-size: 1.6rem;
  color: var(--gold);
  margin-top: 0.6rem;
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.stone-card--view-more:hover .view-more-arrow {
  transform: translateX(4px);
}
.stone-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.85rem 1.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.32) 45%,
    rgba(0, 0, 0, 0) 100%);
  color: #fff;
  pointer-events: none;
}
.stone-card-origin {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}
.stone-card-name {
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  line-height: 1.15;
}

.spotlight-nav {
  position: static;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.78);
  border: 0; /* s64 v5: user reverted — no rim */
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
  flex: 0 0 auto;
}
.spotlight-nav:hover {
  background: #fff;
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.spotlight-progress {
  margin: 2rem auto 0;
  max-width: 560px;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.spotlight-progress-bar {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--gold-deep);
  transition: width 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.spotlight-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
  position: relative;
}
.spotlight-controls .spotlight-progress {
  flex: 1 1 auto;
  margin: 0;
  max-width: 560px;
}

.spotlight-cta {
  display: inline-block;
  margin-top: 2.25rem;
  padding: 0.9rem 2rem;
  background: #f0d9a8; /* V12 s33c: light gold */
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid #f0d9a8;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.spotlight-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

@media (max-width: 900px) {
  .stone-spotlight { --slide-w: 48vw; --spotlight-pad-l: 28vw; --spotlight-pad-r: 24vw; }
}
@media (max-width: 600px) {
  .stone-spotlight { --slide-w: 52.8vw; --spotlight-pad-l: 25vw; --spotlight-pad-r: 22vw; }
  .spotlight-nav { width: 36px; height: 36px; font-size: 0.9rem; }
  .stone-card-body { padding: 0.85rem 1.05rem 1.05rem; }
  .stone-card-name { font-size: 0.9rem; }
  .stone-card-origin { font-size: 0.52rem; letter-spacing: 0.12em; }
}

/* ---------- Standalone "View All 300+ Stones" card (projects.html s31) ---------- */
.view-all-stones-card {
  display: block;
  max-width: 28rem;       /* ~448px, similar to the carousel floating card */
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  aspect-ratio: 3/4;       /* match the image: tall portrait card */
  transition: box-shadow 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.view-all-stones-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
  border-color: var(--gold);
}
.view-all-stones-card:hover .view-more-arrow {
  transform: translateX(4px);
}



/* ---------- s52: i18n language switcher — single round dropdown ---------- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  margin-left: -15px;             /* s67: shift 15px left per user */
  position: relative;
}
.lang-dropdown {
  position: relative;
  display: inline-block;
}
.lang-current {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 30.4px;                  /* s67: 38px × 0.8 = 30.4px (-20% per user) */
  height: 30.4px;
  border-radius: 50%;             /* round per user */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: var(--ink-soft, #3d3d3d);
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lang-current:hover,
.lang-dropdown.open .lang-current {
  border-color: var(--gold);
  background: var(--paper);
  color: var(--gold-deep, #c89a55);
}
.lang-current:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.lang-current-code {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
.lang-current-caret {
  display: none;                  /* keep button round & compact */
}
.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;                        /* align to right edge so it doesn't overflow on mobile */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 56px;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
[dir='rtl'] .lang-list { right: auto; left: 0; }   /* RTL flip */
.lang-option {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  color: var(--ink-soft, #3d3d3d);
  transition: background 0.12s ease, color 0.12s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
.lang-option:hover { background: var(--paper-deep, #f3f0e8); color: var(--ink); }
.lang-option.is-active { background: var(--gold); color: var(--ink); }

/* ---------- s52: RTL (Arabic) layout overrides ---------- */
[dir='rtl'] .site-nav,
[dir='rtl'] .cta-block,
[dir='rtl'] .container-site {
  direction: rtl;
}
[dir='rtl'] .text-center { text-align: center; }    /* keep centered where intended */
[dir='rtl'] .lang-switcher { margin-left: 0; margin-right: 0.25rem; }

/* ---------- s52: text length adaptation (CJK / Hangul / Cyrillic tend to be wider) ---------- */
[lang='ko'] h1, [lang='ko'] h2, [lang='ja'] h2, [lang='vi'] h2, [lang='ms'] h2 {
  line-height: 1.35;          /* tighter line-height for CJK */
  word-break: keep-all;
}
[lang='ko'] .title-numbered,
[lang='ja'] .title-numbered,
[lang='vi'] .title-numbered,
[lang='ms'] .title-numbered {
  font-size: clamp(1.8rem, 4vw, 2.8rem);  /* shrink CJK titles a bit */
}
[lang='ar'] h1, [lang='ar'] h2, [lang='ar'] h3 {
  font-family: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
  letter-spacing: 0;
}


@media (max-width: 768px) {
  /* V12 s78 2026-09-04: hero reverted to portrait / full-screen per user. The 4:3 landscape cut off "Better Pricing." entirely. min-height:100vh gives proper vertical room. */
  /* V12 s81 2026-09-05: per user hero banner image should be 1/3 shorter. 100vh -> 67vh (cut 33vh). */
  .hero { min-height: 67vh; min-height: 67dvh; }
  .hero-content { padding: var(--sp-7) var(--sp-5); min-height: 67vh; min-height: 67dvh; }

/* V12 s93 2026-09-06: per user mobile title centering fix. */
  .title-numbered {
    align-items: center;
    text-align: center;
  }
  .title-numbered .title-text {
    margin-left: 0.4rem;
  }
  .section-header-fade > div { justify-content: center; }
  /* fix product page H1 mobile centering: parent flex had justify-between, override to center */
  .title-numbered { width: 100%; }
  .section-header-fade, .mb-10.section-header-fade {
    text-align: center;
  }

  /* V12 s78 2026-09-04: spotlight cards. User feedback: the IMAGE itself was tiny, only the slide CONTAINER grew with my previous --slide-w:78vw change because the carousels data-shift-left="50" = calc(27vw + 35px) pushed the card off-screen to the left. So the visible image was only ~240px even though the slide was 292px. Fix: full-width slide (100vw) + override the left shift to 4vw. Now the IMG inside (which fills the card at 100vw x 75vw) is genuinely 28% larger than the previous 78vw layout, and 160% larger than the original 38.4vw. */
  .stone-spotlight-slide .stone-card-image { aspect-ratio: 4 / 3; max-width: none; margin: 0 auto; }
  /* Dropped the transform: scale(1.3) from s76. User said the IMAGE didnt grow, only the container. Scaling content without growing the box just zooms in (cards stayed same visual size with cropped material). Now the image area itself grows by widening the container. */
  /* V12 s80 2026-09-05: per user image must be centered. slide-w:100vw + 4vw pad overflowed right edge (slide ended at 104vw). Use 90vw slide + 5vw equal padding so the card sits centered in the viewport with breathing room. */
  .stone-spotlight { --slide-w: 90vw; --spotlight-pad-l: 5vw; --spotlight-pad-r: 5vw; padding-left: 0; padding-right: 0; }
  /* V12 s97 2026-09-05: per user "图片往左移动8px" — shrink the left padding by 8px so the track (and the visible card inside it) shifts 8px to the left. */
  .stone-spotlight[data-shift-left="50"] { --spotlight-pad-l: calc(5vw - 8px); --spotlight-pad-r: 5vw; }
  /* s99 2026-09-05: per user "第一张图片要往左移动3px" — only the first slide needs an extra 3px leftward nudge. The desktop rule already gives the first slide margin-left: 0.75vw (~2.8px on a 375px phone), so subtract 3px to shift it left by exactly 3px regardless of viewport. Other slides are unaffected. */
  .stone-spotlight-slide[data-spotlight-index="0"] { margin-left: calc(0.75vw - 3px); }
  /* s98 2026-09-05: halve the carousel transition on mobile so tapping prev/next feels snappy instead of the 800ms desktop melt. The first-real fade runs the same duration so they stay in lockstep. */
  .stone-spotlight { --spotlight-duration: 420; }
  .stone-card:hover .stone-card-image img { transform: none; }

  /* Hero text (s76 selections: 30% smaller Selection line + 50px upward shift, still in effect). */
  .hero-text { margin: 4vh auto 0; transform: translateY(-50px); }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3rem); margin-bottom: var(--sp-3); }
  .hero-title > span:not(.hero-title-large) { font-size: 0.7em; }
  .hero-kicker { font-size: 0.85rem; margin-bottom: var(--sp-3); }

  /* V12 s92 2026-09-05: per user "手机版的首页的所有标题都改为居中显示" — center every section header (kicker + h2) on mobile, plus the title-numbered flex column children. hero-text already centers via its own rule. */
  .section-header-fade { text-align: center; }
  .title-numbered { align-items: center; }
  .kicker { text-align: center; }
  .client-visits-label { text-align: center; }

  /* V12 s92 2026-09-05: per user "Slabs 页面标题的Varieties in Stock.这几个文案缩小20%，并且要一行显示完。整个标题模块要居中显示" — collapse the 2-col header grid to a single centered column on mobile so kicker + h1 + Featured Stone all stack and center. nowrap keeps Varieties in Stock. on one line. */
  .slabs-header-grid { grid-template-columns: 1fr !important; justify-items: center; gap: 0.4rem !important; }
  .slabs-header-grid > div { text-align: center; }
  .slabs-header-grid .title-numbered { align-items: center; }
  /* On mobile the strict 80%-of-original clamp(2.4rem, 3.84vw, 3.2rem) is still ~380px wide and overflows small phones, so retune the clamp for <=768px only — keeps the desktop 20% reduction intact, just packs the text into narrower viewports. */
  .slabs-title-text { white-space: nowrap; font-size: clamp(1.625rem, 8vw, 2.4rem) !important; }

  /* V12 s94 2026-09-05: per user "Varieties in Stock.和Techniques in Craft.模块的这部分文案字号放大20%，放大后要确保也是一行显示完" — bump 0.8x's clamp(1.5rem, 2.4vw, 2rem) to 1.0x of the original-ish size, then +20%: clamp(1.8rem, 2.88vw, 2.4rem). nowrap guarantees one line on phones down to ~320px. */
  .hp-feature .title-text { font-size: clamp(1.8rem, 2.88vw, 2.4rem) !important; white-space: nowrap; }

  /* V12 s95 2026-09-05: per user "翻页功能有点超页面了，左边的翻页按键要往右移动5px，右边的翻页按键要往左移动5px" — add 5px horizontal padding to spotlight-controls so the centered flex row shrinks by 10px total, pulling each nav button 5px back from the viewport edge. */
  .spotlight-controls { padding: 0 5px; }
}

/* ============================================================
   s131 2026-10-24 · 联系页重做（转化优先）
   目标：把 /contact 的 12 秒停留 / 0 转化拉到正常水平。
   改动：1) WhatsApp 主 CTA 进首屏  2) 表单首屏只留 3 个必填
        3) 加社会证明与流程说明  4) 移动端单列
   ============================================================ */
/* 外层：整块 hero 的上下留白。左右两栏共用同一个顶部基线。 */
.contact-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.75rem, 4vw, 3rem); }
/* 两栏：1fr / 1fr 等分，右框（表单）与左栏内容左右边缘与整页容器对齐 */
.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-hero-grid > * { min-width: 0; }
/* 左栏 kicker 与右框顶部视觉对齐：kicker 行高比右框顶部多出的上边距做负补偿 */
.contact-hero-grid > :first-child > .quote-kicker:first-child { margin-top: -.15rem; }
.contact-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; max-width: 18ch; margin: 0 0 1.25rem; }
.contact-hero .lede { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; max-width: 46ch; margin: 0 0 1.5rem; }

.wa-cta { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line-strong); border-left: 3px solid #25d366; border-radius: 4px; padding: 1.1rem 1.25rem; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.wa-cta:hover { border-color: #25d366; box-shadow: 0 6px 20px -8px rgba(37,211,102,.5); transform: translateY(-1px); }
.wa-cta .wa-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #25d366; display: grid; place-items: center; }
.wa-cta .wa-txt { display: grid; gap: .15rem; }
.wa-cta .wa-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.wa-cta .wa-num { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.wa-cta .wa-note { font-size: .8rem; color: var(--ink-soft); }

.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-top: 1.5rem; }
.proof-cell { background: #fff; padding: .9rem .85rem; }
.proof-cell .n { font-family: 'Noto Serif', serif; font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.proof-cell .l { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-top: .3rem; }

.quick-form { background: #fff; border: 1px solid var(--line-strong); border-top: 3px solid var(--gold); border-radius: 4px; padding: clamp(1.25rem, 3vw, 2rem); }
.quick-form h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; }
.quick-form .qf-sub { color: var(--ink-soft); font-size: .85rem; margin: 0 0 1.25rem; }
.qf-fields { display: grid; gap: .9rem; }
.qf-fields label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 500; }
.qf-fields .opt { font-weight: 400; color: var(--ink-mute); }
.qf-actions { margin-top: 1.25rem; display: grid; gap: .85rem; }
.qf-submit { width: 100%; padding: 1rem 1.25rem; background: var(--ink); color: #fff; border: 0; border-radius: 2px; font-size: .95rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background .15s; }
.qf-submit:hover:not(:disabled) { background: var(--gold-deep); }
.qf-submit:disabled { opacity: .45; cursor: not-allowed; }
.qf-fine { font-size: .78rem; color: var(--ink-mute); text-align: center; line-height: 1.5; }

.qf-more { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.qf-more > summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft); list-style: none; display: flex; align-items: center; gap: .45rem; }
.qf-more > summary::-webkit-details-marker { display: none; }
.qf-more > summary::after { content: '\203A'; margin-left: auto; font-size: 1.1rem; color: var(--gold-deep); transition: transform .2s; }
.qf-more[open] > summary::after { transform: rotate(90deg); }
.qf-more-body { padding-top: 1rem; display: grid; gap: .9rem; }
.qf-more-body .contact-grid { margin-top: 0; }

.next-steps { margin-top: 1.5rem; display: grid; gap: .6rem; }
.next-step { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }
.next-step .n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); font-size: .7rem; font-weight: 600; display: grid; place-items: center; margin-top: .1rem; }

@media (max-width: 860px) {
  .contact-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-hero h1 { max-width: none; }
}
@media (max-width: 480px) {
  .proof-row { grid-template-columns: 1fr; }
}

/* s131 2026-10-25 · 联系页内容宽度与站点主容器对齐
   .quote-shell 默认 max-width:980px，比 .container-site(1400px) 窄 420px，
   导致联系页整块内容与页眉/页脚左右不对齐。这里放开限宽，
   让两栏铺满主容器，右框右边缘 = 站点容器右边缘。 */
.quote-shell--wide { max-width: 1400px; }
@media (max-width: 1440px) {
  .quote-shell--wide { max-width: 100%; }
}