/* ═══════════════════════════════════════════════════════════════
   page-services.css (v0.23.0 — Round 4C-C)

   VERBATIM PORT from prototype 03-services.html lines 2162-3372
   (stripped of <style>/</style> boundary tags but otherwise byte-
   identical to the prototype). All Services-page-only selectors:

     #services-hero .ah-*  — Services hero atmosphere (blobs scoped
                              under #services-hero so they don't
                              collide with About's unscoped .ah-*)
     #svc-core .svc-*      — Core service intro + 4 pillars
     #ba-intro .ba-intro-* — Title block above slider
     #ba-showcase .ba-*    — Before/after slider module
     #process .vt-*        — 6-stage production strip + ribbon +
                              meta crossfade host (scoped via the
                              .vt-process class on #process)
     #portfolio-showcase .pf-*  — Selected works parallax cards
     #os-other .os-*       — Localization / Game / Key Visual rows
                              (deep gradient bg, kanji watermarks)
     #why-vertwo .wv-*     — Stats-card pattern, mono-orange
     #free-trial .ft-*     — Split CTA + concerns ↔ answers grid

   What's NOT in this file (theme-owned, do not duplicate):
     - Nav, footer, btn-orange, v-btn — components.css / theme
     - Reveal-on-scroll `.r → .r.in` transitions — design-system
     - Fonts, design-system tokens (--orange, --black, --white)

   Padding cadence: prototype uses bespoke clamp() values per
   section. The PATCH (v0.23.0) block at the END of this file
   overlays a uniform 80px top/bottom rhythm on every body
   section to match the homepage + About page cadence (PATCH 12
   in page-about.css, anchored to homepage .vertwo-news's
   clamp(56px, 6vw, 80px) ceiling). #services-hero is excluded —
   heroes use prototype values verbatim.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   SERVICES PAGE — page-specific styles
═══════════════════════════════════════════════════════════════════ */

/* ───── HERO (mirrors About's .ah-* system) ───── */
#services-hero{
  position:relative;
  min-height:50vh;
  height:auto;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#0a0a0c;
  isolation:isolate;
  padding:120px 24px 70px;
}
#services-hero .ah-bg{
  position:absolute;inset:-10% -5%;
  z-index:0;pointer-events:none;
  filter:blur(70px) saturate(140%);
  opacity:.85;will-change:transform;
}
#services-hero .ah-blob{position:absolute;border-radius:50%;mix-blend-mode:screen}
#services-hero .ah-blob--a{
  width:55vw;height:55vw;left:-10%;top:-10%;
  background:radial-gradient(circle at 30% 30%, var(--blob-color, #F27A0F) 0%, transparent 60%);
  animation:ahDriftA 22s ease-in-out infinite alternate;
}
#services-hero .ah-blob--b{
  width:50vw;height:50vw;right:-12%;top:8%;
  background:radial-gradient(circle at 70% 50%, var(--blob-color, #F5A623) 0%, transparent 60%);
  animation:ahDriftB 28s ease-in-out infinite alternate;
}
#services-hero .ah-blob--c{
  width:62vw;height:62vw;left:18%;bottom:-22%;
  background:radial-gradient(circle at 50% 50%, var(--blob-color, #EC2F7A) 0%, transparent 60%);
  animation:ahDriftC 34s ease-in-out infinite alternate;
}
@keyframes ahDriftA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vw,4vh,0) scale(1.12)}}
@keyframes ahDriftB{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-6vw,5vh,0) scale(1)}}
@keyframes ahDriftC{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-4vw,-6vh,0) scale(1.15)}}
#services-hero .ah-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;mix-blend-mode:overlay;
}
#services-hero .ah-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(10,10,12,0.0) 0%, rgba(10,10,12,0.45) 100%);
}
#services-hero .ah-inner{
  position:relative;z-index:3;
  max-width:920px;width:100%;
  text-align:center;color:#fff;
}
#services-hero .ah-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);
  margin-bottom:18px;display:inline-block;
}
#services-hero .ah-title{
  font-family:var(--font-title);
  font-size:clamp(2.2rem, 4.4vw, 4.4rem);
  font-weight:900;letter-spacing:-0.045em;line-height:1.02;
  color:#fff;margin-bottom:22px;
}
#services-hero .ah-title em{font-style:normal;color:var(--orange)}
#services-hero .ah-sub{
  font-size:clamp(0.95rem,1.25vw,1.1rem);
  font-weight:300;line-height:1.7;
  color:rgba(255,255,255,0.75);
  max-width:580px;margin:0 auto;
}
@media(max-width:600px){
  #services-hero{min-height:42vh;padding:100px 20px 50px}
}
/* ═══════════════════════════════════════════════════════════════════
   #svc-core — "Webtoon Production. End to end." + 4 pillars
═══════════════════════════════════════════════════════════════════ */
#svc-core{
  background:#fafafa;
  padding:clamp(60px,7vw,90px) 24px clamp(40px,6vw,72px);
  position:relative;
}
.svc-core-wrap{max-width:1200px;margin:0 auto}
.svc-core-head{text-align:center;max-width:760px;margin:0 auto clamp(48px,6vw,80px)}
.svc-core-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);margin-bottom:18px;display:inline-block;
}
.svc-core-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.2vw,3rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:var(--black);margin-bottom:22px;
}
.svc-core-title em{font-style:normal;color:var(--orange)}
.svc-core-sub{
  font-size:clamp(0.95rem,1.2vw,1.05rem);
  font-weight:300;line-height:1.7;
  color:var(--mid);max-width:600px;margin:0 auto;
}
/* Pillar grid — 4 across desktop, 2 across tablet, 1 mobile */
.svc-pillars{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;
}
/* v0.32.202 — VERBATIM port of the Careers Why-Vertwo card hover model
   (.cr-why-card): a mouse-tracking radial colour "blob" that blooms to
   each card's own colour, plus the slow lift + coloured ring. --gx/--gy
   are written by the SVC GLOW rAF lerp loop in page-services.js (idle
   Lissajous drift + mouse follow). NO CSS transition on --gx/--gy — the
   JS lerp IS the smoothing, exactly like Careers. */
.svc-pillar{
  position:relative;
  padding:36px 28px 32px;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  --gx:50%;
  --gy:50%;
  box-shadow:
    0 0 0 1px rgba(10,10,10,0.04),
    0 1px 4px rgba(0,0,0,0.02);
  transition:
    transform  1800ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 2200ms cubic-bezier(0.16,1,0.3,1);
}
.svc-pillar:hover{
  /* Slight visible lift (matches Careers -6px / faster ease on hover). */
  transform:translateY(-6px);
  transition:
    transform  1400ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 1600ms cubic-bezier(0.22,1,0.36,1);
}
/* Glow wash — radius 180px, position driven by --gx/--gy (verbatim from
   .cr-why-card::before). Per-card colour set in the nth-child rules below. */
.svc-pillar::before{
  content:"";position:absolute;inset:0;z-index:0;
  opacity:0.4;pointer-events:none;
  transition:opacity 2000ms cubic-bezier(0.16,1,0.3,1);
}
.svc-pillar:hover::before{
  opacity:0.62;
  transition:opacity 1300ms cubic-bezier(0.22,1,0.36,1);
}
.svc-pillar > *{position:relative;z-index:1}
/* Per-card bloom colour + matching hover ring/shadow — mirrors the four
   icon-tile colours (orange / pink / purple / blue). */
