:root {
  color-scheme: dark;
  --bg: oklch(0.07 0.006 180);
  --bg-deep: oklch(0.045 0.006 180);
  --surface: oklch(0.115 0.012 180);
  --surface-strong: oklch(0.16 0.018 180);
  --ink: oklch(0.96 0.008 180);
  --muted: oklch(0.81 0.016 180);
  --quiet: oklch(0.68 0.02 180);
  --line: oklch(0.34 0.028 180 / 0.58);
  --line-light: oklch(0.72 0.04 180 / 0.28);
  --primary: oklch(0.72 0.145 180);
  --primary-soft: oklch(0.58 0.11 180);
  --accent: oklch(0.72 0.17 48);
  --danger: oklch(0.7 0.16 28);
  --loader-track: oklch(1 0 0 / .12);
  --header-border: oklch(1 0 0 / .1);
  --header-bg: oklch(0.055 0.008 180 / .88);
  --menu-bg: oklch(0.06 0.01 180 / .985);
  --strip-bg: oklch(0.075 0.01 180 / .82);
  --work-feature-bg: oklch(0.095 0.014 180 / .9);
  --work-visual-bg: oklch(0.075 0.012 180 / .36);
  --work-orange-bg: oklch(0.13 0.018 48 / .86);
  --work-orange-border: oklch(0.52 0.12 48 / .42);
  --work-teal-bg: oklch(0.12 0.022 180 / .88);
  --marquee-ink: oklch(0.82 0.045 180 / .55);
  --contact-bg: oklch(0.055 0.008 180 / .9);
  --placeholder: oklch(0.67 0.02 180);
  --input-focus-bg: oklch(0.12 0.012 180 / .34);
  --atmosphere: radial-gradient(circle at 54% 42%, transparent 18%, oklch(0.04 0.006 180 / .26) 68%, oklch(0.03 0.004 180 / .88) 100%), linear-gradient(90deg, oklch(0.035 0.006 180 / .66), transparent 44%, transparent 72%, oklch(0.035 0.006 180 / .42));
  --font-display: "Geologica", "Arial Narrow", sans-serif;
  --font-ja: "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-zh: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 72px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --content-max: 1400px;
  --space-section: clamp(7rem, 13dvh, 9.5rem);
  --space-section-loose: clamp(8rem, 15dvh, 11rem);
  --space-section-tight: clamp(5rem, 10dvh, 7.5rem);
  --grid-gap: clamp(3.5rem, 8vw, 7.5rem);
  --z-canvas: 0;
  --z-content: 2;
  --z-header: 30;
  --z-menu: 25;
  --z-loader: 60;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(1 0 0);
  --bg-deep: oklch(1 0 0);
  --surface: oklch(0.975 0.012 255);
  --surface-strong: oklch(0.94 0.026 255);
  --ink: oklch(0.145 0.025 257);
  --muted: oklch(0.34 0.036 257);
  --quiet: oklch(0.44 0.04 257);
  --line: oklch(0.82 0.028 255 / .82);
  --line-light: oklch(0.57 0.085 255 / .42);
  --primary: oklch(0.48 0.225 257);
  --primary-soft: oklch(0.58 0.19 251);
  --accent: oklch(0.52 0.2 240);
  --danger: oklch(0.48 0.18 28);
  --loader-track: oklch(0.29 0.055 257 / .15);
  --header-border: oklch(0.77 0.04 255 / .62);
  --header-bg: oklch(1 0 0 / .94);
  --menu-bg: oklch(1 0 0 / .99);
  --strip-bg: oklch(1 0 0 / .72);
  --work-feature-bg: oklch(0.985 0.008 255 / .84);
  --work-visual-bg: oklch(0.955 0.028 252 / .68);
  --work-orange-bg: oklch(0.965 0.026 245 / .84);
  --work-orange-border: oklch(0.67 0.13 245 / .5);
  --work-teal-bg: oklch(0.97 0.022 265 / .84);
  --marquee-ink: oklch(0.42 0.12 257 / .72);
  --contact-bg: oklch(0.98 0.012 255 / .78);
  --placeholder: oklch(0.42 0.036 257);
  --input-focus-bg: oklch(0.96 0.025 255 / .94);
  --reading-wash: radial-gradient(ellipse at 20% 50%, oklch(1 0 0 / .92) 0%, oklch(1 0 0 / .76) 42%, oklch(1 0 0 / .28) 68%, transparent 92%);
  --atmosphere: radial-gradient(circle at 61% 44%, transparent 10%, oklch(1 0 0 / .04) 36%, oklch(1 0 0 / .42) 78%, oklch(1 0 0 / .72) 100%), linear-gradient(90deg, oklch(1 0 0 / .58) 0%, oklch(1 0 0 / .38) 25%, transparent 52%, oklch(1 0 0 / .24) 100%);
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .005em;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  transition: color .55s var(--ease-out), background-color .55s var(--ease-out);
}
html[lang="zh"] body { font-family: var(--font-zh); }
body.is-loading,
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, canvas { max-width: 100%; }
::selection { color: var(--bg); background: var(--primary); }

.skip-link {
  position: fixed;
  z-index: calc(var(--z-loader) + 1);
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--bg);
  background: var(--primary);
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }

