@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --ink: #101010;
  --paper: #f0efe9;
  --muted: #777773;
  --line: rgba(16, 16, 16, 0.16);
  --accent: #ff542c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-exit .14s ease-out both; }
::view-transition-new(root) { animation: page-enter .2s ease-out both; }
@keyframes page-exit { to { opacity: .94; } }
@keyframes page-enter { from { opacity: .88; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.site-shell { min-height: 100vh; padding: 27px 34px 30px; display: flex; flex-direction: column; }
.site-header, .site-footer, .section-heading { display: flex; align-items: center; justify-content: space-between; }
.site-header-tools { align-items: center; display: flex; gap: 16px; }
.wordmark { align-items: center; display: inline-flex; }
.wordmark-logo { background: transparent; display: block; height: 38px; object-fit: contain; width: auto; }
.language-picker { align-items: center; display: inline-flex; }
.language-select { appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: inherit; cursor: pointer; font: 10px Manrope, Arial, sans-serif; min-height: 34px; padding: 0 30px 0 13px; }
.language-picker { position: relative; }
.language-picker::after { border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; content: ''; height: 5px; pointer-events: none; position: absolute; right: 13px; top: calc(50% - 4px); transform: rotate(45deg); width: 5px; }
.visually-hidden { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
html[lang="zh-CN"] body { font-family: Manrope, "Microsoft YaHei", sans-serif; }
html[lang="ja"] body { font-family: Manrope, "Yu Gothic", Meiryo, sans-serif; }
html[lang="bn"] body { font-family: Manrope, "Nirmala UI", sans-serif; }
html[lang="ar"] body { font-family: Manrope, "Segoe UI", Tahoma, sans-serif; }
html[lang="zh-CN"] h1, html[lang="ja"] h1, html[lang="bn"] h1, html[lang="ar"] h1 { letter-spacing: normal; line-height: 1.2; }
html[lang="zh-CN"] h1 em, html[lang="ja"] h1 em, html[lang="bn"] h1 em, html[lang="ar"] h1 em { letter-spacing: normal; }
.menu-toggle { display: flex; gap: 13px; align-items: center; background: transparent; border: 0; cursor: pointer; font-size: 11px; letter-spacing: .03em; padding: 5px 0; position: relative; z-index: 20; }
.menu-icon { width: 23px; height: 15px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.menu-icon i { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .35s ease; }
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
main { flex: 1; }
.hero {
  align-items: center;
  background: radial-gradient(ellipse at 77% 48%, rgba(203, 165, 145, .12), transparent 39%);
  display: flex;
  min-height: min(850px, calc(100svh - 92px));
  overflow: hidden;
  padding: 100px 0 115px;
  position: relative;
}
.hero-copy { max-width: 760px; position: relative; width: 56%; z-index: 2; }
.hero-copy .eyebrow { animation: rise-in .85s .05s both; }
.hero h1 { animation: rise-in .95s .13s both; font-size: clamp(54px, 6.6vw, 96px); }
.hero .intro { animation: rise-in .9s .24s both; margin-left: 11%; }
.hero-link { align-items: center; animation: rise-in .9s .34s both; border-bottom: 1px solid var(--line); display: inline-flex; font: 10px 'DM Mono', monospace; gap: 40px; margin: 35px 0 0 11%; padding: 0 0 12px; text-transform: uppercase; transition: color .25s, border-color .25s; }
.hero-link span { color: var(--accent); font-size: 16px; transition: transform .3s; }
.hero-link:hover { border-color: var(--accent); color: var(--accent); }
.hero-link:hover span { transform: translateY(4px); }
.hero-stage {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --stage-accent: #bc8977;
  aspect-ratio: 1;
  isolation: isolate;
  position: absolute;
  right: 1%;
  top: 50%;
  transform: translateY(-50%);
  width: min(57vw, 690px);
  z-index: 1;
}
.hero-stage::before {
  background-image: linear-gradient(rgba(120, 93, 77, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 93, 77, .07) 1px, transparent 1px);
  background-position: center;
  background-size: 36px 36px;
  content: '';
  inset: 9%;
  mask-image: radial-gradient(ellipse, #000 8%, transparent 70%);
  position: absolute;
  z-index: -1;
}
.hero-stage::after {
  animation: halo-breathe 7s ease-in-out infinite;
  background: radial-gradient(circle, rgba(203, 166, 145, .24), rgba(203, 166, 145, .06) 35%, transparent 68%);
  border-radius: 50%;
  content: '';
  inset: 6%;
  position: absolute;
  z-index: -1;
}
.orbit-art { height: 100%; overflow: visible; transform: translate3d(var(--pointer-x), var(--pointer-y), 0); transition: transform .45s ease-out; width: 100%; }
.orbit-one, .orbit-two, .orbit-three { transform-box: view-box; transform-origin: 350px 350px; }
.orbit-one { animation: orbit-spin 32s linear infinite; }
.orbit-two { animation: orbit-spin-reverse 42s linear infinite; }
.orbit-three { animation: orbit-spin 57s linear infinite; }
.art-curve { stroke-dasharray: 1; stroke-dashoffset: 0; }
.curve-one { animation: line-drift 9s ease-in-out infinite alternate; }
.curve-two { animation: line-drift 11s ease-in-out infinite alternate-reverse; }
.core-wrap { animation: core-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.core-mark { fill: #fff4eb; font: 500 58px Manrope, Arial, sans-serif; letter-spacing: -8px; }
.orbit-dot { fill: var(--stage-accent); }
.orbit-dot circle:last-child { fill: #fff4eb; }
.dot-one { animation: dot-float 5s ease-in-out infinite; }
.dot-two { animation: dot-float 6.5s 1s ease-in-out infinite reverse; }
.dot-three { animation: dot-float 7s .5s ease-in-out infinite; }
.art-chip { align-items: center; animation: chip-float 5s ease-in-out infinite; backdrop-filter: blur(8px); background: rgba(248, 245, 237, .72); border: 1px solid rgba(100, 77, 65, .16); box-shadow: 0 12px 35px rgba(54, 39, 30, .07); display: flex; gap: 10px; padding: 10px 13px; position: absolute; }
.art-chip span { color: var(--stage-accent); font: 9px 'DM Mono', monospace; }
.art-chip b { font: 9px 'DM Mono', monospace; font-weight: 400; letter-spacing: .08em; }
.chip-one { left: 4%; top: 33%; }
.chip-two { animation-delay: -2s; right: 7%; top: 28%; }
.chip-three { animation-delay: -3.2s; bottom: 22%; left: 15%; }
.stage-caption { color: var(--muted); display: flex; font: 8px 'DM Mono', monospace; justify-content: space-between; letter-spacing: .08em; position: absolute; text-transform: uppercase; width: 100%; }
.stage-caption-top { top: 5%; }
.stage-caption-bottom { bottom: 6%; }
.hero-stage[data-service="woodcraft"] { --stage-accent: #94704b; }
.hero-stage[data-service="electronics"] { --stage-accent: #648f94; }
.hero-stage[data-service="translation"] { --stage-accent: #c07168; }
.hero-stage[data-service="sourcing"] { --stage-accent: #9379ae; }
.hero-stage[data-service="it-support"] { --stage-accent: #638c72; }
.hero-stage[data-service="woodcraft"] .orb-core { fill: #bd9873; }
.hero-stage[data-service="electronics"] .orb-core { fill: #83aeb0; }
.hero-stage[data-service="translation"] .orb-core { fill: #d39a91; }
.hero-stage[data-service="sourcing"] .orb-core { fill: #b7a1cf; }
.hero-stage[data-service="it-support"] .orb-core { fill: #94b59b; }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes core-float { 0%, 100% { transform: translateY(-5px) rotate(-2deg); } 50% { transform: translateY(7px) rotate(2deg); } }
@keyframes dot-float { 0%, 100% { translate: 0 -5px; } 50% { translate: 4px 8px; } }
@keyframes chip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes halo-breathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes line-drift { from { stroke-dasharray: 480 900; stroke-dashoffset: 80; } to { stroke-dasharray: 760 900; stroke-dashoffset: -120; } }
.eyebrow, .project-count, .site-footer, .menu-meta { font: 500 10px/1.3 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { color: var(--muted); margin: 0 0 23px; }
h1 { font-size: clamp(50px, 8.8vw, 128px); font-weight: 500; line-height: .91; letter-spacing: -.095em; margin: 0; }
h1 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.09em; }
.intro { color: #555550; font-size: 14px; line-height: 1.6; max-width: 340px; margin: 38px 0 0 24%; }
.work-section { scroll-margin-top: 30px; }
.section-heading { border-top: 1px solid var(--line); padding: 15px 0 3px; }
.section-heading .eyebrow { margin: 0; }
.project-list { border-bottom: 1px solid var(--line); }
.project { border-top: 1px solid var(--line); cursor: pointer; min-height: 116px; position: relative; transition: color .35s ease; }
.project:first-child { border-top: 0; }
.project::before { background: var(--project-color); content: ''; inset: 9px 0; opacity: 0; position: absolute; transform: scaleY(.6); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); z-index: 0; }
.project:hover::before, .project.is-active::before { opacity: 1; transform: scaleY(1); }
.project-link { align-items: center; display: grid; grid-template-columns: 1fr auto; min-height: 116px; position: relative; z-index: 1; }
.project-main { display: flex; align-items: baseline; gap: 18px; }
.project h2 { font-size: clamp(26px, 4vw, 59px); font-weight: 500; letter-spacing: -.075em; line-height: .95; margin: 0; }
.project-number { color: var(--muted); font: 10px 'DM Mono', monospace; }
.project-meta { color: var(--muted); display: flex; font: 10px 'DM Mono', monospace; gap: 50px; text-align: right; text-transform: uppercase; transition: color .35s ease; }
.project:hover .project-meta, .project.is-active .project-meta { color: var(--ink); }
.project-meta span:last-child { width: 32px; }
.service-details { margin-top: 22vh; scroll-margin-top: 30px; }
.service-detail { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 8%; padding: 45px 0 90px; scroll-margin-top: 30px; }
.service-detail:last-child { border-bottom: 1px solid var(--line); }
.service-detail-heading h2 { font-size: clamp(38px, 6vw, 86px); font-weight: 500; letter-spacing: -.09em; line-height: .9; margin: 0; }
.service-detail-content { max-width: 620px; }
.service-detail-content > p { font-size: clamp(22px, 3vw, 42px); letter-spacing: -.06em; line-height: 1.08; margin: 0; max-width: 600px; }
.catalogue { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 15px; }
.catalogue .eyebrow { margin-bottom: 12px; }
.catalogue-empty { color: var(--muted); font: 11px/1.5 'DM Mono', monospace; margin: 0; text-transform: uppercase; }
.product-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-card { background: rgba(255, 255, 255, .32); display: grid; grid-template-columns: 1fr 1fr; min-height: 245px; }
.product-image { align-items: center; background: #deddd6; color: var(--muted); display: flex; font: 9px 'DM Mono', monospace; justify-content: center; min-height: 245px; text-transform: uppercase; }
.product-image img { height: 100%; object-fit: cover; width: 100%; }
.product-image-gallery { overflow: hidden; position: relative; }
.product-image-gallery > img { object-fit: contain; padding: 8%; }
.product-gallery-views { bottom: 10px; display: flex; gap: 6px; left: 10px; max-width: calc(100% - 20px); overflow-x: auto; position: absolute; right: 10px; z-index: 2; }
.product-gallery-views button, .furniture-feature-views button { background: rgba(250, 248, 242, .9); border: 1px solid rgba(40, 35, 28, .2); cursor: pointer; flex: 0 0 44px; height: 42px; opacity: .76; padding: 3px; }
.product-gallery-views button[aria-pressed="true"], .furniture-feature-views button[aria-pressed="true"] { border-color: var(--accent); opacity: 1; }
.product-gallery-views button img, .furniture-feature-views button img { height: 100%; object-fit: contain; width: 100%; }
.product-card-info { display: flex; flex-direction: column; padding: 20px; }
.product-card h3 { font-size: 21px; font-weight: 500; letter-spacing: -.06em; line-height: 1; margin: 0; }
.product-card-info > p { color: var(--muted); font-size: 11px; line-height: 1.4; margin: 12px 0 0; }
.product-attributes { border-top: 1px solid var(--line); margin: 15px 0 0; }
.product-attributes > div { border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(75px, .55fr) 1fr; padding: 8px 0; }
.product-attributes dt { color: var(--muted); font: 8px 'DM Mono', monospace; text-transform: uppercase; }
.product-attributes dd { font-size: 10px; line-height: 1.5; margin: 0; }
.product-attributes a { text-decoration: underline; text-underline-offset: 3px; }
.product-prices { border-top: 1px solid var(--line); display: flex; flex-direction: column; font: 9px 'DM Mono', monospace; gap: 7px; margin-top: auto; padding-top: 12px; text-transform: uppercase; }
.product-prices span { display: flex; justify-content: space-between; }
.product-prices strong { color: var(--ink); font-weight: 500; }
.product-card .bulk-minimum { font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.product-card a { font: 9px 'DM Mono', monospace; margin-top: 17px; text-transform: uppercase; }
.product-card a span { color: var(--accent); font-size: 13px; margin-left: 5px; }
.business-section { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 8%; margin-top: 22vh; padding-top: 17px; }
.business-section .eyebrow { margin: 0; }
.business-section h2 { font-size: clamp(34px, 5vw, 72px); font-weight: 500; letter-spacing: -.08em; line-height: .98; margin: 0; max-width: 850px; }
.business-section p:last-child { color: #555550; font-size: 14px; line-height: 1.6; margin: 35px 0 0 35%; max-width: 350px; }
.site-footer { border-top: 1px solid var(--line); margin-top: 90px; padding-top: 17px; }
.site-footer p { color: var(--muted); margin: 0; }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: var(--accent); }
.site-footer a span { color: var(--accent); font-size: 14px; margin-left: 8px; }
.contact-details { color: var(--muted); display: flex; flex-wrap: wrap; font: 9px 'DM Mono', monospace; gap: 8px 18px; margin-top: 12px; text-transform: uppercase; }
.site-menu { background: var(--ink); color: var(--paper); inset: 0; opacity: 0; padding: 27px 34px; pointer-events: none; position: fixed; transform: translateY(-100%); transition: transform .65s cubic-bezier(.77,0,.18,1), opacity .45s ease; z-index: 10; }
.site-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-menu .eyebrow { color: #7e7e78; }
.menu-inner { height: 100%; display: flex; flex-direction: column; }
.site-menu nav { display: flex; flex-direction: column; margin: auto 0; }
.site-menu nav a { font-size: clamp(48px, 8vw, 120px); font-weight: 500; letter-spacing: -.09em; line-height: .94; transition: color .2s; }
.site-menu nav a:hover { color: var(--accent); }
.site-menu sup { color: var(--accent); font: 11px 'DM Mono', monospace; letter-spacing: 0; margin-left: 8px; vertical-align: top; }
.site-menu nav a span { color: var(--accent); font-size: .45em; letter-spacing: 0; vertical-align: top; }
.menu-meta { border-top: 1px solid #363632; color: #aaa9a1; display: flex; justify-content: space-between; padding-top: 17px; }
.menu-meta p { line-height: 1.5; margin: 0; }
.social-links { display: flex; gap: 22px; }
.social-links a:hover { color: var(--paper); }
.menu-backdrop { display: none; }
.admin-shell { margin: 12vh auto; max-width: 620px; padding: 0 34px; }
.admin-shell [hidden] { display: none !important; }
.admin-shell:has(.admin-dashboard:not([hidden])) { max-width: 1080px; }
.admin-back { display: inline-block; font: 10px 'DM Mono', monospace; margin-bottom: 45px; text-transform: uppercase; }
.admin-back:hover { color: var(--accent); }
.admin-shell h1 { font-size: clamp(52px, 8vw, 100px); }
.admin-note { color: var(--muted); line-height: 1.6; max-width: 400px; }
.admin-message { color: #477253; font: 11px 'DM Mono', monospace; min-height: 1.4em; }
.admin-login-security-note { background: rgba(255, 243, 232, .9); border: 1px solid #dec2a9; color: #62442f; font: 9px/1.6 'DM Mono', monospace; margin: 12px 0; max-width: 460px; padding: 10px 12px; }
.admin-message.is-error { color: #b34a3b; }
.admin-form { display: grid; gap: 16px; margin-top: 50px; max-width: 360px; }
.admin-form label { align-content: start; display: grid; font: 10px 'DM Mono', monospace; gap: 8px; text-transform: uppercase; }
.admin-form input, .admin-form textarea, .admin-form select { background: rgba(255, 255, 255, .36); border: 1px solid var(--line); border-radius: 0; color: var(--ink); font: 14px Manrope, sans-serif; min-width: 0; padding: 12px; }
.admin-form input[type="file"] { font: 11px 'DM Mono', monospace; }
.admin-form small { color: var(--muted); font: 9px 'DM Mono', monospace; }
.admin-form button { background: var(--ink); border: 0; color: var(--paper); cursor: pointer; padding: 14px; }
.admin-form button:hover { background: var(--accent); color: var(--ink); }
.admin-dashboard { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 25px; }
.admin-dashboard h2 { font-size: 30px; font-weight: 500; letter-spacing: -.06em; margin: 45px 0 0; }
.admin-dashboard > .admin-note { max-width: 700px; }
.admin-logo-preview { align-self: center; background: rgba(0, 0, 0, .04); height: 110px; object-fit: contain; padding: 10px; width: 150px; }
.admin-service-list { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 25px; }
.admin-service-form { align-content: start; border: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; }
.admin-service-heading { align-items: baseline; display: flex; gap: 12px; grid-column: span 2; }
.admin-service-heading span { color: var(--muted); font: 9px 'DM Mono', monospace; }
.admin-service-form label, .admin-toggle { align-content: start; display: grid; font: 10px 'DM Mono', monospace; gap: 8px; text-transform: uppercase; }
.admin-service-form input, .admin-service-form textarea { background: rgba(255, 255, 255, .36); border: 1px solid var(--line); color: var(--ink); font: 14px Manrope, sans-serif; min-width: 0; padding: 11px; }
.admin-service-form textarea { resize: vertical; }
.admin-toggle { align-items: center; display: flex !important; text-transform: none; }
.admin-toggle input { accent-color: var(--accent); height: 18px; width: 18px; }
.admin-form-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.admin-field-wide { grid-column: span 2; }
.admin-form-wide textarea { min-height: 90px; resize: vertical; }
.admin-product-attributes { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-attribute-group { border: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0; min-width: 0; padding: 14px; }
.admin-attribute-group legend { color: var(--accent); font: 9px 'DM Mono', monospace; padding: 0 6px; text-transform: uppercase; }
.admin-attribute-group label, .admin-tag-adder label { align-content: start; display: grid; font: 9px 'DM Mono', monospace; gap: 7px; text-transform: uppercase; }
.admin-attribute-group select[multiple] { min-height: 96px; padding: 6px; }
.admin-tag-adder { align-items: end; display: flex; gap: 8px; }
.admin-tag-adder label { flex: 1; min-width: 0; }
.admin-tag-adder button { flex: 0 0 auto; font: 8px 'DM Mono', monospace; min-height: 40px; padding: 10px !important; text-transform: uppercase; }
.admin-product-attributes > .admin-note { grid-column: 1 / -1; margin: 0; }
.admin-pantone-picker { border: 1px solid var(--line); display: grid; gap: 12px; padding: 14px; }
.admin-pantone-heading { align-items: end; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.admin-pantone-heading > div { display: grid; gap: 5px; }
.admin-pantone-heading strong { font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.admin-pantone-heading small, .admin-pantone-code small { color: var(--muted); font: 9px/1.5 'DM Mono', monospace; text-transform: none; }
.admin-pantone-heading label, .admin-pantone-code { align-content: start; display: grid; font: 9px 'DM Mono', monospace; gap: 7px; text-transform: uppercase; }
.admin-pantone-heading label { min-width: min(100%, 230px); }
.admin-pantone-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.admin-pantone-card { align-items: center; background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; display: flex; gap: 8px; min-width: 0; padding: 7px; text-align: left; }
.admin-pantone-card:hover, .admin-pantone-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.admin-pantone-card > span:last-child { font: 8px/1.3 'DM Mono', monospace; overflow-wrap: anywhere; }
.admin-pantone-swatch { background: var(--pantone-swatch); border: 1px solid rgba(0, 0, 0, .14); flex: 0 0 25px; height: 25px; }
.admin-pantone-code { max-width: 420px; }
.admin-shape-analysis { align-items: start; display: flex; flex-wrap: wrap; gap: 10px; }
.admin-shape-analysis > .admin-note, .admin-shape-analysis > .shape-benchmark-results { flex: 1 0 100%; max-width: none; }
.shape-benchmark-results { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shape-benchmark-card { border: 1px solid var(--line); display: grid; gap: 8px; padding: 14px; }
.shape-benchmark-heading { align-items: baseline; display: flex; justify-content: space-between; }
.shape-benchmark-heading strong { font-size: 13px; }
.shape-benchmark-heading span, .shape-benchmark-card > p:not(.shape-benchmark-shape) { color: var(--muted); font: 9px/1.5 'DM Mono', monospace; margin: 0; }
.shape-benchmark-shape { font-size: 22px; letter-spacing: -.04em; margin: 0; }
.shape-benchmark-card .admin-secondary { justify-self: start; }
.admin-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 13px; }
.admin-toolbar .eyebrow { margin: 0; }
.admin-form-actions { display: flex; gap: 12px; }
.admin-form .admin-secondary, .admin-secondary { background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; padding: 12px 16px; }
.admin-form .admin-secondary:hover, .admin-secondary:hover { background: var(--ink); color: var(--paper); }
.admin-product-list { border-top: 1px solid var(--line); margin-top: 35px; }
.admin-product { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 18px; padding: 14px 0; }
.admin-product > img, .admin-product-placeholder { background: rgba(0, 0, 0, .06); flex: 0 0 76px; height: 76px; object-fit: cover; }
.admin-product-placeholder { align-items: center; color: var(--muted); display: flex; font: 8px 'DM Mono', monospace; justify-content: center; text-transform: uppercase; }
.admin-product-copy { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.admin-product-copy strong { font-size: 14px; font-weight: 600; }
.admin-product-copy span { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.admin-product-actions { display: flex; gap: 8px; }
.admin-product-actions button { background: transparent; border: 1px solid var(--line); cursor: pointer; font: 9px 'DM Mono', monospace; padding: 8px 10px; text-transform: uppercase; }
.admin-product-actions button:hover { background: var(--ink); color: var(--paper); }
.admin-discussion-item { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; padding: 18px 0; }
.admin-discussion-item .admin-product-copy { flex: 1; }
.admin-discussion-item .admin-product-copy p { line-height: 1.6; margin: 4px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-discussion-item .admin-product-actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-empty { color: var(--muted); font: 10px 'DM Mono', monospace; padding: 18px 0; text-transform: uppercase; }

@media (max-width: 620px) {
  .site-shell { padding: 22px 18px 22px; }
  .site-menu { padding: 22px 18px; }
  .admin-shell { margin: 8vh auto; padding: 0 18px; }
  .admin-form-wide { grid-template-columns: 1fr; }
  .admin-field-wide { grid-column: auto; }
  .admin-product-attributes { grid-column: auto; grid-template-columns: 1fr; }
  .admin-product-attributes > .admin-note { grid-column: auto; }
  .shape-benchmark-results { grid-template-columns: 1fr; }
  .admin-form-actions { grid-column: auto; }
  .admin-service-list { grid-template-columns: 1fr; }
  .admin-logo-preview { grid-column: auto; }
  .admin-product { align-items: flex-start; flex-wrap: wrap; }
  .admin-product-copy { flex-basis: calc(100% - 100px); }
  .admin-product-actions { margin-left: 94px; }
  .admin-discussion-item { flex-direction: column; }
  .admin-discussion-item .admin-product-actions { justify-content: flex-start; margin-left: 0; }
  .hero { align-items: stretch; flex-direction: column; min-height: auto; overflow: visible; padding: 110px 0 70px; }
  .hero-copy { max-width: none; width: 100%; }
  .hero h1 { font-size: clamp(51px, 12vw, 78px); }
  .hero-stage { align-self: center; margin: 24px auto 0; position: relative; right: auto; top: auto; transform: none; width: min(100%, 490px); }
  .stage-caption { font-size: 7px; }
  .intro { margin-left: 12%; }
  .project, .project-link { min-height: 91px; }
  .project-main { gap: 10px; }
  .project-number { font-size: 8px; }
  .project-meta { gap: 12px; font-size: 8px; }
  .project-meta span:first-child { display: none; }
  .service-details { margin-top: 125px; }
  .service-detail { display: block; padding: 35px 0 70px; }
  .service-detail-content { margin: 50px 0 0 12%; }
  .catalogue { margin-top: 50px; }
  .product-grid { grid-template-columns: 1fr; }
  .business-section { display: block; margin-top: 125px; }
  .business-section h2 { margin-top: 48px; }
  .business-section p:last-child { margin: 32px 0 0 12%; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 65px; }
  .menu-meta { align-items: flex-start; flex-direction: column; gap: 28px; }
}

body.motion-disabled *, body.motion-disabled *::before, body.motion-disabled *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

.admin-page { min-height: 100svh; overflow-x: hidden; }
.admin-shell { margin: 0 auto; max-width: 1220px; padding: 26px 4vw 90px; }
.admin-masthead { align-items: center; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(300px, .8fr) minmax(390px, 1.2fr); min-height: min(75vh, 690px); overflow: hidden; position: relative; }
.admin-masthead-copy { padding: 35px 0 55px; position: relative; z-index: 2; }
.admin-masthead-copy .admin-back { margin-bottom: clamp(40px, 10vh, 105px); }
.admin-masthead-copy > .eyebrow { color: var(--muted); font: 9px 'DM Mono', monospace; letter-spacing: .08em; }
.admin-masthead-copy h1 { font-size: clamp(56px, 7.2vw, 96px); line-height: .9; margin: 18px 0 23px; }
.admin-masthead-copy h1 em { font-family: Georgia, serif; font-weight: 400; }
.admin-masthead-copy .admin-note { font-size: 14px; margin-left: 8%; max-width: 330px; }
.admin-artwork { --admin-pointer-x: 0px; --admin-pointer-y: 0px; align-self: stretch; min-height: 400px; position: relative; }
.admin-artwork::before { background-image: linear-gradient(rgba(120, 93, 77, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 93, 77, .06) 1px, transparent 1px); background-size: 38px 38px; content: ''; inset: 5%; mask-image: radial-gradient(ellipse, #000 10%, transparent 71%); position: absolute; }
.admin-artwork::after { animation: service-glow 8s ease-in-out infinite; background: radial-gradient(circle, color-mix(in srgb, var(--accent), transparent 77%), transparent 69%); content: ''; inset: 3%; pointer-events: none; position: absolute; }
.admin-artwork-svg { height: 100%; inset: 0; overflow: visible; position: absolute; transform: translate3d(var(--admin-pointer-x), var(--admin-pointer-y), 0); transition: transform .45s ease-out; width: 100%; }
.admin-orbit { fill: var(--accent); transform-box: view-box; transform-origin: 350px 350px; }
.admin-orbit-one { animation: orbit-spin 34s linear infinite; }
.admin-orbit-two { animation: orbit-spin-reverse 45s linear infinite; }
.admin-orbit-three { animation: orbit-spin 58s linear infinite; }
.admin-orbit-points { fill: var(--accent); }
.admin-orb-core { animation: core-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.admin-artwork-caption, .admin-artwork-footer { color: var(--muted); display: flex; font: 8px 'DM Mono', monospace; justify-content: space-between; letter-spacing: .06em; position: absolute; text-transform: uppercase; }
.admin-artwork-caption { left: 8%; right: 8%; top: 7%; }
.admin-artwork-footer { bottom: 7%; left: 8%; right: 8%; }
.admin-launcher-orbit { inset: 0; pointer-events: none; position: absolute; z-index: 3; }
.admin-launcher { align-items: center; background: color-mix(in srgb, var(--paper), transparent 5%); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(53, 42, 34, .09); display: grid; gap: 4px 8px; grid-template-columns: auto 1fr auto; left: 50%; max-width: min(156px, 34%); min-width: 124px; padding: 7px 9px; pointer-events: auto; position: absolute; top: 50%; transform: translate3d(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px)), 0); transition: background .3s, border-color .3s, box-shadow .3s; }
.admin-launcher:hover, .admin-launcher:focus-visible { background: var(--paper); border-color: var(--accent); box-shadow: 0 17px 46px rgba(53, 42, 34, .16); }
.admin-launcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.admin-launcher-number { color: var(--accent); font: 9px 'DM Mono', monospace; }
.admin-launcher-title { font-size: 11px; letter-spacing: -.03em; }
.admin-launcher small { display: none; }
.admin-launcher b { color: var(--accent); font-size: 13px; font-weight: 400; }
.admin-shell > .admin-message { margin: 10px 0; }
.admin-shell > .admin-form { border: 1px solid var(--line); margin: 24px 0 55px; max-width: 460px; padding: 24px; }
.admin-dashboard { border-top: 0; margin-top: 20px; padding-top: 0; }
.admin-dashboard h2 { font-size: clamp(28px, 4vw, 43px); margin: 11px 0 12px; }
.admin-toolbar { align-items: center; border: 0; color: var(--muted); padding-bottom: 0; }
.admin-orbit-nav { align-items: center; display: grid; height: clamp(400px, 56vw, 650px); justify-items: center; margin: 18px auto 52px; max-width: 820px; position: relative; }
.admin-orbit-nav::before { animation: admin-halo-pulse 8s ease-in-out infinite; background: radial-gradient(circle, color-mix(in srgb, var(--accent), transparent 72%), transparent 70%); border: 1px solid color-mix(in srgb, var(--accent), transparent 73%); border-radius: 50%; content: ''; height: min(66%, 420px); aspect-ratio: 1; position: absolute; }
.admin-orbit-nav::after { border: 1px solid color-mix(in srgb, var(--accent), transparent 48%); border-radius: 50%; content: ''; height: min(78%, 510px); aspect-ratio: 1; position: absolute; transform: rotate(-23deg) scaleY(.52); }
.admin-orbit-link { align-items: center; animation: category-enter .7s both; background: color-mix(in srgb, var(--paper), transparent 5%); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(53, 42, 34, .07); display: inline-flex; gap: 12px; padding: 12px 16px; position: absolute; transition: background .3s, border-color .3s, box-shadow .3s, transform .35s; z-index: 1; }
.admin-orbit-link span { color: var(--accent); font: 9px 'DM Mono', monospace; }
.admin-orbit-link b { color: var(--accent); font-weight: 400; }
.admin-orbit-link:hover, .admin-orbit-link:focus-visible, .admin-orbit-link.is-active { background: var(--paper); border-color: var(--accent); box-shadow: 0 17px 46px rgba(53, 42, 34, .14); transform: translateY(-4px); }
.admin-link-copy { left: 10%; top: 18%; }
.admin-link-brand { right: 8%; top: 32%; }
.admin-link-services { bottom: 19%; right: 13%; }
.admin-link-products { bottom: 28%; left: 7%; }
.admin-section { border-top: 1px solid var(--line); padding: 45px 0 12px; scroll-margin-top: 24px; }
.admin-section > .eyebrow { color: var(--accent); font: 9px 'DM Mono', monospace; letter-spacing: .1em; }
.admin-section .admin-form { margin-top: 25px; }
.seo-audit-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; margin: 22px 0; }
.seo-audit-toolbar .admin-message { margin: 0; }
.seo-audit-toolbar button { background: var(--ink); border: 0; color: var(--paper); cursor: pointer; padding: 12px 18px; }
.seo-audit-toolbar button:hover { background: var(--accent); color: var(--ink); }
.seo-audit-toolbar button:disabled { cursor: wait; opacity: .6; }
.seo-audit-results { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-audit-check { background: color-mix(in srgb, var(--paper), white 25%); border: 1px solid var(--line); border-inline-start: 3px solid var(--muted); padding: 17px 19px; }
.seo-audit-good { border-inline-start-color: #477253; }
.seo-audit-warning { border-inline-start-color: #b27a26; }
.seo-audit-issue { border-inline-start-color: #b34a3b; }
.seo-audit-info { border-inline-start-color: #728ba4; }
.seo-audit-heading { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.seo-audit-severity, .seo-audit-page { color: var(--muted); font: 8px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.seo-audit-check h3 { font-size: 16px; font-weight: 600; letter-spacing: -.025em; margin: 12px 0 6px; }
.seo-audit-check p { color: #555550; font-size: 11px; line-height: 1.6; margin: 6px 0 0; }
.seo-audit-check .seo-audit-recommendation { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.admin-user-form { align-items: center; display: grid; gap: 16px; grid-template-columns: minmax(150px, 1.4fr) minmax(140px, .8fr) minmax(120px, .7fr) auto; }
.admin-user-form select { background: color-mix(in srgb, var(--paper), white 30%); border: 1px solid var(--line); color: var(--ink); font: 12px Manrope, sans-serif; min-width: 0; padding: 10px; }
.admin-user-form > label { display: grid; font: 9px 'DM Mono', monospace; gap: 7px; text-transform: uppercase; }
.admin-user-form .admin-toggle { align-items: center; display: flex; }
.admin-user-form .admin-product-actions { flex-wrap: wrap; }
.admin-logo-preview { border: 1px solid var(--line); }
.admin-service-form { background: color-mix(in srgb, var(--paper), white 22%); }
.visual-editor-toolbar { align-items: end; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 25px; padding: 0 0 16px; }
.visual-editor-toolbar label { display: grid; font: 9px 'DM Mono', monospace; gap: 7px; letter-spacing: .04em; text-transform: uppercase; }
.visual-editor-toolbar select { background: color-mix(in srgb, var(--paper), white 30%); border: 1px solid var(--line); color: var(--ink); font: 13px Manrope, sans-serif; min-width: 210px; padding: 10px 12px; }
.visual-editor-toolbar [hidden] { display: none !important; }
.visual-open-page { color: var(--muted); font: 9px 'DM Mono', monospace; margin: 0 0 11px auto; text-transform: uppercase; }
.visual-open-page:hover { color: var(--accent); }
.visual-editor-stage { align-items: stretch; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.visual-editor-stage:has(.visual-editor-drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(300px, 365px); }
.visual-preview-frame { background: var(--paper); border: 1px solid var(--line); min-height: 650px; overflow: hidden; position: relative; }
.visual-preview-frame iframe { background: var(--paper); border: 0; display: block; height: 72vh; min-height: 650px; width: 100%; }
.visual-editor-drawer { align-self: start; background: color-mix(in srgb, var(--paper), white 24%); border: 1px solid var(--line); max-height: 72vh; overflow: auto; padding: 22px; position: sticky; top: 20px; }
.visual-editor-drawer.is-open { animation: drawer-in .32s cubic-bezier(.2,.75,.2,1) both; }
.visual-drawer-heading { align-items: flex-start; display: flex; justify-content: space-between; }
.visual-drawer-heading .eyebrow { color: var(--accent); font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.visual-drawer-heading h3 { font-size: 26px; letter-spacing: -.055em; margin: 7px 0 0; }
.visual-drawer-heading > button { font-size: 23px; line-height: 1; padding: 5px 10px; }
.visual-editor-drawer .admin-note { font-size: 12px; margin: 14px 0; }
.visual-editor-drawer .admin-message { min-height: 1.2em; }
.visual-editor-form { display: grid; gap: 14px; margin-top: 16px; }
.visual-editor-form label { align-content: start; display: grid; font: 9px 'DM Mono', monospace; gap: 7px; text-transform: uppercase; }
.visual-editor-form input:not([type="checkbox"]):not([type="file"]), .visual-editor-form textarea { background: rgba(255, 255, 255, .52); border: 1px solid var(--line); color: var(--ink); font: 13px Manrope, sans-serif; min-width: 0; padding: 11px; }
.visual-editor-form input[type="color"] { border: 1px solid var(--line); height: 40px; padding: 4px; width: 100%; }
.visual-editor-form input[type="file"] { font: 10px 'DM Mono', monospace; max-width: 100%; }
.visual-editor-form small { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: none; }
.visual-editor-save, .visual-editor-delete { border: 0; cursor: pointer; margin-top: 4px; padding: 13px; }
.visual-editor-save { background: var(--ink); color: var(--paper); }
.visual-editor-save:hover { background: var(--accent); color: var(--ink); }
.visual-editor-save:disabled { cursor: wait; opacity: .55; }
.visual-editor-delete { background: transparent; border: 1px solid #b34a3b; color: #b34a3b; }
.visual-editor-delete:hover { background: #b34a3b; color: white; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes admin-halo-pulse { 0%, 100% { opacity: .56; scale: .95; } 50% { opacity: 1; scale: 1.05; } }

@media (max-width: 760px) {
  .admin-shell { padding: 18px 5vw 60px; }
  .admin-masthead { grid-template-columns: 1fr; min-height: 0; }
  .admin-masthead-copy { padding: 15px 0 0; }
  .admin-masthead-copy .admin-back { margin-bottom: 44px; }
  .admin-masthead-copy h1 { font-size: clamp(56px, 12vw, 84px); }
  .admin-masthead-copy .admin-note { margin-left: 5%; }
  .admin-artwork { justify-self: center; min-height: 0; width: min(100%, 510px); aspect-ratio: 1; }
  .admin-orbit-nav { height: 440px; margin: 10px auto 36px; }
  .admin-orbit-nav::before { height: 57%; }
  .admin-orbit-nav::after { height: 70%; }
  .admin-link-copy { left: 0; top: 14%; }
  .admin-link-brand { right: 0; top: 31%; }
  .admin-link-services { bottom: 15%; right: 2%; }
  .admin-link-products { bottom: 28%; left: 0; }
  .admin-service-form { grid-template-columns: 1fr; }
  .admin-service-heading, .admin-service-form .admin-field-wide { grid-column: auto; }
  .admin-user-form { grid-template-columns: 1fr 1fr; }
  .admin-user-form .admin-product-copy { grid-column: 1 / -1; }
  .visual-editor-stage, .visual-editor-stage:has(.visual-editor-drawer:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .visual-preview-frame, .visual-preview-frame iframe { min-height: 65vh; }
  .visual-editor-drawer { max-height: none; position: relative; top: auto; }
  .visual-open-page { margin-left: 0; }
}

@media (max-width: 460px) {
  .admin-user-form { grid-template-columns: 1fr; }
  .seo-audit-results { grid-template-columns: 1fr; }
  .admin-user-form .admin-product-copy { grid-column: auto; }
  .admin-launcher { gap: 0 5px; max-width: min(124px, 42%); min-width: 86px; padding: 5px 6px; }
  .admin-launcher-number { font-size: 7px; }
  .admin-launcher-title { font-size: 8px; white-space: nowrap; }
  .admin-launcher-orbit .admin-launcher { transform: translate3d(calc(-50% + var(--orbit-x, 0px)), calc(-50% + var(--orbit-y, 0px)), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-orbit, .admin-orb-core, .admin-artwork::after, .admin-orbit-nav::before { animation: none; }
}

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

.home-page {
  --ink: #101010;
  --muted: #777773;
  --line: rgba(16, 16, 16, .16);
  background: var(--paper);
  color: var(--ink);
  min-height: 100svh;
  overflow-x: hidden;
}
.home-page .site-header { inset: 0 0 auto; padding: 25px 4.1vw; position: absolute; z-index: 5; }
.home-page .wordmark-logo { height: 40px; }
.home-page .menu-toggle { color: var(--ink); }
.home-main { display: block; min-height: 100svh; overflow: hidden; padding: 0 4.1vw 26px; position: relative; }
.home-hero { align-items: center; display: flex; min-height: min(850px, 100svh); overflow: hidden; padding: 115px 0 90px; position: relative; }
.home-copy { max-width: 760px; position: relative; width: 57%; z-index: 2; }
.home-copy > .eyebrow { animation: rise-in .85s .05s both; }
.home-copy h1 { animation: rise-in .95s .13s both; font-size: clamp(54px, 5.8vw, 86px); letter-spacing: -.095em; }
.home-copy h1 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.09em; }
.home-intro { animation: rise-in .9s .24s both; color: #555550; font-size: 14px; line-height: 1.6; margin: 38px 0 0 11%; max-width: 390px; }
.home-copy .hero-link { margin-left: 11%; }
.home-hero .hero-stage { right: -1%; top: 50%; transform: translateY(-50%); width: min(57vw, 690px); }
.home-hero .orbit-art { height: 100%; overflow: visible; transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0); transition: transform .45s ease-out; width: 100%; }
.home-hero .orbit-one, .home-hero .orbit-two, .home-hero .orbit-three { transform-box: view-box; transform-origin: 350px 350px; }
.home-hero .orbit-one { animation: orbit-spin 32s linear infinite; }
.home-hero .orbit-two { animation: orbit-spin-reverse 42s linear infinite; }
.home-hero .orbit-three { animation: orbit-spin 57s linear infinite; }
.home-hero .art-curve { stroke-dasharray: 1; stroke-dashoffset: 0; }
.home-hero .curve-one { animation: line-drift 9s ease-in-out infinite alternate; }
.home-hero .curve-two { animation: line-drift 11s ease-in-out infinite alternate-reverse; }
.home-hero .core-wrap { animation: core-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.home-hero .orbit-dot { fill: var(--stage-accent); }
.home-hero .orbit-dot circle:last-child { fill: #fff4eb; }
.home-hero .dot-one { animation: dot-float 5s ease-in-out infinite; }
.home-hero .dot-two { animation: dot-float 6.5s 1s ease-in-out infinite reverse; }
.home-hero .dot-three { animation: dot-float 7s .5s ease-in-out infinite; }
.home-hero .art-chip { background: rgba(248, 245, 237, .82); }
.home-hero .stage-caption { color: var(--muted); }
.home-hero .hero-stage[data-service="woodcraft"] { --stage-accent: #94704b; }
.home-hero .hero-stage[data-service="electronics"] { --stage-accent: #648f94; }
.home-hero .hero-stage[data-service="translation"] { --stage-accent: #c07168; }
.home-hero .hero-stage[data-service="sourcing"] { --stage-accent: #9379ae; }
.home-hero .hero-stage[data-service="it-support"] { --stage-accent: #638c72; }
.home-hero .hero-stage[data-service="woodcraft"] .orb-core { fill: #bd9873; }
.home-hero .hero-stage[data-service="electronics"] .orb-core { fill: #83aeb0; }
.home-hero .hero-stage[data-service="translation"] .orb-core { fill: #d39a91; }
.home-hero .hero-stage[data-service="sourcing"] .orb-core { fill: #b7a1cf; }
.home-hero .hero-stage[data-service="it-support"] .orb-core { fill: #94b59b; }
.category-index { margin-top: 10px; }
.category-heading { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 15px 0 13px; }
.category-heading .eyebrow { margin: 0; }
.index-indicator { color: var(--accent); font-size: 15px; margin-left: 9px; }
.category-row {
  align-items: center;
  animation: category-enter .7s both;
  animation-delay: calc(.24s + var(--row-index, 0) * .08s);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: 38px minmax(230px, 1fr) minmax(200px, .8fr) 30px;
  min-height: 66px;
  overflow: hidden;
  position: relative;
}
.category-row::before { background: linear-gradient(90deg, rgba(205, 155, 135, .15), rgba(205, 155, 135, .035) 64%, transparent); content: ''; inset: 0; opacity: 0; position: absolute; transform: translateX(-24px); transition: opacity .45s, transform .65s cubic-bezier(.2,.75,.2,1); }
.category-row > span { position: relative; }
.category-number { color: #938f86; font: 9px 'DM Mono', monospace; }
.category-name { font-size: clamp(22px, 3.1vw, 39px); letter-spacing: -.07em; transition: color .3s, transform .45s cubic-bezier(.2,.75,.2,1); }
.category-summary { color: var(--muted); font: 9px 'DM Mono', monospace; letter-spacing: .035em; text-transform: uppercase; transition: color .3s; }
.category-arrow { color: var(--accent); font-size: 19px; justify-self: end; opacity: 0; transform: translate(-12px, 12px); transition: opacity .25s, transform .4s; }
.category-row:hover::before, .category-row:focus-visible::before { opacity: 1; transform: translateX(0); }
.category-row:hover .category-name, .category-row:focus-visible .category-name { color: #9b6658; transform: translateX(9px); }
.category-row:hover .category-summary, .category-row:focus-visible .category-summary { color: var(--ink); }
.category-row:hover .category-arrow, .category-row:focus-visible .category-arrow { opacity: 1; transform: translate(0); }
.category-row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.home-footer { align-items: center; color: var(--muted); display: flex; font: 9px 'DM Mono', monospace; justify-content: space-between; letter-spacing: .05em; padding-top: 18px; text-transform: uppercase; }
.home-footer a { color: var(--ink); }
.home-footer a span, .detail-footer a span { color: var(--accent); margin-left: 5px; }
@keyframes category-enter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.service-page { background: var(--paper); min-height: 100svh; overflow-x: hidden; padding: 0 4.1vw; }
.service-page .site-header { min-height: 88px; }
.service-page .wordmark-logo { height: 34px; }
.site-search-shell { margin: 0 auto; max-width: 620px; position: relative; width: 100%; z-index: 6; }
.site-search { align-items: center; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 46px; }
.site-search:focus-within { border-color: var(--accent); }
.site-search input { background: transparent; border: 0; color: var(--ink); font: 12px Manrope, Arial, sans-serif; min-height: 44px; min-width: 0; outline: 0; padding: 0 15px; }
.site-search input::placeholder { color: var(--muted); opacity: 1; }
.site-search button { align-items: center; align-self: stretch; background: var(--ink); border: 0; color: var(--paper); cursor: pointer; display: inline-flex; font: 9px 'DM Mono', monospace; gap: 8px; justify-content: center; letter-spacing: .06em; min-width: 116px; padding: 0 16px; text-transform: uppercase; transition: background .2s, color .2s; }
.site-search button:hover, .site-search button:focus-visible { background: var(--accent); color: var(--ink); }
.site-search-art { height: 23px; overflow: visible; width: 23px; }
.site-search-art ellipse { fill: none; stroke: #d9a994; stroke-opacity: .82; stroke-width: .7; }
.site-search-art circle:last-child { fill: #fffaf2; }
.site-search-orbit { animation: search-orbit-spin 14s linear infinite; transform-box: view-box; transform-origin: 16px 16px; }
.site-search-orbit-reverse { animation-direction: reverse; animation-duration: 19s; stroke-dasharray: 2 2; }
@keyframes search-orbit-spin { to { rotate: 360deg; } }
.site-search-results { background: var(--paper); border-top: 1px solid var(--line); grid-column: 1 / -1; max-height: min(55vh, 440px); overflow-y: auto; }
.site-search-results[hidden] { display: none; }
.site-search-result { border-bottom: 1px solid var(--line); display: grid; gap: 4px; padding: 12px 15px; }
.site-search-result:last-child { border-bottom: 0; }
.site-search-result:hover, .site-search-result:focus-visible { background: rgba(255, 255, 255, .72); }
.site-search-result-heading { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.site-search-result-title { font-size: 12px; font-weight: 600; }
.site-search-result-kind, .site-search-result-context { color: var(--accent); font: 8px 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.site-search-result-excerpt, .site-search-message { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }
.site-search-message { padding: 14px 15px; }
.back-link { align-items: center; display: inline-flex; font: 9px 'DM Mono', monospace; gap: 11px; letter-spacing: .05em; text-transform: uppercase; transition: color .2s; }
.back-link:hover { color: var(--accent); }
.back-link span { color: var(--accent); font-size: 15px; }
.service-page-main { min-height: 65vh; }
.service-loading { color: var(--muted); font: 10px 'DM Mono', monospace; padding-top: 22vh; text-transform: uppercase; }
.service-intro { align-items: center; animation: service-appear .7s both; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; min-height: min(690px, 76svh); overflow: hidden; padding: 8vh 0; position: relative; }
.service-intro::before { background: radial-gradient(ellipse at 78% 50%, color-mix(in srgb, var(--service-accent), transparent 78%), transparent 47%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.service-intro > .eyebrow, .service-intro > h1, .service-intro > .service-lead { grid-column: 1; position: relative; z-index: 1; }
.service-intro > .eyebrow { align-self: end; margin: 0 0 20px; }
.service-intro h1 { font-size: clamp(52px, 8vw, 112px); line-height: .9; overflow-wrap: anywhere; }
.service-lead { align-self: start; color: #4f4e49; font-size: clamp(18px, 2.5vw, 32px); letter-spacing: -.045em; line-height: 1.22; margin: 26px 0 0 8%; max-width: 510px; }
.service-art { align-self: center; aspect-ratio: 1; grid-column: 2; grid-row: 1 / span 3; justify-self: center; max-width: 620px; position: relative; width: min(47vw, 620px); }
.service-art::before { animation: service-glow 8s ease-in-out infinite; background: radial-gradient(circle, color-mix(in srgb, var(--service-accent), transparent 56%), transparent 69%); content: ''; inset: 2%; position: absolute; }
.art-ring { animation: service-spin 36s linear infinite; border: 1px solid color-mix(in srgb, var(--service-accent), transparent 36%); border-radius: 50%; height: 42%; left: 29%; position: absolute; top: 29%; transform: rotate(28deg) scaleY(.44); width: 42%; }
.ring-b { animation-direction: reverse; animation-duration: 49s; border-style: dashed; border-color: color-mix(in srgb, var(--service-accent), transparent 55%); transform: rotate(-55deg) scaleY(.53); }
.ring-c { animation-duration: 62s; border-color: color-mix(in srgb, var(--service-accent), transparent 67%); transform: rotate(76deg) scaleY(.64); }
.art-sphere { animation: sphere-float 6s ease-in-out infinite; background: radial-gradient(circle at 32% 25%, #fffaf0, color-mix(in srgb, var(--service-accent), white 18%) 28%, color-mix(in srgb, var(--service-accent), #201b18 32%) 100%); border-radius: 50%; box-shadow: 0 35px 90px color-mix(in srgb, var(--service-accent), transparent 71%), inset -18px -25px 42px rgba(30, 21, 18, .12); height: 35%; left: 32.5%; position: absolute; top: 32.5%; width: 35%; }
.art-sphere .service-core-mark { height: 48%; left: 26%; mix-blend-mode: multiply; object-fit: contain; position: absolute; top: 26%; width: 48%; }
.art-annotation { color: var(--muted); font: 8px 'DM Mono', monospace; position: absolute; text-transform: uppercase; }
.annotation-a { left: 1%; top: 39%; }
.annotation-b { bottom: 15%; right: 5%; }
.catalogue-section { padding: 35px 0 100px; }
.catalogue-header { align-items: end; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 30px; padding-bottom: 18px; }
.catalogue-header .eyebrow { margin: 0 0 11px; }
.catalogue-header h2 { font-size: clamp(30px, 5vw, 56px); font-weight: 500; letter-spacing: -.07em; margin: 0; }
.catalogue-header > .eyebrow { margin-bottom: 7px; }
.service-page .product-grid { gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-page .product-card { background: #e7e5dd; grid-template-columns: minmax(0, 1.1fr) minmax(190px, .9fr); min-height: 330px; }
.service-page .product-image { background: #dedbd1; min-height: 330px; }
.service-page .product-card-info { padding: clamp(18px, 2.5vw, 32px); }
.service-page .product-card h3 { font-size: clamp(21px, 3vw, 32px); }
.product-configurator { background: #fbfaf7; border: 1px solid rgba(70, 58, 45, .13); box-shadow: 0 20px 60px rgba(51, 41, 31, .07); display: grid; gap: 0; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .72fr); overflow: hidden; }
.configurator-stage { aspect-ratio: 1.28 / 1; background: radial-gradient(ellipse at 52% 42%, #fffefa 0, #f1eee6 58%, #e9e5da 100%); min-height: 340px; overflow: hidden; position: relative; }
.configurator-canvas, .configurator-canvas canvas { height: 100%; inset: 0; position: absolute; width: 100%; }
.configurator-canvas { z-index: 1; }
.configurator-canvas canvas { display: block; touch-action: none; }
.configurator-poster { height: 100%; inset: 0; mix-blend-mode: multiply; object-fit: contain; padding: 6%; position: absolute; transition: opacity .35s; width: 100%; z-index: 2; }
.product-configurator.is-loaded .configurator-poster { opacity: 0; pointer-events: none; }
.configurator-stage-label { background: rgba(255, 253, 248, .72); color: #776d61; font: 8px 'DM Mono', monospace; left: 18px; letter-spacing: .12em; padding: 8px 10px; position: absolute; top: 18px; z-index: 3; }
.configurator-status { background: rgba(255, 253, 248, .9); bottom: 15px; color: #55514a; font: 9px/1.5 'DM Mono', monospace; left: 15px; margin: 0; max-width: min(65%, 440px); padding: 9px 11px; position: absolute; z-index: 3; }
.configurator-controls { bottom: 15px; color: #62594e; display: flex; flex-wrap: wrap; font: 8px 'DM Mono', monospace; gap: 6px; justify-content: flex-end; pointer-events: none; position: absolute; right: 15px; z-index: 3; }
.configurator-controls span { background: rgba(255, 253, 248, .9); padding: 8px 9px; }
.configurator-panel { align-content: start; background: rgba(255, 255, 255, .86); border-left: 1px solid rgba(70, 58, 45, .1); display: grid; gap: 17px; padding: clamp(20px, 2.4vw, 34px); }
.configurator-panel > .eyebrow { color: #a36d4c; font: 8px 'DM Mono', monospace; letter-spacing: .1em; margin: 0 0 -12px; }
.configurator-panel h3 { font-size: clamp(21px, 2vw, 28px); font-weight: 600; letter-spacing: -.05em; margin: 0; }
.configurator-panel-hint { color: #726b62; font-size: 11px; margin: -12px 0 0; }
.configurator-part-picker, .configurator-material-picker, .configurator-part-details { border-top: 1px solid rgba(70, 58, 45, .12); display: grid; gap: 12px; padding-top: 15px; }
.configurator-section-label { color: #5f574d; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.configurator-part-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.configurator-part-button { background: #fff; border: 1px solid #ded6ca; border-radius: 999px; color: #51483e; cursor: pointer; font: 10px Manrope, sans-serif; padding: 8px 12px; transition: background .18s, border-color .18s, color .18s; }
.configurator-part-button:hover, .configurator-part-button[aria-pressed="true"] { background: #a9572b; border-color: #a9572b; color: white; }
.configurator-options { min-height: 35px; }
.configurator-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.configurator-swatch { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 7px; color: #5e554b; cursor: pointer; display: inline-flex; flex-direction: column; font: 9px Manrope, sans-serif; gap: 5px; min-width: 49px; padding: 5px 4px; }
.configurator-swatch::before { background: var(--swatch-color); border: 1px solid rgba(0, 0, 0, .16); border-radius: 50%; content: ''; height: 39px; width: 39px; }
.configurator-swatch:hover, .configurator-swatch[aria-pressed="true"] { background: #f4eee7; border-color: #b5653a; }
.configurator-part-info { color: #5d554c; font-size: 10px; line-height: 1.55; }
.configurator-part-name { color: #3e342a; display: block; font-size: 13px; margin-bottom: 8px; }
.configurator-part-info > p { margin: 8px 0 0; }
.configurator-spec-list { display: grid; gap: 6px; margin: 0; }
.configurator-spec-list > div { display: grid; gap: 10px; grid-template-columns: 74px minmax(0, 1fr); }
.configurator-spec-list dt { color: #82776b; font-size: 9px; }
.configurator-spec-list dd { color: #423a32; font-size: 10px; margin: 0; }
.configurator-summary { border-top: 1px solid rgba(70, 58, 45, .12); color: #666159; font-size: 9px; padding-top: 12px; }
.configurator-summary summary { cursor: pointer; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.configurator-summary pre { font: 9px/1.6 'DM Mono', monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-shape-reference-preview { align-items: center; background: rgba(255, 255, 255, .4); border: 1px solid var(--line); display: flex; min-width: 0; padding: 10px; }
.admin-shape-reference-preview[hidden] { display: none; }
.admin-shape-reference-preview a { align-items: center; color: var(--ink); display: flex; font: 8px 'DM Mono', monospace; gap: 12px; text-decoration: none; text-transform: uppercase; }
.admin-shape-reference-preview img { background: #eeeae1; height: 92px; object-fit: contain; width: 120px; }
.admin-model-config { background: rgba(255, 255, 255, .38); border: 1px solid var(--line); margin: 25px 0; padding: 22px; }
.admin-model-config h3 { font-size: 24px; letter-spacing: -.05em; margin: 0; }
.admin-model-parts { display: grid; gap: 16px; }
.admin-model-part { border: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
.admin-model-part legend { color: var(--accent); font: 9px 'DM Mono', monospace; padding: 0 7px; text-transform: uppercase; }
.admin-model-part small { color: var(--muted); display: block; font: 8px/1.5 'DM Mono', monospace; margin-top: 5px; }
.admin-product-gallery { min-width: 0; }
.admin-gallery-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-gallery-thumbnail { background: rgba(255, 255, 255, .45); border: 1px solid var(--line); display: grid; font: 8px 'DM Mono', monospace; gap: 7px; padding: 7px; width: 120px; }
.admin-gallery-thumbnail > img { background: #e9e6de; height: 84px; object-fit: contain; width: 100%; }
.admin-gallery-thumbnail > span { align-items: center; display: flex; gap: 5px; }
.admin-gallery-thumbnail input { accent-color: var(--accent); margin: 0; }
.admin-model-options { display: grid; gap: 10px; }
.admin-model-option { align-items: end; border: 1px solid var(--line); display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 11px; }
.admin-model-option > button { grid-column: 1 / -1; }
.admin-model-part textarea[name="part_options"] { font: 10px/1.5 'DM Mono', monospace; }
.admin-model-config[hidden] { display: none; }
.furniture-showroom { --furniture-ink: #292722; --furniture-muted: #7f7b73; --furniture-line: rgba(59, 53, 45, .17); margin: 0 auto; max-width: 1440px; padding: 7vh 0 0; }
.furniture-intro { align-items: start; border-bottom: 1px solid var(--furniture-line); display: grid; gap: 20px 4vw; grid-template-areas: "eyebrow eyebrow eyebrow" "title copy orb" "edition cta orb"; grid-template-columns: minmax(0, 1.1fr) minmax(220px, .7fr) minmax(230px, .8fr); padding: 4vh 0 7vh; }
.furniture-intro .eyebrow { color: #9b6e59; grid-area: eyebrow; margin: 0 0 3px; }
.furniture-intro h1 { align-self: end; color: var(--furniture-ink); font-size: clamp(62px, 8vw, 116px); font-weight: 450; grid-area: title; letter-spacing: -.09em; line-height: .78; margin: 0; }
.furniture-intro h1 em { color: #99745f; font-family: Georgia, serif; font-weight: 400; }
.furniture-intro > p:not(.eyebrow) { align-self: end; color: #5d5a53; font-size: clamp(14px, 1.4vw, 18px); grid-area: copy; letter-spacing: -.025em; line-height: 1.7; margin: 0 0 14px; max-width: 390px; }
.furniture-orbit-art { align-self: center; aspect-ratio: 1; grid-area: orb; justify-self: center; max-width: 360px; position: relative; width: 100%; }
.furniture-orbit-art::before { background: radial-gradient(circle, rgba(185, 137, 119, .18), transparent 70%); content: ''; inset: 2%; position: absolute; }
.furniture-orbit-art svg { height: 100%; overflow: visible; position: relative; width: 100%; }
.furniture-orbit-art svg > image { filter: drop-shadow(0 3px 5px rgba(57, 36, 30, .18)); }
.furniture-orbit { fill: none; transform-box: view-box; transform-origin: 350px 350px; }
.furniture-orbit ellipse { rx: 258px; ry: 112px; }
.furniture-orbit circle { fill: #a77d6e; stroke: #f7eee6; stroke-width: 3px; }
.furniture-orbit-one { animation: orbit-spin 34s linear infinite; stroke: #b98f78; stroke-opacity: .75; stroke-width: 2px; }
.furniture-orbit-two { animation: orbit-spin-reverse 45s linear infinite; stroke: #a77d6e; stroke-opacity: .55; stroke-width: 1.5px; }
.furniture-orbit-two ellipse { rx: 216px; ry: 143px; }
.furniture-orbit-three { animation: orbit-spin 58s linear infinite; stroke: #a77d6e; stroke-dasharray: 3 12; stroke-opacity: .45; stroke-width: 2px; }
.furniture-orbit-three ellipse { rx: 170px; ry: 270px; }
.furniture-orb-core { animation: sphere-float 6s ease-in-out infinite; filter: drop-shadow(0 20px 24px rgba(77, 53, 43, .17)); transform-box: fill-box; transform-origin: center; }
.furniture-orbit-art > span { bottom: 7%; color: var(--furniture-muted); font: 8px 'DM Mono', monospace; letter-spacing: .09em; position: absolute; right: 4%; }
.furniture-browse-link, .furniture-enquiry { align-items: center; border-bottom: 1px solid #9b6e59; color: var(--furniture-ink); display: inline-flex; font: 9px 'DM Mono', monospace; gap: 24px; justify-content: space-between; letter-spacing: .07em; padding: 0 0 12px; text-transform: uppercase; transition: color .2s, border-color .2s; width: fit-content; }
.furniture-browse-link { align-self: end; grid-area: cta; margin-top: 4px; }
.furniture-browse-link:hover, .furniture-enquiry:hover { border-color: #4d483e; color: #9b6e59; }
.furniture-browse-link span, .furniture-enquiry span { color: #9b6e59; font-size: 16px; }
.furniture-edition { align-self: end; color: var(--furniture-muted); font: 8px 'DM Mono', monospace; grid-area: edition; letter-spacing: .08em; }
.furniture-edition i, .furniture-image-index i { color: #b18770; font-style: normal; padding: 0 7px; }
.furniture-feature { align-items: stretch; display: grid; gap: clamp(28px, 6vw, 86px); grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr); padding: 5vh 0 10vh; }
.furniture-model-configurator { grid-column: 1 / -1; min-width: 0; }
.furniture-feature-image { align-items: center; background: linear-gradient(145deg, #f1eee6, #e6e0d4); display: flex; justify-content: center; min-height: clamp(300px, 42vw, 570px); overflow: hidden; position: relative; }
.furniture-feature-image::after { border: 1px solid rgba(118, 99, 81, .15); content: ''; inset: 16px; pointer-events: none; position: absolute; }
.furniture-feature-image img { mix-blend-mode: multiply; max-height: 76%; max-width: 88%; object-fit: contain; transition: opacity .22s ease, transform .5s ease; }
.furniture-feature-views { bottom: 30px; display: flex; gap: 7px; left: 30px; max-width: calc(100% - 60px); overflow-x: auto; position: absolute; z-index: 2; }
.furniture-feature-views button { flex-basis: 52px; height: 48px; }
.furniture-feature-image img:hover { transform: scale(1.025); }
.furniture-image-index, .furniture-image-caption { color: #706b62; font: 8px 'DM Mono', monospace; letter-spacing: .06em; position: absolute; text-transform: uppercase; z-index: 1; }
.furniture-image-index { left: 30px; top: 27px; }
.furniture-image-caption { bottom: 27px; right: 30px; }
.furniture-feature-info { align-self: center; padding: 20px 0; }
.furniture-feature-info > .eyebrow { color: #9b6e59; margin: 0 0 17px; }
.furniture-feature-info h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 450; letter-spacing: -.07em; margin: 0 0 17px; overflow-wrap: anywhere; }
.furniture-feature-info > p:not(.eyebrow) { color: #68645d; font-size: 12px; line-height: 1.75; margin: 0; max-width: 340px; }
.furniture-feature-no-image, .furniture-product-no-image { color: #827c72; font: 8px 'DM Mono', monospace; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.furniture-feature-no-image { background: rgba(255, 255, 255, .34); padding: 28px; }
.furniture-feature-attributes { color: #68645d; font-size: 10px; line-height: 1.6; }
.furniture-feature-attributes p { margin: 6px 0; }
.furniture-feature-attributes strong { color: #9b6e59; font: 8px 'DM Mono', monospace; margin-right: 8px; text-transform: uppercase; }
.furniture-shape-reference { color: #68645d; display: inline-block; font: 8px 'DM Mono', monospace; margin: 12px 0 18px; text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase; }
.furniture-shape-reference[hidden] { display: none; }
.shape-reference-dialog { background: #fbfaf7; border: 1px solid rgba(70, 58, 45, .2); box-shadow: 0 24px 90px rgba(24, 19, 15, .28); max-height: min(90vh, 900px); max-width: min(92vw, 1100px); padding: 18px; position: fixed; }
.shape-reference-dialog::backdrop { background: rgba(27, 23, 19, .72); backdrop-filter: blur(4px); }
.shape-reference-dialog img { display: block; max-height: calc(90vh - 90px); max-width: 100%; object-fit: contain; }
.shape-reference-close { background: #fff; border: 1px solid rgba(70, 58, 45, .2); color: #51483e; cursor: pointer; display: block; font: 9px 'DM Mono', monospace; margin: 0 0 12px auto; padding: 8px 12px; text-transform: uppercase; }
.shape-reference-error { color: #8f392f; font-size: 12px; }
.furniture-specs { border-top: 1px solid var(--furniture-line); margin: 30px 0 28px; }
.furniture-specs > div { align-items: baseline; border-bottom: 1px solid var(--furniture-line); display: grid; gap: 12px; grid-template-columns: 90px 1fr; padding: 12px 0; }
.furniture-specs dt { color: var(--furniture-muted); font: 8px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.furniture-specs dd { color: var(--furniture-ink); font-size: 11px; margin: 0; }
.furniture-catalogue { border-top: 1px solid var(--furniture-line); padding: 6vh 0 10vh; }
.furniture-catalogue-heading { align-items: end; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; margin-bottom: 28px; }
.furniture-catalogue-heading .eyebrow { color: #9b6e59; margin: 0 0 10px; }
.furniture-catalogue-heading h2 { font-size: clamp(32px, 5vw, 68px); font-weight: 450; letter-spacing: -.075em; margin: 0; }
.furniture-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.furniture-filters button { background: transparent; border: 1px solid var(--furniture-line); color: #656159; cursor: pointer; font: 8px 'DM Mono', monospace; letter-spacing: .04em; padding: 11px 14px; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.furniture-filters button[aria-pressed="true"], .furniture-filters button:hover { background: var(--furniture-ink); border-color: var(--furniture-ink); color: #f5f2e9; }
.furniture-filters button:focus-visible, .furniture-product:focus-visible { outline: 2px solid #9b6e59; outline-offset: 3px; }
.furniture-product-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.furniture-product { background: transparent; border: 1px solid transparent; color: var(--furniture-ink); cursor: pointer; display: flex; flex-direction: column; min-width: 0; padding: 0 0 12px; text-align: left; transition: border-color .2s, background .2s; }
.furniture-product:hover, .furniture-product.is-selected { background: rgba(255, 255, 255, .48); border-color: var(--furniture-line); }
.furniture-product-image { align-items: center; background: #eeece5; display: flex; height: clamp(130px, 17vw, 235px); justify-content: center; overflow: hidden; padding: 12px; width: 100%; }
.furniture-product-no-image { padding: 15px; }
.furniture-product-image img { height: 100%; mix-blend-mode: multiply; object-fit: contain; transition: transform .35s; width: 100%; }
.furniture-product:hover .furniture-product-image img { transform: scale(1.04); }
.furniture-product-meta { display: flex; flex-wrap: wrap; font: 8px 'DM Mono', monospace; gap: 7px; justify-content: space-between; letter-spacing: .035em; padding: 13px 11px 0; text-transform: uppercase; }
.furniture-product-meta span:first-child { color: #777269; }
.furniture-product-meta span:last-child { color: #9b6e59; }
.furniture-note { border-left: 1px solid #b18770; color: #777269; font: 9px/1.7 'DM Mono', monospace; margin: 32px 0 0; max-width: 740px; padding: 2px 0 2px 16px; }
.catalogue-empty-state { align-items: flex-start; border: 1px solid var(--line); display: flex; flex-direction: column; max-width: 700px; padding: clamp(25px, 6vw, 70px); }
.catalogue-empty-state p { font-size: clamp(30px, 5vw, 62px); letter-spacing: -.07em; margin: 0 0 14px; }
.catalogue-empty-state > span { color: var(--muted); font: 10px/1.7 'DM Mono', monospace; max-width: 420px; text-transform: uppercase; }
.catalogue-empty-state a { border-bottom: 1px solid var(--line); font: 9px 'DM Mono', monospace; margin-top: 28px; padding-bottom: 10px; text-transform: uppercase; }
.catalogue-empty-state a span { color: var(--accent); margin-left: 8px; }
.site-content-warning { background: #fff3e8; border: 1px solid #dec2a9; color: #62442f; font: 10px/1.6 'DM Mono', monospace; margin: 12px 0; padding: 10px 12px; }
.detail-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font: 9px 'DM Mono', monospace; justify-content: space-between; letter-spacing: .05em; padding: 19px 0 25px; text-transform: uppercase; }
.detail-footer a { color: var(--ink); }
.service-not-found { padding: 18vh 0; }
.service-not-found h1 { font-size: clamp(48px, 8vw, 96px); max-width: 800px; }
.service-not-found .back-link { margin-top: 35px; }
@keyframes service-appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes service-spin { to { rotate: 360deg; } }
@keyframes sphere-float { 0%, 100% { translate: 0 -7px; } 50% { translate: 0 8px; } }
@keyframes service-glow { 0%, 100% { opacity: .5; scale: .92; } 50% { opacity: 1; scale: 1.07; } }

.home-page .home-main { min-height: 100svh; padding: 0 4.1vw; }
.home-page .home-main::after { display: none; }
.home-page .home-hero { min-height: 100svh; padding: 95px 0 110px; }
.home-page .home-copy { width: 54%; }
.home-page .home-copy h1 { font-size: clamp(56px, 6.3vw, 92px); }
.home-page .home-copy .eyebrow { color: var(--muted); }
.home-page .home-intro { color: #555550; }
.home-page .home-hero .hero-stage { --stage-accent: #bc8977; }
.home-page .home-hero .art-chip { animation: chip-float 5s ease-in-out infinite; border: 1px solid rgba(100, 77, 65, .16); box-shadow: 0 12px 35px rgba(54, 39, 30, .07); }
.home-page .home-footer { bottom: 28px; gap: 30px; left: 4.1vw; padding: 0; position: absolute; right: 4.1vw; z-index: 3; }
.home-services-link { align-items: center; border-bottom: 1px solid var(--line); color: var(--ink); display: inline-flex; font: 10px 'DM Mono', monospace; gap: 32px; margin-right: auto; padding: 0 0 11px; text-transform: uppercase; transition: border-color .25s, color .25s; }
.home-services-link span { color: var(--accent); font-size: 16px; transition: transform .3s; }
.home-services-link:hover { border-color: var(--accent); color: #9b6658; }
.home-services-link:hover span { transform: translate(4px, -4px); }

.services-page { background: var(--paper); min-height: 100svh; overflow: hidden; padding: 0 4.1vw; }
.services-page .site-header { min-height: 86px; }
.services-page .wordmark-logo { height: 36px; }
.services-page .back-link { color: var(--ink); }
.services-main { min-height: calc(100svh - 200px); position: relative; }
.services-intro { left: 0; position: absolute; top: 8%; width: min(38%, 470px); z-index: 2; }
.services-intro .eyebrow { margin-bottom: 24px; }
.services-intro h1 { font-size: clamp(50px, 7vw, 91px); line-height: .9; }
.services-intro h1 em { font-family: Georgia, serif; font-weight: 400; }
.services-intro > p:last-child { color: #555550; font-size: 14px; margin: 24px 0 0 8%; }
.service-explorer { height: min(70vh, 760px); min-height: min(480px, calc(100svh - 300px)); position: absolute; right: 0; top: 0; width: min(76vw, 900px); }
.service-artwork { --pointer-x: 0px; --pointer-y: 0px; height: 100%; isolation: isolate; position: absolute; right: 0; top: 0; transform: translate3d(var(--pointer-x), var(--pointer-y), 0); transition: transform .45s ease-out; width: 100%; }
.service-artwork::before { background-image: linear-gradient(rgba(120, 93, 77, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 93, 77, .06) 1px, transparent 1px); background-size: 38px 38px; content: ''; inset: 7%; mask-image: radial-gradient(ellipse, #000 10%, transparent 70%); position: absolute; z-index: -1; }
.service-artwork::after { animation: service-glow 8s ease-in-out infinite; background: radial-gradient(circle, color-mix(in srgb, var(--service-accent, #bd8977), transparent 73%), transparent 69%); content: ''; inset: 4%; position: absolute; z-index: -1; }
.service-artwork-svg { height: 100%; overflow: visible; transform: translate3d(var(--pointer-x), var(--pointer-y), 0); width: 100%; }
.service-orbit { transform-box: view-box; transform-origin: 350px 350px; }
.service-orbit.orbit-one { animation: orbit-spin 34s linear infinite; fill: var(--service-accent, #bd8977); }
.service-orbit.orbit-two { animation: orbit-spin-reverse 45s linear infinite; fill: var(--service-accent, #bd8977); }
.service-orbit.orbit-three { animation: orbit-spin 58s linear infinite; fill: var(--service-accent, #bd8977); }
.service-sphere { animation: core-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.service-orbit-dots { fill: var(--service-accent, #bd8977); }
.service-artwork-caption, .artwork-tag { color: var(--muted); font: 9px 'DM Mono', monospace; letter-spacing: .06em; position: absolute; text-transform: uppercase; }
.service-artwork-caption { display: flex; justify-content: space-between; left: 4%; right: 4%; top: 2%; }
.artwork-tag-top { left: 4%; top: 51%; transition: color .3s, transform .3s; }
.artwork-tag-bottom { bottom: 3%; right: 3%; }
.service-category-list { inset: 0; pointer-events: none; position: absolute; z-index: 4; }
.service-category-list.is-orbiting .service-category { bottom: auto; right: auto; transform: translate(-50%, -50%); }
.service-category {
  align-items: center;
  animation: service-category-enter .65s both;
  animation-delay: calc(.12s + var(--category-order, 0) * .08s);
  background: rgba(246, 244, 236, .94);
  border: 1px solid rgba(74, 65, 57, .15);
  box-shadow: 0 9px 30px rgba(53, 42, 34, .055);
  display: grid;
  gap: 0 11px;
  grid-template-columns: auto 1fr auto;
  max-width: 245px;
  min-width: 145px;
  padding: 11px 13px;
  pointer-events: auto;
  position: absolute;
  transition: background .3s, border-color .3s, box-shadow .3s, transform .4s cubic-bezier(.2,.75,.2,1);
}
@keyframes service-category-enter { from { opacity: 0; } to { opacity: 1; } }
.service-category-number { color: #b98270; font: 9px 'DM Mono', monospace; }
.service-category-title { font-size: 13px; letter-spacing: -.03em; white-space: nowrap; }
.service-category-summary { color: var(--muted); font: 8px/1.35 'DM Mono', monospace; grid-column: 2 / 4; max-height: 0; opacity: 0; overflow: hidden; text-transform: uppercase; transition: max-height .3s, opacity .25s, margin .3s; }
.service-category-arrow { color: var(--accent); font-size: 14px; opacity: .8; transition: transform .3s; }
.service-category:hover, .service-category:focus-visible { background: #fffdf7; border-color: rgba(183, 119, 96, .48); box-shadow: 0 16px 42px rgba(53, 42, 34, .12); transform: translateY(-3px); }
.service-category-list.is-orbiting .service-category:hover, .service-category-list.is-orbiting .service-category:focus-visible { transform: translate(-50%, calc(-50% - 3px)); }
.service-category:hover .service-category-summary, .service-category:focus-visible .service-category-summary { max-height: 42px; margin-top: 7px; opacity: 1; }
.service-category:hover .service-category-arrow, .service-category:focus-visible .service-category-arrow { transform: translate(3px, -3px); }
.service-category:focus-visible { outline: 2px solid #b98270; outline-offset: 3px; }
.label-top { left: 43%; top: 8%; }
.label-upper-right { right: 1%; top: 31%; }
.label-lower-right { right: 0; top: 63%; }
.label-bottom { bottom: 7%; left: 41%; }
.label-lower-left { bottom: 23%; left: 2%; }
.label-upper-left { left: 3%; top: 31%; }
.label-community { left: 2%; top: 50%; }
.service-artwork[data-service="all"] { --service-accent: #bd8977; }
.service-artwork[data-service="discussion"] { --service-accent: #9279aa; }
.service-artwork[data-service="translation"] { --service-accent: #bf8979; }
.service-artwork[data-service="woodcraft"] { --service-accent: #a57a4a; }
.service-artwork[data-service="sourcing"] { --service-accent: #967dac; }
.service-artwork[data-service="electronics"] { --service-accent: #6c999b; }
.service-artwork[data-service="it-support"] { --service-accent: #739272; }
.services-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; font: 9px 'DM Mono', monospace; justify-content: space-between; letter-spacing: .05em; padding: 15px 0 20px; text-transform: uppercase; }
.services-footer a { color: var(--ink); }
.services-footer a span { color: var(--accent); margin-left: 6px; }
.discussion-page { overflow-x: hidden; }
.discussion-main { margin: 0 auto; max-width: 1040px; padding: 9vh 0 12vh; }
.discussion-intro { border-bottom: 1px solid var(--line); padding-bottom: 40px; }
.discussion-intro h1 { font-size: clamp(43px, 7vw, 84px); letter-spacing: -.065em; line-height: 1.05; }
.discussion-intro > p:last-child, .discussion-privacy { color: var(--muted); line-height: 1.7; max-width: 660px; }
.discussion-compose, .discussion-feed { padding-top: 50px; }
.discussion-compose h2, .discussion-feed h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 500; letter-spacing: -.06em; margin: 0; }
.discussion-compose > .eyebrow, .discussion-feed > .eyebrow { margin-bottom: 12px; }
.discussion-form { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.discussion-form label, .discussion-reply-form label { display: grid; font: 10px 'DM Mono', monospace; gap: 8px; text-transform: uppercase; }
.discussion-form input, .discussion-form select, .discussion-form textarea, .discussion-reply-form input, .discussion-reply-form textarea { background: rgba(255, 255, 255, .42); border: 1px solid var(--line); border-radius: 0; color: var(--ink); font: 14px Manrope, Arial, sans-serif; min-width: 0; padding: 12px; }
.discussion-form textarea, .discussion-reply-form textarea { resize: vertical; }
.discussion-field-wide { grid-column: 1 / -1; }
.discussion-form button, .discussion-reply-form button { background: var(--ink); border: 0; color: var(--paper); cursor: pointer; justify-self: start; padding: 13px 19px; }
.discussion-form button:hover, .discussion-reply-form button:hover { background: var(--accent); color: var(--ink); }
.discussion-form button:disabled, .discussion-reply-form button:disabled { cursor: wait; opacity: .6; }
.discussion-message { color: #477253; font: 11px/1.6 'DM Mono', monospace; margin: 0; min-height: 1.4em; }
.discussion-message.is-error { color: #b34a3b; }
.discussion-list { border-top: 1px solid var(--line); margin-top: 22px; }
.discussion-post { border-bottom: 1px solid var(--line); padding: 26px 0; }
.discussion-post-heading, .discussion-meta { align-items: center; color: var(--muted); display: flex; font: 9px 'DM Mono', monospace; gap: 14px; justify-content: space-between; }
.discussion-type { color: var(--accent); text-transform: uppercase; }
.discussion-post h3 { font-size: clamp(21px, 3vw, 31px); font-weight: 500; letter-spacing: -.04em; margin: 14px 0 8px; }
.discussion-post-body, .discussion-reply > p { line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.discussion-author { color: var(--muted); font: 9px 'DM Mono', monospace; }
.discussion-replies { border-inline-start: 1px solid var(--line); margin: 20px 0 20px 12px; padding-inline-start: 18px; }
.discussion-reply { border-bottom: 1px solid var(--line); padding: 8px 0; }
.discussion-reply-form { display: grid; gap: 12px; grid-template-columns: minmax(150px, .6fr) minmax(220px, 1.4fr); margin-top: 20px; }
.discussion-reply-form button, .discussion-reply-form .discussion-message { grid-column: 1 / -1; }
.discussion-empty { color: var(--muted); font-size: 13px; line-height: 1.7; padding: 18px 0; }
html[dir="rtl"] .discussion-meta { flex-direction: row-reverse; }

@media (min-width: 761px) and (max-width: 1100px) {
  .furniture-intro { grid-template-areas: "eyebrow eyebrow" "title copy" "orb orb" "edition cta"; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .furniture-orbit-art { max-width: 280px; width: min(34vw, 280px); }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .service-category-list.is-orbiting .service-category { gap: 0 5px; max-width: 160px; min-width: 120px; padding: 8px; }
  .service-category-list.is-orbiting .service-category-title { font-size: 10px; line-height: 1.2; white-space: normal; }
  .service-category-list.is-orbiting .service-category-summary { display: none; }
}

@media (max-width: 760px) {
  .home-page .home-main { padding: 0 5vw; }
  .home-page .site-header { padding: 20px 5vw; }
  .home-page .home-hero { align-items: stretch; flex-direction: column; justify-content: center; min-height: 100svh; overflow: visible; padding: 102px 0 100px; }
  .home-page .home-copy { width: 100%; }
  .home-page .home-copy h1 { font-size: clamp(52px, 11.5vw, 80px); }
  .home-page .home-hero .hero-stage { align-self: center; margin: -4px auto 0; max-width: 470px; position: relative; right: auto; top: auto; transform: none; width: min(112vw, 470px); }
  .home-page .home-footer { bottom: 19px; gap: 10px; left: 5vw; right: 5vw; }
  .home-page .home-footer > span { display: none; }
  .home-services-link { font-size: 9px; gap: 12px; }
  .home-footer > a:last-child { font-size: 8px; }
  .services-page { overflow-y: auto; padding: 0 5vw; }
  .services-page .site-header { min-height: 72px; }
  .site-search-shell { margin-bottom: 22px; }
  .site-search input { font-size: 11px; padding: 0 11px; }
  .site-search button { min-width: 86px; padding: 0 10px; }
  .services-main { min-height: 0; padding-bottom: 20px; }
  .services-intro { position: relative; top: auto; width: 100%; }
  .services-intro .eyebrow { margin-bottom: 15px; }
  .services-intro h1 { font-size: clamp(46px, 12vw, 74px); }
  .services-intro > p:last-child { margin: 15px 0 0 5%; }
  .service-explorer { height: auto; min-height: 0; position: relative; right: auto; top: auto; width: 100%; }
  .service-artwork { aspect-ratio: 1; height: auto; position: relative; width: 100%; }
  .service-artwork::before { inset: 4%; }
  .service-artwork-caption { font-size: 7px; }
  .artwork-tag { font-size: 7px; }
  .service-category-list { display: grid; gap: 8px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); inset: auto; padding-bottom: 20px; position: relative; }
  .service-category { background: transparent; border: 0; border-top: 1px solid var(--line); box-shadow: none; grid-template-columns: auto 1fr auto; max-width: none; min-width: 0; padding: 13px 2px; position: relative; transform: none; }
  .service-category:hover, .service-category:focus-visible { background: transparent; border-color: var(--accent); box-shadow: none; transform: none; }
  .service-category-title { font-size: 13px; }
  .service-category-summary { display: none; }
  .service-category-arrow { opacity: 1; }
  .label-top, .label-upper-right, .label-lower-right, .label-bottom, .label-lower-left, .label-upper-left, .label-community { bottom: auto; left: auto; right: auto; top: auto; }
  .service-category.label-community { grid-column: 1 / -1; justify-self: center; width: min(100%, 245px); }
  .services-footer { font-size: 8px; gap: 12px; }
  .discussion-main { padding: 5vh 0 8vh; }
  .discussion-intro h1 { font-size: clamp(40px, 11vw, 68px); }
  .discussion-form, .discussion-reply-form { grid-template-columns: 1fr; }
  .discussion-form > *, .discussion-reply-form > * { grid-column: 1; }
  .discussion-reply-form button, .discussion-reply-form .discussion-message { grid-column: 1; }
}

@media (max-width: 760px) {
  .home-main { padding: 0 5vw 20px; }
  .home-page .site-header { padding: 20px 5vw; }
  .home-hero { align-items: stretch; flex-direction: column; min-height: auto; overflow: visible; padding: 112px 0 50px; }
  .home-copy { max-width: none; width: 100%; }
  .home-copy h1 { font-size: clamp(50px, 11vw, 82px); }
  .home-hero .hero-stage { align-self: center; margin: 15px auto 0; position: relative; right: auto; top: auto; transform: none; width: min(100%, 490px); }
  .category-heading > .eyebrow:last-child { display: none; }
  .category-row { gap: 9px; grid-template-columns: 25px 1fr 24px; min-height: 70px; }
  .category-name { font-size: clamp(24px, 6vw, 36px); }
  .category-summary { display: none; }
  .category-arrow { opacity: 1; transform: none; }
  .service-page { padding: 0 5vw; }
  .service-intro { align-content: center; grid-template-columns: 1fr; min-height: 0; padding: 8vh 0 0; }
  .service-intro > .eyebrow, .service-intro > h1, .service-intro > .service-lead { grid-column: 1; }
  .service-intro h1 { font-size: clamp(52px, 14vw, 90px); }
  .service-lead { margin: 20px 0 0 6%; }
  .service-art { grid-column: 1; grid-row: auto; margin: 0 auto; width: min(90vw, 470px); }
  .catalogue-section { padding-bottom: 65px; }
  .service-page .product-grid { grid-template-columns: 1fr; }
  .product-configurator { grid-template-columns: 1fr; }
  .configurator-stage { aspect-ratio: 1 / .86; min-height: 260px; }
  .configurator-panel { border-left: 0; border-top: 1px solid rgba(70, 58, 45, .1); padding: 20px; }
  .configurator-status { bottom: 12px; left: 12px; max-width: calc(100% - 24px); }
  .configurator-controls { display: none; }
  .admin-model-part { grid-template-columns: 1fr; }
  .admin-model-option { grid-template-columns: 1fr 1fr; }
  .admin-model-option > button { grid-column: 1 / -1; }
  .furniture-showroom { padding-top: 4vh; }
  .furniture-intro { align-items: start; gap: 21px; grid-template-columns: 1fr; padding: 3vh 0 5vh; }
  .furniture-intro .eyebrow, .furniture-intro > p:not(.eyebrow), .furniture-orbit-art, .furniture-browse-link, .furniture-edition { grid-column: 1; grid-row: auto; }
  .furniture-intro h1 { font-size: clamp(60px, 16vw, 100px); }
  .furniture-intro > p:not(.eyebrow) { margin: 0; }
  .furniture-orbit-art { margin: 0 auto; max-width: 330px; width: min(78vw, 330px); }
  .furniture-browse-link { margin-top: 2px; }
  .furniture-edition { margin-top: 5px; }
  .furniture-feature { gap: 22px; grid-template-columns: 1fr; padding: 4vh 0 7vh; }
  .furniture-feature-image { min-height: 60vw; }
  .furniture-feature-info { padding: 0; }
  .furniture-catalogue { padding: 5vh 0 8vh; }
  .furniture-catalogue-heading { align-items: start; flex-direction: column; gap: 18px; }
  .furniture-product-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .furniture-product-image { height: clamp(120px, 37vw, 210px); padding: 8px; }
  .furniture-product-meta { font-size: 7px; padding: 10px 7px 0; }
  .furniture-filters button { padding: 10px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-search-orbit { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-art { transform: none; }
}

.freight-journey {
  height: 205svh;
  margin: 0 -4.1vw;
  position: relative;
}
.freight-stage {
  background: #101b22;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  position: sticky;
  top: 0;
}
.freight-stage::after {
  border: 1px solid rgba(238,229,211,.18);
  content: '';
  inset: 18px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.freight-stage-art {
  --port-opacity: 1;
  --sea-opacity: 0;
  --container-lift: 0px;
  --truck-travel: -1vw;
  --ship-travel: -115%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.freight-port-scene,
.freight-sea-scene {
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  transition: opacity .12s linear;
  width: 100%;
}
.freight-port-scene {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 255, .85), transparent 36%),
    linear-gradient(180deg, #e9e8e2 0%, #dbe0de 57%, #aeb9b6 100%);
  opacity: var(--port-opacity);
}
.port-horizon {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(91,111,111,.13));
  height: 17%;
  left: 0;
  position: absolute;
  right: 0;
  top: 55%;
}
.port-stack {
  bottom: 15%;
  display: grid;
  gap: 3px;
  position: absolute;
  transform: perspective(900px) rotateY(-7deg);
}
.port-stack span {
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(26,34,38,.26) 24px 26px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 3px, transparent 4px 16px),
    linear-gradient(115deg, #dd6c32, #b84526 76%, #853822);
  border: 1px solid rgba(34,41,42,.28);
  box-shadow: inset 0 8px 14px rgba(255,255,255,.08), 0 3px 5px rgba(26,34,36,.12);
  display: block;
  height: clamp(44px, 8.4vh, 82px);
  position: relative;
}
.port-stack span::after {
  border-left: 1px solid rgba(255,255,255,.28);
  border-right: 1px solid rgba(25,31,34,.21);
  content: '';
  inset: 4px 7px;
  position: absolute;
}
.port-stack-back { right: 1.2%; width: 22%; }
.port-stack-back span:first-child { background-color: #697b82; background-image: repeating-linear-gradient(90deg, transparent 0 23px, rgba(26,34,38,.26) 24px 26px), repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 3px, transparent 4px 16px), linear-gradient(115deg, #a7b0ad, #778386 76%, #5b696c); }
.port-stack-back span:nth-child(2) { background-image: repeating-linear-gradient(90deg, transparent 0 23px, rgba(26,34,38,.26) 24px 26px), repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 3px, transparent 4px 16px), linear-gradient(115deg, #315a78, #203d5d 76%, #192d46); }
.port-stack-back span:nth-child(3) { background-image: repeating-linear-gradient(90deg, transparent 0 23px, rgba(26,34,38,.26) 24px 26px), repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 3px, transparent 4px 16px), linear-gradient(115deg, #c96732, #ad4728 76%, #853822); }
.port-stack-front { right: 12%; width: 22%; }
.port-stack-front span:first-child { background-image: repeating-linear-gradient(90deg, transparent 0 23px, rgba(26,34,38,.26) 24px 26px), repeating-linear-gradient(180deg, rgba(255,255,255,.12) 0 3px, transparent 4px 16px), linear-gradient(115deg, #315a78, #203d5d 76%, #192d46); }
.reach-stacker {
  bottom: 13%;
  height: 69%;
  left: 5%;
  position: absolute;
  width: min(62vw, 850px);
}
.stacker-boom {
  background: linear-gradient(180deg, #293b48, #172633 42%, #354653 46%, #1b2933);
  border: 1px solid rgba(13,21,27,.48);
  border-radius: 9px 18px 5px 4px;
  box-shadow: inset 0 3px 3px rgba(255,255,255,.22), 0 12px 18px rgba(28,40,42,.16);
  height: 9%;
  left: 37%;
  position: absolute;
  top: 21%;
  transform: rotate(-31deg);
  transform-origin: 5% 50%;
  width: 89%;
}
.stacker-boom::after {
  background: linear-gradient(90deg, transparent, rgba(205,218,219,.72), transparent);
  content: '';
  height: 2px;
  left: 12%;
  position: absolute;
  right: 12%;
  top: 28%;
}
.stacker-hydraulic {
  background: linear-gradient(90deg, #a9b6b7, #e3e5de 36%, #69767a 52%, #d8dedc 62%, #738084);
  border: 3px solid #2f3c42;
  border-radius: 6px;
  height: 8%;
  left: 35%;
  position: absolute;
  top: 49%;
  transform: rotate(-58deg);
  transform-origin: 10% 50%;
  width: 34%;
}
.stacker-hoist {
  border-left: 2px solid #394349;
  border-right: 2px solid #394349;
  height: 20%;
  left: 92%;
  position: absolute;
  top: 1%;
  transform: rotate(31deg);
  transform-origin: 50% 0;
  width: 8%;
}
.lifted-container {
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(39,49,53,.32) 23px 26px),
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 18% 88%, rgba(34,41,43,.14)),
    linear-gradient(115deg, #b9c0bd, #8f9b9d 70%, #758387);
  border: 2px solid rgba(49,58,61,.72);
  box-shadow: 8px 18px 28px rgba(29,39,40,.2), inset 0 0 0 5px rgba(238,239,230,.14);
  height: clamp(110px, 24vh, 230px);
  left: 83%;
  position: absolute;
  top: 10%;
  transform: translateY(var(--container-lift));
  transition: transform .1s linear;
  width: clamp(115px, 24vw, 290px);
}
.lifted-container::before,
.lifted-container::after {
  background: #36434a;
  content: '';
  height: 11px;
  left: -8px;
  position: absolute;
  right: -8px;
}
.lifted-container::before { top: -7px; }
.lifted-container::after { bottom: -7px; }
.lifted-container i {
  background: linear-gradient(90deg, #444e51, #e4e5df 8%, #737d7d 11%, #3e494d 18%, transparent 19% 81%, #3e494d 82%, #e4e5df 89%, #444e51 92%);
  bottom: 8%;
  left: 0;
  position: absolute;
  right: 0;
  top: 8%;
}
.stacker-body {
  background: linear-gradient(180deg, #20a6b8 0%, #067f99 54%, #056277 55%, #034b60 100%);
  border: 1px solid rgba(1,56,69,.55);
  border-radius: 34% 15% 8% 14%;
  bottom: 13%;
  box-shadow: inset 0 10px 12px rgba(255,255,255,.23), 0 13px 18px rgba(25,45,48,.18);
  height: 31%;
  left: 2%;
  position: absolute;
  width: 54%;
}
.stacker-body::before {
  background: #173b48;
  border: 3px solid #8ba3a4;
  border-radius: 5px 6px 2px 2px;
  content: '';
  height: 16%;
  left: 16%;
  position: absolute;
  top: -9%;
  width: 36%;
}
.stacker-cab {
  background: linear-gradient(90deg, #26363d 0 9%, #66878e 12% 88%, #21333c 92%);
  border: 3px solid #293b41;
  border-radius: 8px 11px 2px 1px;
  bottom: 42%;
  box-shadow: inset 0 0 0 3px rgba(202,224,221,.16);
  height: 35%;
  left: 36%;
  position: absolute;
  width: 18%;
}
.stacker-cab i {
  background: linear-gradient(145deg, rgba(207,229,228,.75), rgba(69,110,119,.82) 62%, rgba(22,46,55,.88));
  border: 2px solid #172930;
  inset: 8% 10% 15%;
  position: absolute;
}
.stacker-wheel {
  background: radial-gradient(circle, #243137 0 18%, #8e9996 19% 23%, #202729 25% 43%, #101719 45% 64%, #596467 65% 69%, #111719 71%);
  border: 3px solid #101719;
  border-radius: 50%;
  bottom: 0;
  box-shadow: 0 8px 8px rgba(21,31,32,.28);
  height: clamp(58px, 12vw, 112px);
  position: absolute;
  width: clamp(58px, 12vw, 112px);
}
.stacker-wheel-rear { left: 6%; }
.stacker-wheel-front { left: 43%; }
.port-ground {
  background: linear-gradient(180deg, #858e88, #c5c6bb 43%, #9a9d91);
  bottom: 0;
  height: 13%;
  left: 0;
  position: absolute;
  right: 0;
}
.port-ground::before {
  background: repeating-linear-gradient(90deg, #e4bd63 0 36px, transparent 36px 58px);
  content: '';
  height: 4px;
  left: 0;
  opacity: .8;
  position: absolute;
  right: 0;
  top: 37%;
}
.port-ground span {
  background: rgba(31,45,45,.2);
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 7px;
}
.freight-sea-scene {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(69,113,119,.4), transparent 47%),
    linear-gradient(180deg, #182f3a 0%, #123849 48%, #091f2a 100%);
  opacity: var(--sea-opacity);
}
.sea-horizon {
  background: linear-gradient(180deg, rgba(207,220,209,.32), rgba(164,197,191,.08), transparent);
  height: 34%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.sea-wave {
  border: 1px solid rgba(178,219,218,.19);
  border-left-color: transparent;
  border-radius: 50%;
  height: 25%;
  left: -10%;
  position: absolute;
  transform: rotate(-8deg);
  width: 124%;
}
.sea-wave-one { top: 54%; }
.sea-wave-two { height: 32%; left: -20%; top: 64%; transform: rotate(5deg); }
.sea-wave-three { height: 20%; left: 2%; top: 76%; transform: rotate(-3deg); }
.sea-wake {
  background: linear-gradient(180deg, transparent, rgba(178,220,218,.3), transparent);
  border-radius: 50%;
  filter: blur(8px);
  height: 75%;
  position: absolute;
  top: 18%;
  transform: rotate(13deg);
  width: 5%;
}
.sea-wake-left { left: 35%; }
.sea-wake-right { left: 61%; transform: rotate(-13deg); }
.cargo-vessel {
  filter: drop-shadow(0 25px 24px rgba(0,0,0,.25));
  height: clamp(190px, 38vh, 370px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(var(--ship-travel), -42%, 0);
  transition: transform .1s linear;
  width: min(64vw, 900px);
}
.vessel-hull {
  background: linear-gradient(180deg, #35474a, #1c3037 48%, #0d2029);
  clip-path: polygon(0 8%, 100% 8%, 94% 63%, 82% 83%, 56% 94%, 22% 92%, 9% 77%, 3% 46%);
  height: 45%;
  left: 0;
  position: absolute;
  top: 49%;
  width: 100%;
}
.vessel-hull::after {
  background: linear-gradient(90deg, transparent, rgba(214,157,94,.78), transparent);
  content: '';
  height: 5px;
  left: 7%;
  position: absolute;
  right: 7%;
  top: 10%;
}
.vessel-deck {
  background: linear-gradient(180deg, #c7bca5, #72756e);
  height: 5%;
  left: 4%;
  position: absolute;
  top: 49%;
  width: 92%;
}
.vessel-containers {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 44%;
  left: 13%;
  position: absolute;
  top: 14%;
  transform: perspective(420px) rotateX(-7deg);
  width: 72%;
}
.vessel-containers span {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(20,29,35,.35) 13px 15px),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 36%, rgba(0,0,0,.16)),
    #355c67;
  border: 1px solid rgba(17,29,36,.44);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.18);
}
.vessel-containers span:nth-child(3n + 1) { background-color: #294a59; }
.vessel-containers span:nth-child(3n + 2) { background-color: #8e4936; }
.vessel-containers span:nth-child(4n) { background-color: #a58a62; }
.vessel-containers span:nth-child(5n) { background-color: #47645b; }
.vessel-bridge {
  background: linear-gradient(90deg, #b3beb8, #e4e1d4 62%, #a2aaa5);
  border: 2px solid rgba(28,45,55,.7);
  height: 33%;
  position: absolute;
  right: 8%;
  top: 17%;
  width: 12%;
}
.vessel-bridge::before,
.vessel-bridge::after {
  background: #233c4b;
  content: '';
  height: 20%;
  left: 8%;
  position: absolute;
  right: 8%;
}
.vessel-bridge::before { top: 16%; }
.vessel-bridge::after { top: 45%; }
.vessel-bow-wave {
  background: linear-gradient(90deg, transparent, rgba(219,235,224,.76), transparent);
  border-radius: 50%;
  height: 12%;
  position: absolute;
  right: -7%;
  top: 76%;
  transform: rotate(-16deg);
  width: 26%;
}
.freight-stage-grain {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  inset: 0;
  opacity: .25;
  pointer-events: none;
  position: absolute;
}
.freight-stage-copy {
  align-items: end;
  bottom: clamp(28px, 7vh, 76px);
  color: #f3f0e8;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  left: 6.5vw;
  position: absolute;
  right: 6.5vw;
  text-shadow: 0 2px 16px rgba(5,22,31,.45);
}
.freight-stage-copy .eyebrow { color: rgba(244,241,232,.8); margin: 0 0 12px; }
.freight-stage-copy h2 {
  font-size: clamp(34px, 6vw, 74px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .94;
  margin: 0;
  max-width: 690px;
}
.freight-stage-prompt {
  color: rgba(244,241,232,.82);
  font: 9px 'DM Mono', monospace;
  grid-column: 2;
  grid-row: 1;
  letter-spacing: .05em;
  margin: 0 0 5px;
  text-transform: uppercase;
}
.freight-stage-progress {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
}
.freight-stage-progress span {
  background: rgba(243,240,232,.38);
  height: 3px;
  transition: background .3s, flex .3s;
  width: 38px;
}
.freight-stage-progress span.is-active { background: var(--accent); flex: 1; }

.freight-stage-art::after {
  background: linear-gradient(180deg, transparent 45%, rgba(8,18,24,.08) 62%, rgba(8,18,24,.58) 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.freight-stage-copy .eyebrow { color: #e3a56e; }

@media (max-width: 760px) {
  .freight-journey { height: 175svh; margin: 0 -5vw; }
  .freight-stage { min-height: 520px; }
  .freight-stage::after { inset: 10px; }
  .reach-stacker { bottom: 14%; height: 54%; left: -8%; width: 78vw; }
  .stacker-boom { left: 36%; top: 19%; width: 104%; }
  .stacker-hydraulic { left: 35%; top: 45%; width: 41%; }
  .stacker-hoist { left: 98%; }
  .lifted-container { height: clamp(105px, 18vh, 170px); left: 82%; top: 12%; width: clamp(106px, 30vw, 180px); }
  .port-stack-back { right: -9%; width: 31%; }
  .port-stack-front { right: 3%; width: 29%; }
  .port-stack span { height: 7vh; }
  .cargo-vessel { height: 27vh; left: 50%; width: 100vw; }
  .freight-stage-copy { bottom: 30px; gap: 13px; grid-template-columns: 1fr; left: 6vw; right: 6vw; }
  .freight-stage-copy h2 { max-width: 340px; }
  .freight-stage-prompt { grid-column: 1; grid-row: auto; margin: 0; }
  .freight-stage-progress { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .freight-journey { height: auto; padding: 2rem 0; }
  .freight-stage { min-height: 70svh; position: relative; top: auto; }
  .freight-port-scene, .freight-sea-scene, .lifted-container, .cargo-vessel { transition: none; }
}

.freight-road-scene {
  background:
    radial-gradient(ellipse at 77% 21%, rgba(255,244,216,.78), transparent 27%),
    linear-gradient(180deg, #d8d5ca 0%, #d0d0c5 49%, #929c97 100%);
  height: 100%;
  inset: 0;
  opacity: var(--road-opacity, 1);
  overflow: hidden;
  position: absolute;
  transition: opacity .12s linear;
  width: 100%;
}
.road-sun {
  background: radial-gradient(circle, rgba(240,207,157,.26), rgba(240,207,157,.08) 57%, transparent 72%);
  border-radius: 50%;
  height: clamp(100px, 17vw, 220px);
  position: absolute;
  right: 14%;
  top: 12%;
  width: clamp(100px, 17vw, 220px);
}
.road-hills {
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(47,73,73,.3) 39% 62%, transparent 63%) 0 100% / 38% 55% repeat-x,
    linear-gradient(180deg, transparent 0 66%, rgba(48,69,69,.25) 67% 100%);
  bottom: 22%;
  height: 31%;
  left: 0;
  opacity: .72;
  position: absolute;
  right: 0;
}
.port-crane {
  border-left: 5px solid rgba(34,54,60,.48);
  height: 43%;
  position: absolute;
  top: 19%;
  width: 17%;
}
.port-crane::before {
  border-top: 5px solid rgba(34,54,60,.48);
  content: '';
  left: -5px;
  position: absolute;
  right: -25%;
  top: 0;
}
.port-crane::after {
  border-right: 2px solid rgba(34,54,60,.34);
  border-top: 2px solid rgba(34,54,60,.34);
  content: '';
  height: 42%;
  position: absolute;
  right: -25%;
  top: 0;
  width: 43%;
}
.port-crane i {
  border-left: 2px solid rgba(34,54,60,.3);
  border-right: 2px solid rgba(34,54,60,.3);
  height: 47%;
  left: 21%;
  position: absolute;
  top: 0;
  width: 22%;
}
.port-crane-one { left: 8%; transform: scale(.82); transform-origin: bottom left; }
.port-crane-two { left: 29%; transform: scale(.6); transform-origin: bottom left; }
.road-ground {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 13%),
    linear-gradient(180deg, #334148, #18272e 100%);
  bottom: 0;
  height: 23%;
  left: 0;
  position: absolute;
  right: 0;
}
.road-ground::before {
  background: repeating-linear-gradient(90deg, rgba(215,157,94,.82) 0 48px, transparent 48px 94px);
  content: '';
  height: 3px;
  left: 0;
  opacity: .58;
  position: absolute;
  right: 0;
  top: 48%;
}
.road-ground span {
  background: rgba(255,255,255,.24);
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 8%;
}
.container-truck {
  bottom: 19%;
  filter: drop-shadow(0 22px 22px rgba(12,22,27,.32));
  height: clamp(170px, 36vh, 320px);
  left: 50%;
  position: absolute;
  transform: translate3d(calc(-50% + var(--truck-travel)), 0, 0);
  transition: transform .1s linear;
  width: min(76vw, 1000px);
}
.truck-container {
  background:
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(12,28,35,.3) 28px 31px),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 24% 85%, rgba(0,0,0,.22)),
    linear-gradient(115deg, #345763, #213f4d 72%, #172f3b);
  border: 2px solid rgba(25,43,49,.7);
  box-shadow: inset 0 0 0 5px rgba(235,235,222,.08), inset 0 -8px 18px rgba(10,23,30,.2);
  height: 63%;
  left: 0;
  position: absolute;
  top: 0;
  width: 73%;
}
.truck-container::before,
.truck-container::after {
  background: #34464a;
  content: '';
  height: 10px;
  left: -7px;
  position: absolute;
  right: -7px;
}
.truck-container::before { top: -7px; }
.truck-container::after { bottom: -7px; }
.truck-container::after {
  background: var(--accent);
  height: 4px;
}
.truck-chassis {
  background: linear-gradient(180deg, #39484b, #1e292d);
  bottom: 24%;
  height: 9%;
  left: 1%;
  position: absolute;
  width: 78%;
}
.truck-cab {
  background: linear-gradient(180deg, #e2d8c5 0%, #c0b7a6 68%, #627176 69%, #35464b 100%);
  border: 2px solid rgba(39,55,59,.76);
  border-radius: 6px 20px 4px 3px;
  bottom: 23%;
  height: 56%;
  position: absolute;
  right: 0;
  width: 24%;
}
.truck-cab::before {
  background: linear-gradient(135deg, #355563, #1c3541 75%);
  border: 2px solid rgba(31,49,55,.8);
  border-radius: 3px 12px 2px 2px;
  content: '';
  height: 38%;
  position: absolute;
  right: 10%;
  top: 9%;
  width: 54%;
}
.truck-cab::after {
  background: var(--accent);
  bottom: 15%;
  content: '';
  height: 5px;
  left: -3px;
  position: absolute;
  right: -3px;
}
.truck-cab i {
  background: rgba(239,237,223,.56);
  bottom: 4%;
  height: 8%;
  position: absolute;
  right: -4px;
  width: 9px;
}
.truck-wheel {
  background: radial-gradient(circle, #a29a86 0 17%, #253238 19% 30%, #171e22 32% 65%, #556166 67% 72%, #171e22 74%);
  border: 3px solid #1c2529;
  border-radius: 50%;
  bottom: 0;
  height: clamp(45px, 8vw, 77px);
  position: absolute;
  width: clamp(45px, 8vw, 77px);
}
.truck-wheel-one { left: 9%; }
.truck-wheel-two { left: 59%; }
.truck-wheel-three { right: 8%; }

.freight-road-scene {
  background:
    radial-gradient(ellipse at 77% 20%, rgba(255,242,213,.62), transparent 26%),
    linear-gradient(180deg, #d9d6cb 0%, #c6cac1 48%, #89938d 100%);
}
.road-hills {
  background:
    linear-gradient(135deg, transparent 0 40%, rgba(44,66,68,.28) 41% 64%, transparent 65%) 0 100% / 35% 62% repeat-x,
    linear-gradient(180deg, transparent 0 59%, rgba(46,65,65,.24) 60% 100%);
  bottom: 21%;
  height: 36%;
  opacity: .85;
}
.road-hills::before,
.road-hills::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(17,35,40,.22) 19px 21px),
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 25% 84%, rgba(5,19,25,.18)),
    linear-gradient(110deg, #667571, #394d50 72%, #2c4146);
  border: 1px solid rgba(28,45,48,.28);
  bottom: 0;
  content: '';
  height: 47%;
  position: absolute;
  right: 8%;
  width: 22%;
}
.road-hills::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(17,35,40,.19) 19px 21px),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 25% 84%, rgba(5,19,25,.16)),
    linear-gradient(110deg, #92775c, #6b5848 72%, #50463d);
  bottom: 47%;
  height: 28%;
  right: 8%;
  width: 22%;
}
.port-crane {
  border-left-width: 7px;
  filter: drop-shadow(5px 4px 0 rgba(27,43,48,.08));
}
.port-crane::before { border-top-width: 7px; }
.port-crane::after { border-right-width: 3px; border-top-width: 3px; }
.port-crane i { border-left-width: 3px; border-right-width: 3px; }
.road-ground {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 10%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #48565a, #1d2c32 100%);
}
.container-truck {
  filter: drop-shadow(0 23px 18px rgba(9,19,24,.31));
}
.truck-container {
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(8,24,32,.3) 25px 28px, rgba(231,231,216,.09) 29px 30px),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 9% 82%, rgba(4,15,20,.35)),
    linear-gradient(112deg, #41636b 0%, #294955 28%, #23404c 78%, #182f39 100%);
  box-shadow: inset 0 0 0 5px rgba(231,230,215,.07), inset 0 -10px 18px rgba(10,23,30,.2), 0 5px 9px rgba(17,31,36,.16);
}
.truck-container::before {
  background: linear-gradient(180deg, #58676a, #273b41);
  height: 8px;
}
.truck-container::after {
  background: linear-gradient(90deg, #9e4934, var(--accent) 42%, #963d2c);
  bottom: -7px;
  height: 4px;
}
.truck-chassis {
  background:
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(161,168,157,.35) 55px 58px),
    linear-gradient(180deg, #485357 0%, #202a2e 42%, #111a1e 100%);
  bottom: 22%;
  height: 10%;
}
.truck-cab {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.3) 73% 74%, transparent 75%),
    linear-gradient(180deg, #e3d9c6 0%, #b7b4a7 62%, #727d7b 63%, #34454a 100%);
  border-radius: 5px 24px 4px 3px;
  box-shadow: inset 5px 0 8px rgba(255,255,255,.2), inset -7px 0 8px rgba(23,39,44,.18);
}
.truck-cab::before {
  background:
    linear-gradient(180deg, rgba(230,234,224,.55), transparent 22%),
    linear-gradient(135deg, #3a6170, #193744 75%);
  border: 3px solid #5a625e;
  border-radius: 3px 15px 3px 2px;
  box-shadow: inset 0 0 0 2px rgba(225,228,214,.15);
  clip-path: polygon(0 0, 88% 0, 100% 24%, 100% 100%, 0 100%);
  height: 41%;
  right: 12%;
  width: 60%;
}
.truck-cab::after {
  background:
    linear-gradient(90deg, #d9b777 0 5%, transparent 5% 94%, #d9b777 94%),
    linear-gradient(180deg, #d76b38, #a9472d);
  bottom: 12%;
  box-shadow: 0 3px 5px rgba(20,28,30,.18);
  height: 5px;
}
.truck-cab i {
  background:
    repeating-linear-gradient(180deg, rgba(222,222,207,.74) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #7f8a85, #35464b);
  border: 2px solid #26363c;
  border-radius: 2px;
  bottom: 20%;
  box-shadow: 0 0 0 2px rgba(226,215,188,.22);
  height: 17%;
  right: 3%;
  width: 10%;
}
.truck-cab b {
  background: linear-gradient(180deg, #b8ad96, #605f55);
  border: 1px solid rgba(35,48,49,.72);
  border-radius: 2px;
  height: 2%;
  left: 18%;
  position: absolute;
  top: 54%;
  width: 7%;
}
.truck-cab em {
  background: linear-gradient(180deg, #34484d, #16272e);
  border: 2px solid #d0c5ad;
  border-radius: 2px;
  height: 8%;
  position: absolute;
  right: -9%;
  top: 27%;
  transform: skewY(-12deg);
  width: 10%;
}
.truck-wheel {
  background:
    radial-gradient(circle, #c0b79f 0 5%, #333e3f 6% 13%, #a49b88 14% 19%, #283337 20% 28%, #131b1f 30% 59%, #465257 61% 66%, #141c20 68% 75%, #66706b 77% 80%, #11181c 82%);
  border: 2px solid #151d21;
  box-shadow: 0 4px 8px rgba(5,12,15,.4), inset 0 0 0 2px rgba(193,187,166,.13);
}
.truck-wheel {
  height: clamp(36px, 5vw, 54px);
  width: clamp(36px, 5vw, 54px);
}
.truck-wheel-one { left: 47%; }
.truck-wheel-two { left: 58%; }
.truck-wheel-three { left: 74%; }
.truck-wheel-four { left: 83%; }
.truck-wheel-five { left: 93%; }
.freight-sea-scene {
  background:
    radial-gradient(ellipse at 52% 43%, rgba(73,117,121,.35), transparent 47%),
    linear-gradient(180deg, #32444a 0%, #1c414d 44%, #0b2935 100%);
}
.sea-horizon {
  background:
    linear-gradient(180deg, rgba(232,219,189,.23), rgba(174,191,177,.05) 44%, transparent),
    linear-gradient(90deg, transparent 0 13%, rgba(222,211,183,.12) 51%, transparent 83%);
  height: 38%;
}
.sea-wave {
  border-color: rgba(203,213,199,.17);
  box-shadow: 0 -6px 16px rgba(171,195,188,.04);
}
.sea-wake {
  background: linear-gradient(180deg, transparent, rgba(218,217,195,.2), transparent);
}
.cargo-vessel {
  filter: drop-shadow(0 26px 24px rgba(0,0,0,.34));
}
.vessel-hull {
  background:
    linear-gradient(180deg, rgba(226,213,185,.22), transparent 9%),
    linear-gradient(90deg, #172b34, #31464b 24%, #243b43 58%, #122832 100%);
  clip-path: polygon(0 5%, 99% 5%, 96% 47%, 90% 68%, 80% 83%, 60% 94%, 26% 91%, 12% 82%, 5% 64%, 2% 34%);
  filter: drop-shadow(0 10px 7px rgba(0,0,0,.22));
}
.vessel-hull::after {
  background:
    linear-gradient(90deg, transparent, rgba(214,157,94,.75) 18% 85%, transparent),
    linear-gradient(180deg, rgba(234,222,191,.8), transparent);
  height: 6px;
  top: 8%;
}
.vessel-deck {
  background:
    linear-gradient(180deg, rgba(250,239,209,.5), transparent 35%),
    linear-gradient(180deg, #b6aa8f, #555f5e);
  box-shadow: 0 4px 7px rgba(0,0,0,.25);
  height: 6%;
}
.vessel-containers {
  gap: 3px;
  grid-template-columns: repeat(4, 1fr);
  height: 43%;
  left: 12%;
  top: 13%;
  transform: perspective(420px) rotateX(-7deg) skewX(-2deg);
  width: 72%;
}
.vessel-containers span {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(15,27,31,.27) 10px 12px, rgba(232,220,195,.08) 13px 14px),
    linear-gradient(180deg, rgba(255,255,255,.17), transparent 33%, rgba(0,0,0,.22)),
    #355a60;
  border-color: rgba(17,29,36,.55);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.19), inset 0 -3px 5px rgba(8,20,25,.17);
}
.vessel-containers span:nth-child(3n + 1) { background-color: #294957; }
.vessel-containers span:nth-child(3n + 2) { background-color: #8c4937; }
.vessel-containers span:nth-child(4n) { background-color: #9e835b; }
.vessel-containers span:nth-child(5n) { background-color: #45645b; }
.vessel-bridge {
  background:
    linear-gradient(90deg, rgba(24,40,45,.24), transparent 16% 82%, rgba(24,40,45,.2)),
    linear-gradient(180deg, #eee5d1 0%, #c5bba5 100%);
  border-color: rgba(27,44,50,.82);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), 3px 4px 8px rgba(0,0,0,.2);
  height: 35%;
}
.vessel-bridge::before,
.vessel-bridge::after {
  background:
    linear-gradient(180deg, rgba(227,229,216,.65), transparent 25%),
    linear-gradient(90deg, #253d47, #355461 50%, #1e3742);
  border-bottom: 1px solid rgba(230,216,183,.42);
  height: 19%;
}
.vessel-bridge i {
  background: #8b8778;
  height: 9%;
  left: 44%;
  position: absolute;
  top: -13%;
  width: 12%;
}
.vessel-bow-wave {
  background: linear-gradient(90deg, transparent, rgba(219,217,195,.73), transparent);
  filter: blur(2px);
}

@media (max-width: 760px) {
  .container-truck { bottom: 20%; height: clamp(145px, 30vh, 225px); width: 92vw; }
  .truck-container { width: 70%; }
  .truck-cab { width: 27%; }
  .truck-wheel { height: clamp(32px, 7vw, 42px); width: clamp(32px, 7vw, 42px); }
  .road-ground { height: 22%; }
  .port-crane { top: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .freight-road-scene, .container-truck { transition: none; }
}

.freight-stage {
  background: var(--paper);
}
.freight-stage-art::after {
  background: linear-gradient(180deg, rgba(240,239,233,.12), transparent 42%, rgba(240,239,233,.24));
}
.freight-road-scene {
  background:
    radial-gradient(ellipse at 76% 20%, rgba(255,255,255,.86), transparent 28%),
    linear-gradient(180deg, #f0efe9 0%, #e6e8e4 53%, #cfd4d0 100%);
}
.freight-sea-scene {
  background:
    radial-gradient(ellipse at 70% 27%, rgba(125,157,174,.25), transparent 38%),
    linear-gradient(180deg, #e8e9e4 0%, #c6d0d0 43%, #7f999f 100%);
}
.sea-horizon {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08), transparent);
}
.sea-wave {
  border-color: rgba(40,77,91,.19);
  box-shadow: 0 -6px 16px rgba(62,97,110,.08);
}
.sea-wake {
  background: linear-gradient(180deg, transparent, rgba(238,239,233,.54), transparent);
}
.freight-stage-copy {
  align-items: start;
  bottom: auto;
  color: var(--ink);
  grid-template-columns: minmax(0, 1fr) auto;
  left: 6.5vw;
  right: 6.5vw;
  text-shadow: none;
  top: clamp(34px, 7vh, 76px);
  z-index: 4;
}
.freight-stage-copy > div { max-width: min(52vw, 650px); }
.freight-stage-copy .eyebrow { color: var(--accent); }
.freight-stage-copy h2 { max-width: 620px; }
.freight-stage-prompt { color: var(--muted); }
.freight-stage-progress span { background: rgba(16,16,16,.18); }
.freight-stage-progress span.is-active { background: var(--accent); }
.freight-stage-grain {
  background-image: linear-gradient(rgba(65,88,101,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(65,88,101,.035) 1px, transparent 1px);
}
.freight-stage::after {
  border-color: rgba(16,16,16,.12);
}
@media (max-width: 760px) {
  .freight-stage-copy {
    gap: 10px;
    grid-template-columns: 1fr;
    left: 6vw;
    right: 6vw;
    top: 28px;
  }

  .freight-stage-copy > div { max-width: min(88vw, 470px); }
  .freight-stage-copy h2 { max-width: 440px; }
  .freight-stage-prompt { grid-column: 1; grid-row: auto; margin: 0; }
  .freight-stage-progress { grid-column: 1; }
}