.svc-pillar:nth-child(1)::before{ background:radial-gradient(circle 180px at var(--gx,50%) var(--gy,50%), #FFD9C2, transparent 65%); }
.svc-pillar:nth-child(2)::before{ background:radial-gradient(circle 180px at var(--gx,50%) var(--gy,50%), #FFD3E2, transparent 65%); }
.svc-pillar:nth-child(3)::before{ background:radial-gradient(circle 180px at var(--gx,50%) var(--gy,50%), #E4DBFF, transparent 65%); }
.svc-pillar:nth-child(4)::before{ background:radial-gradient(circle 180px at var(--gx,50%) var(--gy,50%), #CFE0FF, transparent 65%); }
.svc-pillar:nth-child(1):hover{ box-shadow:inset 0 0 0 1px rgba(255,107,44,0.42), 0 12px 28px -10px rgba(255,107,44,0.30), 0 1px 4px rgba(0,0,0,0.02); }
.svc-pillar:nth-child(2):hover{ box-shadow:inset 0 0 0 1px rgba(255,92,138,0.42), 0 12px 28px -10px rgba(255,92,138,0.30), 0 1px 4px rgba(0,0,0,0.02); }
.svc-pillar:nth-child(3):hover{ box-shadow:inset 0 0 0 1px rgba(138,92,255,0.45), 0 12px 28px -10px rgba(138,92,255,0.33), 0 1px 4px rgba(0,0,0,0.02); }
.svc-pillar:nth-child(4):hover{ box-shadow:inset 0 0 0 1px rgba(62,130,247,0.45), 0 12px 28px -10px rgba(62,130,247,0.33), 0 1px 4px rgba(0,0,0,0.02); }
/* v0.32.153 — .svc-pillar-num removed (markup span dropped in
   page-services.php). The numbers (01–04) were a leftover from the
   prototype rhythm; the icon + title now carry the card on their own. */

.svc-pillar-icon{
  /* v0.32.153 — bumped 58 → 76 per Vic ("make the icons larger").
     Slightly larger radius keeps the inner padding proportional. */
  width:76px;height:76px;border-radius:16px;
  background:rgba(242,122,15,0.08);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
  position:relative;z-index:1;
  transition:background .35s ease;
}
/* v0.32.201 — distinct per-card icon tile colors, mirroring the Careers
   Why-Vertwo palette (Vic: "make those 4 cards have different colors like
   in the Careers page"). Card 1 keeps the brand-orange tint (base rule
   above); cards 2-4 take solid pink / purple / blue tiles. */
.svc-pillar:nth-child(2) .svc-pillar-icon{
  background:linear-gradient(135deg,#FF8FB1,#FF5C8A);
  box-shadow:0 8px 20px -6px rgba(255,92,138,0.5);
}
.svc-pillar:nth-child(3) .svc-pillar-icon{
  background:linear-gradient(135deg,#B79CFF,#8A5CFF);
  box-shadow:0 8px 20px -6px rgba(138,92,255,0.5);
}
.svc-pillar:nth-child(4) .svc-pillar-icon{
  background:linear-gradient(135deg,#5AA9FF,#3E82F7);
  box-shadow:0 8px 20px -6px rgba(62,130,247,0.5);
}
/* Card 1 keeps a solid orange tile too (was a pale 0.08 tint). */
.svc-pillar:nth-child(1) .svc-pillar-icon{
  background:linear-gradient(135deg,#FF8A4C,#FF6B2C);
  box-shadow:0 8px 20px -6px rgba(255,107,44,0.5);
}
/* Hover: gentle brighten that preserves each card's own color (the old
   rule faded every tile to the same pale orange, which would also wash
   out the now-white glyphs). */
.svc-pillar:hover .svc-pillar-icon{filter:brightness(1.06)}
/* v0.32.201 — white glyphs read cleanly on the solid color tiles (was
   orange-on-orange, low contrast), matching the Careers cards. */
.svc-pillar-icon svg{width:38px;height:38px;color:#fff;stroke:#fff}
/* v0.32.206 — smaller animated icon tiles on mobile only (Vic). */
@media (max-width: 520px){
  .svc-pillar-icon{width:52px;height:52px;border-radius:13px}
  .svc-pillar-icon svg{width:26px;height:26px}
}
.svc-pillar-title{
  font-family:var(--font-title);
  /* v0.32.153 — bumped 1.15rem → 1.4rem per Vic ("title a little
     bit larger"). Tight letter-spacing kept since the bolder weight
     can otherwise feel airy. */
  font-size:1.4rem;font-weight:900;letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--black);margin-bottom:10px;
  position:relative;z-index:1;
}
.svc-pillar-body{
  font-size:0.9rem;font-weight:300;line-height:1.6;
  color:var(--mid);
  position:relative;z-index:1;
}
@media(max-width:980px){
  .svc-pillars{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .svc-pillars{grid-template-columns:1fr;gap:16px}
  .svc-pillar{padding:28px 22px}
}
/* ═══════════════════════════════════════════════════════════════════
   #ba-intro — title above before/after slider
═══════════════════════════════════════════════════════════════════ */
#ba-intro{
  background:var(--white);
  padding:clamp(60px,8vw,110px) 24px 0;
  text-align:center;
}
.ba-intro-wrap{max-width:760px;margin:0 auto}
.ba-intro-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);margin-bottom:14px;display:inline-block;
}
.ba-intro-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.2vw,3rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:var(--black);margin-bottom:18px;
}
.ba-intro-title em{font-style:normal;color:var(--orange)}
.ba-intro-sub{
  font-size:clamp(0.95rem,1.15vw,1.05rem);
  font-weight:300;line-height:1.7;
  color:var(--mid);max-width:560px;margin:0 auto;
}
/* ═══════════════════════════════════════════════════════════════════
   BEFORE/AFTER SLIDER MODULE (verbatim from before-after-slider-module-v2_final.html)
═══════════════════════════════════════════════════════════════════ */
#ba-showcase{background:var(--white);padding:40px 24px 40px}
.ba-wrap{max-width:var(--max);margin:0 auto}
.ba-figure{
  margin:0;position:relative;border-radius:24px;overflow:hidden;background:#1a1a1a;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 20px rgba(0,0,0,0.10),
    0 14px 36px rgba(242,122,15,0.04);
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  opacity:0;transform:translateY(18px);
  animation:baReveal 1.1s 0.15s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes baReveal{to{opacity:1;transform:translateY(0)}}
.ba-stage{position:relative;width:100%;aspect-ratio:1600/750;cursor:ew-resize;touch-action:pan-y;overflow:hidden}
.ba-image{position:absolute;inset:0;pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ba-image svg{width:100%;height:100%;display:block}
.ba-image--after{will-change:clip-path;clip-path:inset(0 50% 0 0)}
.ba-divider{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:rgba(255,255,255,0.94);transform:translateX(-50%);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,0.06),0 0 16px rgba(0,0,0,0.18);
  will-change:left;z-index:5;
}
.ba-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;padding:0;border-radius:50%;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.28),
    0 1px 0 rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.05);
  cursor:grab;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),background .25s ease,width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1);
  outline:none;z-index:6;will-change:left,transform;
}
.ba-figure:hover .ba-handle,.ba-handle:focus-visible{
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:
    0 12px 36px rgba(242,122,15,0.38),
    0 1px 0 rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.05);
}
.ba-handle.dragging,.ba-handle:active{
  cursor:grabbing;background:var(--orange);border-color:rgba(255,255,255,0.4);
  box-shadow:
    0 14px 40px rgba(242,122,15,0.55),
    0 2px 4px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transform:translate(-50%,-50%) scale(1.04);
}
.ba-handle.dragging .ba-handle__icon,.ba-handle:active .ba-handle__icon{stroke:#fff}
.ba-handle__icon{width:26px;height:26px;stroke:#1a1a1a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:stroke .25s ease;pointer-events:none}
.ba-label{
  position:absolute;top:20px;
  font-family:var(--font-body);font-size:0.7rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;
  /* Solid brand-orange chips so the label reads cleanly regardless of
     where the slider is dragged — no backdrop blur, no semi-transparency.
     z-index pushed past the divider (5) and handle (6) so the chip is
     unambiguously the top layer of the comparison stage. */
  background:var(--orange);
  color:#fff;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 6px 18px rgba(242,122,15,0.45),
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.28);
  pointer-events:none;
  z-index:10;
  opacity:0;animation:baReveal 0.9s 0.6s cubic-bezier(.16,1,.3,1) forwards;
}
.ba-label--before{left:20px}
.ba-label--after{right:20px}
.ba-hint{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  font-family:var(--font-body);font-size:0.72rem;font-weight:500;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(255,255,255,0.78);
  background:rgba(0,0,0,0.32);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  pointer-events:none;z-index:10;opacity:0;
  animation:baHintIn 1s 1.3s cubic-bezier(.16,1,.3,1) forwards,baHintPulse 2.4s 2.6s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes baHintIn{to{opacity:1}}
@keyframes baHintPulse{0%,100%{opacity:.8}50%{opacity:1}}
.ba-hint--gone{animation:baHintOut .5s ease forwards !important}
@keyframes baHintOut{to{opacity:0;transform:translateX(-50%) translateY(6px)}}
.ba-caption{
  text-align:center;font-family:var(--font-body);
  font-size:0.92rem;font-weight:400;color:var(--mid);
  margin:28px auto 0;max-width:520px;line-height:1.6;
}
@media(max-width:860px){
  #ba-showcase{padding:30px 20px 30px}
  .ba-figure{border-radius:20px}
  .ba-handle{width:58px;height:58px}
  .ba-handle__icon{width:23px;height:23px}
}
@media(max-width:600px){
  #ba-showcase{padding:20px 16px 24px}
  .ba-figure{border-radius:16px}
  .ba-handle{width:50px;height:50px;border-width:1px}
  .ba-handle__icon{width:20px;height:20px;stroke-width:2.6}
  .ba-label{top:12px;font-size:0.6rem;padding:6px 11px;letter-spacing:0.18em}
  .ba-label--before{left:12px}
  .ba-label--after{right:12px}
  .ba-hint{bottom:14px;font-size:0.62rem;padding:6px 11px}
  .ba-caption{margin-top:20px;font-size:0.85rem;padding:0 8px}
}
@media(max-width:380px){.ba-handle{width:46px;height:46px}.ba-handle__icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){
  .ba-figure,.ba-label{opacity:1;transform:none;animation:none !important}
  .ba-hint{display:none}
  .ba-handle{transition:background .2s ease,box-shadow .2s ease !important}
}
/* ═══════════════════════════════════════════════════════════════════
   PROCESS MODULE (verbatim from vertwo-process-final.html, scoped)
═══════════════════════════════════════════════════════════════════ */
.vt-process{
  background:#fff;color:var(--black);
  padding:clamp(50px,6vw,90px) 0 clamp(60px,7vw,90px);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;overflow:hidden;
}
.vt-process .vt-container{max-width:1320px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.vt-process-head{text-align:center;max-width:720px;margin:0 auto clamp(48px,6vw,96px)}
.vt-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);
  margin-bottom:14px;display:inline-block;
}
.vt-process-head h2{
  font-family:var(--font-title);font-weight:900;
  font-size:clamp(2rem,4.2vw,3rem);line-height:1.08;letter-spacing:-0.04em;
  margin:0 0 24px;color:var(--black);
}
.vt-lede{
  font-family:var(--font-body);
  font-size:clamp(0.95rem,1.15vw,1.05rem);line-height:1.7;
  color:var(--mid);max-width:560px;margin:0 auto;font-weight:300;
}
.vt-stage{display:flex;flex-direction:column;gap:0}
.vt-strip{position:relative;display:flex;width:100%;aspect-ratio:1824/1080}
.vt-panel{flex:1 1 0;min-width:0;position:relative;overflow:hidden}
.vt-panel:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.vt-panel:nth-child(6){border-top-right-radius:14px;border-bottom-right-radius:14px}
.vt-panel img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.vt-glow{
  position:absolute;top:0;left:0;pointer-events:none;
  box-sizing:border-box;border-radius:4px;
  border:2px solid var(--orange);
  box-shadow:
    0 0 0 1px rgba(242,122,15,0.32),
    0 0 32px rgba(242,122,15,0.60),
    0 0 80px rgba(242,122,15,0.32),
    inset 0 0 12px rgba(242,122,15,0.18);
  opacity:0;
  transition:opacity 320ms cubic-bezier(0.25,0.46,0.45,0.94),border-radius 320ms cubic-bezier(0.25,0.46,0.45,0.94);
  contain:layout style size;
  will-change:transform,width,height;
}
.vt-glow.is-visible{opacity:1}
.vt-ribbon{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:4px;padding:4px;
  border:1px solid #EAEAEA;border-radius:14px;background:#fff;
  margin-top:clamp(4px,0.6vw,8px);
}
.vt-ribbon button{
  appearance:none;background:transparent;border:none;font:inherit;cursor:pointer;
  padding:18px 8px;display:flex;flex-direction:column;align-items:center;
  gap:8px;border-radius:10px;color:#8A8A8A;
  transition:background 220ms cubic-bezier(0.25,0.46,0.45,0.94),color 220ms cubic-bezier(0.25,0.46,0.45,0.94),box-shadow 220ms cubic-bezier(0.25,0.46,0.45,0.94);
  position:relative;
}
.vt-ribbon button:hover,.vt-ribbon button.is-active{
  background:var(--orange);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,0.04),0 6px 16px -6px rgba(242,122,15,0.45);
}
.vt-ribbon-num{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:600;letter-spacing:0.04em}
.vt-ribbon-label{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;opacity:0.72}
.vt-ribbon button:hover .vt-ribbon-label,.vt-ribbon button.is-active .vt-ribbon-label{opacity:0.95}
@media(max-width:480px){
  .vt-ribbon-label{display:none}
  .vt-ribbon button{padding:14px 4px}
}
/* Two-layer crossfade host: both .vt-step-meta children share the same
   grid cell so they stack visually. The host's min-height is locked by JS
   on init to the max content height across all 6 steps — this prevents
   layout shifts between steps where content length varies. Without this
   the row would resize during the transition, making the fade feel jumpy. */
.vt-step-meta-host{
  display:grid;
  margin-top:clamp(8px,1.2vw,18px);
  isolation:isolate;
}
.vt-step-meta{
  /* Both children land in the same single grid cell → overlap. */
  grid-area:1/1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:clamp(56px,5vw,72px) auto;
  grid-template-areas:
    "title title desc desc desc desc"
    "num   num   tags tags tags tags";
  column-gap:4px;
  row-gap:clamp(20px,2.4vw,32px);
  align-items:center;
  align-content:start;
  /* Layered fade — only `.is-active` is visible at any moment.
     Linear-ish curve gives the most uniform crossfade — strong easing
     curves make the 50% midpoint feel like a "hold" which reads as messy. */
  opacity:0;
  pointer-events:none;
  transition:opacity 700ms cubic-bezier(0.45,0,0.55,1);
  /* GPU layer so the opacity transition composites cleanly. */
  will-change:opacity;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
.vt-step-meta.is-active{
  opacity:1;
  pointer-events:auto;
}
.vt-step-title{grid-area:title;min-width:0;align-self:start}
.vt-step-desc{grid-area:desc;min-width:0;align-self:start}
.vt-step-num{grid-area:num;min-width:0}
.vt-step-tags{grid-area:tags;min-width:0}
@media(max-width:768px){
  .vt-step-meta{
    grid-template-columns:1fr auto;grid-template-rows:auto;
    grid-template-areas:"title num""desc desc""tags tags";
    column-gap:16px;row-gap:18px;
  }
  .vt-step-meta-host{margin-top:24px}
}
.vt-step-num{
  font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:0.18em;color:var(--orange);margin:0;
}
.vt-step-title{
  font-family:var(--font-title);font-weight:900;
  font-size:clamp(28px,3.6vw,48px);line-height:1.02;letter-spacing:-0.02em;
  margin:0;color:var(--black);
}
.vt-step-desc{font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:#5A5A5A;margin:0;font-weight:400}
.vt-step-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.vt-step-tag{
  font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:#5A5A5A;padding:7px 12px;
  border:1px solid #EAEAEA;border-radius:999px;background:#fff;
}
@media(prefers-reduced-motion:reduce){
  .vt-step-meta{transition:opacity 200ms cubic-bezier(0.25,0.46,0.45,0.94)}
}
/* ═══════════════════════════════════════════════════════════════════
   #os-other — Other Services (Localization, Game Assets, Key Visual)
   Full-width rows with deep gradient backgrounds, kanji parallax watermarks,
   tag pills with hover glow, row-wide hover state.
═══════════════════════════════════════════════════════════════════ */
#os-other{
  background:#0a0a0c;
  padding:0;position:relative;
  overflow:hidden;
}
#os-other .os-head{
  text-align:center;
  padding:clamp(48px,6vw,80px) 24px clamp(28px,4vw,48px);
  background:#0a0a0c;
}
.os-head-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);margin-bottom:14px;display:inline-block;
}
.os-head-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.2vw,3rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:#fff;margin-bottom:18px;
}
.os-head-title em{font-style:normal;color:var(--orange)}
.os-head-sub{
  font-size:clamp(0.95rem,1.15vw,1.05rem);
  font-weight:300;line-height:1.7;
  color:rgba(255,255,255,0.65);
  max-width:560px;margin:0 auto;
}
.os-rows{display:flex;flex-direction:column}
.os-row{
  position:relative;
  padding:clamp(60px,7vw,100px) clamp(24px,5vw,72px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(24px,4vw,56px);
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,0.06);
  cursor:default;
  transition:background .5s ease;
}
.os-row:last-child{border-bottom:1px solid rgba(255,255,255,0.06)}
/* Per-row deep gradient backgrounds */
.os-row--loc{background:linear-gradient(125deg,#0a1230 0%,#0a1f4a 50%,#0a0a14 100%)}
.os-row--game{background:linear-gradient(125deg,#1a0828 0%,#3a0a4e 50%,#0a0512 100%)}
.os-row--kv{background:linear-gradient(125deg,#2a0810 0%,#5a0a1e 50%,#10050a 100%)}
/* Kanji watermark — large character on right side, parallaxes with mouse */
.os-row-kanji{
  position:absolute;
  right:-2%;top:50%;
  transform:translate(0,-50%);
  font-family:serif;
  font-size:clamp(280px,38vw,520px);
  font-weight:900;
  line-height:0.9;
  color:rgba(255,255,255,0.025);
  letter-spacing:-0.04em;
  pointer-events:none;
  z-index:0;
  user-select:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1),color .5s ease;
  will-change:transform;
}
.os-row:hover .os-row-kanji{
  color:rgba(255,255,255,0.045);
}
/* Glow that brightens as cursor enters row */
.os-row::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(242,122,15,0.12) 0%, rgba(242,122,15,0) 40%);
  opacity:0;transition:opacity .4s ease;
  pointer-events:none;z-index:1;
}
.os-row:hover::before{opacity:1}
.os-row-num{
  font-family:var(--font-title);
  font-size:clamp(3.5rem,7vw,6rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1;
  color:rgba(255,255,255,0.10);
  position:relative;z-index:2;
  transition:color .4s ease;
}
.os-row:hover .os-row-num{color:rgba(242,122,15,0.45)}
.os-row-main{
  position:relative;z-index:2;
  max-width:540px;
}
/* v0.32.150 — .os-row-head pairs the icon + title in a single horizontal
   row so the card reads as [icon] [TITLE] / body / tags instead of icon
   stacked above an empty space. Replaces the prior layout where the icon
   had margin-bottom:22px and the title rendered as a separate block. */
.os-row-head{
  display:flex;align-items:center;gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.os-row-icon{
  /* v0.32.150 — bumped 48 → 64 per Vic ("make the icons a little bit larger"). */
  width:64px;height:64px;border-radius:14px;
  background:rgba(242,122,15,0.14);
  border:1px solid rgba(242,122,15,0.32);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.os-row:hover .os-row-icon{
  background:rgba(242,122,15,0.22);
  border-color:rgba(242,122,15,0.55);
  transform:scale(1.05);
}
/* v0.32.150 — svg bumped 22 → 32 in proportion to the container. */
.os-row-icon svg{width:32px;height:32px;color:var(--orange);stroke:var(--orange)}
.os-row-title{
  font-family:var(--font-title);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:900;letter-spacing:-0.03em;line-height:1.05;
  color:#fff;margin:0;
  /* v0.32.150 — margin moved to .os-row-head; title now centred against
     icon block height. */
}
.os-row--loc .os-row-title{color:var(--gold)}
.os-row-body{
  font-size:0.98rem;font-weight:300;line-height:1.65;
  /* v0.24.4 — opacity 0.62 → 0.85 per Vic ("increase text
     opacity on the other services section"). Body text now
     reads cleaner against both blob bg and image bg. */
  color:rgba(255,255,255,0.85);
  margin-bottom:24px;
}
.os-row-tags{
  display:flex;flex-wrap:wrap;gap:8px;
}
.os-row-tag{
  font-size:0.78rem;font-weight:500;letter-spacing:0.01em;
  /* v0.32.151 — chips tinted orange per Vic ("the tabs/chips are hard
     to see, can you tint them orange as well"). Previously white-on-
     transparent at 28% border opacity, which read as ghost outlines on
     the dark gradient backgrounds. Now: amber-orange text + saturated
     orange border + subtle orange fill so each chip reads as a
     branded artifact instead of a stroke ghost. */
  color:#FFCFA3; /* warm peach derived from --orange — high legibility on dark */
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(242,122,15,0.55);
  background:rgba(242,122,15,0.10);
  transition:border-color .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;
}
.os-row:hover .os-row-tag{
  border-color:rgba(242,122,15,0.75);
  background:rgba(242,122,15,0.14);
}
.os-row-tag:hover{
  /* v0.32.151 — individual chip hover bumped to read above the row-
     wide hover state (which already tints them all). */
  border-color:rgba(242,122,15,0.95);
  background:rgba(242,122,15,0.20);
  color:#fff;
  box-shadow:0 0 0 2px rgba(242,122,15,0.18);
}
/* CTA cell: holds the v-btn so the row's grid alignment stays clean.
   The .v-btn itself supplies all the visual styling. We just position it
   in the third grid column on desktop and let it stretch full-width on mobile. */
.os-row-cta{
  position:relative;z-index:2;
  white-space:nowrap;
  align-self:center;
}
@media(max-width:860px){
  .os-row{
    grid-template-columns:auto 1fr;
    gap:24px;
    padding:48px 24px;
  }
  .os-row-cta{
    grid-column:1/-1;
    margin-top:16px;
    /* Tablet/mobile: CTA spans its own row at the bottom of the card,
       but the v-btn itself shrinks to content (justify-self:end pushes it
       to the right edge of the row instead of stretching across it). */
    justify-self:end;
    align-self:flex-start;
  }
  .os-row-kanji{font-size:clamp(220px,55vw,380px);right:-12%}
}
@media(max-width:520px){
  .os-row{
    grid-template-columns:1fr;
    gap:16px;
  }
  .os-row-num{font-size:3rem;margin-bottom:-8px}
  .os-row-title{font-size:1.6rem}
}
/* ═══════════════════════════════════════════════════════════════════
   #why-vertwo — Stats-card pattern (mono-orange).
   Mirrors About's .vw-stats: cursor-tracking radial gradient wash, 
   idle Lissajous drift, hover lift with orange shadow, odometer numbers.
═══════════════════════════════════════════════════════════════════ */
#why-vertwo{
  background:#fafafa;
  padding:clamp(60px,7vw,90px) 24px clamp(60px,7vw,90px);
}
.wv-wrap{max-width:1280px;margin:0 auto}
.wv-head{text-align:center;max-width:640px;margin:0 auto clamp(48px,6vw,72px)}
.wv-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);margin-bottom:14px;display:inline-block;
}
.wv-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.2vw,3rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:var(--black);margin-bottom:14px;
}
.wv-title em{font-style:normal;color:var(--orange)}
.wv-sub{
  font-size:clamp(0.95rem,1.15vw,1.05rem);
  font-weight:300;line-height:1.7;color:var(--mid);
  max-width:520px;margin:0 auto;
}
/* Grid — 4-up desktop, 2-up tablet/mobile */
.wv-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
}
@media(max-width:860px){
  .wv-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:420px){.wv-grid{gap:8px}}
/* Card — white surface, cursor-following orange wash, hover lift */
.wv-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:clamp(24px,2.4vw,36px) clamp(14px,1.8vw,28px);
  overflow:hidden;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(10,10,10,0.04),
    0 1px 4px rgba(0,0,0,0.02);
  transition:
    transform 1800ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 2200ms cubic-bezier(0.16,1,0.3,1);
  cursor:default;
}
.wv-card:hover{
  transform:translateY(-4px);
  transition:
    transform 1400ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 1600ms cubic-bezier(0.22,1,0.36,1);
  box-shadow:
    inset 0 0 0 1px rgba(242,122,15,0.42),
    0 12px 28px -10px rgba(242,122,15,0.34),
    0 1px 4px rgba(0,0,0,0.02);
}
/* Wash that follows the cursor — JS sets --gx/--gy CSS vars */
.wv-card::before{
  content:'';position:absolute;inset:0;
  z-index:0;opacity:0.42;pointer-events:none;
  background:radial-gradient(circle 200px at var(--gx,50%) var(--gy,50%),
             rgba(254,212,180,0.95) 0%, rgba(254,212,180,0.45) 35%, transparent 70%);
  transition:opacity 2000ms cubic-bezier(0.16,1,0.3,1);
}
.wv-card:hover::before{
  opacity:0.72;
  transition:opacity 1300ms cubic-bezier(0.22,1,0.36,1);
}
/* Card content sits above the wash */
.wv-content{position:relative;z-index:1}
/* Number with odometer support — same pattern as .vw-number */
.wv-number{
  font-family:var(--font-title);font-weight:900;
  font-size:clamp(40px,4.6vw,72px);
  line-height:clamp(40px,4.6vw,72px);
  letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;
  color:var(--orange);
  display:flex;align-items:flex-start;justify-content:center;
  height:clamp(40px,4.6vw,72px);
  margin-bottom:clamp(10px,1vw,16px);
}
.wv-digit-slot{
  display:inline-block;
  height:clamp(40px,4.6vw,72px);
  overflow:hidden;
  line-height:clamp(40px,4.6vw,72px);
  vertical-align:top;
}
.wv-digit-strip{
  display:flex;flex-direction:column;
  transform:translateY(0);will-change:transform;
}
.wv-digit-strip > span{
  display:block;
  height:clamp(40px,4.6vw,72px);
  line-height:clamp(40px,4.6vw,72px);
}
.wv-separator,.wv-suffix{
  display:inline-block;
  line-height:clamp(40px,4.6vw,72px);
}
/* Static text variant for non-numeric stats (e.g. "JLPT N2", "Free") */
.wv-stat-text{
  font-family:var(--font-title);font-weight:900;
  /* Reduced from clamp(34,3.8,58) to fit longer strings like "free trial".
     Still visually weighty enough to feel like a stat header. */
  font-size:clamp(26px,3vw,44px);
  line-height:clamp(40px,4.6vw,72px);
  letter-spacing:-0.04em;
  color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  height:clamp(40px,4.6vw,72px);
  margin-bottom:clamp(10px,1vw,16px);
  white-space:nowrap;
}
.wv-divider{
  width:55%;height:2px;
  background:var(--black);
  margin:0 auto 12px;
  opacity:0.85;
}
.wv-label{
  font-family:var(--font-title);font-weight:700;
  font-size:clamp(16px,1.6vw,22px);
  letter-spacing:-0.015em;line-height:1.15;
  color:var(--black);
  margin-bottom:8px;
  text-transform:lowercase;
}
.wv-descriptor{
  font-family:var(--font-body);font-weight:400;
  font-size:clamp(12px,1vw,14px);
  letter-spacing:0.005em;line-height:1.5;
  color:var(--mid);
  text-transform:lowercase;
}
@media (prefers-reduced-motion: reduce){
  .wv-card,.wv-card:hover,.wv-card::before,.wv-card:hover::before,.wv-digit-strip{
    transition:none !important;
  }
  .wv-card:hover{transform:none}
}
/* ═══════════════════════════════════════════════════════════════════
   #free-trial — split white/dark, concerns ↔ answers
═══════════════════════════════════════════════════════════════════ */
#free-trial{
  background:#fff;
  padding:clamp(60px,7vw,90px) 24px clamp(40px,5vw,64px);
}
.ft-trial-frame{
  max-width:1280px;margin:0 auto;
  border-radius:24px;
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 4px rgba(0,0,0,0.04),
    0 30px 80px rgba(0,0,0,0.10);
  position:relative;
  isolation:isolate;
}
.ft-trial-frame::before{
  /* thin orange accent rule along top edge */
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#F27A0F,#F5A623,#F27A0F);
  z-index:5;
}
/* Left side — white */
.ft-trial-left{
  padding:clamp(40px,5vw,72px) clamp(32px,4vw,56px);
  background:#fff;
  display:flex;flex-direction:column;justify-content:center;
}
.ft-trial-badge{
  display:inline-flex;align-items:center;gap:14px;
  padding:11px 24px;border-radius:999px;
  background:rgba(242,122,15,0.12);
  border:1px solid rgba(242,122,15,0.32);
  margin-bottom:28px;
  width:max-content;
}
.ft-trial-badge-dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--orange);
  animation:ftDotPulse 2.2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes ftDotPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,122,15,0.55)}
  70%{box-shadow:0 0 0 14px rgba(242,122,15,0)}
}
.ft-trial-badge-text{
  font-size:0.84rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--orange);
}
.ft-trial-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.2vw,3rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:var(--black);margin-bottom:18px;
}
.ft-trial-title em{font-style:normal;color:var(--orange)}
.ft-trial-body{
  font-size:0.95rem;font-weight:300;line-height:1.7;
  color:var(--mid);margin-bottom:28px;
}
.ft-trial-body strong{color:var(--black);font-weight:600}
/* Constrain the v-btn to its natural width inside the column-flex container.
   Without this it stretches to 100% of the parent. align-self overrides the
   parent's default `align-items: stretch`. */