#world {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transition: opacity .7s var(--ease-out);
}
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--atmosphere);
  transition: background .7s var(--ease-out);
}

.content-shell {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main, .site-footer { position: relative; z-index: var(--z-content); }
.chapter { position: relative; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 24px;
  padding: clamp(24px, 5vw, 80px);
  background: var(--bg-deep);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-out), visibility 1s;
}
.loader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader__brand { display: flex; align-items: flex-start; gap: 14px; font-size: 13px; font-weight: 600; }
.loader__readout { align-self: end; display: flex; align-items: baseline; gap: 18px; font-family: var(--font-display); font-size: 10px; letter-spacing: .12em; }
.loader__readout strong { font-size: clamp(44px, 8vw, 96px); font-weight: 300; line-height: .8; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.loader__track { grid-column: 1 / -1; height: 2px; overflow: hidden; background: var(--loader-track); }
.loader__track span { display: block; width: 100%; height: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .18s linear; }

.site-header {
  position: fixed;
  z-index: var(--z-header);
  inset: 0 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.3vw, 56px);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  transition: color .55s var(--ease-out), background-color .55s var(--ease-out), border-color .55s var(--ease-out);
}
.page-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .page-progress { animation: page-progress linear both; animation-timeline: scroll(root block); }
  @keyframes page-progress { to { transform: scaleX(1); } }
}
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: max-content; }
.brand__symbol { display: flex; gap: 3px; align-items: end; height: 23px; }
.brand__symbol i { display: block; width: 3px; height: 15px; background: var(--primary); transform: skewY(-25deg); }
.brand__symbol i:nth-child(2) { height: 23px; background: var(--ink); }
.brand__symbol i:nth-child(3) { height: 10px; background: var(--accent); }
.brand__name { font-family: var(--font-display); font-weight: 640; font-size: 16px; letter-spacing: -.025em; }
.brand__name span { margin-left: 4px; font-family: var(--font-ja); font-size: 10px; font-weight: 500; letter-spacing: 0; }
.main-nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 30px); white-space: nowrap; font-size: 11px; font-weight: 500; }
.main-nav a, .header-contact { position: relative; transition: color .25s; }
.main-nav a::after, .header-contact::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a[aria-current="true"], .header-contact:hover, .header-contact:focus-visible { color: var(--primary); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current="true"]::after, .header-contact:hover::after, .header-contact:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.lang-switch { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 10px; }
.lang-switch button { border: 0; padding: 8px 0; background: none; cursor: pointer; opacity: .44; white-space: nowrap; transition: opacity .2s, color .2s; }
.lang-switch button.is-active { color: var(--primary); opacity: 1; }
.header-contact { white-space: nowrap; font-size: 11px; font-weight: 650; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-light); background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; transition: transform .45s var(--ease-out); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: var(--z-menu);
  inset: 0;
  display: grid;
  align-content: space-between;
  padding: calc(var(--header-h) + 44px) var(--gutter) 32px;
  background: var(--menu-bg);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--ease-out), visibility .75s;
}
body.menu-open .mobile-menu { visibility: visible; clip-path: inset(0); }
.mobile-menu nav { display: grid; }
.mobile-menu nav > a:not(.mobile-menu__contact) { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: clamp(27px, 7vw, 42px); font-weight: 500; line-height: 1.2; }
.mobile-menu nav i { color: var(--quiet); font-family: var(--font-display); font-size: 10px; font-style: normal; font-weight: 400; letter-spacing: .08em; }
.mobile-menu__contact { display: flex; justify-content: space-between; margin-top: 30px; padding: 17px 20px; color: var(--bg); background: var(--primary); font-size: 16px; font-weight: 650; }
.mobile-menu__foot { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 11px; }

.hero { min-height: 100dvh; display: flex; align-items: center; }
.hero__copy { position: relative; isolation: isolate; padding-top: var(--header-h); }
.hero__copy > * { position: relative; z-index: 1; }
html[data-theme="light"] .hero__copy::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 10%;
  bottom: 3%;
  left: 0;
  width: min(74rem, 82vw);
  pointer-events: none;
  background: linear-gradient(90deg, oklch(1 0 0 / .92) 0%, oklch(1 0 0 / .78) 48%, oklch(1 0 0 / .4) 70%, transparent 100%);
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero__body { text-shadow: 0 1px 0 white, 0 0 18px white; }
.hero__signal { margin: 0 0 clamp(22px, 4vh, 38px); color: var(--primary); font-family: var(--font-display); font-size: 10px; letter-spacing: .13em; }
.hero h1 { max-width: 1080px; margin: 0; font-size: clamp(3rem, 5.4vw, 4.25rem); font-weight: 520; line-height: 1.08; letter-spacing: -.03em; }
html[lang="en"] .hero h1 { font-family: var(--font-display); font-stretch: 78%; font-weight: 560; line-height: .94; }
html[lang="zh"] .hero h1 { max-width: 14em; font-family: var(--font-zh); font-weight: 600; }
.hero__body { max-width: 48ch; margin: clamp(1.5rem, 3.6vh, 2.25rem) 0 0; color: var(--muted); font-size: 1rem; }
.hero__actions { display: flex; align-items: center; gap: 26px; margin-top: clamp(28px, 5vh, 50px); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-height: 50px; white-space: nowrap; font-size: 12px; font-weight: 650; }
.button i { font-family: var(--font-display); font-size: 16px; font-style: normal; transition: transform .35s var(--ease-out); }
.button--primary { min-width: 184px; padding: 12px 16px; color: var(--bg); background: var(--primary); border: 1px solid var(--primary); transition: color .3s, background-color .3s, transform .2s; }
.button--primary:hover { color: var(--ink); background: var(--surface-strong); }
.button--primary:hover i { transform: translate(4px, -4px); }
.button--primary:active { transform: translateY(1px); }
.button--text { min-width: 150px; border-bottom: 1px solid var(--line-light); transition: border-color .3s, color .3s; }
.button--text:hover { color: var(--primary); border-color: var(--primary); }
.button--text:hover i { transform: translateY(4px); }
body:not(.is-loading) .hero__signal { animation: hero-enter .8s var(--ease-out) both; }
body:not(.is-loading) .hero h1 { animation: hero-enter 1s .08s var(--ease-out) both; }
body:not(.is-loading) .hero__body, body:not(.is-loading) .hero__actions { animation: hero-enter 1s .18s var(--ease-out) both; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(22px); } }

