/* ============================================================================
   Services — the hub (services.html) and the service pages built from it.
   Everything is drawn from ds.css tokens: the accent, the hairline, the radii,
   the type ladder. Motion is transform and opacity only, and all of it stands
   down under reduced motion.
   ============================================================================ */

/* ---- masthead: solid, like the other portal pages ---------------------- */
.mast.glass, .mast.glass.is-stuck{
  background:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid var(--divider-soft);
  box-shadow:none;
}
.mast.glass.is-stuck{ box-shadow:0 1px 14px -8px rgba(10,16,32,.22) }

/* ---- a grid of cards (the "keep exploring" row on each service page) --- */
.svc-grid{
  display:grid; gap:clamp(18px,2vw,28px); margin-top:var(--s-xxl);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}

/* ---- the card ---------------------------------------------------------- */
.svc-card{
  --mx:50%; --my:0%; --rx:0deg; --ry:0deg;
  position:relative; display:flex; flex-direction:column;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  text-decoration:none; color:var(--ink);
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--ease-out), border-color var(--dur-2) var(--ease),
             box-shadow .5s var(--ease-out);
}
.svc-card.is-tilting{ transition:border-color var(--dur-2) var(--ease), box-shadow .5s var(--ease-out),
                                  transform .12s linear }
/* the light follows the pointer across the card */
.svc-card::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),
             color-mix(in srgb,var(--c-accent-on-dark) 22%,transparent), transparent 60%);
  opacity:0; transition:opacity var(--dur-3) var(--ease);
}
.svc-card:hover, .svc-card:focus-visible{
  border-color:color-mix(in srgb,var(--c-accent) 40%,transparent);
  box-shadow:0 30px 60px -34px rgba(10,16,32,.42);
}
.svc-card:hover::after{ opacity:1 }
.svc-card:focus-visible{ outline-offset:4px }

.svc-card__media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:
    radial-gradient(90% 90% at 80% 0%, color-mix(in srgb,var(--c-accent) 18%,#fff) 0%, transparent 70%),
    var(--canvas-parchment);
}
.svc-card__media img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  transform:scale(1.02); transition:transform 1.1s var(--ease-out);
}
.svc-card:hover .svc-card__media img{ transform:scale(1.09) }
.svc-card__tag{
  position:absolute; left:14px; top:14px; z-index:1;
  font:var(--t-fine); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-accent-text); background:rgba(255,255,255,.92);
  padding:6px 10px; border-radius:var(--r-pill);
  box-shadow:0 4px 14px -8px rgba(10,16,32,.4);
}

.svc-card__body{ display:flex; flex-direction:column; gap:var(--s-xs); padding:var(--s-lg); flex:1 }
.svc-card__ico{
  width:44px; height:44px; border-radius:12px; margin-top:-46px; margin-bottom:var(--s-xs);
  position:relative; z-index:1;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, color-mix(in srgb,var(--c-accent) 78%,#fff), var(--c-accent));
  box-shadow:0 10px 22px -10px rgba(32,66,137,.7), 0 0 0 4px #fff;
  transition:transform .6s var(--ease-out);
}
.svc-card:hover .svc-card__ico{ transform:translateY(-4px) rotate(-6deg) }
.svc-card__ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
                    stroke-linecap:round; stroke-linejoin:round }
.svc-card h3{ font:var(--t-tagline); letter-spacing:.1px; margin:0 }
.svc-card p{ font:var(--t-body); letter-spacing:var(--track-body); color:var(--ink-muted-80); margin:0 }
.svc-card__more{
  margin-top:auto; padding-top:var(--s-md);
  display:inline-flex; align-items:center; gap:8px;
  font:var(--t-caption-strong); color:var(--c-accent-text);
}
.svc-card__more svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
                     stroke-linecap:round; stroke-linejoin:round;
                     transition:transform var(--dur-2) var(--ease-out) }
.svc-card:hover .svc-card__more svg{ transform:translateX(5px) }

/* entrance: the grid is a .reveal, so each item rises on its own delay. The
   tilt lives on the card inside it, so the two transforms never share a
   transition and the pointer is not held back by the entrance stagger. */
.svc-grid{ list-style:none; padding:0 }
.svc-grid > li{ display:flex }
.svc-grid > li > .svc-card{ flex:1 }
.js .svc-grid.reveal > *{
  transform:translateY(38px) scale(.965);
  transition-duration:.95s;
  transition-delay:calc(var(--i,0) * 90ms);
}

@media (prefers-reduced-motion:reduce){
  .svc-card, .svc-card__media img, .svc-card__ico, .svc-card__more svg{ transition:none }
  .svc-card:hover .svc-card__media img{ transform:scale(1.02) }
  .svc-card:hover .svc-card__ico{ transform:none }
}

