/* Refinement layer, loaded last. Keeps the approved blue identity and quiets everything that competes with photos and the contact action. */
.renewal-site{font-family:"Pretendard Variable","Malgun Gothic","Apple SD Gothic Neo",sans-serif;--muted-soft:#5a6f7d;--tint:#e8f3f9}
.renewal-site ::selection{background:#bfe0f3;color:var(--ink)}
.renewal-site input{caret-color:var(--brand)}
.renewal-site input::placeholder{color:#64757f;opacity:1}
.renewal-site .legacy-footer,.renewal-site .header-brand{font-family:inherit}
.renewal-site .eyebrow{display:none}

/* Type */
.renewal-site h1{letter-spacing:-.02em;line-height:1.3;margin-bottom:10px}
.renewal-site h2{letter-spacing:-.015em}
.renewal-site #count,.renewal-site #video-count,.renewal-site .case-media-tabs span{font-variant-numeric:tabular-nums}

/* Header */
.renewal-site header.shell{padding-block:14px;gap:2px 24px}
.renewal-site header nav{gap:2px 20px}
.renewal-site header nav a{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
.renewal-site header nav a:hover{color:var(--ink)}
.renewal-site header nav a[aria-current=page]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--brand)}
.renewal-site .layout{padding-top:24px}
.renewal-site .case-intro{margin-bottom:16px}
.renewal-site .case-intro p{margin-bottom:0}

/* Controls stay quiet: solid blue is reserved for contact actions. */
.renewal-site .case-media-tabs{gap:4px;padding:4px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.renewal-site .case-media-tabs button{min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--muted);transition:background-color .15s,color .15s}
.renewal-site .case-media-tabs button:hover{color:var(--ink)}
.renewal-site .case-media-tabs [aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #152c3a24}
.renewal-site .categories{margin-bottom:12px}
.renewal-site .categories a{border-radius:999px;color:var(--muted);transition:background-color .15s,border-color .15s,color .15s}
.renewal-site .categories a:hover{border-color:#b7cbd8;color:var(--ink)}
.renewal-site .categories a[aria-current=true]{background:var(--tint);border-color:var(--brand);color:#005a80}
.renewal-site form{margin-bottom:24px}
.renewal-site form label{font-size:13px;color:var(--muted);margin-bottom:6px}
.renewal-site .search-row input{height:44px;border-color:#a9b8c2;border-radius:8px}
.renewal-site .search-row .primary{min-height:44px;background:#fff;color:var(--accent);border-color:var(--accent);border-radius:8px}
.renewal-site .search-row .primary:hover{background:var(--surface)}
.renewal-site .results-head{margin-bottom:14px}
.renewal-site .results-head h2{font-size:19px}

/* Case cards: the before and after photos are the proof, so they get the labels and the space. */
.renewal-site .case-results{gap:36px}
.renewal-site .case{margin:0;padding:0;border:0}
.renewal-site .pair{gap:6px;margin-bottom:12px}
.renewal-site .pair figure{position:relative}
.renewal-site .pair img{border-radius:10px;transition:filter .2s}
.renewal-site .pair button{cursor:zoom-in;border-radius:10px}
.renewal-site .pair button:hover img{filter:brightness(1.05)}
.renewal-site .pair button:focus-visible{outline-offset:2px}
.renewal-site .pair figcaption{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:6px;background:#152c3ad9;color:#fff;font-size:12px;font-weight:600;line-height:1.5;pointer-events:none}
.renewal-site .pair figure:last-child figcaption{background:var(--brand)}
.renewal-site .pair figure>p{margin:0;padding:44px 12px 12px;background:var(--surface);border-radius:10px;font-size:13px}
.renewal-site .case small{display:block;color:var(--muted-soft);font-size:13px;line-height:1.5}
.renewal-site .case h3{margin:2px 0 0;font-size:17px;line-height:1.45;white-space:normal;overflow:visible}
.renewal-site .case .case-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.9em;overflow:hidden;white-space:normal;overflow-wrap:anywhere}
.renewal-site .video-page .case-results{gap:28px 16px}
.renewal-site .video-page .video-card{padding:0}
.renewal-site .video-thumb{margin-bottom:10px;border-radius:10px}
.renewal-site .video-play-icon{width:44px;height:44px;padding:0;font-size:0;background:#152c3ad9}
.renewal-site .video-play-icon::before{content:"";width:15px;height:17px;margin-left:3px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.renewal-site .load-more{margin-top:32px;border-radius:8px}

/* Contact actions */
.renewal-site .primary,.renewal-site .outline{transition:background-color .15s}
.renewal-site .mobile-contact{box-shadow:0 -4px 16px #152c3a12}
.renewal-site #contact{border-radius:14px}

/* Inquiry */
.renewal-site .guide-steps h2{margin:12px 0;font-size:24px;line-height:1.4}
@media(max-width:360px){.renewal-site .guide-steps h2{font-size:22px}}

/* Footer */
.renewal-site .legacy-footer>small{color:var(--muted-soft)}
.renewal-site .social-links a{transition:border-color .15s}
.renewal-site .social-links a:hover{border-color:var(--accent)}

/* Case detail */
.chrome{display:contents}
.case-detail .breadcrumbs{margin:0 0 14px;font-size:13px;color:var(--muted-soft);word-break:keep-all}
.case-detail .breadcrumbs a{color:inherit;text-decoration:none}
.case-detail .breadcrumbs a:hover{color:var(--ink);text-decoration:underline}
.case-detail .breadcrumbs a[aria-current=page]{color:var(--ink)}
.case-detail h1{font-size:26px}
.case-detail .case-meta{margin:0 0 20px;font-size:14px;color:var(--muted-soft)}
.case-detail .pair img{aspect-ratio:3/4;object-fit:contain}
.case-detail .blog-cover{display:block;width:100%;max-height:640px;object-fit:contain;background:var(--surface);border-radius:10px}
.case-detail .detail-player{display:block;margin-inline:auto;border-radius:10px}
.case-story{margin-top:32px}
.case-story h2,.case-detail .service-faq h2{margin-bottom:12px;font-size:21px;line-height:1.4}
.case-story>p{max-width:65ch;white-space:pre-wrap}
.case-story iframe{display:block;width:100%;aspect-ratio:16/9;margin-top:16px;border:0;border-radius:10px}
.case-detail .customer-request{margin:20px 0 0;padding:16px 18px;border:0;border-radius:10px;background:var(--surface)}
.case-detail .customer-request strong{display:block;margin-bottom:6px;font-size:14px}
.case-detail .customer-request p{margin:0;max-width:65ch}
.case-detail .case-actions{display:grid;gap:8px;margin-top:20px}
.case-detail .service-faq{margin:48px 0 0}
.case-detail .service-faq details{padding:0;border-bottom:1px solid var(--line)}
.case-detail .service-faq details:first-of-type{border-top:1px solid var(--line)}
.case-detail .service-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;color:var(--ink);font-size:16px;font-weight:600;line-height:1.5;list-style:none;word-break:keep-all;cursor:pointer}
.case-detail .service-faq summary::-webkit-details-marker{display:none}
.case-detail .service-faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.case-detail .service-faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.case-detail .service-faq summary:hover{color:var(--accent)}
.case-detail .service-faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.case-detail .service-faq details p{margin:0;padding:0 24px 18px 0;font-size:15px;line-height:1.75}

/* Wider screens without the two-column layout */
@media(min-width:700px){
 .renewal-site .pair{gap:8px}
 .case-detail .case-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
 .renewal-site header.shell{padding-block:18px}
 .renewal-site .layout{padding-top:36px;gap:48px}
 .renewal-site h1{font-size:34px}
 .renewal-site .case-intro{margin-bottom:20px}
 .renewal-site .case-intro p{font-size:16px}
 .renewal-site .case-media-tabs{width:280px;margin-bottom:16px}
 .renewal-site .categories{margin-bottom:16px}
 .renewal-site form{max-width:520px}
 .renewal-site .results-head h2{font-size:21px}
 .renewal-site .case-results{gap:44px 28px}
 .renewal-site .video-page .case-results{gap:32px 18px}
 .renewal-site .case h3{font-size:18px}
 .renewal-site #contact{top:24px;max-height:calc(100dvh - 48px)}
 .renewal-site .steps-heading{font-size:34px}
 .case-detail h1{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.renewal-site *{transition:none!important}}