/* SERVICES visual states matched to the user's 1920 x 1206 Photoshop exports. */
.s03-services-area{position:relative;box-sizing:border-box;height:270svh;min-height:0;background:#fff;color:#111;overflow:clip;font-family:"Pretendard Variable","Malgun Gothic",sans-serif;font-synthesis:none}
.section03.is-services-area .s03-fixed{color:#fff}
.s03-fixed-bl.is-unlocked.is-services{color:#fff}
.section03.is-services-bottom-light .s03-fixed-br{color:#111}
.svc-psd-sticky{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#fff}
@media(min-width:1181px){.s03-services-area.is-covering{overflow:visible}.s03-services-area.is-covering .svc-psd-sticky{transform:translate3d(0,var(--svc-cover-offset-y,0px),0)}}
.svc-psd-art{position:relative;width:100%;height:max(100svh,62.8125vw);overflow:hidden;background:#fff;transform:translate3d(0,var(--svc-photo-offset-y,0px),0);will-change:transform}
.svc-psd-media{position:absolute;inset:0;width:100%;height:100%}
.svc-psd-photo,.svc-psd-video,.svc-psd-cutout{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(var(--svc-entry-photo-scale,1));transform-origin:center center}
.svc-psd-photo{opacity:var(--svc-photo-opacity,1)}
.svc-psd-video{opacity:0;pointer-events:none}
.svc-psd-video.is-ready{opacity:var(--svc-photo-opacity,1)}
.svc-psd-cutout{opacity:var(--svc-photo-opacity,1);pointer-events:none}
.svc-psd-photo-shade{position:absolute;inset:0;background:rgba(8,12,15,.045);opacity:var(--svc-photo-opacity,1);pointer-events:none}
.svc-psd-depth{position:absolute;z-index:1;inset:0;opacity:var(--svc-depth-opacity,0);pointer-events:none}
.svc-psd-depth span{position:absolute;width:12%;height:7%;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(205,215,218,.33);box-shadow:0 12px 28px rgba(0,0,0,.12);filter:blur(3px)}
.svc-psd-depth span::before{content:"";position:absolute;left:10%;top:23%;width:15%;height:45%;border-radius:50%;background:rgba(255,255,255,.26)}
.svc-psd-depth span::after{content:"";position:absolute;left:34%;right:13%;top:30%;height:10%;border-radius:8px;background:rgba(255,255,255,.26);box-shadow:0 13px rgba(255,255,255,.18)}
.svc-psd-depth span:first-child{left:8%;top:25%;transform:rotate(-8deg)}
.svc-psd-depth span:nth-child(2){right:6%;top:19%;transform:rotate(10deg);width:10%;height:6%}
.svc-depth-window{position:absolute;display:block;box-sizing:border-box;border-radius:13px;border:1px solid rgba(255,226,226,.32);background:linear-gradient(140deg,rgba(137,32,47,.68),rgba(69,13,27,.52));box-shadow:0 13px 25px rgba(12,3,9,.25),inset 0 1px rgba(255,239,239,.18);filter:blur(1.7px)}
.svc-depth-window::before{content:"";position:absolute;left:12%;top:19%;width:14%;aspect-ratio:1;border-radius:50%;background:rgba(255,244,244,.57)}
.svc-depth-window::after{content:"";position:absolute;left:34%;right:12%;top:26%;height:8%;border-radius:4px;background:rgba(255,244,244,.5);box-shadow:0 13px rgba(255,244,244,.3),0 26px rgba(255,244,244,.19)}
.svc-depth-window-a{left:2.5%;top:28%;width:9%;height:5%;transform:rotate(-13deg)}
.svc-depth-window-b{right:2%;top:26%;width:10%;height:6%;transform:rotate(11deg)}
.svc-depth-window-c{left:48%;top:15%;width:7%;height:4.5%;transform:rotate(8deg);filter:blur(3px);opacity:.68}
.svc-depth-ring{position:absolute;display:block;box-sizing:border-box;border:1px solid rgba(158,47,63,.52);border-radius:50%;box-shadow:0 3px 11px rgba(18,2,7,.16)}
.svc-depth-ring-a{right:8%;top:25%;width:2.3%;aspect-ratio:1;transform:rotate(-14deg)}
.svc-depth-ring-b{left:5%;top:57%;width:1.7%;aspect-ratio:1;border-color:rgba(247,220,221,.6)}
.svc-psd-heading{position:absolute;z-index:2;left:20.72%;top:47.2%;width:51%;max-width:980px;color:#f6f6f6;opacity:var(--svc-heading-opacity,1);transform:translate3d(var(--svc-title-x,0px),var(--svc-title-y,0px),0) scale(var(--svc-title-scale,1));transform-origin:top left;will-change:transform;pointer-events:none}
.svc-psd-heading h2{margin:0;color:rgba(255,255,255,.702);font-size:clamp(44px,4.9343vw,94.74px);font-weight:800;line-height:1.15;letter-spacing:-.05em;text-wrap:nowrap;white-space:nowrap;transform:scale(1.04,.98);transform-origin:top left}
.svc-psd-heading h2>span{display:block;min-height:1.15em}
.svc-psd-heading p{margin:clamp(32px,3.9vw,75px) 0 0 6px;color:rgba(255,255,255,.702);font-size:clamp(16px,1.4186vw,27.24px);font-weight:700;line-height:1.304;letter-spacing:-.02em;opacity:var(--svc-subtitle-opacity,1);transform:scale(var(--svc-subtitle-scale,1)) scale(1.03,.98);transform-origin:top left}
.svc-psd-cursor{display:inline-block;padding-left:.12em;animation:svc-cursor .85s steps(1) infinite}
.svc-psd-cursor[hidden]{display:none}
@keyframes svc-cursor{50%{opacity:0}}
.svc-psd-cards{position:absolute;z-index:3;inset:0;pointer-events:none}
.svc-psd-card{position:absolute;box-sizing:border-box;pointer-events:auto;--svc-float-duration:5.1s;--svc-float-delay:0s;--svc-rotation:0deg;opacity:var(--svc-card-opacity,0);transform:translate3d(var(--svc-card-x,0px),var(--svc-card-y,0px),0) scale(var(--svc-card-scale,.42));transition:opacity .24s ease-out}
.svc-psd-brand{left:19.64%;top:24.46%;width:26.82%;height:10.36%;--svc-rotation:2.9deg}
.svc-psd-editorial{left:8.18%;top:40.13%;width:24.17%;height:11.03%;--svc-rotation:3.1deg;--svc-float-duration:5.8s;--svc-float-delay:-1.7s}
.svc-psd-web{left:61.67%;top:32.34%;width:24.69%;height:10.2%;--svc-rotation:-5.2deg;--svc-float-duration:4.6s;--svc-float-delay:-2.8s}
.svc-psd-content{left:14.8%;top:55.64%;width:28.07%;height:10.12%;--svc-rotation:-2.3deg;--svc-float-duration:5.4s;--svc-float-delay:-3.2s}
.svc-psd-motion{left:71.56%;top:46.19%;width:18.49%;height:10.53%;--svc-rotation:3.6deg;--svc-float-duration:4.9s;--svc-float-delay:-.9s}
.svc-psd-space{left:56.3%;top:58.04%;width:25.83%;height:11.03%;--svc-rotation:2.4deg;--svc-float-duration:6s;--svc-float-delay:-4s}
@media(min-width:1181px){.svc-psd-editorial .svc-psd-copy{left:22.5%}.svc-psd-web .svc-psd-copy{left:21.3%}.svc-psd-motion .svc-psd-copy{left:29.5%}}
.svc-psd-brand,.svc-psd-content,.svc-psd-space{z-index:2}
.svc-psd-editorial,.svc-psd-web,.svc-psd-motion{z-index:1}
.svc-psd-arrival{position:relative;width:100%;height:100%}
.svc-psd-float{position:relative;box-sizing:border-box;width:var(--svc-morph-width,100%);height:100%;margin-inline:auto;border:1px solid rgba(255,255,255,.34);border-radius:var(--svc-morph-radius,18px);background:linear-gradient(135deg,rgba(234,237,237,.72),rgba(223,229,231,.66));backdrop-filter:blur(4px) saturate(.9);box-shadow:0 8px 23px rgba(7,10,12,.13),inset 0 1px rgba(255,255,255,.25);transform:rotate(var(--svc-rotation));color:#171717}
.svc-psd-float::before{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;background:url("assets/section03/services-panel-grain.svg") center/160px;opacity:.22;mix-blend-mode:multiply;pointer-events:none}
.s03-services-area.is-float-visible .svc-psd-float{animation:svc-float var(--svc-float-duration) ease-in-out var(--svc-float-delay) infinite alternate}
@keyframes svc-float{0%{translate:-4px 9px;rotate:-.9deg}50%{translate:3px -12px;rotate:1.1deg}100%{translate:0 9px;rotate:-.6deg}}
.svc-psd-card:is(:hover,:focus-within) .svc-psd-float{animation-play-state:paused}
.svc-psd-icon{position:absolute;z-index:2;left:1.8%;top:12.8%;display:grid;place-items:center;width:3.85vw;max-width:74px;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.2);color:#fff;font-size:clamp(14px,.938vw,18px);font-weight:650;letter-spacing:-.02em;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.65);opacity:var(--svc-card-content-opacity,1)}
.svc-psd-copy{position:absolute;z-index:2;left:19.8%;right:4%;top:17.5%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1.62vw auto;min-width:0;opacity:var(--svc-card-content-opacity,1)}
.svc-psd-number{display:none}
.svc-psd-copy strong{grid-column:1;grid-row:1;margin:0;color:rgba(0,0,0,.902);font-size:calc(clamp(14px,1.092vw,21px) - 1.333px);font-weight:600;line-height:1.286;letter-spacing:-.01em;white-space:nowrap;transform:scale(1.02,.98);transform-origin:left top}
.svc-psd-copy small{grid-column:2;grid-row:1;align-self:center;margin:0;color:rgba(0,0,0,.502);font-size:clamp(10px,.7292vw,14px);font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap;transform:translateY(-.26vw) scale(1.1,.98);transform-origin:right center}
.svc-psd-details{grid-column:1/-1;grid-row:2;margin-top:.2vw;color:rgba(0,0,0,.702);font-size:clamp(11px,.9375vw,18px);font-weight:500;line-height:1.389;letter-spacing:-.02em;white-space:nowrap;transform:scale(1.03,.98);transform-origin:left top}
.svc-psd-project{position:absolute;z-index:3;inset:0;border-radius:inherit;color:transparent;text-decoration:none;font-size:0}
.svc-psd-project:focus-visible{outline:2px solid #111;outline-offset:4px}
.svc-psd-note{position:absolute;z-index:2;left:49.5%;top:67.8%;box-sizing:border-box;width:22.55%;min-height:8.45%;margin:0;padding:1.05% 1.15%;border-radius:clamp(10px,1.2vw,23px);background:rgba(123,0,0,.82);color:#fff;font-size:clamp(10px,.83vw,16px);font-weight:450;line-height:1.55;letter-spacing:-.02em;opacity:var(--svc-note-opacity,0)}
.s03-services-area[data-intro-phase] .svc-psd-cards,.s03-services-area[data-intro-phase] .svc-psd-note{visibility:hidden}
.s03-project-area{position:relative;z-index:1}
@media(max-width:1180px){
.s03-services-area{height:auto;overflow:visible;background:#fff}
.svc-psd-sticky{position:relative;height:auto;overflow:visible;background:#fff}
.svc-psd-art{height:auto;overflow:visible;padding-bottom:100px;background:#fff;transform:none}
.svc-psd-media{position:sticky;inset:auto;top:0;display:block;height:100svh;min-height:540px}
.svc-psd-photo,.svc-psd-video,.svc-psd-cutout{object-position:62% top}
.svc-psd-photo-shade{bottom:auto;height:100%;background:linear-gradient(0deg,rgba(0,0,0,.34),transparent 56%)}
.svc-psd-depth{display:none}
.svc-psd-heading{left:7%;top:min(45svh,380px);width:86%;transform:none!important}
.svc-psd-heading h2{font-size:clamp(34px,6vw,54px);white-space:normal;text-wrap:balance}
.svc-psd-heading p{font-size:clamp(12px,2.2vw,17px);margin:24px 0 0}
.svc-psd-cards{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;inset:auto;margin:-1px 6% 0;pointer-events:auto}
.svc-psd-card{position:relative;left:auto!important;top:auto!important;width:auto!important;height:162px!important;opacity:1!important;transform:none!important}
.svc-psd-float{width:100%!important;transform:rotate(var(--svc-rotation));border-radius:18px}
.svc-psd-icon,.svc-psd-copy{opacity:1!important}
.svc-psd-icon{width:45px;max-width:none}
.svc-psd-copy{grid-template-rows:28px auto}
.svc-psd-copy strong{font-size:15.667px}
.svc-psd-copy small{font-size:10px;transform:none}
.svc-psd-details{font-size:11px;line-height:1.4;white-space:normal}
.svc-psd-note{position:relative;left:auto;top:auto;width:auto;min-height:0;margin:40px 6% 0;padding:16px 20px;font-size:13px;opacity:1!important}
}
@media(max-width:570px){
.svc-psd-media{height:82svh;min-height:500px}
.svc-psd-photo,.svc-psd-video,.svc-psd-cutout{object-position:59% top}
.svc-psd-heading{top:calc(min(47svh,355px) + var(--svc-mobile-title-lift,0px))}
.svc-psd-heading h2{font-size:clamp(30px,8.5vw,40px)}
.svc-psd-heading p{font-size:12px}
.svc-psd-cards{display:block}
.svc-psd-card{height:132px!important;margin-bottom:19px}
.svc-psd-float{transform:rotate(0deg)}
.svc-psd-icon{left:15px;top:17px;width:47px}
.svc-psd-copy{left:76px;right:16px;top:22px;grid-template-rows:27px auto}
.svc-psd-copy strong{font-size:15.667px}
.svc-psd-copy small{font-size:10px}
.svc-psd-details{font-size:11px;line-height:1.42}
.svc-psd-note{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.svc-psd-card{transition:none}.svc-psd-float{animation:none!important}.svc-psd-cursor{animation:none}.svc-psd-photo,.svc-psd-video,.svc-psd-cutout{transform:none!important}.svc-psd-video{opacity:0!important}}

/* Revised state 03: measured against the 1920 x 1206 PSD canvas.
   This state is deliberately static; the intro remains in its own scroll phase. */
@media(min-width:1181px){
.svc-psd-card{transition:none}
.svc-psd-brand{left:20%;top:25.87%;width:27.14%;height:12.02%;--svc-rotation:2.5deg}
.svc-psd-editorial{left:8.07%;top:36.40%;width:24.32%;height:12.77%;--svc-rotation:3.1deg}
.svc-psd-content{left:14.74%;top:49.42%;width:28.23%;height:11.61%;--svc-rotation:-2.2deg}
.svc-psd-web{left:61.46%;top:30.76%;width:25.10%;height:13.35%;--svc-rotation:-5.2deg}
.svc-psd-motion{left:71.46%;top:42.21%;width:18.65%;height:12.02%;--svc-rotation:3.2deg}
.svc-psd-space{left:56.20%;top:51.99%;width:26.04%;height:12.44%;--svc-rotation:2.3deg}
.svc-psd-float{border:0;border-radius:18px;background:rgba(8,8,9,.74);backdrop-filter:blur(2px);box-shadow:0 13px 23px rgba(0,0,0,.24);color:#fff;animation:none!important}
.svc-psd-float::before{opacity:.18;mix-blend-mode:screen}
.svc-psd-icon{left:2.4%;top:10%;width:3.85vw;max-width:74px;background:rgba(0,0,0,.52);color:rgba(255,255,255,.52);font-size:clamp(15px,1.3vw,25px);font-weight:700;text-shadow:none}
.svc-psd-icon::after{content:"";position:absolute;right:0;top:8%;width:16px;height:16px;border-radius:50%;background:#b8000d;transform:translate(9%,-8%)}
.svc-psd-copy{inset:0;display:block;transform:none}
.svc-psd-editorial .svc-psd-copy,.svc-psd-web .svc-psd-copy,.svc-psd-motion .svc-psd-copy{inset:0}
.svc-psd-copy strong,.svc-psd-copy small,.svc-psd-details{position:absolute;display:block;grid-column:auto;grid-row:auto;margin:0;white-space:nowrap;transform-origin:left top}
.svc-psd-copy strong{color:#fff;font-size:clamp(15px,1.07vw,20.5px);font-weight:600;line-height:1.18;letter-spacing:-.01em;transform:scale(1.02,.98)}
.svc-psd-copy small{color:rgba(255,255,255,.52);font-size:clamp(10px,.729vw,14px);font-weight:500;line-height:1.2;transform:scale(1.1,.98)}
.svc-psd-details{color:rgba(255,255,255,.72);font-size:clamp(12px,.885vw,17px);font-weight:500;line-height:1.4;letter-spacing:-.02em;transform:scale(1.03,.98)}
.svc-psd-brand .svc-psd-copy strong{left:20%;top:23.3%}.svc-psd-brand .svc-psd-copy small{right:6%;top:26.2%}.svc-psd-brand .svc-psd-details{left:20%;top:47.5%}
.svc-psd-editorial .svc-psd-copy strong{left:22.6%;top:22.5%}.svc-psd-editorial .svc-psd-copy small{right:8%;top:28%}.svc-psd-editorial .svc-psd-details{left:22.7%;top:46%}
.svc-psd-content .svc-psd-copy strong{left:18.9%;top:24%}.svc-psd-content .svc-psd-copy small{right:8%;top:26.4%}.svc-psd-content .svc-psd-details{left:19.2%;top:46.4%}
.svc-psd-web .svc-psd-copy strong{left:21.7%;top:25.3%}.svc-psd-web .svc-psd-copy small{right:6.6%;top:29%}.svc-psd-web .svc-psd-details{left:22%;top:46.5%}
.svc-psd-motion .svc-psd-copy strong{left:29.7%;top:23%}.svc-psd-motion .svc-psd-copy small{right:8.4%;top:26%}.svc-psd-motion .svc-psd-details{left:29.7%;top:47%}
.svc-psd-space .svc-psd-copy strong{left:20.8%;top:22.7%}.svc-psd-space .svc-psd-copy small{right:7.2%;top:28.3%}.svc-psd-space .svc-psd-details{left:20.9%;top:46%}
.svc-psd-note{left:49.64%;top:62.6%;width:22.3%;min-height:8.2%;padding:1.05% 1.15%;border-radius:19px;background:linear-gradient(100deg,rgba(151,0,55,.83),rgba(80,120,110,.79));font-size:clamp(12px,.833vw,16px);line-height:1.48;color:rgba(255,255,255,.76)}
.svc-psd-heading h2{line-height:1.11}
}
.svc-psd-ornaments{position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;visibility:hidden}
.s03-services-area.is-state03-visible .svc-psd-ornaments{opacity:1;visibility:visible}
.svc-psd-ornaments>*{position:absolute;box-sizing:border-box}
.svc-ornament-pink{left:27.97%;top:35.16%;width:14.12%;height:6.47%;display:flex;flex-direction:column;justify-content:center;padding-left:1.3%;border-radius:999px;background:rgba(199,0,102,.72);color:#91e8ce;transform:rotate(-5deg)}
.svc-ornament-pink b{font-size:clamp(11px,.84vw,16px);line-height:1.35}.svc-ornament-pink small{font-size:clamp(9px,.63vw,12px);line-height:1.3}
.svc-ornament-mint{left:59.22%;top:45.77%;min-width:9.95%;height:3.82%;display:grid;place-items:center;border-radius:999px;background:rgba(35,175,144,.42);color:rgba(255,255,255,.78);font-size:clamp(11px,.83vw,16px);transform:rotate(-3deg)}
.svc-ornament-play{left:66.25%;top:27.94%;width:2.55%;aspect-ratio:1;border-radius:50%;background:rgba(11,11,12,.78)}
.svc-ornament-play::after{content:"";position:absolute;left:38%;top:28%;border-left:17px solid #40ad92;border-top:10px solid transparent;border-bottom:10px solid transparent}
@media(max-width:1180px){.svc-psd-ornaments{display:none}.svc-psd-float{background:rgba(8,8,9,.74);color:#fff}.svc-psd-copy strong{color:#fff}.svc-psd-copy small{color:rgba(255,255,255,.52)}.svc-psd-details{color:rgba(255,255,255,.72)}.svc-psd-icon{background:rgba(0,0,0,.52);color:rgba(255,255,255,.52)}.svc-psd-icon::after{content:"";position:absolute;right:0;top:7%;width:10px;height:10px;border-radius:50%;background:#b8000d}}

/* The actual PSD Grain layer supplies each panel's shape, alpha, color and
   texture. Every title, description, English label and badge remains DOM. */
.svc-psd-panel-bg { position:absolute;z-index:0;inset:0;display:block;
  width:100%;height:100%;object-fit:fill;pointer-events:none; }
.svc-psd-arrival { z-index:1; }
@media (min-width:1181px) {
  .svc-psd-ornaments { z-index:2; }
  .svc-psd-cards { z-index:3; }
  .svc-psd-card { transition:none; }
  .svc-psd-float { width:100%;height:100%;border:0;border-radius:0;
    background:transparent;box-shadow:none;backdrop-filter:none;
    transform:rotate(var(--svc-rotation));animation:none!important; }
  .svc-psd-float::before { display:none; }
  .svc-psd-icon,.svc-psd-copy { opacity:1!important; }
  .svc-psd-icon {
    left:3.25%;top:13.1%;width:min(64px,3.3333vw);height:min(64px,3.3333vw);
    max-width:none;aspect-ratio:1;flex-shrink:0;
    background:rgba(0,0,0,.50);color:rgba(255,255,255,.50);
    font-size:min(22px,1.1458vw);font-weight:700;letter-spacing:0;line-height:1;
    text-shadow:none;transform:none;
  }
  .svc-psd-icon::after {
    content:"";position:absolute;right:-.1042vw;top:.2604vw;
    width:min(14px,.7292vw);height:min(14px,.7292vw);
    border-radius:50%;background:#b8000d;transform:none;
  }
  .svc-psd-editorial .svc-psd-icon{left:4.07%;top:12.34%}
  .svc-psd-content .svc-psd-icon{left:2.86%;top:26.1%}
  .svc-psd-web .svc-psd-icon{left:3.53%;top:34.16%}
  .svc-psd-motion .svc-psd-icon{left:5.03%;top:13.8%}
  .svc-psd-space .svc-psd-icon{left:3.4%;top:13.33%}
  .svc-psd-web .svc-psd-icon::after{top:-.2604vw;right:.4688vw}
  .svc-psd-copy,.svc-psd-editorial .svc-psd-copy,.svc-psd-web .svc-psd-copy,.svc-psd-motion .svc-psd-copy {
    inset:0;display:block;transform:none;
  }
  .svc-psd-copy strong,.svc-psd-copy small,.svc-psd-details {
    position:absolute;display:block;grid-column:auto;grid-row:auto;margin:0;
    white-space:nowrap;transform-origin:left top;
  }
  .svc-psd-copy strong {
    color:#fff;font-size:min(19.67px,1.0245vw);font-weight:700;line-height:1.286;
    letter-spacing:-.01em;transform:scale(1.02,.98);
  }
  .svc-psd-copy small {
    color:rgba(255,255,255,.50);font-size:min(14px,.7292vw);font-weight:500;
    line-height:1.2;letter-spacing:0;transform:scale(1.1,.98);
  }
  .svc-psd-details {
    color:rgba(255,255,255,.70);font-size:min(18px,.9375vw);font-weight:400;
    line-height:min(25px,1.3021vw);letter-spacing:-.02em;transform:scale(1.03,.98);
  }
  .svc-psd-brand .svc-psd-copy strong{left:20%;top:23.3%}
  .svc-psd-brand .svc-psd-copy small{right:6%;top:26.2%}
  .svc-psd-brand .svc-psd-details{left:19.8%;top:47.5%}
  .svc-psd-editorial .svc-psd-copy strong{left:22.6%;top:22.5%}
  .svc-psd-editorial .svc-psd-copy small{right:8%;top:28%}
  .svc-psd-editorial .svc-psd-details{left:22.7%;top:46%}
  .svc-psd-content .svc-psd-copy strong{left:18.9%;top:24%}
  .svc-psd-content .svc-psd-copy small{right:8%;top:26.4%}
  .svc-psd-content .svc-psd-details{left:19.2%;top:46.4%}
  .svc-psd-web .svc-psd-copy strong{left:21.7%;top:25.3%}
  .svc-psd-web .svc-psd-copy small{right:6.6%;top:29%}
  .svc-psd-web .svc-psd-details{left:22%;top:46.5%}
  .svc-psd-motion .svc-psd-copy strong{left:29.7%;top:23%}
  .svc-psd-motion .svc-psd-copy small{right:8.4%;top:26%}
  .svc-psd-motion .svc-psd-details{left:29.7%;top:47%}
  .svc-psd-space .svc-psd-copy strong{left:20.8%;top:22.7%}
  .svc-psd-space .svc-psd-copy small{right:7.2%;top:28.3%}
  .svc-psd-space .svc-psd-details{left:20.9%;top:46%}

  .s03-services-area.is-state03-visible .svc-psd-heading { opacity:0!important; }
  .svc-psd-static-heading {
    position:absolute;z-index:4;left:28.1771%;top:63.4328%;
    width:22%;height:19.24%;pointer-events:none;
    opacity:0;visibility:hidden;font-family:"Pretendard Variable",sans-serif;
  }
  .s03-services-area.is-state03-visible .svc-psd-static-heading { opacity:1;visibility:visible; }
  .svc-psd-static-title {
    color:rgba(255,255,255,.702);font-size:min(45px,2.34375vw);font-weight:800;
    line-height:min(50px,2.6042vw);letter-spacing:-.05em;white-space:nowrap;
    transform:scale(1.04,.98);transform-origin:left top;
  }
  .svc-psd-static-title span,.svc-psd-static-subtitle span { display:block; }
  .svc-psd-static-title i { font-style:normal;font-weight:300; }
  .svc-psd-static-subtitle {
    position:absolute;left:.1042vw;top:9.7917vw;color:rgba(255,255,255,.702);
    font-size:min(19px,.9896vw);font-weight:700;line-height:min(27px,1.4063vw);letter-spacing:-.02em;
    white-space:nowrap;transform:scale(1.03,.98);transform-origin:left top;
  }
  .svc-psd-note {
    z-index:4;left:49.6354%;top:62.6036%;width:22.2917%;height:8.2090%;
    min-height:0;margin:0;padding:1.1458vw 1.0417vw;border:0;border-radius:min(19px,.9896vw);
    background:linear-gradient(100deg,rgba(151,0,55,.81),rgba(80,120,110,.79));
    box-shadow:none;color:rgba(255,255,255,.60);
    font-size:min(18px,.9375vw);font-weight:400;line-height:min(25px,1.3021vw);letter-spacing:-.02em;
    transform:rotate(-1.96deg) scale(1.03,.98);transform-origin:left top;
  }
  .svc-psd-note span { display:block;white-space:nowrap; }
  .svc-psd-note strong { font-weight:600;color:inherit; }

  .svc-psd-ornaments { z-index:2; }
  .svc-ornament-pink {
    left:27.9688%;top:35.1575%;width:14.1146%;height:6.4677%;
    display:flex;flex-direction:column;justify-content:center;padding-left:1.3%;
    background:rgba(199,0,102,.72);border-radius:999px;color:#91e8ce;
    transform:rotate(-5.5deg);
  }
  .svc-ornament-pink b { font-size:min(16px,.8333vw);font-weight:600;line-height:1.35; }
  .svc-ornament-pink small { font-size:min(12px,.625vw);line-height:1.3; }
  .svc-ornament-mint {
    left:59.2188%;top:45.7711%;width:9.9479%;min-width:0;height:3.8143%;
    display:grid;place-items:center;border-radius:999px;
    background:rgba(35,175,144,.42);color:rgba(255,255,255,.50);
    font-size:min(16px,.8333vw);font-weight:500;transform:rotate(-3.1deg);
  }
  .svc-ornament-play { left:66.25%;top:27.9436%;width:2.5521%;background:rgba(11,11,12,.78); }
  .svc-ornament-play::after { border-left-color:#40ad92; }
}

/* Mobile reflows text while the PSD texture remains a separate background. */
@media(max-width:1180px) {
  .svc-psd-static-heading { display:none; }
  .svc-psd-ornaments { display:none; }
  .svc-psd-panel-bg{border-radius:18px}
  .svc-psd-float { border:0;border-radius:0;background:transparent;
    box-shadow:none;backdrop-filter:none; }
  .svc-psd-float::before { display:none; }
  .svc-psd-copy strong { font-weight:700;color:#fff; }
  .svc-psd-copy small { color:rgba(255,255,255,.50); }
  .svc-psd-details { color:rgba(255,255,255,.70); }
  .svc-psd-icon { color:rgba(255,255,255,.50);background:rgba(0,0,0,.50);
    width:44px;height:44px;aspect-ratio:1;flex-shrink:0;transform:none; }
  .svc-psd-icon::after{width:9px;height:9px;right:-1px;top:3px}
  .svc-psd-note {
    border:0;border-radius:18px;
    background:linear-gradient(100deg,rgba(151,0,55,.81),rgba(80,120,110,.79));
    color:rgba(255,255,255,.72);box-shadow:none;
  }
  .svc-psd-note span { display:block; }
  .svc-psd-note strong { font-weight:600; }
}
@media(max-width:570px) {
  .svc-psd-card { height:150px!important; }
  .svc-psd-copy { top:18px;left:77px;right:15px;grid-template-rows:auto auto; }
  .svc-psd-copy strong { font-size:15.667px;line-height:1.25; }
  .svc-psd-copy small { grid-column:1;grid-row:2;font-size:10px;line-height:1.2;margin-top:2px; }
  .svc-psd-details { grid-column:1;grid-row:3;margin-top:8px;font-size:11px;line-height:1.4;white-space:normal; }
  .svc-psd-note span { white-space:normal; }
}

/* PSD pixels provide only the two colored surfaces; all wording remains DOM. */
@media (min-width:1181px) {
  .svc-ornament-pink {
    background:transparent;border-radius:0;
  }
  .svc-ornament-pink-bg,.svc-psd-note-bg {
    position:absolute;inset:0;display:block;width:100%;height:100%;
    object-fit:fill;pointer-events:none;
  }
  .svc-ornament-pink-bg { z-index:0; }
  .svc-ornament-pink b,.svc-ornament-pink small {
    position:relative;z-index:1;opacity:.50;
  }
  /* The original information-window pixels already contain their own angle. */
  .svc-psd-note {
    z-index:2;background:transparent;border-radius:0;transform:none;
  }
  .svc-psd-note-bg { z-index:0; }
  .svc-psd-note span { position:relative;z-index:1; }
  .svc-ornament-play {
    background:transparent;transform:rotate(-12deg);
  }
  .svc-ornament-play::after { display:none; }
  .svc-ornament-play-circle,.svc-ornament-play-triangle {
    position:absolute;display:block;pointer-events:none;
  }
  .svc-ornament-play-circle {
    inset:0;width:100%;height:100%;border-radius:50%;background:rgba(0,0,0,.50);
  }
  .svc-ornament-play-triangle {
    left:36.7%;top:32.7%;width:34.7%;height:36.7%;
    background:rgba(64,173,146,.30);clip-path:polygon(0 0,100% 50%,0 100%);
  }
}
@media (max-width:1180px) {
  .svc-psd-note { background:transparent;border-radius:0; }
  .svc-psd-note-bg {
    position:absolute;inset:0;display:block;width:100%;height:100%;
    object-fit:fill;pointer-events:none;
  }
  .svc-psd-note span { position:relative;z-index:1; }
}


/* Photoshop TySh matrices: pink -5.5095deg, note -1.9587deg.
   Pink's parent already rotates the background and text together; do not
   rotate those glyphs again. The note PNG contains its own angled corners,
   so rotate only its separate live-text wrapper. */
@media (min-width:1181px) {
  .svc-ornament-pink { transform:rotate(-5.5095deg); }
  .svc-ornament-pink b,.svc-ornament-pink small {
    transform:scale(1.10,.98);transform-origin:left center;
  }
  .svc-psd-note-text {
    display:block;position:relative;z-index:1;
    transform:rotate(-1.9587deg) scale(1.03,.98);
    transform-origin:left top;
  }
}
@media (max-width:1180px) {
  .svc-psd-note-text { display:block;transform:none; }
}


/* User visual adjustment after PSD-matrix baseline; leave both PNG surfaces still. */
@media (min-width:1181px) {
  .svc-ornament-pink b,.svc-ornament-pink small {
    transform:rotate(-3deg) scale(1.10,.98);
  }
  .svc-psd-note-text {
    transform:translateY(5px) rotate(-1.9587deg) scale(1.03,.98);
  }
}

/* v102: the second service scene arrives after a fresh scroll input. The
   existing PSD positions and panel bitmaps remain the final frame. */
@media (min-width:1181px) {
  .svc-ornament-pink b,.svc-ornament-pink small {
    transform:rotate(-4.5deg) scale(1.10,.98);opacity:.60;
  }
  .svc-psd-note-text {
    transform:translate(-4px,9px) rotate(-1.9587deg) scale(1.03,.98);
  }
  .svc-ornament-mint {top:45.9618%;height:3.4329%;}
  .svc-ornament-mint>span {display:block;transform:translateY(-3px);}
  .s03-services-area.is-state03-visible .svc-psd-heading {opacity:1!important;}
  .svc-psd-static-heading {display:none!important;}
  .s03-services-area.is-second-auto .svc-psd-ornaments {
    visibility:visible;opacity:var(--svc-ornament-opacity,0);
  }
  .svc-psd-icon {opacity:var(--svc-badge-opacity,1)!important;
    transform:scale(var(--svc-badge-scale,1));transform-origin:center;}
  .svc-psd-icon::after {opacity:var(--svc-dot-opacity,1);}
  .svc-psd-copy {opacity:1!important;}
  .svc-psd-copy strong {opacity:var(--svc-title-opacity,1);}
  .svc-psd-copy small,.svc-psd-details {opacity:var(--svc-body-opacity,1);}
}
@media (max-width:1180px) {
  .svc-psd-icon::after {opacity:var(--svc-dot-opacity,1);}
  .svc-psd-copy strong {opacity:var(--svc-title-opacity,1);}
  .svc-psd-copy small,.svc-psd-details {opacity:var(--svc-body-opacity,1);}
  .s03-services-area.is-second-auto .svc-psd-card {
    opacity:var(--svc-card-opacity,0)!important;
    transform:translateY(var(--svc-card-y,0px)) scale(var(--svc-card-scale,1))!important;
    transform-origin:center;
  }
  .s03-services-area.is-second-auto .svc-psd-icon {
    opacity:var(--svc-badge-opacity,0)!important;
    transform:scale(var(--svc-badge-scale,1));
  }
}
@media (prefers-reduced-motion:reduce) {
  .s03-services-area.is-second-auto .svc-psd-card {transform:none!important;}
}

/* The bitmap and DOM lettering float together in a child motion shell. The
   article's entrance scale never gets replaced at the handoff. */
.svc-psd-brand{--svc-float-x:5px;--svc-float-y:14px;--svc-float-tilt:1deg}
.svc-psd-web{--svc-float-x:7px;--svc-float-y:12px;--svc-float-tilt:.9deg}
.svc-psd-editorial{--svc-float-x:4px;--svc-float-y:16px;--svc-float-tilt:1.1deg}
.svc-psd-motion{--svc-float-x:6px;--svc-float-y:13px;--svc-float-tilt:1deg}
.svc-psd-content{--svc-float-x:5px;--svc-float-y:15px;--svc-float-tilt:.8deg}
.svc-psd-space{--svc-float-x:6px;--svc-float-y:11px;--svc-float-tilt:1.1deg}
.svc-psd-motion-shell{position:absolute;inset:0;width:100%;height:100%;translate:0 0;rotate:0deg}
@keyframes svc-card-bob {
  0%,100%{translate:0 0;rotate:0deg}
  25%{translate:var(--svc-float-x) calc(var(--svc-float-y)*-1);rotate:var(--svc-float-tilt)}
  50%{translate:calc(var(--svc-float-x)*-.6) calc(var(--svc-float-y)*-.55);rotate:calc(var(--svc-float-tilt)*-.65)}
  75%{translate:calc(var(--svc-float-x)*-.8) calc(var(--svc-float-y)*.75);rotate:calc(var(--svc-float-tilt)*-.8)}
}
.svc-psd-card.is-card-float-ready .svc-psd-motion-shell {
  animation:svc-card-bob var(--svc-float-duration) ease-in-out 0s infinite both;
  will-change:translate,rotate;
}
.svc-psd-card.is-card-float-ready:is(:hover,:focus-within) .svc-psd-motion-shell {animation-play-state:running}
@keyframes svc-soft-blink{0%,100%{opacity:1}50%{opacity:.38}}
@keyframes svc-note-blink{0%,100%{opacity:1}50%{opacity:.32}}
.s03-services-area.is-float-visible .svc-psd-icon::after {
  animation:svc-soft-blink 1.8s ease-in-out infinite;
}
.s03-services-area.is-float-visible .svc-psd-note-text {
  animation:svc-note-blink 1.12s ease-in-out infinite;
}
@media(max-width:1180px){
  .svc-psd-card{--svc-float-x:3px;--svc-float-y:6px;--svc-float-tilt:.35deg}
}
@media(prefers-reduced-motion:reduce){
  .s03-services-area .svc-psd-motion-shell,
  .s03-services-area .svc-psd-icon::after,
  .s03-services-area .svc-psd-note-text,
  .s03-services-area .svc-ornament-pink,
  .s03-services-area .svc-ornament-mint {animation:none!important;translate:none;rotate:none}
}

/* v106: align the badge to the visible alpha edge of each PSD panel. These
   offsets were measured at the badge row of the six original PNGs, not at the
   transparent image rectangle. The visual inset is 16 x 16 px at 1920px. */
@media(min-width:1181px){
  .svc-psd-brand{--svc-edge-left:.576%;--svc-edge-top:1.379%}
  .svc-psd-editorial{--svc-edge-left:.857%;--svc-edge-top:1.299%}
  .svc-psd-content{--svc-edge-left:.185%;--svc-edge-top:13.571%}
  .svc-psd-web{--svc-edge-left:.415%;--svc-edge-top:22.981%}
  .svc-psd-motion{--svc-edge-left:1.117%;--svc-edge-top:1.379%}
  .svc-psd-space{--svc-edge-left:.600%;--svc-edge-top:1.333%}
  .svc-psd-icon,.svc-psd-editorial .svc-psd-icon,.svc-psd-content .svc-psd-icon,
  .svc-psd-web .svc-psd-icon,.svc-psd-motion .svc-psd-icon,.svc-psd-space .svc-psd-icon{
    left:calc(var(--svc-edge-left) + .833333vw);
    top:calc(var(--svc-edge-top) + .833333vw + var(--svc-badge-nudge-y,0px));
  }
  .svc-psd-content{--svc-badge-nudge-y:-.208333vw}
  .svc-psd-editorial{--svc-badge-nudge-y:.15625vw}
  .svc-psd-web{--svc-badge-nudge-y:-.416667vw}
  .svc-psd-icon::after,.svc-psd-web .svc-psd-icon::after{
    top:.2604vw;right:-.1042vw;
  }
  /* Average the slanted panel's top/bottom alpha bounds across the live
     title/body region; move the copy as one unit, leaving all font values. */
  .svc-psd-brand{--svc-copy-balance-y:-.2604vw}
  .svc-psd-editorial,.svc-psd-content{--svc-copy-balance-y:-.1563vw}
  .svc-psd-web{--svc-copy-balance-y:.1042vw}
  .svc-psd-motion{--svc-copy-balance-y:-.3125vw}
  .svc-psd-space{--svc-copy-balance-y:-.2604vw}
  .svc-psd-copy,.svc-psd-editorial .svc-psd-copy,.svc-psd-web .svc-psd-copy,
  .svc-psd-motion .svc-psd-copy{
    transform:translateY(var(--svc-copy-balance-y));
  }
}

/* The user's transparent cutout floats above the live video. The supplied
   alpha and lower crop are preserved; mobile uses a smaller travel distance. */
@keyframes svc-cutout-bob{
  0%,100%{translate:0 0}
  33%{translate:3px -5px}
  66%{translate:-2px 4px}
}
.svc-psd-video.is-ready+.svc-psd-cutout{
  animation:svc-cutout-bob 4.8s ease-in-out infinite;
}
@media(max-width:1180px){
  @keyframes svc-cutout-bob{0%,100%{translate:0 0}33%{translate:1.5px -3px}66%{translate:-1px 2px}}
}
@media(prefers-reduced-motion:reduce){
  .svc-psd-cutout{animation:none!important;translate:none}
}

/* v107: independent paint alpha keeps both mint disc and white initials at
   50% without an inherited .5 opacity multiplying them to 25%. */
.s03-services-area .svc-psd-icon{
  background:rgba(0,255,186,.50);
  color:rgba(255,255,255,.50);
}
@media(min-width:1181px){
  .svc-ornament-pink b,.svc-ornament-pink small{
    top:.208333vw;
    color:rgba(0,255,186,.60);
    opacity:1;
  }
  .svc-ornament-mint>span{transform:translateY(-1px)}
}

/* v108: float the full ornament surfaces with their live text. Both paths
   start and end at the exact PSD position with zero keyframe velocity. */
@keyframes svc-pink-bob{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:4px -9px;rotate:.65deg}
}
@keyframes svc-mint-bob{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:-4px 7px;rotate:-.7deg}
}
.s03-services-area.is-float-visible .svc-ornament-pink{
  animation:svc-pink-bob 5.6s ease-in-out infinite both;
}
.s03-services-area.is-float-visible .svc-ornament-mint{
  animation:svc-mint-bob 4.7s ease-in-out infinite both;
}

/* Keep one float owner; the older PSD panel animation had a negative delay
   and jumped when it began after the entrance. The outer motion shell starts
   at the exact resting frame instead. */
.s03-services-area.is-float-visible .svc-psd-float{animation:none}
@keyframes svc-panel-vibrate{
  0%,100%{translate:0 0}23%{translate:2px -1px}45%{translate:-2px 1px}70%{translate:1px 0}
}
@keyframes svc-badge-vibrate{
  0%,100%{translate:0 0}18%{translate:-2px 1px}42%{translate:2px -1px}68%{translate:-1px 0}
}
@keyframes svc-copy-vibrate{
  0%,100%{translate:0 0}31%{translate:1px 1px}56%{translate:-1px -1px}78%{translate:1px 0}
}
.svc-psd-card.is-card-vibrating .svc-psd-panel-bg{animation:svc-panel-vibrate .34s cubic-bezier(.22,1,.36,1) 1}
.svc-psd-card.is-card-vibrating .svc-psd-icon{animation:svc-badge-vibrate .34s cubic-bezier(.22,1,.36,1) 1}
.svc-psd-card.is-card-vibrating .svc-psd-copy{animation:svc-copy-vibrate .34s cubic-bezier(.22,1,.36,1) 1}
.svc-psd-card .svc-psd-panel-bg{opacity:1;transition:opacity .26s ease}
.svc-psd-card.is-hover-held .svc-psd-panel-bg{opacity:.65}
/* Saved Photoshop composite pixels from the six revised vector-icon layers.
   Keep the separate red notification mark independent of the icon image. */
.s03-services-area .svc-psd-icon{background:none;color:transparent;text-shadow:none;border-radius:0;display:block;width:var(--svc-revised-icon-w,3.3333vw);height:var(--svc-revised-icon-h,3.3333vw);max-width:none;aspect-ratio:auto}
.s03-services-area .svc-psd-icon img{display:block;width:100%;height:100%;object-fit:fill}
.svc-psd-brand{--svc-revised-icon-w:2.917vw;--svc-revised-icon-h:2.917vw;--svc-dot-top:-.052vw;--svc-dot-right:-.313vw}
.svc-psd-editorial{--svc-revised-icon-w:3.385vw;--svc-revised-icon-h:3.385vw;--svc-dot-top:.313vw;--svc-dot-right:-.156vw}
.svc-psd-content{--svc-revised-icon-w:3.385vw;--svc-revised-icon-h:3.385vw;--svc-dot-top:.208vw;--svc-dot-right:.104vw}
.svc-psd-web{--svc-revised-icon-w:3.229vw;--svc-revised-icon-h:3.542vw;--svc-dot-top:.052vw;--svc-dot-right:-.104vw}
.svc-psd-motion{--svc-revised-icon-w:3.177vw;--svc-revised-icon-h:3.177vw;--svc-dot-top:.521vw;--svc-dot-right:-.417vw}
.svc-psd-space{--svc-revised-icon-w:3.281vw;--svc-revised-icon-h:3.281vw;--svc-dot-top:.104vw;--svc-dot-right:-.104vw}
.s03-services-area .svc-psd-icon::after,.s03-services-area .svc-psd-web .svc-psd-icon::after{top:var(--svc-dot-top);right:var(--svc-dot-right)}
@media(max-width:1180px){
  .s03-services-area .svc-psd-icon{width:46px;height:46px}
  .s03-services-area .svc-psd-web .svc-psd-icon{height:50px}
  .s03-services-area .svc-psd-icon::after,.s03-services-area .svc-psd-web .svc-psd-icon::after{top:2px;right:-2px}
}
@media(prefers-reduced-motion:reduce){
  .svc-psd-card.is-card-vibrating .svc-psd-panel-bg,
  .svc-psd-card.is-card-vibrating .svc-psd-icon,
  .svc-psd-card.is-card-vibrating .svc-psd-copy{animation:none}
  .svc-psd-card .svc-psd-panel-bg{transition:none}
}