.scope-strip { position: relative; z-index: var(--z-content); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--strip-bg); }
.scope-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.scope-strip__inner > div { display: grid; gap: 8px; min-height: 104px; padding: 24px 32px; border-right: 1px solid var(--line); }
.scope-strip__inner > div:first-child { padding-left: 0; }
.scope-strip__inner > div:last-child { padding-right: 0; border-right: 0; }
.scope-strip span { color: var(--quiet); font-size: 10px; }
.scope-strip strong { align-self: end; font-family: var(--font-display); font-size: clamp(.8125rem, 1vw, 1rem); font-weight: 470; }

.about { display: flex; align-items: center; padding-block: var(--space-section); }
html[data-theme="light"] :is(
  .about__statement,
  .about__principles,
  .section-heading,
  .service-item__body,
  .technology__intro,
  .technology__groups,
  .process__intro,
  .process__steps,
  .faq__intro,
  .faq__list
) { position: relative; isolation: isolate; }
html[data-theme="light"] :is(
  .about__statement,
  .about__principles,
  .section-heading,
  .service-item__body,
  .technology__intro,
  .technology__groups,
  .process__intro,
  .process__steps,
  .faq__intro,
  .faq__list
) > * { position: relative; z-index: 1; }
html[data-theme="light"] :is(
  .about__statement,
  .about__principles,
  .section-heading,
  .service-item__body,
  .technology__intro,
  .technology__groups,
  .process__intro,
  .process__steps,
  .faq__intro,
  .faq__list
)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2.75rem 0;
  pointer-events: none;
  background: var(--reading-wash);
}
html[data-theme="light"] :is(.about, .services, .technology, .process, .faq) :is(h2, h3, p, summary, strong) {
  text-shadow: 0 1px 0 oklch(1 0 0 / .9), 0 0 16px oklch(1 0 0 / .78);
}
.about__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--grid-gap); align-items: start; }
.about__statement { position: sticky; top: calc(var(--header-h) + 4rem); }
.about__statement h2, .section-heading h2, .works h2, .portfolio__intro h2, .technology__intro h2, .process__intro h2, .faq__intro h2, .contact__intro h2 { margin: 0; font-size: clamp(2.125rem, 4.2vw, 3.625rem); font-weight: 520; line-height: 1.14; letter-spacing: -.03em; }
.about__statement p { max-width: 53ch; margin: 2rem 0 0; color: var(--muted); font-size: 1rem; }
.about__principles { margin-top: clamp(4rem, 9dvh, 6rem); }
.about__principles article { display: grid; grid-template-columns: minmax(90px, .35fr) 1fr; gap: 12px 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.about__principles article:last-child { border-bottom: 1px solid var(--line); }
.about__principles span { color: var(--primary); font-family: var(--font-display); font-size: 10px; }
.about__principles h3 { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.4375rem); font-weight: 520; }
.about__principles p { grid-column: 2; max-width: 49ch; margin: 5px 0 0; color: var(--muted); font-size: .875rem; }

