/* ==========================================================================================
   DBWorks — home.css  (homepage only: "The Lens")

   Loaded only on the homepage (EN /en/ and KO /). Header, dropdowns, footer and every subpage
   come from site.css unchanged.

   Palette — taken from the DBWorks logo, not from a trend:
     Paper      #f5f4f0  warm off-white, sits beside the emblem's warm black instead of clinical #fff
     Ink        #0f1114  emblem black (#11110d) nudged cool so it pairs with the navy
     Night      #0a1a2f  the wordmark navy; same colour as the site footer, so dark bands flow into it
     Lens       #4475b1  emblem blue, used for large shapes and accents on dark
     Lens text  #2f5e9e  a darker step of the emblem blue that passes WCAG AA as text on Paper
     Deep       #133f77  the emblem's shadow blue
     Stone      #66665f  secondary text on Paper (AA)
   Type: "DBW Serif" (Noto Serif CJK KR: its Latin is Source Serif, its Hangul is the matching Myeongjo),
   used for display only, echoing the serif wordmark. Body text stays Inter / Noto Sans KR. */

/* Latin half (~24 KB) and Hangul half (~58 KB, only the syllables used on the homepage). The browser
   downloads the Hangul file only on the Korean page. Syllables added later fall back to the system
   Myeongjo (Noto Serif KR / AppleMyungjo / Batang); re-run the subset step in README to include them. */
@font-face { font-family: "DBW Serif"; src: url("/fonts/DBWSerif-Regular.woff") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+0000-2FFF; }
@font-face { font-family: "DBW Serif"; src: url("/fonts/DBWSerif-Medium.woff") format("woff"); font-weight: 500; font-display: swap; unicode-range: U+0000-2FFF; }
@font-face { font-family: "DBW Serif"; src: url("/fonts/DBWSerif-KR-Regular.woff?v=4") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+3000-303F, U+3130-318F, U+AC00-D7AF, U+FF01-FF60; }
@font-face { font-family: "DBW Serif"; src: url("/fonts/DBWSerif-KR-Medium.woff?v=4") format("woff"); font-weight: 500; font-display: swap; unicode-range: U+3000-303F, U+3130-318F, U+AC00-D7AF, U+FF01-FF60; }

.is-home {
  --lx-paper: #f5f4f0;
  --lx-paper-2: #ecebe5;
  --lx-ink: #0f1114;
  --lx-night: #0a1a2f;
  --lx-lens: #4475b1;
  --lx-lens-text: #2f5e9e;
  --lx-deep: #133f77;
  --lx-stone: #66665f;
  --lx-rule: rgb(15 17 20 / .14);
  --lx-rule-dark: rgb(255 255 255 / .16);
  --lx-serif: "DBW Serif", "Noto Serif KR", "AppleMyungjo", "Batang", Georgia, "Times New Roman", serif;
  --lx-ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--lx-paper);
}
.is-home .mainbar { background: var(--lx-paper); border-bottom-color: var(--lx-rule); }
.lx { color: var(--lx-ink); background: var(--lx-paper); overflow-x: clip; }
.lx ::selection { background: var(--lx-lens); color: #fff; }

/* Lenis (from lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- shared bits ---------- */
.lx-kicker, .lx-label { margin: 0 0 1.75rem; font: 600 .78rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lx-lens-text); }
.lx-h2 { margin: 0; font: 500 clamp(2.4rem, 1.4rem + 3.6vw, 5rem)/1.02 var(--lx-serif); letter-spacing: -.025em; color: var(--lx-ink); }
.lx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.75rem; }

