/* ============================================================
   SERVICES PAGE — COMPONENT STYLES
   Built on the shared RoyalCraft design tokens (styles/main.css).
   No token overrides — colors, fonts, radii, easing all inherited
   so this page is a seamless continuation of Home & About.
   ============================================================ */

/* ============================================
   INTRO HELPERS
   ============================================ */
.svc-intro-img{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  aspect-ratio: 5/4;
}
.svc-intro-img img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease);
}
.svc-intro-img:hover img{ transform: scale(1); }
.svc-intro-badge{
  position:absolute; bottom:24px; left:24px;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 18px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight:700;
  display:flex; flex-direction:column; line-height:1.2;
}
.svc-intro-badge .big{ font-size:1.9rem; }
.svc-intro-badge .small{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-family:var(--font-body); font-weight:600;
}

/* ============================================
   PREMIUM SERVICE CARDS
   ============================================ */
.svc-grid{
  display:grid; gap: 28px;
  grid-template-columns: repeat(1,1fr);
}
@media(min-width:680px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .svc-grid{ grid-template-columns: repeat(4,1fr); } }

.svc-card{
  position:relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.svc-card:hover{
  transform: translateY(-10px);
  border-color: var(--gold);
  box-shadow: 0 30px 60px -30px rgba(212,175,55,.45);
}
.svc-card-media{
  position:relative; overflow:hidden; aspect-ratio: 4/3;
}
.svc-card-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  filter: saturate(.9);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.svc-card:hover .svc-card-media img{ transform: scale(1.16); filter: saturate(1.05); }
.svc-card-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,35,66,0) 40%, rgba(6,20,39,.55) 100%);
}
.svc-card-icon{
  position:absolute; bottom:-26px; left:24px; z-index:2;
  width:54px; height:54px; border-radius:50%;
  background: var(--navy);
  border: 4px solid var(--bg-surface);
  display:flex; align-items:center; justify-content:center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.svc-card:hover .svc-card-icon{ background: var(--gold); transform: rotate(-12deg); }
.svc-card-icon svg{ width:24px; height:24px; stroke: var(--gold); transition: stroke .35s var(--ease); }
.svc-card:hover .svc-card-icon svg{ stroke: var(--navy-deep); }
.svc-card-num{
  position:absolute; top:18px; right:20px; z-index:2;
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.2em;
  color: rgba(244,241,234,.85);
}
.svc-card-body{
  padding: 40px 28px 30px;
  display:flex; flex-direction:column; gap:10px; flex:1;
}
.svc-card-body h3{
  font-family: var(--font-display);
  font-size:1.25rem; color: var(--text-main);
}
.svc-card-body p{
  font-size:.92rem; color: var(--text-muted); line-height:1.7;
  flex:1; margin-bottom: 6px;
}

/* ============================================
   FEATURED SERVICE — SPLIT SCREEN
   ============================================ */
.featured-split{
  display:grid; gap:0;
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
@media(min-width:992px){ .featured-split{ grid-template-columns: 1fr 1fr; } }
.featured-media{ position:relative; overflow:hidden; min-height: 340px; }
.featured-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.06);
  transition: transform 1.6s var(--ease);
}
.featured-split:hover .featured-media img{ transform: scale(1); }
.featured-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(6,20,39,0) 55%, rgba(6,20,39,.55) 100%);
}
@media(max-width:991px){
  .featured-media::after{ background: linear-gradient(180deg, rgba(6,20,39,0) 50%, rgba(6,20,39,.55) 100%); }
}
.featured-body{
  padding: 56px 36px;
  display:flex; flex-direction:column; justify-content:center;
}
@media(min-width:992px){ .featured-body{ padding: 80px 64px; } }
.featured-body h2{ color: var(--text-inverse); margin-bottom: 18px; }
.featured-body > p{ color: rgba(244,241,234,.72); margin-bottom: 8px; }
.featured-features{
  display:grid; gap:0; margin-top: 22px;
}
.featured-feature{
  display:flex; align-items:center; gap:16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(244,241,234,.1);
}
.featured-feature:last-child{ border-bottom:none; }
.featured-feature .fcheck{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border: 1px solid rgba(212,175,55,.45);
  display:flex; align-items:center; justify-content:center;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.featured-feature:hover .fcheck{ background: var(--gold); transform: rotate(360deg); }
.featured-feature .fcheck svg{ width:18px; height:18px; stroke: var(--gold); transition: stroke .35s var(--ease); }
.featured-feature:hover .fcheck svg{ stroke: var(--navy-deep); }
.featured-feature span{ font-size:1rem; font-weight:500; color: var(--text-inverse); }
.featured-actions{ margin-top: 34px; display:flex; gap:18px; flex-wrap:wrap; }

/* ============================================
   WORK PROCESS — VERTICAL TIMELINE
   (matches the About page process timeline)
   ============================================ */
.vtimeline{
  position:relative;
  max-width: 760px; margin: 0 auto;
}
.vtimeline::before{
  content:'';
  position:absolute; top:0; bottom:0; left:29px;
  width:2px;
  background: repeating-linear-gradient(180deg, var(--gold) 0 10px, transparent 10px 20px);
}
@media(min-width:768px){
  .vtimeline::before{ left:50%; transform: translateX(-1px); }
}
.vstep{
  position:relative;
  display:grid; grid-template-columns: 60px 1fr; gap: 24px;
  padding-bottom: 48px;
}
.vstep:last-child{ padding-bottom:0; }
@media(min-width:768px){
  .vstep{ grid-template-columns: 1fr 60px 1fr; gap:24px; align-items:start; }
  .vstep .vstep-body{ grid-column:1; text-align:right; }
  .vstep .vstep-num{ grid-column:2; }
  .vstep .vstep-spacer{ grid-column:3; display:block; }
  .vstep:nth-child(even) .vstep-body{ grid-column:3; text-align:left; }
  .vstep:nth-child(even) .vstep-spacer{ grid-column:1; }
  .vstep:nth-child(even) .vstep-num{ grid-column:2; }
}
.vstep-num{
  width:60px; height:60px; border-radius:50%;
  background: var(--navy); color: var(--gold);
  font-family: var(--font-display); font-weight:700; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  border: 4px solid var(--bg-page);
  position:relative; z-index:1;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.vstep:hover .vstep-num{ background: var(--gold); color: var(--navy-deep); }
.vstep-body h3{ margin-bottom:8px; }
.vstep-body p{ color: var(--text-muted); font-size:.94rem; }
.vstep-spacer{ display:none; }