/* ATS homepage: 3D hero scene + depth styling */

/* ---------- Hero scene layer ---------- */
.hero .ats-hero-3d{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero.ats-hero-3d-ready .ats-hero-3d{opacity:1}
.hero > .wrap{position:relative;z-index:2}
.hero .hero-content h1,
.hero .hero-content p,
.hero .hero-content .eyebrow{text-shadow:0 2px 18px rgba(0,30,30,.55)}

/* Crisp lifted headings for the rest of the homepage (no blur) */
body.home main#top > section:not(.hero) :is(h2,h3,h4),
body.home main#top > section:not(.hero) .section-kicker,
body.home main#top > section:not(.hero) .service-num,
body.home main#top > section:not(.hero) .ats-engine-step :is(b,.engine-icon),
body.home main#top > section:not(.hero) .ats-micro-panels strong{
  text-shadow:0 1px 0 rgba(0,108,107,.16), 0 2px 0 rgba(0,108,107,.10), 0 3px 2px rgba(4,63,63,.10);
}
/* Body text stays sharp */
body.home main#top > .summary .summary-card,
body.home main#top > .summary .summary-card *{text-shadow:none !important}
body.home main#top > section:not(.hero) :is(p,li,small),
body.home main#top > section:not(.hero) .ats-micro-panels span,
body.home main#top > section:not(.hero) .engagement-path-card strong,
body.home main#top > section:not(.hero) .contact-detail :is(b,span,a){
  text-shadow:none;
}
/* Keep form fields and buttons crisp */
body.home main#top .form-wrap :is(input,textarea,label,button,.form-consent),
body.home main#top :is(.btn,button,.tag,.social-btn){text-shadow:none}

/* Dark panels (pricing header, contract add-on): a dark shadow disappears on navy,
   so lift the text with a deep shadow plus a faint teal halo */
body.home main#top .pricing-section-head :is(h2,h3){
  text-shadow:
    0 1px 0 #0d6b66,
    0 2px 0 #0b5f5b,
    0 3px 0 #09534f,
    0 4px 0 #074744,
    0 5px 0 #063c3a,
    0 12px 26px rgba(0,0,0,.7),
    0 0 42px rgba(127,230,220,.28) !important;
}
body.home main#top .pricing-section-head p{
  text-shadow:0 1px 0 #074744, 0 2px 0 #063c3a, 0 6px 14px rgba(0,0,0,.6) !important;
}
/* Contract add-on panel (light card): crisp 3D extrusion, no haze */
body.home main#top .addon :is(h2,h3){
  text-shadow:none !important;
}
body.home main#top .addon :is(p,li){
  text-shadow:none !important;
}
body.home main#top .addon :is(.badge,a,span,strong){
  text-shadow:none !important;
}

/* Short description under "Legal & Contract Management Services" */
html body.home main#top #services .addon p.addon-intro{
  margin:14px 0 0 !important;
  max-width:46ch;
  font-size:16px !important;
  line-height:1.65 !important;
  color:#4a6266 !important;
  -webkit-text-fill-color:#4a6266 !important;
  font-weight:400 !important;
}

/* "Performance aligned" pill: match the Add-on pill in the Legal panel */
html body.home main#top #pricing .pricing-addon span.badge{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:9px 18px 11px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f3faf8 60%,#fbf5ea 100%) !important;
  border:1px solid rgba(0,120,118,.20) !important;
  color:#064f4e !important;
  -webkit-text-fill-color:#064f4e !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgba(0,83,82,.10), 0 9px 18px rgba(7,55,55,.08) !important;
}
html body.home main#top #pricing .pricing-addon span.badge::before{
  content:'\2726';
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(145deg,#f2ae49,#d8912f);
  color:#fff;
  font-size:12px;
  letter-spacing:0;
  box-shadow:0 2px 0 rgba(150,90,20,.35);
}
html body.home main#top #pricing .pricing-addon span.badge::after{
  content:'';
  position:absolute;
  left:44px;
  right:16px;
  bottom:5px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#2fd3c8,#149df2 55%,#f2ae49);
}

/* "Explore Contract Management": match the homepage's primary teal 3D CTA */
html body.home main#top #services .addon a.addon-link{
  display:flex !important;
  width:fit-content !important;
  margin:22px auto 0 !important;
  padding:12px 22px !important;
  border-radius:14px !important;
  isolation:isolate;
  background:linear-gradient(145deg,#07918e 0%,#006c6b 48%,#004d4c 100%) !important;
  border:1px solid #00615f !important;
  border-bottom:3px solid #003f3e !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:700 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.08), 0 4px 0 #003f3e, 0 9px 18px rgba(4,63,63,.24) !important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
/* Glossy top highlight, as on "Start a conversation" */
html body.home main#top #services .addon a.addon-link::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  z-index:-1;
  left:7px; right:7px; top:3px;
  height:40%;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.23),rgba(255,255,255,0));
  pointer-events:none;
}
html body.home main#top #services .addon a.addon-link::after{
  content:none !important;
  display:none !important;
}
html body.home main#top #services .addon a.addon-link:hover,
html body.home main#top #services .addon a.addon-link:focus-visible{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:linear-gradient(145deg,#0aa4a1 0%,#007977 48%,#004d4c 100%) !important;
  transform:translateY(-3px) !important;
  filter:saturate(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.08), 0 6px 0 #003f3e, 0 14px 24px rgba(4,63,63,.28) !important;
}
html body.home main#top #services .addon a.addon-link:active{
  transform:translateY(1px) !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.12), 0 1px 0 #003f3e, 0 4px 9px rgba(4,63,63,.18) !important;
}
html body.home main#top #services .addon a.addon-link:focus-visible{outline:3px solid rgba(255,107,0,.34) !important;outline-offset:3px !important}
/* Give the pricing panel itself depth */
body.home main#top #pricing .pricing-section-head{
  background:
    radial-gradient(circle at 15% 0%, rgba(47,211,200,.16), transparent 45%),
    linear-gradient(160deg, #0a4747 0%, #062f33 55%, #04252a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 0 rgba(0,0,0,.25),
    0 6px 0 #021d21,
    0 22px 44px -10px rgba(2,29,33,.55) !important;
}