.lx-magnet { display: inline-block; }
.lx-btn { position: relative; display: inline-flex; align-items: center; gap: 0.875rem; min-height: 3.625rem; padding: 0 1.75rem; border-radius: 62.4375rem;
  background: var(--lx-ink); color: #fff; font-weight: 600; letter-spacing: -.005em; overflow: hidden; isolation: isolate; transition: color .35s; }
.lx-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lx-lens);
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .6s var(--lx-ease); }
.lx-btn svg { width: 1.125rem; height: 1.125rem; transition: transform .5s var(--lx-ease); }
@media (hover: hover) { .lx-btn:hover::before { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); } .lx-btn:hover svg { transform: translateX(4px); } }
.lx-btn:active { scale: .98; }
.lx-btn--light { background: #fff; color: var(--lx-night); }
@media (hover: hover) { .lx-btn--light:hover { color: #fff; } }

.lx-textlink { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-weight: 600; color: var(--lx-ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: background-size .5s var(--lx-ease); }
.lx-textlink svg { width: 1.0625rem; height: 1.0625rem; transition: transform .5s var(--lx-ease); }
@media (hover: hover) { .lx-textlink:hover { background-size: calc(100% - 1.6875rem) 1px; } .lx-textlink:hover svg { transform: translateX(4px); } }
.lx-textlink--light { color: #fff; }

/* grain (React Bits "Noise", ported): one fixed layer over the whole homepage, so sections never show a seam */
.lx-grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055; mix-blend-mode: multiply;
  background-image: var(--lx-grain, none); background-size: 16rem 16rem; background-position: var(--gx, 0) var(--gy, 0); }

/* SplitText line masks: room for descenders (g, y) and Hangul so nothing is clipped */
.lx-title > div, .lx-h2 > div, .lx-cta__title > div { padding-bottom: .16em; margin-bottom: -.16em; }

/* ---------- 1. hero ---------- */
.lx-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  padding-top: calc(var(--mainbar-h) + clamp(2.5rem, 7vh, 6rem)); }
.lx-hero__art { position: absolute; z-index: 0; aspect-ratio: 1; pointer-events: none; }
/* Desktop & large tablets: the lens sits in its own column beside the text. It is centred on the text block
   (not on the window), so resizing the window height never moves it up or down relative to the headline,
   and the column guarantees it never overlaps the text. It bleeds a little towards the right edge. */
@media (min-width: 900px) {
  .lx-hero__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(1.5rem, 3.5vw, 4rem); }
  .lx-hero__text { position: relative; z-index: 2; }
  .lx-hero__art { position: relative; z-index: 0; justify-self: start;
    width: min(51.25rem, calc(100% + max(var(--gutter), (100vw - var(--max)) / 2) * .8 + 4vw)); }
  .lx-lede { max-width: 31em; }
}
.lx-lens { width: 100%; height: 100%; overflow: visible; }
.lx-arc { fill: none; stroke: var(--lx-ink); stroke-opacity: .16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lx-arc--hl { stroke: var(--lx-lens); stroke-opacity: .7; }
.lx-form--crescent { fill: var(--lx-deep); }
.lx-form--d { fill: var(--lx-lens); }
.lx-packet { fill: var(--lx-lens); }
.lx-hero__inner { position: relative; z-index: 2; align-self: center; }
.lx-eyebrow { display: flex; align-items: center; gap: 0.875rem; margin: 0 0 clamp(1.5rem, 4vh, 2.75rem); font-size: .875rem; color: var(--lx-stone); }
.lx-eyebrow__rule { width: 2.75rem; height: 1px; background: currentColor; }
.lx-title { margin: 0; font: 500 clamp(2.9rem, 1.2rem + 5vw, 7rem)/.98 var(--lx-serif); letter-spacing: -.035em; color: var(--lx-ink); text-wrap: balance; }
.lx-hero__foot { display: grid; justify-items: start; gap: 1.75rem; margin-top: clamp(1.75rem, 4.5vh, 3.25rem); }
.lx-lede { margin: 0; max-width: 34em; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--lx-stone); }
.lx-hero__meta { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.5rem; align-items: end;
  padding-block: 1.75rem clamp(1.5rem, 4vh, 2.5rem); margin-top: clamp(2.5rem, 6vh, 4.5rem); }
.lx-hero__meta::before { content: ""; position: absolute; inset: 0 var(--gutter) auto; height: 1px; background: var(--lx-rule); transform-origin: left; }
.lx-hero__meta dl { margin: 0; }
.lx-hero__meta dt { font: 600 .72rem/1 var(--font-text); letter-spacing: .14em; color: var(--lx-lens-text); margin-bottom: 0.625rem; }
.lx-hero__meta dd { margin: 0; font-size: .9rem; color: var(--lx-ink); }
.lx-cue { display: inline-flex; align-items: center; gap: 0.75rem; font-size: .85rem; color: var(--lx-stone); min-height: 2.75rem; }
.lx-cue i { position: relative; width: 1px; height: 2.25rem; background: var(--lx-rule); overflow: hidden; }
.lx-cue i::after { content: ""; position: absolute; inset: 0; background: var(--lx-ink); animation: lx-cue 2.2s var(--lx-ease) infinite; }
@keyframes lx-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* intro: hidden until home.js plays it. Safety net: shown after 3s if scripts never run. */
.js .is-home [data-intro], .js .is-home .lx-title, .js .is-home .lx-lens { visibility: hidden; animation: lx-safety 0s 3s forwards; }
.lx-ready .is-home [data-intro], .lx-ready .is-home .lx-title, .lx-ready .is-home .lx-lens, .lx-static .is-home [data-intro], .lx-static .is-home .lx-title, .lx-static .is-home .lx-lens { visibility: visible; animation: none; }
@keyframes lx-safety { to { visibility: visible; } }

/* ---------- 2. aperture ---------- */
.lx-aperture { position: relative; background: var(--lx-paper); }
.lx-aperture__stage { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.lx-ap-cap { position: absolute; top: 50%; margin: 0; translate: 0 -50%; font: 600 .78rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lx-stone); }
.lx-ap-cap--l { right: calc(50% + 15vw); }
.lx-ap-cap--r { left: calc(50% + 15vw); }
.lx-static .lx-ap-cap { display: none; }
.lx-aperture__mask { position: absolute; inset: 0; display: grid; align-items: center; background: var(--lx-night); color: #fff;
  clip-path: ellipse(var(--rx, 75%) var(--ry, 75%) at 50% 50%); }
.lx-aperture__rings { position: absolute; top: 50%; left: 0; width: max(120vw, 120vh); aspect-ratio: 1; translate: -27% -50%; opacity: .9; }
.lx-rings .lx-arc { stroke: #fff; stroke-opacity: .09; }
.lx-rings .lx-arc--hl { stroke: var(--lx-lens); stroke-opacity: .55; }
.lx-rings .lx-form { display: none; }
.lx-aperture__inner { position: relative; z-index: 2; }
.lx-aperture .lx-kicker { color: #8fb0dc; }
.lx-statement { margin: 0; max-width: 22ch; font: 400 clamp(2rem, 1rem + 3.6vw, 4.6rem)/1.12 var(--lx-serif); letter-spacing: -.02em; color: #fff; text-wrap: pretty; }
.lx-statement .w { display: inline-block; }

/* ---------- 3. services ---------- */
.lx-services { position: relative; background: var(--lx-paper); }
.lx-services__pin { padding-block: clamp(6rem, 12vh, 9.375rem) clamp(3.5rem, 8vh, 6rem); }

.lx-services__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.75rem, 7vh, 5rem); }
.lx-services__aside { margin: 0; max-width: 30em; color: var(--lx-stone); font-size: 1.05rem; line-height: 1.6; justify-self: end; }
.lx-track-wrap { overflow: hidden; }
.lx-track { display: flex; gap: 0; padding-inline: var(--gutter); width: max-content; }
.lx-panel { position: relative; width: clamp(20rem, 34vw, 31.25rem); padding: 1.75rem clamp(1.5rem, 2.6vw, 2.5rem) 2rem; border-left: 1px solid var(--lx-rule); display: flex; flex-direction: column; }
.lx-panel:last-child { border-right: 1px solid var(--lx-rule); }
.lx-panel__top { display: flex; align-items: baseline; gap: 8px; }
.lx-panel__num { font: 500 clamp(2.6rem, 2rem + 1.6vw, 3.6rem)/1 var(--lx-serif); letter-spacing: -.03em; color: var(--lx-ink); }
.lx-panel__of { font-size: .8rem; color: var(--lx-stone); }
.lx-art { width: 100%; height: auto; margin: clamp(1.25rem, 4vh, 2.75rem) 0 clamp(1.25rem, 4vh, 2.5rem); overflow: visible; }
.lx-ln { fill: none; stroke: var(--lx-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lx-ln--soft { stroke-opacity: .32; }
.lx-ln--dash { stroke-dasharray: 3 6; }
.lx-ln--accent { stroke: var(--lx-lens); stroke-width: 2; }
.lx-dot { fill: var(--lx-lens); }
.lx-lbl { font: 600 10.5px/1 var(--font-text); letter-spacing: .12em; fill: var(--lx-stone); }
.lx-panel__title { margin: 0 0 0.75rem; font: 500 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.15 var(--lx-serif); letter-spacing: -.015em; color: var(--lx-ink); }
.lx-panel__body { margin: 0 0 1.25rem; color: var(--lx-stone); line-height: 1.6; }
.lx-panel__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.lx-panel__tags li { padding: 5px 0.625rem; border: 1px solid var(--lx-rule); border-radius: 62.4375rem; font-size: .78rem; color: var(--lx-ink); }
.lx-panel__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-weight: 600; color: var(--lx-lens-text); }
.lx-panel__link svg { width: 1.0625rem; height: 1.0625rem; transition: transform .5s var(--lx-ease); }
@media (hover: hover) { .lx-panel__link:hover svg { transform: translateX(4px); } }
.lx-services__bar { margin-top: 2.25rem; }
.lx-services__bar i { display: block; height: 1px; background: var(--lx-ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.lx-services__bar::before { content: ""; display: block; height: 1px; margin-bottom: -1px; background: var(--lx-rule); }

@media (min-width: 900px) and (orientation: landscape) {
  .lx-services__pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--mainbar-h) + 2vh) 2.5vh; }
  .lx-services .lx-h2 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 4.2rem); }
  .lx-services__head { margin-bottom: 3.5vh; }
  .lx-art { height: clamp(5.25rem, 17vh, 13.125rem); margin: 2.4vh 0; }
  .lx-panel { padding-top: 1.125rem; padding-bottom: 8px; }
  .lx-panel__body { margin-bottom: 1rem; }
  .lx-panel__tags { margin-bottom: 0.75rem; }
  .lx-services__bar { margin-top: 2vh; }
  .lx-panel__num { font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3.2rem); }
}
@media (min-width: 900px) and (max-height: 800px) and (orientation: landscape) {
  .lx-panel__tags { display: none; }
  .lx-services__aside { font-size: .95rem; }
}