.services { padding-block: var(--space-section) var(--space-section-loose); }
.section-heading { margin-bottom: clamp(4rem, 9dvh, 6rem); }
.section-heading h2 { max-width: 800px; }
.section-heading p { max-width: 61ch; margin: 1.75rem 0 0; color: var(--muted); font-size: 1rem; }
.service-list { padding-bottom: var(--space-section-tight); }
.service-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, .58fr) minmax(340px, 1.42fr) 72px;
  gap: clamp(28px, 5.5vw, 96px);
  align-items: center;
  min-height: 0;
  padding-block: clamp(3.75rem, 8dvh, 5rem);
  border-top: 1px solid var(--line);
}
.service-item:last-child { border-bottom: 1px solid var(--line); }
.service-item__meta { display: flex; align-items: center; gap: 20px; color: var(--quiet); font-family: var(--font-display); font-size: 9px; letter-spacing: .08em; }
.service-item__meta span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-light); color: var(--primary); font-size: 15px; }
.service-item__body h3 { margin: 0 0 1.25rem; font-size: clamp(1.625rem, 3vw, 2.625rem); font-weight: 520; line-height: 1.16; letter-spacing: -.025em; }
.service-item__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.service-item__heading h3 { margin: 0; }
.service-item__price { flex: 0 0 auto; display: flex; align-items: baseline; gap: .5rem; margin: 0; color: var(--ink); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.service-item__price strong { color: var(--primary); font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 520; letter-spacing: -.03em; line-height: 1; }
.service-item[data-accent="orange"] .service-item__price strong { color: var(--accent); }
.service-item__price span { color: var(--quiet); font-family: var(--font-ja); font-size: .75rem; }
.service-item__body > p { max-width: 58ch; margin: 0; color: var(--muted); font-size: .9375rem; }
.service-item__body ul { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--quiet); font-size: 10px; }
.service-item__body li::before { content: "/"; margin-right: 8px; color: var(--primary); }
.service-item__orbit { justify-self: end; width: 54px; height: 54px; border: 1px solid var(--primary); border-radius: 50%; position: relative; transition: transform .7s var(--ease-out), border-color .3s; }
.service-item__orbit::before, .service-item__orbit::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: var(--primary); transform: translate(-50%, -50%); }
.service-item__orbit::before { width: 72px; height: 1px; }
.service-item__orbit::after { width: 5px; height: 5px; border-radius: 50%; }
.service-item[data-accent="orange"] .service-item__meta span:first-child { color: var(--accent); }
.service-item[data-accent="orange"] .service-item__orbit { border-color: var(--accent); }
.service-item[data-accent="orange"] .service-item__orbit::before, .service-item[data-accent="orange"] .service-item__orbit::after { background: var(--accent); }
.service-item.is-visible .service-item__orbit { transform: rotate(135deg) scale(1.12); }
.service-list__note { max-width: 64ch; margin: 2rem 0 0 auto; color: var(--quiet); font-size: .75rem; }

.works { padding-block: var(--space-section-loose); }
.works__label { margin: 0 0 28px; color: var(--primary); font-size: 12px; }
.works h2 { max-width: 1040px; }
.works__composition { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr); gap: 18px; margin-top: clamp(4rem, 9dvh, 6rem); }
.work-feature { min-height: 660px; display: grid; grid-template-rows: 1.05fr .95fr; background: var(--work-feature-bg); border: 1px solid var(--line); }
.work-feature__visual { position: relative; min-height: 330px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--work-visual-bg); }
.work-feature__visual::before, .work-feature__visual::after, .work-feature__visual span, .work-feature__visual i { content: ""; position: absolute; border: 1px solid var(--primary); border-radius: 50%; }
.work-feature__visual::before { width: min(62vw, 520px); aspect-ratio: 1; left: 13%; top: -31%; opacity: .55; }
.work-feature__visual::after { width: min(43vw, 360px); aspect-ratio: 1; right: 8%; bottom: -42%; border-color: var(--accent); opacity: .5; }
.work-feature__visual span { width: 38%; aspect-ratio: 1; left: 31%; top: 23%; animation: orbit-shift 8s ease-in-out infinite alternate; }
.work-feature__visual i { width: 10px; height: 10px; left: 49%; top: 49%; background: var(--primary); border: 0; animation: point-pulse 2s ease-in-out infinite; }
@keyframes orbit-shift { to { transform: rotate(54deg) scale(1.14); } }
@keyframes point-pulse { 50% { transform: scale(1.7); opacity: .4; } }
.work-feature__copy { align-self: end; padding: clamp(28px, 4.2vw, 60px); }
.work-feature__copy > span, .work-row > span { color: var(--primary); font-family: var(--font-display); font-size: 9px; letter-spacing: .1em; }
.work-feature__copy h3 { max-width: 17ch; margin: 17px 0 20px; font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 520; line-height: 1.16; letter-spacing: -.025em; }
.work-feature__copy > p { max-width: 55ch; margin: 0; color: var(--muted); font-size: 14px; }
.work-feature dl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 36px 0 0; }
.work-feature dl div { padding-top: 15px; border-top: 1px solid var(--line); }
.work-feature dt { color: var(--quiet); font-size: 9px; }
.work-feature dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 12px; }
.works__secondary { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.work-row { display: flex; flex-direction: column; justify-content: flex-end; min-height: 321px; padding: clamp(26px, 3.3vw, 42px); background: var(--work-orange-bg); border: 1px solid var(--work-orange-border); transition: transform .45s var(--ease-out), background-color .35s; }
.work-row--offset { background: var(--work-teal-bg); border-color: var(--line); }
.work-row:hover { transform: translateY(-5px); background: var(--surface-strong); }
.work-row h3 { margin: 16px 0; font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 520; line-height: 1.22; }
.work-row p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 13px; }
.work-row strong { margin-top: 30px; color: var(--ink); font-family: var(--font-display); font-size: 9px; font-weight: 450; letter-spacing: .06em; }
.works__note { max-width: 64ch; margin: 28px 0 0 auto; color: var(--quiet); font-size: 11px; }

