/* =========================================================
   services.css
   Page-specific styles for the SERVICES page only.
   Loaded in addition to common.css, only on services.blade.php.

   Note: the source page's header/nav/drawer/footer markup and
   CSS (.site-nav, .hamburger, .side-drawer, .newsletter-section,
   footer, etc.) are dropped here since they duplicate what
   already lives in common.css + partials/header.blade.php +
   partials/footer.blade.php. Shared tokens (--ink, --gold,
   --gold-soft, --dark, --ease, --line, --sand, --sand-dim,
   --panel, --stone) and the .reveal/.reveal-stagger animation
   are reused as-is from common.css — only extra tokens unique to
   this page are added below, following the same light/dark
   pattern common.css already uses.
   ========================================================= */

:root{
  --muted-text:#5c5347;
  --border-subtle:rgba(20,16,13,.12);
  --section-alt-bg:var(--ink);
  --section-alt-text:var(--sand);
  --qn-active-bg:var(--ink);
  --qn-active-text:#fff;
  --qn-active-icon:var(--gold);
}
[data-theme="dark"]{
  --muted-text:var(--sand-dim);
  --border-subtle:rgba(255,255,255,.14);
  --section-alt-bg:var(--panel-2);
  --section-alt-text:var(--sand);
  --qn-active-bg:var(--gold);
  --qn-active-text:#141210;
  --qn-active-icon:#141210;
}