/* ---------- 4. platforms ---------- */
.lx-platforms { padding-block: clamp(5.5rem, 11vh, 8.75rem) clamp(5.5rem, 11vh, 8.75rem); background: var(--lx-paper-2); overflow: hidden; }
.lx-platforms__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 5vh, 3.5rem); }
.lx-platforms__head .lx-label { margin: 0; }
.lx-platforms__head p { margin: 0; color: var(--lx-stone); }
.lx-velo { overflow: hidden; white-space: nowrap; }
.lx-velo__track { display: inline-flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); padding-right: clamp(1.25rem, 2.4vw, 2.5rem); will-change: transform;
  font: 500 clamp(3rem, 1.4rem + 6.4vw, 8.4rem)/1.08 var(--lx-serif); letter-spacing: -.035em; color: var(--lx-ink); }
.lx-velo--b .lx-velo__track { color: var(--lx-lens-text); }
.lx-glyph { width: .42em; height: .42em; flex: none; fill: currentColor; opacity: .9; }
.lx-figures { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3.5rem, 9vh, 6.5rem); border-top: 1px solid var(--lx-rule); }
.lx-fig { padding: 1.75rem 1.75rem 0 0; }
.lx-fig + .lx-fig { padding-left: 1.75rem; border-left: 1px solid var(--lx-rule); }
.lx-fig__n { margin: 0 0 0.625rem; font: 500 clamp(3.2rem, 2.4rem + 2.6vw, 5.2rem)/1 var(--lx-serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--lx-ink); }
.lx-fig__l { margin: 0; max-width: 16em; color: var(--lx-stone); font-size: .95rem; line-height: 1.5; }
.lx-fig--text p { margin: 0 0 0.875rem; color: var(--lx-ink); line-height: 1.55; }

