/* Service page template styles */
.sv-hero h1 em{color: var(--gold)}

.sv-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items:start}
@media (max-width: 900px){ .sv-grid{grid-template-columns:1fr; gap: 48px} }
.sv-image{
  width:100%; aspect-ratio: 4/5; border-radius: 18px;
  background: #1a2238 center/cover no-repeat;
  border: 1px solid var(--cream-hair);
}

.sv-list{list-style:none; margin-top: 32px}
.sv-list li{
  display:flex; gap: 18px; padding: 18px 0;
  border-top: 1px solid var(--cream-hair);
  font-size: 15.5px; color: var(--cream-dim); line-height: 1.55; font-weight: 300;
}
.sv-list li:last-child{border-bottom: 1px solid var(--cream-hair)}
.sv-list .ico{
  flex:0 0 34px; width:34px; height:34px; border-radius: 50%;
  background: var(--gold-soft); border: 1px solid var(--gold-hair);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
}
.sv-list .ico svg{width:15px; height:15px}
.sv-list strong{color: var(--cream); font-weight: 500; display:block; margin-bottom: 4px; font-size: 15.5px}

.process{display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px}
@media (max-width: 900px){ .process{grid-template-columns: 1fr 1fr} }
@media (max-width: 560px){ .process{grid-template-columns: 1fr} }
.step{
  padding: 30px 26px; border:1px solid var(--cream-hair); border-radius: 16px;
  background: rgba(235,235,231,.02); position: relative;
}
.step .n{font-family:"Fraunces",serif; font-style:italic; color:var(--gold); font-size: 26px; margin-bottom: 14px}
.step h4{font-size: 17px; font-weight: 500; margin-bottom: 10px; letter-spacing:-.01em}
.step p{font-size: 14px; color: var(--cream-dim); line-height: 1.55; font-weight: 300}

.targets{display:grid; grid-template-columns: repeat(3,1fr); gap: 20px}
@media (max-width: 900px){ .targets{grid-template-columns:1fr} }
.target{
  padding: 28px; border:1px solid var(--cream-hair); border-radius: 16px;
  background: rgba(235,235,231,.02);
}
.target .badge{
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--cream); border: 1px solid var(--gold-hair); background: var(--gold-soft);
  margin-bottom: 16px;
}
.target h4{font-size: 18px; margin-bottom: 10px; font-weight: 500}
.target p{font-size: 14px; color: var(--cream-dim); line-height: 1.55; font-weight: 300}

.commit{
  padding: 40px 48px; border:1px solid var(--gold-hair); border-radius: 18px;
  background: linear-gradient(140deg, rgba(var(--gold-rgb),.06), rgba(235,235,231,.02));
  display:grid; grid-template-columns: auto 1fr; gap: 30px; align-items:center;
}
@media (max-width: 900px){ .commit{grid-template-columns: 1fr; padding: 28px} }
.commit .big{
  font-family:"Fraunces",serif; font-style:italic; color: var(--gold);
  font-size: clamp(60px, 8vw, 100px); line-height: 1; font-weight: 300;
}
.commit h3{font-size: 22px; margin-bottom: 10px; font-weight: 500}
.commit p{font-size: 15px; color: var(--cream-dim); line-height: 1.6; font-weight: 300}

/* ═══════ MOBILE service page fine-tuning ═══════ */
@media (max-width: 640px){
  .sv-hero h1{font-size: clamp(32px, 10vw, 48px); line-height:1.05}
  .sv-grid{gap: 36px}
  .sv-image{aspect-ratio: 1/1; max-height: 340px}
  .sv-list{margin-top: 24px}
  .sv-list li{gap: 14px; padding: 16px 0; font-size: 14.5px}
  .sv-list .ico{flex:0 0 30px; width:30px; height:30px}
  .sv-list .ico svg{width:13px; height:13px}
  .sv-list strong{font-size: 14.5px}
  .step{padding: 22px 20px}
  .step .n{font-size: 22px; margin-bottom:10px}
  .step h4{font-size:16px}
  .step p{font-size:13.5px}
  .target{padding: 22px 20px}
  .target h4{font-size:17px}
  .target p{font-size:13.5px}
  .target .badge{margin-bottom:12px}
  .commit{padding: 26px 22px; gap:18px}
  .commit .big{font-size: 56px}
  .commit h3{font-size:19px}
  .commit p{font-size:14px}
}