.eyebrow-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(20,16,13,.18); border-radius:40px; padding:6px 16px;
  font-size:.72rem; letter-spacing:1.4px; text-transform:uppercase; font-weight:700; color:var(--ink);
  margin-bottom:18px;
}
.eyebrow-chip.light{border-color:rgba(255,255,255,.25); color:#fff;}
.eyebrow-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

/* ============ PAGE HEADER (hero banner) ============ */
.page-header{
  position:relative; min-height:40vh; display:flex; align-items:flex-end; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,8,6,.35) 0%, rgba(8,6,5,.7) 60%, rgba(6,5,4,.95) 100%),
    radial-gradient(ellipse at 75% 25%, rgba(232,193,90,.16), transparent 55%),
    url('../img/project/Scene 2_1.png') center center / cover no-repeat;
}
.page-header-content{position:relative; z-index:2; padding-bottom:64px;}
.page-header .eyebrow{color:var(--sand-dim); font-size:13px; letter-spacing:.3px; display:flex; align-items:center; gap:8px;}
.page-header .eyebrow a{color:var(--sand-dim); transition:color .25s;}
.page-header .eyebrow a:hover{color:var(--gold);}
.page-header h1{color:#fff; font-size:clamp(38px,6vw,72px); margin:14px 0 0; font-weight:400;}
.page-header p.lede{color:var(--sand-dim); max-width:560px; margin:16px 0 0; font-size:1rem; line-height:1.75;}

/* ============ QUICK SERVICE NAV (jump links) ============ */
.service-quicknav{
  background:var(--bg-page); padding:28px 0;  top:0; z-index:20;
  border-bottom:1px solid var(--border-subtle);
  transition:background-color .4s ease, border-color .4s ease;
}
.qn-scroll{display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
.qn-scroll::-webkit-scrollbar{display:none;}
.qn-btn{
  flex-shrink:0; border:1px solid var(--border-subtle); background:transparent; color:var(--text-page);
  border-radius:40px; padding:10px 20px; font-size:13px; font-weight:600; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.qn-btn i{font-size:.95rem; color:var(--gold); transition:color .3s var(--ease);}
.qn-btn:hover, .qn-btn.active{background:var(--qn-active-bg); border-color:var(--qn-active-bg); color:var(--qn-active-text);}
.qn-btn:hover i, .qn-btn.active i{color:var(--qn-active-icon);}

/* ============ SERVICE BLOCKS ============ */
section.service-block{padding:100px 0; scroll-margin-top:150px; transition:background-color .4s ease;}
.service-block.alt{background:var(--section-alt-bg); color:var(--section-alt-text);}
.service-block.alt .service-text{color:var(--sand-dim);}
.service-block .index-num{
  font-family:'Fraunces',serif; font-size:.85rem; color:var(--gold); letter-spacing:2px; margin-bottom:10px; display:block;
}
.service-title{font-size:clamp(26px,3.2vw,40px); margin-bottom:20px; line-height:1.22;}
.service-text{color:var(--muted-text); font-size:.98rem; line-height:1.85; margin-bottom:22px;}

.service-icon-ring{
  width:64px; height:64px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:1.6rem;
  margin-bottom:26px; transition:transform .4s var(--ease), background .4s var(--ease);
}
.reveal.in .service-icon-ring{animation:iconPop .6s var(--ease) .15s both;}
@keyframes iconPop{0%{transform:scale(.6); opacity:0;}100%{transform:scale(1); opacity:1;}}

.feature-list{list-style:none; padding:0; margin:0 0 30px;}
.feature-list li{
  display:flex; align-items:flex-start; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border-subtle); font-size:.92rem;
}
.service-block.alt .feature-list li{border-bottom-color:rgba(255,255,255,.1);}
.feature-list li:last-child{border-bottom:none;}
.feature-list li i{color:var(--gold); font-size:1rem; margin-top:2px; flex-shrink:0;}

/* graphic "media" panel — shows a real photo (object-fit:cover) when an <img>
   is provided in the view, gradient classes below are the fallback/backdrop */
.service-media{
  position:relative; border-radius:16px; overflow:hidden; height:380px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 30px 70px rgba(20,16,13,.18);
  transition:transform .6s var(--ease);
}
.reveal.in .service-media{animation:mediaRise .8s var(--ease) both;}
@keyframes mediaRise{from{transform:translateY(26px) scale(.98); opacity:0;}to{transform:translateY(0) scale(1); opacity:1;}}
.service-media:hover{transform:translateY(-4px);}
.service-media i{font-size:5.5rem; color:rgba(255,255,255,.9); position:relative; z-index:2; filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));}
.service-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 55%);
}
.media-jv{background-image:linear-gradient(165deg,#c9a15a,#8a6a30 55%,#3a2c14),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 10px, transparent 10px 28px);}
.media-construction{background-image:linear-gradient(165deg,#8fb3c9,#3f5c70 55%,#212b32),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 20px, transparent 20px 40px);}
.media-interior{background-image:linear-gradient(165deg,#d7c3a4,#8a6a4c 55%,#3a2c20),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 12px, transparent 12px 30px);}
.media-facility{background-image:linear-gradient(165deg,#a2c2d4,#476579 55%,#232c33),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 14px, transparent 14px 32px);}

/* ============ VIVEK GROUP — LOGO SLIDER ============ */
.group-lede{max-width:640px; margin:0 auto 50px; text-align:center;}

.group-slider{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.group-track{
  display:flex; gap:28px; width:max-content;
  margin: 35px 0px;
  animation:groupScroll 22s linear infinite;
}
.group-slider:hover .group-track{animation-play-state:paused;}
@keyframes groupScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){.group-track{animation:none;}}

.group-card{
  position:relative; flex:0 0 340px; height:220px; border-radius:16px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.group-card:hover{transform:translateY(-8px); border-color:var(--gold); box-shadow:0 24px 50px rgba(0,0,0,.35);}

.group-logo{
  width:70px; height:70px; border-radius:50%; background:var(--gold-soft); border:1px solid var(--gold);
  color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; margin-bottom:16px;
  transition:transform .5s var(--ease), background .4s ease, color .4s ease;
}
.group-card:hover .group-logo{transform:rotate(-8deg) scale(1.08); background:var(--gold); color:#141210;}

.group-name{color:#fff; font-family:'Fraunces',serif; font-size:1.2rem; margin-bottom:6px;}
.group-tag{color:var(--sand-dim); font-size:.82rem; margin-bottom:14px; transition:opacity .35s ease, transform .35s ease;}

.group-reveal{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; background:linear-gradient(165deg, rgba(232,193,90,.96), rgba(180,140,60,.98));
  color:#181410; opacity:0; transform:translateY(100%); transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.group-card:hover .group-reveal{opacity:1; transform:translateY(0);}
.group-reveal h4{font-family:'Fraunces',serif; font-size:1.15rem; margin-bottom:8px;}
.group-reveal p{font-size:.84rem; line-height:1.6; margin-bottom:14px;}
.group-reveal .visit-link{font-size:.8rem; font-weight:700; display:inline-flex; align-items:center; gap:6px;}
.group-reveal .visit-link i{transition:transform .3s ease;}
.group-card:hover .group-reveal .visit-link i{transform:translateX(4px);}

@media (max-width:991px){
  section.service-block{padding:70px 0;}
  .service-media{height:280px; margin-top:36px;}
  .page-header{min-height:42vh;}
}
@media (max-width:575.98px){
  .group-card{flex-basis:280px; height:200px;}
}