/* ============================================================
   SERVICES PAGE
   ============================================================ */
.srv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 760px){ .srv-grid { grid-template-columns: 1fr; } }
.srv {
  position: relative; padding: clamp(34px, 4vw, 56px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column; gap: 16px; min-height: 270px;
}
.srv::before { content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(120% 100% at 0% 0%, rgba(212,175,55,0.12), transparent 55%);
  opacity:0; transition: opacity .55s var(--ease); }
.srv:hover::before { opacity:1; }
.srv > * { position: relative; z-index:1; }
.srv__top { display:flex; align-items:center; justify-content:space-between; }
.srv__no { font-family: var(--display); font-size: 18px; color: var(--gold); letter-spacing:0.08em; }
.srv__glyph { width: 46px; height: 46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; transition: all .5s var(--ease); }
.srv__glyph span { width: 14px; height: 14px; border:1.5px solid var(--gold); transition: all .5s var(--ease); }
.srv__glyph .g-circle { border-radius:50%; }
.srv__glyph .g-diamond { transform: rotate(45deg); }
.srv__glyph .g-square { border-radius:1px; }
.srv__glyph .g-triangle { width:0; height:0; border:none; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:15px solid var(--gold); background:none; }
.srv:hover .srv__glyph { border-color: var(--gold); transform: rotate(90deg); box-shadow:0 0 22px rgba(212,175,55,0.35); }
.srv:hover .srv__glyph span { background: var(--gold); }
.srv:hover .srv__glyph .g-triangle { background:none; }
.srv__name { font-family: var(--display); font-size: clamp(28px, 3.4vw, 42px); color: var(--cream); line-height:0.95; margin-top: 26px; }
.srv__desc { color: var(--text-dim); font-size: 15.5px; max-width: 40ch; }
.srv__line { margin-top:auto; height:1px; background: var(--gold-grad); transform: scaleX(0); transform-origin:left; transition: transform .55s var(--ease); }
.srv:hover .srv__line { transform: scaleX(1); }

/* process */
.process { background: linear-gradient(180deg, rgba(20,16,8,0), rgba(20,16,8,0.4)); }
.proc-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 50px; }
@media (max-width: 820px){ .proc-grid { grid-template-columns: 1fr 1fr; gap:30px; } }
@media (max-width: 460px){ .proc-grid { grid-template-columns: 1fr; } }
.proc { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.proc__no { font-family: var(--display); font-size: clamp(46px,6vw,80px); color: rgba(212,175,55,0.3); line-height: 0.9; }
.proc h4 { font-family: var(--heading); font-weight:700; font-size: 19px; color: var(--cream); margin: 12px 0 10px; letter-spacing:0; }
.proc p { color: var(--text-dim); font-size: 14.5px; }
.proc::after { content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background: var(--gold); transition: width .8s var(--ease); }
.proc.in::after { width: 40px; }