/* ---------- Depth styling below the hero ---------- */
.summary-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(4,63,63,.06),
    0 12px 24px rgba(4,63,63,.10),
    0 32px 64px -16px rgba(4,63,63,.22) !important;
}

.ats-depth-tilt{
  --ats-rx:0deg;
  --ats-ry:0deg;
  --ats-lift:0px;
  --ats-gx:50%;
  --ats-gy:50%;
  position:relative;
  transform:none !important;
  transition:transform .25s ease-out, box-shadow .25s ease-out !important;
}
.ats-depth-tilt:hover{
  transform:perspective(1000px) rotateX(var(--ats-rx)) rotateY(var(--ats-ry)) translateY(var(--ats-lift)) !important;
}
.ats-depth-tilt:hover{
  --ats-lift:-4px;
  box-shadow:
    0 2px 4px rgba(4,63,63,.06),
    0 14px 28px rgba(4,63,63,.12),
    0 36px 60px -20px rgba(4,63,63,.28) !important;
}
/* Headings stay flat on the card so text renders sharply */

@media (prefers-reduced-motion: reduce){
  .hero .ats-hero-3d{transition:none}
  .ats-depth-tilt{transform:none !important;transition:none !important}
  .hero .wrap > .ats-hero-portrait{transform:none !important}
  .hero .wrap > .ats-hero-portrait::before{animation:none !important;opacity:0 !important}
}

/* ---------- Hero portrait: 3D tilt + shimmer ---------- */
.hero .wrap > .ats-hero-portrait{
  --ats-prx:0deg;
  --ats-pry:0deg;
  --ats-pmx:50%;
  --ats-pmy:30%;
  --ats-pglow:0;
  overflow:hidden;
  isolation:isolate;
  transform:perspective(1100px) rotateX(var(--ats-prx)) rotateY(var(--ats-pry)) translateY(var(--ats-plift,0px)) !important;
  transform-style:preserve-3d;
  transition:transform .3s ease-out, box-shadow .3s ease-out !important;
  will-change:transform;
}
.hero .wrap > .ats-hero-portrait.is-tilting{transition:transform .08s linear, box-shadow .3s ease-out !important}
.hero .wrap > .ats-hero-portrait:hover,
.hero .wrap > .ats-hero-portrait:focus-visible{
  --ats-plift:-4px;
  box-shadow:
    0 0 0 1px rgba(127,230,220,.35),
    0 14px 0 rgba(0,83,82,.07),
    0 40px 90px rgba(10,53,54,.30),
    0 0 60px rgba(47,211,200,.18) !important;
}

/* Diagonal light band that sweeps across the photo */
.hero .wrap > .ats-hero-portrait::before{
  content:'';
  position:absolute;
  z-index:2;
  top:-20%;
  bottom:-20%;
  left:-60%;
  width:45%;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 30%,
    rgba(255,255,255,.55) 48%,
    rgba(200,255,248,.35) 52%,
    rgba(255,255,255,.05) 70%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  mix-blend-mode:soft-light;
  animation:ats-portrait-shimmer 5.5s cubic-bezier(.45,.05,.25,1) 1.2s infinite;
}
@keyframes ats-portrait-shimmer{
  0%{left:-60%;opacity:0}
  8%{opacity:1}
  38%{left:125%;opacity:1}
  42%,100%{left:125%;opacity:0}
}

/* Pointer-following iridescent sheen + glowing edge */
.hero .wrap > .ats-hero-portrait::after{
  content:'' !important;
  display:block !important;
  position:absolute;
  z-index:3;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--ats-pmx) var(--ats-pmy), rgba(255,255,255,.38) 0%, rgba(160,240,232,.16) 22%, rgba(255,255,255,0) 50%),
    linear-gradient(125deg, rgba(47,211,200,.10), rgba(20,157,242,.06) 35%, rgba(255,107,0,.07) 70%, rgba(112,204,61,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 40px rgba(127,230,220,.12);
  mix-blend-mode:soft-light;
  opacity:calc(.35 + var(--ats-pglow) * .65);
  transition:opacity .3s ease;
}
@media (prefers-reduced-motion: reduce){
  .hero .wrap > .ats-hero-portrait{transform:none !important;transition:none !important}
  .hero .wrap > .ats-hero-portrait::before{animation:none !important;opacity:0 !important}
}