.portfolio {
  position: relative;
  padding-block: var(--space-section-loose);
  background: linear-gradient(180deg, oklch(0.08 0.012 180 / .72), oklch(0.045 0.008 180 / .92));
}
.portfolio__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr);
  gap: var(--grid-gap);
  align-items: end;
  padding-bottom: clamp(3rem, 7dvh, 5rem);
  border-bottom: 1px solid var(--line);
}
.portfolio__intro h2 { max-width: 17ch; }
.portfolio__intro > p { max-width: 53ch; margin: 0; color: var(--muted); font-size: .9375rem; }
.portfolio__list { display: grid; }
.portfolio-item {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding-block: clamp(4.5rem, 10dvh, 7.5rem);
  border-bottom: 1px solid var(--line);
}
.portfolio-item:nth-child(even) { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); }
.portfolio-item:nth-child(even) .portfolio-visual { order: 2; }
.portfolio-item__copy { min-width: 0; }
.portfolio-item__status { margin: 0 0 1.25rem; color: var(--primary); font-family: var(--font-display); font-size: 9px; letter-spacing: .1em; }
.portfolio-item--service .portfolio-item__status { color: var(--accent); }
.portfolio-item__copy h3 { max-width: 18ch; margin: 0; font-size: clamp(1.625rem, 2.8vw, 2.5rem); font-weight: 520; line-height: 1.18; letter-spacing: -.025em; }
.portfolio-item__copy > p:not(.portfolio-item__status) { max-width: 48ch; margin: 1.5rem 0 0; color: var(--muted); font-size: .875rem; }
.portfolio-item__copy dl { display: grid; gap: 1rem; margin: 2.5rem 0 0; }
.portfolio-item__copy dl div { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; padding-top: .875rem; border-top: 1px solid var(--line); }
.portfolio-item__copy dt { color: var(--quiet); font-size: 9px; }
.portfolio-item__copy dd { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 11px; }
.portfolio-visual {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-light);
  background: var(--surface);
  transition: transform .55s var(--ease-out), border-color .35s;
}
.portfolio-item:hover .portfolio-visual { transform: translateY(-5px); border-color: var(--primary); }
.portfolio-item--service:hover .portfolio-visual { border-color: var(--accent); }
.portfolio-visual__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding-inline: 13px; border-bottom: 1px solid oklch(1 0 0 / .12); background: oklch(0.105 0.012 180); }
.portfolio-visual__bar > span { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.55 0.02 180); }
.portfolio-visual__bar > span:first-child { background: var(--accent); }
.portfolio-visual__bar > span:nth-child(2) { background: var(--primary); }
.portfolio-visual__bar i { margin-left: auto; color: oklch(0.66 0.02 180); font-family: var(--font-display); font-size: 7px; font-style: normal; letter-spacing: .08em; }
.portfolio-screen { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; padding: clamp(18px, 3.2vw, 40px); }
.portfolio-screen__nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-display); }
.portfolio-screen__nav strong { font-size: clamp(8px, 1vw, 12px); font-weight: 650; letter-spacing: .03em; }
.portfolio-screen__nav span { font-size: clamp(5px, .62vw, 8px); letter-spacing: .07em; }
.portfolio-screen__hero { position: relative; z-index: 2; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; height: calc(100% - 24px); }
.portfolio-screen__hero small { font-family: var(--font-display); font-size: clamp(6px, .72vw, 9px); letter-spacing: .1em; }
.portfolio-screen__hero b { margin-top: clamp(10px, 1.8vw, 22px); font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 2.6rem); font-stretch: 78%; font-weight: 590; line-height: .98; letter-spacing: -.03em; }
.portfolio-screen__hero em { margin-top: clamp(14px, 2.5vw, 30px); padding-bottom: 5px; border-bottom: 1px solid currentColor; font-family: var(--font-display); font-size: clamp(6px, .75vw, 9px); font-style: normal; font-weight: 550; }
.portfolio-screen--shop { color: oklch(0.19 0.04 246); background: oklch(0.97 0.008 246); }
.portfolio-screen--shop .portfolio-screen__shape { position: absolute; right: -9%; bottom: -42%; width: 58%; aspect-ratio: 1; border: clamp(18px, 4vw, 52px) solid oklch(0.68 0.17 47); border-radius: 50%; }
.portfolio-screen--shop::after { content: ""; position: absolute; right: 14%; top: 20%; width: 19%; height: 48%; background: oklch(0.48 0.13 190); transform: rotate(12deg); }
.portfolio-screen--service { color: oklch(0.95 0.02 190); background: oklch(0.19 0.055 190); }
.portfolio-screen--service .portfolio-screen__hero b { max-width: 10ch; }
.portfolio-screen__panel { position: absolute; right: 6%; bottom: 9%; z-index: 1; display: grid; gap: 8px; width: 36%; padding: clamp(12px, 2vw, 24px); border: 1px solid oklch(0.8 0.1 180 / .55); background: oklch(0.24 0.06 190); }
.portfolio-screen__panel span { display: block; height: clamp(8px, 1.4vw, 17px); background: oklch(0.74 0.15 180); }
.portfolio-screen__panel span:nth-child(2) { width: 74%; background: oklch(0.92 0.04 190); }
.portfolio-screen__panel span:nth-child(3) { width: 46%; background: oklch(0.72 0.17 48); }
.portfolio-screen--creator { color: oklch(0.12 0.012 48); background: oklch(0.76 0.17 48); }
.portfolio-screen--creator .portfolio-screen__hero { justify-content: flex-end; padding-bottom: 4%; }
.portfolio-screen--creator .portfolio-screen__hero b { font-size: clamp(1.2rem, 3.4vw, 3rem); }
.portfolio-screen__tiles { position: absolute; z-index: 1; inset: 20% 6% auto 45%; display: grid; grid-template-columns: 1.2fr .8fr; gap: 7px; height: 48%; transform: rotate(-5deg); }
.portfolio-screen__tiles span { background: oklch(0.18 0.03 190); }
.portfolio-screen__tiles span:nth-child(2) { background: oklch(0.85 0.12 180); }
.portfolio-screen__tiles span:nth-child(3) { grid-column: 1 / -1; width: 64%; justify-self: end; background: oklch(0.95 0.01 180); }
.portfolio__note { max-width: 72ch; margin: 1.75rem 0 0 auto; color: var(--quiet); font-size: 10px; }