/* ---------- 5. CTA (navy, flows into the footer) ---------- */
.lx-cta { position: relative; padding-block: clamp(7rem, 16vh, 12.5rem) clamp(6rem, 13vh, 10rem); background: var(--lx-night); color: #fff; overflow: hidden; }
.lx-cta__art { position: absolute; z-index: 0; top: 50%; right: max(-30vw, -480px); width: min(90vw, 75rem); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; }
.lx-cta-lens .lx-arc { stroke: #fff; stroke-opacity: .1; }
.lx-cta-lens .lx-arc--hl { stroke: var(--lx-lens); stroke-opacity: .7; }
.lx-cta-lens .lx-form--crescent { fill: var(--lx-deep); opacity: .7; }
.lx-cta-lens .lx-form--d { fill: var(--lx-lens); opacity: .9; }
.lx-cta__inner { position: relative; z-index: 2; }
.lx-cta .lx-kicker { color: #8fb0dc; }
.lx-cta__title { margin: 0 0 clamp(2.25rem, 5vh, 3.5rem); font: 500 clamp(2.8rem, 1.3rem + 6vw, 8rem)/.98 var(--lx-serif); letter-spacing: -.035em; color: #fff; }
.is-home .site-footer { border-top: 1px solid var(--lx-rule-dark); }

/* loader in the homepage palette */
.is-home .loader { background: var(--lx-paper); }
.is-home .loader__bar i { background: var(--lx-lens); }
.is-home .loader__year { font-family: var(--lx-serif); font-weight: 500; letter-spacing: -.04em; color: var(--lx-ink); }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .lx-hero { padding-top: calc(var(--mainbar-h) + 30vh); }
  .lx-hero__inner { position: static; }
  .lx-hero__text { position: relative; z-index: 2; }
  .lx-hero__art { top: calc(var(--mainbar-h) - 1vh); right: auto; left: calc(94vw - 34vh * .72); width: 34vh; translate: 0 0; }
  .lx-hero__meta { grid-template-columns: 1fr; gap: 1.125rem; }
  .lx-cue { display: none; }
  .lx-services__head { grid-template-columns: 1fr; }
  .lx-services__aside { justify-self: start; }
  .lx-track { flex-direction: column; width: auto; }
  .lx-panel { width: auto; border-left: 0; border-right: 0 !important; border-top: 1px solid var(--lx-rule); padding-inline: 0; }
  .lx-panel:last-child { border-bottom: 1px solid var(--lx-rule); }
  .lx-art { max-width: 26.25rem; }
  .lx-services__bar { display: none; }
  .lx-figures { grid-template-columns: 1fr 1fr; }
  .lx-fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .lx-fig:nth-child(n+3) { border-top: 1px solid var(--lx-rule); margin-top: 1.75rem; }
  .lx-cta__art { right: -70vw; width: 150vw; opacity: .55; }
}
@media (max-width: 520px) {
  .lx-figures { grid-template-columns: 1fr; }
  .lx-fig, .lx-fig + .lx-fig { padding-left: 0; border-left: 0; }
  .lx-fig + .lx-fig { border-top: 1px solid var(--lx-rule); margin-top: 1.75rem; }
}

/* reduced motion / no GSAP: a calm, fully visible page */
.lx-static .lx-aperture__stage { display: block; height: auto; place-items: normal; }
.lx-static .lx-aperture__mask { position: relative; clip-path: none; overflow: hidden; padding-block: clamp(7.5rem, 18vh, 12.5rem); }
@media (min-width: 900px) {
  .lx-static .lx-track { display: grid; grid-template-columns: repeat(4, 1fr); width: auto; }
  .lx-static .lx-panel { width: auto; }
  .lx-static .lx-services__bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lx-cue i::after { animation: none; } }

/* Korean homepage: Myeongjo display needs a touch more leading and less negative tracking */
html[lang="ko"] .lx-title { max-width: none; font-size: clamp(2.7rem, 1.2rem + 5.6vw, 7.4rem); line-height: 1.1; letter-spacing: -.03em; }
html[lang="ko"] .lx-h2, html[lang="ko"] .lx-cta__title { line-height: 1.16; letter-spacing: -.025em; }
html[lang="ko"] .lx-cta__title { font-size: clamp(2.4rem, 1.2rem + 4.8vw, 6.4rem); }
html[lang="ko"] .lx-statement { max-width: 26em; line-height: 1.32; font-size: clamp(1.6rem, .8rem + 2.4vw, 3.2rem); letter-spacing: -.02em; }
/* Korean statement keeps the client's four lines on wide screens; on phones the text flows naturally */
@media (max-width: 767px) { .lx-statement br { display: none; } }
html[lang="ko"] .lx-panel__title { letter-spacing: -.01em; }
html[lang="ko"] .lx-kicker, html[lang="ko"] .lx-label, html[lang="ko"] .lx-ap-cap { letter-spacing: .04em; }
@media (max-width: 699px) { .lx-ap-cap { display: none; } }

/* ---------- phones & tablets ---------- */
/* Big type never outgrows a short screen (landscape phones, split-screen tablets) */
.lx-title { font-size: min(clamp(2.9rem, 1.2rem + 5vw, 7rem), 14.5vh); }
.lx-statement { font-size: min(clamp(2rem, 1rem + 3.6vw, 4.6rem), 7.4vh); }
.lx-cta__title { font-size: min(clamp(2.8rem, 1.3rem + 6vw, 8rem), 15vh); }
html[lang="ko"] .lx-title { font-size: min(clamp(2.7rem, 1.2rem + 5.6vw, 7.4rem), 12.5vh); }
html[lang="ko"] .lx-statement { font-size: min(clamp(1.6rem, .8rem + 2.4vw, 3.2rem), 5.8vh); }
html[lang="ko"] .lx-cta__title { font-size: min(clamp(2.4rem, 1.2rem + 4.8vw, 6.4rem), 12.5vh); }

/* Tablet portrait / large phones landscape: services as a 2 x 2 grid instead of a long single column */
@media (min-width: 600px) and (max-width: 899px) {
  .lx-track { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .lx-panel { border-top: 1px solid var(--lx-rule); }
  .lx-panel:last-child { border-bottom: 0; }
  .lx-panel:nth-last-child(-n+2) { border-bottom: 1px solid var(--lx-rule); }
  .lx-hero { padding-top: calc(var(--mainbar-h) + 26vh); }
  .lx-hero__art { width: 30vh; left: calc(94vw - 30vh * .72); }
  .lx-hero__meta { grid-template-columns: 1fr 1fr; }
}

/* Phones: lens band a little shorter so the headline, lede and button land on the first screen */
@media (max-width: 599px) {
  .lx-hero { padding-top: calc(var(--mainbar-h) + 23vh); }
  .lx-hero__art { width: 26vh; left: calc(96vw - 26vh * .72); }
  .lx-title { font-size: clamp(2.3rem, 1.1rem + 6.2vw, 3.1rem); line-height: 1.02; }
  html[lang="ko"] .lx-title { font-size: clamp(2rem, 1rem + 5.6vw, 2.7rem); line-height: 1.16; }
  .lx-eyebrow { margin-bottom: 1.125rem; font-size: .8rem; }
  .lx-eyebrow__rule { width: 1.5rem; }
  .lx-hero__foot { gap: 1.375rem; margin-top: 1.375rem; }
  .lx-lede { font-size: 1rem; }
  .lx-actions { gap: 0.625rem 1.375rem; }
  .lx-btn { min-height: 3.25rem; padding: 0 1.375rem; }
  .lx-hero__meta { margin-top: 1.75rem; padding-top: 1.375rem; }
  .lx-hero__meta dd { font-size: .85rem; }
  .lx-statement { font-size: min(clamp(1.7rem, 1rem + 4.4vw, 2.2rem), 7vh); }
  html[lang="ko"] .lx-statement { font-size: min(clamp(1.5rem, .9rem + 3.8vw, 1.9rem), 6vh); }
  .lx-velo__track { font-size: clamp(2.6rem, 1.4rem + 7vw, 3.4rem); }
  .lx-platforms__head { flex-direction: column; align-items: flex-start; gap: 0.625rem; }
}

/* Landscape phones (short and wide): lens moves beside the text like desktop instead of a band on top */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .lx-hero { padding-top: calc(var(--mainbar-h) + 1.75rem); min-height: 0; }
  .lx-hero__art { top: 50%; left: auto; right: -16vw; width: 46vw; translate: 0 -46%; opacity: 1; }
  .lx-hero__inner { padding-right: calc(var(--gutter) + 36vw); }
  .lx-title { font-size: min(9vw, 15vh); }
  .lx-hero__meta { grid-template-columns: 1fr 1fr; }
  .lx-aperture .lx-kicker { margin-bottom: 0.75rem; }
}

/* Touch screens: no hover-only effects left in a "stuck" state */
@media (hover: none) {
  .lx-btn::before { display: none; }
  .lx-btn:active { background: var(--lx-lens); }
  .lx-btn--light:active { color: #fff; }
}

/* Large tablets in portrait (iPad Pro, Surface): 2 x 2 services grid, shorter hero, bigger lens */
@media (min-width: 900px) and (orientation: portrait) {
  .lx-hero { min-height: 0; padding-bottom: 0; }
  .lx-hero__inner { padding-block: clamp(5rem, 10vh, 10rem); }
  .lx-hero__art { width: min(47.5rem, calc(100% + var(--gutter) + 10vw)); }
  .lx-track { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; width: auto; }
  .lx-panel { width: auto; border-left: 0; border-right: 0 !important; border-top: 1px solid var(--lx-rule); padding-inline: 0; }
  .lx-panel:nth-last-child(-n+2) { border-bottom: 1px solid var(--lx-rule); }
  .lx-art { max-width: 27.5rem; }
  .lx-services__bar { display: none; }
}

/* ---------- key figures, selected cases, CTA subtitle ---------- */
.lx-title { max-width: none; }
.lx-lede { max-width: 38em; }
.lx-art .lx-pt { fill: var(--lx-ink); opacity: .22; }
/* key metrics bar (replaces the platform strip under the hero) */
.lx-metrics { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2.25rem, 6vh, 4rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.lx-metrics::before { content: ""; position: absolute; inset: 0 var(--gutter) auto; height: 1px; background: var(--lx-rule); }
.lx-metric { padding: 1.375rem 1.125rem 0 0; }
.lx-metric + .lx-metric { padding-left: 1.125rem; border-left: 1px solid var(--lx-rule); }
.lx-metric__n { margin: 0 0 8px; font: 500 clamp(1.9rem, 1.3rem + 1.5vw, 2.9rem)/1 var(--lx-serif); letter-spacing: -.03em; color: var(--lx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-metric__n small { margin-left: 6px; font: 600 .72rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-lens-text); }
.lx-metric__l { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--lx-stone); max-width: 17em; }
@media (max-width: 1099px) { .lx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-metric:nth-child(3) { padding-left: 0; border-left: 0; } .lx-metric:nth-child(n+3) { margin-top: 1.125rem; border-top: 1px solid var(--lx-rule); } }
@media (max-width: 599px) { .lx-metrics { grid-template-columns: 1fr 1fr; } .lx-metric, .lx-metric + .lx-metric { padding: 1.125rem 0.75rem 0 0; border-left: 0; border-top: 0; margin-top: 0; } .lx-metric:nth-child(even) { padding-left: 0.75rem; border-left: 1px solid var(--lx-rule); } .lx-metric:nth-child(n+3) { margin-top: 0.875rem; border-top: 1px solid var(--lx-rule); } }

/* selected cases (replaces the figures row) */
.lx-cases { margin-top: clamp(4rem, 10vh, 7rem); }
.lx-cases__head { display: flex; justify-content: space-between; align-items: end; gap: 1.25rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.lx-cases__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lx-rule); }
.lx-case { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.75rem 2rem 0; color: inherit; }
.lx-case + .lx-case { padding-left: 1.75rem; border-left: 1px solid var(--lx-rule); }
.lx-case__sec { font: 600 .72rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lx-lens-text); }
.lx-case__client { margin: 0; font: 500 clamp(1.35rem, 1.1rem + .7vw, 1.75rem)/1.2 var(--lx-serif); letter-spacing: -.015em; color: var(--lx-ink); }
.lx-case__scope { margin: 0; color: var(--lx-stone); line-height: 1.55; }
.lx-case__fig { margin-top: auto; padding-top: 0.875rem; font: 500 1.6rem/1 var(--lx-serif); letter-spacing: -.02em; color: var(--lx-ink); }
@media (hover: hover) { .lx-case::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--lx-lens); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--lx-ease); } .lx-case + .lx-case::after { left: 1.75rem; } .lx-case:hover::after { transform: scaleX(1); } }
@media (max-width: 899px) { .lx-cases__list { grid-template-columns: 1fr; } .lx-case, .lx-case + .lx-case { padding: 1.5rem 0; border-left: 0; } .lx-case + .lx-case { border-top: 1px solid var(--lx-rule); } }
.lx-cta__sub { margin: -16px 0 clamp(1.75rem, 4vh, 2.5rem); max-width: 40em; color: rgb(255 255 255 / .72); font-size: 1.05rem; line-height: 1.6; }
.lx-platforms__head .lx-textlink { font-size: .95rem; }
html[lang="ko"] .lx-case__client { letter-spacing: -.01em; }
/* hero: the headline is longer – keep the lens column at a fixed share and fit the headline in two lines */
@media (min-width: 900px) {
  .lx-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(15rem, 34%); }
  .lx-hero__art { width: min(48.75rem, calc(100% + max(var(--gutter), (100vw - var(--max)) / 2) * .8 + 2vw)); }
  html[lang="en"] .lx-title { font-size: min(clamp(2.4rem, .9rem + 3.4vw, 4.6rem), 12vh); }
  html[lang="ko"] .lx-title { font-size: min(clamp(2.4rem, 1rem + 3.9vw, 5.6rem), 12vh); }
}
/* hero: shorter headline, slightly smaller; lens sits right beside the text and every ring stays on screen */
@media (min-width: 900px) {
  .lx-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 42%); column-gap: clamp(1.75rem, 3vw, 3.5rem); }
  .lx-hero__art { width: 100%; max-width: 37.5rem; justify-self: start; }
  html[lang="en"] .lx-title { font-size: min(clamp(2.3rem, .7rem + 2.9vw, 3.2rem), 11vh); line-height: 1.04; }
  html[lang="ko"] .lx-title { font-size: min(clamp(2.2rem, .8rem + 2.9vw, 3.5rem), 11vh); line-height: 1.18; }
}
/* hero lens 1.5x: as large as 1.5x the column allows while every ring stays inside the window.
   The lens no longer sets the hero's height – it overflows the text block's height evenly, so the
   headline, buttons and figures stay where they were. */