/* ============================ a service page ============================ */
.svc-crumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font:var(--t-caption); color:#C6D2EC; margin:0 0 var(--s-md);
}
.svc-crumb a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3) }
.svc-crumb a:hover{ border-bottom-color:#fff }

/* The header renders are wide, cut-out compositions on white. They sit on a
   white plate that rides up over the bottom of the head, so the picture reads
   as lifted out of it rather than pasted onto the gradient. */
.svc-banner{ padding-inline:var(--pad-x); margin-top:calc(clamp(56px,8vh,96px) * -1); position:relative; z-index:2 }
.svc-banner figure{
  max-width:var(--maxw); margin:0 auto; background:#fff;
  border-radius:var(--r-lg); padding:clamp(14px,2.4vw,36px);
  box-shadow:0 40px 80px -46px rgba(10,16,32,.45), 0 2px 10px -4px rgba(10,16,32,.12);
}
.svc-banner img{ width:100%; height:auto; border-radius:var(--r-sm) }
.phero--svc{ padding-bottom:clamp(110px,16vh,170px) }
/* these intros run three or four times the length of a channel page's lede,
   so they take the airy reading size rather than the display one */
.phero--svc .phero__copy .lede{ font:var(--t-lead-airy); max-width:64ch }

/* ---- tabs -------------------------------------------------------------- */
.svc-tabs{
  position:sticky; top:var(--nav-h); z-index:var(--z-sticky);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.svc-tabs__list{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x);
  display:flex; gap:clamp(18px,3vw,40px); overflow-x:auto; scrollbar-width:none;
  position:relative;
}
.svc-tabs__list::-webkit-scrollbar{ display:none }
.svc-tab{
  appearance:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:20px 0 18px; font:600 15px/1.2 var(--font-text); letter-spacing:var(--track-caption);
  color:var(--ink-muted-48); transition:color var(--dur-1) var(--ease);
  display:inline-flex; align-items:center; gap:8px;
}
.svc-tab:hover{ color:var(--ink) }
.svc-tab[aria-selected="true"]{ color:var(--c-accent-text) }
.svc-tab:focus-visible{ outline-offset:-2px }
.svc-tab small{
  font:var(--t-fine); font-weight:600; padding:3px 7px; border-radius:var(--r-pill);
  background:var(--canvas-parchment); color:var(--ink-muted-48);
}
.svc-tab[aria-selected="true"] small{ background:color-mix(in srgb,var(--c-accent) 12%,#fff); color:var(--c-accent-text) }
.svc-tabs__ink{
  position:absolute; bottom:-1px; left:0; height:2px; width:0;
  background:var(--c-accent); border-radius:2px;
  transition:transform .45s var(--ease-out), width .45s var(--ease-out);
}

.svc-panel[hidden]{ display:none }
@media (max-width:480px){
  .svc-tabs__list{ gap:18px; justify-content:space-between }
  .svc-tab{ font-size:14px; padding:17px 0 15px }
  .svc-tab small{ display:none }
}
.svc-panel.is-entering{ animation:svc-panel-in .6s var(--ease-out) both }
@keyframes svc-panel-in{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

.svc-points{
  display:grid; gap:clamp(16px,2vw,24px); margin-top:var(--s-xxl);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  counter-reset:pt;
}
.svc-point{
  counter-increment:pt; position:relative;
  background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--s-lg); padding-top:calc(var(--s-lg) + 36px);
  transition:transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-3) var(--ease-out);
}
.section--sunken .svc-point{ background:#fff }
.svc-point::before{
  content:counter(pt, decimal-leading-zero);
  position:absolute; left:var(--s-lg); top:var(--s-lg);
  font:600 13px/1 var(--font-text); letter-spacing:.08em; color:var(--c-accent-text);
  padding:6px 9px; border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c-accent) 9%,#fff);
}
.svc-point:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c-accent) 32%,transparent);
  box-shadow:0 20px 40px -30px rgba(10,16,32,.4);
}
.svc-point h3{ font:var(--t-body-strong); letter-spacing:var(--track-body); margin:0 0 var(--s-xs) }
.svc-point p{ font:var(--t-body); letter-spacing:var(--track-body); color:var(--ink-muted-80); margin:0 }

.svc-figure{ margin:clamp(40px,5vw,72px) 0 0 }
.svc-figure img{ width:100%; height:auto; border-radius:var(--r-lg) }
.svc-gallery{
  display:grid; gap:clamp(14px,2vw,24px); margin:clamp(40px,5vw,72px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.svc-gallery img{
  width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg);
  border:1px solid var(--hairline); background:#fff;
}
.svc-close{ margin-top:var(--s-xxl); font:var(--t-lead-airy); color:var(--ink-muted-80); max-width:60ch }

/* the use-case tab until the case material is uploaded */
.svc-empty{
  margin-top:var(--s-xxl); padding:clamp(40px,6vw,80px) var(--s-lg);
  border:1.5px dashed var(--hairline); border-radius:var(--r-lg);
  text-align:center; display:grid; justify-items:center; gap:var(--s-sm);
}
.svc-empty svg{ width:44px; height:44px; fill:none; stroke:var(--c-accent); stroke-width:1.5;
                stroke-linecap:round; stroke-linejoin:round; opacity:.8 }
.svc-empty h3{ font:var(--t-tagline); margin:0 }
.svc-empty p{ font:var(--t-body); color:var(--ink-muted-48); margin:0; max-width:44ch }

/* the other services, at the foot of each page */
.svc-next{ display:flex; justify-content:space-between; align-items:end; gap:var(--s-lg); flex-wrap:wrap }

.outro{ text-align:center }
.outro .h1, .outro .lede{ margin-inline:auto }

@media (prefers-reduced-motion:reduce){
  .svc-panel.is-entering{ animation:none }
  .svc-tabs__ink, .svc-point{ transition:none }
  .svc-point:hover{ transform:none }
}