.ft-trial-left .v-btn{
  align-self:flex-start;
}
/* (Old .ft-trial-cta replaced with global .v-btn — keeps free-trial in lockstep
   with the same primary CTA used on the homepage's "view open positions") */

/* Right side — dark */
.ft-trial-right{
  padding:clamp(40px,5vw,72px) clamp(32px,4vw,56px);
  background:#1a1a1a;
  display:flex;flex-direction:column;justify-content:center;
}
.ft-trial-right-label{
  font-size:0.7rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(255,255,255,0.45);
  margin-bottom:20px;
}
.ft-pain-solution{display:flex;flex-direction:column;gap:14px}
.ft-ps-card{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:18px;
  padding:18px 20px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  isolation:isolate;
  transition:
    border-color .45s cubic-bezier(.16,1,.3,1),
    background .45s cubic-bezier(.16,1,.3,1),
    box-shadow .55s cubic-bezier(.16,1,.3,1),
    transform .35s cubic-bezier(.16,1,.3,1);
}
/* Soft inner orange glow that fades in on hover */
.ft-ps-card::before{
  content:'';position:absolute;inset:0;
  border-radius:14px;
  background:radial-gradient(ellipse at 50% 50%, rgba(242,122,15,0.20) 0%, rgba(242,122,15,0) 70%);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
  z-index:-1;
}
.ft-ps-card:hover{
  background:linear-gradient(135deg, rgba(242,122,15,0.18) 0%, rgba(242,122,15,0.08) 100%);
  border-color:rgba(242,122,15,0.55);
  box-shadow:
    0 0 0 1px rgba(242,122,15,0.20),
    0 12px 32px -8px rgba(242,122,15,0.40),
    0 24px 60px -16px rgba(242,122,15,0.25);
  transform:translateY(-2px);
}
.ft-ps-card:hover::before{opacity:1}
.ft-ps-pain,.ft-ps-solution{min-width:0;position:relative;z-index:1}
.ft-ps-label{
  font-size:0.62rem;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  margin-bottom:6px;
  transition:color .45s cubic-bezier(.16,1,.3,1);
}
.ft-ps-solution .ft-ps-label{color:var(--orange)}
.ft-ps-card:hover .ft-ps-pain .ft-ps-label{color:rgba(255,255,255,0.85)}
.ft-ps-card:hover .ft-ps-solution .ft-ps-label{color:#FFB366}
.ft-ps-text{
  font-size:0.84rem;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,0.85);
  transition:color .45s cubic-bezier(.16,1,.3,1);
}
.ft-ps-card:hover .ft-ps-text{color:#fff}
.ft-ps-arrow{
  width:30px;height:30px;border-radius:50%;
  background:rgba(242,122,15,0.10);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;z-index:1;
  transition:background .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1);
}
.ft-ps-card:hover .ft-ps-arrow{
  background:var(--orange);
  transform:translateX(3px) scale(1.05);
  box-shadow:0 0 16px rgba(242,122,15,0.55), 0 0 0 4px rgba(242,122,15,0.18);
}
.ft-ps-arrow svg{width:14px;height:14px;color:var(--orange);stroke:var(--orange);transition:color .35s ease,stroke .35s ease}
.ft-ps-card:hover .ft-ps-arrow svg{color:#fff;stroke:#fff}
@media(max-width:860px){
  .ft-trial-frame{grid-template-columns:1fr}
  .ft-trial-right{border-top:1px solid rgba(255,255,255,0.06)}
}
@media(max-width:520px){
  .ft-ps-card{
    grid-template-columns:1fr;
    gap:10px;
  }
  .ft-ps-arrow{
    transform:rotate(90deg);
    margin:0 auto;
  }
  .ft-ps-card:hover .ft-ps-arrow{transform:rotate(90deg) translateX(2px)}
}
/* ═══════════════════════════════════════════════════════════════════
   #portfolio-showcase — selected works with scroll-coupled parallax
   Light canvas with subtle gradient mesh, tilted/staggered cards, 
   each travels at its own --speed during scroll.
═══════════════════════════════════════════════════════════════════ */
#portfolio-showcase{
  position:relative;
  background:#fafafa;
  padding:clamp(60px,7vw,90px) 24px clamp(60px,7vw,90px);
  overflow:hidden;
  isolation:isolate;
}
/* Soft animated background — orange + warm-amber radial blobs + faint grid */
.pf-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;
}
.pf-bg-blob{
  position:absolute;border-radius:50%;
  filter:blur(80px) saturate(140%);
  opacity:0.42;
  will-change:transform;
}
.pf-bg-blob--a{
  width:46vw;height:46vw;
  left:-8%;top:-12%;
  background:radial-gradient(circle at 35% 35%, rgba(242,122,15,0.55) 0%, rgba(242,122,15,0) 65%);
  animation:pfBlobA 28s ease-in-out infinite alternate;
}
.pf-bg-blob--b{
  width:42vw;height:42vw;
  right:-10%;bottom:-18%;
  background:radial-gradient(circle at 60% 50%, rgba(245,166,35,0.42) 0%, rgba(245,166,35,0) 65%);
  animation:pfBlobB 34s ease-in-out infinite alternate;
}
@keyframes pfBlobA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vw,3vh,0) scale(1.08)}}
@keyframes pfBlobB{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-5vw,-4vh,0) scale(0.96)}}
.pf-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}
.pf-wrap{
  position:relative;z-index:1;
  max-width:1320px;margin:0 auto;
}
.pf-head{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(48px,6vw,80px);
}
.pf-eyebrow{
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--eyebrow);
  margin-bottom:14px;display:inline-block;
}
.pf-title{
  font-family:var(--font-title);
  font-size:clamp(2rem,4.2vw,3rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:var(--black);margin-bottom:18px;
}
.pf-title em{font-style:normal;color:var(--orange)}
.pf-sub{
  font-size:clamp(0.95rem,1.2vw,1.08rem);
  font-weight:300;line-height:1.7;color:var(--mid);
  max-width:580px;margin:0 auto;
}
/* Grid — 4 tilted cards staggered vertically; each ALL gets a --pf-tilt
   and --pf-delay inline so the variation is per-card without extra classes. */
.pf-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);
  padding:0 clamp(8px,2vw,40px);
  margin-bottom:clamp(48px,6vw,72px);
}
/* Cards in even slots sit lower for the staggered "drift" effect */
.pf-card--up{
  transform:translateY(-32px);
}
.pf-card{
  position:relative;
  border-radius:18px;
  /* The card itself receives the parallax translateY via --pf-parallax (set by JS) */
  transform:translate3d(0, var(--pf-parallax, 0px), 0) rotate(var(--pf-tilt, 0deg));
  transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
  cursor:pointer;
}
.pf-card--up{
  transform:translate3d(0, calc(-32px + var(--pf-parallax, 0px)), 0) rotate(var(--pf-tilt, 0deg));
}
.pf-card:hover{
  transform:translate3d(0, calc(var(--pf-parallax, 0px) - 8px), 0) rotate(0deg);
  z-index:2;
}
.pf-card--up:hover{
  transform:translate3d(0, calc(-32px + var(--pf-parallax, 0px) - 8px), 0) rotate(0deg);
}
/* Hover ring + glow live on .pf-card (the parent), NOT on .pf-card-frame.
   The frame has overflow:hidden + a -webkit-mask-image (corner-leak fix
   for Chrome) — both of those clip box-shadow. The .pf-card parent has
   neither, so shadows on it render freely. Card and frame share the same
   18px radius and the frame fills the card 100%, so a 0-offset shadow on
   .pf-card sits flush against the visible card edge — looks like a border
   on the frame, but actually renders. */
