
.tp-services-shell{
max-width:1220px;
margin:0 auto;
padding:26px 22px 72px}
.services-hero{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
gap:40px;
align-items:center;
min-height:430px;
padding:50px 54px;
border-radius:30px;
background:linear-gradient(135deg,#111827 0%,#25164b 48%,#12344b 100%);
color:#fff;
box-shadow:0 30px 70px rgba(15,23,42,.22);
isolation:isolate}
.services-hero-glow{
position:absolute;
border-radius:50%;
z-index:-1}
.services-glow-one{
width:420px;
height:420px;
right:-120px;
top:-180px;
background:radial-gradient(circle,rgba(124,58,237,.42),transparent 68%)}
.services-glow-two{
width:340px;
height:340px;
left:-130px;
bottom:-180px;
background:radial-gradient(circle,rgba(6,182,212,.25),transparent 68%)}
.services-hero-copy{
position:relative;
z-index:2}
.services-kicker{
display:inline-flex;
align-items:center;
gap:8px;
font-size:10px;
font-weight:900;
letter-spacing:.14em;
color:#ddd6fe}
.services-kicker i{
width:8px;
height:8px;
border-radius:50%;
background:#34d399;
box-shadow:0 0 0 5px rgba(52,211,153,.12)}
.services-kicker.dark{
color:#6d28d9}
.services-hero h1{
font-size:clamp(38px,5vw,62px);
line-height:1.02;
letter-spacing:-.055em;
max-width:690px;
margin:16px 0 18px;
color:#fff}
.services-hero p{
max-width:650px;
margin:0;
color:#cbd5e1;
font-size:16px;
line-height:1.7}
.services-hero-actions{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
margin-top:28px}
.services-primary-btn,.services-secondary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:46px;
border-radius:13px;
padding:0 18px;
font-weight:850;
font-size:13px;
text-decoration:none;
border:0;
cursor:pointer}
.services-primary-btn{
background:#fff;
color:#111827;
box-shadow:0 12px 30px rgba(0,0,0,.18)}
.services-primary-btn:hover{
transform:translateY(-1px)}
.services-secondary-btn{
border:1px solid rgba(255,255,255,.18);
color:#fff;
background:rgba(255,255,255,.06)}
.services-secondary-btn.light{
border-color:#d0d5dd;
color:#475467;
background:#fff}
.services-trust-row{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:22px;
color:#c4b5fd;
font-size:11px;
font-weight:750}
.services-hero-visual{
position:relative;
min-height:320px;
display:grid;
place-items:center}
.services-orbit{
position:absolute;
border-radius:50%;
border:1px solid rgba(255,255,255,.1)}
.services-orbit.orbit-a{
width:330px;
height:330px}
.services-orbit.orbit-b{
width:250px;
height:250px;
border-style:dashed;
transform:rotate(16deg)}
.services-demo-tp-card{
position:relative;
width:270px;
padding:16px;
background:rgba(255,255,255,.97);
color:#111827;
border-radius:28px;
border:1px solid rgba(255,255,255,.2);
box-shadow:0 28px 55px rgba(0,0,0,.28);
transform:rotate(2deg);
z-index:2}
.services-demo-top{
display:flex;
justify-content:space-between;
font-size:10px;
margin-bottom:12px}
.services-demo-search{
padding:10px;
border-radius:11px;
background:#f5f3ff;
color:#7c3aed;
font-size:10px;
font-weight:800;
margin-bottom:8px}
.services-demo-row{
display:grid;
grid-template-columns:38px 1fr auto;
gap:9px;
align-items:center;
padding:10px 8px;
border-bottom:1px solid #eef0f4}
.services-demo-row>span{
width:38px;
height:38px;
border-radius:11px;
background:#f8fafc;
display:grid;
place-items:center}
.services-demo-row b,.services-demo-row small{
display:block}
.services-demo-row b{
font-size:10.5px}
.services-demo-row small{
font-size:8.8px;
color:#98a2b3;
margin-top:2px}
.services-demo-row i{
font-style:normal;
color:#7c3aed}
.services-demo-status{
margin-top:10px;
padding:9px;
border-radius:11px;
background:#ecfdf5;
color:#047857;
font-size:9.5px;
font-weight:850}
.services-demo-status i{
display:inline-block;
width:6px;
height:6px;
border-radius:50%;
background:#10b981;
margin-right:5px}
.services-float-tp-card{
position:absolute;
background:#fff;
color:#111827;
border-radius:14px;
padding:10px 12px;
box-shadow:0 16px 34px rgba(0,0,0,.18);
z-index:3}
.services-float-tp-card b,.services-float-tp-card small{
display:block}
.services-float-tp-card b{
color:#6d28d9;
font-size:12px}
.services-float-tp-card small{
font-size:9px;
color:#667085;
margin-top:2px}
.float-a{
left:0;
top:38px}
.float-b{
right:0;
bottom:44px}
.services-flow{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:20px 0 44px}
.services-flow>div{
display:flex;
align-items:center;
gap:12px;
padding:15px 16px;
border:1px solid #e5e7eb;
border-radius:16px;
background:#fff}
.services-flow>div>span{
width:36px;
height:36px;
border-radius:11px;
background:#f5f3ff;
color:#6d28d9;
display:grid;
place-items:center;
font-weight:900}
.services-flow p,.services-flow b,.services-flow small{
display:block;
margin:0}
.services-flow b{
font-size:12px}
.services-flow small{
font-size:10px;
color:#98a2b3;
margin-top:2px}
.services-section{
margin-top:42px}
.services-section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:20px;
margin-bottom:18px}
.services-section-head>div>span,.service-request-guide>span,.service-form-head small{
font-size:9.5px;
letter-spacing:.13em;
color:#7c3aed;
font-weight:900}
.services-section-head h2{
margin:5px 0 3px;
font-size:28px;
letter-spacing:-.03em}
.services-section-head p{
margin:0;
color:#667085;
font-size:12px}
.services-section-head>strong{
padding:7px 10px;
border-radius:999px;
background:#f5f3ff;
color:#6d28d9;
font-size:10.5px}
.services-category-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px}
.services-category-tp-card{
display:grid;
grid-template-columns:58px 1fr;
gap:14px;
padding:18px;
border:1px solid #e6e9ef;
border-radius:19px;
background:#fff;
color:#111827;
box-shadow:0 8px 24px rgba(15,23,42,.035);
transition:.18s;
text-decoration:none}
.services-category-tp-card:hover{
transform:translateY(-4px);
border-color:#ddd6fe;
box-shadow:0 18px 36px rgba(15,23,42,.09)}
.services-category-icon{
width:58px;
height:58px;
border-radius:17px;
background:linear-gradient(135deg,#f5f3ff,#ecfeff);
display:grid;
place-items:center;
font-size:27px}
.services-category-copy small{
font-size:9px;
color:#7c3aed;
font-weight:850;
letter-spacing:.08em}
.services-category-copy h3{
font-size:17px;
margin:5px 0 6px}
.services-category-copy p{
height:38px;
overflow:hidden;
color:#667085;
font-size:11.5px;
line-height:1.55;
margin:0 0 12px}
.services-category-copy>span{
font-size:10.5px;
color:#6d28d9;
font-weight:850}
.services-request-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px}
.services-request-tp-card{
display:block;
padding:18px;
border:1px solid #e6e9ef;
border-radius:18px;
background:#fff;
color:#111827;
box-shadow:0 8px 24px rgba(15,23,42,.035);
text-decoration:none}
.services-request-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px}
.services-request-top>span{
font-size:10px;
color:#667085;
font-weight:800}
.request-status{
padding:5px 8px;
border-radius:999px;
font-size:9px;
background:#ecfdf5;
color:#047857}
.request-status.matched,.request-status.in_progress{
background:#eff6ff;
color:#1d4ed8}
.request-status.completed{
background:#f0fdf4;
color:#15803d}
.request-status.cancelled{
background:#fef2f2;
color:#b91c1c}
.services-request-tp-card h3{
font-size:16px;
margin:12px 0 6px}
.services-request-tp-card p{
color:#667085;
font-size:11.5px;
line-height:1.55;
min-height:35px}
.services-request-tp-card footer,.service-request-meta{
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
margin-top:15px;
color:#98a2b3;
font-size:10px}
.services-request-tp-card footer span{
color:#6d28d9;
font-weight:850}
.service-request-meta{
justify-content:flex-start;
flex-wrap:wrap}
.service-request-meta span{
padding:5px 7px;
background:#f8fafc;
border-radius:8px}
.services-empty{
grid-column:1/-1;
display:flex;
gap:16px;
align-items:center;
padding:26px;
border:1px dashed #d0d5dd;
background:#fafafa;
border-radius:18px}
.services-empty>span{
font-size:34px}
.services-empty h3{
margin:0 0 4px}
.services-empty p{
margin:0;
color:#667085;
font-size:12px}
.services-empty .services-primary-btn{
margin-left:auto;
background:#6d28d9;
color:#fff}
.service-category-hero,.service-request-hero{
padding:26px 28px;
border-radius:24px;
background:linear-gradient(135deg,#faf9ff,#f0fdfa);
border:1px solid #e5e7eb}
.service-back{
display:inline-block;
margin-bottom:18px;
color:#6d28d9;
font-size:11px;
font-weight:850;
text-decoration:none}
.service-category-hero-main{
display:grid;
grid-template-columns:auto 1fr auto;
gap:20px;
align-items:center}
.service-category-large-icon{
width:72px;
height:72px;
border-radius:20px;
background:#fff;
display:grid;
place-items:center;
font-size:34px;
border:1px solid #e5e7eb;
box-shadow:0 8px 22px rgba(15,23,42,.05)}
.service-category-hero h1,.service-request-hero h1{
margin:4px 0 6px;
font-size:34px;
letter-spacing:-.04em}
.service-category-hero p,.service-request-hero p{
margin:0;
color:#667085}
.service-category-hero .services-primary-btn{
background:#6d28d9;
color:#fff}
.service-request-hero>div{
max-width:720px}
.service-request-hero .service-category-large-icon{
display:inline-grid;
margin-bottom:14px}
.service-request-layout{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
gap:18px;
margin-top:20px}
.service-request-form-tp-card,.service-request-guide{
background:#fff;
border:1px solid #e5e7eb;
border-radius:21px;
padding:24px}
.service-form-head{
display:flex;
align-items:center;
gap:11px;
padding-bottom:18px;
border-bottom:1px solid #eef0f4}
.service-form-head>span{
width:42px;
height:42px;
border-radius:12px;
background:#f5f3ff;
display:grid;
place-items:center;
font-size:20px}
.service-form-head h2{
margin:3px 0 0;
font-size:17px}
.services-form{
margin-top:20px}
.service-field{
margin-bottom:16px}
.service-field label,.service-field small{
display:block}
.service-field label{
font-size:11.5px;
font-weight:850;
margin-bottom:7px}
.service-field small{
font-size:9.5px;
color:#98a2b3;
margin-top:5px}
.service-field input,.service-field textarea{
width:100%;
box-sizing:border-box;
padding:12px 13px;
border:1px solid #d0d5dd;
border-radius:12px;
background:#fff;
font:inherit}
.service-field input:focus,.service-field textarea:focus{
outline:none;
border-color:#8b5cf6;
box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.service-field-row{
display:grid;
grid-template-columns:.45fr 1fr;
gap:12px}
.service-form-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:8px}
.service-form-actions .services-primary-btn{
background:#6d28d9;
color:#fff}
.service-request-guide{
align-self:start;
background:linear-gradient(180deg,#17132d,#1f2937);
color:#fff}
.service-request-guide>span{
color:#c4b5fd}
.service-request-guide h3{
font-size:23px;
margin:7px 0 18px}
.service-request-guide ul{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:15px}
.service-request-guide li{
display:grid;
grid-template-columns:30px 1fr;
gap:10px;
align-items:start}
.service-request-guide li b{
width:30px;
height:30px;
border-radius:10px;
background:rgba(255,255,255,.1);
display:grid;
place-items:center;
font-size:10px;
color:#c4b5fd}
.service-request-guide li p{
margin:4px 0;
color:#d1d5db;
font-size:11px;
line-height:1.5}
.service-guide-safe{
margin-top:20px;
padding:11px;
border-radius:11px;
background:rgba(16,185,129,.13);
color:#a7f3d0;
font-size:10px;
font-weight:800}

@media(max-width:980px){
.services-hero{
grid-template-columns:1fr;
padding:38px}
.services-hero-visual{
min-height:300px}
.services-category-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.service-request-layout{
grid-template-columns:1fr}
.services-flow{
grid-template-columns:1fr}
}

@media(max-width:680px){
.tp-services-shell{
padding:16px 14px 52px}
.services-hero{
padding:30px 22px;
border-radius:22px;
min-height:auto}
.services-hero h1{
font-size:38px}
.services-hero-visual{
display:none}
.services-trust-row{
gap:8px}
.services-category-grid,.services-request-grid{
grid-template-columns:1fr}
.services-section-head{
align-items:flex-start}
.service-category-hero-main{
grid-template-columns:1fr}
.service-category-hero-main .services-primary-btn{
justify-self:start}
.service-field-row{
grid-template-columns:1fr}
.services-empty{
align-items:flex-start;
flex-wrap:wrap}
.services-empty .services-primary-btn{
margin-left:0}
.service-form-actions{
flex-direction:column-reverse}
.service-form-actions a,.service-form-actions button{
width:100%}
}


.service-items-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px}
.service-item-tp-card{
display:grid;
grid-template-columns:34px 1fr auto;
align-items:center;
gap:12px;
padding:15px 16px;
border:1px solid #e6e9ef;
border-radius:16px;
background:#fff;
color:#111827;
text-decoration:none;
transition:.18s}
.service-item-tp-card:hover{
transform:translateY(-2px);
border-color:#c4b5fd;
box-shadow:0 12px 28px rgba(15,23,42,.07)}
.service-item-check{
width:34px;
height:34px;
border-radius:10px;
background:#f0fdf4;
color:#15803d;
display:grid;
place-items:center;
font-weight:900}
.service-item-tp-card h3{
margin:0;
font-size:13px;
line-height:1.35}
.service-item-tp-card p{
margin:4px 0 0;
color:#667085;
font-size:10.5px;
line-height:1.45}
.service-item-tp-card>b{
color:#7c3aed}
.service-request-item{
display:inline-block;
margin-top:10px;
padding:5px 7px;
border-radius:8px;
background:#f5f3ff;
color:#6d28d9;
font-size:9px;
font-weight:800}
.services-form select{
width:100%;
box-sizing:border-box;
padding:12px 13px;
border:1px solid #d0d5dd;
border-radius:12px;
background:#fff;
font:inherit}
.services-form select:focus{
outline:none;
border-color:#8b5cf6;
box-shadow:0 0 0 3px rgba(139,92,246,.1)}

@media(max-width:680px){
.service-items-grid{
grid-template-columns:1fr}
}


/* Services Category Cards V2 */
.services-category-marketplace{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px}

.premium-category-tp-card{
display:flex;
flex-direction:column;
gap:0;
padding:0;
overflow:hidden;
border-radius:22px;
min-height:320px;
position:relative;
background:#fff}

.premium-category-tp-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 48px rgba(15,23,42,.11);
border-color:#d8b4fe}

.premium-category-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
padding:20px 20px 8px}

.premium-category-top .services-category-icon{
width:64px;
height:64px;
border-radius:20px;
font-size:30px;
background:linear-gradient(135deg,#f5f3ff 0%,#ecfeff 100%);
box-shadow:inset 0 0 0 1px rgba(124,58,237,.05)}

.premium-category-count{
display:flex;
align-items:baseline;
gap:5px;
padding:7px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid #eef2f7;
color:#667085}

.premium-category-count b{
font-size:13px;
color:#6d28d9}

.premium-category-count span{
font-size:9px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em}

.premium-category-tp-card .services-category-copy{
display:flex;
flex-direction:column;
flex:1;
padding:8px 20px 18px}

.premium-category-tp-card .services-category-copy h3{
font-size:19px;
line-height:1.25;
margin:6px 0 8px}

.premium-category-description{
height:auto!important;
min-height:0!important;
margin:0 0 12px!important;
color:#667085!important;
font-size:11px!important}

.premium-category-preview{
display:grid;
gap:7px;
margin-top:4px}

.premium-category-preview span{
display:flex;
align-items:flex-start;
gap:7px;
font-size:10.5px;
line-height:1.4;
color:#475467}

.premium-category-preview i{
width:17px;
height:17px;
flex:0 0 17px;
border-radius:6px;
display:grid;
place-items:center;
background:#ecfdf3;
color:#027a48;
font-size:9px;
font-style:normal;
font-weight:900}

.premium-category-empty{
color:#98a2b3!important;
font-style:italic}

.premium-category-footer{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:auto;
padding-top:16px;
border-top:1px solid #eef0f4;
color:#6d28d9}

.premium-category-footer span{
font-size:10.5px;
font-weight:900}

.premium-category-footer b{
width:30px;
height:30px;
border-radius:10px;
background:#f5f3ff;
display:grid;
place-items:center;
font-size:14px}

@media(max-width:1040px){
.services-category-marketplace{
grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
.services-category-marketplace{
grid-template-columns:1fr}
.premium-category-tp-card{
min-height:0}
.premium-category-top{
padding:17px 17px 6px}
.premium-category-tp-card .services-category-copy{
padding:8px 17px 16px}
}


/* TimesPack Premium Purple marketplace finish */
.tp-food-public-main{
  background:
    radial-gradient(circle at 8% 0%, rgba(117,68,220,.13), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(91,43,191,.10), transparent 24%),
    #eee7ff!important;
}
.tp-food-subnav{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(91,43,191,.12);
  box-shadow:0 3px 18px rgba(50,21,111,.07);
}
.tp-food-hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(154,115,239,.30), transparent 30%),
    linear-gradient(118deg,#32156f 0%,#4b1fa5 48%,#7544dc 100%);
  box-shadow:0 12px 32px rgba(50,21,111,.18);
}
.tp-food-search{
  box-shadow:0 8px 28px rgba(50,21,111,.14);
}
.tp-food-search button{
  background:linear-gradient(135deg,#5b2bbf,#7544dc);
  box-shadow:0 6px 16px rgba(91,43,191,.25);
}
.tp-food-filterbar,
.tp-food-benefits{
  border:1px solid rgba(91,43,191,.10);
  box-shadow:0 8px 24px rgba(50,21,111,.07);
}
.tp-food-dish-card,
.tp-food-restaurant-card,
.tp-food-empty{
  border:1px solid rgba(91,43,191,.08);
  box-shadow:0 8px 24px rgba(50,21,111,.07);
}
.tp-food-dish-card:hover,
.tp-food-restaurant-card:hover{
  border-color:rgba(91,43,191,.20);
  box-shadow:0 12px 30px rgba(50,21,111,.12);
  transform:translateY(-2px);
}
.tp-food-location span,
.tp-food-section-head>div>span,
.tp-food-dish-copy span,
.tp-food-meta span:first-child{
  color:#5b2bbf;
}
.tp-food-logo-placeholder{
  background:linear-gradient(135deg,#e5d9ff,#f7f4ff);
  border:1px solid rgba(91,43,191,.10);
}
