/* Raynovation site, v3. Tokens follow the brand guidelines (brand/logo-design/final/guidelines.pdf). */
@font-face { font-family: "Montserrat"; font-weight: 400 700; font-display: swap; src: url(assets/fonts/montserrat.woff2) format("woff2"); }
@font-face { font-family: "Noto Serif SC"; font-weight: 600; font-display: swap; src: url(assets/fonts/noto-serif-sc-600.woff2) format("woff2"); }
@font-face { font-family: "Noto Sans SC"; font-weight: 400 500; font-display: swap; src: url(assets/fonts/noto-sans-sc.woff2) format("woff2"); }

:root {
  --char: #2B2B2B;      /* structure, text, dark bands */
  --char-2: #232323;    /* footer, one step deeper */
  --oak: #B07A3B;       /* measurement only: ticks, pointer, dimension lines */
  --paper: #FAF7F2;
  --ink-2: #5C5954;     /* secondary text on paper */
  --mist: #CFC8BD;      /* secondary text on charcoal */
  --line: #D6D0C6;
  --ruler-w: 64px;
  --head-h: 84px;
  --pad: clamp(20px, 4.2vw, 64px);
  --sans: "Montserrat", "Noto Sans SC", system-ui, sans-serif;
  --zh-body: "Noto Sans SC", "Montserrat", system-ui, sans-serif;
  --zh-head: "Noto Serif SC", "Noto Sans SC", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--head-h); }
body {
  margin: 0; background: var(--paper); color: var(--char);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; }

/* bilingual: one language visible at a time */
html[data-lang="en"] [lang="zh"], html[data-lang="zh"] [lang="en"] { display: none !important; }
html[data-lang="zh"] body { font-family: var(--zh-body); line-height: 1.8; }
html[data-lang="zh"] h1, html[data-lang="zh"] h2 { font-family: var(--zh-head); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; }
html[data-lang="zh"] h3 { font-family: var(--zh-body); font-weight: 500; letter-spacing: 0.06em; }
html[data-lang="zh"] :is(p, dd) { text-wrap: pretty; }
.nw { white-space: nowrap; }
html[data-lang="zh"] :is(h2, h3):not(.split) { text-wrap: balance; }

.skip { position: fixed; left: -999px; top: 8px; background: var(--char); color: var(--paper); padding: 8px 14px; z-index: 200; }
.skip:focus { left: calc(var(--ruler-w) + 8px); }

/* ---------- opening moment ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 150; background: var(--char);
  display: grid; place-items: center;
}
.js.intro-done .intro { display: none; }
.intro-tape { display: flex; align-items: baseline; gap: 18px; width: min(560px, 72vw); color: var(--paper); }
.intro-line { flex: 1; height: 2px; background: var(--oak); transform-origin: left; transform: scaleX(0); align-self: center;
  /* end tick */ box-shadow: inset -2px 0 0 var(--oak); }
.intro-count { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; min-width: 4.2ch; text-align: right; }
.intro-unit { color: var(--oak); font-weight: 600; }

