/* TexWear — landing page
   Direction: the garment tech pack. Pattern-paper grid, red stitch lines,
   measuring-tape ticks, woven-label chips. Black + logo red on white. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff") format("woff");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  --red: #E1141C;
  --ink: #000000;
  --graphite: #45474B;
  --mist: #8A8C90;
  --rule: #D8D9DB;
  --paper: #FFFFFF;
  --chalk: #F3F3F2;
  --grid: rgba(0, 0, 0, .05);
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --head-h: 76px;
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --stitch: 7px 5px;
}
.lang-zh { --f: "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: 17px; line-height: 1.6; font-weight: 400;
  font-variation-settings: "wdth" 100; text-rendering: optimizeLegibility;
}
.lang-zh body, body.lang-zh { line-height: 1.75; line-break: strict; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.ic { width: 24px; height: 24px; flex: none; }

/* pattern-paper grid */
.graph {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

/* ------------------------------------------------ type */
.hero-title, .sec-title, .model-code, .value-rows dt, .spec dt {
  font-variation-settings: "wdth" 112; font-stretch: 112%;
}
.sec-title {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.08;
  font-weight: 800; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance;
}
.lang-zh .sec-title, .lang-zh .hero-title { letter-spacing: 0; line-height: 1.25; font-weight: 900; }
.sec-intro { font-size: 1.125rem; color: var(--graphite); max-width: 60ch; margin-top: 18px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.sec-head .sec-intro { margin-top: 0; }
.side-title { font-size: .95rem; font-weight: 700; margin: 36px 0 14px; }
.prose p + p { margin-top: 1em; }
.prose { color: var(--graphite); max-width: 62ch; }
.prose p:first-child { color: var(--ink); font-size: 1.15rem; }

/* ------------------------------------------------ buttons */
.btn {
  --fill: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; min-height: 46px; border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; font-weight: 700; font-size: .98rem; line-height: 1.2; cursor: pointer;
  background-image: linear-gradient(var(--fill), var(--fill)); background-repeat: no-repeat;
  background-size: 0% 100%; background-position: left center;
  transition: background-size .45s cubic-bezier(.7, 0, .2, 1), color .3s, border-color .3s, transform .2s;
}
.btn:hover { background-size: 100% 100%; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 15px 26px; min-height: 54px; font-size: 1.03rem; }
.btn-red { background-color: var(--red); color: #fff; }
.btn-ink { background-color: var(--ink); color: #fff; --fill: var(--red); }
.btn-line { border-color: var(--ink); background-color: transparent; }
.btn-line:hover { color: #fff; }

/* ------------------------------------------------ header */
.site-head {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--rule); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .3s, background-color .3s;
}
.site-head.scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .97); }
.head-row { height: var(--head-h); display: flex; align-items: center; gap: 28px; }
.brand { display: block; flex: none; }
.brand img { height: 54px; width: auto; transition: transform .35s cubic-bezier(.2, .7, .2, 1); transform-origin: left center; }
.site-head.scrolled .brand img { transform: scale(.88); }
.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: block; padding: 8px 12px; text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--graphite); position: relative; transition: color .2s; }
.nav a::after { /* stitch that sews itself under the active / hovered link */
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 0;
  border-bottom: 2px dashed var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.7, 0, .2, 1);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.head-tools { display: flex; align-items: center; gap: 14px; }
