/* ===== Solidus Investment — page components (loads after style.css) ===== */

/* header: no utility bar, globe language switcher on the right */
.site-header { transition: background 0.35s var(--ease), box-shadow 0.35s, color 0.35s, transform 0.45s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
body.nav-open .site-header.is-hidden { transform: none; }
:root { --header-top: 0px; --header-main: 80px; }
.header-main { padding: 0 48px; }
.header-utils { gap: 14px; margin-left: auto; } /* stays pinned right even when the GNB is hidden on mobile */
.lang-toggle.icon-btn {
  width: auto; height: 40px; padding: 0 10px 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: Outfit, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.lang-toggle svg { width: 22px; height: 22px; }
.lang-toggle:hover, .lang-wrap.open .lang-toggle { border-color: var(--brand); color: var(--brand); }
.site-header:not(.light-page) .lang-toggle:hover,
.site-header:not(.light-page) .lang-wrap.open .lang-toggle { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: #fff; }
.lang-drop {
  top: calc(100% + 10px); right: 0; min-width: 150px;
  padding: 6px 0; border-top: 2px solid var(--brand);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.lang-drop a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 16px; font-family: Outfit, sans-serif; letter-spacing: 0.06em; }
.lang-drop a small { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.lang-drop a.is-on small { color: var(--brand-deep); }
/* Keep the supplied CI artwork intact: the blue logo everywhere, never inverted.
   (Specificity must beat style.css's .site-header:not(.light-page) .logo-img.) */
.site-header .logo-img,
.site-header:not(.light-page) .logo-img,
body.nav-open .site-header .logo-img,
.site-header.light-page .logo-img,
.site-header.is-solid:not(.light-page) .logo-img,
body.nav-open .site-header.is-solid .logo-img { filter: none; }
/* Home sticky header goes white (like sub pages) so the blue CI and dark nav text read well */
.site-header.is-solid:not(.light-page) {
  background: rgba(255,255,255,0.96); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06); backdrop-filter: blur(12px);
}
.site-header.is-solid:not(.light-page) .gnb-item.is-on,
.site-header.is-solid:not(.light-page) .gnb-wrap.is-open .gnb-item { color: var(--brand); }
.site-header.is-solid:not(.light-page) .gnb-item::after { background: var(--brand); }
.site-header.is-solid:not(.light-page) .lang-toggle:hover,
.site-header.is-solid:not(.light-page) .lang-wrap.open .lang-toggle { background: transparent; border-color: var(--brand); color: var(--brand); }
.logo-img { transition: filter 0.35s; }

/* GNB dropdown layer (original Solidus site: About us has sub menu) */
.gnb-wrap { position: relative; display: flex; align-items: stretch; }
.gnb-wrap .gnb-item { height: 100%; }
.gnb-drop {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 8px);
  min-width: 170px;
  padding: 10px 0;
  background: #fff;
  border-top: 2px solid var(--brand);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s 0.22s;
  z-index: 90;
}
.gnb-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.gnb-wrap.is-open .gnb-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.gnb-drop a {
  display: block; padding: 9px 22px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}
.gnb-drop a:hover, .gnb-drop a.is-on { color: var(--brand-deep); background: #faf5e6; font-weight: 700; }
.gnb-wrap.is-open .gnb-item::after { transform: scaleX(1); }
.gnb-wrap.is-open .gnb-item { color: var(--brand); }
.site-header:not(.light-page) .gnb-wrap.is-open .gnb-item { color: #fff; }

/* floating TOP button: line-only icon in the brand gold (no fill, no box) */
.float-btns { right: 28px; bottom: 28px; }
.float-btns .top-btn {
  min-width: 0; width: 52px; height: 52px; padding: 0; border: 0;
  background: transparent !important; color: var(--brand);
  display: grid; place-items: center; box-shadow: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s;
}
.float-btns .top-btn svg { width: 48px; height: 48px; display: block; }
.float-btns .top-btn:hover { color: var(--brand-deep); transform: translateY(-3px); }
@media (max-width: 720px) { .float-btns { right: 14px; bottom: 14px; } .float-btns .top-btn { width: 44px; height: 44px; } .float-btns .top-btn svg { width: 40px; height: 40px; } }

/* ===== Typography: readable line breaks =====
   Korean text never breaks inside a word (keep-all, set on body); on top of that
   headings balance their lines and body copy avoids single-word last lines.
   Long URLs/IDs may still break anywhere so they cannot overflow their box. */
h1, h2, h3, h4, .kv-title, .cg-title, .tc-name, .vt-text strong, .invest-list strong,
.hero-solidus .hero-copy h2, .home-sec h2, .page h2, .promise-quote-box .q, .hist-lead {
  text-wrap: balance;
}
p, li, dd, figcaption, .page .lead, .home-sec .desc, .kv-main, .kv-sub,
.aff-card p.desc, .str-item ul li, .tc-col li, .cg-profile p, .way-item p, .field-card em {
  text-wrap: pretty;
}
p, li, dd { overflow-wrap: break-word; }
/* headings only break a word when it truly cannot fit, so a one-syllable tail is never stranded */
h1, h2, h3, h4 { overflow-wrap: normal; }
/* narrow phones: shrink section headings enough that long Korean compounds fit on one line */
@media (max-width: 430px) {
  .page h2, .page .sec-head h2, .home-sec h2 { font-size: 26px; line-height: 1.3; }
  h3, h4 { overflow-wrap: break-word; }
}
.pf-item .pf-name, .cf-name, .tw-card, .aff-card a.site, .contact-info dd { overflow-wrap: anywhere; }
/* keep numbers, units and short brand tokens from being stranded on their own line */
.hist-row li .m { white-space: nowrap; }
.tc-title, .cg-title small, .ov-item .tit, .kicker, .vt-no, .way-item .en { white-space: nowrap; }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* generic */
.kicker { font-family: Outfit, sans-serif; color: var(--brand); font-weight: 700; letter-spacing: 0.08em; font-size: 13px; text-transform: uppercase; margin-bottom: 14px; }
.page .sec-head { margin-bottom: 40px; }
.page .sec-head h2 { margin-bottom: 12px; }
.page .sec-head p { font-size: 17px; color: var(--muted); }
.page .lead em { font-style: normal; color: var(--brand); font-weight: 600; }
.gold-line { width: 48px; height: 3px; background: var(--brand); margin: 22px 0 30px; }
.center { text-align: center; }
.center .gold-line { margin-left: auto; margin-right: auto; }
.page { padding-top: 72px; }

/* ===== Home ===== */
.hero-solidus .hero-slide::after {
  background: linear-gradient(90deg, rgba(40,40,40,0.72) 0%, rgba(40,40,40,0.25) 55%, rgba(40,40,40,0.35) 100%),
              linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, rgba(0,0,0,0.5) 100%);
}
.hero-solidus .hero-slide { transition: opacity 0.01s; } /* swap happens under the wipe */
.hero-solidus .hero-slide .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Ken Burns: a different move per slide, restarted whenever the slide becomes active */
.hero-solidus .hero-slide.is-on:nth-child(1) .bg { animation: kb-in 14s ease-out forwards; }
.hero-solidus .hero-slide.is-on:nth-child(2) .bg { animation: kb-out 14s ease-out forwards; }
.hero-solidus .hero-slide.is-on:nth-child(3) .bg { animation: kb-pan 14s ease-out forwards; }
@keyframes kb-in  { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes kb-out { from { transform: scale(1.16); } to { transform: scale(1.04); } }
@keyframes kb-pan { from { transform: scale(1.12) translateX(-2.5%); } to { transform: scale(1.12) translateX(2.5%); } }

.hero-solidus .hero-copy { padding-bottom: 120px; max-width: 1100px; }
.hero-solidus .hero-copy .eyebrow {
  position: relative; display: inline-flex; align-items: center; gap: 16px;
  font-family: Outfit, sans-serif; font-size: 14px; letter-spacing: 0.32em; color: var(--brand); font-weight: 600; margin-bottom: 26px;
  overflow: hidden;
}
.hero-solidus .hero-copy .eyebrow::before { content: ""; width: 48px; height: 1px; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.hero-solidus .hero-copy .eyebrow span { display: inline-block; transform: translateX(-20px); opacity: 0; }
.hero-solidus .hero-copy h2 { font-size: clamp(48px, 6.6vw, 104px); font-weight: 600; line-height: 1.04; white-space: normal; }
.hero-solidus .hero-copy h2 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-solidus .hero-copy h2 .ln span { display: inline-block; transform: translateY(110%); }
.hero-solidus .hero-copy h2 strong {
  font-weight: 600;
  background: linear-gradient(90deg, var(--brand) 0 50%, #fff 50% 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-solidus .hero-copy .hero-desc { font-size: 18px; max-width: 620px; opacity: 0; transform: translateY(18px); }
.hero-solidus .hero-ctas { display: flex; gap: 14px; margin-top: 40px; opacity: 0; transform: translateY(18px); }
.hero-solidus .hero-ctas a { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; font-weight: 600; border: 1px solid rgba(255,255,255,0.45); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.hero-solidus .hero-ctas a.primary { background: var(--brand); border-color: var(--brand); color: #1c1c1c; }
.hero-solidus .hero-ctas a:hover { background: #fff; color: #1c1c1c; border-color: #fff; }

/* copy choreography: replays each time a slide gets .is-on */
.hero-solidus .hero-slide.is-on .eyebrow::before { animation: h-line 0.7s var(--ease) 0.15s forwards; }
.hero-solidus .hero-slide.is-on .eyebrow span { animation: h-slide 0.7s var(--ease) 0.35s forwards; }
.hero-solidus .hero-slide.is-on h2 .ln:nth-child(1) span { animation: h-up 0.9s var(--ease) 0.45s forwards; }
.hero-solidus .hero-slide.is-on h2 .ln:nth-child(2) span { animation: h-up 0.9s var(--ease) 0.58s forwards; }
.hero-solidus .hero-slide.is-on h2 .ln:nth-child(3) span { animation: h-up 0.9s var(--ease) 0.71s forwards; }
.hero-solidus .hero-slide.is-on h2 strong { animation: h-gold 0.9s var(--ease) 1.25s forwards; }
.hero-solidus .hero-slide.is-on .hero-desc { animation: h-fade 0.8s var(--ease) 1.0s forwards; }
.hero-solidus .hero-slide.is-on .hero-ctas { animation: h-fade 0.8s var(--ease) 1.15s forwards; }
@keyframes h-up   { to { transform: translateY(0); } }
@keyframes h-line { to { transform: scaleX(1); } }
@keyframes h-slide{ to { transform: translateX(0); opacity: 1; } }
@keyframes h-fade { to { transform: translateY(0); opacity: 1; } }
@keyframes h-gold { to { background-position: 0 0; } }

/* gold wipe between slides */
.hero-wipe {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--brand) 18%, #1c1c1c 38%, #1c1c1c 62%, var(--brand) 82%, transparent 100%);
  transform: translateX(-100%);
}
.hero-solidus.is-wiping .hero-wipe { animation: hero-wipe 1s cubic-bezier(0.77, 0, 0.18, 1) forwards; }
@keyframes hero-wipe { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* autoplay progress */
.hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.14); z-index: 4; }
.hero-progress span { display: block; height: 100%; width: 0; background: var(--brand); }
@keyframes hero-progress { from { width: 0; } to { width: 100%; } }

.hero-solidus .hero-scroll { position: absolute; left: 80px; bottom: 46px; z-index: 4; display: flex; align-items: center; gap: 14px; font-family: Outfit, sans-serif; font-size: 12px; letter-spacing: 0.2em; color: rgba(255,255,255,0.7); }
.hero-solidus .hero-scroll::after { content: ""; width: 64px; height: 1px; background: linear-gradient(90deg, var(--brand), transparent); }
.hero-solidus .hero-ctrl { right: 48px; }
/* slide arrows use the same line-only gold circle as the TOP button */
.hero-solidus .hero-step { width: 44px; height: 44px; border: 0; background: transparent; color: var(--brand); }
.hero-solidus .hero-step svg { width: 44px; height: 44px; }
.hero-solidus .hero-step:hover { background: transparent; color: #fff; }
.hero-solidus .hero-dots button { border-color: rgba(255,255,255,0.7); }
.hero-solidus .hero-dots button.is-on { background: var(--brand); border-color: var(--brand); }
/* on mobile the dot is drawn by ::before inside a 44px tap target */
@media (max-width: 1100px) {
  .hero-solidus .hero-dots button.is-on { background: transparent; }
  .hero-solidus .hero-dots button.is-on::before { background: var(--brand); border-color: var(--brand); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-solidus .hero-slide .bg, .hero-solidus .hero-slide.is-on .bg { animation: none !important; }
  .hero-solidus .hero-slide .eyebrow::before, .hero-solidus .hero-slide .eyebrow span,
  .hero-solidus .hero-slide h2 .ln span, .hero-solidus .hero-slide .hero-desc, .hero-solidus .hero-slide .hero-ctas { animation: none !important; transform: none; opacity: 1; }
  .hero-solidus .hero-slide h2 strong { animation: none !important; background-position: 0 0; }
  .hero-wipe { display: none; }
}

/* section headings: line-mask reveal */
.home-sec h2 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.home-sec h2 .ln span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); }
.rv.is-in h2 .ln:nth-child(1) span { transform: none; transition-delay: 0.05s; }
.rv.is-in h2 .ln:nth-child(2) span { transform: none; transition-delay: 0.17s; }
.rv.is-in h2 .ln:nth-child(3) span { transform: none; transition-delay: 0.29s; }
@media (prefers-reduced-motion: reduce) { .home-sec h2 .ln span { transform: none; transition: none; } }

.home-sec { padding: 120px 80px; }
.home-sec .inner { max-width: 1142px; margin: 0 auto; }
.home-sec h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.25; margin-bottom: 18px; }
.home-sec .desc { font-size: 17px; line-height: 1.85; color: #555; max-width: 640px; }

.home-intro { background: #fff; }
.home-intro .inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.home-intro .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px; border-top: 1px solid var(--line); }
.home-intro .stat { padding: 26px 0 0; }
.home-intro .stat b { display: block; font-family: Outfit, sans-serif; font-size: 44px; line-height: 1; color: var(--brand); letter-spacing: -0.02em; }
.home-intro .stat b small { font-size: 20px; margin-left: 2px; }
.home-intro .stat .lbl { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
.home-intro .visual { position: relative; }
.home-intro .visual img { width: 100%; height: 520px; object-fit: cover; }
.home-intro .visual::before { content: ""; position: absolute; left: -22px; top: 22px; right: 22px; bottom: -22px; border: 1px solid var(--brand); z-index: -1; }

.home-fields { background: var(--black); color: #fff; }
.home-fields h2 { color: #fff; }
.home-fields .desc { color: rgba(255,255,255,0.7); }
.field-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 56px; }
.field-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #333; display: block; }
.field-card.rv { transition-duration: 0.9s; }
.field-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25); transition: transform 0.9s var(--ease), filter 0.6s; }
.field-card:hover img { transform: scale(1.08); filter: grayscale(0); }
.field-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,20,20,0.88)); }
.field-card .fc-text { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; display: block; }
.field-card .fc-title { display: block; font-weight: 600; font-size: 17px; line-height: 1.35; }
.field-card em {
  display: block; font-style: normal; font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5;
  max-height: 0; opacity: 0; transform: translateY(8px); overflow: hidden;
  transition: max-height 0.45s var(--ease), opacity 0.4s, transform 0.45s var(--ease), margin 0.45s;
}
.field-card:hover em { max-height: 3em; opacity: 1; transform: none; margin-top: 6px; }
/* border drawn clockwise by four gold segments */
.field-card .fc-line, .field-card .fc-line::before, .field-card .fc-line::after, .field-card::before {
  content: ""; position: absolute; background: var(--brand); z-index: 2; pointer-events: none;
  transition: transform 0.45s var(--ease);
}
.field-card .fc-line { left: 0; top: 0; width: 100%; height: 2px; transform-origin: left; transform: scaleX(0); }
.field-card .fc-line::before { right: 0; top: 0; width: 2px; height: 100vh; transform-origin: top; transform: scaleY(0); transition-delay: 0.1s; }
.field-card::before { left: 0; right: 0; bottom: 0; height: 2px; transform-origin: right; transform: scaleX(0); transition-delay: 0.2s; }
.field-card .fc-line::after { left: 0; top: 0; width: 2px; height: 100vh; transform-origin: bottom; transform: scaleY(0); transition-delay: 0.3s; }
.field-card:hover .fc-line, .field-card:hover .fc-line::before, .field-card:hover::before, .field-card:hover .fc-line::after { transform: none; }

.home-biz { background: #fff; }
/* vertical tabs (ref: 21st.dev 0xUrvish/vertical-tabs) */
.vt { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.vt-kicker { font-size: 11px; letter-spacing: 0.28em; color: var(--muted); margin: 10px 0 0; }
.vt-list { position: relative; margin-top: 44px; padding-left: 28px; }
.vt-track { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #e6e6ea; }
.vt-progress { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--ink); transition: height 0.12s linear; }
.vt-tab {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; align-items: start;
  width: 100%; padding: 22px 0; text-align: left;
  border-bottom: 1px solid var(--line);
}
.vt-tab:last-child { border-bottom: 0; }
.vt-no { font-family: Outfit, sans-serif; font-size: 11px; letter-spacing: 0.06em; color: #b5b5bc; padding-top: 10px; transition: color 0.3s; }
.vt-text strong { display: block; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: #c2c2c8; transition: color 0.35s; }
.vt-text em {
  display: block; font-style: normal; font-size: 15px; line-height: 1.7; color: #666;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 0.45s var(--ease), opacity 0.35s, margin-top 0.45s var(--ease);
}
.vt-tab:hover .vt-text strong { color: #8a8a92; }
.vt-tab.is-on .vt-text strong { color: var(--ink); }
.vt-tab.is-on .vt-no { color: var(--brand); }
.vt-tab.is-on .vt-text em { max-height: 4.5em; opacity: 1; margin-top: 10px; }
.vt .more-link { margin-top: 28px; }

.vt-media { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #1c1c1c; box-shadow: 0 30px 70px rgba(0,0,0,0.14); }
.vt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.6s var(--ease), transform 1.2s var(--ease); }
.vt-img.is-on { opacity: 1; transform: none; }
.vt-ctrl { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 10px; z-index: 2; }
.vt-ctrl button {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--ink);
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.vt-ctrl button svg { width: 18px; height: 18px; }
.vt-ctrl button:hover { background: var(--brand); color: #1c1c1c; transform: translateY(-2px); }

@media (max-width: 1100px) { .vt { grid-template-columns: 1fr; gap: 40px; } .vt-media { order: -1; } }
@media (max-width: 720px) { .vt-list { padding-left: 20px; margin-top: 28px; } .vt-tab { padding: 16px 0; grid-template-columns: 30px 1fr; } .vt-media { border-radius: 18px; } .vt-ctrl button { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .vt-img, .vt-text em, .vt-progress { transition: none; } }

.home-pf { background: #fff; overflow: hidden; }
.home-pf .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 24px; }

/* coverflow (port of ruixen.ui CoverflowCarousel) */
.cf { --cf-card: clamp(150px, 19vw, 250px); position: relative; }
.cf-frame {
  perspective: calc(var(--cf-card) * 3);
  overflow: hidden; padding: 44px 0 28px;
  cursor: grab; outline: none; touch-action: pan-y; user-select: none;
}
.cf-frame.is-dragging { cursor: grabbing; }
.cf-frame:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.cf-stage { position: relative; height: calc(var(--cf-card) * 0.66); transform-style: preserve-3d; }
.cf-card {
  position: absolute; left: 50%; top: 0;
  width: var(--cf-card); aspect-ratio: 3 / 2;
  background: #fff; border: 1px solid #e4e4e8; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  overflow: hidden; will-change: transform, opacity;
  display: grid; place-items: center;
}
.cf-card img { width: 100%; height: 100%; object-fit: contain; padding: 10%; pointer-events: none; }
.cf-card.is-center { border-color: var(--brand); box-shadow: 0 24px 56px rgba(207,168,65,0.28), 0 0 0 1px var(--brand); }
.cf-card[data-url].is-center { cursor: pointer; }
.cf-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(0,0,0,0.05)); pointer-events: none; }

.cf-caption { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 8px; }
.cf-cap-text { text-align: center; min-width: 220px; }
.cf-nav {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid #d9d9de; color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cf-nav svg { width: 18px; height: 18px; }
.cf-nav:hover { background: var(--brand); border-color: var(--brand); color: #1c1c1c; }
.cf-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; min-height: 1.5em; }
.cf-name.is-swap { animation: cf-swap 0.4s var(--ease); }
@keyframes cf-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cf-count { font-family: Outfit, sans-serif; font-size: 13px; color: var(--muted); letter-spacing: 0.08em; margin: 6px 0 0; }
.cf-count b { color: var(--brand-deep); font-weight: 600; }

@media (max-width: 720px) {
  .cf { --cf-card: 46vw; }
  .cf-nav { width: 40px; height: 40px; }
  .cf-caption { gap: 14px; }
  .cf-cap-text { min-width: 0; flex: 1; }
  .home-pf .head { flex-direction: column; align-items: flex-start; }
}

/* ===== Sub-page KV (scroll-driven, pinned) =====
   --p (0..1, set by JS) drives the opening: the photo card grows from 70% of the
   viewport to full-bleed and loses its radius, the dim fades in, and the title
   block slides from centre to left. The statement / description are .kv-step
   elements gated on scroll after the stage has fully opened. */
.kv { --p: 0; position: relative; height: calc(100vh + 150vh); margin: 0; }
.kv.is-static { height: 100vh; }
.kv-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff; }
.kv-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(70% + 30% * var(--p)); height: calc(70% + 30% * var(--p));
  border-radius: calc(22px * (1 - var(--p)));
  overflow: hidden; background: #1c1c1c;
  will-change: width, height;
}
.kv-bg { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(calc(1.04 + 0.08 * var(--p))); }
.kv-dim {
  position: absolute; inset: 0; opacity: var(--p);
  background: linear-gradient(90deg, rgba(20,20,20,0.78) 0%, rgba(20,20,20,0.45) 55%, rgba(20,20,20,0.25) 100%),
              linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
}
/* a light veil keeps the centred title legible before the dim arrives */
.kv-card::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,0.32); opacity: calc(1 - var(--p)); pointer-events: none; }

/* title block: vertically centred in the stage; JS slides .kv-head from centre to left */
.kv-text {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(var(--head-h, 120px) / -2)); /* the title block, not the whole text, sits on the centre line */
  z-index: 2; color: #fff;
  padding: 0 clamp(24px, 6vw, 96px);
  max-width: 1280px; margin: 0 auto;
}
.kv-head { width: max-content; max-width: 100%; will-change: transform; }
.kv.is-centered .kv-title { text-align: center; }
.kv.is-centered .kv-crumb { justify-content: center; }
.kv-title { font-family: Outfit, Pretendard, sans-serif; font-size: clamp(40px, 5.4vw, 84px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.kv-crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.02em; color: rgba(255,255,255,0.75); margin: 18px 0 0; }
.kv-crumb a:hover { color: #fff; text-decoration: underline; }
.kv-crumb span::before { content: "/"; margin-right: 10px; opacity: 0.5; }

.kv-step { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.kv-step.in { opacity: 1; transform: none; }
.kv-main { margin-top: clamp(22px, 2.4vw, 40px); font-size: clamp(20px, 2vw, 30px); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #fff; max-width: 760px; }
.kv-main::before { content: ""; display: block; width: 48px; height: 3px; background: var(--brand); margin-bottom: 22px; }
.kv-sub { margin-top: 18px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.8; color: rgba(255,255,255,0.82); max-width: 640px; }

/* side quick-nav: brand-gold header */
.sec-quick { border-color: #e4dcc6; }
.sec-quick-tit { background: var(--brand); color: #1c1c1c; }
.sec-quick-tit small { color: rgba(28,28,28,0.7); opacity: 1; }
.sec-quick-tit::after { border-right-color: #1c1c1c; border-bottom-color: #1c1c1c; }
.sec-quick li a.is-on { color: var(--brand-deep); }

/* side quick-nav stays out of the way while the KV stage is running */
.sec-quick { transition: opacity 0.4s, transform 0.4s var(--ease); }
body.kv-stage .sec-quick { opacity: 0; pointer-events: none; transform: translateX(-12px); }

/* scroll hint at the bottom of the stage, hidden once opened */
.kv-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; width: 1px; height: 48px; background: rgba(255,255,255,0.25); overflow: hidden; opacity: calc(1 - var(--p)); }
.kv-hint span { display: block; width: 100%; height: 50%; background: var(--brand); animation: kv-hint 1.6s ease-in-out infinite; }
@keyframes kv-hint { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

@media (max-width: 720px) {
  .kv { height: calc(100vh + 120vh); }
  .kv-card { width: calc(80% + 20% * var(--p)); height: calc(76% + 24% * var(--p)); border-radius: calc(16px * (1 - var(--p))); }
  .kv-text { padding: 0 22px; }
  .kv-title { font-size: 40px; }
  .kv-crumb { display: none; }
  .kv-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-step { transition: none; }
}

/* ===== Overview ===== */
/* company outline: bordered boxes in a row, left-aligned icon → label → value (ref: cafe24 PTWD778043) */
.ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; }
.ov-item {
  position: relative; background: #fff; text-align: left;
  padding: 40px 32px 34px; min-height: 230px;
  border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
  transition: background 0.3s;
}
.ov-item::before { content: ""; position: absolute; left: -1px; top: -1px; width: calc(100% + 1px); height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.ov-item:hover { background: #fffdf7; }
.ov-item:hover::before { transform: scaleX(1); }
.ov-ico { display: block; width: 48px; height: 48px; margin: 0 0 34px; color: var(--ink); }
.ov-ico svg { width: 100%; height: 100%; overflow: visible; }
.ov-ico .ac { fill: var(--brand); stroke: none; opacity: 0.9; }
.ov-item .tit { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; margin: 0 0 10px; }
.ov-item .txt { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.5; letter-spacing: -0.02em; }
.ov-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ov-intro img { width: 100%; height: 420px; object-fit: cover; }
.ov-intro h2 { font-size: 32px; }

/* ===== History ===== */
.hist-lead { text-align: center; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 70px; color: var(--ink-2); }
.hist-lead em { font-style: normal; color: var(--brand); }
.hist-list { position: relative; padding-left: 0; }
.hist-list::before { content: ""; position: absolute; left: 160px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.hist-row { display: grid; grid-template-columns: 160px 1fr; gap: 0; padding: 0 0 56px; position: relative; }
.hist-row .yr { font-family: Outfit, sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--brand); letter-spacing: -0.02em; }
.hist-row .yr::after { content: ""; position: absolute; left: 154px; top: 12px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.hist-row ul { padding-left: 48px; padding-top: 8px; }
.hist-row li { position: relative; padding-left: 0; font-size: 16px; color: #444; line-height: 1.7; margin-bottom: 8px; display: grid; grid-template-columns: 44px 1fr; }
.hist-row li .m { font-family: Outfit, sans-serif; color: var(--muted); font-size: 14px; padding-top: 2px; }
.hist-row li.nomonth { grid-template-columns: 1fr; }

/* ===== Strengths ===== */
.str-list { display: grid; gap: 28px; }
.str-item { display: grid; grid-template-columns: 400px 1fr; gap: 0; background: var(--paper); }
.str-item:nth-child(even) { grid-template-columns: 1fr 400px; }
.str-item:nth-child(even) .img { order: 2; }
.str-item .img img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.str-item .cont { padding: 44px 48px; }
.str-item .cont .no { font-family: Outfit, sans-serif; color: var(--brand); font-weight: 700; letter-spacing: 0.1em; font-size: 13px; }
.str-item h3 { font-size: 26px; line-height: 1.3; margin: 10px 0 18px; letter-spacing: -0.02em; }
.str-item ul li { position: relative; padding-left: 18px; margin-bottom: 10px; color: #444; line-height: 1.75; }
.str-item ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--brand); }
.field-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.field-strip li { text-align: center; }
.field-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 14px; }
.field-strip p { font-weight: 600; color: var(--ink); margin: 0; }

/* ===== Affiliates ===== */
.aff-holding { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; padding: 36px 40px; border: 1px solid var(--brand); margin-bottom: 40px; background: #fffdf7; }
.aff-holding .logo-box img { max-height: 56px; width: auto; }
.aff-holding strong { display: block; font-family: Outfit, sans-serif; color: var(--brand); font-size: 14px; letter-spacing: 0.08em; margin-bottom: 6px; }
.aff-holding p { margin: 0; color: #444; }
.aff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aff-card { background: #fff; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; transition: border-color 0.3s, box-shadow 0.3s; }
.aff-card:hover { border-color: var(--brand); box-shadow: 0 14px 40px rgba(0,0,0,0.06); }
.aff-card .yr { font-family: Outfit, sans-serif; color: var(--brand); font-size: 13px; letter-spacing: 0.1em; }
.aff-card .logo-box { height: 56px; display: flex; align-items: center; margin: 14px 0 10px; }
.aff-card .logo-box img { max-height: 48px; width: auto; }
.aff-card .tag { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.aff-card .tag strong { color: var(--ink); margin-right: 8px; }
.aff-card p.desc { font-size: 14px; color: #555; line-height: 1.75; margin: 0 0 14px; flex: 1; }
.aff-card a.site { font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.aff-card a.site::after { content: " ↗"; }
.aff-card.is-self { border-color: var(--brand); background: #fffdf7; }

/* ===== Promise / Way ===== */
.promise-quote-box { text-align: center; padding: 70px 40px; background: var(--black); color: #fff; margin-bottom: 70px; position: relative; overflow: hidden; }
.promise-quote-box::before { content: "“"; position: absolute; left: 40px; top: -20px; font-family: Outfit, serif; font-size: 200px; color: rgba(207,168,65,0.2); line-height: 1; }
.promise-quote-box .q { font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.02em; color: var(--brand); margin-bottom: 24px; }
.promise-quote-box p { color: rgba(255,255,255,0.8); font-size: 17px; max-width: 720px; margin: 0 auto; }
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.promise-card { background: #fff; box-shadow: 0 16px 34px rgba(8, 34, 72, 0.08); overflow: hidden; }
.promise-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.promise-card .pad { padding: 22px 22px 26px; }
.promise-card .stage { font-family: Outfit, sans-serif; font-size: 12px; letter-spacing: 0.1em; color: var(--brand); }
.promise-card h3 { font-size: 18px; margin: 8px 0 10px; line-height: 1.35; }
.promise-card p { font-size: 14px; color: #555; margin: 0; }
/* JW WAY: 2 rows x 4 bordered boxes, same tone as the company outline */
.way-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; }
.way-item {
  position: relative; background: #fff; text-align: left;
  display: block;
  padding: 36px 64px 34px 36px; min-height: 200px;
  border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
  transition: background 0.3s;
}
.way-item::before { content: ""; position: absolute; left: -1px; top: -1px; width: calc(100% + 1px); height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.way-item:hover { background: #fffdf7; }
.way-item:hover::before { transform: scaleX(1); }
.way-no { position: absolute; right: 24px; top: 26px; font-family: Outfit, sans-serif; font-size: 12px; letter-spacing: 0.08em; color: #b5b5bc; }
.way-ico { display: block; width: 48px; height: 48px; margin: 0 0 26px; color: var(--ink); }
.way-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.way-ico .ac { fill: var(--brand); }
.way-item .en { font-family: Outfit, sans-serif; color: var(--brand); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; }
.way-item p { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.5; letter-spacing: -0.02em; word-break: keep-all; }

/* ===== Team: coverflow gallery + profile (port of originkit Coverflow Gallery, base preset) ===== */
.cg { --cg-w: 400px; --cg-h: 400px; --cg-scale: 1; position: relative; }
.cg-viewport {
  position: relative; width: 100%; height: calc(var(--cg-h) * var(--cg-scale) + 80px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  perspective: 1600px; overflow: hidden; outline: none;
  cursor: grab; user-select: none; touch-action: pan-y;
}
.cg-viewport.is-dragging { cursor: grabbing; }
.cg-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.cg-stage { position: relative; width: calc(var(--cg-w) * var(--cg-scale)); height: calc(var(--cg-h) * var(--cg-scale)); transform-style: preserve-3d; }
.cg-card {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cg-w) * var(--cg-scale)); height: calc(var(--cg-h) * var(--cg-scale));
  border-radius: 30px; overflow: hidden; padding: 0;
  background: #1a1a1a; transform-origin: center center; transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer; box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.cg-card.is-active { cursor: default; }
.cg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
/* name overlay bottom-left on a dark gradient, like the reference's showTitle */
.cg-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.7) 100%); pointer-events: none; }
.cg-title {
  position: absolute; left: 22px; right: 22px; bottom: 24px; text-align: left;
  color: #fff; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4); pointer-events: none;
}
.cg-title small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--brand); }
/* inactive cards are dimmed (opacity 60% → 0.4 black) */
.cg-card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }

/* on-photo arrows: mobile only (desktop keeps the control row below) */
.cg-arrow {
  display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 400;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--brand); place-items: center;          /* same line-only gold look as the TOP button */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.cg-arrow svg { width: 44px; height: 44px; }
.cg-arrow-prev { left: 8px; }
.cg-arrow-next { right: 8px; }
.cg-arrow:active { color: var(--brand-deep); }

/* selected member's profile: below the gallery on narrow screens,
   beside it on wide ones (overlapping the centre photo by 10%) */
.cg-profile {
  max-width: 760px; margin: 28px auto 0; padding: 40px 48px 38px;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}
.cg.is-wide { --cg-anchor: 24%; }                         /* where the centre card sits */
.cg.is-wide .cg-viewport { justify-content: flex-start; padding-left: var(--cg-anchor); overflow: visible; }
.cg.is-wide .cg-stage { margin-left: 0; }
.cg.is-wide .cg-profile {
  position: absolute; top: calc((var(--cg-h) * var(--cg-scale) + 80px) / 2); transform: translateY(-50%);
  left: calc(var(--cg-anchor) + var(--cg-w) * var(--cg-scale) * 0.9);   /* 10% over the photo */
  right: 0; max-width: none; margin: 0; z-index: 300;
  padding: 36px 40px 34px; box-shadow: 0 30px 80px rgba(0,0,0,0.14);
}
.cg.is-wide .cg-profile.is-rise { animation-name: cg-rise-side; }
@keyframes cg-rise-side { from { opacity: 0; transform: translateY(calc(-50% + 18px)); } to { opacity: 1; transform: translateY(-50%); } }
.cg.is-wide .tc-head { text-align: left; }
.cg.is-wide .tc-ctrl { justify-content: flex-start; padding-left: var(--cg-anchor); }
.cg-profile.is-rise { animation: cg-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes cg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cg-profile.is-empty .tc-body { display: none; }
.cg-profile.is-empty .tc-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.tc-head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); text-align: center; }
.tc-name { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tc-title { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--brand-deep); letter-spacing: 0.02em; }
.tc-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
.tc-col h4 { font-family: Outfit, sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.tc-col li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.7; color: #444; }
.tc-col li::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; background: var(--brand); }
.tc-col[hidden] { display: none; }

.tc-ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 8px; position: relative; }
.tc-nav {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid #d9d9de; color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.tc-nav svg { width: 20px; height: 20px; }
.tc-nav:hover { background: var(--brand); border-color: var(--brand); color: #1c1c1c; }
.tc-dots { display: flex; gap: 8px; }
.tc-dots button { width: 10px; height: 10px; border-radius: 50%; background: #c9c9cf; transition: background 0.25s, transform 0.25s; }
.tc-dots button.is-on { background: var(--brand); transform: scale(1.25); }
.tc-dots button:hover { background: var(--brand-deep); }
.tc-count { position: absolute; right: 0; font-family: Outfit, sans-serif; font-size: 13px; color: var(--muted); letter-spacing: 0.08em; margin: 0; }
.tc-count b { color: var(--brand-deep); font-weight: 600; }

@media (max-width: 1100px) {
  .cg-profile { padding: 30px 28px 28px; }
  .tc-body { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .cg-card { border-radius: 18px; }
  .cg-arrow { display: grid; }
  .cg .tc-ctrl { display: none; }
  .cg-title { left: 14px; right: 14px; bottom: 14px; font-size: 18px; }
  .cg-title small { font-size: 11px; }
  .cg-profile { margin-top: 16px; padding: 24px 18px 22px; border-radius: 18px; }
  .tc-name { font-size: 22px; }
  .tc-count { position: static; }
  .tc-ctrl { flex-wrap: wrap; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cg-card, .cg-card::after, .cg-profile { transition: none; animation: none; } }

/* ===== Portfolio ===== */
/* one-line tab strip; scrolls sideways when it does not fit */
.pf-tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 36px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs button { flex: none; white-space: nowrap; scroll-snap-align: start; }
.pf-tabs button { height: 44px; padding: 0 22px; border: 1px solid var(--line); font-weight: 600; font-size: 15px; color: var(--ink-2); transition: all 0.25s; }
.pf-tabs button:hover { border-color: var(--brand); color: var(--brand-deep); }
.pf-tabs button.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pf-count { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.pf-count b { color: var(--brand-deep); font-family: Outfit, sans-serif; }
.pf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pf-item { position: relative; display: block; background: #fff; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 188 / 120; }
.pf-item img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.pf-item .pf-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; background: rgba(207,168,65,0.94); color: #1c1c1c; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity 0.3s; }
.pf-item:hover .pf-name { opacity: 1; }
.pf-item.has-link .pf-name::after { content: "↗"; margin-left: 6px; font-size: 12px; }

/* ===== Portfolio 3D marquee wall (ref: 21st.dev sean0205/3d-testimonials) — logo-only, full-bleed ===== */
.tw {
  position: relative; height: min(88vh, 900px); margin: 8px 0 0;
  width: 100vw; margin-left: calc(50% - 50vw);
  background: #fff; overflow: hidden; perspective: 340px;
  display: flex; align-items: center; justify-content: center;
}
.tw-stage {
  display: flex; gap: 22px; align-items: center; flex: none;
  transform: translateX(-6vw) translateY(0) translateZ(-160px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg) scale(1.25);
  transform-style: preserve-3d;
}
.tw-col { --tw-gap: 22px; --tw-duration: 40s; display: flex; flex-direction: column; gap: var(--tw-gap); height: 1400px; overflow: hidden; }
.tw-group { display: flex; flex-direction: column; gap: var(--tw-gap); flex: none; animation: tw-v var(--tw-duration) linear infinite; }
.tw-col[data-dir="up"] .tw-group { animation-direction: reverse; }
@keyframes tw-v { from { transform: translateY(0); } to { transform: translateY(calc(-100% - var(--tw-gap))); } }
.tw-card {
  width: 232px; aspect-ratio: 3 / 2;
  background: #fff; border: 1px solid #e2e2e6; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10), 0 1px 0 rgba(0,0,0,0.04);
  display: grid; place-items: center; overflow: hidden;
}
.tw-card img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.tw-fade { position: absolute; pointer-events: none; z-index: 2; }
.tw-fade-t { left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(180deg, #fff, transparent); }
.tw-fade-b { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, #fff, transparent); }
.tw-fade-l { top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, #fff, transparent); }
.tw-fade-r { top: 0; bottom: 0; right: 0; width: 18%; background: linear-gradient(270deg, #fff, transparent); }
@media (max-width: 1100px) { .tw { height: 70vh; } .tw-stage { transform: translateX(-4vw) translateZ(-200px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg) scale(1.1); } }
@media (max-width: 720px) { .tw { height: 60vh; } .tw-card { width: 170px; } .tw-stage { gap: 14px; transform: translateX(0) translateZ(-260px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg); } .tw-col { --tw-gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .tw-group { animation: none; } }

/* portfolio list box overlapping the wall by ~10% of its height */
.pf-list {
  position: relative; z-index: 3;
  margin-top: calc(min(88vh, 900px) * -0.8);
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 36px 40px 44px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}
.pf-list .pf-count { margin-bottom: 22px; }
@media (max-width: 1100px) { .pf-list { margin-top: calc(70vh * -0.8); padding: 28px 24px 32px; } }
@media (max-width: 720px) { .pf-list { margin-top: calc(60vh * -0.8); padding: 22px 16px 28px; border-radius: 14px; } }

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-info dl { display: grid; grid-template-columns: 120px 1fr; row-gap: 16px; border-top: 2px solid var(--ink); padding-top: 22px; }
.contact-info dt { font-weight: 700; color: var(--brand-deep); font-size: 14px; letter-spacing: 0.04em; }
.contact-info dd { color: #444; line-height: 1.7; }
.contact-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.contact-map a.map-link { display: inline-flex; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--brand-deep); }

/* ===== Sitemap ===== */
.sitemap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.sitemap-grid > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.sitemap-grid h3 { font-size: 18px; margin-bottom: 12px; }
.sitemap-grid a { display: block; padding: 6px 0; color: #555; font-size: 15px; }
.sitemap-grid a:hover { color: var(--brand-deep); }

/* ===== Privacy ===== */
.policy h3 { font-size: 19px; margin: 36px 0 10px; }
.policy ol, .policy ul { padding-left: 20px; color: #444; line-height: 1.85; margin-bottom: 14px; }
.policy ol li, .policy ul li { list-style: inherit; margin-bottom: 4px; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .home-sec { padding: 90px 40px; }
  .home-intro .inner, .home-biz .inner { grid-template-columns: 1fr; gap: 50px; }
  .field-grid { grid-template-columns: repeat(3, 1fr); }
  .ov-item { min-height: 210px; padding: 32px 22px 28px; }
  .ov-intro { grid-template-columns: 1fr; }
  .str-item, .str-item:nth-child(even) { grid-template-columns: 1fr; }
  .str-item:nth-child(even) .img { order: 0; }
  .aff-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .way-item { min-height: 180px; padding: 28px 56px 26px 24px; }
  .pf-grid { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-solidus .hero-scroll { left: 40px; }
}
@media (max-width: 720px) {
  :root { --header-main: 64px; }
  .header-main { padding: 0 16px; }
  .lang-toggle .lang-cur { display: none; }
  .home-sec { padding: 70px 20px; }
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .home-intro .stats { grid-template-columns: 1fr 1fr; }
  .home-intro .visual img { height: 300px; }
  .ov-grid { grid-template-columns: 1fr 1fr; }
  .ov-item { min-height: 0; padding: 26px 18px 24px; }
  .ov-ico { width: 40px; height: 40px; margin-bottom: 22px; }
  .ov-item .txt { font-size: 16px; }
  .hist-list::before { left: 0; }
  .hist-row { grid-template-columns: 1fr; padding-left: 24px; }
  .hist-row .yr { font-size: 30px; margin-bottom: 10px; }
  .hist-row .yr::after { left: -6px; top: 8px; }
  .hist-row ul { padding-left: 0; }
  .str-item .cont { padding: 28px 22px; }
  .field-strip { grid-template-columns: repeat(2, 1fr); }
  .aff-holding { grid-template-columns: 1fr; }
  .aff-grid { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
  .way-grid { grid-template-columns: 1fr; }
  .way-item { min-height: 0; padding: 22px 48px 20px 18px; }
  .way-ico { width: 36px; height: 36px; margin-bottom: 16px; }
  .way-item p { font-size: 15px; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .sitemap-grid { grid-template-columns: 1fr 1fr; }
  .hero-solidus .hero-copy { padding: 0 20px 100px; }
  .hero-solidus .hero-scroll { display: none; }
  .hero-solidus .hero-ctas { display: none; }   /* mobile KV: copy only, no CTA buttons */
  .hero-solidus .hero-ctrl { right: 12px; }
  .hero-solidus .hero-step, .hero-solidus .hero-step svg { width: 38px; height: 38px; }
  .page { padding-top: 48px; }
}