/* ---------- the ruler ---------- */
.ruler {
  position: fixed; inset: 0 auto 0 0; width: var(--ruler-w); z-index: 40;
  background: var(--paper); border-right: 1px solid var(--line);
}
.ruler-scale {
  position: absolute; inset: 0 0 0 auto; width: 26px; opacity: .6;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to bottom, var(--oak) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, transparent 0 30px, var(--oak) 30px 31px, transparent 31px 60px),
    repeating-linear-gradient(to bottom, var(--oak) 0 1px, transparent 1px 6px);
  background-size: 26px 100%, 17px 100%, 9px 100%;
  background-position: right top, right top, right top;
}
.ruler-marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ruler-marks li { position: absolute; left: 0; width: 38px; transform: translateY(-50%); }
.ruler-marks a {
  display: block; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2);
  text-decoration: none; padding: 6px 0; white-space: nowrap; transition: color .3s;
}
.ruler-marks a:hover, .ruler-marks a[aria-current="true"] { color: var(--char); }
html[data-lang="zh"] .ruler-marks a { transform: none; text-orientation: upright; letter-spacing: 0.2em; font-weight: 500; }
.ruler-pointer {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--oak);
  transform: translateY(var(--y, 0px)); will-change: transform;
}
.ruler-pointer::after {
  content: ""; position: absolute; right: -1px; top: -11px; width: 12px; height: 12px;
  background: var(--oak); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---------- header: light over the hero, solid once you scroll ---------- */
.top {
  position: fixed; top: 0; right: 0; left: var(--ruler-w); z-index: 30; height: var(--head-h);
  padding: 0 var(--pad); display: flex; align-items: center; gap: 36px;
  color: var(--paper); transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s, height .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.top.solid { background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); color: var(--char); border-bottom-color: var(--line); height: 68px; }
.brand { position: relative; display: block; height: 40px; }
.brand img { height: 40px; width: auto; transition: opacity .4s; }
.brand .brand-light { position: absolute; inset: 0 auto auto 0; }
.top .brand-dark { opacity: 0; }
.top.solid .brand-dark { opacity: 1; }
.top.solid .brand-light { opacity: 0; }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a { position: relative; text-decoration: none; font-weight: 500; font-size: 0.9375rem; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.lang {
  font: inherit; font-size: 0.875rem; font-weight: 600; background: none; color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.lang:hover { border-color: currentColor; }

/* ---------- buttons and links ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--char); color: var(--paper); text-decoration: none; isolation: isolate;
  font-weight: 600; font-size: 1rem; padding: 16px 28px; border-radius: 2px; border: 1px solid var(--char);
}
/* fill wipes in from the left like a rule being drawn */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--oak); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { border-color: var(--oak); color: var(--paper); }
.btn-small { padding: 10px 16px; font-size: 0.875rem; }
.top:not(.solid) .btn-small { background: var(--paper); color: var(--char); border-color: var(--paper); }
.top:not(.solid) .btn-small:hover { color: var(--paper); }
.btn-light { background: var(--paper); color: var(--char); border-color: var(--paper); }
.btn-outline-light { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.link { font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size .45s var(--ease); }
.link:hover { background-size: 0 1px; background-position: right bottom; }
.link-light { color: var(--paper); }

/* ---------- shell ---------- */
#smooth-content { padding-left: var(--ruler-w); }
section { position: relative; }

/* ---------- 1. hero ---------- */
.hero { height: 100svh; min-height: 620px; overflow: hidden; color: var(--paper); background: var(--char); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 45%; will-change: transform; }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(24,23,21,.82) 0%, rgba(24,23,21,.42) 34%, rgba(24,23,21,0) 62%),
  linear-gradient(to bottom, rgba(24,23,21,.32) 0, rgba(24,23,21,0) 160px); }
.hero-text { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(36px, 7vh, 80px); }
.hero h1 { font-size: clamp(3.5rem, 7.2vw, 8.25rem); line-height: .96; letter-spacing: -0.035em; }
html[data-lang="zh"] .hero h1 { font-size: clamp(3rem, 7vw, 7.5rem); line-height: 1.12; max-width: none; }
.hero-foot { margin-top: clamp(28px, 4vh, 48px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 48px;
  border-top: 1px solid rgba(250,247,242,.28); padding-top: 28px; }
.lead { max-width: 40ch; font-size: 1.125rem; color: #E7E1D7; }
html[data-lang="zh"] .lead { max-width: 26em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

/* the ceiling dimension: a vertical measuring line on the photo */
.dim-v { position: absolute; right: var(--pad); top: calc(var(--head-h) + 6vh); bottom: 46vh; width: 1px; }
.dim-line { position: absolute; inset: 0; background: var(--oak); transform-origin: top; }
.dim-line::before, .dim-line::after { content: ""; position: absolute; left: -7px; width: 15px; height: 1px; background: var(--oak); }
.dim-line::before { top: 0; } .dim-line::after { bottom: 0; }
.dim-label { position: absolute; top: 50%; right: 14px; transform: translateY(-50%) rotate(-90deg); transform-origin: right center;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--paper); white-space: nowrap; }
.dim-label::after { content: " mm"; color: var(--oak); }

/* ---------- 2. statement ---------- */
.statement { padding: clamp(110px, 18vh, 220px) var(--pad); }
.statement-text { font-size: clamp(1.75rem, 3.9vw, 3.75rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; max-width: 21em; }
html[data-lang="zh"] .statement-text { font-family: var(--zh-head); font-weight: 600; letter-spacing: 0.04em; line-height: 1.55; max-width: 22em; }

/* ---------- 3. services: stacked by default; horizontal when the script pins it (html.hscroll) ---------- */
.services { background: var(--paper); overflow: hidden; }
.services-track { display: flex; flex-direction: column; gap: 72px; padding: clamp(96px, 14vh, 160px) var(--pad); }
.panel-intro h2 { font-size: clamp(2.6rem, 5vw, 5rem); }
.panel-intro p { margin-top: 22px; color: var(--ink-2); max-width: 30ch; }
.panel-img { aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; }
.panel-img img { width: 100%; height: 100%; object-fit: cover; }
.panel-copy { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 28px; align-items: baseline; margin-top: 26px; }
.hscroll .services-track { flex-direction: row; align-items: center; gap: clamp(40px, 6vw, 110px); padding-top: 0; padding-bottom: 0; height: 100svh; width: max-content; }
.hscroll .panel-intro { width: min(36vw, 560px); flex: none; }
.hscroll .panel-intro h2 { font-size: clamp(2.6rem, 4.4vw, 4.6rem); }
.hscroll .panel-svc { width: min(56vw, 920px); flex: none; }
.hscroll .panel-img { aspect-ratio: auto; height: min(60svh, 640px); }
.hscroll .panel-img img { width: 112%; max-width: none; will-change: transform; }
.panel-no { font-size: 0.9375rem; font-weight: 600; color: var(--oak); }
.panel-copy h3 { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
.panel-copy p { color: var(--ink-2); max-width: 46ch; }

/* ---------- 4. measured on site ---------- */
.measure { background: var(--char); color: var(--paper); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100svh; }
.measure-img { margin: 0; overflow: hidden; }
.measure-img img { width: 100%; height: 100%; object-fit: cover; }
.measure-text { padding: clamp(64px, 10vh, 140px) var(--pad); align-self: center; }
.measure h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); max-width: 11ch; }
html[data-lang="zh"] .measure h2 { max-width: none; }
.measure-lead { margin-top: 28px; max-width: 42ch; color: var(--mist); font-size: 1.125rem; }
.points { margin: 52px 0 0; display: grid; gap: 28px; }
.points div { padding-left: 22px; border-left: 1px solid var(--oak); }
.points dt { font-weight: 600; font-size: 1.0625rem; }
.points dd { margin: 4px 0 0; color: #BDB5AA; max-width: 42ch; }

/* ---------- 5. process ---------- */
.process { padding: clamp(110px, 18vh, 200px) var(--pad); }
.process h2 { font-size: clamp(2.6rem, 5vw, 5rem); margin-bottom: clamp(56px, 9vh, 104px); }
.steps-wrap { position: relative; }
.steps-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--oak); transform-origin: left; }
.steps-line::after { content: ""; position: absolute; right: 0; top: -8px; width: 1px; height: 17px; background: var(--oak); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { counter-increment: step; position: relative; padding: 44px 32px 0 0; }
.steps li::before { content: ""; position: absolute; left: 0; top: -8px; width: 1px; height: 17px; background: var(--oak); }
.steps h3::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 18px;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--oak); }
.steps h3 { font-size: 1.375rem; }
.steps p { margin-top: 12px; color: var(--ink-2); max-width: 28ch; }
.js .steps li { opacity: .28; transition: opacity .6s var(--ease); }
.js .steps li.on { opacity: 1; }
html[data-lang="zh"] .steps p { max-width: 14em; }

/* ---------- 6. contact ---------- */
.contact { background: var(--char); color: var(--paper); padding: clamp(72px, 11vh, 120px) var(--pad) clamp(56px, 8vh, 88px); }
.contact-title { font-size: clamp(2.75rem, 6vw, 6.25rem); line-height: .95; letter-spacing: -0.035em; }
html[data-lang="zh"] .contact-title { line-height: 1.15; }
.contact-grid { margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-lead { color: var(--mist); max-width: 34ch; font-size: 1.125rem; }
html[data-lang="zh"] .contact-lead { max-width: 20em; }
.contact-card { border-top: 1px solid rgba(250,247,242,.2); }
.contact-list { margin: 0; }
.contact-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid rgba(250,247,242,.2); }
.contact-list dt { color: var(--mist); font-size: 0.9375rem; }
.contact-list dd { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: -0.01em; }
.contact-list a { text-decoration: none; color: var(--paper); background: linear-gradient(var(--oak), var(--oak)) left bottom / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.contact-list a:hover { background-size: 100% 1px; }
.btn-big { margin-top: 28px; padding: 17px 32px; font-size: 1rem; }

/* ---------- footer ---------- */
.foot { background: var(--char-2); color: #A9A196; padding: 30px var(--pad) 32px; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--oak) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, transparent 0 30px, var(--oak) 30px 31px, transparent 31px 60px),
    repeating-linear-gradient(to right, var(--oak) 0 1px, transparent 1px 6px);
  background-size: 100% 16px, 100% 10px, 100% 6px; }
.foot img { height: 28px; width: auto; }
.foot .copy { margin-left: auto; font-size: 0.875rem; }
.foot .legal { font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.6; }
.foot .copy a { color: inherit; text-underline-offset: 4px; }
.foot .credits { margin-left: 18px; font-size: 0.8125rem; opacity: .75; }
.foot .copy a:hover { color: var(--paper); }

/* ---------- small screens: the ruler lies flat, rooms stack ---------- */
@media (max-width: 900px) {
  :root { --ruler-w: 0px; --head-h: 66px; }
  .ruler { inset: 0 0 auto 0; width: auto; height: 3px; border: 0; background: transparent; z-index: 60; pointer-events: none; }
  .ruler-scale, .ruler-marks { display: none; }
  .ruler-pointer { height: 3px; width: var(--p, 0%); transform: none; }
  .ruler-pointer::after { display: none; }
  .nav { display: none; }
  .top { gap: 12px; }
  .top.solid { height: 60px; }
  .top-actions { margin-left: auto; }
  .brand, .brand img { height: 30px; }
  .hero h1 { font-size: clamp(3rem, 13vw, 4.5rem); }
  html[data-lang="zh"] .hero h1 { font-size: clamp(2.6rem, 11vw, 4rem); }
  .dim-v { display: none; }
  .panel-img { aspect-ratio: 4 / 3; }
  .panel-copy { grid-template-columns: 40px 1fr; row-gap: 10px; }
  .panel-copy p { grid-column: 2; }
  .measure { grid-template-columns: 1fr; min-height: 0; }
  .measure-img img { aspect-ratio: 3 / 2; }
  .steps-wrap { padding-left: 28px; }
  .steps-line { inset: 0 auto 0 0; width: 1px; height: auto; transform-origin: top; }
  .steps-line::after { right: auto; left: -8px; top: auto; bottom: 0; width: 17px; height: 1px; }
  .steps { grid-template-columns: 1fr; row-gap: 44px; }
  .steps li { padding: 0; }
  .steps li::before { left: -36px; top: 6px; width: 17px; height: 1px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-list > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 520px) {
  .btn-small { display: none; }
  .foot .copy { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .intro { display: none; }
  * { transition: none !important; }
}

@media (min-width: 901px) and (max-width: 1240px) {
  .contact-grid { grid-template-columns: 1fr; }
}