.pf-card:hover{
  box-shadow:
    0 0 0 1.5px rgba(242,122,15,0.85),
    0 14px 32px -10px rgba(242,122,15,0.40),
    0 24px 80px -16px rgba(242,122,15,0.28);
}
.pf-card-frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#1a1a1a;
  /* A4 portrait ratio (1:√2) — matches manga/webtoon cover proportions */
  aspect-ratio:1/1.414;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 4px 12px rgba(0,0,0,0.08),
    0 24px 56px -12px rgba(0,0,0,0.22);
  /* Chrome border-radius bug fix:
     Combining border-radius + overflow:hidden + a transformed parent
     causes Chrome to briefly leak the unclipped (sharp-cornered) inner
     rectangle during transform transitions — the GPU compositor paints
     the rectangle before the rounded-corner mask catches up. The triple
     fix below all need to be present:
       1) translateZ(0) — forces the frame onto its own compositor layer
       2) isolation:isolate — forces a new stacking context
       3) -webkit-mask-image — forces an explicit clip path that the
          compositor honors atomically
     We previously dropped (3) thinking (1)+(2) were sufficient — they're
     not. The mask is the one doing the actual corner-clipping work; the
     other two only handle the GPU layer. The mask clips box-shadow as a
     side effect, which is why the orange hover glow had to move up to
     .pf-card (parent, unmasked) — see .pf-card:hover above.
     Safari handles all of this correctly by default; this stack is for
     Chrome/Edge. */
  transform:translateZ(0);
  isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.pf-card-img{
  position:absolute;inset:0;
  overflow:hidden;
}
.pf-card-img img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .55s cubic-bezier(.16,1,.3,1);
  filter:saturate(0.96) contrast(0.98);
}
.pf-card:hover .pf-card-img img{
  transform:scale(1.06);
  filter:saturate(1.08) contrast(1.02);
}
/* Bottom-fade overlay so meta text reads cleanly over any image */
.pf-card-overlay{
  position:absolute;left:0;right:0;bottom:0;
  height:62%;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.20) 35%,
    rgba(0,0,0,0.65) 75%,
    rgba(0,0,0,0.92) 100%);
  pointer-events:none;
}
.pf-card-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(14px,2vw,22px) clamp(14px,1.8vw,20px);
}
.pf-card-tag{
  display:inline-block;
  font-size:0.66rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--orange);
  padding:5px 10px;
  border-radius:999px;
  background:rgba(242,122,15,0.14);
  border:1px solid rgba(242,122,15,0.32);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  margin-bottom:10px;
}
.pf-card-name{
  font-family:var(--font-title);
  font-size:clamp(1rem,1.5vw,1.35rem);
  font-weight:900;letter-spacing:-0.025em;line-height:1.1;
  color:#fff;
  margin:0;
  transition:color .35s ease;
}
.pf-card:hover .pf-card-name{color:#FFCBA0}
/* CTA wrap — holds the v-btn + note. The v-btn itself ships its own styling
   (inherited from the homepage CSS at the top of <head>). */
.pf-cta-wrap{
  text-align:center;
  position:relative;z-index:1;
}
.pf-cta-note{
  margin:18px 0 0;
  font-size:0.78rem;font-weight:500;
  color:var(--mid);letter-spacing:0.02em;
}
/* Responsive breakpoints — three tiers:
   
   1. Desktop (≥ 1101px) — 4 cards with full tilt + parallax + stagger.
   2. Tablet  (768–1100px) — 3 cards (4th hidden) with full tilt + parallax
      + stagger. The "filmstrip" gesture is preserved at a slightly larger
      card size (~310px each vs ~290px at desktop).
   3. Mobile  (≤ 767px) — 1-column stack, no tilt or parallax (full-width
      tilted cards would read as broken; vertical parallax would push
      adjacent cards into each other).
   
   Note: the 4th card stays in the DOM (display:none, not removed) so when
   the CMS is bound later, all 4 entries are still authored — only the
   desktop+ tier renders all four. */

@media (max-width:1100px) and (min-width:768px){
  /* TABLET — keep desktop treatment, drop to 3 cards. */
  .pf-grid{
    grid-template-columns:repeat(3,1fr);
  }
  /* Hide the 4th card. The down-up-down-up rhythm collapses cleanly to
     down-up-down (cards 1, 2, 3 keep their original tilt directions). */
  .pf-card:nth-child(4){display:none}
  /* Tilt and parallax stay enabled — this is what makes the section pop. */
}
@media (max-width:767px){
  /* MOBILE — single column, no tilt, no parallax. */
  .pf-grid{
    grid-template-columns:1fr;
    gap:18px;
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
  }
  .pf-card,.pf-card--up{
    --pf-parallax:0px;
    --pf-tilt:0deg;
    transform:none;
  }
  .pf-card:hover,.pf-card--up:hover{
    transform:translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce){
  .pf-card,.pf-card-frame,.pf-card-img img,.pf-cta::before{transition:none !important;animation:none !important}
  .pf-bg-blob{animation:none !important}
  .pf-card,.pf-card--up{transform:none !important}
}
</style>


/* ═══════════════════════════════════════════════════════════════
   PATCH (v0.23.0) — uniform section padding to match
   Homepage + About-page cadence.

   Reference: page-about.css PATCH 12 (v0.21.19), anchored to
   homepage .vertwo-news's clamp(56px, 6vw, 80px) cadence ceiling.
   Going from per-section bespoke clamp(60-110px) values
   (prototype) to a uniform 80px top/bottom on every body section
   so the rhythm matches About and the homepage.

   Boundary-tightening exception: #ba-intro → #ba-showcase share
   a white background and read as one block (title-then-demo for
   the before/after slider). Tighten facing pads to 32+32 = 64px,
   identical to About's #about-intro / #about-stats pair from
   PATCH 12. Other adjacent boundaries keep the full 80px because
   they cross bg-color changes that earn the larger rhythm.

   #services-hero is excluded — heroes use prototype values
   verbatim (120px / 70px desktop, 100px / 50px mobile).

   #process: outer left/right padding is 0 (the .vt-strip needs
   to bleed full-width); top/bottom join the uniform rhythm.
   #os-other: outer pad was 0 in prototype with rows carrying
   their own top/bottom — bring outer to 80/80 so the section
   breathes at its boundary with #portfolio-showcase above and
   #why-vertwo below.

   Mobile responsive: scale via clamp(56px, 6vw, 80px) at the
   860px breakpoint to mirror homepage-news on narrow viewports.
   ═══════════════════════════════════════════════════════════════ */
#svc-core,
#ba-intro,
#ba-showcase,
#process,
#portfolio-showcase,
#os-other,
#why-vertwo,
#free-trial {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Re-apply original horizontal padding (the simple top/bottom
   rule above clobbers horizontal pads for sections that had
   non-24px sides). */
#svc-core           { padding-left: 24px; padding-right: 24px; }
#ba-intro           { padding-left: 24px; padding-right: 24px; }
#ba-showcase        { padding-left: 24px; padding-right: 24px; }
#process            { padding-left: 0;    padding-right: 0;    }
#portfolio-showcase { padding-left: 24px; padding-right: 24px; }
#os-other           { padding-left: 0;    padding-right: 0;    }
#why-vertwo         { padding-left: 24px; padding-right: 24px; }
#free-trial         { padding-left: 24px; padding-right: 24px; }

/* Boundary tightening — same-bg (white) intro+demo block
   reads as one visual unit. */
#ba-intro    { padding-bottom: 32px; }
#ba-showcase { padding-top:    32px; }

/* Mobile responsive: scale via clamp(56px, 6vw, 80px) to match
   homepage .vertwo-news cadence on narrow viewports. */
@media (max-width: 860px) {
  #svc-core,
  #ba-intro,
  #ba-showcase,
  #process,
  #portfolio-showcase,
  #os-other,
  #why-vertwo,
  #free-trial {
    padding-top: clamp(56px, 6vw, 80px);
    padding-bottom: clamp(56px, 6vw, 80px);
  }
  /* Preserve same-bg tightening on mobile too */
  #ba-intro    { padding-bottom: clamp(24px, 4vw, 32px); }
  #ba-showcase { padding-top:    clamp(24px, 4vw, 32px); }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH (v0.24.0) — CMS layer additions (Round 4C-D)
   ----------------------------------------------------------------
   Adds:
     A. 16-icon animated SVG library (.svc-icon + .svc-icon--<slug>)
     B. #os-other "image" bg mode (.os-row--has-image)
     C. .wv-digit-strip motion blur keyframes (port from intro-stats)
     D. .pf-card-img--empty placeholder visual

   Hover-gated rules (`@media (hover: hover)`) follow the v0.22.5
   convention — touch devices skip the hover accent so iOS doesn't
   show sticky-state artifacts after a tap.
   ═══════════════════════════════════════════════════════════════ */

/* ─── A. SVC PILLAR ICON LIBRARY ────────────────────────────────
   v0.32.154 — extracted into assets/css/icons.css (single source of
   truth, also loaded in WP admin so the icon picker can render the
   same animations as a live preview). When adding a new icon, edit
   icons.css and inc/services-icons.php only — this file no longer
   declares any per-icon keyframes.
   ─────────────────────────────────────────────────────────────── */


/* ─── B. #os-other "image" BG MODE ─────────────────────────────
   When a row is in image mode (FG9 → Other Services → bg_mode =
   "image"), the article gets the .os-row--has-image modifier and
   carries an inline --os-bg-image CSS var. We:
     1. Hide the kanji watermark (image fights with it visually)
     2. Suppress the dark gradient bg the row variants apply
     3. Render an absolute-positioned .os-row-bg layer with the
        image, slightly oversized so the JS parallax ±20px can
        translate without exposing the underlying section bg
     4. Add a subtle dark overlay so white text stays legible
   ──────────────────────────────────────────────────────────── */
.os-row--has-image {
  background: #0a0a0c !important; /* bg gradient suppressed */
}
.os-row--has-image .os-row-kanji {
  display: none !important;
}
.os-row--has-image > .os-row-bg {
  position: absolute;
  /* v0.24.3 — bumped from -32 to -140 so combined cursor (+/-20px)
     and scroll-coupled (+/-100px) parallax never exposes the
     underlying section bg through the .os-row-bg edges. */
  inset: -140px;
  z-index: 0;
  background-image: var(--os-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
  /* v0.24.4 — right-side brightness lifted to 0.95 per Vic. Net
     effect: filter brightens the WHOLE image to 0.95, then the
     left-side gradient overlay below pulls the LEFT side back down
     for text legibility. Right side ends at ~0.95 (5% darken),
     left side ends at ~0.10 effective (heavy darken under the body
     copy). v0.24.3 was 0.85; v0.24.0 was 0.55. */
  filter: brightness(0.95) saturate(1);
  /* v0.24.3 — Combined parallax. Cursor offsets (--osbg-mx/-my) are
     written by the existing mouseenter/move/leave RAF tick; scroll
     offset (--osbg-sy) is written by the new scroll-coupled module.
     Use translate3d via three CSS vars so the GPU layer stays unified. */
  transform: translate3d(
    var(--osbg-mx, 0px),
    calc(var(--osbg-my, 0px) + var(--osbg-sy, 0px)),
    0
  );
}
.os-row--has-image > .os-row-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* v0.24.4 — heavier on the LEFT (where title/body sit) to
     compensate for the brighter 0.95 image filter. Stops at
     transparent ~70% across so the right ~30% of the row shows
     the image at full 0.95 brightness. The radial darkens only
     the body-copy area (~25% from left). */
  background:
    linear-gradient(90deg, rgba(10,10,12,0.88) 0%, rgba(10,10,12,0.55) 30%, rgba(10,10,12,0.18) 60%, rgba(10,10,12,0) 75%),
    radial-gradient(ellipse at 22% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
/* Make sure the row's foreground sits above the bg layer */
.os-row--has-image .os-row-num,
.os-row--has-image .os-row-main,
.os-row--has-image .os-row-cta,
.os-row--has-image .os-row-icon,
.os-row--has-image .os-row-tags {
  position: relative;
  z-index: 1;
}
/* The row article itself needs a stacking context for the absolute
   bg layer to sit cleanly. */
.os-row--has-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  /* Lock parallax to centered (the JS already early-returns for
     reduced motion, but defensive CSS in case a stale transform
     was applied before the user toggled the OS preference). */
  .os-row--has-image > .os-row-bg {
    transform: none !important;
  }
}


/* ─── C. .wv-digit-strip MOTION BLUR ───────────────────────────
   Verbatim port of intro-stats.css's `vw-spin-blur` keyframes
   (v0.20.10/v0.20.11) onto the why-vertwo odometer. The
   .is-spinning class is added/removed by spinDigit() in
   page-services.js (v0.24.0) on each odometer cycle.

   Animates ONLY `filter` (not `transform`) so it never fights the
   transform animation that's running concurrently. `will-change`
   declares both properties so the digit strip stays on a GPU
   layer and the filter doesn't kick a CPU repaint.

   Eased timing matches the cubic-bezier(0.22, 1, 0.36, 1) on the
   transform: blur peaks at ~6% (peak velocity), tapers to 0 at
   100% so the digit lands crisp.
   ──────────────────────────────────────────────────────────── */
.wv-digit-strip {
  will-change: transform, filter;
  backface-visibility: hidden;
}
.wv-digit-strip.is-spinning {
  animation: wv-spin-blur 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes wv-spin-blur {
  0%   { filter: blur(0); }
  6%   { filter: blur(6.5px) saturate(0.86); }
  20%  { filter: blur(5.6px) saturate(0.88); }
  45%  { filter: blur(3.8px) saturate(0.93); }
  70%  { filter: blur(1.8px) saturate(0.97); }
  88%  { filter: blur(0.6px); }
  100% { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wv-digit-strip.is-spinning { animation: none !important; filter: none !important; }
}


/* ─── D. .pf-card-img--empty placeholder ───────────────────────
   When a portfolio slot has no Work selected (fresh install, or
   editor cleared the picker), the template renders an empty
   placeholder div instead of an <img>. Give it a subtle gradient
   so the card frame doesn't read as broken.
   ──────────────────────────────────────────────────────────── */
.pf-card-img--empty {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(242,122,15,0.18) 0%, rgba(245,166,35,0.10) 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 12px, rgba(0,0,0,0) 12px 24px);
  background-color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════
   v0.32.213 — Services mobile gap fixes (Vic).
   • #os-other header had a clamp() top padding that resolved large on
     mobile → wide empty band above "BEYOND WEBTOON".
   • The os-rows' clamp(60px,7vw,100px) vertical padding left a big
     black band under the last row (before the light #why-vertwo).
   Tighten both on phones.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* v0.32.214 — header tightened further (Vic: "tighten more"). */
  #os-other .os-head { padding-top: 28px; padding-bottom: 18px; }
  .os-row { padding-top: 36px; padding-bottom: 36px; }
  /* The "bottom black band" Vic kept circling is the giant kanji watermark:
     at clamp(220px,55vw,380px) and top:50% it overhangs far below the last
     row's text. With the row clipped (overflow:hidden) that overhang shows
     as an empty dark area at the bottom of the row. Shrink it hard on mobile
     so the row collapses to its actual content height. */
  .os-row-kanji { font-size: clamp(120px, 34vw, 200px) !important; top: 38% !important; }
}