.technology { padding-block: var(--space-section-tight) var(--space-section); overflow: hidden; }
.technology__marquee { display: flex; width: max-content; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--marquee-ink); font-family: var(--font-display); font-size: clamp(1.625rem, 3.8vw, 3.375rem); font-stretch: 78%; font-weight: 320; line-height: 1; white-space: nowrap; }
.technology__marquee div { padding-block: 24px; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.technology__layout { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--grid-gap); align-items: start; padding-top: clamp(5rem, 11dvh, 7rem); }
.technology__layout::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5rem -4rem -3rem;
  pointer-events: none;
  background: radial-gradient(ellipse at center, oklch(0.025 0.006 180 / .82) 0%, oklch(0.03 0.007 180 / .58) 62%, transparent 88%);
}
.technology__intro { position: sticky; top: calc(var(--header-h) + 4rem); }
.technology__intro p { max-width: 50ch; margin: 2rem 0 0; color: oklch(0.88 0.014 180); font-size: .9375rem; font-weight: 450; text-shadow: 0 1px 2px oklch(0.01 0.003 180 / .9); }
.technology__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 60px); }
.technology__groups article { min-height: 196px; padding: 28px 0; border-top: 1px solid var(--line); }
.technology__groups article:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.technology__groups h3 { margin: 0 0 42px; color: var(--primary); font-family: var(--font-display); font-size: .75rem; font-weight: 500; }
.technology__groups p { margin: 0; color: oklch(0.9 0.012 180); font-family: var(--font-display); font-size: clamp(.875rem, 1.15vw, 1.0625rem); font-weight: 450; line-height: 1.7; text-shadow: 0 1px 2px oklch(0.01 0.003 180 / .92); }

.process { display: flex; align-items: center; padding-block: var(--space-section); }
.process__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--grid-gap); align-items: start; }
.process__intro { position: sticky; top: calc(var(--header-h) + 4rem); }
.process__intro p { max-width: 49ch; margin: 2rem 0 0; color: var(--muted); font-size: .9375rem; }
.process__steps { margin: 0; padding: 0; list-style: none; }
.process__steps li { position: relative; display: grid; gap: 8px; min-height: 180px; padding: 30px 0; border-top: 1px solid var(--line); }
.process__steps li:last-child { border-bottom: 1px solid var(--line); }
.process__steps span { color: var(--primary); font-family: var(--font-display); font-size: 10px; }
.process__steps strong { max-width: 22ch; font-size: clamp(1.125rem, 1.75vw, 1.5rem); font-weight: 520; }
.process__steps p { max-width: 48ch; margin: 10px 0 0; color: var(--muted); font-size: 13px; }

