/* Creative Services panel, rounded work frames, vine stacking, late refinements */
/* ===== Creative Services: 3D cinematic cover-flow of liquid-glass service cards ===== */
.svc{position:relative;--cw:min(780px,64vw);--ch:calc(var(--cw) * .6)}
.svc-stage{position:relative;height:calc(var(--ch) + 40px);perspective:1700px;perspective-origin:50% 40%;outline:none;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.svc-stage.dragging{cursor:grabbing}
.svc-stage:focus-visible{outline:2px solid rgba(248,246,239,.5);outline-offset:6px;border-radius:30px}
.svc-card{position:absolute;left:50%;top:20px;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);border-radius:28px;overflow:hidden;transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.22,1,.36,1),opacity .8s ease,filter 1.05s cubic-bezier(.22,1,.36,1);will-change:transform;
  box-shadow:0 60px 90px -50px rgba(0,0,0,.85),0 0 0 1px rgba(248,246,239,.10);background:#0a1806}
.svc-card.is-active{cursor:default}
.svc-media,.svc-media video{position:absolute;inset:0;width:100%;height:100%}
.svc-media video{object-fit:cover;transform:scale(1.08);transition:transform 6s cubic-bezier(.22,1,.36,1)}
.svc-card.is-active .svc-media video{transform:scale(1.0)}
.svc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,20,2,0) 35%,rgba(5,20,2,.55) 100%)}
/* liquid-glass caption plate */
.svc-glass{position:absolute;left:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);padding:clamp(18px,2.4vw,30px) clamp(20px,2.8vw,34px);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(248,246,239,.08) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.12),inset 0 0 26px rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.6);
  transform:translateZ(60px);transition:transform 1.05s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.svc-card:not(.is-active) .svc-glass{opacity:.0;transform:translateZ(0) translateY(16px)}
.svc-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);line-height:.92;letter-spacing:.005em;color:#fff;margin:0 0 12px;text-wrap:balance}
.svc-desc{font-size:clamp(14px,1.15vw,16.5px);line-height:1.55;color:rgba(255,255,255,.9);max-width:62ch;margin:0}
/* specular sheen that follows the pointer */
.svc-sheen{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s ease;mix-blend-mode:soft-light;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.55),rgba(255,255,255,0) 60%)}
.svc-card.is-active.hovering .svc-sheen{opacity:1}
.svc-glass{z-index:3}
/* controls: glass arrows + tabs with a sliding glass pill */
.svc-controls{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,18px);margin-top:clamp(14px,2vw,26px)}
.svc-arrow{position:static !important;transform:none !important;filter:none !important;flex:0 0 auto}
.svc-arrow:active{transform:scale(.94) !important}
.svc-tabs{position:relative;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(248,246,239,.06);border:1px solid rgba(248,246,239,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.svc-tab{position:relative;z-index:1;border:0;background:transparent;color:rgba(248,246,239,.7);font-family:var(--body);font-size:14px;font-weight:500;padding:10px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s ease}
.svc-tab[aria-selected="true"]{color:var(--green)}
@media (hover:hover) and (pointer:fine){.svc-tab:hover:not([aria-selected="true"]){color:#fff}}
.svc-tab:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.svc-tab-pill{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--paper);box-shadow:0 6px 18px -8px rgba(0,0,0,.6),inset 0 1px 0 #fff;
  transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1)}
/* cinematic entrance: cards fly in from depth the first time the section is seen */
.svc:not(.entered) .svc-card{opacity:0 !important;transform:translate3d(0,80px,-900px) rotateX(24deg) !important;transition:none}
@media (max-width:900px){.svc{--cw:84vw;--ch:calc(var(--cw) * 1.36)}.svc-tabs{display:none}.svc-stage{perspective:1100px}}
@media (max-width:900px) and (min-width:600px){.svc{--ch:calc(var(--cw) * .72)}}
@media (prefers-reduced-motion:reduce){.svc-card,.svc-glass,.svc-media video,.svc-tab-pill{transition:opacity .3s ease !important}.svc:not(.entered) .svc-card{transform:none !important}}
@media (prefers-reduced-transparency:reduce){.svc-glass{background:rgba(10,24,6,.88);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Text lives under the film now — the card is all picture */
.svc-card .svc-glass{display:none}
.svc-media::after{background:none}
.svc-stage{height:calc(var(--ch) + 28px)}
.svc-caption{position:relative;width:var(--cw);max-width:100%;margin:clamp(14px,1.8vw,22px) auto 0;padding:clamp(18px,2.2vw,28px) clamp(20px,2.8vw,34px);border-radius:24px;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(14px,2.6vw,40px);align-items:start;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(248,246,239,.035) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 24px rgba(255,255,255,.04),0 24px 50px -28px rgba(0,0,0,.7)}
.svc-cap-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.9vw,44px);line-height:.92;color:var(--paper);margin:0;text-wrap:balance}
.svc-cap-desc{font-size:clamp(14px,1.1vw,16.5px);line-height:1.6;color:rgba(248,246,239,.88);margin:0;max-width:62ch}
.svc-caption.swap .svc-cap-title,.svc-caption.swap .svc-cap-desc{opacity:0;transform:translateY(10px);filter:blur(4px)}
.svc-cap-title,.svc-cap-desc{transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),filter .45s ease}
.svc-cap-desc{transition-delay:.06s}
@media (max-width:900px){.svc{--ch:calc(var(--cw) * .62)}.svc-caption{grid-template-columns:1fr;gap:10px;width:92vw}}
@media (prefers-reduced-transparency:reduce){.svc-caption{background:rgba(10,24,6,.9);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Work previews: rounded media frames (matches the services cards) */
.v-card .frame{border-radius:24px;overflow:hidden;clip-path:inset(0 round 24px);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.v-card.reveal:not(.in) .frame{clip-path:inset(9% 7% round 24px)}
.v-card .frame .corner{display:none}
@media (max-width:760px){.v-card .frame{border-radius:18px;clip-path:inset(0 round 18px)}}

/* Services: the film carousel is gone (those films live in Work); the glass caption + tabs carry the section */
.svc-stage{display:none}
.svc-caption{margin-top:0;min-height:clamp(150px,13vw,190px);width:100%}
.svc-controls{justify-content:flex-start}
@media (max-width:900px){.svc-caption{min-height:280px}}
.v-head h2,.verticals h2{white-space:normal}

/* Vine continuity: in Equipment/Drone the tint overlay covered the vine (it dimmed at the border).
   Stack: background < 360 viewer < tint overlay < vine < copy */
.equipment .ribbon-slice,.drone .ribbon-slice{z-index:2}
.equipment .feature-grid,.drone .feature-grid{z-index:4}