@media (min-width: 900px) {
  .lx-hero__art { position: relative; align-self: stretch; aspect-ratio: auto; height: auto; max-width: none;
    width: min(calc(100% * 1.5), 56.25rem, calc(100% + var(--gutter) + max(0px, (100vw - var(--max) - 2 * var(--gutter)) / 2) - 1rem)); }
  .lx-hero__art .lx-lens { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 1; translate: 0 -50%; }
  .lx-hero__inner { min-height: min(52vw, 40rem); }
}
/* hero lens: final size (20% smaller than the 1.5x step above) */
@media (min-width: 900px) {
  .lx-hero__art { width: min(calc(100% * 1.2), 45rem, calc(100% + var(--gutter) + max(0px, (100vw - var(--max) - 2 * var(--gutter)) / 2) - 1rem)); }
}

/* ---------- aperture: click-to-open button and hint ---------- */
.lx-ap-open { position: absolute; z-index: 4; top: 50%; left: 50%; translate: -50% -50%; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lx-ap-open:focus-visible { outline: 2px solid var(--lx-lens); outline-offset: 6px; }
.lx-ap-open.is-off { visibility: hidden; pointer-events: none; }
.lx-ap-hint { position: absolute; z-index: 3; left: 50%; top: calc(50% + 9vh + 1.375rem); translate: -50% 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 600 .74rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lx-stone); pointer-events: none; }
.lx-ap-hint svg { width: 0.875rem; height: 0.875rem; animation: lx-hint 1.8s var(--lx-ease) infinite; }
@keyframes lx-hint { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(4px); opacity: 1; } }
.lx-ap-open:hover ~ .lx-ap-hint, .lx-ap-open:focus-visible ~ .lx-ap-hint { color: var(--lx-ink); }
html[lang="ko"] .lx-ap-hint { letter-spacing: .04em; }
.lx-static .lx-ap-open, .lx-static .lx-ap-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .lx-ap-hint svg { animation: none; } }