.faq { padding-block: var(--space-section); }
.faq__layout { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--grid-gap); align-items: start; }
.faq__layout::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3.5rem -4.5rem;
  pointer-events: none;
  background: radial-gradient(ellipse at center, oklch(0.02 0.005 180 / .9) 0%, oklch(0.028 0.006 180 / .68) 64%, transparent 90%);
}
.faq__intro { position: sticky; top: calc(var(--header-h) + 4rem); }
.faq__intro p { max-width: 51ch; margin: 2rem 0 0; color: oklch(0.86 0.014 180); font-size: 1rem; }
.faq__list { position: relative; }
.faq__list details { position: relative; border-top: 1px solid var(--line-light); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { position: relative; display: flex; align-items: center; min-height: 5.75rem; padding: 1.5rem 3.5rem 1.5rem 0; color: var(--ink); font-size: clamp(1rem, 1.45vw, 1.25rem); font-weight: 560; cursor: pointer; list-style: none; text-shadow: 0 1px 2px oklch(0.01 0.003 180 / .9); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before, .faq__list summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 1.25rem; height: 1px; background: var(--primary); transition: transform .35s var(--ease-out); }
.faq__list summary::after { transform: rotate(90deg); }
.faq__list details[open] summary::after { transform: rotate(0); }
.faq__list summary:hover { color: var(--primary); }
.faq__list details p { max-width: 55ch; margin: -.25rem 0 0; padding: 0 3.5rem 1.75rem 0; color: oklch(0.9 0.012 180); font-size: .9375rem; font-weight: 450; text-shadow: 0 1px 2px oklch(0.01 0.003 180 / .92); }

.contact { padding-block: var(--space-section) var(--space-section-tight); background: var(--contact-bg); }
.contact__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--grid-gap); align-items: start; }
.contact__intro { position: sticky; top: calc(var(--header-h) + 4rem); }
.contact__intro h2 { max-width: 13ch; font-size: clamp(2rem, 3.2vw, 2.875rem); line-height: 1.2; }
.contact__label { margin: 0 0 28px; color: var(--primary); font-size: 12px; }
.contact__intro p:not(.contact__label) { max-width: 53ch; margin: 2rem 0 0; color: var(--muted); font-size: .9375rem; }
.contact__direct { display: grid; gap: 8px; margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.contact__direct span { color: var(--quiet); font-size: 10px; }
.contact__direct a { width: fit-content; color: var(--ink); font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.375rem); border-bottom: 1px solid var(--primary); }
.inquiry-form { display: grid; gap: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.inquiry-form label:not(.form-consent) { display: grid; gap: 10px; }
.inquiry-form label > span { color: var(--muted); font-size: 11px; }
.inquiry-form input, .inquiry-form textarea, .inquiry-form select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  border-radius: 0;
  padding: 15px 2px;
  outline: 0;
  color: var(--ink);
  background: transparent;
  transition: border-color .25s, background-color .25s;
}
.inquiry-form textarea { min-height: 150px; resize: vertical; }
.inquiry-form select { cursor: pointer; color-scheme: inherit; }
.inquiry-form option { color: var(--ink); background: var(--surface); }
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder { color: var(--placeholder); opacity: 1; }
.inquiry-form input:hover, .inquiry-form textarea:hover, .inquiry-form select:hover { border-color: var(--quiet); }
.inquiry-form input:focus, .inquiry-form textarea:focus, .inquiry-form select:focus { border-color: var(--primary); background: var(--input-focus-bg); }
.inquiry-form input:user-invalid, .inquiry-form textarea:user-invalid { border-color: var(--danger); }
.form-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primary); }
.form-consent span { color: var(--muted); font-size: 11px; }
.form-note, .form-status { min-height: 1.6em; margin: -12px 0 0; color: var(--quiet); font-size: 10px; }
.form-status { margin-top: -20px; color: var(--primary); }
.form-status.is-error { color: var(--danger); }
.form-submit { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; min-height: 72px; padding: 15px 20px; border: 1px solid var(--primary); color: var(--bg); background: var(--primary); font-weight: 650; cursor: pointer; transition: color .3s, background-color .3s, transform .2s; }
.form-submit i { font-size: 19px; font-style: normal; transition: transform .35s var(--ease-out); }
.form-submit:hover { color: var(--ink); background: transparent; }
.form-submit:hover i { transform: translate(6px, -6px); }
.form-submit:active { transform: translateY(1px); }

.site-footer { padding-block: 74px 24px; border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.footer__brand p { max-width: 36ch; margin: 28px 0 0; color: var(--muted); font-size: 13px; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 44px; justify-self: end; min-width: min(100%, 430px); font-size: 12px; }
.footer__nav a { width: fit-content; transition: color .25s; }
.footer__nav a:hover { color: var(--primary); }
.footer__bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 80px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 10px; }
.footer__bottom p { margin: 0; }
.footer__bottom a { transition: color .25s; }
.footer__bottom a:hover { color: var(--primary); }

.noscript { position: fixed; z-index: calc(var(--z-loader) + 2); inset: auto 12px 12px; padding: 16px; color: var(--bg); background: var(--accent); text-align: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 1150px) {
  .main-nav, .header-contact { display: none; }
  .menu-toggle { display: block; }
}