.langs { display: flex; border: 1px solid var(--rule); border-radius: 2px; }
.langs a { padding: 6px 10px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--graphite); line-height: 1.2; transition: color .2s, background-color .2s; }
.langs a + a { border-inline-start: 1px solid var(--rule); }
.langs a[aria-current="true"] { background: var(--ink); color: #fff; }
.langs a:not([aria-current]):hover { color: var(--red); }
.head-cta { min-height: 42px; padding: 9px 16px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* mobile-only pieces */
.menu-btn, .lang-pop { display: none; }
.menu-btn {
  background: none; border: 1px solid var(--rule); width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center; cursor: pointer; border-radius: 2px; transition: border-color .2s;
}
.menu-btn:hover { border-color: var(--ink); }
.burger { position: relative; width: 20px; height: 14px; display: block; }
.burger i { position: absolute; left: 0; height: 2px; background: var(--ink); border-radius: 2px; transition: width .3s; }
.burger i:nth-child(1) { top: 0; width: 20px; }
.burger i:nth-child(2) { top: 6px; width: 14px; background: var(--red); }
.burger i:nth-child(3) { top: 12px; width: 20px; }
.menu-btn:hover .burger i:nth-child(2) { width: 20px; }

.lang-pop { position: relative; }
.lang-pop summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 9px;
  border: 1px solid var(--rule); border-radius: 2px; font-size: .86rem; font-weight: 700; user-select: none;
}
.lang-pop summary::-webkit-details-marker { display: none; }
.lang-pop summary .ic { width: 18px; height: 18px; color: var(--red); }
.lang-pop .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.lang-pop[open] .chev { transform: rotate(180deg); }
.lang-pop[open] summary { border-color: var(--ink); }
.lang-pop ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 170px; background: var(--paper);
  border: 1px solid var(--ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .14); padding: 6px; z-index: 5;
  animation: pop .22s cubic-bezier(.2, .7, .2, 1);
}
.lang-pop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; text-decoration: none; font-weight: 600; font-size: .98rem; }
.lang-pop a:hover { background: var(--chalk); }
.lang-pop a[aria-current="true"] { color: var(--red); }
.lang-pop a .ic { width: 18px; height: 18px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

/* side drawer (mobile menu) */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; }
.drawer.open { visibility: visible; pointer-events: auto; }
.drawer-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .35s; backdrop-filter: blur(2px); }
.drawer.open .drawer-veil { opacity: 1; }
.drawer-panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 380px); display: flex; flex-direction: column;
  background-color: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; border-inline-end: 3px solid var(--red);
  transform: translateX(-102%); transition: transform .45s cubic-bezier(.7, 0, .2, 1);
  padding: 0 22px 26px;
}
.drawer.open .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); border-bottom: 1px dashed var(--rule); margin-bottom: 10px; }
.drawer-top img { height: 42px; width: auto; }
.drawer-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border: 0; cursor: pointer; border-radius: 2px; transition: background-color .2s, transform .3s; }
.drawer-x:hover { background: var(--red); transform: rotate(90deg); }
.drawer-nav li { border-bottom: 1px solid var(--chalk); opacity: 0; transform: translateX(-18px); transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.12s + var(--i) * 45ms); }
.drawer.open .drawer-nav li { opacity: 1; transform: none; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; text-decoration: none;
  font-size: 1.32rem; font-weight: 800; font-variation-settings: "wdth" 108; letter-spacing: -.01em;
}
.drawer-nav a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .3; transition: opacity .2s, transform .2s; }
.drawer-nav a:hover, .drawer-nav a[aria-current="true"] { color: var(--red); }
.drawer-nav a:hover::after, .drawer-nav a[aria-current="true"]::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.drawer-cta { margin-top: 22px; width: 100%; }
.drawer-contact { margin-top: 20px; display: grid; gap: 4px; }
.drawer-contact a { display: flex; align-items: center; gap: 12px; padding: 9px 0; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.drawer-contact .ic { width: 20px; height: 20px; color: var(--red); }
.drawer-tag { margin-top: auto; padding-top: 26px; font-size: .82rem; font-weight: 700; color: var(--mist); }
html.locked { overflow: hidden; }

/* ------------------------------------------------ hero */
.hero { padding: clamp(40px, 6vw, 88px) 0 0; border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-bottom: clamp(48px, 5vw, 72px); }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-title .w > span { display: inline-block; }

/* services tape: woven label ribbon running under the hero */
.tape { background: var(--ink); color: #fff; overflow: hidden; position: relative; border-top: 1px solid var(--ink); }
.tape::before, .tape::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1.5px dashed rgba(255, 255, 255, .35); z-index: 1; }
.tape::before { top: 6px; } .tape::after { bottom: 6px; }
.tape-run { display: flex; width: max-content; animation: run 48s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
.tape-run > div { display: flex; align-items: center; flex: none; }
.tape span { padding: 20px 26px; font-size: 1.02rem; font-weight: 700; font-variation-settings: "wdth" 110; white-space: nowrap; }
.tape i { color: var(--red); font-style: normal; font-weight: 900; font-size: .95rem; }
@keyframes run { to { transform: translateX(-50%); } }
.hero-title {
  font-size: clamp(2.3rem, 1.3rem + 3.2vw, 3.95rem); line-height: 1.04; font-weight: 800;
  letter-spacing: -.03em; text-wrap: balance;
}
.hero-sub { margin-top: 26px; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); color: var(--graphite); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.spec {
  margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink); background: var(--paper);
}
.spec > div { padding: 14px 16px 4px 0; }
.spec > div + div { padding-inline-start: 16px; border-inline-start: 1px dashed var(--rule); }
.spec dt { font-size: 1.35rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.spec dd { font-size: .86rem; color: var(--graphite); margin-top: 6px; line-height: 1.4; }

.hero-fig { position: relative; padding-inline-start: 34px; }
.hero-img { position: relative; border: 1px solid var(--ink); background: var(--chalk); overflow: hidden; }
.hero-img::before { /* stitched inner edge */
  content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(255, 255, 255, .85); z-index: 1; pointer-events: none;
}
.hero-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scale: 1.08; translate: 0 var(--py, 0px); }
.ruler { /* measuring tape along the image */
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 22px;
  background:
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 10px) right top / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink) 0 1.5px, transparent 1.5px 50px) right top / 14px 100% no-repeat,
    var(--paper);
  border-inline-end: 1px solid var(--ink);
}
.hero-fig figcaption { margin-top: 12px; font-size: .86rem; color: var(--graphite); }

