/* Photography-led service portfolio. */
#layanan{background:radial-gradient(ellipse at 95% 0,#e5edf3 0,transparent 45%),#f5f7f9;position:relative}
#layanan .section-head{align-items:center;margin-bottom:42px}
#layanan .section-head h2{max-width:630px;font-size:43px;line-height:1.24}
#layanan .section-head>p{border-left:2px solid var(--gold);padding-left:22px;font-size:13px}
#layanan .services-grid{gap:28px;align-items:stretch}
#layanan .service-card{padding:0;border:1px solid #dfe6ec;border-radius:12px;background:#fff;box-shadow:0 6px 20px #102c4805;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;transition:transform .3s,box-shadow .3s,border-color .3s}
#layanan .service-card:hover,#layanan .service-card:focus-within{transform:translateY(-7px);box-shadow:0 20px 42px #112f4915;border-color:#c4d4e1}
#layanan .service-card:after{display:none}
.service-media{position:relative;width:100%;aspect-ratio:1.8;background:#102c48;overflow:hidden;flex-shrink:0}
.service-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease;object-position:65% center}
#layanan .service-card:nth-child(3) .service-media img{object-position:85% center;transform:scale(1.2);transform-origin:right center}
#layanan .service-card:nth-child(4) .service-media img{object-position:70% center}
#layanan .service-card:hover .service-media img{transform:scale(1.065)}
#layanan .service-card:nth-child(3):hover .service-media img{transform:scale(1.26)}
.service-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,#071b3355,transparent 45%,#071b3380)}
#layanan .service-number{position:absolute;top:19px;left:22px;background:#0b243e8c;backdrop-filter:blur(10px);border:1px solid #ffffff38;border-radius:4px;padding:5px 9px;color:#fff;font-size:8px;font-weight:600;letter-spacing:1.6px}
#layanan .service-icon{position:absolute;bottom:17px;right:20px;width:44px;height:44px;border-radius:9px;background:#fff;color:#1b476a;box-shadow:0 6px 20px #0002}
#layanan .service-icon svg{width:24px;height:24px}
.service-body{display:flex;flex-direction:column;flex:1;width:100%;padding:27px 27px 0}
.service-kicker{font-size:8px;font-weight:700;letter-spacing:1.8px;color:#647c90;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.service-kicker:before{content:'';width:15px;height:2px;background:var(--gold)}
#layanan .service-card h3{font-size:21px;letter-spacing:-.65px;margin:0 0 13px;line-height:1.35}
#layanan .service-card p{font-size:12px;line-height:1.9;margin-bottom:20px;flex:1;color:#657888}
.service-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.service-tags span{font-size:9px;color:#486880;background:#f0f5f8;border:1px solid #e6edf2;border-radius:4px;padding:4px 9px}
#layanan .service-card a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;border-top:1px solid #e6edf2;margin:0;padding:17px 0;color:#244c6c}
#layanan .service-card a>span{display:grid;place-items:center;width:29px;height:29px;margin:0;background:#edf3f7;border-radius:50%;font-size:17px;color:#264e6d;transition:background .25s,transform .25s}
#layanan .service-card a:hover>span,#layanan .service-card a:focus-visible>span{background:var(--gold);transform:rotate(45deg)}
#layanan .service-bottom{margin-top:32px;padding:22px 28px;border:1px solid #dbe5ec;border-radius:9px;background:#eaf0f5;justify-content:space-between;font-size:12px;color:#4f687d}
#layanan .service-bottom .text-link{font-size:12px}
@media(max-width:1100px){.service-body{padding:24px 21px 0}#layanan .service-card h3{font-size:18px}#layanan .services-grid{gap:20px}}
@media(max-width:950px){#layanan .section-head h2{font-size:34px}#layanan .section-head{align-items:start}.service-media{aspect-ratio:1.8}#layanan .service-card h3{font-size:20px}}
@media(max-width:640px){#layanan .section-head h2{font-size:30px}#layanan .section-head>p{font-size:12px;margin-top:21px;padding-left:16px}#layanan .section-head{margin-bottom:28px}#layanan .services-grid{gap:24px}.service-media{aspect-ratio:1.75}.service-body{padding:24px 24px 0}#layanan .service-card h3{font-size:21px}#layanan .service-card p{font-size:12px;margin-bottom:16px}.service-tags{margin-bottom:20px}#layanan .service-bottom{align-items:start;gap:12px;padding:22px;font-size:11px}#layanan .service-bottom .text-link{font-size:11px}#layanan .service-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){#layanan .service-card,#layanan .service-media img,#layanan .service-card a>span{transition:none!important;transform:none!important}}