/* services: with three panels the track fits the screen, so panels share the width equally (no sideways scroll) */
@media (min-width: 900px) and (orientation: landscape) {
  .lx-track { width: min(100%, calc(var(--max) + var(--gutter) * 2)); margin-inline: auto; }
  .lx-track:has(> .lx-panel:nth-child(3):last-child) .lx-panel { width: auto; flex: 1 1 0; min-width: 0; }
  .lx-services.is-fit .lx-services__bar { display: none; }
}

/* very tall viewports (e.g. browser zoomed far out): keep the hero from becoming a huge empty screen */
@media (min-height: 1400px) { .lx-hero { min-height: min(100svh, 75rem); } }


/* very narrow phones (folded Galaxy Fold, iPhone SE 1st gen): keep the hero inside the screen */
.lx-hero { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 359px) {
  .lx-title { font-size: 2.25rem; }
  html[lang="ko"] .lx-title { font-size: 2.1rem; }
  .lx-btn { min-height: 3.25rem; padding: 0.75rem 1.25rem; white-space: normal; text-align: left; line-height: 1.3; }
  .lx-metric__n { font-size: 1.6rem; }
  .lx-metrics { grid-template-columns: 1fr; }
  .lx-metric, .lx-metric + .lx-metric { padding: 1rem 0 1rem 0; border-left: 0; }
  .lx-metric + .lx-metric { border-top: 1px solid var(--lx-rule); }
  .lx-metric__l { max-width: none; }
}

