@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/manrope-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/manrope-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
body{margin:0}[hidden]{display:none!important}img{max-width:100%}
/* ---------- home hero: background video ---------- */
.hv { position: relative; height: clamp(600px, 84vh, 860px); overflow: hidden; background: #0b1a30; color: var(--white); isolation: isolate; }
.hv-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hv-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hv-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 20, 45, 0.94) 0%, rgba(0, 20, 45, 0.86) 34%, rgba(0, 20, 45, 0.45) 56%, rgba(0, 20, 45, 0.16) 72%),
    linear-gradient(0deg, rgba(0, 12, 28, 0.6) 0%, rgba(0, 12, 28, 0) 28%),
    rgba(0, 15, 35, 0.24); }
.hv-ov { position: absolute; z-index: 2; pointer-events: none; container-type: inline-size; }
.hv-ov > * { position: absolute; opacity: 0; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.hv-ov > .on { opacity: 1; }
.hv-subt { left: 64%; bottom: 7%; transform: translate(-50%, 6px); width: max-content; max-width: 52%; text-align: center; background: rgba(0, 0, 0, 0.8); color: var(--white); font-size: max(14px, 1.85cqw); font-weight: 600; line-height: 1.35; padding: 0.3em 0.7em; border-radius: 4px; }
.hv-subt.on { transform: translate(-50%, 0); }
.hv-tcard { left: 62%; top: 9%; width: 31%; }
.hv-face { background: var(--white); color: var(--navy); border-radius: 0.8cqw; padding: 1.6cqw 1.9cqw 1.7cqw; display: flex; flex-direction: column; gap: 0.35cqw; box-shadow: 0 1.4cqw 3cqw -1.2cqw rgba(0, 0, 0, 0.55); }
.hv-bar { width: 2.6cqw; height: 0.32cqw; min-height: 3px; background: var(--orange); border-radius: 2px; margin-bottom: 0.4cqw; }
.hv-k { font-size: max(10px, 1cqw); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.hv-t { font-size: max(15px, 2.2cqw); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
.hv-tcard .hv-fr { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.hv-tcard .hv-fr .hv-face { height: 100%; }
.hv-tcard.wiped .hv-fr { clip-path: inset(0 0 0 0); }
.hv-co { display: flex; align-items: center; transform: translate(-0.55cqw, -50%); }
.hv-dot { width: 1.1cqw; height: 1.1cqw; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0.45cqw rgba(255, 91, 0, 0.3); flex: none; }
.hv-stem { width: 3.2cqw; height: 2px; background: var(--white); flex: none; }
.hv-lab { position: relative; display: grid; }
.hv-lab > * { grid-area: 1 / 1; }
.hv-pill { display: inline-block; white-space: nowrap; background: var(--white); color: var(--navy); font-size: max(11px, 1.25cqw); font-weight: 800; padding: 0.3em 0.75em; border-radius: 999px; box-shadow: 0 0.8cqw 1.6cqw -0.8cqw rgba(0, 0, 0, 0.6); }
.hv-co .hv-fr { clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.hv-co.wiped .hv-fr { clip-path: inset(0 0 0 0); }
.hv-co .hv-en { transition: opacity 0.3s 0.4s; }
.hv-co.wiped .hv-en { opacity: 0; }
.hv-co1 { left: 55.6%; top: 31%; }
.hv-co2 { left: 56.2%; top: 47%; }
.hv-lt3 { left: 57%; bottom: 21%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3cqw; transform: translateX(-1cqw); }
.hv-lt3.on { transform: none; }
.hv-lt3 b { background: var(--navy); color: var(--white); font-size: max(13px, 1.7cqw); font-weight: 800; padding: 0.3cqw 1cqw; border-radius: 0.45cqw; line-height: 1.3; }
.hv-lt3 span { background: var(--orange); color: var(--navy); font-size: max(11px, 1.25cqw); font-weight: 700; padding: 0.22cqw 1cqw; border-radius: 0.45cqw; line-height: 1.3; }
.hv-qc { left: 60%; top: 20%; width: 28%; background: rgba(255, 255, 255, 0.96); color: var(--navy); border-radius: 1cqw; padding: 1.6cqw 1.8cqw; box-shadow: 0 2cqw 4cqw -2cqw rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 0.9cqw; }
.hv-qh { font-size: max(13px, 1.5cqw); font-weight: 800; }
.hv-qc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7cqw; }
.hv-qc li { display: flex; align-items: center; gap: 0.9cqw; font-size: max(12px, 1.25cqw); font-weight: 600; color: var(--text); }
.hv-qc li b { min-width: 2.6em; color: var(--navy); }
.hv-tick { margin-left: auto; width: 1.6cqw; height: 1.6cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: var(--line); display: grid; place-items: center; transition: background 0.3s; }
.hv-tick::after { content: ""; width: 28%; height: 52%; border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-8%, -8%); opacity: 0; transition: opacity 0.2s; }
.hv-qc li.ok .hv-tick { background: var(--orange); }
.hv-qc li.ok .hv-tick::after { opacity: 1; }
.hv-copy { position: relative; z-index: 1; height: 100%; padding: clamp(40px, 6vw, 80px) var(--pad) clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.hv-main { max-width: 34rem; display: flex; flex-direction: column; gap: 22px; margin-block: auto; align-items: flex-start; }
.hv h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.028em; }
.hv-main p { color: #d3dce8; font-size: 19px; line-height: 1.55; max-width: 32em; }
.hv-now { display: flex; align-items: center; gap: 14px; }
.hv-pp { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none; background: rgba(255, 255, 255, 0.12); color: var(--white); }
.hv-pp:hover { background: rgba(255, 255, 255, 0.22); }
.hv-pp span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hv-pp[aria-pressed="true"] span { width: 0; height: 0; border-inline: 0; border-left: 11px solid currentColor; border-block: 7px solid transparent; margin-left: 3px; }
.hv-label { display: flex; flex-direction: column; line-height: 1.3; }
.hv-label small { font-size: 12px; font-weight: 700; color: var(--on-navy); }
.hv-label span { font-size: 15px; font-weight: 700; }
.hv-steps { display: flex; gap: 6px; margin-left: 6px; }
.hv-steps i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; position: relative; }
.hv-steps i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--orange); }
@media (max-width: 760px) {
  .hv { height: auto; background: var(--navy); }
  .hv-stage { position: relative; z-index: 0; aspect-ratio: 16 / 11; }
  .hv-stage::after { background: rgba(0, 15, 35, 0.3); }
  .hv-subt { left: 50%; max-width: 86%; bottom: 6%; }
  .hv-tcard { display: none; }
  .hv-copy { height: auto; padding-top: 28px; padding-bottom: 36px; }
  .hv-main { margin: 0; }
  .hv h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .hv-main p { font-size: 18px; }
  .hv-now { order: -1; }
  .hv-label { flex: 1; min-width: 0; }
  .hv-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hv-steps { position: absolute; left: 0; right: 0; top: 0; margin: 0; gap: 3px; }
  .hv-steps i { flex: 1; width: auto; height: 4px; border-radius: 0; background: rgba(255, 255, 255, 0.2); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-ov > *, .hv-tcard .hv-fr, .hv-co .hv-fr, .hv-co .hv-en { transition: none; }
}

/* What we do: service cards showing the work itself */
.grid.wwd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card.svc { padding: 0; gap: 0; overflow: hidden; color: inherit; container-type: inline-size; transition: border-color 0.2s, box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.card.svc:hover { border-color: #c9d3e0; box-shadow: 0 22px 40px -28px rgba(0, 32, 70, 0.45); transform: translateY(-2px); }
.svc-txt { padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 8px; }
.svc-txt p { font-size: 16px; max-width: 40ch; }
.svc-txt .more { font-weight: 700; font-size: 15px; color: var(--blue); padding-top: 6px; }
.card.svc:hover .more { text-decoration: underline; text-underline-offset: 4px; }

.tl { aspect-ratio: 16 / 11; background: var(--navy); color: var(--white); padding: 4.2cqw 4.6cqw; display: flex; flex-direction: column; gap: 3cqw; font-size: max(10.5px, 2.2cqw); line-height: 1.35; overflow: hidden; }
.tl-bar { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding-bottom: 2.4cqw; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.tl-file { font-weight: 700; color: var(--on-navy); font-size: max(10.5px, 2.1cqw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-chip { flex: none; display: inline-flex; align-items: center; gap: 0.45em; font-size: max(10px, 1.8cqw); font-weight: 800; letter-spacing: 0.06em; padding: 0.35em 0.85em; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--white); }
.tl-ck { flex: none; width: max(14px, 3cqw); height: max(14px, 3cqw); border-radius: 50%; background: var(--orange); position: relative; display: inline-block; }
.tl-ck::after { content: ""; position: absolute; left: 50%; top: 45%; width: 24%; height: 46%; border: solid var(--navy); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }

/* 1. subtitle file */
.tl-rows { display: flex; flex-direction: column; justify-content: space-between; gap: 0.6cqw; flex: 1; min-height: 0; }
.tl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 2.6cqw; align-items: center; padding: 1.3cqw 2cqw; border-radius: 1.2cqw; animation: tl-row 9.6s infinite; animation-delay: calc(var(--i) * 2.4s); }
.tl-tc { font-variant-numeric: tabular-nums; color: var(--on-navy); font-size: max(10px, 1.9cqw); font-weight: 600; }
.tl-txt { display: flex; flex-direction: column; min-width: 0; }
.tl-src { color: var(--on-navy); font-size: max(10px, 1.8cqw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-tgt { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-row .tl-ck { opacity: 0; }
.tl-row:nth-child(1) .tl-ck { animation: tl-ck1 9.6s infinite; }
.tl-row:nth-child(2) .tl-ck { animation: tl-ck2 9.6s infinite; }
.tl-row:nth-child(3) .tl-ck { animation: tl-ck3 9.6s infinite; }
.tl-row:nth-child(4) .tl-ck { animation: tl-ck4 9.6s infinite; }
@keyframes tl-row { 0%, 24% { background: rgba(255, 255, 255, 0.1); } 25%, 100% { background: transparent; } }
@keyframes tl-ck1 { 0%, 14% { opacity: 0; transform: scale(0.6); } 18%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tl-ck2 { 0%, 39% { opacity: 0; transform: scale(0.6); } 43%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tl-ck3 { 0%, 64% { opacity: 0; transform: scale(0.6); } 68%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes tl-ck4 { 0%, 89% { opacity: 0; transform: scale(0.6); } 92%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tl-meters { display: flex; flex-wrap: wrap; gap: 1.2cqw 4cqw; padding-top: 2.4cqw; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--on-navy); font-size: max(10px, 1.9cqw); }
.tl-meters b { color: var(--white); margin-left: 0.4em; }

/* shared language swap: .tl-a shows first, .tl-b after the wipe */
.tl-swap { display: inline-grid; }
.tl-swap > * { grid-area: 1 / 1; }
.tl-gfx .tl-a { animation: tl-a 8s infinite; }
.tl-gfx .tl-b { animation: tl-b 8s infinite; }
@keyframes tl-a { 0%, 44% { opacity: 1; } 48%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tl-b { 0%, 44% { opacity: 0; } 48%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* 2. graphics project */
.tl-gfx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3cqw; }
.tl-prev { position: relative; border-radius: 1.4cqw; overflow: hidden; background: linear-gradient(160deg, #24487c 0%, #173a6b 55%, #0b2e5c 100%); }
.tl-ttl { position: absolute; left: 7%; top: 12%; right: 7%; display: flex; flex-direction: column; gap: 0.6cqw; }
.tl-ttl .tl-k { font-size: max(9px, 1.6cqw); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-soft); }
.tl-ttl .tl-h { font-size: max(14px, 3.6cqw); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
.tl-gfx .tl-ttl.tl-a { animation: tl-clipA 8s infinite; }
.tl-gfx .tl-ttl.tl-b { animation: tl-clipB 8s infinite; }
@keyframes tl-clipA { 0%, 42% { clip-path: inset(0 0 0 0); } 50%, 92% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes tl-clipB { 0%, 42% { clip-path: inset(0 100% 0 0); } 50%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.tl-call { position: absolute; display: flex; align-items: center; gap: 1.2cqw; background: var(--white); color: var(--navy); font-weight: 800; font-size: max(10px, 1.9cqw); padding: 0.3em 0.8em 0.3em 0.5em; border-radius: 999px; }
.tl-call i { width: max(8px, 1.5cqw); height: max(8px, 1.5cqw); border-radius: 50%; background: var(--orange); flex: none; }
.tl-wipe { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); left: -2%; animation: tl-wipe 8s infinite; }
@keyframes tl-wipe { 0%, 42% { left: -2%; opacity: 0; } 43% { opacity: 1; } 50% { left: 100%; opacity: 1; } 51%, 100% { left: 100%; opacity: 0; } }
.tl-layers { display: flex; flex-direction: column; gap: 1.1cqw; min-width: 0; }
.tl-lh { color: var(--on-navy); font-size: max(10px, 1.8cqw); font-weight: 700; }
.tl-ly { display: flex; align-items: center; gap: 1.6cqw; padding: 1cqw 1.4cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.06); font-weight: 600; white-space: nowrap; overflow: hidden; }
.tl-ly b { flex: none; width: max(16px, 3.2cqw); height: max(16px, 3.2cqw); border-radius: 0.7cqw; display: grid; place-items: center; background: rgba(255, 91, 0, 0.18); color: var(--orange-soft); font-size: max(10px, 1.8cqw); }
.tl-renders { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4cqw; padding-top: 2.4cqw; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tl-renders span { font-size: max(10px, 1.8cqw); font-weight: 700; padding: 0.3em 0.75em; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.tl-renders .tl-rl { background: none; padding: 0; color: var(--on-navy); margin-right: 0.6cqw; }

/* 3. caption styles */
.tl-burn-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3cqw; }
.tl-frame { position: relative; border-radius: 1.4cqw; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 70% 30%, #3366a3 0%, transparent 70%), linear-gradient(170deg, #24487c, #0b2e5c); }
.tl-cap { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; text-align: center; opacity: 0; animation: tl-s 9s infinite; }
.tl-cap.tl-s1 { bottom: 9%; background: rgba(0, 0, 0, 0.82); padding: 0.3em 0.7em; border-radius: 3px; font-weight: 600; font-size: max(11px, 2.4cqw); }
.tl-cap.tl-s2 { bottom: 9%; color: #ffe066; font-weight: 800; font-size: max(12px, 2.8cqw); -webkit-text-stroke: 0.06em #000; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); animation-delay: -6s; }
.tl-cap.tl-s3 { top: 18%; font-weight: 800; font-size: max(14px, 3.6cqw); line-height: 1.1; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation-delay: -3s; }
.tl-cap.tl-s3 em { font-style: normal; background: var(--orange); color: var(--navy); padding: 0 0.15em; border-radius: 3px; text-shadow: none; }
.tl-props { margin: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
.tl-props > div { display: flex; flex-direction: column; gap: 0.3cqw; padding-bottom: 1.3cqw; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.tl-props dt { color: var(--on-navy); font-size: max(10px, 1.7cqw); font-weight: 600; }
.tl-props dd { margin: 0; display: grid; font-weight: 700; }
.tl-props dd > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 1cqw; opacity: 0; animation: tl-s 9s infinite; white-space: nowrap; }
.tl-props dd > .tl-s2 { animation-delay: -6s; }
.tl-props dd > .tl-s3 { animation-delay: -3s; }
.tl-sw { width: max(11px, 2.2cqw); height: max(11px, 2.2cqw); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); flex: none; }
@keyframes tl-s { 0% { opacity: 0; } 3%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* 4. dubbing */
.tl-tracks { position: relative; display: flex; flex-direction: column; gap: 1.6cqw; }
.tl-trk { display: grid; grid-template-columns: 17cqw minmax(0, 1fr); align-items: center; gap: 2cqw; }
.tl-tn { color: var(--on-navy); font-size: max(10px, 1.8cqw); font-weight: 700; white-space: nowrap; }
.tl-wv { height: 9cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.05); padding: 1cqw 1.4cqw; color: rgba(255, 255, 255, 0.75); display: block; }
.tl-wv svg { width: 100%; height: 100%; display: block; }
.tl-wv-es { color: var(--orange-soft); }
.tl-head { position: absolute; top: -1cqw; bottom: -1cqw; width: 2px; background: var(--white); left: calc(19cqw + 2px); box-shadow: 0 0 0 1px rgba(0, 32, 70, 0.4); animation: tl-head 7s linear infinite; }
@keyframes tl-head { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 31cqw)); } }
.tl-script { margin: 0; flex: 1; color: var(--white); font-weight: 600; font-size: max(11px, 2.3cqw); line-height: 1.5; max-width: none; }
.tl-term { background: rgba(255, 91, 0, 0.22); box-shadow: inset 0 -2px 0 var(--orange); padding: 0 0.15em; border-radius: 2px; }
.tl-fix { display: inline-block; margin-left: 1.4cqw; font-size: max(10px, 1.7cqw); font-weight: 800; color: var(--navy); background: var(--orange); padding: 0.15em 0.6em; border-radius: 999px; vertical-align: 0.1em; }
.tl-checks { display: flex; flex-wrap: wrap; gap: 1.4cqw 3.4cqw; padding-top: 2.4cqw; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tl-checks span { display: inline-flex; align-items: center; gap: 1.2cqw; font-weight: 700; font-size: max(10px, 1.9cqw); }
.tl-checks .tl-ck { width: max(13px, 2.6cqw); height: max(13px, 2.6cqw); }

@media (max-width: 700px) {
  .grid.wwd { grid-template-columns: minmax(0, 1fr); }
  .tl-dub { aspect-ratio: auto; }
}
@media (max-width: 420px) {
  .tl-meters span:last-child, .tl-renders span:nth-last-child(-n+1) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card.svc { transition: none; } .card.svc:hover { transform: none; }
  .tl *, .tl *::before, .tl *::after { animation: none !important; }
  .tl-row .tl-ck, .tl-cap.tl-s1, .tl-props dd > .tl-s1 { opacity: 1; }
  .tl-row:first-child { background: rgba(255, 255, 255, 0.1); }
  .tl-gfx .tl-a { opacity: 0; } .tl-gfx .tl-b { opacity: 1; }
  .tl-gfx .tl-ttl.tl-b { clip-path: none; }
  .tl-wipe { display: none; }
}

/* subtitle card: one line goes over the character limit, then gets retranslated */
.tl-meta { display: flex; align-items: baseline; gap: 1.6cqw; min-width: 0; }
.tl-meta .tl-src { min-width: 0; }
.tl-cnt { flex: none; display: inline-grid; font-variant-numeric: tabular-nums; font-size: max(9.5px, 1.7cqw); font-weight: 800; }
.tl-cnt > * { grid-area: 1 / 1; padding: 0.1em 0.6em; border-radius: 999px; }
.tl-cnt .tl-long { background: var(--orange); color: var(--navy); animation: tl-long 9.6s infinite; }
.tl-cnt .tl-short { background: rgba(255, 255, 255, 0.12); color: var(--white); opacity: 0; animation: tl-cnt-short 9.6s infinite; }
.tl-fit { display: grid; }
.tl-fit > * { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-fit mark { background: rgba(255, 91, 0, 0.28); color: #ffb27f; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--orange); animation: tl-flag 9.6s infinite; }
.tl-fit .tl-long { animation: tl-long 9.6s infinite; }
.tl-fit .tl-short { clip-path: inset(0 100% 0 0); animation: tl-type 9.6s infinite; }
@keyframes tl-long { 0%, 55% { opacity: 1; } 58%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tl-flag { 0%, 49% { background: rgba(255, 91, 0, 0.28); } 51%, 53% { background: rgba(255, 91, 0, 0.6); } 55%, 100% { background: rgba(255, 91, 0, 0.28); } }
@keyframes tl-type { 0%, 58% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(35, end); } 66%, 97% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes tl-cnt-short { 0%, 64% { opacity: 0; } 67%, 97% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tl-fit .tl-long, .tl-cnt .tl-long { opacity: 0; }
  .tl-fit .tl-short { clip-path: none; }
  .tl-cnt .tl-short { opacity: 1; }
}

/* angled bottom edge on the pale grey bands: the next section's colour cuts in on a diagonal */
:root { --slant: clamp(26px, 4.2vw, 60px); }
.sec.band:not(.tight), .sv-nums, .sec.cs-list { position: relative; --next: var(--white); }
.sec.band { padding-bottom: calc(clamp(52px, 6.5vw, 92px) + var(--slant)); }
.sec.cs-list { --next: var(--blue); padding-bottom: calc(clamp(52px, 6.5vw, 92px) + var(--slant)); }
.sv-nums { --next: var(--blue); padding-bottom: calc(clamp(44px, 6vw, 80px) + var(--slant)); }
.sec.band:not(.tight)::after, .sv-nums::after, .sec.cs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--slant) + 1px); background: var(--next); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; }

/* dubbing card: pronunciation fixed with an SSML phoneme tag */
.tl-ssml { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.tl-ssml > p { grid-area: 1 / 1; margin: 0; }
.tl-flag { display: inline-block; margin-left: 1.4cqw; font-size: max(10px, 1.7cqw); font-weight: 800; color: var(--white); background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px var(--orange); padding: 0.15em 0.6em; border-radius: 999px; vertical-align: 0.1em; }
.tl-code { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: max(10.5px, 1.95cqw); line-height: 1.6; color: var(--white); background: rgba(0, 0, 0, 0.22); border-radius: 1.2cqw; padding: 1.4cqw 1.8cqw; overflow-wrap: break-word; }
.tl-tm, .tl-end { white-space: nowrap; }
.tl-tag { color: var(--orange-soft); }
.tl-tag i, .tl-tag em { font-style: normal; }
.tl-tag i { color: var(--on-navy); }
.tl-tag em { color: var(--white); }
.tl-tm { background: rgba(255, 91, 0, 0.22); box-shadow: inset 0 -2px 0 var(--orange); border-radius: 2px; padding: 0 0.1em; }
.tl-code .tl-fix { font-family: var(--sans); }
.tl-sa { animation: tl-ssa 8s infinite; }
.tl-sb { opacity: 0; animation: tl-ssb 8s infinite; }
.tl-sb .tl-tag { animation: tl-sstag 8s infinite; }
.tl-sb .tl-fix { animation: tl-ssfix 8s infinite; }
@keyframes tl-ssa { 0%, 40% { opacity: 1; } 44%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tl-ssb { 0%, 41% { opacity: 0; } 45%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tl-sstag { 0%, 46% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes tl-ssfix { 0%, 60% { opacity: 0; transform: scale(0.85); } 64%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tl-sa { opacity: 0; }
  .tl-sb, .tl-sb .tl-tag, .tl-sb .tl-fix { opacity: 1; }
}

/* What we do: centred arrows, photos behind the graphics and caption previews */
.tl-arr { width: 1em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tl-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.tl-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 20, 45, 0.62) 0%, rgba(0, 20, 45, 0.38) 50%, rgba(0, 20, 45, 0.66) 100%); }
.tl-prev > :not(.tl-img), .tl-frame > :not(.tl-img) { z-index: 1; }

/* What we do: own photos for the graphics and caption cards */
.im-tv { background-image: url("/assets/media/774ad9a7d5.jpg"); }
.im-mon { background-image: url("/assets/media/614b08c6cf.jpg"); }
.tl-prev.tl-tv, .tl-frame.tl-mon { aspect-ratio: 3 / 2; align-self: center; }
.tl-tv .tl-img::after { background: rgba(0, 20, 45, 0.42); }
.tl-mon .tl-img::after { background: rgba(0, 20, 45, 0.18); }
/* translated title sits over the infographic's own title */
.tl-tv .tl-ttl { left: 50%; right: auto; top: 21%; transform: translateX(-50%); width: max-content; max-width: 76%; background: rgba(0, 32, 70, 0.86); border-radius: 0.8cqw; padding: 0.5cqw 1.6cqw; }
.tl-tv .tl-ttl .tl-h { font-size: max(10px, 2cqw); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.tl-tv .tl-call { font-size: max(9.5px, 1.7cqw); background: none; padding: 0; gap: 0.7cqw; }
.tl-tv .tl-call .tl-swap > * { justify-self: start; background: var(--white); color: var(--navy); padding: 0.3em 0.8em; border-radius: 999px; white-space: nowrap; }
.tl-tv .tl-call i { box-shadow: 0 0 0 0.35cqw rgba(255, 91, 0, 0.35); }
.tl-c1 { left: 16%; top: 52%; }
.tl-c2 { left: 55%; top: 52%; }
@media (max-width: 700px) { .tl-c2 { display: none; } }
/* captions burned into the interview on the monitor */
.tl-mon .tl-cap { max-width: 52%; }
.tl-mon .tl-cap.tl-s1, .tl-mon .tl-cap.tl-s2 { bottom: 25%; font-size: max(9.5px, 1.75cqw); }
.tl-mon .tl-cap.tl-s3 { top: 36%; font-size: max(11px, 2.4cqw); }

/* page headers: angled bottom edge needs room */
.pagehead { padding-bottom: calc(clamp(44px, 6vw, 80px) + var(--slant)); }
/* service icons sit beside their heading */
.sv-h { display: flex; align-items: flex-start; gap: 14px; }
.sv-h svg { width: 34px; height: 34px; flex: none; color: var(--orange); margin-top: calc((1.15em - 34px) / 2); }

/* Services: source files -> deliverables */
.sv-io { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 0 14px; align-items: start; width: 100%; max-width: 34em; margin: 4px 0 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.sv-io h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--navy); }
.sv-io ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sv-io li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.35; color: var(--text); }
.sv-io li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sv-io .out li::before { background: var(--blue); }
.sv-arr { width: 26px; height: 26px; color: var(--blue); align-self: center; }

/* Home: how a project works */
.how-sec { padding-top: clamp(8px, 2vw, 24px); }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.how li { position: relative; padding-top: 62px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.how-ico { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 2px var(--orange); color: var(--navy); z-index: 1; }
.how-ico svg { width: 22px; height: 22px; overflow: visible; }
.how li:last-child .how-ico { background: var(--orange); }
.how li::after { content: ""; position: absolute; top: 21px; left: 52px; right: -22px; height: 2px; background: var(--line); transform-origin: left center; }
.how li:last-child::after { display: none; }
.how h3 { font-size: 18px; line-height: 1.25; }
.how p { font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) {
  .how { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .how li { padding: 0 0 26px 62px; min-height: 44px; }
  .how li::after { top: 52px; bottom: 4px; left: 21px; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .how li:last-child { padding-bottom: 0; }
  .how h3 { padding-top: 10px; }
}
/* plays once, step by step, when the strip scrolls into view */
.how.anim .how-ico { transform: scale(0.5); opacity: 0; }
.how.anim li::after { transform: scaleX(0); }
.how.anim h3, .how.anim p { opacity: 0; transform: translateY(8px); }
.how.anim.in .how-ico { animation: how-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 0.45s); }
.how.anim.in li::after { animation: how-line 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 0.45s + 0.25s); }
.how.anim.in h3, .how.anim.in p { animation: how-text 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i) * 0.45s + 0.12s); }
.how.anim.in p { animation-delay: calc(var(--i) * 0.45s + 0.2s); }
.how.anim.in li:nth-child(1) .mv { animation: how-up 0.7s ease-out both; animation-delay: 0.3s; }
.how.anim.in li:nth-child(2) .mv { animation: how-scan 0.9s ease-in-out both; animation-delay: 0.75s; }
.how.anim.in li:nth-child(3) .mv { animation: how-slide 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 1.2s; }
.how.anim.in li:nth-child(4) .mv { stroke-dasharray: 1; stroke-dashoffset: 1; animation: how-draw 0.5s ease-out forwards; animation-delay: 1.75s; }
.how.anim.in li:nth-child(5) .mv { animation: how-fly 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 2.1s; }
@keyframes how-pop { to { transform: none; opacity: 1; } }
@keyframes how-line { to { transform: none; } }
@keyframes how-text { to { opacity: 1; transform: none; } }
@keyframes how-up { 0% { transform: translateY(5px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes how-scan { 0% { transform: translateX(-3px); } 35% { transform: translateX(3px); } 70% { transform: translateX(-1.5px); } 100% { transform: none; } }
@keyframes how-slide { 0% { transform: translate(-6px, -7px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes how-draw { to { stroke-dashoffset: 0; } }
@keyframes how-fly { 0% { transform: translate(-8px, 8px) scale(0.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 900px) {
  .how.anim li::after { transform: scaleY(0); }
}

/* How a project works: very faint hexagon background, fading out at the edges */
.how-sec { position: relative; isolation: isolate; }
.how-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23002046' stroke-opacity='0.06' stroke-width='0.6'/%3E%3C/svg%3E"); background-size: 98px 175px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 55%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 75% 85% at 50% 55%, #000 30%, transparent 80%); }

/* Layout: Direction A. White page in one 1280px column, full-width colour bands (navy, pale grey, blue) between white sections. */
:root {
  color-scheme: light;
  --white: #ffffff;
  --navy: #002046;
  --blue: #00408c;
  --orange: #ff5b00;
  --orange-soft: #ff7c33;
  --band: #f3f6fa;
  --line: #dce2eb;
  --text: #4a5768;
  --nav: #3d4757;
  --on-navy: #bcc8d8;
  --stripe-a: #0b2e5c;
  --stripe-b: #062348;
  --jacket: #3366a3;
  --jacket-bg: #173a6b;
  --scene-soft: #24487c;
  --skin: #f3c9a6;
  --skin-shade: #e2b08a;
  --hair: #1d1d1b;
  --display: "Manrope", Helvetica, Arial, sans-serif;
  --sans: "Manrope", Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 4vw, 64px);
}
* { box-sizing: border-box; }
body { background: var(--white); color: var(--navy); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
.page { max-width: 1280px; margin-inline: auto; background: var(--white); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.015em; }
h3 { font-size: 21px; line-height: 1.22; letter-spacing: -0.01em; }
p { margin: 0; color: var(--text); }
a { color: var(--blue); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.btn { display: inline-block; background: var(--blue); color: var(--white); font: 600 16px var(--sans); padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; }
.btn.orange { background: var(--orange); color: var(--navy); }
.btn.line { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.logo { display: block; flex: none; }
.logo img { display: block; height: 100%; width: auto; }

header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px var(--pad); border-bottom: 1px solid var(--line); }
header.site .logo { height: clamp(38px, 4.4vw, 54px); flex: none; }
nav.main { display: flex; flex-wrap: wrap; gap: 8px clamp(14px, 2vw, 28px); font-size: 15px; font-weight: 500; flex: 1; min-width: 0; justify-content: center; }
nav.main a { color: var(--nav); padding-block: 4px; border-bottom: 2px solid transparent; }
nav.main a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--orange); }
header.site .btn { font-size: 15px; padding: 12px 22px; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--navy); cursor: pointer; }
.menu-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.menu-btn .x { display: none; }
.menu-btn[aria-expanded="true"] .x { display: inline; }
.menu-btn[aria-expanded="true"] .l1, .menu-btn[aria-expanded="true"] .l2, .menu-btn[aria-expanded="true"] .l3 { display: none; }


section.view { display: block; }
.sec { padding: clamp(52px, 6.5vw, 92px) var(--pad); display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.sec.band { background: var(--band); }
.sec.tight { padding-block: clamp(36px, 4.5vw, 52px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cl .wipe { position: absolute; left: 6%; right: 6%; top: 21%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; border-radius: 10px; border: 3px solid var(--white); box-shadow: 0 18px 40px -12px rgba(0, 32, 70, 0.45), 0 2px 6px rgba(0, 32, 70, 0.15); transform: rotate(-1.5deg); overflow: hidden; }
.cl .wipe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 20, 45, 0.55), rgba(0, 20, 45, 0.1) 60%); }
.cl .layer { position: absolute; inset: 0; }
.cl .layer.de { clip-path: inset(0 0 0 var(--pos)); }
.cl .layer.en { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cl .g-title { position: absolute; left: 5%; top: 8%; display: flex; flex-direction: column; color: var(--white); font-weight: 800; font-size: max(11px, 3.3cqw); line-height: 1.1; max-width: 46%; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.cl .g-title small { font-size: 0.5em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb27f; margin-bottom: 0.35em; }
.cl .g-call { position: absolute; display: flex; align-items: center; gap: 0.4em; font-size: max(9px, 1.9cqw); }
.cl .g-call i { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0.25em rgba(255, 91, 0, 0.3); flex: none; }
.cl .g-call b { background: var(--white); color: var(--navy); font-weight: 700; padding: 0.2em 0.6em; border-radius: 3px; white-space: nowrap; }
.cl .g-call.c1 { left: 63%; top: 17%; }
.cl .g-call.c2 { left: 7%; top: 52%; }
.cl .wipe .lt { left: auto; right: 5%; bottom: 8%; }
.cl .w-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; z-index: 2; }
.cl .w-knob { position: absolute; top: 50%; left: 50%; width: max(26px, 6cqw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--orange); border: 2px solid var(--white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.cl .w-knob::before, .cl .w-knob::after { content: ""; position: absolute; top: 50%; border: 0.32em solid transparent; transform: translateY(-50%); font-size: max(7px, 1.6cqw); }
.cl .w-knob::before { left: 14%; border-right-color: var(--white); border-left: 0; }
.cl .w-knob::after { right: 14%; border-left-color: var(--white); border-right: 0; }
.cl .w-tag { position: absolute; top: 4%; z-index: 2; font-size: max(9px, 1.8cqw); font-weight: 700; letter-spacing: 0.1em; padding: 0.2em 0.7em; border-radius: 999px; pointer-events: none; }
.cl .w-tag.l { left: auto; right: calc(100% - var(--pos) + 8px); background: rgba(0, 32, 70, 0.8); color: var(--white); }
.cl .w-tag.r { left: calc(var(--pos) + 8px); background: var(--orange); color: var(--navy); }
.cl .w-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; touch-action: pan-y; }
.cl .w-range:focus-visible + * { outline: none; }
.cl .wipe:has(.w-range:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.cs-list { gap: clamp(28px, 4vw, 48px); }
.study.cs { padding: clamp(24px, 3.4vw, 44px); gap: clamp(22px, 3vw, 32px); scroll-margin-top: 20px; }
.cs-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.study.cs:nth-child(even) .cs-head { order: 2; }
.cs-head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.cs-head .eyebrow { color: var(--blue); font-size: 12px; }
.cs-head h2 { font-size: clamp(26px, 3vw, 38px); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--band); border-radius: 999px; padding: 6px 14px 6px 8px; }
.cs-chip .ci { width: 24px; height: 24px; border-radius: 7px; background: var(--white); color: var(--blue); display: grid; place-items: center; }
.cs-chip .ci svg { width: 16px; height: 16px; }
.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 28px; }
.cs-facts div { border-top: 2px solid var(--blue); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-facts b { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.05; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; white-space: nowrap; }
.cs-facts span { font-size: 15px; color: var(--text); }
.cs-vis { position: relative; border-radius: 18px; background: linear-gradient(135deg, var(--stripe-a), var(--stripe-b)); color: var(--white); padding: clamp(18px, 2.4vw, 28px); min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
/* matrix */
.mx-top { display: flex; gap: 8px; font-size: 13px; font-weight: 700; color: var(--on-navy); padding-left: 28px; }
.mx-wrap { display: flex; gap: 10px; align-items: stretch; }
.mx-side { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; font-weight: 700; color: var(--on-navy); text-align: center; }
.mx { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; }
.mx i { aspect-ratio: 1; border-radius: 1.5px; background: #3f7fd0; opacity: 0.9; }
.mx i:nth-child(7n+3) { opacity: 0.7; }
.mx i:nth-child(11n+5) { opacity: 1; background: #5b97e0; }
.mx-foot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-navy); }
.mx-foot .dot { width: 10px; height: 10px; border-radius: 2px; background: #3f7fd0; }
.v-matrix.anim .mx i { opacity: 0; transform: scale(0.4); transition: opacity 0.35s ease, transform 0.35s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.v-matrix.anim.in .mx i { opacity: 0.9; transform: none; }
/* japanese */
.ja-frame { border-radius: 12px; background: linear-gradient(180deg, var(--scene-soft), var(--jacket-bg)); aspect-ratio: 16 / 7; display: flex; align-items: flex-end; justify-content: center; padding: 0 4% 6%; }
.ja-line { background: rgba(0, 0, 0, 0.78); color: var(--white); font-size: clamp(13px, 1.7vw, 18px); font-weight: 600; padding: 4px 12px; border-radius: 3px; text-align: center; }
.ja-line mark { background: none; color: #ffb27f; box-shadow: inset 0 -3px 0 var(--orange); }
.ja-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.ja-checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-width: 0; }
.ja-checks .ck, .tc-foot span::before { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); position: relative; flex: none; }
.ja-checks .ck::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ja-pass { align-self: flex-start; font-size: 13px; font-weight: 700; background: var(--white); color: var(--navy); padding: 5px 12px; border-radius: 999px; }
/* timecode */
.tc-label { font-size: 13px; font-weight: 700; color: var(--on-navy); text-transform: uppercase; letter-spacing: 0.12em; }
.tc-big { font-size: clamp(36px, 5.4vw, 64px); font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.tc-bars { display: flex; gap: 6px; }
.tc-bars span { flex: 1; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #3f7fd0 var(--w), rgba(255, 255, 255, 0.12) var(--w)); }
.tc-bars span:last-child { background: var(--orange); }
.tc-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tc-foot span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.tc-foot span::before { content: ""; width: 14px; height: 14px; }
.pagehead { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: var(--white); padding: clamp(44px, 6vw, 80px) var(--pad); display: flex; flex-direction: column; gap: 18px; }
.pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--slant) + 1px); background: var(--white); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; }
.pagehead p { color: var(--on-navy); font-size: 20px; max-width: 34em; }
.pagehead .eyebrow { color: var(--orange-soft); }

.trusted { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; }
.trusted .eyebrow { color: var(--nav); letter-spacing: 0.16em; white-space: nowrap; }
.trusted .names { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; flex: 1 1 300px; min-width: 0; }
.trusted .names img { display: block; flex: none; height: 20px; width: auto; max-width: none; }
.trusted .names img.tall { height: 44px; }
.trusted .names img.mid { height: 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card .bar { width: 38px; height: 4px; background: var(--orange); border-radius: 2px; }
.why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.why-lead { align-self: start; display: flex; flex-direction: column; gap: 16px; }
.why-lead p { font-size: 18px; max-width: 32ch; }
.why-photo { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 14px; margin-top: 8px; }
.why-stack { display: flex; flex-direction: column; }
.why-item { padding: 26px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.why-item:first-child { border-top: 0; padding-top: 4px; }
.why-item h3 { display: flex; align-items: flex-start; gap: 12px; }
.why-ico { width: 26px; height: 26px; flex: none; color: var(--blue); margin-top: calc((1.22em - 26px) / 2); }
.why-item p { padding-left: 38px; font-size: 17px; }
.ph { background-size: cover; background-position: center; background-color: var(--band); }
.ph-1 { background-image: url("/assets/media/1a8db62ed2.jpg"); }
.ph-2 { background-image: url("/assets/media/11e164db2d.jpg"); }
.ph-3 { background-image: url("/assets/media/c3f9e7e10b.jpg"); }
.card.has-img { padding: 0 0 26px; gap: 14px; overflow: hidden; }
.card.has-img > :not(.ph) { margin-inline: 28px; }
.card.has-img .ph { aspect-ratio: 16 / 10; width: 100%; }
.study .ph { aspect-ratio: 21 / 8; width: 100%; border-radius: 14px; }
.legal { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; }
.legal h2 { font-size: clamp(21px, 2.2vw, 26px); margin-top: 22px; }
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 17px; }
footer.site .legal-id { font-size: 14px; line-height: 1.6; color: var(--on-navy); opacity: 0.85; }
.sv-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sv-jump a { color: var(--white); font-size: 15px; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.sv-jump a:hover { background: rgba(255, 255, 255, 0.08); }
.sv-list { gap: 0; padding-block: clamp(20px, 3vw, 40px); }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
.sv-row:last-child { border-bottom: 0; }
.sv-row:nth-child(even) .sv-txt { order: 2; }
.sv-txt { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.sv-txt h2 { font-size: clamp(26px, 3vw, 36px); }
.sv-txt p { color: var(--text); font-size: 18px; max-width: 34em; }
.sv-more { font-weight: 700; color: var(--blue); font-size: 16px; }
.sv-vis { position: relative; border-radius: 20px; background: linear-gradient(135deg, var(--stripe-a), var(--stripe-b)); padding: clamp(18px, 2.4vw, 28px); min-width: 0; min-height: 280px; display: flex; flex-direction: column; justify-content: center; gap: 12px; color: var(--white); overflow: hidden; }
/* subtitles */
.v-subs .v-bar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--on-navy); font-weight: 600; }
.v-ok { background: rgba(255, 255, 255, 0.1); color: var(--white); padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.v-subs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-subs li { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 12px; background: rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 9px 12px; }
.v-subs li.on { background: var(--white); color: var(--navy); }
.v-subs .tc { font-size: 11.5px; font-weight: 600; color: var(--on-navy); font-variant-numeric: tabular-nums; }
.v-subs li.on .tc { color: var(--blue); }
.v-subs .ln { grid-column: 1; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.v-subs .ck { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); position: relative; }
.v-subs .ck::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* graphics */
.v-gfx { gap: 10px; }
.g-card { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px 14px; }
.g-lang { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.g-lang.on { background: var(--orange); color: var(--navy); }
.g-lt { display: flex; flex-direction: column; background: var(--white); color: var(--navy); border-left: 4px solid var(--orange); border-radius: 4px; padding: 6px 12px; min-width: 0; }
.g-lt b { font-size: 15px; font-weight: 800; }
.g-lt i { font-style: normal; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.g-arrow { align-self: center; width: 2px; height: 14px; background: rgba(255, 255, 255, 0.3); position: relative; }
.g-arrow::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent; border-top-color: rgba(255, 255, 255, 0.3); border-bottom: 0; }
/* burn-in */
.b-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, var(--scene-soft), var(--jacket-bg)); }
.b-sun { position: absolute; right: 14%; top: 16%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.b-hill { position: absolute; left: -10%; right: -10%; bottom: -40%; height: 75%; border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, 0.1); }
.b-cap { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); width: max-content; max-width: 90%; text-align: center; font-size: clamp(12px, 1.5vw, 16px); font-weight: 800; color: #ffe066; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 6px rgba(0, 0, 0, 0.5); }
.b-chips, .d-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.b-chips span, .d-tags span { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
/* dubbing */
.v-dub { gap: 14px; }
.d-row { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 14px; }
.d-lang { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.d-lang.on { background: var(--orange); color: var(--navy); }
.d-wave { flex: 1; height: 44px; min-width: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.75) 0 3px, transparent 3px 7px); -webkit-mask: radial-gradient(ellipse 60% 50% at 30% 50%, #000 40%, transparent 72%), radial-gradient(ellipse 45% 40% at 75% 50%, #000 35%, transparent 70%); mask: radial-gradient(ellipse 60% 50% at 30% 50%, #000 40%, transparent 72%), radial-gradient(ellipse 45% 40% at 75% 50%, #000 35%, transparent 70%); }
.d-wave.alt { background: repeating-linear-gradient(90deg, #ff9a5c 0 3px, transparent 3px 7px); -webkit-mask: radial-gradient(ellipse 55% 50% at 35% 50%, #000 40%, transparent 72%), radial-gradient(ellipse 40% 45% at 78% 50%, #000 35%, transparent 70%); mask: radial-gradient(ellipse 55% 50% at 35% 50%, #000 40%, transparent 72%), radial-gradient(ellipse 40% 45% at 78% 50%, #000 35%, transparent 70%); }
.d-tags::before { content: "Checked by us:"; flex-basis: 100%; font-size: 13px; color: var(--on-navy); font-weight: 600; }
/* pricing band */
.sv-price { background: var(--blue); color: var(--white); padding: clamp(44px, 6vw, 80px) var(--pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.sv-price > div { display: flex; flex-direction: column; gap: 14px; flex: 1 1 420px; min-width: 0; }
.sv-price p { color: var(--on-navy); font-size: 18px; max-width: 40em; }
.sv-vis.cl { background-color: var(--band); aspect-ratio: 5 / 4; min-height: 0; padding: 0; display: block; container-type: inline-size; color: var(--white); }
.im-pres { background-image: url("/assets/media/50901e7a6f.jpg"); }
.im-eng { background-image: url("/assets/media/613a76d39f.jpg"); }
.im-team { background-image: url("/assets/media/ee3f63852f.jpg"); }
.im-teamw { background-image: url("/assets/media/033ccae98e.jpg"); }
.im-voice { background-image: url("/assets/media/97938140dc.jpg"); }
.cl .fr, .cl .phone { position: absolute; background-size: cover; background-position: center; border-radius: 10px; border: 3px solid var(--white); box-shadow: 0 18px 40px -12px rgba(0, 32, 70, 0.45), 0 2px 6px rgba(0, 32, 70, 0.15); transform: rotate(var(--r, 0deg)); overflow: hidden; }
.cl .fr { aspect-ratio: 16 / 9; }
.cl .f-a { width: 60%; top: 7%; right: 6%; }
.cl .f-b { width: 64%; top: 22%; left: 5%; }
.cl .f-c { width: 68%; bottom: 8%; right: 5%; }
.cl .f-d { width: 84%; top: 9%; left: 8%; }
.cl .phone { aspect-ratio: 9 / 16; width: 34%; right: 9%; top: 12%; border-width: 5px; border-color: var(--navy); border-radius: 18px; }
.cl .pill { position: absolute; top: 6%; left: 4%; font-size: max(9px, 2.1cqw); font-weight: 700; letter-spacing: 0.1em; padding: 0.2em 0.7em; border-radius: 999px; background: rgba(0, 32, 70, 0.75); color: var(--white); }
.cl .pill.on { background: var(--orange); color: var(--navy); }
.cl .cap { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: max-content; max-width: 90%; text-align: center; background: rgba(0, 0, 0, 0.78); color: var(--white); font-size: max(9px, 2.3cqw); font-weight: 600; line-height: 1.3; padding: 0.25em 0.6em; border-radius: 3px; }
.cl .lt { position: absolute; left: 6%; bottom: 10%; display: flex; flex-direction: column; background: var(--white); color: var(--navy); border-left: 4px solid var(--orange); border-radius: 3px; padding: 0.35em 0.8em; font-size: max(10px, 2.4cqw); line-height: 1.25; }
.cl .lt b { font-weight: 800; }
.cl .lt i { font-style: normal; color: var(--text); font-size: 0.85em; }
.cl .pcap { position: absolute; left: 8%; right: 8%; bottom: 14%; text-align: center; font-size: max(11px, 3.4cqw); font-weight: 800; line-height: 1.15; color: var(--white); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 8px rgba(0, 0, 0, 0.5); }
.cl .pcap em { font-style: normal; background: var(--orange); padding: 0 0.15em; border-radius: 3px; text-shadow: none; }
.cl .float { position: absolute; z-index: 2; box-shadow: 0 12px 28px -10px rgba(0, 32, 70, 0.45); }
.cl .qc, .cl .ae { top: 5%; left: 6%; background: var(--white); color: var(--navy); font-size: max(11px, 2.4cqw); font-weight: 700; padding: 0.5em 0.9em; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.5em; }
.cl .ae { top: 3%; left: 6%; }
.cl .qc i { width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--orange); position: relative; flex: none; }
.cl .qc i::after { content: ""; position: absolute; left: 0.4em; top: 0.2em; width: 0.25em; height: 0.5em; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cl .wave { left: 14%; right: 4%; bottom: 6%; background: var(--navy); border-radius: 14px; padding: 3% 4%; display: flex; flex-direction: column; gap: 8px; }
.cl .wave .d-row { padding: 6px 10px; }
.cl .chips { left: 5%; bottom: 7%; max-width: 50%; display: flex; flex-wrap: wrap; gap: 0.45em; box-shadow: none; font-size: max(11px, 2.2cqw); }
.cl .chips span { background: var(--white); color: var(--navy); font-weight: 700; padding: 0.4em 0.9em; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0, 32, 70, 0.45); }
.cl.stack .f-a { z-index: 3; }
.cl.stack .f-b { z-index: 2; }
.cl.stack .f-c { z-index: 1; }
.cl.stack .qc { z-index: 4; }
.cl.stack .f-a { top: 3%; }
.cl.stack .f-c { bottom: 4%; }
.cl.stack .f-a .pill, .cl.stack .f-c .pill { left: auto; right: 4%; }
.cl .wave .d-wave { height: max(18px, 5cqw); }
.cl .wave .d-tags span { font-size: max(10px, 2cqw); }
.cl .wave .d-tags::before { font-size: max(10px, 2cqw); }
.cl .wave .d-wave { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 40' preserveAspectRatio='none'><g fill='rgba%28255%2C255%2C255%2C0.8%29'><rect x='0' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='4' y='3.5' width='2.4' height='33' rx='1.2'/><rect x='8' y='3.5' width='2.4' height='33' rx='1.2'/><rect x='12' y='9.0' width='2.4' height='22' rx='1.2'/><rect x='16' y='6.5' width='2.4' height='27' rx='1.2'/><rect x='20' y='7.0' width='2.4' height='26' rx='1.2'/><rect x='24' y='6.0' width='2.4' height='28' rx='1.2'/><rect x='28' y='5.5' width='2.4' height='29' rx='1.2'/><rect x='32' y='12.5' width='2.4' height='15' rx='1.2'/><rect x='36' y='14.0' width='2.4' height='12' rx='1.2'/><rect x='40' y='10.5' width='2.4' height='19' rx='1.2'/><rect x='44' y='15.0' width='2.4' height='10' rx='1.2'/><rect x='48' y='14.5' width='2.4' height='11' rx='1.2'/><rect x='52' y='16.0' width='2.4' height='8' rx='1.2'/><rect x='56' y='12.0' width='2.4' height='16' rx='1.2'/><rect x='60' y='8.5' width='2.4' height='23' rx='1.2'/><rect x='64' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='68' y='3.5' width='2.4' height='33' rx='1.2'/><rect x='72' y='3.0' width='2.4' height='34' rx='1.2'/><rect x='76' y='11.5' width='2.4' height='17' rx='1.2'/><rect x='80' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='84' y='6.0' width='2.4' height='28' rx='1.2'/><rect x='88' y='2.0' width='2.4' height='36' rx='1.2'/><rect x='92' y='8.5' width='2.4' height='23' rx='1.2'/><rect x='96' y='10.5' width='2.4' height='19' rx='1.2'/><rect x='100' y='10.0' width='2.4' height='20' rx='1.2'/><rect x='104' y='14.0' width='2.4' height='12' rx='1.2'/><rect x='108' y='14.0' width='2.4' height='12' rx='1.2'/><rect x='112' y='14.5' width='2.4' height='11' rx='1.2'/><rect x='116' y='16.0' width='2.4' height='8' rx='1.2'/><rect x='120' y='15.0' width='2.4' height='10' rx='1.2'/><rect x='124' y='13.5' width='2.4' height='13' rx='1.2'/><rect x='128' y='12.5' width='2.4' height='15' rx='1.2'/><rect x='132' y='9.5' width='2.4' height='21' rx='1.2'/><rect x='136' y='10.0' width='2.4' height='20' rx='1.2'/><rect x='140' y='12.0' width='2.4' height='16' rx='1.2'/><rect x='144' y='3.0' width='2.4' height='34' rx='1.2'/><rect x='148' y='5.5' width='2.4' height='29' rx='1.2'/><rect x='152' y='5.0' width='2.4' height='30' rx='1.2'/><rect x='156' y='9.5' width='2.4' height='21' rx='1.2'/><rect x='160' y='2.5' width='2.4' height='35' rx='1.2'/><rect x='164' y='4.5' width='2.4' height='31' rx='1.2'/><rect x='168' y='12.0' width='2.4' height='16' rx='1.2'/><rect x='172' y='11.5' width='2.4' height='17' rx='1.2'/><rect x='176' y='10.5' width='2.4' height='19' rx='1.2'/><rect x='180' y='12.5' width='2.4' height='15' rx='1.2'/><rect x='184' y='15.0' width='2.4' height='10' rx='1.2'/><rect x='188' y='14.5' width='2.4' height='11' rx='1.2'/><rect x='192' y='10.0' width='2.4' height='20' rx='1.2'/><rect x='196' y='9.5' width='2.4' height='21' rx='1.2'/><rect x='200' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='204' y='7.5' width='2.4' height='25' rx='1.2'/><rect x='208' y='3.5' width='2.4' height='33' rx='1.2'/><rect x='212' y='3.0' width='2.4' height='34' rx='1.2'/><rect x='216' y='6.0' width='2.4' height='28' rx='1.2'/><rect x='220' y='5.5' width='2.4' height='29' rx='1.2'/></g></svg>") center / 100% 100% no-repeat; -webkit-mask: none; mask: none; }
.cl .wave .d-wave.alt { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 40' preserveAspectRatio='none'><g fill='%23ff7c33'><rect x='0' y='12.0' width='2.4' height='16' rx='1.2'/><rect x='4' y='11.5' width='2.4' height='17' rx='1.2'/><rect x='8' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='12' y='15.0' width='2.4' height='10' rx='1.2'/><rect x='16' y='13.0' width='2.4' height='14' rx='1.2'/><rect x='20' y='16.5' width='2.4' height='7' rx='1.2'/><rect x='24' y='15.5' width='2.4' height='9' rx='1.2'/><rect x='28' y='11.5' width='2.4' height='17' rx='1.2'/><rect x='32' y='8.0' width='2.4' height='24' rx='1.2'/><rect x='36' y='7.5' width='2.4' height='25' rx='1.2'/><rect x='40' y='7.0' width='2.4' height='26' rx='1.2'/><rect x='44' y='7.5' width='2.4' height='25' rx='1.2'/><rect x='48' y='7.0' width='2.4' height='26' rx='1.2'/><rect x='52' y='4.5' width='2.4' height='31' rx='1.2'/><rect x='56' y='3.5' width='2.4' height='33' rx='1.2'/><rect x='60' y='2.5' width='2.4' height='35' rx='1.2'/><rect x='64' y='6.5' width='2.4' height='27' rx='1.2'/><rect x='68' y='8.5' width='2.4' height='23' rx='1.2'/><rect x='72' y='6.0' width='2.4' height='28' rx='1.2'/><rect x='76' y='13.0' width='2.4' height='14' rx='1.2'/><rect x='80' y='13.5' width='2.4' height='13' rx='1.2'/><rect x='84' y='13.5' width='2.4' height='13' rx='1.2'/><rect x='88' y='17.0' width='2.4' height='6' rx='1.2'/><rect x='92' y='13.0' width='2.4' height='14' rx='1.2'/><rect x='96' y='14.0' width='2.4' height='12' rx='1.2'/><rect x='100' y='8.0' width='2.4' height='24' rx='1.2'/><rect x='104' y='9.5' width='2.4' height='21' rx='1.2'/><rect x='108' y='12.5' width='2.4' height='15' rx='1.2'/><rect x='112' y='5.0' width='2.4' height='30' rx='1.2'/><rect x='116' y='6.5' width='2.4' height='27' rx='1.2'/><rect x='120' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='124' y='4.5' width='2.4' height='31' rx='1.2'/><rect x='128' y='4.0' width='2.4' height='32' rx='1.2'/><rect x='132' y='4.5' width='2.4' height='31' rx='1.2'/><rect x='136' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='140' y='7.0' width='2.4' height='26' rx='1.2'/><rect x='144' y='8.5' width='2.4' height='23' rx='1.2'/><rect x='148' y='14.0' width='2.4' height='12' rx='1.2'/><rect x='152' y='14.5' width='2.4' height='11' rx='1.2'/><rect x='156' y='16.0' width='2.4' height='8' rx='1.2'/><rect x='160' y='12.5' width='2.4' height='15' rx='1.2'/><rect x='164' y='12.5' width='2.4' height='15' rx='1.2'/><rect x='168' y='8.5' width='2.4' height='23' rx='1.2'/><rect x='172' y='11.0' width='2.4' height='18' rx='1.2'/><rect x='176' y='9.0' width='2.4' height='22' rx='1.2'/><rect x='180' y='11.5' width='2.4' height='17' rx='1.2'/><rect x='184' y='8.0' width='2.4' height='24' rx='1.2'/><rect x='188' y='7.5' width='2.4' height='25' rx='1.2'/><rect x='192' y='7.5' width='2.4' height='25' rx='1.2'/><rect x='196' y='2.0' width='2.4' height='36' rx='1.2'/><rect x='200' y='8.5' width='2.4' height='23' rx='1.2'/><rect x='204' y='7.5' width='2.4' height='25' rx='1.2'/><rect x='208' y='5.0' width='2.4' height='30' rx='1.2'/><rect x='212' y='12.0' width='2.4' height='16' rx='1.2'/><rect x='216' y='14.0' width='2.4' height='12' rx='1.2'/><rect x='220' y='15.0' width='2.4' height='10' rx='1.2'/></g></svg>"); }
.cl.dub .f-d { width: 80%; top: 5%; left: 5%; }
.cl.dub .wave { left: 40%; right: 3%; bottom: 4%; padding: 3% 3.5%; gap: 6px; }
.cl.dub .wave .d-tags { gap: 5px; }
.cl.dub .wave .d-tags span { padding: 4px 9px; }

.sv-nums { background: var(--band); padding: clamp(44px, 6vw, 80px) var(--pad); display: flex; flex-direction: column; gap: 24px; }
.sv-nums .nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(28px, 5vw, 72px); }
.sv-nums a { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--blue); padding-top: 18px; color: var(--text); min-width: 0; }
.sv-nums b { white-space: nowrap; font-size: clamp(40px, 5.2vw, 68px); line-height: 1; letter-spacing: -0.03em; font-weight: 800; color: var(--blue); }
.sv-nums span { font-size: 18px; max-width: 26em; }
.sv-nums a:hover b { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.sv-vis.cl.hex, .sv-vis.cl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23002046' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"); background-size: 42px 75px; background-position: center; }
.card p { font-size: 16px; }
.card .more { font-weight: 600; font-size: 15px; margin-top: auto; padding-top: 8px; }
a.card { color: var(--navy); }
a.card .more { color: var(--blue); }
.quotes { background: var(--blue); color: var(--white); padding: clamp(52px, 6vw, 84px) var(--pad); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
blockquote { margin: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
blockquote .eyebrow { color: var(--white); opacity: 0.85; font-size: 12px; letter-spacing: 0.16em; }
blockquote p { color: var(--white); font-size: clamp(20px, 2.2vw, 25px); line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; }
blockquote footer { font-size: 15px; opacity: 0.9; }
.closing { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.email { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--navy); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.email:hover { text-decoration-color: var(--orange); }

.feature { background: var(--navy); color: var(--white); border-radius: 22px; padding: clamp(28px, 4vw, 48px) clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.feature p { color: var(--on-navy); font-size: 18px; max-width: 38em; }
.study { border: 1px solid var(--line); border-radius: 20px; padding: clamp(26px, 3.6vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.study dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 14px 32px; }
.study dt { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); padding-top: 5px; }
.study dd { margin: 0; color: var(--text); max-width: 62ch; }
.todo { display: inline-block; font-size: 13px; line-height: 1.5; color: var(--orange); border: 1px dashed var(--orange); border-radius: 4px; padding: 0 6px; }

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.contact p { font-size: 18px; max-width: 26em; }
form { background: var(--band); border-radius: 20px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--nav); }
input, textarea { font: 400 16px var(--sans); color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; }
input { height: 50px; }
textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
form .btn { align-self: flex-start; }
.dd { position: relative; }
.dd summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; padding: 0 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: 400 16px var(--sans); color: var(--navy); }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--nav); border-bottom: 2px solid var(--nav); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.dd[open] summary { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.dd[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.dd summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.dd .dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dd .dd-val.empty { color: #687485; }
.dd-list { background: var(--white); border: 1px solid var(--line); border-top: 1px solid var(--band); border-radius: 0 0 10px 10px; display: flex; flex-direction: column; }
.dd-opt { flex-direction: row; align-items: center; gap: 0; cursor: pointer; padding: 0; border-top: 1px solid var(--band); }
.dd-opt:first-child { border-top: 0; }
.dd-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dd-opt span { flex: 1; display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 16px; font-weight: 500; color: var(--navy); }
.dd-opt span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #b9c3d1; background: var(--white); flex: none; }
.dd-opt:hover span { background: var(--band); }
.dd-opt input:checked + span::before { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--orange); }
.dd-opt input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 6px; }
.c-li { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-weight: 700; font-size: 16px; color: var(--blue); }
.c-li .li-ico { width: 26px; height: 26px; border-radius: 5px; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.c-li:hover { color: var(--navy); }
.c-quote { margin: 12px 0 0; padding: 24px 24px 22px; border-left: 4px solid var(--orange); background: var(--band); border-radius: 0 14px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.c-quote blockquote { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--navy); }
.c-quote figcaption { font-size: 14px; color: var(--text); }
.c-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--line); }
.c-logos .eyebrow { color: var(--nav); font-size: 12px; }
.c-names { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; flex: 1 1 300px; min-width: 0; }
.c-names img { display: block; height: 16px; width: auto; max-width: none; opacity: 0.85; }
.c-names img.tall { height: 32px; }
.c-names img.mid { height: 22px; }

.contact { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.opt { font-weight: 500; color: var(--text); opacity: 0.75; }
.f-svc { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.f-svc legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--nav); }
input::placeholder, textarea::placeholder { color: #687485; }

form .sent { color: var(--navy); font-weight: 600; font-size: 16px; max-width: none; outline: none; }
.f-err { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); }
.f-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: var(--navy); font-size: 12px; font-weight: 800; transform: translateY(3px); }
.f-err[hidden] { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
form button[disabled] { opacity: 0.6; cursor: default; }
form .note { font-size: 13px; }
.emailrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.copybtn { font: 500 13px var(--sans); color: var(--nav); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; cursor: pointer; }

footer.site { background: var(--navy); color: var(--white); padding: clamp(44px, 6vw, 68px) var(--pad) 36px; display: flex; flex-direction: column; gap: 44px; }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(28px, 4vw, 48px); }
footer.site .logo { height: 40px; }
footer.site .col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; min-width: 0; }
footer.site .col a { color: var(--on-navy); }
footer.site .eyebrow { color: var(--orange-soft); font-size: 12px; letter-spacing: 0.16em; }
footer.site .base { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 22px; font-size: 14px; color: var(--on-navy); }
footer.site .todo { color: var(--orange-soft); border-color: var(--orange-soft); }

@media (max-width: 1020px) {
  .trusted { flex-direction: column; align-items: center; text-align: center; }
  .trusted .names { flex: none; justify-content: center; gap: 22px 40px; max-width: 560px; }
}
@media (max-width: 700px) {
  .why { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cs-top { grid-template-columns: minmax(0, 1fr); }
  .study.cs:nth-child(even) .cs-head { order: 0; }
  .ja-checks { grid-template-columns: minmax(0, 1fr); }
  .contact, .f-row { grid-template-columns: minmax(0, 1fr); }
  .contact { gap: 24px; }
  .contact > div:first-child { display: contents; }
  .contact > div:first-child > * { order: 3; }
  .contact > div:first-child > p:first-child, .contact > div:first-child > .emailrow { order: 1; }
  .contact > div:last-child { order: 2; margin-block: 8px 16px; }
  .sv-row { grid-template-columns: minmax(0, 1fr); }
  .sv-row:nth-child(even) .sv-txt { order: 0; }
  .sv-vis { min-height: 0; }
  .sv-nums .nums { grid-template-columns: minmax(0, 1fr); }
  .grid.two, .quotes, .study dl { grid-template-columns: minmax(0, 1fr); }
  header.site { flex-wrap: wrap; gap: 0 10px; padding-block: 14px; }
  header.site .logo { margin-right: auto; }
  header.site .btn { padding: 11px 16px; font-size: 14px; }
  .menu-btn { display: inline-flex; }
  nav.main { order: 3; flex: 0 0 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; font-size: 17px; overflow: hidden; max-height: 0; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); border-top: 1px solid transparent; transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.22s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
  header.site.open nav.main { max-height: 320px; margin-top: 14px; opacity: 1; visibility: visible; transform: none; border-top-color: var(--line); transition-delay: 0s; }

  nav.main a { padding: 15px 4px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; padding-left: 12px; }
  nav.main a[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--orange); font-weight: 700; }
  .trusted { flex-direction: column; align-items: center; text-align: center; }
  .trusted .names { flex: none; justify-content: center; gap: 22px 32px; }
}
@media (prefers-reduced-motion: reduce) { nav.main { transition: none !important; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.f-fail { color: var(--navy); font-weight: 600; font-size: 15px; }
.f-fail a { text-decoration: underline; }

.article { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--pad) clamp(56px, 7vw, 96px); }
.article .meta { color: var(--text); font-size: 15px; margin: 14px 0 0; }
.article h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; }
.article .lead { font-size: 20px; color: var(--text); margin-top: 16px; }
.prose { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 18px; }
.prose h3 { font-size: 20px; margin-top: 8px; }
.prose p, .prose li { font-size: 18px; line-height: 1.7; color: var(--text); }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose figure { margin: 8px 0; }
.prose img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.prose figcaption { font-size: 14px; color: var(--text); margin-top: 8px; }
.prose .callout { background: var(--band); border-radius: 14px; padding: 20px 22px; }
.prose .callout p { color: var(--navy); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.cmp-wrap { overflow-x: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cmp th, .cmp td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); color: var(--navy); }
.cmp thead th { background: var(--navy); color: var(--white); font-weight: 700; }
.cmp tbody th { font-weight: 600; background: var(--band); }
.cmp .yes { color: var(--blue); font-weight: 700; }
.cmp .no { color: #687485; }
.back { display: inline-block; margin-top: 40px; font-weight: 700; }
/* converter */
.tool { margin-top: 32px; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.tool-controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.tool-check { display: flex; flex-direction: row; gap: 10px; align-items: center; font-weight: 600; font-size: 16px; color: var(--navy); }
.tool label.btn { flex-direction: row; font-size: 16px; }
.tool-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.tool-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tool .btn { position: relative; }
.tool .btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn.light { background: var(--band); color: var(--navy); }
.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 36px 20px; text-align: center; color: var(--text); background: var(--band); transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--blue); background: #e6eefa; color: var(--navy); }
.tool-results { display: flex; flex-direction: column; gap: 12px; }
.tool-results .bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-results h2 { font-size: 20px; }
.tool table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tool th, .tool td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); color: var(--navy); overflow-wrap: anywhere; }
.tool th { color: var(--text); font-weight: 600; }
.tool td button { font: 700 14px var(--sans); color: var(--blue); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline; }
.btn[disabled] { opacity: 0.5; cursor: default; }