/* ------------------------------------------------ bridge */
.bridge { padding: clamp(64px, 8vw, 112px) 0; border-bottom: 1px solid var(--rule); }
.bridge .sec-title { margin-bottom: 48px; }
.bridge-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 90px) minmax(0, 1fr) minmax(40px, 90px) minmax(0, 1fr); align-items: stretch; }
.node { border: 1px solid var(--ink); background: var(--paper); padding: 26px 26px 28px; }
.node h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.25; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1.5px dashed var(--red); }
.node li { padding: 6px 0; color: var(--graphite); }
.node li + li { border-top: 1px solid var(--chalk); }
.node-hub { background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 18px; }
.node-hub img { width: min(200px, 80%); }
.node-hub p { color: #d9d9d9; font-size: .98rem; max-width: 24ch; }
.seam { display: flex; align-items: center; }
.seam svg { width: 100%; height: 20px; overflow: visible; }
.seam path { fill: none; stroke: var(--red); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.seam path:first-child { stroke-dasharray: var(--stitch); }
.bridge-note { margin-top: 32px; max-width: 70ch; color: var(--graphite); font-size: .98rem; padding-inline-start: 18px; border-inline-start: 3px solid var(--red); }
/* the one orchestrated moment: seams get stitched when the diagram enters view */
.js .seam path:first-child { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.6, 0, .2, 1); }
.js .seam path.head { opacity: 0; transition: opacity .3s .8s; }
.js .seam + .node-hub + .seam path:first-child { transition-delay: .5s; }
.js .seam + .node-hub + .seam path.head { transition-delay: 1.3s; }
.js .bridge.in .seam path:first-child { clip-path: inset(0 0 0 0); }
.js .bridge.in .seam path.head { opacity: 1; }

/* ------------------------------------------------ generic section spacing */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec + .sec { border-top: 1px solid var(--rule); }

/* about */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); }
.about .sec-title { margin-bottom: 28px; }
.points { margin-top: 40px; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.points li { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 6px 24px; }
.points h3 { font-size: 1.02rem; font-weight: 700; }
.points p { color: var(--graphite); }
.collage { position: relative; padding-bottom: 18%; }
.collage .c1 { width: 100%; border: 1px solid var(--ink); aspect-ratio: 744 / 396; object-fit: cover; }
.collage .c2 { position: absolute; width: 48%; right: -14px; bottom: 0; border: 6px solid var(--paper); outline: 1px solid var(--ink); aspect-ratio: 4 / 3; object-fit: cover; }
[dir="rtl"] .collage .c2 { right: auto; left: -14px; }
.labels { display: flex; flex-wrap: wrap; gap: 8px; }
.labels li { /* woven label */
  position: relative; padding: 7px 13px; font-size: .88rem; font-weight: 500; background: var(--paper);
  border: 1px solid var(--ink);
}
.labels li::after { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(0, 0, 0, .28); pointer-events: none; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.svc { position: relative; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 30px 28px 34px; background: var(--paper); transition: background-color .3s; }
.svc::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.svc:hover { background: var(--chalk); }
.svc:hover::before { transform: scaleX(1); }
.svc-ic { display: inline-flex; color: var(--red); margin-bottom: 26px; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.svc:hover .svc-ic { transform: translateY(-4px) rotate(-6deg); }
.svc-ic .ic { width: 36px; height: 36px; stroke-width: 1.4; }
.svc h3 { font-size: 1.18rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.svc p { color: var(--graphite); font-size: .98rem; }

/* models — the one dark band */
.models { background: var(--ink); color: #fff; }
.sec + .models, .models + .sec { border-top: 0; }
.models .sec-intro { color: #c8c9cb; }
.models-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 56px; }
.models-thumb { position: relative; border: 1px solid #3a3a3a; background: none; padding: 0; cursor: zoom-in; display: block; width: 100%; }
.models-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; opacity: .92; transition: opacity .2s; }
.models-thumb:hover img { opacity: 1; }
.models-thumb span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; font-size: .82rem; padding: 6px 10px; }
.models-thumb .ic { width: 18px; height: 18px; }
.model-pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #3a3a3a; }
.model { padding: 34px 40px 40px 0; }
.model + .model { padding-inline: 40px 0; border-inline-start: 2px solid var(--red); }
.model h3 { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.model-code { font-size: clamp(3.4rem, 2rem + 5vw, 6rem); font-weight: 900; line-height: .9; letter-spacing: -.03em; }
.model-name { font-size: 1.02rem; font-weight: 600; color: #FF4A50; }
.model p { color: #d6d7d9; max-width: 52ch; }
.matrix-wrap { margin-top: 48px; overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 560px; }
.matrix th, .matrix td { text-align: start; padding: 16px 18px; border-bottom: 1px solid #333; vertical-align: top; }
.matrix thead th { font-size: .9rem; color: #a9aaac; font-weight: 600; border-bottom: 2px solid #fff; }
.matrix thead th:nth-child(2), .matrix thead th:nth-child(3) { color: #fff; font-size: 1.05rem; font-weight: 800; }
.matrix tbody th { font-weight: 600; }
.matrix td { color: #d6d7d9; }
.matrix td:last-child, .matrix th:last-child { border-inline-start: 2px solid var(--red); }
.models-note { margin-top: 28px; color: #a9aaac; font-size: .94rem; max-width: 80ch; }

/* process */
.steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--red); }
.step { position: relative; padding: 0 22px 0 0; }
.step-no { display: block; font-size: 1.05rem; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.step::before { /* tick crossing the line, like a tape measure */
  content: ""; display: block; width: 2px; height: 28px; background: var(--red); margin-bottom: 14px;
}
.step h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin-bottom: 10px; }
.step p { color: var(--graphite); font-size: .96rem; }

/* why */
.why-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.why-img { position: sticky; top: calc(var(--head-h) + 32px); border: 1px solid var(--ink); overflow: hidden; }
.why-img img { width: 100%; aspect-ratio: 5 / 4.4; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.why-img:hover img { transform: scale(1.04); }
.why-list li { transition: transform .3s; }
.why-list li:hover { transform: translateX(4px); }
.why-list { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 36px; }
.why-list li { display: flex; gap: 16px; }
.why-ic { color: var(--red); padding-top: 2px; }
.why-ic .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.why-list h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.why-list p { color: var(--graphite); font-size: .97rem; }

/* values */
.values { background: var(--chalk); }
.value-rows { border-top: 2px solid var(--ink); }
.value-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px 48px; padding: 26px 0; border-bottom: 1px solid #cfd0d2; align-items: baseline; }
.value-rows dt { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); font-weight: 900; color: var(--red); line-height: 1.05; letter-spacing: -.02em; transition: transform .4s cubic-bezier(.2, .7, .2, 1), letter-spacing .4s; }
.value-rows > div:hover dt { transform: translateX(10px); }
.value-rows dd { font-size: 1.1rem; color: var(--ink); max-width: 52ch; }

/* compliance */
.comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.compliance .sec-title { margin-bottom: 24px; }
.comp-img { border: 1px solid var(--rule); }
.comp-note { margin-top: 28px; display: flex; gap: 12px; font-size: .93rem; color: var(--graphite); padding: 16px 18px; border: 1px dashed var(--mist); }
.comp-note .ic { color: var(--red); }

/* gallery slider */
.gallery .sec-head { margin-bottom: 36px; }
.slider { max-width: 1080px; margin-inline: auto; }
.slider-frame {
  position: relative; overflow: hidden; border: 1px solid var(--ink); background: var(--chalk);
}
.slider-frame::after { /* stitched inner edge */
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(0, 0, 0, .22); pointer-events: none; z-index: 1;
}
.slider-track { display: flex; transition: transform .7s cubic-bezier(.65, 0, .25, 1); touch-action: pan-y; }
.slide { flex: 0 0 100%; margin: 0; }
.slide-img {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10;
  padding: clamp(14px, 2.4vw, 28px) clamp(14px, 6.5vw, 78px); border: 0; background: none; cursor: zoom-in;
}
.slide-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.slider-btn {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; transition: background-color .15s, color .15s;
}
.slider-btn:hover { background: var(--ink); color: #fff; }
.slider-btn.prev { left: 14px; } .slider-btn.prev .ic { transform: scaleX(-1); }
.slider-btn.next { right: 14px; }
.slider-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; }
.slider-cap { font-weight: 600; font-size: 1.02rem; min-height: 1.6em; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button { width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.slider-dots span { display: block; width: 100%; height: 3px; background: var(--rule); position: relative; overflow: hidden; }
.slider-dots span::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.slider-dots [aria-selected="true"] span::after { transform: scaleX(1); }
.slider.playing .slider-dots [aria-selected="true"] span::after { transform: scaleX(0); animation: tick var(--interval, 5.5s) linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }

/* free text */
.text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.textsec .sec-title { margin-bottom: 24px; }
.textsec .btn { margin-top: 28px; }
.text-img { border: 1px solid var(--ink); }

/* ------------------------------------------------ contact */
.contact { border-top: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.channels { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.channels li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.ch-ic { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); color: var(--red); background: var(--paper); flex: none; transition: background-color .25s, color .25s, transform .25s; }
.channels li:hover .ch-ic { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(-6deg); }
.ch-ic .ic { width: 20px; height: 20px; }
.ch-txt { display: flex; flex-direction: column; min-width: 0; }
.ch-label { font-size: .8rem; color: var(--mist); }
.ch-txt a, .ch-val { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ch-txt a:hover { color: var(--red); }
.ch-qr { margin-inline-start: auto; border: 1px solid var(--rule); }

.inquiry { background: var(--paper); border: 1px solid var(--ink); padding: clamp(22px, 3vw, 38px); position: relative; }
.inquiry::before { content: ""; position: absolute; inset: 7px; border: 1px dashed var(--rule); pointer-events: none; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; position: relative; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > span, .f legend { font-size: .88rem; font-weight: 600; }
.f input, .f textarea {
  font: inherit; font-size: 1rem; width: 100%; padding: 11px 12px; border: 1px solid #b9babd; border-radius: 2px;
  background: var(--paper); color: var(--ink);
}
.f input:focus, .f textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--red); }
.f input[aria-invalid="true"] { border-color: var(--red); background: #fff6f6; }
.f textarea { resize: vertical; min-height: 120px; }
.f-wide { grid-column: 1 / -1; }
.f-model { grid-column: 1 / -1; }
.f-model { border: 0; padding: 0; margin: 0; }
.f-model legend { margin-bottom: 6px; padding: 0; }
.seg { display: flex; flex-wrap: wrap; border: 1px solid #b9babd; border-radius: 2px; width: fit-content; max-width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; padding: 10px 16px; font-size: .95rem; font-weight: 600; cursor: pointer; }
.seg label + label span { border-inline-start: 1px solid #b9babd; }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: -2px; }
.f-files > span:first-child { font-size: .88rem; font-weight: 600; }
.drop {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; cursor: pointer;
  background: #F6F7F9; border: 1.5px dashed #b9babd; border-radius: 2px; transition: border-color .2s, background-color .2s;
}
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-ic { display: inline-flex; color: var(--red); }
.drop-ic .ic { width: 24px; height: 24px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.drop-txt { font-weight: 700; flex: 1; }
.drop-plus { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border-radius: 2px; transition: background-color .2s, transform .3s; }
.drop-plus .ic { width: 18px; height: 18px; stroke-width: 2; }
.drop:hover, .drop.over { border-color: var(--ink); background: #EEF0F3; }
.drop:hover .drop-ic .ic, .drop.over .drop-ic .ic { transform: rotate(-12deg); }
.drop:hover .drop-plus, .drop.over .drop-plus { background: var(--red); transform: rotate(90deg); }
.drop:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.drop.over::after { content: attr(data-drop-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); font-weight: 700; color: var(--red); pointer-events: none; }
.file-list { display: grid; gap: 6px; }
.file-list:empty { display: none; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule); background: var(--paper); font-size: .92rem; animation: up .3s cubic-bezier(.2, .7, .2, 1); }
.file-list .ic { width: 20px; height: 20px; color: var(--red); }
.file-list .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-list .fs { color: var(--mist); font-size: .82rem; flex: none; }
.file-list button { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); background: none; cursor: pointer; border-radius: 2px; }
.file-list button:hover { border-color: var(--red); color: var(--red); }
.file-list button .ic { width: 16px; height: 16px; color: currentColor; }
.f-hint { font-size: .82rem; color: var(--mist); line-height: 1.5; }
.f-file-err { font-size: .86rem; color: var(--red); font-weight: 600; }
.f-file-err[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; position: relative; }
.f-note { font-size: .85rem; color: var(--mist); }
.f-status { margin-top: 16px; padding: 12px 14px; font-size: .95rem; background: #fff1f1; border-inline-start: 3px solid var(--red); position: relative; }
.f-done { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 2px solid var(--ink); font-size: 1.08rem; font-weight: 600; }
.f-done .ic { color: var(--red); width: 30px; height: 30px; stroke-width: 2.2; }
.f-done[hidden], .f-status[hidden] { display: none; }
.inquiry.done .f-grid, .inquiry.done .f-foot { display: none; }

/* ------------------------------------------------ footer */
.site-foot { background: var(--ink); color: #cfd0d2; padding-top: 72px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px; padding-bottom: 56px; }
.foot-brand img { width: 220px; margin-bottom: 20px; }
.foot-brand p { max-width: 40ch; font-size: .95rem; }
.foot-nav li + li { margin-top: 8px; }
.foot-nav a, .foot-contact a { text-decoration: none; color: #fff; }
.foot-nav a:hover, .foot-contact a:hover { color: var(--red); }
.foot-contact li { display: flex; gap: 10px; align-items: center; font-size: .95rem; overflow-wrap: anywhere; }
.foot-contact li + li { margin-top: 10px; }
.foot-contact .ic { width: 18px; height: 18px; color: var(--red); }
.foot-base { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-block: 22px; border-top: 1px dashed #3d3d3d; font-size: .86rem; }
.langs-foot { border-color: #3d3d3d; }
.langs-foot a { color: #cfd0d2; }
.langs-foot a + a { border-color: #3d3d3d; }
.langs-foot a[aria-current="true"] { background: #fff; color: var(--ink); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.credit { color: #9fa1a6; }
.credit a { color: #fff; text-decoration: none; font-weight: 700; border-bottom: 1px dashed var(--red); padding-bottom: 1px; }
.credit a:hover { color: var(--red); border-color: var(--red); }
.to-top { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; }
.to-top .ic { width: 16px; height: 16px; }

/* WhatsApp */
.wa-float {
  position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  background: #1FA855; color: #fff; text-decoration: none; padding: 12px 16px 12px 13px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.wa-float .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.wa-float:hover { background: #178a45; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #1FA855; animation: ring 3.2s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .86); }
.lightbox img { max-height: 82vh; width: auto; margin-inline: auto; border: 1px solid #333; }
.lb-cap { color: #fff; text-align: center; margin-top: 12px; font-size: .95rem; }
.lb-close { position: absolute; top: -48px; inset-inline-end: 0; background: #fff; border: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .head-cta { display: none; }
  .nav a { padding-inline: 9px; }
  .sec-head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .steps::before { display: none; }
  .step::before { width: 100%; height: 2px; margin-bottom: 14px; }
  .step { display: flex; flex-direction: column; }
  .step::before { order: 0; } .step-no { order: 1; } .step h3 { order: 2; } .step p { order: 3; }
}
@media (max-width: 960px) {
  :root { --head-h: 66px; }
  .brand img { height: 42px; }
  .head-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
  .menu-btn { display: inline-flex; justify-self: start; }
  .brand { justify-self: center; }
  .brand img { transform-origin: center; }
  .head-tools { justify-self: end; }
  .nav, .langs, .head-cta { display: none; }
  .lang-pop { display: block; }
  .hero-grid, .about-grid, .why-grid, .comp-grid, .contact-grid, .text-grid, .models-head { grid-template-columns: 1fr; }
  .hero-fig { max-width: 520px; }
  .why-img { position: static; }
  .bridge-row { grid-template-columns: 1fr; }
  .seam { height: 56px; justify-content: center; }
  .seam svg { width: 56px; transform: rotate(90deg); }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .spec { grid-template-columns: 1fr 1fr; }
  .spec > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .spec > div:nth-child(n+3) { border-top: 1px dashed var(--rule); margin-top: 8px; }
  .hero-fig { padding-inline-start: 26px; }
  .ruler { width: 18px; }
  .svc-grid, .why-list, .f-grid, .model-pair, .foot-grid { grid-template-columns: 1fr; }
  .model, .model + .model { padding: 28px 0; border-inline-start: 0; }
  .model + .model { border-top: 2px solid var(--red); }
  .points li { grid-template-columns: 1fr; }
  .value-rows > div { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 0; border-inline-start: 2px solid var(--red); padding-inline-start: 22px; }
  .step { padding: 0 0 30px; }
  .step::before { display: none; }
  .step-no::before { content: ""; position: absolute; inset-inline-start: -29px; top: 6px; width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--red); border-radius: 50%; }
  .collage .c2 { right: -6px; }
  .matrix { min-width: 0; }
  .matrix thead { display: none; }
  .matrix tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #333; padding: 12px 0; }
  .matrix tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 6px; }
  .matrix td { border: 0; padding: 0 10px 0 0; }
  .matrix td::before { content: attr(data-h); display: block; font-weight: 800; color: #fff; font-size: .82rem; }
  .matrix td:last-child { border-inline-start: 2px solid var(--red); padding-inline-start: 12px; }
  .wa-float span { display: none; }
  .tape span { padding: 16px 18px; font-size: .92rem; }
  .tape-run { animation-duration: 36s; }
  .slider-btn { display: none; } /* swipe or tap the bars on phones */
  .slide-img { aspect-ratio: 3 / 2; padding: 12px; }
  .slider-foot { flex-direction: column; align-items: flex-start; }
  .slider-dots button { width: 56px; height: 32px; }
  .wa-float { padding: 14px; }
}

/* ------------------------------------------------ motion (only with JS, and only if the visitor allows motion) */
@media (prefers-reduced-motion: no-preference) {
  /* hero load-in: words rise out of their line, image unrolls like fabric, tape measure ticks run down */
  .js .hero-title .w > span { transform: translateY(105%); animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.15s + var(--w) * 55ms); }
  .js .hero-sub, .js .hero-actions, .js .spec > div, .js .hero-fig figcaption { opacity: 0; animation: up .8s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .hero-sub { animation-delay: .55s; }
  .js .hero-actions { animation-delay: .7s; }
  .js .spec > div:nth-child(1) { animation-delay: .85s; } .js .spec > div:nth-child(2) { animation-delay: .93s; }
  .js .spec > div:nth-child(3) { animation-delay: 1.01s; } .js .spec > div:nth-child(4) { animation-delay: 1.09s; }
  .js .spec { border-top-color: transparent; position: relative; }
  .js .spec::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; animation: draw 1s .75s cubic-bezier(.7, 0, .2, 1) forwards; }
  .js .hero-img { clip-path: inset(0 0 100% 0); animation: unroll 1.3s .25s cubic-bezier(.7, 0, .2, 1) forwards; }
  .js .hero-img img { animation: settle 2.2s .25s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .ruler { clip-path: inset(0 0 100% 0); animation: unroll 1.6s .1s cubic-bezier(.7, 0, .2, 1) forwards; }
  .js .hero-fig figcaption { animation-delay: 1.3s; }

  /* everything below the fold: rises in as it enters the view, siblings one after another */
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), background-color .3s; transition-delay: calc(var(--d, 0) * 85ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .svc[data-reveal].in:hover { transition-delay: 0s; }

  /* line icons get sewn on */
  .js [data-reveal] .svc-ic .ic > *, .js [data-reveal] .why-ic .ic > * { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(.25s + var(--d, 0) * 85ms); }
  .js [data-reveal].in .svc-ic .ic > *, .js [data-reveal].in .why-ic .ic > * { stroke-dashoffset: 0; }

  /* FOB / CMPT: outline first, then filled in like ink */
  .js .model-code { color: transparent; -webkit-text-stroke: 1.5px #fff; background: linear-gradient(90deg, #fff 50%, transparent 50%) right / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 1.3s .35s cubic-bezier(.7, 0, .2, 1); }
  .js .model.in .model-code { background-position: left; }

  /* workflow: the tape line is drawn, then each tick drops in */
  .js .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.7, 0, .2, 1); }
  .js .steps.in::before { transform: scaleX(1); }
  .js .step::before { transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.3s + var(--d, 0) * 160ms); }
  .js .steps.in .step::before { transform: scaleY(1); }

  /* section titles: a short red stitch is sewn under each one */
  .js .sec-title[data-reveal]::after { content: ""; display: block; width: 64px; margin-top: 18px; border-bottom: 3px dashed var(--red); transform: scaleX(0); transform-origin: left; transition: transform .8s .35s cubic-bezier(.7, 0, .2, 1); }
  .js .sec-title[data-reveal].in::after { transform: scaleX(1); }
}
@keyframes rise { to { transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes unroll { to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { scale: 1.2; } to { scale: 1.08; } }

@media (prefers-reduced-motion: reduce) {
  .tape-run, .wa-float::before { animation: none; }
  .hero-img img { scale: 1; translate: none; }
  html { scroll-behavior: auto; }
  .js .seam path:first-child, .js .seam path.head { transition: none; clip-path: none; opacity: 1; }
  .slider.playing .slider-dots [aria-selected="true"] span::after { animation: none; transform: scaleX(1); }
  * { transition-duration: .01ms !important; }
}
@media print {
  .site-head, .wa-float, .inquiry, .slider-btn, .tape, .drawer { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .why-list li[data-reveal].in:hover, .js .value-rows > div[data-reveal].in { transition-delay: 0s; }
}