@media (max-width: 900px) {
  :root {
    --header-h: 68px;
    --space-section: 6.5rem;
    --space-section-loose: 7.5rem;
    --space-section-tight: 5.5rem;
  }
  .about, .services, .works, .portfolio, .technology, .process, .faq, .contact { padding-block: var(--space-section); }
  .scope-strip__inner { grid-template-columns: 1fr; }
  .scope-strip__inner > div { min-height: 96px; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .scope-strip__inner > div:last-child { border-bottom: 0; }
  .about__layout, .technology__layout, .process__layout, .faq__layout, .contact__layout { grid-template-columns: 1fr; gap: 4.5rem; }
  .about__statement, .technology__intro, .process__intro, .faq__intro, .contact__intro { position: static; }
  .faq__intro { position: relative; top: auto; }
  .about__principles { margin-top: 0; }
  .service-item { grid-template-columns: minmax(150px, .45fr) 1.55fr 54px; gap: 28px; }
  .works__composition { grid-template-columns: 1fr; }
  .work-feature { min-height: 620px; }
  .works__secondary { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .work-row { min-height: 330px; }
  .portfolio__intro, .portfolio-item, .portfolio-item:nth-child(even) { grid-template-columns: 1fr; gap: 3.5rem; }
  .portfolio-item:nth-child(even) .portfolio-visual { order: 0; }
  .technology__groups article { min-height: 180px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__nav { justify-self: start; }
}

@media (max-width: 620px) {
  :root {
    --gutter: 1.25rem;
    --space-section: 5.5rem;
    --space-section-loose: 6.25rem;
    --space-section-tight: 4.5rem;
  }
  .brand__name span { display: none; }
  .site-header { padding-inline: var(--gutter); }
  .header-actions { gap: 10px; }
  .lang-switch { gap: 5px; font-size: 9px; }
  .hero { min-height: 100dvh; }
  html[data-theme="light"] #world { opacity: .92; }
  html[data-theme="light"] .hero__copy::before {
    top: -2rem;
    bottom: -2rem;
    left: 0;
    right: 0;
    width: auto;
    background: linear-gradient(90deg, oklch(1 0 0 / .88) 0%, oklch(1 0 0 / .72) 62%, oklch(1 0 0 / .34) 84%, transparent 100%);
  }
  html[data-theme="light"] :is(
    .about__statement,
    .about__principles,
    .section-heading,
    .service-item__body,
    .technology__intro,
    .technology__groups,
    .process__intro,
    .process__steps,
    .faq__intro,
    .faq__list
  )::before { inset: -2rem 0; }
  .hero__signal { max-width: 88%; line-height: 1.5; }
  .hero h1 { max-width: 13.5ch; font-size: clamp(2.25rem, 10vw, 3rem); line-height: 1.14; }
  html[lang="en"] .hero h1 { max-width: 15ch; font-size: clamp(2.125rem, 9vw, 2.625rem); line-height: 1.04; overflow-wrap: normal; }
  html[lang="zh"] .hero h1 { max-width: 9ch; font-size: clamp(2.25rem, 9.6vw, 2.875rem); line-height: 1.14; }
  .hero__body { max-width: 36ch; }
  .hero__actions { align-items: stretch; flex-direction: column; gap: 14px; width: min(100%, 310px); }
  .button { width: 100%; }
  .about__statement h2, .section-heading h2, .works h2, .portfolio__intro h2, .technology__intro h2, .process__intro h2, .faq__intro h2, .contact__intro h2 { font-size: clamp(2rem, 8.6vw, 2.625rem); line-height: 1.18; }
  html[lang="en"] .about__statement h2, html[lang="en"] .works h2, html[lang="en"] .portfolio__intro h2, html[lang="en"] .technology__intro h2, html[lang="en"] .process__intro h2, html[lang="en"] .faq__intro h2, html[lang="en"] .contact__intro h2 { font-size: clamp(1.875rem, 7.8vw, 2.375rem); }
  .about__principles article { grid-template-columns: 1fr; gap: 10px; }
  .about__principles p { grid-column: 1; }
  .service-item { grid-template-columns: 1fr; min-height: 0; padding-block: 3.75rem; }
  .service-item__meta, .service-item__body, .service-item__orbit { grid-column: 1; }
  .service-item__orbit { justify-self: start; margin-left: 10px; }
  .service-item__body h3 { font-size: clamp(1.75rem, 7.8vw, 2.125rem); }
  .service-item__heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .work-feature { min-height: 560px; }
  .work-feature__visual { min-height: 220px; }
  .work-feature dl { grid-template-columns: 1fr; }
  .works__secondary { grid-template-columns: 1fr; }
  .work-row { min-height: 290px; }
  .portfolio__intro { gap: 1.75rem; padding-bottom: 3rem; }
  .portfolio-item { gap: 2.25rem; padding-block: 4.25rem; }
  .portfolio-item__copy h3 { font-size: clamp(1.625rem, 7.6vw, 2.125rem); }
  .portfolio-screen { aspect-ratio: 4 / 3; padding: 18px; }
  .portfolio-screen__nav span { display: none; }
  .portfolio-screen__hero b { font-size: clamp(1.05rem, 6vw, 1.65rem); }
  .portfolio-screen__panel { width: 39%; padding: 12px; }
  .portfolio-item__copy dl div { grid-template-columns: 78px 1fr; }
  .technology__marquee { font-size: 1.75rem; }
  .technology__groups { grid-template-columns: 1fr; }
  .technology__groups article:nth-last-child(-n+2) { border-bottom: 0; }
  .technology__groups article:last-child { border-bottom: 1px solid var(--line); }
  .process__steps li { min-height: 190px; padding: 1.75rem 0; }
  .faq__list summary { min-height: 5.25rem; padding-right: 2.75rem; }
  .faq__list details p { padding-right: 1rem; }
  .technology__layout::before { inset: 1rem -1.5rem -2rem; }
  .faq__layout::before { inset: -2.25rem -1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr 1fr; min-width: 100%; }
  .footer__bottom { align-items: flex-start; flex-direction: column; margin-top: 58px; }
  .loader { grid-template-columns: 1fr; }
  .loader__readout { grid-column: 1; }
}

@media (pointer: coarse) {
  .lang-switch button { min-width: 28px; min-height: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .loader { display: none; }
  .technology__marquee { width: 100%; overflow: hidden; }
  .technology__marquee div:nth-child(2) { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg-deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
}