/* ---------- hero emblem: size from the screen WIDTH and keep it in the page flow on phones/tablets ----------
   Previously the emblem was positioned absolutely and sized from the screen height (vh), so on tall, narrow
   phones (e.g. Galaxy) or with a larger system text size it stayed big and covered the text. Now it sits above
   the headline as a normal block, so it can never overlap the text, and it scales with the screen width. */
@media (max-width: 899px) {
  .lx-hero { padding-top: calc(var(--mainbar-h) + clamp(1rem, 4vw, 2rem)); min-height: 0; }
  .lx-hero__inner { display: flex; flex-direction: column; }
  .lx-hero__art { position: relative; order: -1; top: auto; right: auto; left: auto; translate: none;
    align-self: flex-end; width: clamp(8.5rem, 42vw, 16rem); margin: 0 calc(var(--gutter) * -0.25) clamp(0.75rem, 3vw, 1.5rem) 0; }
  .lx-hero__art .lx-lens { position: static; width: 100%; height: auto; aspect-ratio: 1; translate: none; }
}
@media (max-width: 599px) {
  .lx-hero__art { width: clamp(8rem, 44vw, 12.5rem); }
}
/* landscape phones: emblem beside the text, sized to the short screen height */
@media (max-width: 899px) and (max-height: 500px) and (orientation: landscape) {
  .lx-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; padding-right: 0; }
  .lx-hero__inner { align-items: start; }
  .lx-hero__art { order: 0; align-self: start; width: min(30vw, 58vh); margin: 0.5rem 0 0; }
}
/* desktop and large tablets: never taller than the screen, so short wide screens don't get a giant emblem */
@media (min-width: 900px) {
  .lx-hero__art { max-width: min(100%, 78vh); }
}
/* short, wide screens of any width (phones held sideways, e.g. Galaxy at 915×412): emblem beside the headline */
@media (min-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .lx-hero { min-height: 0; padding-top: calc(var(--mainbar-h) + 1.75rem); }
  .lx-hero__inner { min-height: 0; align-items: start; }
  .lx-hero__art { align-self: start; width: min(30vw, 58vh); max-width: none; height: auto; aspect-ratio: 1; margin-top: 0.5rem; }
  .lx-hero__art .lx-lens { position: static; width: 100%; height: auto; translate: none; }
}