body{
  background:
    radial-gradient(circle at 50% 12%,rgba(139,80,222,.16),transparent 28rem),
    radial-gradient(circle at 18% 36%,rgba(112,55,186,.12),transparent 28rem),
    radial-gradient(circle at 86% 54%,rgba(214,168,82,.06),transparent 25rem),
    linear-gradient(180deg,#04010a 0%,#090316 38%,#06020f 100%);
}
.visual-home-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  padding:34px 0 18px;
  text-align:center;
  isolation:isolate;
}
.visual-home-hero::before{
  content:"";
  position:absolute;
  inset:0 50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background:
    radial-gradient(circle at 50% 26%,rgba(151,89,244,.2),transparent 25rem),
    radial-gradient(circle at 50% 70%,rgba(214,168,82,.05),transparent 30rem),
    linear-gradient(180deg,rgba(4,1,13,.98),rgba(8,3,19,.76) 68%,rgba(8,3,19,0));
  pointer-events:none;
}
.visual-hero-copy{max-width:760px}
.visual-hero-copy .eyebrow{margin-bottom:14px}
.visual-hero-copy h1{
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(3.1rem,6vw,6rem);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.06em;
}
.visual-hero-copy h1 span{color:#cfadff}
.visual-hero-copy p{
  margin:16px auto 0;
  color:#c4bad1;
  font-size:clamp(1rem,1.7vw,1.17rem);
}
.visual-hero-art{
  display:block;
  width:auto;
  height:clamp(410px,57vh,610px);
  max-width:min(100%,760px);
  object-fit:contain;
  filter:drop-shadow(0 28px 70px rgba(0,0,0,.52));
}
.visual-hero-cue{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:-8px;
  color:#d9c5f6;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.14em;
  text-decoration:none;
  text-transform:uppercase;
}
.visual-hero-cue span{color:#b278ff;font-size:1.15rem}
.visual-services{
  position:relative;
  padding:34px 0 86px;
  scroll-margin-top:92px;
  isolation:isolate;
}
.visual-services::before{
  content:"";
  position:absolute;
  inset:-3rem 50% 0;
  width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background:
    radial-gradient(circle at 50% 10%,rgba(91,42,156,.16),transparent 28rem),
    radial-gradient(circle at 76% 46%,rgba(105,61,183,.09),transparent 25rem),
    radial-gradient(circle at 24% 78%,rgba(214,168,82,.04),transparent 26rem),
    linear-gradient(180deg,rgba(5,2,13,0),rgba(6,2,14,.86) 16%,rgba(5,2,12,.99) 100%);
  pointer-events:none;
}
.visual-services-heading{max-width:780px;margin:0 auto 30px;text-align:center}
.visual-services-heading .eyebrow{margin-bottom:14px}
.visual-services-heading h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:clamp(2.65rem,4.8vw,4.65rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.055em;
}
.visual-services-heading p{margin:14px auto 0;color:#c4bad1}
.service-tile-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.service-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(203,163,255,.25);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,12,35,.96),rgba(8,4,16,.99));
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 48px rgba(0,0,0,.3),0 0 0 1px rgba(100,54,158,.08) inset;
  transform:translateZ(0);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.service-tile:hover,.service-tile:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(218,183,255,.58);
  box-shadow:0 25px 58px rgba(68,25,125,.28);
  outline:none;
}
.service-tile-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#07030d}
.service-tile-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(180deg,transparent,rgba(7,3,13,.88));
  pointer-events:none;
}
.service-tile-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .42s ease,filter .42s ease;
}
.service-tile:hover .service-tile-media img,.service-tile:focus-visible .service-tile-media img{
  transform:scale(1.035);
  filter:saturate(1.08) brightness(1.04);
}
.service-tile-label{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 19px 20px;
  border-top:1px solid rgba(203,163,255,.15);
  background:linear-gradient(180deg,rgba(15,8,27,.96),rgba(8,4,17,.99));
}
.service-tile-label strong{
  font-family:Georgia,serif;
  font-size:clamp(1.22rem,1.9vw,1.62rem);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.035em;
}
.service-tile-label span{flex:0 0 auto;color:#b98aff;font-size:1.3rem}
.service-tile--wide{grid-column:span 1!important;justify-self:stretch!important;max-width:none!important}
.service-tile--wide .service-tile-media{aspect-ratio:4/5}
.visual-services-note{display:flex;justify-content:center;margin-top:22px;color:#9f94ad;font-size:.83rem}
@media(min-width:1180px){
  .visual-services{padding-top:20px}
  .visual-services-heading{margin-bottom:22px}
  .service-tile-grid{
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:10px;
  }
  .service-tile{border-radius:16px}
  .service-tile-label{
    min-height:58px;
    gap:8px;
    padding:11px 10px 12px;
  }
  .service-tile-label strong{
    font-size:clamp(.82rem,.84vw,1.05rem);
    line-height:1.03;
    letter-spacing:-.04em;
  }
  .service-tile-label span{font-size:.92rem}
}
@media(max-width:980px){
  .visual-home-hero{padding-top:28px}
  .visual-hero-art{height:clamp(390px,55vh,560px)}
  .service-tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .visual-home-hero{gap:12px;padding:24px 0 10px}
  .visual-hero-copy .eyebrow{margin-bottom:10px}
  .visual-hero-copy h1{font-size:clamp(2.85rem,14vw,4.35rem)}
  .visual-hero-copy p{margin-top:10px;font-size:.98rem}
  .visual-hero-art{width:100%;height:auto;max-height:490px}
  .visual-hero-cue{margin-top:-4px}
  .visual-services{padding:26px 0 66px}
  .visual-services-heading{margin-bottom:22px}
  .visual-services-heading p{font-size:.95rem}
  .service-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .service-tile,.service-tile--wide{grid-column:span 1!important;width:100%;justify-self:stretch!important}
  .service-tile{border-radius:18px}
  .service-tile-label{min-height:68px;padding:13px 13px 15px}
  .service-tile-label strong{font-size:clamp(1rem,5.2vw,1.25rem)}
  .service-tile-label span{font-size:1rem}
}
@media(max-width:390px){
  .service-tile-grid{gap:10px}
  .service-tile-label{padding-inline:11px}
  .service-tile-label strong{font-size:.98rem}
}
@media(prefers-reduced-motion:reduce){
  .service-tile,.service-tile-media img{transition:none}
}
